@font-face {
  font-family: "IRANSans";
  src: url("../fonts/iransans/IRANSansWeb.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-fa: "IRANSans", Arial, "Segoe UI", sans-serif;
  --font-en: "Poppins", Arial, "Segoe UI", sans-serif;
  --font-code: Consolas, Menlo, monospace;

  --sidebar-width: 248px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 64px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-default: 6px;
  --radius-card: 8px;
  --shadow-none: none;

  --color-white: #FFFFFF;
  --color-on-primary: #FFFFFF;
  --color-on-dark: #FFFFFF;
  --color-overlay-bg: rgba(15, 23, 34, .32);

  --status-neutral-bg: #F2F4F7;
  --status-neutral-border: #D0D5DD;
  --status-neutral-text: #475467;
  --status-success-bg: #E8F5EE;
  --status-success-border: #B9DDC8;
  --status-success-text: #4F8A67;
  --status-warning-bg: #FFF4E5;
  --status-warning-border: #F3D3A2;
  --status-warning-text: #B7791F;
  --status-danger-bg: #FDECEC;
  --status-danger-border: #F3B8B8;
  --status-danger-text: #C94A4A;
  --status-info-bg: #EAF3FB;
  --status-info-border: #BBD7EE;
  --status-info-text: #3D6F99;
  --status-processing-bg: #EEF2FF;
  --status-processing-border: #C7D2FE;
  --status-processing-text: #5B6FAF;
}

/* ── Zaal Navy ─────────────────────────────────────────────── */
:root[data-theme="zaal-navy"][data-mode="light"] {
  --color-bg: #F7F9FC;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F1F5F9;
  --color-border: #DDE5EE;
  --color-divider: #E8EEF5;
  --color-primary: #042552;
  --brand-primary: #042552;
  --color-primary-hover: #011E47;
  --color-primary-soft: #E7EFF6;
  --color-primary-active-bg: #DCE8F2;
  --color-text: #172033;
  --color-text-secondary: #667085;
  --color-text-muted: #98A2B3;
  --color-icon: #5C6B7A;
  --color-icon-active: #042552;
  --color-sidebar-dark-bg: #042552;
  --color-sidebar-dark-muted-bg: #123866;
  --color-sidebar-dark-border: #1C4778;
  --color-sidebar-dark-text: #FFFFFF;
  --color-sidebar-dark-secondary: #D7E2EF;
  --color-sidebar-dark-muted: #AFC1D5;
  --color-sidebar-dark-active-bg: #123866;
}
:root[data-theme="zaal-navy"][data-mode="dark"] {
  --color-bg: #0F1722;
  --color-surface: #172231;
  --color-surface-muted: #1F2D3D;
  --color-border: #2C3A4C;
  --color-divider: #253448;
  --color-primary: #6F9BBE;
  --color-primary-hover: #83A9C8;
  --color-primary-soft: #1C3347;
  --color-primary-active-bg: #25445F;
  --color-text: #E7ECF3;
  --color-text-secondary: #A7B1C2;
  --color-text-muted: #768397;
  --color-icon: #A7B1C2;
  --color-icon-active: #6F9BBE;
  --color-sidebar-dark-bg: #121B36;
  --color-sidebar-dark-muted-bg: #1A2D52;
  --color-sidebar-dark-border: #263A61;
  --color-sidebar-dark-text: #FFFFFF;
  --color-sidebar-dark-secondary: #D9E4F2;
  --color-sidebar-dark-muted: #AFC1D5;
  --color-sidebar-dark-active-bg: #20375F;
}

/* ── Cypress Green ─────────────────────────────────────────── */
:root[data-theme="cypress-green"][data-mode="light"] {
  --color-bg: #F6FAF8;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EEF6F2;
  --color-border: #DCE8E2;
  --color-divider: #E6EFEA;
  --color-primary: #4D7C68;
  --color-primary-hover: #426D5B;
  --color-primary-soft: #E7F1EC;
  --color-primary-active-bg: #DCEBE4;
  --color-text: #17241F;
  --color-text-secondary: #63736B;
  --color-text-muted: #96A39D;
  --color-icon: #64766E;
  --color-icon-active: #4D7C68;
  --color-sidebar-dark-bg: #162420;
  --color-sidebar-dark-muted-bg: #20332D;
  --color-sidebar-dark-border: #2E433B;
  --color-sidebar-dark-text: #E8F1ED;
  --color-sidebar-dark-secondary: #A8B8B0;
  --color-sidebar-dark-muted: #768A81;
  --color-sidebar-dark-active-bg: #1E3A31;
}
:root[data-theme="cypress-green"][data-mode="dark"] {
  --color-bg: #0E1916;
  --color-surface: #162420;
  --color-surface-muted: #20332D;
  --color-border: #2E433B;
  --color-divider: #273B34;
  --color-primary: #7FB39E;
  --color-primary-hover: #91C1AE;
  --color-primary-soft: #1E3A31;
  --color-primary-active-bg: #2A4A3F;
  --color-text: #E8F1ED;
  --color-text-secondary: #A8B8B0;
  --color-text-muted: #768A81;
  --color-icon: #A8B8B0;
  --color-icon-active: #7FB39E;
  --color-sidebar-dark-bg: #0E1916;
  --color-sidebar-dark-muted-bg: #20332D;
  --color-sidebar-dark-border: #2E433B;
  --color-sidebar-dark-text: #E8F1ED;
  --color-sidebar-dark-secondary: #A8B8B0;
  --color-sidebar-dark-muted: #768A81;
  --color-sidebar-dark-active-bg: #1E3A31;
}

/* ── Warm Graphite ─────────────────────────────────────────── */
:root[data-theme="warm-graphite"][data-mode="light"] {
  --color-bg: #FAF8F5;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F1ECE5;
  --color-border: #E4DDD3;
  --color-divider: #ECE6DD;
  --color-primary: #7A6A58;
  --color-primary-hover: #685947;
  --color-primary-soft: #EFE8DE;
  --color-primary-active-bg: #E5DCCE;
  --color-text: #292622;
  --color-text-secondary: #756C61;
  --color-text-muted: #A69D93;
  --color-icon: #756C61;
  --color-icon-active: #7A6A58;
  --color-sidebar-dark-bg: #242220;
  --color-sidebar-dark-muted-bg: #302D29;
  --color-sidebar-dark-border: #433D36;
  --color-sidebar-dark-text: #F0EDE8;
  --color-sidebar-dark-secondary: #B8B0A6;
  --color-sidebar-dark-muted: #8C8278;
  --color-sidebar-dark-active-bg: #3B332B;
}
:root[data-theme="warm-graphite"][data-mode="dark"] {
  --color-bg: #171615;
  --color-surface: #242220;
  --color-surface-muted: #302D29;
  --color-border: #433D36;
  --color-divider: #39342F;
  --color-primary: #B7A48C;
  --color-primary-hover: #C4B39E;
  --color-primary-soft: #3B332B;
  --color-primary-active-bg: #4A4036;
  --color-text: #F0EDE8;
  --color-text-secondary: #B8B0A6;
  --color-text-muted: #8C8278;
  --color-icon: #B8B0A6;
  --color-icon-active: #B7A48C;
  --color-sidebar-dark-bg: #171615;
  --color-sidebar-dark-muted-bg: #302D29;
  --color-sidebar-dark-border: #433D36;
  --color-sidebar-dark-text: #F0EDE8;
  --color-sidebar-dark-secondary: #B8B0A6;
  --color-sidebar-dark-muted: #8C8278;
  --color-sidebar-dark-active-bg: #3B332B;
}

/* ── Shell — sidebar computed tokens ───────────────────────── */
:root[data-shell="full-light"] {
  --color-sidebar-bg: var(--color-surface);
  --color-sidebar-border: var(--color-border);
  --color-sidebar-divider: var(--color-divider);
  --color-sidebar-text: var(--color-text);
  --color-sidebar-text-secondary: var(--color-text-secondary);
  --color-sidebar-text-muted: var(--color-text-muted);
  --color-sidebar-icon: var(--color-icon);
  --color-sidebar-hover: var(--color-surface-muted);
  --color-sidebar-active-bg: var(--color-primary-soft);
  --color-sidebar-active-text: var(--color-primary);
  --color-sidebar-active-border: var(--color-border);
  --color-sidebar-user-bg: var(--color-surface);
}
:root[data-shell="dark-sidebar"],
:root[data-shell="full-dark"] {
  --color-sidebar-bg: var(--color-sidebar-dark-bg);
  --color-sidebar-border: var(--color-sidebar-dark-border);
  --color-sidebar-divider: var(--color-sidebar-dark-border);
  --color-sidebar-text: var(--color-sidebar-dark-text);
  --color-sidebar-text-secondary: var(--color-sidebar-dark-secondary);
  --color-sidebar-text-muted: var(--color-sidebar-dark-muted);
  --color-sidebar-icon: var(--color-sidebar-dark-secondary);
  --color-sidebar-hover: var(--color-sidebar-dark-muted-bg);
  --color-sidebar-active-bg: var(--color-sidebar-dark-active-bg);
  --color-sidebar-active-text: var(--color-on-dark);
  --color-sidebar-active-border: var(--color-sidebar-dark-border);
  --color-sidebar-user-bg: var(--color-sidebar-dark-muted-bg);
}

/* ── Legacy aliases (kept for backward-compat with older templates) */
:root {
  --surface-page: var(--color-bg);
  --surface-card: var(--color-surface);
  --surface-muted: var(--color-surface-muted);
  --surface-sidebar: var(--color-sidebar-bg);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-on-brand: var(--color-on-primary);
  --border-subtle: var(--color-border);
  --brand-primary: var(--color-primary);
  --brand-primary-soft: var(--color-primary-soft);
  --text-on-sidebar: var(--color-sidebar-text);
  --text-on-sidebar-secondary: var(--color-sidebar-text-secondary);
  --surface-sidebar-hover: var(--color-sidebar-hover);
  --danger: var(--status-danger-text);
}

/* ── Global base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-fa);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
html[dir="rtl"] body { text-align: right; }
html[dir="ltr"] body { text-align: left; font-family: var(--font-en); }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a { color: inherit; text-decoration: none; }
.ltr, [dir="ltr"] {
  direction: ltr;
  text-align: left;
  font-family: var(--font-en);
  unicode-bidi: plaintext;
}

/* Persian number/date fields carry dir="ltr" for correct digit order, but must
   keep the Persian font (the [dir="ltr"] rule above would otherwise switch them
   to the Latin font). Placed here so all font-family declarations stay in this
   file, and after the [dir="ltr"] rule so these overrides win. */
.doc-sub bdi { font-family: var(--font-fa); }
input.fa-number, input.jalali-date { font-family: var(--font-fa); }
/* <bdi dir="ltr"> wraps Persian digits (times, dates, amounts, counts) only to
   fix their order inside RTL text — it must NOT switch them to the Latin font,
   whose digit glyphs differ from the Persian UI font (and which may not load). */
bdi[dir="ltr"] { font-family: var(--font-fa); }

/* Value cells (codes, numbers, phones) carry dir="ltr" only for correct character
   order. Inside an RTL info-list / table cell they must still align to the start
   (right) so they sit under their caption — not jump to the far left — AND keep the
   Persian UI font: the global digit localiser turns their digits Persian (۰-۹), whose
   glyphs the Latin font lacks, so without this they fall back to a mismatched font. */
html[dir="rtl"] .info-value[dir="ltr"],
html[dir="rtl"] td[dir="ltr"],
html[dir="rtl"] th[dir="ltr"] { text-align: right; font-family: var(--font-fa); }