:root {
    --font-family-base: 'Yekan Bakh VF', 'Inter', sans-serif;
    --font-family-persian: 'Yekan Bakh VF', 'Vazirmatn', 'Inter', sans-serif;
    --font-family-ui: var(--font-family-persian);
    --app-ui-scale: 1;
    --app-font-scale: calc(.8 * var(--app-ui-scale));
    --font-size-r068: calc(.68rem * var(--app-font-scale));
    --font-size-r072: calc(.72rem * var(--app-font-scale));
    --font-size-r073: calc(.73rem * var(--app-font-scale));
    --font-size-r074: calc(.74rem * var(--app-font-scale));
    --font-size-r075: calc(.75rem * var(--app-font-scale));
    --font-size-r076: calc(.76rem * var(--app-font-scale));
    --font-size-r077: calc(.77rem * var(--app-font-scale));
    --font-size-r078: calc(.78rem * var(--app-font-scale));
    --font-size-r079: calc(.79rem * var(--app-font-scale));
    --font-size-r080: calc(.8rem * var(--app-font-scale));
    --font-size-r082: calc(.82rem * var(--app-font-scale));
    --font-size-r083: calc(.83rem * var(--app-font-scale));
    --font-size-r084: calc(.84rem * var(--app-font-scale));
    --font-size-r085: calc(.85rem * var(--app-font-scale));
    --font-size-r086: calc(.86rem * var(--app-font-scale));
    --font-size-r088: calc(.88rem * var(--app-font-scale));
    --font-size-r090: calc(.9rem * var(--app-font-scale));
    --font-size-r092: calc(.92rem * var(--app-font-scale));
    --font-size-r093: calc(.93rem * var(--app-font-scale));
    --font-size-r100: calc(1rem * var(--app-font-scale));
    --font-size-r103: calc(1.03rem * var(--app-font-scale));
    --font-size-r105: calc(1.05rem * var(--app-font-scale));
    --font-size-r108: calc(1.08rem * var(--app-font-scale));
    --font-size-r110: calc(1.1rem * var(--app-font-scale));
    --font-size-r115: calc(1.15rem * var(--app-font-scale));
    --font-size-r118: calc(1.18rem * var(--app-font-scale));
    --font-size-r120: calc(1.2rem * var(--app-font-scale));
    --font-size-r125: calc(1.25rem * var(--app-font-scale));
    --font-size-r135: calc(1.35rem * var(--app-font-scale));
    --font-size-r145: calc(1.45rem * var(--app-font-scale));
    --font-size-r150: calc(1.5rem * var(--app-font-scale));
    --font-size-r165: calc(1.65rem * var(--app-font-scale));
    --font-size-r175: calc(1.75rem * var(--app-font-scale));
    --font-size-r180: calc(1.8rem * var(--app-font-scale));
    --font-size-r200: calc(2rem * var(--app-font-scale));
    --font-size-p11: calc(11px * var(--app-font-scale));
    --font-size-p12: calc(12px * var(--app-font-scale));
    --font-size-p13: calc(13px * var(--app-font-scale));
    --font-size-p14: calc(14px * var(--app-font-scale));
    --font-size-p15: calc(15px * var(--app-font-scale));
    --font-size-p16: calc(16px * var(--app-font-scale));
    --font-size-p17: calc(17px * var(--app-font-scale));
    --font-size-p18: calc(18px * var(--app-font-scale));
    --font-size-p20: calc(20px * var(--app-font-scale));
    --font-size-p21: calc(21px * var(--app-font-scale));
    --font-size-p22: calc(22px * var(--app-font-scale));
    --font-size-p24: calc(24px * var(--app-font-scale));
    --font-size-p26: calc(26px * var(--app-font-scale));
    --font-size-p28: calc(28px * var(--app-font-scale));
    --font-size-p30: calc(30px * var(--app-font-scale));
    --font-size-p34: calc(34px * var(--app-font-scale));
    --font-size-p42: calc(42px * var(--app-font-scale));
    --font-size-c130-200: clamp(calc(1.3rem * var(--app-font-scale)), calc(2vw * var(--app-font-scale)), calc(2rem * var(--app-font-scale)));
    --font-size-c140-200: clamp(calc(1.4rem * var(--app-font-scale)), calc(2.5vw * var(--app-font-scale)), calc(2rem * var(--app-font-scale)));
    --font-size-c175-260: clamp(calc(1.75rem * var(--app-font-scale)), calc(3vw * var(--app-font-scale)), calc(2.6rem * var(--app-font-scale)));
    --bg: #f3f6fa;
    --bg-soft: #ffffff;
    --text: #17263a;
    --text-soft: #31445f;
    --muted: #71829a;
    --placeholder: #8ea0b8;
    --border: rgba(21, 40, 60, 0.10);
    /* برند اصلی بر پایه sidebar */
    --primary: #2563eb;
    --primary-2: #1d4ed8;
    --surface: #ffffff;
    --surface-2: #f7fafd;
    --radius-xl: 30px;
    --info: #2f80ed;
    --success-soft: rgba(29, 167, 107, 0.12);
    --warning-soft: rgba(217, 139, 0, 0.12);
    /* پایه اصلی */
    --sidebar: #15283c;
    --nav-primary: #dbeafe;
    --nav-primary-strong: #60a5fa;
    --shadow: 0 18px 40px rgba(21, 40, 60, 0.10);
    --card-shadow: 0 12px 30px rgba(21, 40, 60, 0.08);
    --menu-hover: color-mix(in srgb, var(--primary) 8%, transparent);
    --menu-active: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary-2) 14%, transparent));
    --success: #1da76b;
    --warning: #c98a14;
    --danger: #d95b74;
    --color-white: #ffffff;
    --color-black: #000000;
    --success-2: #22c55e;
    --success-3: #15803d;
    --warning-2: #fbbf24;
    --warning-3: #b45309;
    --danger-2: #fb7185;
    --danger-3: #dc2626;
    --info-2: #60a5fa;
    --tone-15-23-42-006: rgba(21,40,60,.06);
    --tone-15-23-42-018: rgba(21,40,60,.18);
    /* قبلاً بنفش بود، الان هم خانواده با برند جدید */
    --tone-122-92-255-010: rgba(75,127,192,.10);
    --tone-white-000: rgba(255,255,255,0);
    --tone-white-008: rgba(255,255,255,.08);
    --tone-white-014: rgba(255,255,255,.14);
    --tone-white-018: rgba(255,255,255,.18);
    --tone-white-055: rgba(255,255,255,.55);
    --tone-white-075: rgba(255,255,255,.75);
    --tone-white-080: rgba(255,255,255,.8);
    --tone-white-085: rgba(255,255,255,.85);
    --tone-white-092: rgba(255,255,255,.92);
    --tone-122-92-255-02: rgba(75,127,192,.02);
    --tone-122-92-255-03: rgba(75,127,192,.03);
    --tone-122-92-255-05: rgba(75,127,192,.05);
    --tone-122-92-255-06: rgba(75,127,192,.06);
    --tone-122-92-255-95: rgba(75,127,192,.95);
    --tone-14-165-233-18: rgba(47,128,237,.18);
    --tone-22-163-74-12: rgba(29,167,107,.12);
    --tone-225-29-72-10: rgba(217,91,116,.10);
    --tone-225-29-72-12: rgba(217,91,116,.12);
    --tone-225-29-72-14: rgba(217,91,116,.14);
    --tone-225-29-72-16: rgba(217,91,116,.16);
    --tone-225-29-72-18: rgba(217,91,116,.18);
    --tone-245-158-11-12: rgba(201,138,20,.12);
    --tone-245-158-11-18: rgba(201,138,20,.18);
    --tone-34-197-94-18: rgba(34,197,94,.18);
    /* خانواده primary جدید */
    --tone-79-111-255-02: color-mix(in srgb, var(--primary) 2%, transparent);
    --tone-79-111-255-03: color-mix(in srgb, var(--primary) 3%, transparent);
    --tone-79-111-255-04: color-mix(in srgb, var(--primary) 4%, transparent);
    --tone-79-111-255-06: color-mix(in srgb, var(--primary) 6%, transparent);
    --tone-79-111-255-07: color-mix(in srgb, var(--primary) 7%, transparent);
    --tone-79-111-255-08: color-mix(in srgb, var(--primary) 8%, transparent);
    --tone-79-111-255-10: color-mix(in srgb, var(--primary) 10%, transparent);
    --tone-79-111-255-12: color-mix(in srgb, var(--primary) 12%, transparent);
    --tone-79-111-255-16: color-mix(in srgb, var(--primary) 16%, transparent);
    --tone-79-111-255-18: color-mix(in srgb, var(--primary) 18%, transparent);
    --tone-79-111-255-20: color-mix(in srgb, var(--primary) 20%, transparent);
    --tone-79-111-255-22: color-mix(in srgb, var(--primary) 22%, transparent);
    --tone-79-111-255-24: color-mix(in srgb, var(--primary) 24%, transparent);
    --tone-79-111-255-25: color-mix(in srgb, var(--primary) 25%, transparent);
    --tone-79-111-255-28: color-mix(in srgb, var(--primary) 28%, transparent);
    --tone-79-111-255-35: color-mix(in srgb, var(--primary) 35%, transparent);
    --tone-79-111-255-42: color-mix(in srgb, var(--primary) 42%, transparent);
    --tone-79-111-255-98: color-mix(in srgb, var(--primary) 98%, transparent);
    /* Semantic tokens */
    --page-bg: var(--bg);
    --panel-bg: var(--surface);
    --panel-soft-bg: var(--surface-2);
    --panel-border: var(--border);
    --text-primary: var(--text);
    --text-secondary: var(--text-soft);
    --text-muted: var(--muted);
    --icon-default: var(--text-soft);
    --icon-emphasis: var(--primary);
    --action-primary-bg: linear-gradient(135deg, var(--primary), var(--primary-2));
    --action-primary-text: var(--color-white);
    --action-primary-hover: linear-gradient(135deg, #1d4ed8, #1e40af);
    --app-accent-bg: linear-gradient(135deg, var(--primary), var(--primary-2));
    --app-table-head-bg: linear-gradient(135deg, color-mix(in srgb, var(--primary) 96%, #0f172a), color-mix(in srgb, var(--primary-2) 96%, #1e293b));
    --app-table-head-text: var(--action-primary-text);
    --topbar-bg: #ffffff;
    --topbar-border: rgba(21, 40, 60, 0.08);
    --topbar-text: var(--text-primary);
    --topbar-icon: var(--icon-default);
    --topbar-icon-hover-bg: color-mix(in srgb, var(--primary) 8%, transparent);
    --topbar-icon-hover-text: var(--icon-emphasis);
    --topbar-search-bg: #f7fafd;
    --topbar-search-border: rgba(21, 40, 60, 0.08);
    --topbar-search-text: var(--text-secondary);
    --topbar-search-placeholder: var(--placeholder);
    --sidebar-shadow: 0 18px 30px rgba(8, 20, 34, 0.24);
    --sidebar-divider: rgba(255,255,255,.08);
    --sidebar-scroll-track: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
    --sidebar-scroll-thumb: linear-gradient(180deg, #5f91cc, #3e6ea9);
    --sidebar-scroll-thumb-hover: linear-gradient(180deg, #79a9df, #5685bf);
    --sidebar-scroll-thumb-border: rgba(8, 27, 45, .45);
    --sidebar-link-text: rgba(255,255,255,.86);
    --sidebar-link-subtext: rgba(255,255,255,.72);
    --sidebar-link-hover-bg: rgba(255,255,255,.08);
    --sidebar-link-hover-text: rgba(255,255,255,.94);
    --sidebar-link-active-bg: linear-gradient(90deg, rgba(120, 174, 232, .30), rgba(75, 127, 192, .14));
    --sidebar-link-active-border: var(--nav-primary-strong);
    --sidebar-submenu-bg: rgba(255,255,255,.06);
    --sidebar-submenu-border-top: rgba(255,255,255,.12);
    --sidebar-submenu-border-bottom: rgba(255,255,255,.06);
    /* آیکن ها را زنده نگه می داریم ولی هارمونی شان کنترل شده */
    --sidebar-icon-1: #e9b949;
    --sidebar-icon-2: #e8879c;
    --sidebar-icon-3: #8ca8e8;
    --sidebar-icon-4: #7ea1d9;
    --sidebar-icon-5: #63b3ed;
    --sidebar-icon-6: #78aee8;
    --sidebar-icon-7: #c98bb8;
    --sidebar-icon-8: #d7b95a;
    --sidebar-icon-9: #a9b9eb;
    --sidebar-icon-10: #4fbf9f;
    --overlay-bg: rgba(0,0,0,.30);
    /* Shared KPI palette */
    --kpi-card-bg: #f8fafc;
    --kpi-card-border: #d5dee9;
    --kpi-card-radius: 12px;
    --kpi-card-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    --kpi-value-color: #0ea5e9;
    --kpi-label-color: #1e3a5f;
    --kpi-accent-blue: #0ea5e9;
    --kpi-soft-blue: rgba(14, 165, 233, 0.14);
    --kpi-accent-green: #10b981;
    --kpi-soft-green: rgba(16, 185, 129, 0.14);
    --kpi-accent-amber: #f59e0b;
    --kpi-soft-amber: rgba(245, 158, 11, 0.14);
    --kpi-accent-purple: #8b5cf6;
    --kpi-soft-purple: rgba(139, 92, 246, 0.14);
}

body.dark-mode {
    --bg: #0b1120;
    --bg-soft: #121a2b;
    --text: #edf2ff;
    --text-soft: #dbe5ff;
    --muted: #95a1b8;
    --placeholder: #7f8aa3;
    --border: rgba(255, 255, 255, 0.08);
    --primary: #84a0ff;
    --primary-2: #9b82ff;
    --surface: #121a2b;
    --surface-2: #182236;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #fb7185;
    --sidebar: linear-gradient(112deg, rgba(8, 32, 73, 0.98), rgba(30, 64, 175, 0.94));
    --nav-primary: #bfdbfe;
    --nav-primary-strong: #93c5fd;
    --shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    --card-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
    --menu-hover: rgba(132, 160, 255, 0.10);
    --menu-active: linear-gradient(135deg, rgba(132, 160, 255, 0.16), rgba(155, 130, 255, 0.14));
    --tone-15-23-42-006: rgba(255, 255, 255, 0.06);
    --tone-15-23-42-018: rgba(255, 255, 255, 0.18);
    --page-bg: var(--bg);
    --panel-bg: rgba(16, 26, 43, 0.92);
    --panel-soft-bg: rgba(24, 34, 54, 0.88);
    --panel-border: rgba(255,255,255,.10);
    --text-primary: var(--text);
    --text-secondary: var(--text-soft);
    --text-muted: var(--muted);
    --icon-default: rgba(219, 229, 255, .88);
    --icon-emphasis: var(--nav-primary);
    --action-primary-bg: linear-gradient(135deg, #7f9bff, #9f8dff);
    --action-primary-hover: linear-gradient(135deg, #91a9ff, #ac99ff);
    --kpi-card-bg: rgba(18, 26, 43, 0.96);
    --kpi-card-border: rgba(255, 255, 255, 0.12);
    --kpi-card-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    --kpi-value-color: #7dd3fc;
    --kpi-label-color: #dbeafe;

    --topbar-bg: var(--panel-bg);
    --topbar-border: var(--panel-border);
    --topbar-text: var(--text-primary);
    --topbar-icon: rgba(192, 211, 255, .92);
    --topbar-icon-hover-bg: rgba(147, 197, 253, .18);
    --topbar-icon-hover-text: #eaf2ff;
    --topbar-search-bg: rgba(255,255,255,.08);
    --topbar-search-border: rgba(255,255,255,.16);
    --topbar-search-text: rgba(234, 242, 255, .9);
    --topbar-search-placeholder: rgba(234, 242, 255, .78);

    --sidebar-shadow: 0 22px 36px rgba(0,0,0,.36);
    --sidebar-divider: rgba(255,255,255,.10);
    --sidebar-scroll-track: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
    --sidebar-scroll-thumb: linear-gradient(180deg, #95c6ff, #7f9bff);
    --sidebar-scroll-thumb-hover: linear-gradient(180deg, #aad2ff, #94abff);
    --sidebar-scroll-thumb-border: rgba(7,20,35,.5);
    --sidebar-link-text: rgba(234,242,255,.88);
    --sidebar-link-subtext: rgba(234,242,255,.76);
    --sidebar-link-hover-bg: rgba(255,255,255,.1);
    --sidebar-link-hover-text: #f4f8ff;
    --sidebar-link-active-bg: linear-gradient(90deg, rgba(147, 197, 253, .34), rgba(129, 140, 248, .14));
    --sidebar-link-active-border: var(--nav-primary);
    --sidebar-submenu-bg: rgba(255,255,255,.1);
    --sidebar-submenu-border-top: rgba(255,255,255,.16);
    --sidebar-submenu-border-bottom: rgba(255,255,255,.1);
    --sidebar-icon-1: #fcd34d;
    --sidebar-icon-2: #fda4af;
    --sidebar-icon-3: #c4b5fd;
    --sidebar-icon-4: #d8b4fe;
    --sidebar-icon-5: #7dd3fc;
    --sidebar-icon-6: #93c5fd;
    --sidebar-icon-7: #f9a8d4;
    --sidebar-icon-8: #fde047;
    --sidebar-icon-9: #ddd6fe;
    --sidebar-icon-10: #6ee7b7;
    --overlay-bg: rgba(0,0,0,.42);
}


@media (max-width: 1280px) {
    :root {
        --app-font-scale: .84;
    }
}

@media (max-width: 768px) {
    :root {
        --app-ui-scale: .98;
        --app-font-scale: calc(.8 * var(--app-ui-scale));
    }
}

.page-header,
.table-header,
.app-modal-header,
.pro-modal-header,
.erp-modal__header {
    background: var(--app-accent-bg) !important;
    color: var(--action-primary-text) !important;
}

.page-header h1,
.page-header h2,
.page-header h3,
.page-header p,
.table-header h1,
.table-header h2,
.table-header h3,
.table-header p,
.app-modal-header h1,
.app-modal-header h2,
.app-modal-header h3,
.app-modal-header h4,
.app-modal-header h5,
.app-modal-header p {
    color: var(--action-primary-text) !important;
}

.table thead th,
table.dataTable thead th,
.table-modern thead th,
.erp-data-table thead th {
    background: var(--app-table-head-bg) !important;
    color: var(--app-table-head-text) !important;
    border-color: color-mix(in srgb, var(--primary) 55%, transparent) !important;
}

.btn-primary,
.btn-modal-primary,
.erp-btn-primary,
.btn-gradient,
.settings-save-btn {
    background: var(--action-primary-bg) !important;
    border-color: var(--primary-2) !important;
    color: var(--action-primary-text) !important;
}

.btn-primary:hover,
.btn-modal-primary:hover,
.erp-btn-primary:hover,
.btn-gradient:hover,
.settings-save-btn:hover {
    background: var(--action-primary-hover) !important;
    border-color: var(--primary-2) !important;
    color: var(--action-primary-text) !important;
}

/* Sidebar runtime presets */
body[data-sidebar-style="match-main"] {
    --sidebar: var(--bg);
}

body[data-sidebar-style="light"] {
    --sidebar: color-mix(in srgb, var(--bg) 88%, #ffffff 12%);
}

body[data-sidebar-style="dark"] {
    --sidebar: color-mix(in srgb, var(--bg) 82%, #0f172a 18%);
}

body[data-sidebar-style="auto"][data-sidebar-preset="soft"] {
    --sidebar: color-mix(in srgb, var(--bg) 84%, #1f2f45 16%);
}

body[data-sidebar-style="auto"][data-sidebar-preset="contrast"] {
    --sidebar: color-mix(in srgb, var(--bg) 74%, #0f172a 26%);
}

body[data-sidebar-style="auto"][data-sidebar-preset="flat"] {
    --sidebar: color-mix(in srgb, var(--bg) 96%, #15283c 4%);
}

body.dark-mode[data-sidebar-style="auto"][data-sidebar-preset="soft"] {
    --sidebar: color-mix(in srgb, var(--bg) 86%, #ffffff 14%);
}

body.dark-mode[data-sidebar-style="auto"][data-sidebar-preset="contrast"] {
    --sidebar: color-mix(in srgb, var(--bg) 72%, #ffffff 28%);
}

body.dark-mode[data-sidebar-style="auto"][data-sidebar-preset="flat"] {
    --sidebar: color-mix(in srgb, var(--bg) 95%, #ffffff 5%);
}

body[data-sidebar-intensity="low"] { --sidebar-bg-opacity: .28; }
body[data-sidebar-intensity="medium"] { --sidebar-bg-opacity: .44; }
body[data-sidebar-intensity="high"] { --sidebar-bg-opacity: .62; }

/* Sidebar contrast tuning for light-ish sidebar styles */
body:not(.dark-mode)[data-sidebar-style="light"],
body:not(.dark-mode)[data-sidebar-style="match-main"],
body:not(.dark-mode)[data-sidebar-style="auto"][data-sidebar-preset="flat"],
body:not(.dark-mode)[data-sidebar-style="auto"][data-sidebar-preset="soft"] {
    --sidebar-link-text: rgba(23, 38, 58, .86);
    --sidebar-link-subtext: rgba(49, 68, 95, .82);
    --sidebar-link-hover-bg: color-mix(in srgb, var(--primary) 12%, transparent);
    --sidebar-link-hover-text: #17263a;
    --sidebar-link-active-bg: linear-gradient(90deg, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary-2) 10%, transparent));
    --sidebar-link-active-border: var(--primary);
    --sidebar-submenu-bg: color-mix(in srgb, var(--primary) 8%, transparent);
    --sidebar-submenu-border-top: color-mix(in srgb, var(--primary) 16%, transparent);
    --sidebar-submenu-border-bottom: color-mix(in srgb, var(--primary) 10%, transparent);
    --sidebar-divider: rgba(21, 40, 60, .10);
}

/* Stronger separation from page background */
body[data-sidebar-style="auto"][data-sidebar-preset="soft"] {
    --sidebar: color-mix(in srgb, var(--bg) 72%, #1b2f48 28%);
}

body[data-sidebar-style="auto"][data-sidebar-preset="contrast"] {
    --sidebar: color-mix(in srgb, var(--bg) 56%, #0f172a 44%);
}

body[data-sidebar-style="auto"][data-sidebar-preset="flat"] {
    --sidebar: color-mix(in srgb, var(--bg) 90%, #1b2f48 10%);
}