/* ============================================================================
   Shivoli management panel — design system
   Direction: Swiss minimal, dense dashboard, Shivoli's own cream / burgundy /
   gold. Everything below is built from tokens: a colour, a space or a radius
   is never written twice, so the whole panel can be retuned from one place.
   ========================================================================= */

/* ------------------------------------------------------------- 1. tokens */
:root {
  /* -- brand primitives ---------------------------------------------- */
  --brand-900: #571022;
  --brand-800: #6E1B32;
  --brand-700: #8E2B46;
  --brand-tint: rgba(110, 27, 50, 0.08);
  --brand-tint-strong: rgba(110, 27, 50, 0.14);

  --gold-600: #7C5C30;   /* passes 4.5:1 on cream — use for gold *text* */
  --gold-500: #B08B57;   /* decorative gold — rules, dots, edges */
  --gold-tint: rgba(176, 139, 87, 0.14);

  --stone-000: #FFFFFF;   /* kept only for *text* sitting on burgundy */
  --paper:     #FDF8EE;   /* card / panel surface — warm paper, never white */
  --stone-050: #F6EFE1;   /* page background — light cream */
  --stone-100: #F0E7D6;
  --stone-200: #E7DCC7;
  --stone-300: #DBCEB6;
  --stone-600: #6B605A;
  --stone-900: #2B2320;

  /* -- status primitives --------------------------------------------- */
  --green-700: #2A6046;
  --amber-700: #8A5F10;
  --red-700: #99282C;
  --blue-700: #35525F;
  --green-700-deep: #21503A;   /* one step darker: the hover of a face */
  --red-700-deep: #832225;
  --gold-600-deep: #6B4F28;

  /* -- status tints (the same colour, low alpha, behind a chip or a note) -- */
  --success-tint: rgba(42, 96, 70, .12);
  --success-tint-soft: rgba(42, 96, 70, .08);
  --success-line: rgba(42, 96, 70, .26);
  --warning-tint: rgba(138, 95, 16, .13);
  --warning-tint-soft: rgba(138, 95, 16, .08);
  --warning-line: rgba(138, 95, 16, .26);
  --danger-tint: rgba(153, 40, 44, .12);
  --danger-tint-soft: rgba(153, 40, 44, .08);
  --danger-line: rgba(153, 40, 44, .28);
  --danger-edge: rgba(153, 40, 44, .35);
  --info-tint: rgba(53, 82, 95, .12);
  --info-tint-soft: rgba(53, 82, 95, .07);
  --info-line: rgba(53, 82, 95, .26);

  /* -- semantic surface ---------------------------------------------- */
  --cream: var(--stone-050);
  --cream-soft: var(--stone-100);
  --cream-deep: var(--stone-200);
  --line: var(--stone-300);
  --line-soft: var(--stone-200);
  --white: var(--stone-000);
  --surface: var(--paper);
  --surface-sunken: var(--stone-100);
  /* the two bars that float over the page and let it show through */
  --surface-glass: rgba(253, 248, 238, .88);
  --surface-glass-solid: rgba(253, 248, 238, .985);
  --backdrop: rgba(43, 35, 32, .38);
  --row-stripe: rgba(176, 139, 87, .05);
  --placeholder: #7A716A;
  --dot-ring: rgba(0, 0, 0, .06);
  --chart-grid: #EDE3D6;
  --brand-glow: rgba(110, 27, 50, .10);
  --gold-glow: rgba(176, 139, 87, .12);
  --attention-edge: rgba(176, 139, 87, .55);
  --attention-glow: rgba(176, 139, 87, .10);

  /* -- semantic text -------------------------------------------------- */
  --ink: var(--stone-900);
  --ink-soft: var(--stone-600);
  --burgundy: var(--brand-800);
  --burgundy-soft: var(--brand-700);
  --burgundy-tint: var(--brand-tint);
  --gold: var(--gold-500);
  --success: var(--green-700);
  --warning: var(--amber-700);
  --danger: var(--red-700);
  --info: var(--blue-700);
  --ring: var(--brand-700);

  /* -- spacing (density 8/10 — dashboard) ----------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* -- shape ---------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 13px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* -- elevation (warm-tinted, never neutral grey) --------------------- */
  --shadow-xs: 0 1px 2px rgba(43, 35, 32, .05);
  --shadow: 0 1px 2px rgba(43, 35, 32, .04), 0 2px 10px rgba(43, 35, 32, .05);
  --shadow-md: 0 6px 18px rgba(43, 35, 32, .09);
  --shadow-lg: 0 14px 44px rgba(43, 35, 32, .13);

  /* -- motion --------------------------------------------------------- */
  --ease: cubic-bezier(.32, .72, .35, 1);
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 260ms;

  /* -- type ----------------------------------------------------------- */
  --font: Vazirmatn, "Segoe UI", Tahoma, sans-serif;
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 21px;

  --sidebar-w: 258px;

  /* native widgets — scrollbars, date pickers, checkboxes — follow the theme */
  color-scheme: light;
}

/* ------------------------------------------------- 1b. حالت تاریک (dark)
   The same panel after dark: warm charcoal instead of cream, the burgundy
   lifted to a rose so it still reads as text on a dark ground, and the gold
   kept as the accent it already is. Nothing here is a new rule — only the
   tokens are restated, so every component follows without being touched.
   The theme is chosen by the person and stored in the browser; the boot
   script in <head> writes it on <html> before the first paint. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* brand: burgundy becomes a rose, because a dark red on a dark ground
     cannot be read. On-brand text turns dark in exchange. */
  --brand-900: #F6CBD6;
  --brand-800: #E28CA4;
  --brand-700: #F2A5B9;
  --brand-tint: rgba(226, 140, 164, 0.16);
  --brand-tint-strong: rgba(226, 140, 164, 0.26);

  --gold-600: #E0BE8C;   /* gold *text*, light enough to read on charcoal */
  --gold-500: #D6B078;
  --gold-tint: rgba(214, 176, 120, 0.14);

  --stone-000: #1C1512;   /* the ink that sits *on* rose or gold */
  --paper:     #241D1B;   /* card / panel surface */
  --stone-050: #17120F;   /* page background */
  --stone-100: #2B2320;
  --stone-200: #352B27;
  --stone-300: #453832;
  --stone-600: #B4A79B;
  --stone-900: #F2E7D8;

  /* status: the same four meanings, lifted to read on a dark ground */
  --green-700: #6FCF97;
  --amber-700: #E3B45F;
  --red-700: #F0888C;
  --blue-700: #8FBDCF;
  --green-700-deep: #57B57F;
  --red-700-deep: #D96E73;
  --gold-600-deep: #C9A167;

  --success-tint: rgba(111, 207, 151, .15);
  --success-tint-soft: rgba(111, 207, 151, .10);
  --success-line: rgba(111, 207, 151, .34);
  --warning-tint: rgba(227, 180, 95, .15);
  --warning-tint-soft: rgba(227, 180, 95, .10);
  --warning-line: rgba(227, 180, 95, .34);
  --danger-tint: rgba(240, 136, 140, .15);
  --danger-tint-soft: rgba(240, 136, 140, .10);
  --danger-line: rgba(240, 136, 140, .34);
  --danger-edge: rgba(240, 136, 140, .42);
  --info-tint: rgba(143, 189, 207, .15);
  --info-tint-soft: rgba(143, 189, 207, .10);
  --info-line: rgba(143, 189, 207, .34);

  --surface-glass: rgba(36, 29, 27, .88);
  --surface-glass-solid: rgba(36, 29, 27, .985);
  --backdrop: rgba(0, 0, 0, .58);
  --row-stripe: rgba(214, 176, 120, .045);
  --placeholder: #8E8278;
  --dot-ring: rgba(255, 255, 255, .14);
  --chart-grid: #3A2F2A;
  --brand-glow: rgba(226, 140, 164, .12);
  --gold-glow: rgba(214, 176, 120, .10);
  --attention-edge: rgba(214, 176, 120, .5);
  --attention-glow: rgba(214, 176, 120, .12);

  /* a dark page casts a real shadow, not a warm grey one */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 2px 10px rgba(0, 0, 0, .34);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .46);
  --shadow-lg: 0 14px 44px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--burgundy); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--burgundy-soft); }

::selection { background: var(--brand-tint-strong); color: var(--brand-900); }

/* One focus ring for the whole panel: always visible, never removed. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Icons are drawn, never typed: one outline family, aligned to the text. */
.ico { flex: none; vertical-align: -.18em; }

/* Straight to the page for anyone arriving by keyboard. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: -60px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--burgundy);
  color: var(--white);
  font-size: var(--text-sm);
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: var(--space-3); color: var(--white); }

/* Nobody is thrown around by motion they did not ask for. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------- 2. layout */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--cream-soft), var(--cream-deep));
  border-inline-start: 2px solid var(--gold-tint);
  padding: var(--space-5) var(--space-3) var(--space-8);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--stone-300) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--stone-300); border-radius: var(--radius-pill); }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.brand {
  text-align: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}
/* The atelier's own mark sits above the wordmark; it is a PNG with a
   transparent ground, so it reads on the cream sidebar and on white paper. */
.brand__logo {
  display: block;
  margin: 0 auto var(--space-2);
  height: 62px;
  width: auto;
  max-width: 100%;
}
.brand__mark {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 5px;
  color: var(--burgundy);
  display: block;
  line-height: 1.25;
}
.brand__name { font-size: var(--text-sm); color: var(--ink-soft); letter-spacing: .6px; }

.nav-group { margin-bottom: var(--space-4); }
.nav-group--fold { margin-bottom: var(--space-1); }
.nav-group__title {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  letter-spacing: .8px;
  padding: 0 var(--space-2) var(--space-1);
  font-weight: 600;
}
button.nav-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: start;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
button.nav-group__title:hover { background: var(--cream-soft); color: var(--ink); }
.nav-group__label { flex: 1; }
.nav-group__caret {
  display: inline-flex;
  color: var(--gold-500);
  transition: transform var(--t) var(--ease);
}
body[dir="rtl"] .nav-group__caret { transform: rotate(180deg); }
.nav-group.is-open .nav-group__caret,
body[dir="rtl"] .nav-group.is-open .nav-group__caret { transform: rotate(90deg); }
.nav-group.is-open > button.nav-group__title { color: var(--burgundy); }
/* Closed by default so only one branch of the menu is on screen at a time; the
   sidebar script opens the group that holds the current page. */
.nav-group--fold > .nav-group__body { display: none; }
.nav-group--fold.is-open > .nav-group__body { display: block; padding-bottom: var(--space-1); }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--text-base);
  margin-bottom: 2px;
  position: relative;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-link:hover { background: var(--cream-soft); color: var(--ink); }
.nav-link.is-active {
  background: var(--burgundy);
  color: var(--white);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.nav-link.is-active:hover { background: var(--burgundy); color: var(--white); }
/* A gold edge marks the page you are on even where colour alone is missed. */
.nav-link.is-active::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--gold-500);
}
.nav-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease);
}
.nav-link:hover .nav-link__icon { color: var(--burgundy); }
.nav-link.is-active .nav-link__icon { color: var(--white); }

/* How many decisions are waiting, next to the two sign-off links. */
.nav-badge {
  margin-inline-start: auto;
  min-width: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--gold-600);
  color: var(--white);
  font-size: var(--text-xs);
  line-height: 19px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nav-link.is-active .nav-badge { background: var(--surface); color: var(--burgundy); }
.nav-sub { padding-inline-start: var(--space-3); }
.nav-sub .nav-link { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); color: var(--ink-soft); }
.nav-sub .nav-link:hover { color: var(--ink); }
.nav-sub .nav-link.is-active { color: var(--white); }

/* On a phone the menu slides over the page; the page behind it dims. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--backdrop);
  backdrop-filter: blur(2px);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--surface-glass);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar__title { font-size: var(--text-lg); font-weight: 600; margin: 0; line-height: 1.4; }
.topbar__meta { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.5; }
.topbar__user { display: flex; align-items: center; gap: var(--space-3); }
.topbar__lead { display: flex; align-items: center; gap: var(--space-3); }
.topbar__who { text-align: start; }
.topbar__who-name { font-size: var(--text-base); font-weight: 500; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--burgundy-tint); color: var(--burgundy);
  display: grid; place-items: center; font-weight: 600;
  border: 1px solid var(--brand-tint-strong);
  flex: none;
}

.content { padding: var(--space-6) var(--space-6) 64px; flex: 1; }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--burgundy);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.menu-toggle:hover { background: var(--cream-soft); border-color: var(--line); }

/* -------------------------------------------------------------- 3. cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gold-tint);
}
.card__title { font-size: var(--text-md); font-weight: 600; margin: 0; letter-spacing: -.1px; }
.card--flat { box-shadow: none; }

.grid { display: grid; gap: var(--space-4); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 3px; height: 100%; background: var(--burgundy);
}
.stat--gold::after { background: var(--gold-500); }
.stat--success::after { background: var(--success); }
.stat--danger::after { background: var(--danger); }
.stat--warning::after { background: var(--warning); }
.stat__label { font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: var(--space-1); }
.stat__value {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.stat__unit { font-size: var(--text-sm); color: var(--ink-soft); font-weight: 400; margin-inline-start: var(--space-1); }
.stat__hint { font-size: var(--text-xs); color: var(--ink-soft); margin-top: var(--space-1); }

/* a figure with a page behind it: same card, but it says so on hover */
a.stat--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
a.stat--link:hover { border-color: var(--gold-500); transform: translateY(-2px); box-shadow: var(--shadow-md); }
a.stat--link .stat__label::after { content: " \203A"; color: var(--ink-soft); }

/* ------------------------------------------------------------- 4. tables */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  scrollbar-width: thin;
}
table.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
table.table th {
  text-align: right;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: linear-gradient(180deg, var(--cream-soft), var(--cream-deep));
  /* the header stays put while a long list scrolls under it */
  position: sticky;
  top: 0;
  z-index: 1;
}
table.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.table tbody tr { transition: background var(--t-fast) var(--ease); }
table.table tbody tr:nth-child(even) { background: var(--row-stripe); }
table.table tbody tr:hover { background: var(--gold-tint); }
table.table tbody tr:last-child td { border-bottom: 0; }
table.table tfoot td {
  font-weight: 700;
  background: var(--surface-sunken);
  border-top: 2px solid var(--line);
}
.table--compact td, .table--compact th { padding: var(--space-1) var(--space-2); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -- an amount ------------------------------------------------------------
   Every sum on the panel is printed twice: the figure in tomans, and the same
   figure spelled out under it. The words are what catch a missing or an extra
   zero, so they sit with the number everywhere — in a table cell, in a stat
   tile and under a box that is being typed into. */
.amount { display: inline-block; vertical-align: top; max-width: 100%; }
.amount__num { display: block; }
.amount__words {
  display: block;
  white-space: normal;
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 1px;
}
.stat__value .amount__num { display: inline; }
.stat__value .amount__words {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: normal;
}

/* the live echo written under a money box while it is being filled in */
.amount-echo {
  display: block;
  min-height: 1em;
  margin-top: 3px;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-soft);
}
.amount-echo:empty { min-height: 0; margin-top: 0; }

.empty {
  text-align: center;
  color: var(--ink-soft);
  padding: var(--space-8) var(--space-3);
  font-size: var(--text-base);
}

/* ------------------------------------------------------------- 5. badges */
.badge {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--cream-deep);
  color: var(--ink-soft);
  white-space: nowrap;
}
.badge--burgundy { background: var(--brand-tint); color: var(--burgundy); }
.badge--gold { background: var(--gold-tint); color: var(--gold-600); }
.badge--success { background: var(--success-tint); color: var(--success); }
.badge--warning { background: var(--warning-tint); color: var(--warning); }
.badge--danger { background: var(--danger-tint); color: var(--danger); }
.badge--info { background: var(--info-tint); color: var(--info); }
.badge--dot::before { content: "\2022"; margin-inline-end: var(--space-1); }

/* ------------------------------------------------------------ 6. buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  background: var(--burgundy);
  color: var(--white);
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--burgundy-soft); color: var(--white); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--ghost { background: var(--surface); color: var(--burgundy); border-color: var(--line); box-shadow: none; }
.btn--ghost:hover { background: var(--cream-soft); color: var(--burgundy); border-color: var(--gold-500); }
.btn--gold { background: var(--gold-600); }
.btn--gold:hover { background: var(--gold-600-deep); }
.btn--danger { background: var(--danger); }
.btn--danger:hover { background: var(--red-700-deep); }
.btn--success { background: var(--success); }
.btn--success:hover { background: var(--green-700-deep); }
.btn--sm { padding: var(--space-1) var(--space-3); min-height: 30px; font-size: var(--text-sm); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* -------------------------------------------------------------- 7. forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* a hidden field stays hidden even though .field sets its own display */
[hidden] { display: none !important; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field--full { grid-column: 1 / -1; }
/* Every field says what it is above itself, never a placeholder standing in
   for a label, which disappears the moment anyone types. */
.field label { font-size: var(--text-sm); color: var(--ink-soft); font-weight: 500; }
.field input, .field select, .field textarea, .input {
  font-family: inherit;
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover, .input:hover { border-color: var(--stone-600); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  outline: none;
  border-color: var(--burgundy-soft);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field textarea { min-height: 78px; resize: vertical; }
.field__error { color: var(--danger); font-size: var(--text-xs); font-weight: 500; }
.field__hint { color: var(--ink-soft); font-size: var(--text-xs); }
.checkbox { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); }
.checkbox input { width: auto; min-height: 0; accent-color: var(--burgundy); }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow);
}
.filters .field { min-width: 150px; }

/* month strip: every Jalali month of the year, above the date filter */
.month-strip {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: 2px;
  border-bottom: 1px dashed var(--line);
}
.month-strip__label { font-size: var(--text-sm); color: var(--ink-soft); white-space: nowrap; }
.month-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  overflow-x: auto;
  padding-bottom: 2px;
}
.month-strip__list a,
.period-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  white-space: nowrap;
  background: var(--cream-soft);
  color: var(--ink-soft);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.month-strip__list a:hover,
.period-tabs a:hover { border-color: var(--gold-500); color: var(--burgundy); }
.month-strip__list a.is-active,
.period-tabs a.is-active { background: var(--burgundy); color: var(--white); border-color: var(--burgundy); }
.month-strip__list a.is-future { opacity: .45; }
.month-strip__list .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); }
.month-strip__list a.is-active .dot { background: var(--surface); }

.period-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ------------------------------------------------------------ 8. flashes */
.flashes { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  border: 1px solid transparent;
  border-inline-start-width: 3px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.flash--success { background: var(--success-tint-soft); border-color: var(--success-line); color: var(--success); }
.flash--danger  { background: var(--danger-tint-soft); border-color: var(--danger-line); color: var(--danger); }
.flash--warning { background: var(--warning-tint-soft); border-color: var(--warning-line); color: var(--warning); }
.flash--info    { background: var(--info-tint-soft); border-color: var(--info-line); color: var(--info); }

/* -------------------------------------------------------------- 9. login */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1100px 520px at 80% -10%, var(--brand-glow), transparent 60%),
    radial-gradient(800px 400px at 5% 105%, var(--gold-glow), transparent 60%),
    var(--cream);
  padding: var(--space-6);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-8) var(--space-6);
}
.login-card .brand { border: 0; margin-bottom: var(--space-6); }
.login-card .brand__mark { font-size: 36px; }
.login-card .brand__logo { height: 96px; margin-bottom: var(--space-3); }
.login-note { font-size: var(--text-xs); color: var(--ink-soft); text-align: center; margin-top: var(--space-4); }

/* -------------------------------------------------------------- 10. misc */
.section-title { font-size: var(--text-md); font-weight: 600; margin: var(--space-6) 0 var(--space-3); }
.muted { color: var(--ink-soft); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-gold { color: var(--gold-600); }
.text-warning { color: var(--warning); }
.tiny { font-size: var(--text-xs); }
.right { text-align: left; }
.divider { height: 1px; background: var(--line); margin: var(--space-4) 0; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-base); }
.list-plain li:last-child { border: 0; }

.progress { height: 6px; background: var(--cream-deep); border-radius: var(--radius-pill); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--burgundy); border-radius: var(--radius-pill); }

.pagination { display: flex; gap: var(--space-1); justify-content: center; margin-top: var(--space-4); flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); font-size: var(--text-sm);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pagination a:hover { border-color: var(--gold-500); background: var(--cream-soft); }
.pagination .is-active { background: var(--burgundy); color: var(--white); border-color: var(--burgundy); }

.chart-box { position: relative; height: 260px; }

/* the colour a sales channel wears on every chart and table that names it */
input[type="color"] {
  width: 64px;
  height: 38px;
  padding: 3px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.channel-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-left: var(--space-1);
  vertical-align: middle;
  box-shadow: 0 0 0 1px var(--dot-ring);
}

.item-row td { vertical-align: top; }
.item-row input, .item-row select { font-size: var(--text-sm); padding: var(--space-1) var(--space-2); min-height: 32px; }

/* ------------------------------------------- 11. فاکتور مشتری (سند چاپی) */
/* The one page that leaves the atelier and is read by the buyer. What makes
   the owner's own paper invoice look tidy is that everything from the items
   down to the payable line is a single ruled block, and every figure is one
   line — so that is how this is built. */
.bill {
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.bill__bar { height: 14px; background: var(--burgundy); }
.bill__body { padding: var(--space-6) var(--space-6) var(--space-6); }

.bill__title {
  margin: var(--space-1) 0 var(--space-6);
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.3px;
}

/* the two banded headers — the atelier on one, the customer on the next */
.bill__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background: var(--cream-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.bill__band + .bill__band {
  margin-top: var(--space-2);
  background: var(--stone-050);
}
.bill__seller { display: flex; align-items: center; gap: var(--space-4); }
.bill__mark {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bill__mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.bill__mark span { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--burgundy); }
.bill__seller-name { font-size: var(--text-lg); font-weight: 700; line-height: 1.6; }
.bill__seller-line { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.9; }
.bill__facts { text-align: start; font-size: var(--text-base); line-height: 2.1; }
.bill__facts b { font-weight: 600; }

.bill__band--stack { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.bill__band-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.bill__addr { font-size: var(--text-sm); color: var(--ink-soft); }
.bill__who { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-base); }
.bill__who-icon { color: var(--burgundy); }
.bill__who-name { font-weight: 700; }

/* ---- the one ruled block: items, notes and totals share a single frame ---- */
.bill__sheet {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-5);
  table-layout: fixed;
}
.bill__sheet th,
.bill__sheet td {
  border: 1px solid var(--line);
  padding: var(--space-3);
  font-size: var(--text-base);
  vertical-align: middle;
}
.bill__sheet thead th {
  position: static;
  background: var(--brand-tint-strong);
  color: var(--burgundy);
  font-weight: 700;
  text-align: center;
  padding-block: var(--space-2);
}
.bill__sheet thead th:first-child { text-align: start; }
.bill__item td { text-align: center; }
.bill__item .bill__cell-name { text-align: start; line-height: 1.9; }
.bill__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill__desc { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 2px; }
/* موجود یا سفارشی‌دوزی — said on the line itself, because a customer who takes
   one piece home today and waits for another has to read which is which. */
.bill__tag {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.bill__tag--stock { background: rgba(42, 96, 70, .12); color: var(--success); }
.bill__tag--custom { background: var(--gold-tint); color: var(--gold-600); }
.bill__empty { text-align: center; color: var(--ink-soft); }

/* توضیحات — sits inside the same frame, so nothing floats loose */
.bill__notes-cell { text-align: start; }
.bill__notes-title { color: var(--gold-600); font-weight: 700; margin-bottom: var(--space-2); }
.bill__notes-body { font-size: var(--text-sm); line-height: 2.1; white-space: pre-line; }
.bill__notes-body + .bill__notes-body { margin-top: var(--space-2); }

/* the closing rows — label on the right, figure on the left, aligned with the
   last column of the table above them */
.bill__sheet tfoot th {
  text-align: start;
  font-weight: 600;
  background: var(--stone-050);
}
.bill__sheet tfoot td { text-align: start; font-weight: 600; }
.bill__sheet tfoot tr.bill__payable th {
  background: var(--burgundy);
  color: var(--white);
  font-size: var(--text-md);
  font-weight: 700;
}
.bill__sheet tfoot tr.bill__payable td {
  background: var(--brand-tint);
  color: var(--burgundy);
  font-size: var(--text-md);
  font-weight: 700;
}
.bill__sheet tfoot tr.bill__words td {
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}
.bill__words td {
  text-align: start;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  background: var(--surface);
}
.bill__words b { color: var(--ink); font-weight: 700; }

/* مهر و امضاء، و راه‌های ارتباطی */
.bill__foot-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); table-layout: fixed; }
.bill__foot-table th, .bill__foot-table td { border: 1px solid var(--line); padding: var(--space-3); }
.bill__foot-table th { background: var(--cream-soft); font-weight: 700; font-size: var(--text-base); text-align: center; }
.bill__foot-table td { text-align: center; height: 158px; vertical-align: middle; }
.bill__stamp-img { max-height: 120px; max-width: 175px; object-fit: contain; }
.bill__contact { display: inline-flex; flex-direction: column; gap: var(--space-2); text-align: start; font-size: var(--text-sm); }
.bill__contact a { word-break: break-all; }
/* Each way of reaching the atelier is one line: its own mark, then the id or
   number. The marks are drawn inline so a printed invoice never waits on a
   network image. */
.bill__contact-row { display: flex; align-items: center; gap: var(--space-2); }
.bill__contact-ico { flex: 0 0 auto; color: var(--ink-soft); }
.bill__contact-ico--wa { color: #25D366; }
.bill__contact-ico--ig { color: #C13584; }
.bill__contact-ico--tg { color: #229ED9; }
.bill__sign-hint { font-size: var(--text-xs); color: var(--ink-soft); margin-top: var(--space-2); }

.bill__foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  line-height: 2;
}

/* A phone number starts with a zero, and bidi would otherwise throw that zero
   to the far side of the line. Kept as its own left-to-right run. */
.tel { direction: ltr; unicode-bidi: isolate; display: inline-block; }

@media (max-width: 720px) {
  .bill__body { padding: var(--space-4); }
  .bill__title { font-size: 22px; }
  .bill__band { flex-direction: column; align-items: flex-start; }
  .bill__sheet { table-layout: auto; }
  .bill__sheet th, .bill__sheet td { padding: var(--space-2); font-size: var(--text-sm); }
}

@media print {
  /* یک برگهٔ A5 — the whole invoice, at a size that still reads on paper. The
     type scale is redefined on .bill itself, so every rule built from these
     tokens comes down with it instead of being overridden one by one. */
  @page { size: A5 portrait; margin: 7mm; }
  .bill {
    --text-xs: 5.6pt;
    --text-sm: 6.4pt;
    --text-base: 7pt;
    --text-md: 8pt;
    --text-lg: 9pt;
    --text-xl: 10.5pt;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-8: 16px;
  }
  .bill__bar { height: 6px; }
  .bill__title { font-size: 13pt; margin: 2px 0 8px; }
  .bill__mark { width: 40px; height: 40px; border-width: 1px; }
  .bill__mark span { font-size: 13pt; }
  .bill__sheet th, .bill__sheet td { padding: 3px 5px; }
  .bill__foot-table th, .bill__foot-table td { padding: 4px; }
  .bill__foot-table td { height: 58px; }
  .bill__stamp-img { max-height: 46px; max-width: 80px; }
  .bill__foot { margin-top: 6px; padding-top: 4px; }
  /* On a narrow page the two halves of a band would wrap under each other and
     the sheet would grow a line taller for nothing; they stay side by side. */
  .bill__band { flex-wrap: nowrap; align-items: flex-start; padding: 6px 8px; }
  .bill__band--stack { flex-wrap: wrap; }
  .bill__seller-name { line-height: 1.4; }
  .bill__seller-line, .bill__facts { line-height: 1.7; }
  .bill__notes-body { line-height: 1.7; }
  .bill__notes-cell { padding-block: 4px; }
  .bill__sheet { margin-top: 6px; }
  .sidebar, .topbar, .no-print, .flashes, .sidebar-backdrop, .skip-link { display: none !important; }
  body { background: #fff; padding: 0 !important; }
  .content { padding: 0; }
  .bill { max-width: none; width: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .bill__body { padding: 0; }
  .bill__bar,
  .bill__band,
  .bill__sheet thead th,
  .bill__sheet tfoot th,
  .bill__payable th,
  .bill__payable td,
  .bill__foot-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bill__contact-ico { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bill__sheet thead { display: table-header-group; }
  .bill__item, .bill__band, .bill__foot-table { break-inside: avoid; }
  .card { box-shadow: none; border-color: #ccc; }
  table.table th { position: static; }
}

/* ---------------------------------------------- 11b. فرم درشت ثبت سفارش */
/* ثبت سفارش is the screen an admin lives on all day and types a real customer's
   money into. It is set one size up from the rest of the panel — larger fields,
   numbered boxes, and a summary bar that stays under the thumb. */
.form-lg .card { padding: var(--space-5) var(--space-5) var(--space-6); }
.form-lg .form-grid { gap: var(--space-4) var(--space-5); }
.form-lg .field label { font-size: var(--text-base); color: var(--ink); font-weight: 600; }
.form-lg .field__hint { font-size: var(--text-sm); line-height: 1.9; }
.form-lg .field input,
.form-lg .field select,
.form-lg .field textarea {
  font-size: var(--text-md);
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.form-lg .field textarea { min-height: 92px; }
.form-lg .combo__input { font-size: var(--text-md); min-height: 46px; }
.form-lg .item-row input,
.form-lg .item-row select { font-size: var(--text-base); min-height: 40px; padding: var(--space-1) var(--space-2); }

/* a numbered head, so the form reads as steps rather than as one long page */
.section__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--space-5)) var(--space-4);
  padding: 0 var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}
.section__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--white);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.section__title { margin: 0; font-size: var(--text-lg); font-weight: 700; letter-spacing: -.2px; }
.section__note { font-size: var(--text-sm); color: var(--ink-soft); width: 100%; }
.section__side { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }

/* the boxed group inside a step — delivery details, amounts, and so on */
.box {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--stone-050);
  padding: var(--space-4);
}
.box + .box { margin-top: var(--space-3); }
.box__title { font-size: var(--text-sm); font-weight: 600; color: var(--burgundy); margin-bottom: var(--space-3); }

/* جمع فاکتور — the figure the admin reads back to the customer on the phone */
.total-board { display: flex; flex-direction: column; gap: var(--space-2); }
.total-board__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--stone-050);
  font-size: var(--text-base);
}
.total-board__row--grand {
  background: var(--brand-tint);
  border: 1px solid var(--burgundy);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--burgundy);
}
.total-board__row--grand .total-board__value { font-size: var(--text-xl); }
.total-board__value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* the submit bar — always reachable, never hunted for at the foot of the page */
.form-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-glass-solid);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
.form-bar__sum { display: flex; flex-direction: column; line-height: 1.5; }
.form-bar__label { font-size: var(--text-sm); color: var(--ink-soft); }
.form-bar__value { font-size: var(--text-xl); font-weight: 700; color: var(--burgundy); font-variant-numeric: tabular-nums; }
.form-bar__actions { margin-inline-start: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.btn--lg { min-height: 50px; padding: var(--space-2) var(--space-8); font-size: var(--text-md); font-weight: 600; }

@media (max-width: 720px) {
  .form-bar { flex-direction: column; align-items: stretch; }
  .form-bar__actions { margin-inline-start: 0; }
  .form-bar__actions .btn { flex: 1; }
  .section__head { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
}

/* -------------------------------------------------------- 12. responsive */
@media (max-width: 1100px) {
  .grid--5, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* The drawer rests just off the edge it will slide in from: the right in
     Persian, the left in a left-to-right language. */
  .sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease);
    z-index: 50;
    box-shadow: var(--shadow-lg);
  }
  body[dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.is-open { transform: translateX(0) !important; }
  .sidebar-backdrop.is-on { display: block; }
  .menu-toggle { display: inline-flex; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .form-grid, .form-grid--3 { grid-template-columns: 1fr; }
  .content { padding: var(--space-4) var(--space-3) 56px; }
  .topbar { padding: var(--space-2) var(--space-3); }
  .topbar__who { display: none; }
}
@media (max-width: 560px) {
  .grid--5, .grid--6 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr; }
  .stat__value { font-size: var(--text-lg); }
}
/* On anything driven by a finger, every target is at least 44px tall. */
@media (hover: none) and (pointer: coarse) {
  .nav-link { min-height: 44px; }
  .btn { min-height: 44px; }
  .btn--sm { min-height: 38px; }
  .pagination a, .pagination span { min-width: 44px; min-height: 44px; }
  .field input, .field select, .field textarea, .input { min-height: 44px; }
}

/* --------------------------------------------- 13. handing an order over */
.ship-form { display: flex; flex-direction: column; gap: var(--space-3); }
.ship-form__methods { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ship-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  min-height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--cream-soft);
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ship-pill:hover { border-color: var(--gold-500); }
.ship-pill:has(input:checked) { background: var(--burgundy); color: var(--white); border-color: var(--burgundy); }
.ship-pill:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.ship-pill input { accent-color: var(--gold-500); margin: 0; }
.ship-form__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.ship-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 130px; }
.ship-field--grow { flex: 1; min-width: 160px; }
.ship-field span { font-size: var(--text-xs); color: var(--ink-soft); }
.ship-field.is-hidden { display: none; }

.row-actions summary { list-style: none; cursor: pointer; }
.row-actions summary::-webkit-details-marker { display: none; }
.row-actions__body {
  position: relative;
  z-index: 2;
  margin-top: var(--space-2);
  padding: var(--space-3);
  min-width: 280px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
tr.is-highlighted > td { background: var(--gold-tint); }

/* the edit/delete pair that sits beside every row that can be added */
.crud-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.crud-actions form { margin: 0; }

/* whether this order is allowed to be sent, and why */
.permission-line {
  margin: var(--space-3) 0 var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.permission-line.is-granted { background: var(--success-tint-soft); color: var(--success); }
.permission-line.is-blocked { background: var(--danger-tint-soft); color: var(--danger); }
.permission-line form { margin: 0; }

/* the approve / send-back pair on the sign-off screen */
.decision-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.decision-row form { margin: 0; }

/* the two sign-offs of one order, shown together */
.ticks { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tick {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.tick--on { background: var(--success-tint); color: var(--success); }
.tick--off { background: var(--danger-tint); color: var(--danger); }
.tick--wait { background: var(--warning-tint); color: var(--warning); }

/* a finished order held back by nothing but an unapproved deposit slip */
.row--alert > td { background: var(--danger-tint-soft); }
.row--alert > td:first-child { box-shadow: inset -3px 0 0 var(--danger); }

.approval-banner {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--danger-tint-soft);
  border: 1px solid var(--danger-line);
  border-inline-start-width: 3px;
  color: var(--danger);
  font-size: var(--text-base);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.approval-banner__order {
  background: var(--surface);
  color: var(--danger);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ---------------------- the customer's details on the order form */
.contact-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream-soft);
}
.contact-box__name { display: flex; flex-direction: column; gap: 3px; min-width: 140px; }
.contact-box .field { margin: 0; min-width: 150px; }
.contact-box__address { flex: 1; min-width: 240px; }
.contact-box textarea { min-height: 54px; }
@media (max-width: 560px) {
  .contact-box { flex-direction: column; align-items: stretch; }
}

.delivery-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--cream-soft);
  font-size: var(--text-base);
}
.delivery-details__address { flex: 1 1 100%; }
.cell-address { max-width: 220px; white-space: normal; line-height: 1.6; }

/* fabric prices are never shown in one unit alone */
.dual-price { display: flex; flex-direction: column; gap: 2px; line-height: 1.55; }
.dual-price__row { display: flex; gap: var(--space-1); justify-content: space-between; white-space: nowrap; }
.dual-price__unit { color: var(--ink-soft); font-size: var(--text-xs); }
.unit-echo { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-soft); }
.unit-echo strong { font-weight: 600; color: var(--burgundy); }

/* reading the slip queue against the bank statement */
.hidden-form { display: none; }
.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}
.card--danger { border-color: var(--danger-edge); }
.card--danger .card__title { color: var(--danger); }

/* the one badge every screen reads before a parcel is handed over */
.settle {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.settle--success { background: var(--success-tint); color: var(--success); }
.settle--warning { background: var(--warning-tint); color: var(--warning); }
.settle--danger { background: var(--danger-tint); color: var(--danger); }

/* a reason dropdown that sits beside a small button without towering over it */
.input--sm { font-size: var(--text-sm); padding: var(--space-1) var(--space-2); min-height: 30px; height: auto; max-width: 150px; }

/* Picking tailors, and tailors picking their own pieces: big tap targets,
   because both are done in a hurry, often on a phone. */
.pick-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pick:hover { border-color: var(--gold-500); }
.pick:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.pick.is-on {
  border-color: var(--burgundy);
  background: var(--burgundy-tint);
  box-shadow: inset 0 0 0 1px var(--burgundy);
}
.pick.is-off { opacity: .45; cursor: not-allowed; }
.pick input { accent-color: var(--burgundy); width: 18px; height: 18px; min-height: 0; }
.pick__name { font-weight: 600; }
.pick__meta { color: var(--ink-soft); font-size: var(--text-sm); font-weight: 400; }
.pick--wide { flex: 1 1 260px; justify-content: space-between; }
.pick--taken { background: var(--cream-soft); border-style: dashed; }

/* a card that is asking the person for something, not just showing them something */
.card--attention {
  border-color: var(--attention-edge);
  box-shadow: 0 0 0 3px var(--attention-glow), var(--shadow);
}
.card--attention .card__title { color: var(--burgundy); }

/* A dropdown that can be searched. The list is drawn on top of the page (not
   inside the scrolling items table), so it is never cut off at the table edge. */
.combo { position: relative; display: block; }
.combo--wide { max-width: 420px; }
.combo--ready .combo__select { display: none; }
.combo__input { width: 100%; padding-left: 28px; }
.combo__clear {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.combo__clear:hover { color: var(--danger); background: var(--cream-soft); }
.combo__list {
  position: fixed;
  z-index: 200;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(43,35,32,.16));
  scrollbar-width: thin;
}
.combo__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 40px;
  justify-content: center;
}
.combo__option.is-active { background: var(--burgundy-tint, var(--cream-soft)); }
.combo__name { font-weight: 600; }
.combo__hint { color: var(--ink-soft); font-size: var(--text-xs); }
.combo__empty { padding: var(--space-3); color: var(--ink-soft); font-size: var(--text-sm); }

/* ---- عکس‌های سفارش ---- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
.photo-grid__item { margin: 0; background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.photo-grid__item img { display: block; width: 100%; height: 190px; object-fit: cover; background: var(--surface); }
.photo-grid__item figcaption { padding: var(--space-2); display: grid; gap: 4px; }
@media (max-width: 640px) {
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .photo-grid__item img { height: 150px; }
}

/* متن ثبت سفارش — the order as it was first written down */
.order-note { white-space: pre-wrap; line-height: 2; font-size: var(--text-sm); color: var(--ink);
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--space-3); max-height: 420px; overflow: auto; }

/* ------------------------------------------- 14. کلید حالت روشن / تاریک */
/* One button, in the top bar and on the login page. It shows the mode it will
   switch *to*, so the moon means "make it dark" and the sun means "bring the
   light back". The choice is kept in the browser, per person and per device. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--burgundy);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.theme-toggle:hover { background: var(--cream-soft); border-color: var(--gold-500); }
.theme-toggle__dark { display: none; }
:root[data-theme="dark"] .theme-toggle__dark { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle__light { display: none; }

/* on the login page it sits in the corner of the page, not of a card */
.theme-toggle--corner {
  position: fixed;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 10;
}

@media (hover: none) and (pointer: coarse) {
  .theme-toggle { width: 44px; height: 44px; }
}

/* The mark is one solid burgundy shape on a transparent ground; on charcoal it
   would sink into the page, so after dark it is lifted to the same rose the
   rest of the brand takes. The invoice keeps the original ink. */
:root[data-theme="dark"] .sidebar .brand__logo,
:root[data-theme="dark"] .login-card .brand__logo { filter: brightness(1.85) saturate(1.05); }

/* ---- the date picker is a third-party widget: it is told the theme too ----
   Its own stylesheet paints a white card with grey bars, which after dark is
   a torch in the face; the same tokens the panel uses are put over it. */
:root[data-theme="dark"] .datepicker-container,
:root[data-theme="dark"] .datepicker-plot-area {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-lg);
}
:root[data-theme="dark"] .datepicker-navigator,
:root[data-theme="dark"] .datepicker-day-view .header,
:root[data-theme="dark"] .datepicker-grid-view .header,
:root[data-theme="dark"] .datepicker-plot-area .toolbox {
  background: var(--surface-sunken);
  border-color: var(--line-soft);
  color: var(--ink);
}
:root[data-theme="dark"] .datepicker-plot-area .pwt-btn,
:root[data-theme="dark"] .datepicker-plot-area .pwt-btn-next,
:root[data-theme="dark"] .datepicker-plot-area .pwt-btn-prev,
:root[data-theme="dark"] .datepicker-plot-area .pwt-btn-switch,
:root[data-theme="dark"] .datepicker-plot-area .pwt-btn-today,
:root[data-theme="dark"] .datepicker-plot-area .pwt-btn-submit,
:root[data-theme="dark"] .datepicker-plot-area .title,
:root[data-theme="dark"] .datepicker-plot-area .header-row,
:root[data-theme="dark"] .datepicker-plot-area .header-row-cell {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-soft);
}
:root[data-theme="dark"] .datepicker-plot-area .header-row-cell { color: var(--ink-soft); }
:root[data-theme="dark"] .datepicker-plot-area .table-days td,
:root[data-theme="dark"] .datepicker-plot-area .month-grid-box td,
:root[data-theme="dark"] .datepicker-plot-area .month-grid-box div {
  background: transparent;
  color: var(--ink);
}
:root[data-theme="dark"] .datepicker-plot-area .table-days td:hover,
:root[data-theme="dark"] .datepicker-plot-area .pwt-btn:hover,
:root[data-theme="dark"] .datepicker-plot-area .month-grid-box div:hover { background: var(--cream-soft); }
/* The plugin marks the picked day with a blue chip on a bare <span> inside
   the cell, which is the one colour in the panel that belongs to nobody; it
   is repainted in the panel's own burgundy. */
:root[data-theme="dark"] .datepicker-plot-area .table-days td.selected,
:root[data-theme="dark"] .datepicker-plot-area .month-grid-box div.selected {
  background: var(--burgundy) !important;
  color: var(--white) !important;
}
:root[data-theme="dark"] .datepicker-plot-area .table-days td.selected span,
:root[data-theme="dark"] .datepicker-plot-area .table-days td.today span,
:root[data-theme="dark"] .datepicker-plot-area .month-grid-box div.selected span {
  background: var(--burgundy) !important;
  color: var(--white) !important;
}
:root[data-theme="dark"] .datepicker-plot-area .table-days td.today,
:root[data-theme="dark"] .datepicker-day-view .table-days td.today {
  background: var(--gold-tint);
  color: var(--gold-600);
  box-shadow: inset 0 0 0 1px var(--gold-500);
}
:root[data-theme="dark"] .datepicker-plot-area .table-days td.other-month,
:root[data-theme="dark"] .datepicker-plot-area .table-days td.disabled { color: var(--ink-soft); opacity: .45; }

/* ---- فاکتور: کاغذ، در هر حالتی ----------------------------------------
   The invoice is the one page that leaves the atelier and gets printed. It
   stays on paper colours even after dark, so what is on the screen is what
   comes out of the printer. Only the tokens are restated; no rule of the
   invoice itself changes. */
:root[data-theme="dark"] .bill {
  color-scheme: light;
  /* The semantic tokens are written out in full here, not built from the
     primitives: a var() is resolved where it is declared, so restating
     --paper alone would leave --surface holding the dark value it took at
     the root. */
  --surface: #FDF8EE;
  --surface-sunken: #F0E7D6;
  --cream: #F6EFE1;
  --cream-soft: #F0E7D6;
  --cream-deep: #E7DCC7;
  --stone-050: #F6EFE1;
  --line: #DBCEB6;
  --line-soft: #E7DCC7;
  --white: #FFFFFF;
  --ink: #2B2320;
  --ink-soft: #6B605A;
  --burgundy: #6E1B32;
  --burgundy-soft: #8E2B46;
  --burgundy-tint: rgba(110, 27, 50, 0.08);
  --brand-tint: rgba(110, 27, 50, 0.08);
  --brand-tint-strong: rgba(110, 27, 50, 0.14);
  --gold: #B08B57;
  --gold-500: #B08B57;
  --gold-600: #7C5C30;
  --gold-tint: rgba(176, 139, 87, 0.14);
  --success: #2A6046;
  --warning: #8A5F10;
  --danger: #99282C;
  --info: #35525F;
  --success-tint: rgba(42, 96, 70, .12);
  --warning-tint: rgba(138, 95, 16, .13);
  --danger-tint: rgba(153, 40, 44, .12);
  --info-tint: rgba(53, 82, 95, .12);
  --row-stripe: rgba(176, 139, 87, .05);
  --placeholder: #7A716A;
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .5);
  color: var(--ink);
}

@media print {
  /* Paper has no dark mode: whatever the screen is set to, the page prints
     on white with the panel's own ink. */
  :root[data-theme="dark"] {
    color-scheme: light;
    --surface: #FFFFFF;
    --surface-sunken: #F0E7D6;
    --cream: #FFFFFF;
    --cream-soft: #F0E7D6;
    --cream-deep: #E7DCC7;
    --stone-050: #F6EFE1;
    --line: #DBCEB6;
    --line-soft: #E7DCC7;
    --white: #FFFFFF;
    --ink: #2B2320;
    --ink-soft: #6B605A;
    --burgundy: #6E1B32;
    --burgundy-soft: #8E2B46;
    --burgundy-tint: rgba(110, 27, 50, 0.08);
    --brand-tint: rgba(110, 27, 50, 0.08);
    --brand-tint-strong: rgba(110, 27, 50, 0.14);
    --gold: #B08B57;
    --gold-500: #B08B57;
    --gold-600: #7C5C30;
    --gold-tint: rgba(176, 139, 87, 0.14);
    --success: #2A6046;
    --warning: #8A5F10;
    --danger: #99282C;
    --info: #35525F;
    --success-tint: rgba(42, 96, 70, .12);
    --warning-tint: rgba(138, 95, 16, .13);
    --danger-tint: rgba(153, 40, 44, .12);
    --info-tint: rgba(53, 82, 95, .12);
    --row-stripe: transparent;
    --placeholder: #7A716A;
  }

  :root[data-theme="dark"] .sidebar .brand__logo,
  :root[data-theme="dark"] .login-card .brand__logo { filter: none; }
  .theme-toggle { display: none !important; }
}

/* ---------------------------------------------------------------------------
   جست‌وجو و مرتب‌سازی داخل جدول‌های بلند
   فهرست سفارش‌های یک ماه یا کارت مشتری‌ها ده‌ها ردیف دارد؛ پیدا کردن یک ردیف
   نباید به رفتن به صفحهٔ دیگری نیاز داشته باشد.
   ------------------------------------------------------------------------ */
.table-search {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
}
.table-search input {
  flex: 1 1 auto;
  max-width: 320px;
  padding: 8px 12px;
  border: 1px solid var(--line, #e3d7da);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
}
.table-search input:focus {
  outline: 2px solid var(--burgundy, #6E1B32);
  outline-offset: 1px;
}
.table-search__count { white-space: nowrap; }

th.is-sortable { cursor: pointer; user-select: none; }
th.is-sortable:hover { color: var(--burgundy, #6E1B32); }
th.is-sorted-asc::after  { content: " ▲"; font-size: .7em; }
th.is-sorted-desc::after { content: " ▼"; font-size: .7em; }

/* QR گوشهٔ فاکتور مشتری — کنار امضا، نه وسط برگه */
.bill__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: var(--space-4, 16px) 0 var(--space-2, 8px);
}
.bill__qr img { display: block; }

/* نوار عکس سفارش در فهرست‌ها — کوچک، مربعی، کنار هم */
.thumb-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.thumb { display: block; width: 52px; height: 52px; border-radius: var(--radius-sm);
         overflow: hidden; border: 1px solid var(--line); background: var(--cream-soft); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb--more { display: flex; align-items: center; justify-content: center;
               font-size: 12px; color: var(--muted); }
@media print { .thumb-row { display: none; } }