/* HaZix back office. Warm espresso palette (same brand tokens as the POS), light + dark, RTL-safe (logical properties). */
:root {
  --bg: #f6f2ed; --panel: #ffffff; --panel-2: #faf6f1; --panel-3: #f1eae2; --line: #e6ddd3; --line-2: #efe8e0;
  --ink: #2b2420; --muted: #6f655c; --brand: #6f4e37; --brand-d: #4d3325; --brand-soft: #efe4d9;
  --accent: #12796f; --accent-d: #0d5f59; --accent-soft: #dff1ee; --danger: #b23f3b; --danger-soft: #f8e4e3; --warn: #b7791f; --warn-soft: #faefd9;
  --ok: #2f8f5b; --ok-soft: #e0f1e7; --info: #3b78b0; --info-soft: #e1edf7;
  /* text-safe variants (>= 4.5:1 on the soft backgrounds and on the page); the plain tokens stay for fills, bars and dots */
  --accent-solid: #12796f; --ok-ink: #237a4b; --warn-ink: #8f5a0e; --info-ink: #2c6499; --danger-ink: #b23f3b;
  --side: #2a1f19; --side-2: #3a2b21; --side-ink: #efe4d9; --side-muted: #b3a393;
  /* theme-engine tokens (js/core/theme.js sets all of these from the chosen palette; the values here are the Coffee defaults, so nothing changes until a theme is picked) */
  --brand-h: #5a3f2c; --on-brand: #ffffff; --accent-on: #ffffff; --focus: #12796f;
  --side-strong: #ffffff; --side-hl: rgba(255, 255, 255, 0.12); --side-hl-2: rgba(255, 255, 255, 0.07); --side-line: rgba(255, 255, 255, 0.08); --side-edge: transparent;
  --side-active-bg: #12796f; --side-active-ink: #ffffff; --side-bar: #12796f;
  --side-w: 232px; --side-w-mini: 64px; --side-w-drawer: min(280px, 84vw);   /* sidebar: expanded rail, icon rail, phone drawer */
  --c1: #6f4e37; --c2: #168c82; --c3: #c78525; --c4: #7a5aa6; --c5: #c94d49; --c6: #4a7fb5; --c7: #8a9a3b; --c8: #d17b9a;
  --shadow: 0 1px 2px rgba(60, 40, 25, .05), 0 8px 26px rgba(60, 40, 25, .07);
  --shadow-lg: 0 20px 60px rgba(40, 25, 15, .25);
  --r: 14px; --r-sm: 10px; --slide: 100%;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #15100d; --panel: #211a16; --panel-2: #29201b; --panel-3: #33281f; --line: #3b2f27; --line-2: #31261f;
  --ink: #f3ebe4; --muted: #ab9e93; --brand: #d3a67c; --brand-d: #f0d3b6; --brand-soft: #3a2b21;
  --accent: #34b3a6; --accent-d: #5fd0c4; --accent-soft: #17332f; --danger: #ec7b77; --danger-soft: #3d2423; --warn: #e0a23c; --warn-soft: #3a2d15;
  --ok: #58c487; --ok-soft: #16301f; --info: #6fa8dc; --info-soft: #182a3a;
  --accent-solid: #34b3a6; --ok-ink: #58c487; --warn-ink: #e0a23c; --info-ink: #6fa8dc; --danger-ink: #ec7b77;
  --side: #0f0b09; --side-2: #231a14; --side-ink: #eadfd4; --side-muted: #a49383;
  --brand-h: #e2bb98; --on-brand: #1b1008; --accent-on: #06201d; --focus: #34b3a6;
  --side-strong: #ffffff; --side-hl: rgba(255, 255, 255, 0.12); --side-hl-2: rgba(255, 255, 255, 0.07); --side-line: rgba(255, 255, 255, 0.08); --side-edge: transparent;
  --side-active-bg: #34b3a6; --side-active-ink: #06201d; --side-bar: #34b3a6;
  --c1: #d3a67c; --c2: #34b3a6; --c3: #e0a23c; --c4: #a98ad6; --c5: #ec7b77; --c6: #6fa8dc; --c7: #b2c25a; --c8: #e89fba;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 26px rgba(0, 0, 0, .28);
  color-scheme: dark;
}
:root[dir="rtl"] { --slide: -100%; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
[hidden] { display: none !important; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.code { background: var(--panel-3); padding: 2px 8px; border-radius: 6px; font-size: 12.5px; letter-spacing: .03em; }
.neg { color: var(--danger-ink); }
.pos { color: var(--ok-ink); }
:root[dir="rtl"] .rtl-flip svg, :root[dir="rtl"] .rtl-flip-ico .ico svg { transform: scaleX(-1); }
.ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ic { display: block; }
.link { color: var(--accent-d); font-weight: 600; }
.link:hover { text-decoration: underline; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-d); font-weight: 600; }
.row-gap { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
th .sr-only, td .sr-only { inset-inline-start: 0; }   /* in a table that scrolls sideways (.table-wrap) the hidden text sits at the page's start edge, not past the screen edge (it widened draft invoices at 1024 px) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sidebar :focus-visible { outline-color: var(--side-strong); outline-offset: -2px; }   /* the page's ring colour can be too dim on the sidebar's own background */

.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--brand); font-weight: 800; font-size: 20px; }
.boot img { width: 56px; height: 56px; border-radius: 14px; }
.boot .boot-co { max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--muted, #6b6259); margin-top: -4px; }
.boot .boot-co:empty { display: none; }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 650; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .12s; }
.btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--muted); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--accent-on); }
.btn-primary:hover:not(:disabled) { background: var(--accent-d); border-color: var(--accent-d); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(.93); background: var(--danger); }
:root[data-theme="dark"] .btn-danger { color: #2a0b0a; }
.btn-danger-ghost { color: var(--danger-ink); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }
.btn-ghost { background: var(--panel); }
.btn-lg { min-height: 46px; font-size: 15px; }
.btn-block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; }
.icon-btn { transition: background .15s, transform .12s ease-out; }
.icon-btn:hover:not(:disabled) { background: var(--panel-3); }
.icon-btn:active:not(:disabled) { transform: scale(.92); }
.icon-btn.danger { color: var(--danger-ink); }
.icon-btn.back { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); }

/* ------------------------------------------------------------ badges / chips */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--panel-3); color: var(--muted); white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge-danger { background: var(--danger-soft); color: var(--danger-ink); }
.badge-info { background: var(--info-soft); color: var(--info-ink); }
.tag-refund { margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: var(--danger-soft); color: var(--danger-ink); font-size: 11px; font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.chip small { color: var(--muted); }
.chip.link { color: var(--accent-d); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.chip-x { position: relative; display: inline-grid; place-items: center; border: 0; background: transparent; padding: 0; color: var(--muted); border-radius: 50%; width: 16px; height: 16px; }
.chip-x::after { content: ""; position: absolute; inset: -12px; }   /* 40px hit area around the small x */
.chip-x:hover { background: var(--danger-soft); color: var(--danger-ink); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .12); flex: 0 0 auto; }
.swatch.lg { width: 44px; height: 44px; border-radius: 10px; }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 40px rgba(0, 0, 0, .4); color: #fff; font-weight: 800; font-size: 13px; flex: 0 0 auto; }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.who { display: flex; align-items: center; gap: 10px; }
.thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: var(--panel-3); flex: 0 0 auto; }
.thumb.ph { display: inline-grid; place-items: center; color: var(--muted); }
.prod-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fav { color: var(--c3); margin-inline-start: 6px; vertical-align: middle; }

/* ------------------------------------------------------------ shell */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .2s cubic-bezier(.4, 0, .2, 1); }
.shell.collapsed { grid-template-columns: var(--side-w-mini) minmax(0, 1fr); }
.scrim, .bottomnav { display: none; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; overflow: hidden; z-index: 30; border-inline-end: 1px solid var(--side-edge); }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 14px 12px; min-height: 64px; min-width: 0; }
.brand img { width: 38px; height: 38px; border-radius: 10px; background: #fff; object-fit: contain; flex: 0 0 auto; }
.brand-text { display: grid; line-height: 1.2; white-space: nowrap; min-width: 0; overflow: hidden; }
.brand-text b { font-size: 16px; }
.brand-text span { font-size: 11.5px; color: var(--side-muted); letter-spacing: .04em; text-transform: uppercase; }
.side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; scrollbar-width: thin; }
.side-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: 10px; border: 0; background: transparent; color: var(--side-ink); font-weight: 600; text-align: start; position: relative; }
.side-link .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .side-link:hover { background: var(--side-2); } }   /* touch: a tapped entry must not keep a "hover" colour */
.side-link.active { background: var(--side-active-bg); color: var(--side-active-ink); }
.side-link.sub.active { background: var(--side-hl); color: var(--side-strong); box-shadow: inset 3px 0 0 var(--side-bar); }
:root[dir="rtl"] .side-link.sub.active { box-shadow: inset -3px 0 0 var(--side-bar); }
.side-link.active-group { color: var(--side-strong); background: var(--side-hl-2); }
.side-link .chev { transition: transform .2s; opacity: .7; }
.side-group.open > .side-link .chev { transform: rotate(180deg); }
.side-sub { display: none; padding: 2px 0 6px; margin-inline-start: 20px; border-inline-start: 1px solid var(--side-line); }
.side-group.open > .side-sub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.side-link.sub { padding: 7px 10px; gap: 9px; font-weight: 500; font-size: 13.5px; color: var(--side-muted); }
@media (hover: hover) { .side-link.sub:hover { color: var(--side-strong); } }
.side-foot { padding: 8px 10px 12px; border-top: 1px solid var(--side-line); display: grid; gap: 2px; }
.collapse-btn .ico { transition: transform .2s; }
.shell.collapsed .collapse-btn .ico { transform: rotate(180deg); }
:root[dir="rtl"] .collapse-btn .ico { transform: rotate(180deg); }
:root[dir="rtl"] .shell.collapsed .collapse-btn .ico { transform: none; }
.shell.collapsed .brand-text, .shell.collapsed .lbl, .shell.collapsed .chev { display: none; }
.shell.collapsed .side-sub { display: none !important; }
.shell.collapsed .side-link { justify-content: center; padding: 11px 0; }
.shell.collapsed .side-nav, .shell.collapsed .side-foot { padding-inline: 8px; }
.shell.collapsed .brand { justify-content: center; padding-inline: 0; }
.side-link .ico { flex: 0 0 auto; }

/* Desktop hover sidebar (mouse screens wider than 900 px; side-rail.js adds .hovernav). It is the icon rail (the .collapsed look) until the pointer or the keyboard focus reaches it,
   then it opens OVER the page (.peek): the grid column never leaves 64 px, so nothing in the page moves. .pinned (user menu > Pin sidebar open) keeps it open in the layout. */
.skip-link { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 90; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--ink); color: var(--bg); font-weight: 650; transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; outline: 2px solid var(--accent); outline-offset: 2px; }
.shell.hovernav .collapse-btn { display: none; }
.shell.hovernav:not(.pinned) { grid-template-columns: var(--side-w-mini) minmax(0, 1fr); }
.shell.hovernav:not(.pinned) .sidebar { width: var(--side-w-mini); transition: width .16s cubic-bezier(.4, 0, .2, 1), box-shadow .16s; }
.shell.hovernav.peek .sidebar { width: var(--side-w); box-shadow: var(--shadow-lg); }   /* wider than its grid track: it overflows toward the page (to the left in Arabic) and covers it */
.shell.hovernav .sidebar :focus-visible { outline-width: 2px; }

/* label tooltip: the icon rail (and any label that is cut short) shows the full name next to the entry; one element, placed by main.js (sideTips) */
.side-tip { position: fixed; z-index: 80; max-width: min(260px, 70vw); padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 600; line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity .12s; }
.side-tip.on { opacity: 1; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); min-height: 62px; }
.menu-btn { display: none; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); min-width: 0; flex: 1 1 0; white-space: nowrap; overflow: hidden; }
.crumbs a:hover { color: var(--ink); }
.crumbs .cur { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { opacity: .6; display: inline-flex; }
.gsearch { display: inline-flex; align-items: center; gap: 8px; min-width: 240px; height: 38px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.gsearch:hover { border-color: var(--muted); }
.gsearch > span:not(.ico) { flex: 1; text-align: start; }
/* Desktop / tablet top bar (901 px and up). The bar has up to a dozen items (Apps, crumbs, search, subscription chip, kiosk switcher, chat, bell, language, help, theme, user) and the room for them depends on the sidebar (232 / 64 px) as much as on the screen, so the tiers below
   are container queries on the bar's own width, not viewport media queries. The crumbs keep a floor (the current page title stays readable, the parents give way first) and the others give way in this order: search pill, subscription chip + kiosk name, Apps label + user name. Phones (<= 900 px) are untouched. */
.topbar { container: topbar / inline-size; }
@media (min-width: 901px) {
  .topbar > .crumbs { min-width: 96px; }
  .crumbs a { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .crumbs .sep { flex: 0 0 auto; }
  .crumbs .cur { flex: 0 1 auto; min-width: 6ch; }
  .topbar .cs-wrap { flex: 0 1 auto; min-width: 0; }
  .topbar .cs-btn { min-width: 0; }
  .topbar .cs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @container topbar (min-width: 760px) { .topbar > .crumbs { min-width: 190px; } }
  @container topbar (max-width: 1600px) { .topbar .gsearch { min-width: 170px; } .topbar .gsearch kbd { display: none; } }
  @container topbar (max-width: 1700px) {
    .topbar .sub-chip .sub-long { display: none; } .topbar .sub-chip .sub-short { display: inline; } .topbar .sub-chip { padding: 0 11px; }
    .topbar .cs-btn { max-width: 180px; }
  }
  @container topbar (max-width: 800px) { .topbar .cs-name, .topbar .cs-btn > .ico:last-child { display: none; } }   /* tablet with the sidebar open: the kiosk switcher is just the store icon (its title and menu name the kiosks) */
  @container topbar (max-width: 1260px) {
    .topbar .gsearch { min-width: 38px; width: 38px; padding: 0; justify-content: center; }
    .topbar .gsearch > span:not(.ico), .topbar .gsearch kbd { display: none; }
  }
  @container topbar (max-width: 1120px) {
    .topbar .apps-label, .topbar .apps-chev { display: none; } .topbar .apps-trigger { padding: 0 9px; max-width: none; }
    .topbar .user-name { display: none; } :root:root .topbar .user-btn { padding: 3px; }
  }
}
kbd { direction: ltr; unicode-bidi: isolate; font: 600 11px var(--font); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; background: var(--panel-2); color: var(--muted); }
.lang-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 0 10px; gap: 6px; font-weight: 800; font-size: 12px; white-space: nowrap; }
.user-menu { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); padding: 3px 10px 3px 3px; border-radius: 999px; }
:root[dir="rtl"] .user-btn { padding: 3px 3px 3px 10px; }
.user-name { font-weight: 650; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; display: grid; }
.menu-head { padding: 8px 10px; display: grid; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; text-align: start; width: 100%; font-weight: 550; }
.menu a:hover, .menu button:hover { background: var(--panel-3); }
.subnav { display: none; }
.content { padding: 24px 28px 60px; min-width: 0; outline: 0; }
.page { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.page.narrow { max-width: 980px; }
.page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; letter-spacing: -.01em; line-height: 1.2; }
.page-head p { margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.head-badges { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }

/* ------------------------------------------------------------ cards, KPIs */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .list > .toolbar { padding: 12px 14px 4px; }   /* a list inside a flush card: the filters must not touch the card edge */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h3 { font-size: 15.5px; }
.hero-card { display: flex; gap: 18px; align-items: center; background: linear-gradient(135deg, var(--brand-soft), var(--panel)); }
.hero-ico { width: 60px; height: 60px; border-radius: 16px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; flex: 0 0 auto; }
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi-row.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-row.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* the session detail of a company without tips (pharmacy) */
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); container-type: inline-size; min-width: 0; }
.kpi.small { padding: 12px 14px; }
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.kpi.small .kpi-ico { width: 26px; height: 26px; border-radius: 8px; }
.kpi-label { flex: 1; min-width: 0; color: var(--muted); font-weight: 650; font-size: 13px; }
.kpi-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.kpi-foot .kpi-sub { margin-top: 0; }
.kpi-foot .badge { white-space: normal; max-width: 100%; }   /* a long status badge wraps instead of pushing the page wider than a phone */
.kpi-value { font-size: clamp(18px, 11.5cqw, 26px); font-weight: 800; letter-spacing: -.02em; margin-top: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi.small .kpi-value { font-size: clamp(15px, 10cqw, 19px); margin-top: 6px; }
.kpi-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 750; padding: 2px 8px; border-radius: 999px; }
.delta.up { background: var(--ok-soft); color: var(--ok-ink); }
.delta.down { background: var(--danger-soft); color: var(--danger-ink); }
.delta.flat { color: var(--muted); }
.stat-strip { display: flex; gap: 12px; flex-wrap: wrap; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; min-width: 130px; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.stat-value { font-size: 18px; font-weight: 800; }
.stat-sub { font-size: 12px; color: var(--muted); }
.list-summary:empty { display: none; }
.grid-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-dash .span-2 { grid-column: span 2; }
.grid-dash .span-3 { grid-column: 1 / -1; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.split > .col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; align-content: start; }
.pos-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto; gap: 24px; align-items: center; background: linear-gradient(120deg, var(--brand-soft), var(--panel) 60%); }
.pos-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pos-title h2 { font-size: 19px; }
.pos-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; }
.pos-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pos-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.pos-stats div { display: grid; }
.pos-stats span { color: var(--muted); font-size: 12px; font-weight: 650; }
.pos-stats b { font-size: 17px; }
.pos-spark { display: grid; justify-items: stretch; gap: 2px; min-width: 180px; }
.pos-spark-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.spark-box svg { display: block; width: 100%; height: auto; max-height: 72px; }
.spark .c-line { vector-effect: non-scaling-stroke; }
.spark .area { fill: var(--c2); opacity: .15; }
.spark .c-line { stroke: var(--c2); stroke-width: 2; stroke-linejoin: round; }
.spark .c-dot { fill: var(--c2); stroke: none; }
.hbars { display: grid; gap: 14px; }
.hbar { display: grid; gap: 4px; }
.hbar-top { display: flex; justify-content: space-between; gap: 10px; }
.hbar-name .rank { display: inline-block; min-width: 18px; color: var(--muted); font-weight: 700; }
.hbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hbar-track { height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 999px; }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.donut-wrap.big { padding: 10px 0; }
.donut { display: block; }
.donut .d-top { font-size: 14px; font-weight: 800; fill: var(--ink); }
.donut .d-bot { font-size: 9px; fill: var(--muted); }
.legend-col { display: grid; gap: 8px; min-width: 190px; flex: 1; }
.lg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lg-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-pct { color: var(--muted); width: 38px; text-align: end; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kv-grid div { display: grid; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; }
.kv-grid span { font-size: 12px; color: var(--muted); font-weight: 650; }
.kv-list { display: grid; grid-template-columns: fit-content(55%) 1fr; gap: 9px 14px; margin: 0; font-size: 13.5px; }   /* a long label wraps at 55%: the value keeps room (it was squeezed into a 80px column on a phone) */
.kv-list dt { color: var(--muted); font-weight: 650; }
.kv-list dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
.totals { display: grid; gap: 6px; padding-top: 12px; margin-top: 8px; border-top: 1px dashed var(--line); margin-inline-start: auto; max-width: 340px; }
.totals > div { display: flex; justify-content: space-between; gap: 20px; }
.totals .grand { font-size: 18px; font-weight: 800; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.side-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; text-align: center; }
.side-stats div { display: grid; }
.side-stats span { font-size: 11.5px; color: var(--muted); font-weight: 650; }
.side-stats b { font-size: 16px; }
.info-note { margin-top: 14px; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--info-soft); color: var(--ink); font-size: 13px; margin-bottom: 12px; }
.info-note .ico { color: var(--info-ink); margin-top: 1px; }
.error-box { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r); background: var(--danger-soft); color: var(--danger-ink); font-weight: 600; flex-wrap: wrap; }
.error-box.big { flex-direction: column; text-align: center; padding: 50px 20px; }
.error-box.big p { color: var(--ink); font-weight: 400; }
.live-title { display: flex; align-items: center; gap: 10px; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; color: var(--ok-ink); }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 143, 91, .5); } 100% { box-shadow: 0 0 0 9px rgba(47, 143, 91, 0); } }

/* ------------------------------------------------------------ toolbar / list */
.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search-box { position: relative; flex: 1 1 260px; max-width: 420px; }
.search-box .ico { position: absolute; inset-inline-start: 12px; top: 11px; color: var(--muted); }
.search-input { width: 100%; height: 38px; padding: 0 12px; padding-inline-start: 36px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); outline: 0; }
.search-input:focus, .chip-select:focus, .date-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.chip-select, .date-in { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); outline: 0; max-width: 100%; }
.tb-filters { display: contents; }
.filters-btn { display: none; }
.date-pair { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
:root[dir="rtl"] .date-pair > span:not(.date-box) { display: inline-block; transform: scaleX(-1); }   /* the arrow between "from" and "to" points the way the row reads (never the Arabic date box, a span too: its text came out mirrored) */
.date-in { width: 140px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--panel); }
.seg { border: 0; background: transparent; padding: 0 12px; min-height: 40px; color: var(--muted); font-weight: 650; }
.seg.on { background: var(--brand); color: var(--on-brand); }
:root[data-theme="dark"] .seg.on, :root[data-theme="dark"] .hero-ico, :root[data-theme="dark"] .pos-ico { color: #1a120c; }
.list-body { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; min-height: 60px; transition: opacity .15s; }
.list-body.is-loading, .report-out.is-loading { opacity: .55; }
.list-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.list-foot:empty { display: none; }
.pg { font-weight: 650; color: var(--ink); }
/* A table's header row stays in view while its rows scroll (owner 2026-10-26, docs/OWNER-DECISIONS.md "Table headers stay in view"). A box that scrolls sideways is also the
   vertical scroll box of what it holds, so a header can never stick to the page from inside it: the box itself scrolls both ways, never taller than the room under the
   top bar, and the first header row sticks to its top. The boxes: .table-wrap (every list, report and document table) and the apps' own table boxes listed below.
   Height: the visible height under the top bar less what follows the box at the end of the page, so the page scrolled to its very end never pushes the header row under
   the top bar. --tw-below: what follows, measured per box by public/js/admin/table-room.js (a ResizeObserver, never a scroll handler); until it has measured, --tw-end
   (a list's footer about 50 px, the page history card about 72 px, the page's bottom padding 60 px, a little air); --tw-free: the gap kept when more than a screen
   follows or the box would be shorter than --tw-min (phones keep the bottom bar's height). A bar stuck under the top bar above the box (a record's title bar...)
   is taken off too (table-room.js BARS). Phones and landscape: public/css/mobile.css. --tw-head: a header row's background where the table sets none. */
:root { --tw-end: 200px; --tw-free: 16px; --tw-min: 240px; }
:is(.table-wrap, .mrp-table-wrap, .dsg-tablewrap, .imx-tablewrap, .plm-tablewrap, .sp-tablewrap, .tsh-scroll, .var-scroll, .crm-rep-wrap) {
  overflow: auto; max-block-size: max(var(--tw-min), calc(100dvh - var(--stick, 62px) - var(--tw-below, var(--tw-end)))); overscroll-behavior-x: contain; }
/* weightless (:where): a table's own header colours and borders win; the header sits above the rows and keeps its bottom line while it sticks */
:where(:is(.table-wrap, .mrp-table-wrap, .dsg-tablewrap, .imx-tablewrap, .plm-tablewrap, .sp-tablewrap, .tsh-scroll, .var-scroll, .crm-rep-wrap) > table > thead > tr:first-child > th,
  .data-table > thead > tr:first-child > th) { position: sticky; top: 0; z-index: 3; background-color: var(--tw-head, var(--panel)); box-shadow: inset 0 -1px 0 var(--line); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th { text-align: start; font-size: 12px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding: 11px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.data-table.compact td { padding: 9px 12px; }
.data-table.compact th { padding: 9px 12px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .ctr { text-align: center; }
.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { color: var(--ink); }
.sort-ind { margin-inline-start: 4px; opacity: .45; font-size: 11px; }
.sorted-asc .sort-ind, .sorted-desc .sort-ind { opacity: 1; color: var(--accent-d); }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover td { background: var(--panel-2); }
.data-table tr.sub-line td:first-child { padding-inline-start: 36px; }
.data-table tfoot td { font-weight: 800; background: var(--panel-2); border-top: 1px solid var(--line); }
.data-table .hl { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.group-row td { background: var(--panel-3); font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--line); }
.group-row:hover td { background: var(--brand-soft); }
.grp-chev { display: inline-block; vertical-align: middle; margin-inline-end: 6px; }
.grp-count { color: var(--muted); margin-inline-start: 6px; font-weight: 500; }
.data-table.analysis .w-share, .w-share { width: 160px; }
.share { display: flex; align-items: center; gap: 8px; }
.share i { display: block; height: 7px; border-radius: 999px; background: var(--c1); min-width: 2px; }
.share span { font-size: 12px; color: var(--muted); width: 36px; }
.pivot td, .pivot th { white-space: nowrap; }
.empty { text-align: center; padding: 50px 20px; color: var(--muted); display: grid; justify-items: center; gap: 8px; }
.empty h3 { color: var(--ink); font-size: 17px; }
.empty p { max-width: 420px; }
.empty .btn { margin-top: 8px; }
.empty-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.skeleton { display: grid; gap: 14px; padding: 8px 0; }
.sk { border-radius: 10px; background: linear-gradient(90deg, var(--panel-3), var(--panel-2), var(--panel-3)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.sk-title { height: 30px; width: 260px; }
.sk-row { height: 54px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.child-empty { padding: 18px; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------ kanban */
.kanban { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; padding: 16px; }
.pcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; position: relative; transition: transform .15s, box-shadow .15s; }
.pcard::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--cat, var(--brand)); }
.pcard.clickable { cursor: pointer; }
.pcard.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pcard.archived { opacity: .55; }
.pcard-img { height: 128px; background: #fff; display: grid; place-items: center; color: var(--muted); position: relative; overflow: hidden; }
.pcard-img:has(> span.ico), .pcard-img:not(:has(img)) { background: var(--panel-3); }
.pcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.pcard-fav { position: absolute; top: 8px; inset-inline-end: 8px; background: rgba(255, 255, 255, .9); color: var(--c3); border-radius: 999px; padding: 3px 6px; display: inline-flex; }
.pcard-off { position: absolute; top: 8px; inset-inline-start: 8px; background: rgba(40, 30, 25, .78); color: #fff; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.pcard-body { padding: 10px 12px 14px; display: grid; gap: 4px; }
.pcard-name { font-weight: 700; line-height: 1.25; min-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; color: var(--brand); }
.pcard.preview { width: 190px; margin: 0 auto; }
.preview-wrap { padding: 8px 0; }

/* ------------------------------------------------------------ forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.form-grid .span-2, .span-2 { grid-column: 1 / -1; }
.form-section { grid-column: 1 / -1; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.field { display: grid; gap: 6px; min-width: 0; }
.field-label { font-size: 12px; font-weight: 750; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.req { color: var(--danger-ink); }
.field input[type=text], .field input[type=number], .field input[type=email], .field input[type=tel], .field input[type=password], .field input[type=date], .field input:not([type]), .field select, .field textarea, .modal input:not([type=checkbox]), .modal select {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); outline: 0; }
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus, .field select:focus, .field textarea:focus, .modal input:focus, .modal select:focus, .mini-table input:focus, .mini-table select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--panel-3); color: var(--muted); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.field-error { color: var(--danger-ink); font-size: 12.5px; font-weight: 600; }
.help { color: var(--muted); font-size: 12.5px; }
.static { min-height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px dashed var(--line); font-weight: 700; }
.field.calc .static { color: var(--accent-d); font-size: 16px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.field-toggle .field-label { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field-toggle { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 12px; }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.slider { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s; }
.slider::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::after { transform: translateX(18px); }
:root[dir="rtl"] .switch input:checked + .slider::after { transform: translateX(-18px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }
.multi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); min-height: 42px; }
.multi .multi-add, .field .multi-add { width: auto; height: 36px; min-height: 36px; border: 1px dashed var(--line); border-radius: 999px; background: transparent; padding: 0 10px; color: var(--muted); max-width: 190px; }
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field input[type=color] { width: 46px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.input-suffix { display: flex; align-items: center; gap: 8px; }
.img-field { display: grid; gap: 10px; justify-items: start; }
.img-field img { width: 100%; max-width: 240px; aspect-ratio: 1; object-fit: contain; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.img-actions { display: flex; gap: 8px; }
.img-empty { width: 100%; max-width: 280px; aspect-ratio: 1.4; border: 2px dashed var(--line); border-radius: 14px; background: var(--panel-2); color: var(--muted); display: grid; place-content: center; justify-items: center; gap: 8px; font-weight: 650; }
.img-empty:hover { border-color: var(--accent); color: var(--accent-d); }
.form-bar { position: sticky; top: 62px; z-index: 10; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.form-bar.dirty { border-color: var(--warn); }
.dirty-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--warn-ink); font-weight: 700; font-size: 13px; }
.dirty-hint.clean { color: var(--muted); font-weight: 550; }
/* the record's one Actions menu (Duplicate, Archive, Delete …) next to Discard / Save, and in the document header (form.js actionsMenu) */
.act-menu { position: relative; display: inline-flex; }
.act-menu-list { min-width: 200px; max-width: min(340px, calc(100vw - 16px)); }
.act-menu-list .act-menu-txt { display: grid; gap: 1px; min-width: 0; }
.act-menu-list .act-menu-txt small { font-weight: 500; font-size: 12px; line-height: 1.3; white-space: normal; }
.act-menu-list.up { top: auto; bottom: calc(100% + 8px); }
.act-menu-list button.danger { color: var(--danger-ink); }
.act-menu-list button:disabled { opacity: .5; cursor: not-allowed; }
.drawer-foot .dirty-hint { min-width: 0; }
.card p + .multi, .card p + .field { margin-top: 10px; }
.multi-empty { padding: 0 6px; }
.inline-form { display: flex; gap: 8px; margin-top: 12px; }
.inline-form input { flex: 1; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: 0 0 auto; background: transparent; border-inline: 0; border-top: 0; font-family: inherit; font-size: inherit; cursor: pointer; }
.tab.on { color: var(--brand); border-bottom-color: var(--brand); }

/* child tables */
.drawer-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.child-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.child-head h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th { text-align: start; font-size: 11.5px; text-transform: uppercase; color: var(--muted); padding: 6px 6px; white-space: nowrap; }
.mini-table td { padding: 6px 8px; vertical-align: middle; }
.mini-table th.num { text-align: end; }
.modal .mini-table td input[type=number] { max-width: 150px; }
.modal .kv-grid + .table-wrap { margin-top: 14px; }
.modal .table-wrap + .field { margin-top: 14px; }
.mini-table input:not([type=checkbox]), .mini-table select { width: 100%; min-width: 70px; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); outline: 0; }
.mini-table input[type=color] { min-width: 40px; padding: 2px; }
.mini-table .color-field input[type=text] { min-width: 80px; }
.mini-table .num { text-align: end; }
.w-x { width: 44px; }
.child .table-wrap { border: 1px solid var(--line); border-radius: 10px; padding: 4px; }

/* attribute editor + misc */
.attr-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.attr-line { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel-2); }
.attr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.val-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.val-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.val-row.on { border-color: var(--accent); background: var(--accent-soft); }
.extra-in { width: 84px; height: 30px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--panel); text-align: end; }
.used-by { display: grid; gap: 8px; }
.used-by h4 { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.note-line { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--accent-d); margin-top: 3px; }
.note-line.internal { color: var(--warn-ink); }
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.demo-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; align-content: start; background: var(--panel-2); }
.demo-box.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.demo-result { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--ok-soft); color: var(--ok-ink); font-weight: 650; }

/* sortable categories */
.sort-list { display: grid; }
.sort-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); background: var(--panel); cursor: pointer; position: relative; }
.sort-row:hover { background: var(--panel-2); }
.sort-row.child { padding-inline-start: calc(16px + min(var(--depth, 1), 6) * 40px); }   /* sub-categories, indented by level (any depth; deeper than 6 stays at 6) */
@media (max-width: 480px) { .sort-row.child { padding-inline-start: calc(16px + min(var(--depth, 1), 6) * 22px); } }
.sort-row.archived { opacity: .55; }
.sort-row.dragging { opacity: .4; }
.sort-row.over-top::before, .sort-row.over-bottom::after { content: ""; position: absolute; inset-inline: 0; height: 3px; background: var(--accent); z-index: 2; }
.sort-row.over-top::before { top: -1px; }
.sort-row.over-bottom::after { bottom: -1px; }
.grip { color: var(--muted); cursor: grab; display: inline-flex; }
.kds-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kds-col { background: var(--panel-3); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; align-content: start; min-height: 160px; }
.kds-col-head { display: flex; justify-content: space-between; border-bottom: 3px solid; padding-bottom: 8px; }
.kds-col-head .count { background: var(--panel); border-radius: 999px; padding: 0 9px; font-weight: 800; }
.kds-card { display: grid; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.kds-card.late { border-color: var(--danger); background: var(--danger-soft); }
.kds-top { display: flex; align-items: center; gap: 8px; }
.kds-top .age { margin-inline-start: auto; font-weight: 800; }
.kds-card ul { margin: 0; padding-inline-start: 18px; }

/* ------------------------------------------------------------ overlays */
#overlay-root { position: relative; z-index: 100; }
.backdrop { position: fixed; inset: 0; background: rgba(25, 15, 8, .5); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 20px; animation: fade .15s; z-index: 100; }
.backdrop-drawer { place-items: stretch end; padding: 0; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .18s; }
.modal-sm { width: min(420px, 100%); }
.modal-lg { width: min(760px, 100%); }
.modal-palette { width: min(640px, 100%); align-self: start; margin-top: 10vh; }
.modal-palette .modal-head { display: none; }
.modal-palette .modal-body { padding: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 6px 22px; }
:root[dir="rtl"] .modal-head { padding: 16px 22px 6px 18px; }
.modal-head h3 { font-size: 17px; }
.modal-body { padding: 8px 22px 18px; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel-2); }
.confirm-msg { line-height: 1.55; }
.drawer { width: min(640px, 100vw); height: 100%; background: var(--panel); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slide .2s; }
.drawer-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-size: 18px; }
.drawer-sub { color: var(--muted); font-size: 13px; }
.drawer-body { flex: 1; overflow: auto; padding: 18px 20px 28px; }
.drawer-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--panel-2); }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes slide-out { to { transform: translateX(var(--slide)); } }
.backdrop.is-leaving { animation: fade-out .16s ease-in forwards; pointer-events: none; }
.backdrop.is-leaving .modal { animation: none; }
.backdrop.is-leaving .drawer { animation: slide-out .16s ease-in forwards; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes slide { from { transform: translateX(var(--slide)); } }
.toasts { position: fixed; inset-inline-end: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 200; max-width: min(380px, calc(100vw - 36px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--brand-d); color: #fff; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: .2s; font-weight: 600; }
:root[data-theme="dark"] .toast { background: #f3ebe4; color: #1a120c; }
.toast.show { opacity: 1; transform: none; }
.toast-success { background: var(--ok); color: #fff; }
.toast-error { background: var(--danger); color: #fff; }
:root[data-theme="dark"] .toast-success, :root[data-theme="dark"] .toast-error { color: #111; }
.pal-box { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.pal-input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); min-height: 28px; }
.pal-list { max-height: 52vh; overflow: auto; padding: 6px; }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.pal-item.sel { background: var(--accent-soft); }
.pal-label { flex: 1; min-width: 0; display: grid; }
.pal-label small { color: var(--muted); }
.pal-hint { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pal-empty { padding: 28px; text-align: center; color: var(--muted); }
/* Ctrl+K records (server/search.js): name + a short line, the kind on the side; a cancelled / archived record is dimmed with its word; a spinner while searching */
.modal.modal-palette input.pal-input, .modal.modal-palette input.pal-input:focus { border: 0; box-shadow: none; padding: 0; background: transparent; min-height: 28px; }   /* the dialog's input frame (.modal input) is not for the palette's own line */
.pal-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-off { flex: none; font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: var(--panel-3); color: var(--muted); }
.pal-item.is-off > .ico, .pal-item.is-off .pal-name { opacity: .72; }
.pal-hint { flex: none; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-busy { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: erp-spin .7s linear infinite; }
.pal-busy[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pal-busy { animation-duration: 1.4s; } }

/* ------------------------------------------------------------ charts + reports */
.chart-box { width: 100%; direction: ltr; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line-2); stroke-width: 1; }
.chart .axis { stroke: var(--line); stroke-width: 1.2; }
.chart .ax { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .c-bar { fill: var(--c1); }
.chart .c-bar:hover { filter: brightness(1.12); }
.chart .c-bar.neg { fill: var(--danger); }
.chart .c-line { stroke: var(--c2); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .c-line-main { stroke: var(--c1); }
.chart .c-dot { fill: var(--panel); stroke: var(--c2); stroke-width: 2; }
.chart .c-dot-main { stroke: var(--c1); }
.chart .area { fill: var(--c1); opacity: .13; }
.legend { display: flex; gap: 16px; justify-content: center; margin-top: 6px; font-size: 12.5px; color: var(--muted); direction: ltr; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.report-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
.range-bar, .ctl-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.ctl-row > select { min-width: 0; max-width: 100%; flex: 1 1 160px; }   /* a long option (a session name) must not widen the page */
.ctl { display: grid; gap: 3px; }
.ctl > span { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.report-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; transition: opacity .15s; }
.paper-wrap { overflow-x: auto; padding: 6px 0 20px; }
.paper { width: 210mm; max-width: 100%; overflow-x: auto; margin: 0 auto; background: #fff; color: #1b1b1b; padding: 14mm; box-shadow: 0 6px 30px rgba(0, 0, 0, .18); border-radius: 4px; min-height: 120mm; }
.doc { font-size: 12.5px; line-height: 1.45; color: #1b1b1b; }
.doc h1 { font-size: 22px; margin: 0; }
.doc h3 { font-size: 14px; margin: 18px 0 6px; border-bottom: 2px solid #1b1b1b; padding-bottom: 3px; }
.doc h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #666; }
.doc .small { font-size: 11px; color: #555; }
.doc-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid #6f4e37; padding-bottom: 12px; margin-bottom: 14px; }
.doc-co { display: flex; gap: 12px; align-items: flex-start; }
.doc-logo { width: 54px; height: 54px; object-fit: contain; }
.doc-title { text-align: end; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 14px; }
.doc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.doc-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.doc-table th { text-align: start; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #999; padding: 5px 6px; color: #444; }
.doc-table td { padding: 4px 6px; border-bottom: 1px solid #e5e5e5; }
.doc-table .n, .doc-table th.n { text-align: end; font-variant-numeric: tabular-nums; }
.doc-table tfoot td { font-weight: 800; border-top: 2px solid #1b1b1b; border-bottom: 0; }
.doc-table tr.cat td { font-weight: 800; background: #f3eee8; }
.doc-table .ind { padding-inline-start: 14px; }
.doc-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 18px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; background: #faf7f3; }
.doc-totals { margin-inline-start: auto; width: 280px; margin-top: 10px; display: grid; gap: 3px; }
.kv { display: flex; justify-content: space-between; gap: 14px; }
.kv.grand { font-size: 15px; border-top: 2px solid #1b1b1b; padding-top: 4px; margin-top: 3px; }
.doc-foot { margin-top: 26px; text-align: center; }
.doc-sign { display: flex; justify-content: space-between; margin-top: 50px; }
.doc-sign span { border-top: 1px solid #333; padding-top: 4px; width: 38%; text-align: center; font-size: 11px; }
.receipt { width: 72mm; font: 12px/1.35 ui-monospace, Menlo, monospace; color: #000; }
.r-center { text-align: center; }
.r-logo { width: 46px; height: 46px; object-fit: contain; display: block; margin: 0 auto 4px; }
.r-co { font-size: 15px; }
.r-meta { margin: 8px 0; padding: 6px 0; border-top: 1px dashed #000; border-bottom: 1px dashed #000; }
.r-track { font-size: 20px; font-weight: 800; text-align: center; }
.r-ot { text-align: center; font-size: 12px; }
.r-line { margin-bottom: 4px; }
.r-sub { display: flex; justify-content: space-between; color: #333; }
.r-note { font-size: 11px; font-style: italic; }
.r-tot { display: flex; justify-content: space-between; }
.r-grand { font-size: 15px; font-weight: 800; border-top: 1px dashed #000; margin-top: 4px; padding-top: 4px; }
.r-totals { border-top: 1px dashed #000; margin-top: 6px; padding-top: 6px; }
.r-foot { margin-top: 10px; }
#print-root { display: none; }
@media print {
  body.printing > :not(#print-root) { display: none !important; }
  body.printing > #print-root { display: block !important; }
  body.printing { background: #fff; }
  .doc, .receipt { color: #000; }
  :is(.table-wrap, .mrp-table-wrap, .dsg-tablewrap, .imx-tablewrap, .plm-tablewrap, .sp-tablewrap, .tsh-scroll, .var-scroll, .crm-rep-wrap) { max-block-size: none; overflow: visible; }   /* a printed page shows every row */
}

/* ------------------------------------------------------------ login */
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--brand) 25%, transparent), transparent 40%), radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 40%), var(--bg); }
.login-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 32px; display: grid; gap: 14px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand img { width: 48px; height: 48px; border-radius: 12px; background: #fff; object-fit: contain; }
.login-brand div { display: grid; line-height: 1.2; }
.login-brand b { font-size: 20px; color: var(--brand); }
.login-brand span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.login-card h1 { font-size: 26px; margin-top: 10px; }
.login-error { color: var(--danger-ink); font-weight: 650; min-height: 18px; }
.login-foot { text-align: center; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .hide-md { display: none !important; }
  .data-table th, .data-table td { padding-inline: 10px; }
  .data-table td .muted.small { white-space: nowrap; }
  .kpi-row.six, .kpi-row.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .pos-card { grid-template-columns: 1fr 1fr; }
  .pos-spark { grid-column: 1 / -1; justify-items: stretch; }
  .grid-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-dash .span-2 { grid-column: 1 / -1; }
  .grid-2, .demo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell, .shell.collapsed { grid-template-columns: minmax(0, 1fr); }
  /* the drawer: slides in from the start edge (right in RTL); closed it is `visibility: hidden` after the slide (no Tab stops, no shadow leaking at the edge, nothing for screen readers) */
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--side-w-drawer); transform: translateX(-102%); visibility: hidden; transition: transform .22s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .22s, box-shadow .22s; box-shadow: none; z-index: 30; }
  :root[dir="rtl"] .sidebar { transform: translateX(102%); }
  .shell.side-open .sidebar { transform: none; visibility: visible; transition-delay: 0s; box-shadow: var(--shadow-lg); }
  .sidebar:focus { outline: none; }
  html.side-locked, html.side-locked body { overflow: hidden; overscroll-behavior: none; }   /* the page behind the open drawer does not scroll (side-drawer.js) */
  .shell.collapsed .brand-text, .shell.collapsed .lbl, .shell.collapsed .chev { display: initial; }
  .shell.collapsed .side-link { justify-content: flex-start; padding: 9px 11px; }
  .shell.collapsed .side-nav, .shell.collapsed .side-foot { padding-inline: 10px; }
  .shell.collapsed .brand { justify-content: flex-start; padding-inline: 14px; }
  .collapse-btn { display: none; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 29; opacity: 0; visibility: hidden; transition: opacity .22s, visibility 0s linear .22s; touch-action: none; -webkit-tap-highlight-color: transparent; }   /* above the bottom bar (28), below the drawer (30) */
  .shell.side-open .scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 8px 12px; gap: 4px; }
  .topbar > *, .topbar .icon-btn, .topbar .gsearch { flex-shrink: 0; }
  .topbar > .crumbs { flex-shrink: 1; }
  .icon-btn { width: 40px; height: 40px; }
  .apps-wrap { display: none; }   /* the bottom bar already has "Apps" */
  .gsearch { min-width: 40px; width: 40px; height: 40px; padding: 0; justify-content: center; }
  .gsearch > span:not(.ico), .gsearch kbd { display: none; }
  .lang-btn { min-width: 40px; padding: 0 6px; }
  .user-name { display: none; }
  .user-btn { padding: 3px; min-height: 40px; }
  .side-link, .side-app { min-height: 40px; }
  .crumbs { flex: 1; }
  .crumbs a { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* tablet: the parents give way (…), the current page stays readable (same rule as the wide bar below) */
  .crumbs .sep { flex: 0 0 auto; }
  .crumbs .cur { flex: 0 1 auto; min-width: 6ch; }
  .content { padding: 16px 14px 96px; }
  .subnav { display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 62px; z-index: 15; scrollbar-width: none; }
  .sn-item { flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-weight: 650; font-size: 13px; white-space: nowrap; }
  .sn-item { display: inline-flex; align-items: center; min-height: 40px; }
  .sn-item.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
  :root[data-theme="dark"] .sn-item.active { color: #1a120c; }
  .bottomnav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 28; background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08); }
  .bn-item { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; min-width: 0; padding: 4px 1px 3px; font-size: 10px; font-weight: 700; color: var(--muted); }
  /* the label may take two lines ("لوحة المعلومات", "Selling points") before it is cut: nothing is cut after one word any more */
  .bn-item > span:not(.ico) { max-width: 100%; overflow: hidden; text-align: center; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .bn-item.active { color: var(--accent-d); }
  .bn-item.active svg { stroke: var(--accent); }
  .toasts { bottom: 78px; inset-inline: 14px; max-width: none; }
  .kpi-row, .kpi-row.six, .kpi-row.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-dash { grid-template-columns: 1fr; }
  .pos-card { grid-template-columns: 1fr; gap: 16px; }
  .kds-board { grid-template-columns: 1fr; }
  .form-bar { top: 108px; }
}
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
  .btn, .chip-select, .search-input, select.chip-select, .date-in, .multi .multi-add, .field .multi-add { min-height: 40px; }
  .form-bar .btn { min-width: 40px; }
  .mini-table input:not([type=checkbox]):not([type=color]), .mini-table select { height: 40px; }
  .sort-row .icon-btn { flex: 0 0 auto; }
  .list-body .data-table td a.link { display: inline-block; padding-block: 10px; margin-block: -10px; }   /* bigger tap area, same layout */
  .card-head a.link, .page-head a.link, td a.link { display: inline-block; padding-block: 10px; margin-block: -10px; }
  :root .btn.btn-sm, :root .icon-btn { min-height: 40px; }   /* app stylesheets shrink these: 40 px on a phone, whatever the app */
  :root .icon-btn { min-width: 40px; }
  :root input[type=date], :root input[type=month] { min-height: 40px; }
  :root .acct-fold { position: relative; }
  .acct-fold::after { content: ""; position: absolute; inset: -9px; }
  :root .acct-amt-btn { padding: 10px 4px; margin: -10px -4px; }
  .hide-sm-label span:not(.ico) { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 20px; }
  .search-box { max-width: none; flex: 1 1 140px; }
  .toolbar > .search-box { flex: 1 1 100%; }   /* the search takes the whole first row (its placeholder is a sentence); Filters / Export / New wrap below it */
  .form-bar { flex-wrap: nowrap; padding: 8px 10px; }
  .form-bar .btn:not(.btn-primary) { padding: 0 10px; }
  .form-bar .btn:not(.btn-primary) > span:not(.ico), .drawer-foot .btn:not(.btn-primary):not(.save-new) > span:not(.ico) { display: none; }
  .drawer-foot .dirty-hint.clean { display: none; }
  .dirty-hint { font-size: 12px; min-width: 0; }
  .dirty-hint.clean { display: none; }
  .form-bar .btn:disabled { display: none; }
  .filters-btn { display: inline-flex; }
  .tb-filters { display: none; flex: 1 0 100%; flex-wrap: wrap; gap: 8px; }
  .toolbar.filters-open .tb-filters { display: flex; }
  .crumbs a, .crumbs .sep { display: none; }
  /* list tables become stacked cards on phones */
  .list-body .data-table, .list-body .data-table tbody, .list-body .data-table tfoot { display: block; }
  .list-body .data-table thead { display: none; }
  .list-body .data-table tr { display: grid; gap: 3px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  .list-body .data-table tbody tr:last-child { border-bottom: 0; }
  .list-body .data-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 !important; border: 0; text-align: end; min-width: 0; }
  .list-body .data-table td:first-child { justify-content: flex-start; text-align: start; font-size: 14.5px; margin-bottom: 2px; }
  .list-body .data-table td[data-label]:not(:first-child)::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 650; text-align: start; flex: 0 0 auto; }
  .list-body .data-table td.num { text-align: end; }
  .list-body .data-table tfoot tr { background: var(--panel-2); }
  .list-body .data-table .group-row td { padding: 10px 14px !important; }
  .list-body .table-wrap { max-block-size: none; }   /* cards carry their own labels: they scroll with the page, not in a box of their own */
  .date-in { width: 128px; }
  .data-table th, .data-table td { padding: 10px 10px; }
  /* a table wider than the screen scrolls inside its card: shadows on the edges tell there is more */
  .table-wrap { background: linear-gradient(to right, var(--panel) 30%, transparent) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--panel) 30%, transparent) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .28), transparent) left center / 10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .28), transparent) right center / 10px 100% no-repeat scroll; }
  .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
  .modal { max-height: calc(100vh - 20px); }
  .backdrop:not(.backdrop-drawer) { padding: 10px; }
  .drawer { width: 100vw; }
  .paper { padding: 8mm; }
  .doc-head { flex-direction: column; }
  .doc-head > :last-child { text-align: start !important; }
  .doc-summary, .doc-grid, .doc-cols { grid-template-columns: 1fr; }
  .totals { max-width: none; }
  .hero-card { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }   /* loops (shimmer, pulse) stop instead of flickering */

/* ---------------------------------------------------------------- apps: launcher + per-app sidebar */
.side-app { display: flex; align-items: center; gap: 10px; margin: 0 10px 6px; padding: 8px 11px; border-radius: 10px; color: var(--side-ink); font-weight: 700; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; background: color-mix(in srgb, var(--app, var(--accent)) 26%, transparent); border: 1px solid color-mix(in srgb, var(--app, var(--accent)) 45%, transparent); }
@media (hover: hover) { .side-app:hover { background: color-mix(in srgb, var(--app, var(--accent)) 40%, transparent); } }   /* touch: a tapped app badge must not keep a "hover" tint */
.side-app .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell.collapsed .side-app .lbl { display: none; }
.shell.collapsed .side-app { justify-content: center; padding: 8px; margin-inline: 8px; }
@media (max-width: 900px) {   /* the drawer always shows labels, whatever the saved rail state */
  .shell.collapsed .side-app .lbl { display: initial; }
  .shell.collapsed .side-app { justify-content: flex-start; padding: 8px 11px; margin-inline: 10px; }
}
.app-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; flex: 0 0 auto; }

/* ---------------------------------------------------------------- HaZix ERP branding */
.brand .hz-mark { width: 36px; height: 36px; background: transparent; border-radius: 0; }
.brand-text b { display: flex; align-items: baseline; font-size: 18px; font-weight: 800; letter-spacing: .01em; }
.brand-text b small { font-size: 11px; font-weight: 700; color: var(--side-muted); margin-inline-start: 5px; letter-spacing: .08em; }
.hz-z { background: linear-gradient(135deg, #60a5fa, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-text .brand-co { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 12px; margin-top: 3px; }
.brand-text .brand-co img { width: 16px; height: 16px; border-radius: 4px; background: transparent; flex: none; }
.brand-text .brand-co { min-width: 0; max-width: 100%; }
.brand-text .brand-co-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--side-muted); }
/* a brand company's own logo (main.js brandLogo): 30 px beside its name; the collapsed rail shows it in place of the HaZix mark; the phone drawer keeps the full block */
.brand .co-mark { display: none; }
.brand-logo .brand-co { gap: 8px; margin-top: 5px; }
.brand-logo .brand-co img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; background: #fff; }
.shell.collapsed .brand-logo .hz-mark { display: none; }
.shell.collapsed .brand-logo .co-mark { display: block; width: 38px; height: 38px; border-radius: 10px; object-fit: contain; background: #fff; flex: 0 0 auto; }
@media (max-width: 900px) {
  .shell.collapsed .brand-logo .hz-mark { display: initial; }
  .shell.collapsed .brand-logo .co-mark { display: none; }
}
.login-brand { justify-content: center; margin-bottom: 4px; }
.login-brand img.hz-logo { width: 250px; height: auto; border-radius: 0; background: transparent; }
.hz-dark { display: none; }
:root[data-theme="dark"] .hz-light { display: none; }
:root[data-theme="dark"] .hz-dark { display: inline; }
.login-company { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.login-company img { width: 24px; height: 24px; border-radius: 6px; }
.login-company { max-width: 100%; min-width: 0; }
.login-co-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boot img { border-radius: 0; }
.brand-text b span { font-size: inherit; text-transform: none; letter-spacing: 0; color: var(--side-ink); }
.brand-text b span.hz-z { color: transparent; }
.brand-text b { direction: ltr; unicode-bidi: isolate; justify-content: flex-start; }
:root[dir="rtl"] .brand-text b { justify-content: flex-end; }

/* Attributes: "Apply to products…" picker (config.js) */
.apply-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.apply-tools select, .apply-tools input[type=search] { min-height: 40px; flex: 1 1 160px; min-width: 0; }
.apply-list { display: grid; gap: 4px; max-height: 46dvh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--panel-2); }
.apply-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border-radius: 8px; cursor: pointer; }
.apply-row:hover { background: var(--accent-soft); }
.apply-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- app tiles (rounded squares in the app colour), shared by the Apps menu and the home dashboard */
.app-ico { display: inline-grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--app, var(--accent)) 74%, #fff) 0%, var(--app, var(--accent)) 52%, color-mix(in srgb, var(--app, var(--accent)) 82%, #000) 100%);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--app, var(--accent)) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .12); }
.app-ico.sm { width: 32px; height: 32px; border-radius: 10px; box-shadow: 0 3px 8px color-mix(in srgb, var(--app, var(--accent)) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.app-ico.lg { width: 58px; height: 58px; border-radius: 17px; }

/* ---------------------------------------------------------------- Apps dropdown (public/js/admin/apps-menu.js) */
.apps-wrap { flex: 0 0 auto; }
.apps-trigger { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 700; max-width: 220px; transition: background .15s, border-color .15s, box-shadow .15s, transform .12s ease-out; }
:root[dir="rtl"] .apps-trigger { padding: 0 11px 0 10px; }
.apps-trigger > .ico:first-child { color: var(--app, var(--accent)); }
.apps-trigger:hover { border-color: var(--muted); background: var(--panel-2); }
.apps-trigger:active { transform: scale(.97); }
.apps-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.apps-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.apps-chev { display: inline-flex; opacity: .65; transition: transform .18s ease-out; }
.apps-trigger[aria-expanded="true"] .apps-chev { transform: rotate(180deg); }
@media (max-width: 1100px) { .apps-label { display: none; } .apps-trigger { padding: 0 9px; max-width: none; } .apps-chev { display: none; } }

.am-root { position: static; }
.am-scrim { position: fixed; inset: 0; z-index: 58; background: rgba(25, 15, 8, .26); opacity: 0; transition: opacity .16s ease-out; }
.am-root.open .am-scrim { opacity: 1; }
.am-panel { position: fixed; z-index: 60; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: calc(100vh - var(--am-top, 70px) - 16px); max-height: calc(100dvh - var(--am-top, 70px) - 16px); min-height: min(420px, calc(100dvh - var(--am-top, 70px) - 16px)); max-height: min(640px, calc(100dvh - var(--am-top, 70px) - 16px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 70px rgba(30, 18, 8, .3), 0 2px 8px rgba(30, 18, 8, .08); overflow: hidden;
  opacity: 0; transform: scale(.96) translateY(-6px); transition: opacity .16s ease-out, transform .18s cubic-bezier(.2, .8, .25, 1); }
.am-root.open .am-panel { opacity: 1; transform: none; }
.am-head { display: none; }
.am-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.am-filter { flex: 1; min-width: 0; height: 36px; border: 0; background: transparent; outline: 0; font-size: 15px; color: var(--ink); }
.am-filter::placeholder { color: var(--muted); }
.am-filter::-webkit-search-cancel-button { cursor: pointer; }
.am-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); min-height: 0; }
.am-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 14px; overflow-y: auto; align-content: start; scrollbar-width: thin; }
.am-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid transparent; text-align: center; color: var(--ink); transition: background .14s, border-color .14s, transform .14s ease-out; }
.am-tile .app-ico { transition: transform .16s ease-out; }
.am-tile:hover .app-ico, .am-tile:focus-visible .app-ico { transform: translateY(-2px) scale(1.04); }
.am-tile.on { background: color-mix(in srgb, var(--app) 11%, transparent); border-color: color-mix(in srgb, var(--app) 35%, transparent); }
.am-tile:active { transform: scale(.97); }
/* select / launch (apps-menu.js): hovering only tints a tile, the selected one (.on, aria-selected) is the strong highlight; double clicks must not select text */
.am-tile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .am-tile:hover:not(.on) { background: color-mix(in srgb, var(--app) 6%, transparent); border-color: color-mix(in srgb, var(--app) 14%, transparent); } }
.am-tile.on { box-shadow: 0 0 0 1px color-mix(in srgb, var(--app) 30%, transparent) inset; }
.am-hint { grid-row: 4; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.am-hint:empty { display: none; }
.am-tile:focus-visible { outline: 2px solid var(--app); outline-offset: -2px; }
/* touch: no double-tap zoom / 300 ms delay anywhere in the menu; the first tap of a double tap rings the tile for the length of the window (apps-menu.js arm()) */
.am-panel, .am-panel a, .am-panel button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.am-tile.am-armed { animation: am-armed .35s linear; }
@keyframes am-armed { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--app) 55%, transparent); } to { box-shadow: 0 0 0 1px color-mix(in srgb, var(--app) 30%, transparent) inset; } }
.am-instant .am-acc { transition: none !important; }
.am-name { font-weight: 650; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.am-side { padding: 16px 16px 18px; background: var(--panel-2); border-inline-start: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; min-width: 0; }
.am-side-hint { display: grid; justify-items: center; align-content: center; gap: 8px; height: 100%; text-align: center; padding: 20px; }
.am-side-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.am-side-head b { font-size: 15.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-open { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--accent-d); white-space: nowrap; }
.am-side-head:hover .am-open { text-decoration: underline; }
.am-sections { display: grid; gap: 12px; }
.am-sec-title, .am-side-title { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 0 8px 4px; }
.am-side-title { padding-bottom: 8px; }
.am-hits { display: grid; gap: 1px; }
.am-page { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; font-weight: 550; font-size: 13.5px; transition: background .12s; }
.am-page:hover, .am-page:focus-visible { background: color-mix(in srgb, var(--app, var(--accent)) 12%, transparent); outline: 0; }
.am-page:focus-visible { box-shadow: inset 0 0 0 2px var(--app, var(--accent)); }
.am-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--app, var(--accent)) 14%, transparent); color: var(--app, var(--accent)); flex: 0 0 auto; }
.am-page-name { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.am-page-name small { color: var(--muted); font-size: 11.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-go { color: var(--muted); display: inline-flex; opacity: 0; transition: opacity .12s; }
.am-page:hover .am-go, .am-page:focus-visible .am-go { opacity: 1; }
.am-empty { grid-column: 1 / -1; padding: 28px 12px; text-align: center; color: var(--muted); }
html.am-sheet { overflow: hidden; overscroll-behavior: none; }
.am-panel { overscroll-behavior: contain; outline: 0; }
.am-acc, .am-chev { display: none; }
.am-filter { -webkit-appearance: none; appearance: none; }
@media (min-width: 721px) and (max-width: 1000px) { .am-body { grid-template-columns: minmax(0, 1fr) 250px; } .am-side-head b { display: none; } .am-side-head .am-open { flex: 1; justify-content: space-between; font-size: 13px; } }
/* touch screens of any size: bigger controls (the popover on a tablet, the sheet on a phone) */
@media (pointer: coarse) {
  .am-filter { min-height: 44px; font-size: 16px; }
  .am-page { min-height: 44px; }
  .am-side-head { min-height: 48px; }
  .am-tile { min-height: 92px; }
}
/* phones (and landscape phones, where the bottom bar is gone and the top bar's Apps button comes back): a full-screen sheet, apps as a list, a tap expands the pages */
@media (max-width: 720px), (max-height: 520px) and (pointer: coarse) {
  .am-scrim { display: none; }
  .am-hint { padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 12.5px; }
  .am-panel, .am-panel[style] { inset: 0 !important; width: auto !important; height: 100vh; height: 100dvh; max-height: none; min-height: 0; border-radius: 0; border: 0; box-shadow: none; transform: translateY(40px); transform-origin: 50% 100%;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); transition: opacity .2s ease-out, transform .26s cubic-bezier(.2, .8, .25, 1); }
  .am-root.open .am-panel { transform: none; }
  .am-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 0 18px; min-height: 52px; }
  :root[dir="rtl"] .am-head { padding: 6px 18px 0 6px; }
  .am-head b { font-size: 19px; }
  .am-close { width: 44px; height: 44px; }
  .am-search { padding: 6px 16px 10px; }
  .am-filter { font-size: 16px; min-height: 44px; height: 44px; }   /* 16 px: iOS Safari zooms the page when a smaller field takes focus */
  .am-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .am-tiles { display: block; padding: 6px 10px 6px; overflow: visible; }
  .am-tile { display: flex; flex-direction: row; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 12px; text-align: start; border-radius: 14px; scroll-margin-top: 4px; }
  .am-tile .app-ico { width: 44px; height: 44px; flex: 0 0 auto; }
  .am-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
  .am-chev { display: inline-flex; color: var(--muted); transition: transform .2s ease-out; }
  .am-tile[aria-expanded="true"] .am-chev { transform: rotate(180deg); }
  .am-tile.am-home .am-chev { display: none; }
  .am-tile:hover .app-ico { transform: none; }
  .am-acc { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .24s cubic-bezier(.2, .8, .25, 1), visibility 0s .24s; margin-inline: 8px; }
  .am-acc.open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .24s cubic-bezier(.2, .8, .25, 1), visibility 0s; }
  .am-acc-in { min-height: 0; overflow: hidden; }
  .am-acc.open .am-acc-in { padding: 4px 0 10px; }
  .am-acc .am-side-head { margin-bottom: 4px; padding: 6px 8px 10px; }
  .am-acc .am-side-head .app-ico { display: none; }
  .am-acc .am-side-head b { display: none; }
  .am-acc .am-side-head { justify-content: flex-end; border-bottom: 0; padding-block: 0; margin: 0; }
  .am-acc .am-open { font-size: 13.5px; padding: 8px 6px; min-height: 44px; }
  .am-sections { gap: 6px; }
  .am-acc .am-sec { border-inline-start: 2px solid color-mix(in srgb, var(--app, var(--accent)) 30%, transparent); margin-inline-start: 22px; padding-inline-start: 4px; }
  .am-side { border-inline-start: 0; border-top: 1px solid var(--line); overflow: visible; padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .am-side:not(:has(.am-hits)) { display: none; }
  .am-page { min-height: 48px; font-size: 15px; padding: 6px 10px; }
  .am-dot { width: 30px; height: 30px; }
  .am-go { opacity: .6; }
  .am-empty { padding: 28px 12px; }
}
@media (max-height: 520px) and (pointer: coarse) { .am-hint { display: none; } }   /* landscape phone: every pixel of height is for the list */
/* the Apps button of the top bar comes back where the bottom bar is gone (landscape phone) */
@media (max-width: 900px) and (max-height: 520px) { .apps-wrap { display: block; } .apps-trigger { height: 44px; min-width: 44px; justify-content: center; } }
@media (min-width: 721px) and (max-width: 1100px) and (min-height: 521px) { .am-panel { max-height: min(680px, calc(100dvh - var(--am-top, 70px) - 16px - env(safe-area-inset-bottom, 0px))); } }

/* ---------------------------------------------------------------- motion (transform / opacity only, 120-240 ms, off under prefers-reduced-motion) */
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
.content > * { animation: page-in .22s ease-out backwards; }
.content.soft-swap > * { animation: none; }   /* the same screen drawn again after a save (main.js route soft): no fade, no jump */
.content.is-refreshing { cursor: progress; }
.kpi, .card.clickable, a.card { transition: transform .16s ease-out, box-shadow .16s ease-out, border-color .16s; }
.kpi:hover, .card.clickable:hover, a.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(60, 40, 25, .06), 0 14px 34px rgba(60, 40, 25, .13); }
.side-link { transition: background .14s, color .14s; }
.bn-item { transition: color .14s, transform .12s ease-out; }
.bn-item:active { transform: scale(.94); }
.bn-item[aria-expanded="true"] { color: var(--accent-d); }
button.bn-item { border: 0; background: transparent; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.sk-block { border-radius: 14px; background: linear-gradient(90deg, var(--panel-3), var(--panel-2), var(--panel-3)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .content > * { animation: none; }
  .kpi:hover, .card.clickable:hover, a.card:hover { transform: none; }
  .am-panel, .am-scrim { transition: none; }
  .am-tile.am-armed { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--app) 55%, transparent); }
  .am-acc { transition: none !important; }
}