@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable.woff2") format("woff2");
}
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/NotoSans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/NotoSans-cyrillic.woff2") format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/NotoSans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root[data-font="inter"] { --font: Inter, "Segoe UI", Arial, sans-serif; }
:root[data-font="noto"] { --font: "Noto Sans", "Segoe UI", Arial, sans-serif; }
:root:is([data-font="inter"], [data-font="noto"]) :is(select, textarea) { font-family: var(--font); }

:root[data-theme="light"][data-palette="neutral"],
.appearance-swatch[data-preview-palette="neutral"] {
    --surface: #f4f6f8;
    --sidebar: #e9edf1;
    --surface-subtle: #eef1f4;
    --surface-hover: #e6ebf0;
    --surface-selected: #dce3ea;
    --text: #29333e;
    --text-secondary: #495766;
    --text-muted: #515e6b;
    --border: #d6dde4;
    --border-strong: #687582;
    --primary: #435f7a;
    --primary-hover: #354c63;
    --badge: #e1e7ed;
    --focus: #435f7a;
    --pool-background: #e6ebf1;
    --pool-hover-background: #dee5ed;
    --pool-selected-background: #d3dde7;
    --pool-accent: #4b647f;
}

:root[data-theme="light"][data-palette="sand"],
.appearance-swatch[data-preview-palette="sand"] {
    --surface: #faf6ee;
    --sidebar: #f0e9dc;
    --surface-subtle: #f5efe4;
    --surface-hover: #efe7d9;
    --surface-selected: #e7ddcc;
    --text: #37322b;
    --text-secondary: #5e5346;
    --text-muted: #625648;
    --border: #e3d9c8;
    --border-strong: #7b6e5d;
    --primary: #756047;
    --primary-hover: #604d38;
    --badge: #ede3d3;
    --focus: #756047;
    --pool-background: #f2e8d6;
    --pool-hover-background: #ecdfc7;
    --pool-selected-background: #e4d4b8;
    --pool-accent: #806542;
}

:root[data-theme="light"][data-palette="sage"],
.appearance-swatch[data-preview-palette="sage"] {
    --surface: #f3f7f2;
    --sidebar: #e7eee5;
    --surface-subtle: #edf2eb;
    --surface-hover: #e4ece1;
    --surface-selected: #dbe5d8;
    --text: #2d3930;
    --text-secondary: #485b4d;
    --text-muted: #4f6055;
    --border: #d5dfd1;
    --border-strong: #687863;
    --primary: #486651;
    --primary-hover: #37533f;
    --badge: #e0e9dd;
    --focus: #486651;
    --pool-background: #e6eee1;
    --pool-hover-background: #dce7d5;
    --pool-selected-background: #d1dfc9;
    --pool-accent: #4d6a42;
}

/* Colors sampled from the user's legacy-site screenshot. */
:root[data-theme="light"][data-palette="legacy"],
.appearance-swatch[data-preview-palette="legacy"] {
    --surface: #ffffff;
    --sidebar: #e8e9ed;
    --surface-subtle: #f1f1f1;
    --surface-hover: #eef0f4;
    --surface-selected: #d5d8e0;
    --text: #343434;
    --text-secondary: #484b54;
    --text-muted: #4e525c;
    --border: #cbcbcb;
    --border-strong: #cbcbcb;
    --primary: #bf4e6a;
    --primary-hover: #a43f59;
    --badge: #f1f1f1;
    --focus: #9d3b53;
    --pool-background: #e7e9ef;
    --pool-hover-background: #dfe2ea;
    --pool-selected-background: #bf4e6a;
    --pool-accent: #666b75;
    --row-selected-background: #bf4e6a;
    --row-selected-text: #ffffff;
    --legacy-button-text: #343434;
    --legacy-info-color: #7581af;
}

:root[data-theme="light"]:is([data-palette="neutral"], [data-palette="sand"], [data-palette="sage"], [data-palette="legacy"]) {
    --on-primary: #fff;
    --positive: #36533f;
    --positive-bg: #e8f0e9;
    --danger: #824340;
    --danger-bg: #f6eae8;
    --warning: #70491c;
    --warning-bg: #fbf0de;
    --warning-border: #9c7a49;
    --rz-primary: var(--primary);
    --rz-on-primary: var(--on-primary);
    --rz-primary-dark: var(--primary-hover);
    --rz-primary-darker: var(--primary-hover);
    --rz-input-background-color: var(--surface);
    --rz-input-color: var(--text);
    --rz-input-border: 1px solid var(--border-strong);
    --rz-input-placeholder-color: var(--text-muted);
    --rz-pager-background-color: var(--surface);
    --rz-pager-color: var(--text-secondary);
}

:root[data-theme="light"][data-palette="legacy"] :is(.workspace-main, .editor-nav, .editor-actions) { background: var(--sidebar); }
:root[data-theme="light"][data-palette="legacy"] .employees-grid .rz-grid-table thead th { background: var(--surface); }

/* The old toolbar uses neutral buttons; burgundy belongs to the selected data row. */
:root[data-theme="light"][data-palette="legacy"] :is(.button, .icon-button.button-secondary) {
    background: linear-gradient(#ffffff, #f0f0f0);
    border: 1px solid var(--border);
    color: var(--legacy-button-text);
    box-shadow: 0 1px 2px #0002;
}
:root[data-theme="light"][data-palette="legacy"] :is(.button, .icon-button.button-secondary):hover:not(:disabled) { background: linear-gradient(#fafafa, #e3e5e9); }
:root[data-theme="light"][data-palette="legacy"] :is(.button, .icon-button.button-secondary):active:not(:disabled) { background: #d5d8e0; box-shadow: inset 0 1px 2px #0002; }
:root[data-theme="light"][data-palette="legacy"] .role-selector .button-primary { background: var(--surface-selected); }
:root[data-theme="light"][data-palette="legacy"] :is(.order-information-icon, .distribution-info-button) { color: var(--legacy-info-color); }

/* Local tokens recolor all nested dates, names, status badges and action icons. */
:root[data-theme="light"][data-palette="legacy"] :is(tr.employee-row-selected:not(.rz-expanded-row-content), tr.distribution-selected) {
    --surface: var(--row-selected-background);
    --surface-subtle: var(--row-selected-background);
    --surface-hover: var(--row-selected-background);
    --surface-selected: var(--row-selected-background);
    --text: var(--row-selected-text);
    --text-secondary: var(--row-selected-text);
    --text-muted: var(--row-selected-text);
    --rz-text-color: var(--row-selected-text);
    --rz-grid-cell-color: var(--row-selected-text);
    --positive: var(--row-selected-text);
    --danger: var(--row-selected-text);
    --warning: var(--row-selected-text);
    --badge: var(--row-selected-background);
    --focus: var(--row-selected-text);
    --legacy-info-color: var(--row-selected-text);
    color: var(--row-selected-text);
}
:root[data-theme="light"][data-palette="legacy"] .employees-grid .rz-grid-table > tbody > tr:is(.employee-row-selected, .order-row-pool):not(.rz-expanded-row-content) > td:first-child { box-shadow: none; }

/* Keep all three utility actions comfortable in the 64px compact sidebar. */
.sidebar-utilities { flex-wrap: wrap; }
.sidebar-utilities .sidebar-help { flex: 0 0 100%; }
.sidebar-utilities .appearance-trigger { flex: 1; min-width: 0; }
.sidebar-is-compact .sidebar-utilities .sidebar-help,
.sidebar-is-compact .sidebar-utilities .appearance-trigger,
.sidebar-is-compact .sidebar-utilities .theme-toggle { flex: 0 0 48px; width: 48px; min-height: 42px; justify-content: center; padding: 0; }
.sidebar-is-compact .appearance-trigger > span { display: none; }
.appearance-save-warning { color: var(--danger); }

.appearance-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow: auto; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: 0 18px 60px #0003; }
.appearance-dialog::backdrop { background: #0005; }
.appearance-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.appearance-heading h2 { margin: 0; font-size: 21px; font-weight: 600; }
.appearance-heading p { margin: 5px 0 0; font-size: 12px; color: var(--text-secondary); }
.appearance-fieldset { min-width: 0; padding: 0; margin: 0 0 18px; border: 0; }
.appearance-fieldset legend, .appearance-font-label { padding: 0; margin-bottom: 9px; font-size: 13px; font-weight: 600; }
.appearance-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 4px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 10px; }
.appearance-mode { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 5px; border-radius: 7px; cursor: pointer; font-size: 12px; }
.appearance-mode:has(:checked) { background: var(--surface-selected); font-weight: 600; }
.appearance-dialog input[type="radio"] { margin: 0; accent-color: var(--primary); flex-shrink: 0; }
.appearance-hint { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); }
.appearance-palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.appearance-palette { position: relative; min-width: 0; padding: 9px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; }
.appearance-palette:has(:checked) { outline: 2px solid var(--primary); outline-offset: 1px; }
.appearance-palette > input { position: absolute; top: 17px; right: 17px; z-index: 1; }
.appearance-palette-title { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; }
.appearance-palette small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 11px; }
.appearance-palette:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; padding-right: 36px; }
.appearance-palette:last-child:nth-child(odd) .appearance-swatch { grid-row: 1 / span 2; }
.appearance-palette:last-child:nth-child(odd) .appearance-palette-title { align-self: end; margin: 0; }
.appearance-palette:last-child:nth-child(odd) small { align-self: start; }
.appearance-swatch { display: flex; height: 52px; overflow: hidden; border-radius: 5px; background: var(--surface); color: var(--text); }
.appearance-swatch[data-preview-palette="classic"] { --surface: #fff; --sidebar: #f9f9f9; --text: #171717; --primary: #171717; }
.appearance-swatch-sidebar { width: 24%; background: var(--sidebar); border-right: 1px solid #0001; }
.appearance-swatch-content { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-left: 12px; width: 65%; }
.appearance-swatch-content > span { font-size: 19px; font-weight: 600; line-height: 1; }
.appearance-swatch-content i { display: block; width: 75%; height: 3px; border-radius: 2px; background: var(--primary); opacity: .65; }
.appearance-swatch-content i:last-child { width: 48%; opacity: .3; }
.appearance-font-label { display: block; }
.appearance-font-select { width: 100%; height: 40px; padding: 0 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; }
.appearance-text-preview { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-subtle); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.appearance-text-preview strong { font-weight: 600; }
.appearance-text-preview small { margin-top: 4px; font-size: 11px; color: var(--text-secondary); }
.appearance-dialog-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; }
.appearance-reset, .appearance-retry { min-height: 32px; padding: 4px 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.appearance-reset:hover, .appearance-retry:hover { color: var(--text); }
.appearance-save-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; color: var(--text-secondary); }
.appearance-save-status:has(button) { color: var(--danger); }

@media (max-width: 760px) {
    .mobile-navigation .sidebar-utilities .sidebar-help { flex-basis: calc(100% - 44px); }
    .mobile-navigation .sidebar-utilities .appearance-trigger { flex-basis: calc(100% - 44px); min-height: 40px; }
    .mobile-navigation .sidebar-utilities .appearance-trigger > span { display: inline; }
    .appearance-dialog { max-height: calc(100dvh - 24px); padding: 20px; }
}