@font-face {
    font-family: "Tofell Vazirmatn";
    src:
        url("../fonts/vazirmatn/Vazirmatn[wght].woff2")
        format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;

    /* Apply Vazirmatn only to Persian/Arabic characters. */
    unicode-range:
        U+0600-06FF,
        U+0750-077F,
        U+0870-089F,
        U+08A0-08FF,
        U+200C-200D,
        U+FB50-FDFF,
        U+FE70-FEFF;
}

/*
Persian and Arabic characters use B Nazanin.

unicode-range prevents B Nazanin from replacing English characters.
For mixed text such as "Project اقدسیه", the browser uses:
- Segoe UI for "Project"
- B Nazanin for "اقدسیه"
*/
@font-face {
    font-family: "Tofell Persian";
    src: url("../fonts/BNazanin.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range:
        U+0600-06FF,
        U+0750-077F,
        U+0870-089F,
        U+08A0-08FF,
        U+FB50-FDFF,
        U+FE70-FEFF;
}

@font-face {
    font-family: "Tofell Persian";
    src: url("../fonts/BNaznnBd.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    unicode-range:
        U+0600-06FF,
        U+0750-077F,
        U+0870-089F,
        U+08A0-08FF,
        U+FB50-FDFF,
        U+FE70-FEFF;
}

:root {
    color-scheme: light;

    /* SALONIA-inspired cool mineral surfaces. */
    --bg: #ececea;
    --surface: #f8f8f5;
    --surface-subtle: #f0f0ed;
    --surface-strong: #d7d7d3;
    --topbar: #d7d7d3;

    /* Text */
    --ink: #141414;
    --ink-soft: #2f312f;
    --muted: #5d625f;

    /* Boundaries */
    --line: #d0d0cb;
    --line-strong: #aaa9a3;

    /* Main action color */
    /* Primary: Architectural teal */
    /* Primary: Drawing gold */
    --primary: #a87308;
    --primary-hover: #805705;
    --primary-soft: #eee1c0;
    --on-primary: #151109;

    /* Keep existing components working */
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-soft: var(--primary-soft);

    /* Secondary: Drawing gold */
    --secondary: #297c7b;
    --secondary-hover: #1e6160;
    --secondary-soft: #dbe9e7;
    --on-secondary: #ffffff;

    /* Supporting colors */
    --blue: #426f9d;
    --blue-soft: #dfe7ef;

    --violet: #7656c7;
    --violet-soft: #eee8ff;

    --cyan: #078c9e;
    --cyan-soft: #dff5f7;

    --success: #23844e;
    --success-soft: #e0f4e8;

    --warning: #a94f34;
    --warning-soft: #f0ddd6;
    --rust: #a94f34;

    --danger: #b91f2c;
    --danger-hover: #941722;
    --danger-soft: #f9dadd;

    --shadow:
        0 1px 2px rgb(27 43 56 / 6%),
        0 8px 24px rgb(27 43 56 / 8%);

    --sidebar: #414545;
    --sidebar-text: #f4f2ec;
    --sidebar-muted: #bbbdb9;

    /* Structural layout tokens */
    --sidebar-width: 220px;
    --topbar-height: 72px;
    --content-max: 1580px;
    --radius: 2px;
    --font-display:
        "Tofell Persian",
        "Palatino Linotype",
        Palatino,
        Georgia,
        serif;

    --font-ui:
        "Tofell Persian",
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;

    --font-persian:
        "Tofell Persian",
        Tahoma,
        "Segoe UI",
        sans-serif;

    color: var(--ink);
    background: var(--bg);
    font-family: var(--font-ui);
    font-synthesis: none;
}

html[data-font-style="modern"] {
    --font-display:
        "Tofell Vazirmatn",
        "Segoe UI Variable Display",
        "Segoe UI",
        Tahoma,
        sans-serif;

    --font-ui:
        "Tofell Vazirmatn",
        "Segoe UI Variable Text",
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;

    --font-persian:
        "Tofell Vazirmatn",
        Tahoma,
        "Segoe UI",
        sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* Graphite foundation instead of absolute black. */
    --bg: #0d0f10;
    --surface: #16191b;
    --surface-subtle: #1c2023;
    --surface-strong: #252a2e;
    --topbar: #121517;

    /* Warm white is easier on the eyes than pure white. */
    --ink: #f2efe8;
    --ink-soft: #d5d2ca;
    --muted: #aeb4b5;

    /* Visible structure without bright outlines. */
    --line: #292f33;
    --line-strong: #3d464b;

    /* Warm architectural gold. */
    --primary: #d3ad58;
    --primary-hover: #e5c46f;
    --primary-soft: #342a17;
    --on-primary: #171107;

    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-soft: var(--primary-soft);

    /* Restrained mineral teal. */
    --secondary: #628f8d;
    --secondary-hover: #78a8a5;
    --secondary-soft: #172826;
    --on-secondary: #f1f7f6;

    /* Supporting colors remain muted. */
    --blue: #7296b8;
    --blue-soft: #192632;

    --violet: #9d89c8;
    --violet-soft: #29243a;

    --cyan: #62a8ae;
    --cyan-soft: #183034;

    --success: #68b987;
    --success-soft: #193426;

    --warning: #d18a61;
    --warning-soft: #38241a;
    --rust: #bd7355;

    --danger: #ff5260;
    --danger-hover: #ff6f79;
    --danger-soft: #451b22;

    --shadow:
        0 1px 2px rgb(0 0 0 / 32%),
        0 18px 42px rgb(0 0 0 / 24%);

    --sidebar: #303535;
    --sidebar-text: #f2efe8;
    --sidebar-muted: #a7acab;
}

html[data-theme="dark"] .topbar {
    background: color-mix(in srgb, var(--topbar) 96%, transparent);
    border-color: var(--line);
}

html[data-theme="dark"] .editor-actions {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border-color: var(--line);
}

.nav-link:hover {
    background: #91895a;
    color: #11120b;
}

.nav-link.is-active {
    background: #817a4f;
    border-color: #69633e;
    color: #ffffff;
}

.nav-link.is-active svg {
    color: var(--primary);
}

html[data-theme="dark"] .data-table thead th {
    background: var(--surface-strong);
    color: var(--ink-soft);
}

html[data-theme="dark"] .data-table tbody tr:hover td {
    background: #293b49;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main-column {
    background: var(--bg);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .editor-section,
html[data-theme="dark"] .detail-section,
html[data-theme="dark"] .data-surface,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .catalog-selection-bar,
html[data-theme="dark"] .locked-identity {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color: var(--ink);
    background: var(--surface-subtle);
    border-color: var(--line);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--muted);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: var(--accent);
    outline-color: var(--accent);
}

html[data-theme="dark"] .finance-preview {
    background: var(--surface-subtle);
    border-color: var(--line);
}

html[data-theme="dark"] .finance-preview strong {
    color: var(--primary);
}

html[data-theme="dark"] .button--secondary,
html[data-theme="dark"] .button--ghost,
html[data-theme="dark"] .icon-button {
    color: var(--ink-soft);
    background: var(--surface-subtle);
    border-color: var(--line);
}

html[data-theme="dark"] .button--secondary:hover,
html[data-theme="dark"] .button--ghost:hover,
html[data-theme="dark"] .icon-button:hover {
    color: var(--ink);
    background: var(--surface-strong);
}

html[data-theme="dark"] .quick-dialog,
html[data-theme="dark"] .typed-delete-dialog {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .action-menu {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow);
}

html[data-theme="dark"] .data-table tbody tr:hover {
    background: var(--surface-subtle);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    letter-spacing: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke-width: 1.8;
}

h1,
h2,
h3,
p,
dl,
dd {
    margin-top: 0;
}

h1 {
    margin-bottom: 6px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}

h2 {
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

h3 {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    inset-inline-start: 12px;
    padding: 8px 12px;
    color: #fff;
    background: var(--accent);
    border-radius: var(--radius);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.app-shell--auth {
    display: block;
}

.app-shell--auth .main-column {
    width: 100%;
    grid-column: 1;
}

.app-shell--auth .topbar {
    justify-content: flex-end;
}

.sidebar {
    position: fixed;
    z-index: 40;
    inset-block: 0;
    inset-inline-start: 0;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    color: var(--sidebar-text);
    background: var(--sidebar);
    border-inline-end: 1px solid #2c3932;
}

.brand-lockup {
    display: flex;
    height: var(--topbar-height);
    align-items: center;
    gap: 11px;
    padding: 0 18px;
    border-bottom: 1px solid #2c3932;
}

.brand-lockup > span:last-child {
    display: grid;
    line-height: 1.15;
}

.brand-lockup strong {
    font-size: 16px;
    font-weight: 700;
}

.brand-lockup small {
    margin-top: 3px;
    color: var(--sidebar-muted);
    font-size: 11px;
}

.brand-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #e7fffa;
    background: #0f766e;
    border: 1px solid #319188;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 760;
}

.primary-nav {
    flex: 1;
    padding: 18px 10px;
    overflow-y: auto;
}

.nav-label {
    margin: 0 10px 7px;
    color: var(--sidebar-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.nav-label--spaced {
    margin-top: 26px;
}

.nav-link {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    color: #b9c8c0;
    border: 1px solid transparent;
    border-radius: 5px;
    font-weight: 560;
}

.nav-link + .nav-link {
    margin-top: 3px;
}

html[data-theme="dark"] .nav-link:hover {
    background: #4a4733;
}

html[data-theme="dark"] .nav-link.is-active {
    background: #5a563b;
    border-color: #77714c;
    color: #ffffff;
}

html[data-theme="dark"] .nav-link.is-active svg {
    color: var(--primary);
}

.sidebar-footer {
    display: flex;
    min-height: 54px;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    color: var(--sidebar-muted);
    border-top: 1px solid #2c3932;
    font-size: 12px;
}

.environment-dot {
    width: 7px;
    height: 7px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(
        in srgb,
        var(--success) 18%,
        transparent
    );
}

.sidebar-scrim {
    display: none;
}

.main-column {
    grid-column: 2;
    min-width: 0;
}

.topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    display: flex;
    height: var(--topbar-height);
    align-items: center;
    gap: 18px;
    padding: 0 26px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
}

.sidebar-toggle {
    display: inline-flex;
    flex: 0 0 auto;
}

.global-search {
    position: relative;
    display: flex;
    width: min(480px, 50vw);
    height: 38px;
    align-items: center;
}

.global-search svg {
    position: absolute;
    left: 11px;
    width: 16px;
    color: var(--muted);
    pointer-events: none;
}

.global-search input {
    width: 100%;
    height: 38px;
    padding: 0 48px 0 36px;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 6px;
    outline: none;
}

.global-search input:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.global-search kbd {
    position: absolute;
    right: 9px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.topbar-sort {
    position: relative;
    flex: 0 0 auto;
}

.topbar-sort__trigger {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;

    color: var(--ink-soft);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    cursor: pointer;
}

.topbar-sort__trigger:hover,
.topbar-sort.is-open .topbar-sort__trigger {
    color: var(--ink);
    background: var(--surface-strong);
    border-color: var(--line);
}

.topbar-sort__trigger svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}

.topbar-sort__trigger svg:last-child {
    width: 13px;
    height: 13px;
}

.topbar-sort__menu {
    position: absolute;
    z-index: 100;
    top: calc(100% + 8px);
    left: 0;
    width: 210px;
    padding: 7px;

    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    box-shadow: var(--shadow);
}

.topbar-sort__menu[hidden] {
    display: none;
}

.topbar-sort__menu button {
    display: grid;
    width: 100%;
    min-height: 34px;
    grid-template-columns: 14px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;

    color: var(--ink-soft);
    background: transparent;
    border: 0;
    border-radius: 3px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.topbar-sort__menu button:hover {
    color: var(--ink);
    background: var(--surface-strong);
}

.topbar-sort__menu button.is-selected {
    color: var(--ink);
}

.topbar-sort__indicator {
    width: 5px;
    height: 5px;
    justify-self: center;
    background: transparent;
    border-radius: 50%;
}

.topbar-sort__menu button.is-selected
.topbar-sort__indicator {
    background: currentColor;
}

.topbar-sort__menu button svg {
    width: 15px;
    height: 15px;
    justify-self: end;
}

.topbar-sort__separator {
    height: 1px;
    margin: 6px 5px;
    background: var(--line);
}

.user-identity--muted {
    color: var(--muted);
    font-weight: 500;
}

.user-avatar {
    display: grid;
    width: 30px;
    height: 30px;
    overflow: hidden;
    place-items: center;
    color: #fff;
    background: var(--blue);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}

.user-avatar img,
.account-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.main-content {
    width: min(100%, var(--content-max));
    margin: 0 auto;
    padding: 34px 34px 72px;
    outline: none;
}

.message-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;

    display: grid;
    width: min(360px, calc(100vw - 32px));
    gap: 8px;

    /* It no longer occupies space at the top of the page. */
    margin: 0;
    pointer-events: none;
}

.message {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    background: var(--blue-soft);
    border: 1px solid #bfd0ff;
    border-radius: var(--radius);

    pointer-events: auto;
    box-shadow: var(--shadow);
    animation: message-enter 180ms ease-out;
}

.message.is-leaving {
    animation: message-leave 180ms ease-in forwards;
}

@keyframes message-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes message-leave {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (max-width: 600px) {
    .message-stack {
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
    }
}

.page-header {
    position: relative;
    margin-bottom: 28px;
}

.page-header--actions,
.resource-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.page-header--narrow,
.focused-form {
    max-width: 820px;
    margin-right: auto;
    margin-left: auto;
}

.eyebrow,
.section-kicker {
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
}

.page-summary {
    margin-bottom: 0;
    color: var(--muted);
}

.back-link,
.text-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.back-link {
    margin-bottom: 17px;
}

.back-link:hover,
.text-action:hover {
    color: var(--accent);
}

.back-link svg,
.text-action svg {
    width: 15px;
    height: 15px;
}

.page-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.header-actions,
.editor-actions__buttons,
.form-actions,
.confirmation-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.button,
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.button:focus-visible,
.icon-button:focus-visible,
.nav-link:focus-visible,
.detail-nav a:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: 2px;
}

.button--primary {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.button--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.button--secondary {
    color: var(--ink-soft);
    background: var(--surface);
    border-color: var(--line-strong);
}

.button--secondary:hover {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: #8ec7be;
}

.button--ghost {
    color: var(--muted);
    background: transparent;
}

.button--ghost:hover {
    color: var(--ink);
    background: var(--surface-strong);
}

.button--danger {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.button--danger:hover {
    background: var(--danger-hover);
    border-color: var(--danger-hover);
}

.button--small {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
}

.button--full {
    width: 100%;
}

.icon-button {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border-color: transparent;
}

.icon-button:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.icon-button.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.status-badge,
.tag {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    color: var(--muted);
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.status-badge--large {
    min-height: 30px;
    padding: 5px 11px;
    font-size: 12px;
}

.status-badge[data-status="active"],
.status-badge[data-status="published"] {
    color: var(--success);
    background: var(--success-soft);
    border-color: #b7dec4;
}

.status-badge[data-status="draft"] {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: #efd09b;
}

.status-badge[data-status="retired"],
.status-badge[data-status="inactive"] {
    color: #68716c;
    background: #eef1ef;
    border-color: #d2d8d4;
}

.filter-bar {
    display: grid;
    grid-template-columns: minmax(230px, 1.7fr) repeat(4, minmax(130px, 0.75fr)) auto auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
    padding: 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.filter-bar label {
    display: grid;
    gap: 5px;
}

.filter-bar label > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.filter-bar select,
.filter-bar input {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    outline: none;
}

.filter-search {
    position: relative;
}

.filter-search svg {
    position: absolute;
    top: 11px;
    left: 11px;
    width: 16px;
    color: var(--muted);
}

.filter-search input {
    padding-left: 36px;
}

.button--filter {
    height: 38px;
}

.data-surface,
.history-panel,
.schema-list {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.data-table th {
    height: 42px;
    padding: 8px 14px;
    color: var(--muted);
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    font-weight: 750;
    text-align: start;
    text-transform: uppercase;
}

.data-table td {
    height: 64px;
    padding: 10px 14px;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:hover td {
    background: var(--surface-subtle);
}

.data-table--compact td {
    height: 52px;
}

.primary-cell,
.secondary-cell {
    display: block;
}

.primary-cell {
    color: var(--ink);
    font-weight: 680;
}

a.primary-cell:hover {
    color: var(--accent);
}

.secondary-cell {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.row-actions {
    width: 92px;
    text-align: right;
    white-space: nowrap;
}

.row-actions .icon-button {
    display: inline-flex;
}

.table-empty {
    color: var(--muted) !important;
    text-align: center;
}

.money-cell {
    color: var(--ink) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 680;
}

.empty-state {
    display: grid;
    min-height: 250px;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: var(--muted);
    text-align: center;
}

.empty-state > svg {
    width: 34px;
    height: 34px;
    color: #92a099;
}

.empty-state h2 {
    color: var(--ink-soft);
    font-size: 15px;
}

.empty-state--compact {
    min-height: 150px;
}

.pagination {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 8px 16px;
    border-top: 1px solid var(--line);
}

.pagination-summary {
    color: var(--muted);
    font-size: 12px;
}

.pagination-actions {
    display: flex;
    gap: 3px;
}

.editor-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.editor-form--contained {
    max-width: 1120px;
}

.editor-section {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 34px;
    padding: 30px;
    border-bottom: 1px solid var(--line);
}

.section-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.section-heading--compact {
    margin-bottom: 24px;
}

.section-heading .section-kicker {
    margin-bottom: 2px;
}

.section-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid #c5e3dd;
    border-radius: 6px;
}

.section-icon svg {
    width: 17px;
    height: 17px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
    align-items: start;
}

.form-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.form-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.form-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.form-field--wide,
.form-field--toggle {
    grid-column: 1 / -1;
}

.form-field > label,
.standalone-field > span {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

/* Put the field name and required seal on opposite sides. */
.form-field > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

/* Hidden by default across the system. */
.required-seal {
    display: none;
    flex: 0 0 auto;
    color: #c51f28;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
    font-size: 20px;
    line-height: 1;
    text-shadow:
        0 0 4px rgb(197 31 40 / 55%),
        0 1px 1px rgb(65 0 4 / 60%);
}

/* Always visible only inside explicitly marked forms. */
.show-required-seals .required-seal {
    display: inline-block;
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea,
.standalone-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 9px 11px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    outline: none;
}

.form-field select {
    padding-inline-end: 30px;
}

.form-field textarea,
.standalone-field textarea {
    min-height: 92px;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.standalone-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled {
    color: var(--muted);
    background: var(--surface-strong);
    cursor: not-allowed;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    border-color: var(--danger);
}

.field-help,
.field-error {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
}

.field-help {
    color: var(--muted);
}

.field-error {
    color: var(--danger);
    font-weight: 600;
}

.form-alert {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid #efbdb7;
    border-radius: 5px;
}

.form-alert p {
    margin: 0;
}

.toggle-control {
    display: inline-grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.toggle-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-track {
    position: relative;
    width: 38px;
    height: 22px;
    background: #cbd4cf;
    border-radius: 999px;
    transition: background 150ms ease;
}

.toggle-track::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    content: "";
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 150ms ease;
}

.toggle-control input:checked + .toggle-track {
    background: var(--accent);
}

.toggle-control input:checked + .toggle-track::after {
    transform: translateX(16px);
}

.toggle-control input:focus-visible + .toggle-track {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 2px;
}

.toggle-copy {
    display: grid;
}

.toggle-copy strong {
    font-size: 12px;
}

.toggle-copy small {
    color: var(--muted);
    font-size: 11px;
}

.specification-panel + .specification-panel:not([hidden]) {
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid var(--line);
}

.formset {
    min-width: 0;
}

.formset-rows {
    display: grid;
    gap: 10px;
}

.formset-row {
    position: relative;
    padding: 17px;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.formset-row.is-removed {
    display: none;
}

.row-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 13px;
    padding: 5px 7px;
    color: var(--danger);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
}

.row-remove:hover {
    background: var(--danger-soft);
    border-radius: 4px;
}

.row-remove svg {
    width: 14px;
    height: 14px;
}

.formset-add {
    margin-top: 11px;
}

.editor-actions {
    position: sticky;
    z-index: 20;
    bottom: 0;
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 20px;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 -8px 24px rgba(23, 33, 28, 0.05);
}

.focused-form {
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.focused-form--flush {
    max-width: none;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
}

.form-actions {
    justify-content: flex-end;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.action-menu-trigger {
    border-color: var(--line);
}

.action-menu {
    position: absolute;
    z-index: 35;
    top: calc(100% + 8px);
    right: 0;
    width: 210px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow);
}

.action-menu a {
    display: block;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.action-menu a:hover {
    background: var(--surface-strong);
}

.action-menu .danger-link {
    color: var(--danger);
}

.detail-nav {
    position: sticky;
    z-index: 15;
    top: var(--topbar-height);
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.detail-nav a {
    min-height: 34px;
    padding: 7px 10px;
    color: var(--muted);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.detail-nav a:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.detail-nav a.is-active {
    color: var(--accent);
    background: var(--accent-soft);
}

.detail-section {
    padding: 28px 30px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    scroll-margin-top: calc(var(--topbar-height) + 68px);
}

.detail-section + .detail-section {
    margin-top: 14px;
}

.detail-section__heading {
    margin-bottom: 22px;
}

.detail-section__heading--actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.definition-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.definition-grid > div {
    min-width: 0;
    padding: 13px 14px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.definition-grid dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.definition-grid dd {
    margin-bottom: 0;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.definition-grid--dense {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.long-copy {
    margin-top: 24px;
    padding-top: 20px;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
}

.long-copy p:last-child {
    margin-bottom: 0;
}

.inline-table {
    border: 1px solid var(--line);
    border-radius: 5px;
}

.empty-inline {
    display: flex;
    min-height: 80px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    background: var(--surface-subtle);
    border: 1px dashed var(--line-strong);
    border-radius: 5px;
}

.color-swatch {
    width: 18px;
    height: 18px;
    background: var(--swatch, #fff);
    border: 1px solid rgba(23, 33, 28, 0.22);
    border-radius: 4px;
}

.confirmation-page {
    max-width: 560px;
    margin: 9vh auto 0;
    padding: 38px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.confirmation-page > p:not(.eyebrow) {
    color: var(--muted);
}

.confirmation-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 18px;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 50%;
}

.confirmation-icon--danger {
    color: var(--danger);
    background: var(--danger-soft);
}

.confirmation-page form {
    margin-top: 25px;
}

.confirmation-page form > .button {
    margin: 0 3px;
}

@media (max-width: 1220px) {
    .filter-bar {
        grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(130px, 1fr));
    }

    .filter-bar label:last-of-type {
        grid-column: span 2;
    }

    .button--filter {
        align-self: end;
    }

    .definition-grid,
    .definition-grid--dense {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    }

@media (min-width: 981px) {
    .app-shell {
        transition: grid-template-columns 180ms ease;
    }

    .sidebar {
        transition:
            transform 180ms ease,
            visibility 180ms ease;
    }

    .app-shell.sidebar-collapsed {
        grid-template-columns: 0 minmax(0, 1fr);
    }

    .app-shell.sidebar-collapsed .sidebar {
        transform: translateX(-101%);
        visibility: hidden;
        pointer-events: none;
    }

    html[dir="rtl"] .app-shell.sidebar-collapsed .sidebar {
        transform: translateX(101%);
    }
}

/*
Prevent the saved collapsed sidebar from appearing for one frame while
a new page loads.
*/
@media (min-width: 981px) {
    html.sidebar-initially-collapsed .app-shell {
        grid-template-columns: 0 minmax(0, 1fr);
    }

    html.sidebar-initially-collapsed .sidebar {
        visibility: hidden;
        transform: translateX(-101%);
        pointer-events: none;
    }

    html[dir="rtl"].sidebar-initially-collapsed .sidebar {
        transform: translateX(101%);
    }
}

@media (max-width: 980px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        transform: translateX(-101%);
        transition: transform 180ms ease;
    }

    .app-shell.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-scrim {
        position: fixed;
        z-index: 35;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        background: rgba(12, 20, 16, 0.44);
        border: 0;
    }

    .app-shell.sidebar-open .sidebar-scrim {
        display: block;
    }

    .main-column {
        width: 100%;
    }

    .topbar {
        padding: 0 18px;
    }

    .main-content {
        padding: 28px 22px 60px;
    }

    .editor-section {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .form-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .focused-form--flush {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    }

@media (max-width: 720px) {
    h1 {
        font-size: 25px;
    }

    .topbar {
        gap: 9px;
        padding: 0 12px;
    }

    .global-search {
        width: auto;
        flex: 1;
    }

    .global-search kbd,
    .user-identity span:not(.user-avatar) {
        display: none;
    }

    .global-search input {
        padding-right: 10px;
    }

    .main-content {
        padding: 22px 14px 48px;
    }

    .page-header--actions,
    .resource-hero,
    .page-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-actions {
        width: 100%;
    }

    .header-actions .button {
        flex: 1 1 auto;
    }

    .filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-search,
    .filter-bar label:last-of-type {
        grid-column: 1 / -1;
    }

    .form-grid,
    .form-grid--compact {
        grid-template-columns: 1fr;
    }

    .editor-section,
    .detail-section,
    .focused-form {
        padding: 22px 17px;
    }

    .definition-grid,
    .definition-grid--dense {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .editor-actions {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }

    .editor-actions__buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .editor-actions__buttons .button--primary {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .confirmation-page {
        margin-top: 4vh;
        padding: 30px 20px;
    }
}

@media (max-width: 460px) {
    .filter-bar {
        grid-template-columns: 1fr;
    }

    .filter-search,
    .filter-bar label:last-of-type {
        grid-column: auto;
    }

    .definition-grid,
    .definition-grid--dense {
        grid-template-columns: 1fr;
    }

    .editor-actions__buttons {
        grid-template-columns: 1fr;
    }

    .editor-actions__buttons .button--primary {
        grid-column: auto;
        grid-row: auto;
    }

    .button {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.quick-field {
    position: relative;
    min-width: 0;
}

.quick-field > .form-field {
    margin: 0;
}

.quick-field__button {
    position: absolute;
    top: 28px;
    right: 6px;
    z-index: 1;
}

.quick-field__button:nth-of-type(1):not(:only-of-type) {
    right: 46px;
}

.quick-field select {
    padding-right: 84px;
}

.quick-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--border-color, #d7dce2);
    border-radius: 8px;
    background: #ffffff;
}

.quick-dialog::backdrop {
    background: rgb(20 27 36 / 45%);
}

.quick-dialog form {
    padding: 24px;
}

.quick-dialog__header,
.quick-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.quick-dialog__header {
    margin-bottom: 24px;
}

.quick-dialog__actions {
    justify-content: flex-end;
    margin-top: 24px;
}

.quick-form-errors {
    margin-top: 12px;
    color: #b42318;
}
/* Catalog selection mode */
.catalog-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    margin-bottom: 12px;
    padding: 8px 12px 8px 16px;
    background: var(--accent-soft);
    border: 1px solid #8ec7be;
    border-radius: 6px;
}

.catalog-selection-bar[hidden],
.catalog-selection-cell[hidden] {
    display: none;
}

.catalog-selection-bar > div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.catalog-selection-bar span {
    color: var(--muted);
    font-size: 12px;
}

.catalog-selection-cell {
    width: 48px;
    padding-right: 8px !important;
    padding-left: 14px !important;
    text-align: center;
}

.catalog-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.button[data-catalog-selection-toggle].is-active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: #8ec7be;
}

.data-table tbody tr.is-selected td {
    background: var(--accent-soft);
}

.data-table tbody tr.is-selected:hover td {
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--surface));
}

@media (max-width: 640px) {
    .catalog-selection-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .catalog-selection-bar .button {
        width: 100%;
    }
}
/* Typed delete confirmation */
.action-menu button.danger-link {
    display: block;
    width: 100%;
    padding: 8px 10px;
    color: var(--danger);
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.action-menu button.danger-link:hover {
    background: var(--surface-strong);
}

.typed-delete-dialog {
    width: min(514px, calc(100vw - 32px));
    padding: 0;
    color: #202124;
    background: #ffffff;
    border: 1px solid #d9dde3;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgb(31 41 55 / 14%);
}

.typed-delete-dialog::backdrop {
    background: rgb(255, 255, 255 / 8%);
    backdrop-filter: blur(1.5px);
}

.typed-delete-dialog form {
    padding: 32px;
}

.typed-delete-dialog h2 {
    margin: 0 0 3px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.typed-delete-dialog__summary {
    margin: 0 0 21px;
    color: #30343a;
    font-size: 15px;
    line-height: 1.45;
}

.typed-delete-dialog__field {
    display: grid;
    gap: 7px;
}

.typed-delete-dialog__field > span {
    color: #30343a;
    font-size: 14px;
    font-weight: 600;
}

.typed-delete-dialog__field input {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    background: #ffffff;
    border: 1px solid #d7dbe0;
    border-radius: 8px;
    outline: none;
}

.typed-delete-dialog__field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(
        in srgb,
        var(--primary) 20%,
        transparent
    );
}

.typed-delete-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 30px;
}

.typed-delete-dialog__cancel,
.typed-delete-dialog__submit {
    min-width: 72px;
    min-height: 38px;
    border-radius: 8px;
    font-weight: 600;
}

.typed-delete-dialog__cancel {
    color: #34383f;
    background: #ffffff;
    border-color: #d7dbe0;
}

.typed-delete-dialog__cancel:hover {
    background: #f5f6f7;
}

.typed-delete-dialog__submit {
    color: #ffffff;
    background: #dc2626;
    border-color: #dc2626;
}

.typed-delete-dialog__submit:hover:not(:disabled) {
    background: #dc2626;
    border-color: #dc2626;
}

.typed-delete-dialog__submit:disabled {
    color: #ffffff;
    background: #f5a1a8;
    border-color: #f5a1a8;
    cursor: not-allowed;
    opacity: 0.62;
}

@media (max-width: 520px) {
    .typed-delete-dialog form {
        padding: 24px 20px;
    }

    .typed-delete-dialog__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .typed-delete-dialog__actions .button {
        width: 100%;
    }
}

.editor-actions__buttons {
    margin-left: auto;
}

@media (max-width: 980px) {
    html[dir="rtl"] .sidebar {
        transform: translateX(101%);
    }

    html[dir="rtl"] .app-shell.sidebar-open .sidebar {
        transform: translateX(0);
    }
}

/*
Normal LTR:
marked sections remain LTR.
*/
html[data-direction-mode="ltr"] .xtx-hybrid-rtl {
    direction: ltr;
    text-align: start;
}

/*
Normal RTL:
the whole application and marked sections use RTL.
*/
html[data-direction-mode="rtl"] .xtx-hybrid-rtl {
    direction: rtl;
    text-align: start;
}

/*
Hybrid:
the application remains LTR, but marked sections use RTL.
*/
html[data-direction-mode="hybrid"] .xtx-hybrid-rtl {
    direction: rtl;
    text-align: start;
}

/* Unknown user-entered text decides its own direction. */
.xtx-content-auto {
    unicode-bidi: plaintext;
    text-align: start;
}

/* Structured values remain readable inside RTL sections. */
.xtx-data-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* Persian and other RTL text-entry fields. */
.xtx-data-rtl {
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: right;
}

/* Structured numeric and date values always remain LTR. */
.xtx-data-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* The expense layout reverses in Hybrid mode, but numbers and dates do not. */
.expense-quick-form input[name="cost_toman"],
.expense-quick-form input[name="date"],
.expense-quick-form .jalali-date-control {
    direction: ltr;
}

.expense-quick-form input[name="cost_toman"],
.expense-quick-form input[name="date"] {
    text-align: left;
}

/*
Expense labels remain on the left even though the complete expense
form reverses in Hybrid mode.
*/
.expense-quick-form .form-field > label {
    direction: ltr;
    text-align: left;
}

/*
The expense-name placeholder appears on the left.
The actual entered Persian text remains RTL and right-aligned because
the input itself still uses .xtx-data-rtl.
*/
.expense-quick-form input[name="name"]::placeholder {
    direction: ltr;
    text-align: left;
}

/* Typed Persian expense names remain on the right. */
.expense-quick-form input[name="name"] {
    direction: rtl;
    text-align: right;
}

/* Numeric cost and structured date values remain on the left. */
.expense-quick-form input[name="cost_toman"],
.expense-quick-form input[name="date"] {
    direction: ltr;
    text-align: left;
}

.direction-selector {
    display: inline-flex;
}

.direction-selector select {
    min-height: 32px;
    padding: 5px 28px 5px 9px;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    font: inherit;
    font-size: 12px;
}

.button--secondary-accent {
    color: var(--on-secondary);
    background: var(--secondary);
    border-color: var(--secondary);
}

.button--secondary-accent:hover {
    background: var(--secondary-hover);
    border-color: var(--secondary-hover);
}

.expense-actions {
    position: relative;
    display: inline-flex;
}

.expense-actions .action-menu {
    inset-inline-end: 0;
    right: auto;
}

.expense-actions .action-menu form {
    margin: 0;
}

.jalali-date-control {
    position: relative;
}

.jalali-date-control {
    position: relative;
    width: 100%;
}

.jalali-date-control .jalali-date-input {
    width: 100%;
    padding-inline-end: 88px;
}

.jalali-today-label {
    position: absolute;
    top: 50%;
    inset-inline-end: 41px;
    padding: 2px 5px;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    pointer-events: none;
    transform: translateY(-50%);
}

.jalali-today-label[hidden] {
    display: none;
}

.jalali-date-button {
    position: absolute;
    top: 50%;
    inset-inline-end: 5px;
    display: inline-grid;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 4px;
    place-items: center;
    transform: translateY(-50%);
    cursor: pointer;
}

.jalali-date-button:focus-visible {
    color: var(--primary);
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.jalali-date-button svg {
    width: 17px;
    height: 17px;
}

/* Chrome, Edge and Safari: remove number-field spinner arrows. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

/* Firefox: display number fields like ordinary text fields. */
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}
/* Account and profile controls */
.profile-menu-shell {
    position: relative;
}

.profile-menu-trigger {
    display: inline-flex;
    box-sizing: border-box;
    inline-size: 168px;
    block-size: 44px;
    min-inline-size: 168px;
    min-block-size: 44px;
    align-items: center;
    gap: 9px;
    padding: 4px 9px 4px 4px;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.profile-menu-trigger:hover,
.profile-menu-trigger[aria-expanded="true"] {
    background: var(--surface-strong);
    border-color: var(--line);
}

.profile-menu-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.profile-menu-trigger__identity {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.profile-menu-trigger__identity strong {
    max-width: 140px;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu-trigger__identity small {
    color: var(--muted);
    font-size: 10px;
}

.profile-menu-trigger > svg {
    width: 15px;
    height: 15px;
    color: var(--muted);
    transition: transform 140ms ease;
}

.profile-menu-trigger[aria-expanded="true"] > svg {
    transform: rotate(180deg);
}

.profile-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    box-sizing: border-box;
    inline-size: 380px;
    block-size: 650px;
    min-inline-size: 380px;
    min-block-size: 650px;
    max-inline-size: 380px;
    max-block-size: 650px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    column-gap: 8px;
    padding: 10px;
    overflow: hidden;
    direction: ltr;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow:
        0 22px 58px rgb(20 18 15 / 14%),
        0 5px 16px rgb(20 18 15 / 7%);
    font-family:
        "Tofell Vazirmatn",
        "Segoe UI Variable Text",
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
}

.profile-menu,
.profile-menu *,
.profile-menu *::before,
.profile-menu *::after {
    box-sizing: border-box;
}

.profile-menu[hidden] {
    display: none;
}

.profile-menu button,
.profile-menu input,
.profile-menu select {
    font-family:
        "Tofell Vazirmatn",
        "Segoe UI Variable Text",
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif !important;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.profile-menu__header {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    min-block-size: 72px;
    padding: 8px 9px 11px;
}

.profile-menu__identity {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.profile-menu__identity strong,
.profile-menu__identity span,
.profile-menu__identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu__identity strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.profile-menu__identity span {
    color: var(--ink-soft);
    font-size: 11px;
}

.profile-menu__identity small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.profile-menu__header > svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
    stroke-width: 1.7;
}

.user-avatar--large {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    font-size: 14px;
}

.profile-menu__link {
    display: grid;
    min-width: 0;
    min-height: 40px;
    grid-template-columns: 18px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    color: var(--ink-soft);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
}

.profile-menu__link:hover {
    color: var(--ink);
    background: var(--surface-strong);
}

.profile-menu__link svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}

.profile-menu__link > svg:last-child {
    justify-self: end;
}

.profile-menu__header + .profile-menu__link {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}

.profile-menu__header + .profile-menu__link::after {
    position: absolute;
    content: "";
}

.profile-workspace-selector {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 34px 7px 8px;
    border-top: 1px solid var(--line);
}

.profile-workspace-selector::before {
    position: absolute;
    top: 12px;
    left: 7px;
    color: var(--muted);
    content: "Workspace database";
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.profile-workspace-selector label {
    display: none;
}

.profile-workspace-selector__icon {
    grid-column: 1;
    width: 16px;
    height: 16px;
    margin-inline-start: 1px;
    color: var(--ink-soft);
    pointer-events: none;
    stroke-width: 1.8;
}

.profile-workspace-selector select {
    grid-column: 2;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 6px 32px 6px 10px;
    color: var(--ink);
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
}

.profile-workspace-selector select:focus-visible {
    border-color: var(--line-strong);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.profile-menu__database-action {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 7px 9px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
}

.profile-menu__database-action:hover {
    border-color: var(--line-strong);
}

.profile-menu__database-action svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.profile-menu__preferences {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 12px 7px 10px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.profile-menu__section-label {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.profile-preference {
    display: grid;
    min-width: 0;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
}

.profile-menu__preferences .profile-preference {
    grid-template-columns: minmax(0, 1fr);
}

.profile-preference label,
.profile-preference > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-preference select {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 6px 30px 6px 10px;
    color: var(--ink);
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.profile-preference select:focus-visible {
    border-color: var(--line-strong);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.profile-preference--currency,
.profile-preference--font {
    padding: 0 7px 10px;
}

.profile-preference--currency {
    grid-column: 1;
}

.profile-preference--font {
    grid-column: 2;
}

.profile-menu__data-link {
    position: relative;
}

.profile-menu__data-vault {
    border-top: 1px solid var(--line);
}

.profile-menu__data-vault-context {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 14px 10px;
    color: var(--muted);
    font-size: 11px;
}

.profile-menu__data-vault-context strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.database-import-warning--safe {
    color: var(--ink-soft);
    background: var(--accent-soft);
    border-color: var(--line);
}

.database-import-warning--safe > svg {
    color: var(--success, #2f8068);
}

.data-vault-page {
    display: grid;
    gap: 18px;
}

.data-vault-page .account-section {
    margin: 0;
}

.data-vault-page .account-section__heading {
    align-items: flex-end;
}

.profile-menu__data-link--first {
    position: relative;
    margin-top: 30px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.profile-menu__data-link--first::before {
    position: absolute;
    top: -29px;
    left: 7px;
    color: var(--muted);
    content: "Data";
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.profile-menu__data-link--first::after {
    position: absolute;
    top: -39px;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--line);
    content: "";
}

.profile-menu__signout {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding: 9px 0 0;
    border-top: 1px solid var(--line);
}

.profile-menu__signout button {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    color: var(--danger);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.profile-menu__signout button:hover {
    background: var(--danger-soft);
}

.profile-menu__signout svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}

@media (max-width: 620px) {
    .profile-menu-trigger {
        inline-size: 44px;
        min-inline-size: 44px;
        padding: 4px;
    }

    .profile-menu {
        right: -4px;
        inline-size: calc(100vw - 16px);
        min-inline-size: 0;
        max-inline-size: calc(100vw - 16px);
    }

    .profile-menu__preferences {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-preference--currency,
    .profile-preference--font {
        grid-column: 1;
    }
}

.account-page {
    max-width: 1120px;
    margin: 0 auto;
}

.account-page__header {
    max-width: 760px;
}

.account-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.account-summary,
.account-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
}

.account-summary {
    position: sticky;
    top: calc(var(--topbar-height) + 24px);
    display: grid;
    justify-items: start;
    gap: 14px;
    padding: 22px;
}

.account-avatar {
    display: grid;
    width: 52px;
    height: 52px;
    overflow: hidden;
    place-items: center;
    color: var(--on-primary);
    background: var(--primary);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 750;
}

.profile-picture-field {
    display: grid;
    gap: 7px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.profile-picture-field > label {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.profile-picture-field input[type="file"] {
    padding: 8px;
}

.profile-picture-field small {
    color: var(--muted);
    font-size: 11px;
}

.account-summary h2 {
    font-size: 17px;
}

.account-summary p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.account-facts {
    display: grid;
    width: 100%;
    gap: 12px;
    margin: 4px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.account-facts div {
    display: grid;
    gap: 3px;
}

.account-facts dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.account-facts dd {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.account-content {
    display: grid;
    gap: 14px;
}

.account-section {
    padding: 24px;
}

.account-section__heading {
    margin-bottom: 20px;
}

.account-section .form-grid .form-field:last-child {
    grid-column: 1 / -1;
}

.account-security {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.account-security p:last-child,
.account-confirmation > p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.account-confirmation {
    max-width: 620px;
    margin: 80px auto 0;
    text-align: center;
}

.account-confirmation__icon {
    display: grid;
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    place-items: center;
    color: var(--success);
    background: var(--success-soft);
    border-radius: 50%;
}

.account-confirmation .button {
    margin-top: 22px;
}

@media (max-width: 760px) {
    .profile-menu-trigger__identity {
        display: none;
    }

    .profile-menu-trigger > svg {
        display: none;
    }

    .account-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-summary {
        position: static;
    }

    .account-security {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   Editorial operations interface
   -------------------------------------------------------------------------- */

body {
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font-ui);
    font-size: 15px;
}

h1 {
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 500;
    line-height: 1;
}

h2 {
    font-size: 21px;
    font-weight: 640;
}

.app-shell {
    background: var(--bg);
}

.sidebar {
    color: var(--sidebar-text);
    background: var(--sidebar);
    border-inline-end: 1px solid var(--line);
}

.brand-lockup {
    height: var(--topbar-height);
    gap: 12px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
}

.brand-lockup strong {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
}

.brand-lockup small {
    color: var(--sidebar-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.brand-mark {
    width: 34px;
    height: 34px;
    color: var(--primary);
    background: transparent;
    border: 1px solid var(--primary);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
}

.primary-nav {
    padding: 28px 0;
}

.nav-label {
    margin: 0 24px 10px;
    color: var(--sidebar-muted);
    font-size: 9px;
    font-weight: 700;
}

.nav-label--spaced {
    margin-top: 34px;
}

.nav-link {
    position: relative;
    min-height: 48px;
    gap: 12px;
    padding: 12px 24px;
    color: var(--sidebar-muted);
    background: transparent;
    border: 0;
    border-inline-start: 3px solid transparent;
    border-radius: 0;
    font-weight: 560;
}

.nav-link:hover,
html[data-theme="dark"] .nav-link:hover {
    color: var(--sidebar-text);
    background: var(--surface-subtle);
}

.nav-link.is-active,
html[data-theme="dark"] .nav-link.is-active {
    color: var(--sidebar-text);
    background: transparent;
    border-color: var(--primary);
}

.nav-link.is-active svg,
html[data-theme="dark"] .nav-link.is-active svg {
    color: var(--primary);
}

.sidebar-footer {
    min-height: 64px;
    padding: 0 24px;
    color: var(--sidebar-muted);
    border-top: 1px solid var(--line);
    font-size: 10px;
}

.topbar,
html[data-theme="dark"] .topbar {
    height: var(--topbar-height);
    gap: 16px;
    padding: 0 30px;
    background: var(--topbar);
    border-color: var(--line);
    box-shadow: none;
}

.global-search {
    width: min(500px, 46vw);
    height: 42px;
}

.global-search input,
html[data-theme="dark"] .global-search input {
    height: 42px;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 66%, transparent);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
}

.global-search input:focus,
html[data-theme="dark"] .global-search input:focus {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

.global-search kbd,
html[data-theme="dark"] .global-search kbd {
    color: var(--muted);
    background: transparent;
    border-color: var(--line-strong);
    border-radius: 2px;
}

.icon-button,
html[data-theme="dark"] .icon-button {
    color: var(--muted);
    background: transparent;
    border-color: transparent;
    border-radius: 2px;
}

.icon-button:hover,
html[data-theme="dark"] .icon-button:hover {
    color: var(--ink);
    background: var(--surface-subtle);
}

.main-content {
    width: min(100%, var(--content-max));
    padding: 46px 42px 96px;
}

.eyebrow,
.section-kicker {
    color: var(--primary);
    font-size: 9px;
    font-weight: 760;
}

.page-summary {
    color: var(--muted);
    font-size: 12px;
}

.button,
.icon-button {
    border-radius: var(--radius);
}

.button {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
}

.button--primary {
    color: var(--on-primary);
    background: var(--primary);
    border-color: var(--primary);
}

.button--primary:hover {
    color: var(--on-primary);
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.button--secondary,
html[data-theme="dark"] .button--secondary {
    color: var(--ink-soft);
    background: transparent;
    border-color: var(--line-strong);
}

.button--secondary:hover,
html[data-theme="dark"] .button--secondary:hover {
    color: var(--ink);
    background: var(--surface-subtle);
    border-color: var(--primary);
}

.form-field {
    gap: 8px;
}

.form-field > label,
.standalone-field > span {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea,
.standalone-field textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    min-height: 44px;
    padding: 11px 13px;
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-strong);
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.45;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.standalone-field textarea:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
    outline: none;
}

.data-surface,
.history-panel,
.schema-list,
.detail-section,
html[data-theme="dark"] .detail-section {
    background: var(--surface);
    border-color: var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}

.data-table th,
html[data-theme="dark"] .data-table thead th {
    height: 46px;
    color: var(--secondary);
    background: transparent;
    border-color: var(--line);
    font-size: 11px;
    font-weight: 700;
}

.data-table td {
    height: 62px;
    color: var(--ink-soft);
    border-color: var(--line);
    font-size: 14px;
    line-height: 1.5;
}

.data-table tbody tr:hover td,
html[data-theme="dark"] .data-table tbody tr:hover td {
    background: var(--surface-subtle);
}

.profile-menu,
html[data-theme="dark"] .profile-menu {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

@media (max-width: 980px) {
    .topbar {
        padding: 0 20px;
    }

    .main-content {
        padding: 36px 24px 72px;
    }
}

@media (max-width: 720px) {
    h1 {
        font-size: 38px;
    }

    .topbar {
        padding: 0 14px;
    }

    .main-content {
        padding: 28px 16px 56px;
    }
}

/* The global search is always LTR, including RTL and Hybrid layouts. */
.global-search input,
html[data-theme="dark"] .global-search input {
    direction: ltr;
    text-align: left;
    padding-block: 0;
    padding-inline-start: 38px;
    padding-inline-end: 48px;
}

/* Keep the placeholder readable without colliding with the search icon. */
.global-search input::placeholder,
html[data-theme="dark"] .global-search input::placeholder {
    color: var(--muted);
    opacity: 1;
}

/* Sidebar interaction colors for the Salonia-inspired gray. */
.sidebar .nav-link:hover {
    background: rgb(255 255 255 / 7%);
}

.sidebar .nav-link.is-active {
    color: #ffffff;
    background: rgb(255 255 255 / 10%);
    border-color: var(--primary);
}

.sidebar .brand-lockup,
.sidebar .sidebar-footer {
    border-color: rgb(255 255 255 / 14%);
}

/*
Project-list and catalog-list searches always keep the icon on the left
and reserve enough space so the text cannot overlap it.
*/
.filter-search input,
html[data-theme="dark"] .filter-search input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 12px 0 38px;
    direction: ltr;
    text-align: left;
}

/* Vertically center the icon instead of relying on a fixed top value. */
.filter-search svg {
    top: 50%;
    left: 12px;
    z-index: 1;
    width: 16px;
    height: 16px;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.filter-search input::placeholder,
html[data-theme="dark"] .filter-search input::placeholder {
    color: var(--muted);
    opacity: 1;
    direction: ltr;
    text-align: left;
}

/* Complete light-theme delete-dialog colors. */
.typed-delete-dialog {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-strong);
}

.typed-delete-dialog h2 {
    color: var(--ink);
}

.typed-delete-dialog__summary,
.typed-delete-dialog__field > span {
    color: var(--ink-soft);
}

.typed-delete-dialog__summary strong,
.typed-delete-dialog__field strong {
    color: var(--ink);
}

.typed-delete-dialog__field input {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-strong);
}

.typed-delete-dialog__cancel {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-strong);
}

.typed-delete-dialog__cancel:hover {
    background: var(--surface-subtle);
}

/* Strong destructive action. */
.typed-delete-dialog__submit:not(:disabled) {
    color: #ffffff;
    background: var(--danger);
    border-color: var(--danger);
}

.typed-delete-dialog__submit:hover:not(:disabled) {
    color: #ffffff;
    background: var(--danger-hover);
    border-color: var(--danger-hover);
}

/* Disabled remains visibly disabled without becoming pale pink. */
.typed-delete-dialog__submit:disabled {
    color: color-mix(in srgb, var(--ink) 55%, transparent);
    background: var(--surface-strong);
    border-color: var(--line-strong);
    opacity: 1;
}

/* Explicit dark rules override broad dark input styling. */
html[data-theme="dark"] .typed-delete-dialog {
    color: var(--ink);
    background: #181c1e;
    border-color: #424a4e;
    box-shadow: 0 24px 70px rgb(0 0 0 / 58%);
}

html[data-theme="dark"] .typed-delete-dialog h2 {
    color: #f5f2eb;
}

html[data-theme="dark"] .typed-delete-dialog__summary,
html[data-theme="dark"] .typed-delete-dialog__field > span {
    color: #c7c9c6;
}

html[data-theme="dark"] .typed-delete-dialog__summary strong,
html[data-theme="dark"] .typed-delete-dialog__field strong {
    color: #ffffff;
}

html[data-theme="dark"] .typed-delete-dialog__field input {
    color: #ffffff;
    background: #101315;
    border-color: #4a5358;
}

html[data-theme="dark"] .typed-delete-dialog__field input:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(
        in srgb,
        var(--danger) 22%,
        transparent
    );
}

html[data-theme="dark"] .typed-delete-dialog__cancel {
    color: var(--ink);
    background: #23282b;
    border-color: #464f54;
}

html[data-theme="dark"] .typed-delete-dialog__cancel:hover {
    background: #2d3337;
}

/* Full Persian-language interface. */
html[lang="fa"] body {
    font-family: var(--font-persian);
    font-size: 16px;
}

/* Persian text fields and explicitly RTL content. */
.xtx-data-rtl,
.persian-entry,
[dir="rtl"] {
    font-family: var(--font-persian);
}

/* B Nazanin appears visually smaller than Segoe UI. */
input.xtx-data-rtl,
textarea.xtx-data-rtl,
.persian-entry {
    font-size: 17px;
}

/* Numbers and Jalali dates must retain the UI font. */
.xtx-data-ltr,
input[data-jdp] {
    font-family: var(--font-ui);
    font-size: 14px;
}

/* Persian project address displayed on the details page. */
.project-site-address dd {
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: right;

    color: var(--ink);
    font-family: var(--font-persian);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Larger, consistently rendered text in every form field. */
input,
textarea,
select {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    font-synthesis: none;
}

.data-table th {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.data-table td {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 400;
}

.xtx-data-ltr,
bdi {
    font-variant-numeric: tabular-nums;
}

/* Persian text fields need a slightly larger size. */
input.xtx-data-rtl,
textarea.xtx-data-rtl,
.persian-entry {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
}

/* Project site address and notes must never appear bold. */
textarea[name="site_address"],
textarea[name="notes"] {
    color: var(--ink);
    font-family: var(--font-persian);
    font-size: 18px;
    font-weight: 400 !important;
    line-height: 1.8;
    letter-spacing: 0;
}

.database-import-section {
    max-width: 820px;
}

.database-import-warning {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
    padding: 16px;
    color: var(--danger);
    background: color-mix(
        in srgb,
        var(--danger) 8%,
        var(--surface)
    );
    border: 1px solid color-mix(
        in srgb,
        var(--danger) 35%,
        var(--line)
    );
    border-radius: var(--radius);
}

.database-import-warning > svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.database-import-warning p {
    margin: 5px 0 0;
    color: var(--ink-soft);
}

/* One consistent style for grey placeholder text across the application. */
input::placeholder,
textarea::placeholder {
    color: var(--muted) !important;
    font-family: var(--font-ui) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: normal;
    letter-spacing: 0;
    opacity: 1;
}

/*
Automatic text direction
------------------------
JavaScript assigns one of these values according to the first strong
Persian/Arabic or Latin letter entered by the user.

The html prefix and !important are intentional: they override older
project-specific rules such as .project-form input.xtx-data-rtl.
*/
html input[data-auto-text-direction="rtl"],
html textarea[data-auto-text-direction="rtl"] {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext;
}

html input[data-auto-text-direction="ltr"],
html textarea[data-auto-text-direction="ltr"] {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
}

/*
Keep instructional placeholder text on the left even while an empty
field's caret starts on the right.
*/
html input[data-auto-text-direction]::placeholder,
html textarea[data-auto-text-direction]::placeholder {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}