/* AMV Cloud — "refined navy" design. Colors are tokens so the dark theme only redefines them. */
:root {
  --bg: #F3F6FA; --surface: #FFFFFF; --surface-2: #F7F9FC; --surface-3: #EEF3F9;
  --ink: #1B2A3D; --ink-2: #4A5B70; --muted: #7A8AA0; --line: #DCE4EF; --line-2: #E9EEF5;
  --pri: #2563EB; --pri-hover: #1D4ED8; --pri-soft: #EAF2FF; --pri-ink: #1E40AF;
  --navy: #0F2A4A; --navy-2: #163A63; --navy-3: #1E4A7E; --side-ink: #BFD0E6; --side-muted: #7F98B8;
  --ok: #15803D; --ok-soft: #E8F7EF; --ok-ink: #14633A;
  --bad: #DC2626; --bad-soft: #FDECEC; --bad-ink: #9B1C1C;
  --warn: #B45309; --warn-soft: #FFF4E5; --warn-ink: #7A4A06;
  --info-soft: #EAF2FF; --info-ink: #0F2A4A;
  --violet-soft: #F1EEFE; --violet-ink: #4C3C9E;
  --shadow: 0 1px 2px rgba(15, 42, 74, .06), 0 1px 3px rgba(15, 42, 74, .05);
  --shadow-lg: 0 18px 50px rgba(15, 42, 74, .22);
  --radius: 10px; --radius-sm: 7px;
  --input-bg: #F4F8FF; --input-line: #C9D8EE;
  --side-w: 248px; --top-h: 58px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B1524; --surface: #111E31; --surface-2: #15243A; --surface-3: #1A2B44;
  --ink: #E6EDF7; --ink-2: #B5C3D6; --muted: #8495AD; --line: #24364F; --line-2: #1D2E45;
  --pri: #3B82F6; --pri-hover: #60A5FA; --pri-soft: #172B4D; --pri-ink: #93C5FD;
  --navy: #081426; --navy-2: #0F2240; --navy-3: #1A3A66; --side-ink: #B4C6DE; --side-muted: #6E86A6;
  --ok: #4ADE80; --ok-soft: #0F2E21; --ok-ink: #86EFAC;
  --bad: #F87171; --bad-soft: #3A1517; --bad-ink: #FCA5A5;
  --warn: #FBBF24; --warn-soft: #33240C; --warn-ink: #FCD34D;
  --info-soft: #172B4D; --info-ink: #BFDBFE;
  --violet-soft: #241D45; --violet-ink: #C4B5FD;
  --input-bg: #0E1A2C; --input-line: #2A4266;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; background: var(--bg); color: var(--ink); font-size: 14.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
button, input, select, textarea { font-family: inherit; font-size: 14px; color: inherit }
a { color: var(--pri); text-decoration: none }
a:hover { text-decoration: underline }
.loading { padding: 60px; text-align: center; color: var(--muted) }
.ti { font-size: 18px; line-height: 1; vertical-align: -3px }

/* ───────── shell ───────── */
.shell { display: flex; min-height: 100vh }
.side { width: var(--side-w); background: var(--navy); color: var(--side-ink); flex-shrink: 0; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; transition: width .18s ease; z-index: 40 }
.side-brand { display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #fff }
.side-brand .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--pri); display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: .5px; flex-shrink: 0 }
.side-brand .mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 9px; padding: 2px }
.side-brand .names { min-width: 0 }
.side-brand b { display: block; font-size: 16px; letter-spacing: 1px; line-height: 1.2 }
.side-brand small { display: block; font-size: 11.5px; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.side nav { flex: 1; overflow-y: auto; padding: 10px 10px 16px; scrollbar-width: thin; scrollbar-color: var(--navy-3) transparent }
.side .nav-item, .side .nav-group { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--side-ink);
  cursor: pointer; user-select: none; background: none; border: 0; text-align: start; font-size: 14px; text-decoration: none }
.side .nav-item:hover, .side .nav-group:hover { background: var(--navy-2); color: #fff; text-decoration: none }
.side .nav-item.on { background: var(--navy-3); color: #fff; font-weight: 600 }
.side .nav-group { font-weight: 600; color: #DCE6F3; margin-top: 2px }
.side .nav-group .chev { margin-inline-start: auto; font-size: 15px; color: var(--side-muted); transition: transform .15s }
.side .nav-group.open .chev { transform: rotate(-90deg) }
.side .nav-sub { margin: 2px 0 6px; padding-inline-start: 18px; border-inline-start: 1px solid rgba(255, 255, 255, .08); margin-inline-start: 19px }
.side .nav-sub a { display: block; padding: 6px 10px; border-radius: 7px; color: var(--side-ink); font-size: 13.5px; text-decoration: none }
.side .nav-sub a:hover { background: var(--navy-2); color: #fff }
.side .nav-sub a.on { background: var(--navy-3); color: #fff; font-weight: 600 }
.side .nav-sub a.soon { color: var(--side-muted) }
.side .nav-sec { margin: 8px 0 2px; padding: 4px 10px 2px; font-size: 11.5px; font-weight: 700; color: var(--side-muted); border-top: 1px solid rgba(255, 255, 255, .08); letter-spacing: .2px }
.perm-card .nav-sec { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--muted) }
.side .nav-sub a.soon::after { content: "قريباً"; font-size: 10.5px; margin-inline-start: 6px; padding: 0 6px; border-radius: 10px; background: rgba(255, 255, 255, .07) }
.side-foot { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .07) }
.side-foot button { width: 100% }
/* collapsed: icons only */
.shell.collapsed { --side-w: 68px }
.shell.collapsed .side-brand .names, .shell.collapsed .nav-label, .shell.collapsed .chev, .shell.collapsed .nav-sub { display: none }
.shell.collapsed .side .nav-item, .shell.collapsed .side .nav-group { justify-content: center; padding: 10px 0 }

.page { flex: 1; min-width: 0; display: flex; flex-direction: column }
.topbar { position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 22px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.topbar .search { display: flex; align-items: center; gap: 8px; min-width: 280px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2); color: var(--muted); cursor: pointer }
.topbar .search:hover { border-color: var(--pri) }
.topbar .search kbd { margin-inline-start: auto }
.topbar .sp { flex: 1 }
.topbar select { height: 38px; max-width: 260px }
.icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--ink-2); cursor: pointer }
.icon-btn:hover { background: var(--surface-3); color: var(--ink) }
.menu-btn { display: none }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; background: none }
.user-chip:hover { background: var(--surface-3) }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pri-soft); color: var(--pri-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px }
.user-chip .who { text-align: start; line-height: 1.2 }
.user-chip .who small { display: block; color: var(--muted); font-size: 11.5px }
.dropdown { position: relative }
.dropdown-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 60 }
.dropdown-menu button, .dropdown-menu a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 7px; cursor: pointer; color: var(--ink); text-decoration: none; text-align: start }
.dropdown-menu button:hover, .dropdown-menu a:hover { background: var(--surface-3); text-decoration: none }
.dropdown-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0 }
main { flex: 1; padding: 22px 26px 40px; min-width: 0; width: 100% }
kbd { font-family: inherit; font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--muted) }

/* ───────── typography and basics ───────── */
h1 { font-size: 22px; font-weight: 700; margin: 0 0 18px; letter-spacing: -.2px }
h1:focus { outline: none } /* Blazor focuses the title after navigation for screen readers */
h2 { font-size: 16px; font-weight: 700; margin: 24px 0 10px }
h3 { font-size: 15px; font-weight: 700 }
.muted { color: var(--muted) }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 8px }
.small { font-size: 12px }
.center { text-align: center }
.nowrap { white-space: nowrap }
.ok { color: var(--ok) } .bad { color: var(--bad) } .warn { color: var(--warn) }
code { background: var(--surface-3); padding: 1px 6px; border-radius: 5px; font-size: 13px }

/* Toolbars: actions and filters sit in one tidy strip above the content. */
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow) }
.bar .sp { flex: 1 }
.bar > span { color: var(--ink-2); font-size: 13px }
.md .bar, .card .bar, .empty .bar, .pager, .summary-bar .bar, .auth-card .bar { background: none; border: 0; box-shadow: none; padding: 0 }
.card + .bar, .bar + .bar { margin-top: -6px }

/* Page title, with the report subtitle (company and period) shown under it on screen. */
main > h1 { font-size: 24px; margin-bottom: 16px }
main > .rhead { display: block; color: var(--muted); font-size: 13px; font-weight: 500; margin: 0 0 2px }
/* report header: logo, company, title, date — a small line on screen, a full heading on paper */
.rep-head { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; margin: 0 0 6px }
.rep-head img { max-height: 46px; max-width: 120px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px }
.rep-head > div { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline }
.rep-head .rep-co { font-weight: 700; color: var(--pri-ink); font-size: 16px; flex-basis: 100% }
@media print {
  .rep-head { display: flex !important; justify-content: center; text-align: center; color: #000; border-bottom: 2px solid #1E3A5F; padding-bottom: 8px; margin-bottom: 12px; gap: 16px }
  .rep-head img { max-height: 64px; max-width: 160px }
  .rep-head > div { display: block }
  .rep-head .rep-co { font-size: 18px; color: #000 }
  .rep-head .rep-title { font-size: 15px; font-weight: 600 }
  .rep-head .rep-date { font-size: 11px; color: #444 }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 13.5px; text-decoration: none; transition: background .12s, border-color .12s }
.btn:hover { border-color: #B6C4D8; background: var(--surface-2); text-decoration: none }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn.pri { background: var(--pri); border-color: var(--pri); color: #fff }
.btn.pri:hover { background: var(--pri-hover); border-color: var(--pri-hover) }
.btn.danger { color: var(--bad) }
.btn.danger:hover { background: var(--bad-soft); border-color: transparent }
.btn.ghost { border-color: transparent; background: none }
.btn.sm { height: 28px; padding: 0 9px; font-size: 12.5px; font-weight: 600 }
.btn.block { display: flex; width: 100%; margin-top: 14px; height: 42px }
.btn .ti { font-size: 16px }

/* inputs */
input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], input:not([type]), select, textarea {
  height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 10px; background: var(--surface); color: var(--ink); transition: border-color .12s, box-shadow .12s }
textarea { height: auto; padding: 8px 10px }
/* Date boxes read left-to-right (2026-10-26); in RTL the empty placeholder otherwise comes out scrambled. */
input[type=date] { direction: ltr; text-align: right; min-width: 140px }
/* DateBox: a text field in day/month/year with a calendar button; the native picker underneath is invisible. */
.datebox { position: relative; display: inline-flex; align-items: center; min-width: 140px; vertical-align: middle }
label.f .datebox, td .datebox { display: flex; width: 100% }
.datebox > input[type=text] { flex: 1; width: 100%; min-width: 0; text-align: right; padding-left: 32px }
.datebox-pick { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; min-width: 0; opacity: 0; pointer-events: none; border: 0; padding: 0 }
.datebox-btn { position: absolute; left: 4px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; padding: 0 }
.datebox-btn:hover { background: var(--surface-2); color: var(--pri) }
.datebox.err > input[type=text] { border-color: var(--bad, #d64545) }
input:hover, select:hover, textarea:hover { border-color: #B6C4D8 }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 20%, transparent) }
input:disabled, select:disabled { background: var(--surface-3); color: var(--ink-2) }
input::placeholder { color: var(--muted) }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--pri) }
/* Entry screens: field titles in the program's blue, the boxes themselves on a tinted background. */
label.f { display: flex; flex-direction: column; gap: 5px; color: var(--pri-ink); font-weight: 600; font-size: 12.5px; margin-bottom: 12px; position: relative }
label.f input, label.f select, label.f textarea { font-weight: 400; color: var(--ink) }
label.f input:not([type=checkbox]):not(:disabled), label.f select:not(:disabled), label.f textarea:not(:disabled), .md .datebox > input[type=text]:not(:disabled) {
  background: var(--input-bg); border-color: var(--input-line) }
label.f input:focus, label.f select:focus, label.f textarea:focus { background: var(--surface) }
/* Required fields: a red star over the title. */
label.f.req::before { content: "*"; position: absolute; top: -3px; inset-inline-start: -9px; color: var(--bad); font-weight: 700; font-size: 14px }
.req-note { font-size: 12px; color: var(--muted) }
.req-note b { color: var(--bad) }
label.sw { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink) }
input.err { border-color: var(--bad); background: var(--bad-soft) }
.validation-message { color: var(--bad); font-weight: 400 }

/* cards and KPIs */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow) }
.card > h2:first-child, .card > h3:first-child { margin-top: 0 }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px }
.grid .card { margin-bottom: 0 }
.kpi { position: relative; border: 0; box-shadow: none; padding: 16px 18px }
.kpi .t { color: inherit; opacity: .8; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px }
.kpi .v { font-size: 24px; font-weight: 700; margin-top: 6px; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.3px }
.kpi .s { font-size: 12px; opacity: .75; margin-top: 2px }
.kpi { background: var(--info-soft); color: var(--info-ink) }
.grid > .kpi:nth-child(6n+2) { background: var(--warn-soft); color: var(--warn-ink) }
.grid > .kpi:nth-child(6n+3) { background: var(--ok-soft); color: var(--ok-ink) }
.grid > .kpi:nth-child(6n+4) { background: var(--violet-soft); color: var(--violet-ink) }
.grid > .kpi:nth-child(6n+5) { background: var(--bad-soft); color: var(--bad-ink) }
.grid > .kpi:nth-child(6n+6) { background: var(--surface-3); color: var(--ink) }
.kpi.blue { background: var(--info-soft); color: var(--info-ink) }
.kpi.amber { background: var(--warn-soft); color: var(--warn-ink) }
.kpi.green { background: var(--ok-soft); color: var(--ok-ink) }
.kpi.red { background: var(--bad-soft); color: var(--bad-ink) }
.kpi.violet { background: var(--violet-soft); color: var(--violet-ink) }
.kpi .v.ok, .kpi .v.bad { color: inherit }

/* tags and alerts */
.tag { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--pri-soft); color: var(--pri-ink); margin-inline-start: 4px; white-space: nowrap }
.tag.green { background: var(--ok-soft); color: var(--ok-ink) } .tag.red { background: var(--bad-soft); color: var(--bad-ink) } .tag.amber { background: var(--warn-soft); color: var(--warn-ink) }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; border: 1px solid transparent; white-space: pre-line }
.alert::before { font-family: "tabler-icons"; font-size: 18px; line-height: 1.3 }
.alert.ok { background: var(--ok-soft); color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok) 25%, transparent) }
.alert.ok::before { content: "\ea67" }
.alert.bad { background: var(--bad-soft); color: var(--bad-ink); border-color: color-mix(in srgb, var(--bad) 25%, transparent) }
.alert.bad::before { content: "\ea06" }
.alert a { color: inherit; text-decoration: underline; font-weight: 600 }

/* ───────── tables ───────── */
.tw { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 210px); box-shadow: var(--shadow) }
.tw.narrow { max-width: none }
.tw.tall { max-height: 58vh }
table { width: 100%; border-collapse: separate; border-spacing: 0 }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); text-align: right; vertical-align: middle }
th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-weight: 700; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); white-space: nowrap }
tr + tr th { top: 37px }
tbody tr:last-child td, table tr:last-child td { border-bottom: 0 }
td.n, th.n { text-align: left; direction: ltr; font-variant-numeric: tabular-nums; white-space: nowrap }
td.n.neg, .neg { color: var(--bad) }
td.ltr-cell { text-align: right }
th.c { text-align: center }
tr.grp td { font-weight: 700; background: var(--surface-2) }
tr.sub td { font-weight: 600; border-top: 1px dashed var(--line); color: var(--ink-2) }
tr.tot td { font-weight: 700; background: var(--surface-3); border-top: 1px solid var(--line); position: sticky; bottom: 0 }
tr.click { cursor: pointer }
tr.click:hover td { background: var(--pri-soft) }
tr.op-first td { border-top: 2px solid var(--line) }
table.mini { width: auto; min-width: 360px }
.tree td.nm { white-space: nowrap }
.tg { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; color: var(--pri); font-weight: 700;
  user-select: none; background: var(--surface); margin-inline-end: 8px; font-size: 14px; line-height: 1 }
.tg:hover { background: var(--pri-soft); border-color: var(--pri) }
.tg.blank { border: none; background: none; cursor: default }
.empty { padding: 36px 16px; text-align: center; color: var(--muted) }
.empty .ti { font-size: 34px; display: block; margin: 0 auto 8px; color: var(--line) }
.pager { margin-top: 12px }

/* entry editor: a spreadsheet-like grid — borderless cells, the active cell lights up */
.je { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 4px; display: block; overflow-x: auto }
.je > tbody { display: table; width: 100% } /* the grid scrolls sideways inside its box on narrow screens */
.md { min-width: 0; max-width: calc(100vw - 28px) }
.je th { position: static; background: var(--surface-2); padding: 8px 10px }
.je td { padding: 0; border-bottom: 1px solid var(--line-2); border-inline-start: 1px solid var(--line-2) }
.je td:first-child { border-inline-start: 0 }
.je input, .je select { width: 100%; height: 40px; border: 0; border-radius: 0; background: transparent; padding: 0 10px; box-shadow: none !important }
.je input:focus, .je select:focus { background: var(--pri-soft); outline: 2px solid var(--pri); outline-offset: -2px }
.je input:disabled, .je select:disabled { background: transparent; color: var(--ink) }
.je td > .btn { margin: 0 6px }
.je input.amt, input.amt { direction: ltr; text-align: left; min-width: 110px; font-variant-numeric: tabular-nums }
.je tr.tot td { position: static; padding: 10px; border-inline-start: 0 }
.je tr:hover td { background: var(--surface-2) }
.balance-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-weight: 600; font-size: 13px }
.balance-pill.ok { background: var(--ok-soft); color: var(--ok-ink) }
.balance-pill.bad { background: var(--bad-soft); color: var(--bad-ink) }

/* ───────── dialogs ───────── */
.ov { position: fixed; inset: 0; background: rgba(8, 20, 38, .5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 14px 30px; overflow: auto; z-index: 70;
  animation: fade .12s ease-out }
.md { background: var(--surface); border-radius: 14px; width: 100%; max-width: 580px; padding: 0 22px 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: rise .16s ease-out }
/* data-entry dialogs (entries, invoices, items...) use the whole screen */
.md.wide { max-width: none; width: calc(100vw - 32px); min-height: calc(100vh - 40px); display: flex; flex-direction: column }
.md.wide > .acts { margin-top: auto }
.ov:has(> .md.wide) { padding: 16px }
/* attachments on a document */
.attbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; font-size: 13px }
.attc { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 8px; padding: 3px 8px }
/* permission groups: one card per menu with its screens */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px }
.perm-card { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px }
.perm-card .perm-head { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 4px }
.md.sm { max-width: 420px }
.md > h3 { margin: 0 -22px 16px; padding: 16px 22px; font-size: 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px }
.md .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px }
.md .row.block { display: block }
.md .row label.f { margin-bottom: 0 }
.md .row.block > b { display: block; margin-bottom: 6px }
.md .acts { display: flex; gap: 8px; margin: 18px -22px 0; padding: 14px 22px 0; border-top: 1px solid var(--line) }
.md .acts .sp { flex: 1 }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; margin-top: 8px }
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { transform: translateY(8px); opacity: .6 } }

/* toasts */
.toasts { position: fixed; bottom: 20px; inset-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 90 }
.toast { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 11px 14px; border-radius: 10px; background: var(--navy); color: #fff;
  box-shadow: var(--shadow-lg); animation: rise .18s ease-out; white-space: pre-line }
.toast.bad { background: #B91C1C }
.toast .ti { font-size: 18px }

/* command palette */
.palette { max-width: 620px; padding: 0 }
.palette input { width: 100%; height: 52px; border: 0; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; padding: 0 18px; font-size: 16px; box-shadow: none !important }
.palette .results { max-height: 52vh; overflow: auto; padding: 6px }
.palette .res { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--ink) }
.palette .res.on, .palette .res:hover { background: var(--pri-soft) }
.palette .res small { margin-inline-start: auto; color: var(--muted) }
.palette .grp { font-size: 11.5px; color: var(--muted); padding: 8px 12px 4px; font-weight: 700 }
.palette .foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted) }

/* dashboard */
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px }
.chart { width: 100%; height: 220px; display: block }
.chart text { font-family: inherit; font-size: 11px; fill: var(--muted) }
.chart .grid-line { stroke: var(--line-2) }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2) }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px }
.list { list-style: none; margin: 0; padding: 0 }
.list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2) }
.list li:last-child { border-bottom: 0 }
.list .n { margin-inline-start: auto; direction: ltr; font-variant-numeric: tabular-nums; font-weight: 600 }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pri); flex-shrink: 0 }

/* misc layout helpers */
.wide-input { min-width: 320px }
.w100 { width: 100% }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px }
.form-grid label.f input, label.f textarea { width: 100% }
.logo-preview { max-height: 46px; max-width: 160px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px }
.summary-bar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 16px }
.summary-bar label.f { margin: 0; min-width: 280px }
.narrow-card { max-width: none }
.ops-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 14px }
.ops-grid label.f { margin-bottom: 8px }
.ops-grid select, .ops-grid input { width: 100% }
.rhead { display: none }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px }
.page-head h1 { margin: 0 }
.page-head .sp { flex: 1 }

/* sign-in */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface) }
.auth-art { background: #0c2219; display: flex; align-items: center; justify-content: center; overflow: hidden }
.auth-art img { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; display: block }
.auth-art .mark { width: 46px; height: 46px; border-radius: 12px; background: var(--pri); display: grid; place-items: center; font-weight: 700 }
.auth-art h2 { font-size: 30px; margin: 0 0 10px; line-height: 1.35 }
.auth-art p { color: var(--side-ink); margin: 0; max-width: 420px }
.auth-art ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; color: var(--side-ink) }
.auth-art li .ti { color: #60A5FA; margin-inline-end: 8px }
.auth-side { display: flex; align-items: center; justify-content: center; padding: 32px 18px }
.auth-card { width: 100%; max-width: 400px }
.auth-card label.f input, .auth-card label.f select { width: 100%; height: 42px }
.auth-title { margin: 0 0 6px; font-size: 24px }
.auth-sub { color: var(--muted); margin: 0 0 22px }
.auth-card hr { border: none; border-top: 1px solid var(--line); margin: 16px 0 }

/* printable documents (A4) — always light, whatever the screen theme */
.print-toolbar { position: sticky; top: 0; display: flex; gap: 8px; justify-content: center; padding: 10px; background: var(--surface); border-bottom: 1px solid var(--line); z-index: 5 }
.print-page { padding: 20px 12px 40px; background: var(--bg) }
.doc { max-width: 210mm; margin: 0 auto; background: #fff; color: #111; padding: 14mm 12mm; box-shadow: var(--shadow-lg); font-size: 12.5px; line-height: 1.6; border-radius: 4px }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 3px solid #1E4A7E; padding-bottom: 10px; margin-bottom: 14px }
.doc-brand { display: flex; align-items: center; gap: 14px }
.doc-brand img { max-height: 70px; max-width: 170px; object-fit: contain }
.doc-title { font-size: 22px; font-weight: 700; color: #0F2A4A }
.doc-sub { color: #555 }
.doc-meta td { padding: 1px 8px; border: 0 }
.doc-meta td:first-child { color: #555 }
.doc-parties { display: flex; gap: 12px; margin-bottom: 14px }
.doc-box { flex: 1; border: 1px solid #c9d3e0; border-radius: 8px; padding: 9px 12px }
.doc-box .lbl { color: #667; font-size: 11.5px; margin-bottom: 2px }
.doc table.doc-lines { width: 100%; border-collapse: collapse }
.doc-lines th { position: static; background: #EEF3F9; color: #0F2A4A; font-size: 11.5px; text-align: center; border: 1px solid #c9d3e0; padding: 6px }
.doc-lines th small { font-weight: 400; color: #667 }
.doc-lines td { border: 1px solid #d5dce6; padding: 6px; color: #111 }
.doc-lines .note { font-size: 11px; color: #555 }
.doc-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 12px }
.doc-qr { text-align: center; color: #666; font-size: 10.5px }
.doc-qr svg { width: 120px; height: 120px }
.doc-totals { width: 55%; border-collapse: collapse }
.doc-totals td { border: 1px solid #d5dce6; padding: 7px 10px; color: #111 }
.doc-totals tr.grand td { background: #EEF3F9; font-weight: 700; font-size: 14px; color: #0F2A4A }
.doc-note { margin-top: 10px; border: 1px solid #d5dce6; border-radius: 6px; padding: 8px 10px }
.doc-footer { text-align: center; color: #555; margin: 14px 0 0 }
.doc-sign { display: flex; justify-content: space-between; margin-top: 46px; color: #333 }
/* 80mm thermal receipt */
.receipt { width: 72mm; margin: 0 auto; background: #fff; color: #000; padding: 4mm 3mm; font-size: 12px; line-height: 1.5; box-shadow: var(--shadow-lg); page: receipt }
.receipt .c { text-align: center }
.receipt img { max-height: 48px; max-width: 60mm; display: block; margin: 0 auto 4px }
.receipt .name { font-size: 15px; font-weight: 700 }
.receipt .sep { border-top: 1px dashed #000; margin: 6px 0 }
.receipt table { width: 100%; border-collapse: collapse }
.receipt td { border: 0; padding: 1px 0; color: #000; font-size: 12px; background: none }
.receipt td.n { text-align: left; white-space: nowrap }
.receipt .kv { display: flex; justify-content: space-between }
.receipt .grand { font-size: 16px; font-weight: 700 }
.receipt .qr { display: flex; justify-content: center; margin-top: 6px }
.receipt .qr svg { width: 34mm; height: 34mm }
@page receipt { size: 80mm auto; margin: 2mm }

/* support conversation */
.thread { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow: auto; margin-bottom: 12px; padding: 4px }
.msg { max-width: 80%; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2) }
.msg.me { align-self: flex-start; background: var(--pri-soft) }
.msg.admin { align-self: flex-end }
.msg .who { font-weight: 600; font-size: 12.5px; margin-bottom: 3px }
.msg .txt { white-space: pre-line }

/* item pictures */
.item-img-box { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px }
.item-img-box > img, .item-img-box > span { width: 84px; height: 84px; object-fit: contain; border-radius: 8px; background: #fff; display: grid; place-items: center; border: 1px solid var(--line-2) }
.item-img-box > span .ti { font-size: 34px; color: var(--line) }
img.thumb { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--line-2); vertical-align: middle; margin-inline-end: 6px }
.doc img.thumb { width: 40px; height: 40px; border: 0 }

/* the page being turned into a PDF by «تنزيل» */
.print-page.pdf-out { padding: 0; background: #fff }
.print-page.pdf-out .doc, .print-page.pdf-out .receipt { box-shadow: none; border-radius: 0; margin: 0 auto }
@media print {
  .print-page { padding: 0; background: #fff }
  .doc { box-shadow: none; padding: 0; max-width: none; border-radius: 0 }
  .receipt { box-shadow: none }
  @page { size: A4; margin: 12mm }
}

/* report tabs and share bars */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 12px }
.tab { border: 0; background: none; color: var(--ink-2); font: inherit; padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px }
.tab:hover { color: var(--ink) }
.tab.on { color: var(--pri); border-bottom-color: var(--pri); font-weight: 600 }
.share { display: flex; align-items: center; gap: 6px }
.share span { display: block; height: 6px; border-radius: 3px; background: var(--pri); min-width: 2px }
.share small { color: var(--muted); font-size: 11px }

/* ───────── cashier (POS) ───────── */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 14px; align-items: start }
.pos-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px }
.pos-head h1 { margin: 0; font-size: 20px }
.pos-head select { height: 32px }
.pos-search { width: 100%; height: 48px; font-size: 16px; border-radius: 12px; padding: 0 14px }
.pos-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer }
.chip.on { background: var(--pri); border-color: var(--pri); color: #fff }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: calc(100vh - 250px); overflow: auto; padding: 2px }
.pos-tile { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: start; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 10px 12px; min-height: 92px; font: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .06s }
.pos-tile:hover { border-color: var(--pri); box-shadow: var(--shadow) }
.pos-tile:active { transform: scale(.98) }
.pos-tile b { font-size: 13.5px; line-height: 1.35 }
.pos-tile .price { color: var(--pri); font-weight: 700; font-size: 15px; margin-top: auto }
.pos-right { position: sticky; top: 70px }
.pos-cart { max-height: 38vh; overflow: auto; margin: 6px 0 }
.pos-cart td { vertical-align: middle }
.pos-totals { width: 100%; margin-top: 6px }
.pos-totals td { border: 0; padding: 3px 4px }
.pos-totals tr.big td { font-size: 22px; font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); padding-top: 8px }
.pos-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 }
.pos-change { font-size: 22px; color: var(--ok, #15803d) }
.pos-paybtn { flex: 1; font-size: 16px; height: 48px }
@media (max-width: 1100px) { .pos { grid-template-columns: minmax(0, 1fr) } .pos-right { position: static } .pos-grid { max-height: none } }

#blazor-error-ui { background: var(--warn-soft); color: var(--warn-ink); bottom: 0; box-shadow: var(--shadow-lg); display: none; left: 0; padding: .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000 }
#blazor-error-ui a { margin-inline-start: 10px }

/* Loading screen until the first screen arrives, and the bar shown while the live connection is down. */
.spin { width: 18px; height: 18px; border: 2.5px solid var(--line); border-top-color: var(--pri); border-radius: 50%; display: inline-block; flex: none;
  animation: amv-spin .8s linear infinite }
@keyframes amv-spin { to { transform: rotate(360deg) } }
#amv-boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bg); color: var(--ink-2); font-size: 15px; z-index: 900 }
#components-reconnect-modal { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(15, 42, 74, .18); align-items: flex-start; justify-content: center; padding: 16px }
#components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex }
#components-reconnect-modal .box { display: flex; align-items: center; gap: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 12px 16px; max-width: 100% }
#components-reconnect-modal .box > span:not(.spin) { display: none }
#components-reconnect-modal.components-reconnect-show .box > .m-show,
#components-reconnect-modal.components-reconnect-failed .box > .m-failed,
#components-reconnect-modal.components-reconnect-rejected .box > .m-rejected { display: inline }
#components-reconnect-modal.components-reconnect-failed .spin { display: none }

/* ───────── responsive ───────── */
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr) }
  .ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 860px) {
  body { overflow-x: hidden }
  .side { position: fixed; inset-block: 0; inset-inline-start: 0; transform: translateX(100%); visibility: hidden; transition: transform .2s ease, visibility .2s; width: 270px; box-shadow: var(--shadow-lg) }
  .shell.menu-open .side { transform: none; visibility: visible }
  .shell.collapsed { --side-w: 270px }
  .shell.collapsed .side-brand .names, .shell.collapsed .nav-label, .shell.collapsed .chev, .shell.collapsed .nav-sub { display: revert }
  .scrim { position: fixed; inset: 0; background: rgba(8, 20, 38, .45); z-index: 35 }
  .menu-btn { display: inline-grid }
  .side .collapse-btn, .side-foot { display: none }
  .topbar { padding: 0 12px }
  .topbar .search { min-width: 0; flex: 0 0 auto }
  .topbar .search span, .topbar .search kbd, .user-chip .who { display: none }
  .topbar select { min-width: 0; max-width: 46vw; font-size: 13px }
  .topbar .icon-btn, .topbar .search, .topbar .dropdown { flex-shrink: 0 }
  main { padding: 16px 14px 32px }
  .auth-wrap { grid-template-columns: 1fr }
  .auth-art { display: none }
  .wide-input { min-width: 0; width: 100% }
  .bar > input[type=text] { flex: 1 1 100% }
  .ops-grid { grid-template-columns: minmax(0, 1fr) }
}
@media print {
  .side, .topbar, .bar, .no-print, .toasts { display: none !important }
  body { background: #fff; color: #000 }
  main { padding: 0 }
  .rhead { display: block; text-align: center; margin-bottom: 10px; font-weight: 700 }
  h1 { display: none }
  .tw, .card { border: none; box-shadow: none; overflow: visible; max-height: none }
  th { position: static }
}

/* Excel import dialog */
.steps { margin: 0 0 12px; padding-inline-start: 20px; display: grid; gap: 12px }
.steps li > div { margin-top: 6px }
label.check { display: flex; gap: 8px; align-items: center; margin: 6px 0; cursor: pointer }
label.check input { width: auto; height: auto }
.import-errors { margin: 6px 0 0; padding-inline-start: 18px; max-height: 260px; overflow: auto; font-size: 13px }
.pay-list { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px }
.pay-list tr.sel td { background: color-mix(in srgb, var(--pri) 8%, transparent) }
.pay-list td { vertical-align: middle }

/* manufacturing */
.mo-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px }
.mo-head > div { display: flex; flex-direction: column; gap: 2px }
h4.sub { margin: 14px 0 6px; font-size: 14px; color: var(--ink-2) }
.payslip { margin-bottom: 18px; page-break-after: always }
.payslip .doc-lines th { text-align: center }

/* analysis */
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 12px; margin: 12px 0 }
.an-card { overflow: auto }
.an-card > b { display: block; margin-bottom: 8px; font-size: 14.5px }
.kpi small { display: block; margin-top: 4px; font-size: 12px; opacity: .85 }
.tag.abcA { background: var(--ok-soft); color: var(--ok-ink) }
.tag.abcB { background: var(--warn-soft); color: var(--warn-ink) }
.tag.abcC { background: var(--line-2); color: var(--ink-2) }
@media (max-width: 860px) { .an-grid { grid-template-columns: minmax(0, 1fr) } }

/* subscription banners and the owner's console */
.sub-banner { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-weight: 500 }
.sub-banner.warn { background: var(--warn-soft); color: var(--warn-ink) }
.sub-banner.bad { background: var(--bad-soft); color: var(--bad-ink) }
.sub-banner.info { background: color-mix(in srgb, var(--pri) 10%, transparent); color: var(--ink) }
.admin-shell { min-height: 100vh; background: var(--bg) }
.admin-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 18px; background: var(--navy); color: #fff }
.admin-top .brand { font-weight: 700; margin-inline-end: 14px; display: flex; align-items: center; gap: 8px }
.admin-top a.nav { color: var(--side-ink); text-decoration: none; padding: 6px 12px; border-radius: 8px }
.admin-top a.nav:hover, .admin-top a.nav.active { background: rgba(255,255,255,.12); color: #fff }
.admin-body { padding: 18px; max-width: 1400px; margin: 0 auto }

/* Password box with a show/hide eye button */
.pw { position: relative; display: flex; width: 100% }
.pw > input { flex: 1; width: 100%; min-width: 0; padding-left: 36px }
.pw-eye { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--ink-2); cursor: pointer; padding: 4px 6px; font-size: 17px; line-height: 1 }
.pw-eye:hover { color: var(--pri) }

/* side menu: a group that opens as tiles, and the one «التقارير» link per group */
.side a.nav-group.open { background: var(--navy-3); color: #fff }
.side a.nav-group .chev { transform: none !important }
.side .nav-sub a.nav-reports { display: flex; align-items: center; gap: 6px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; font-weight: 600 }
.side .nav-sub a.nav-reports .count { margin-inline-start: auto; font-size: 11px; padding: 0 7px; border-radius: 10px; background: rgba(255, 255, 255, .1) }

/* module hub: screens and reports as tiles in the main area */
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px }
.hub-tile { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); font-weight: 600; text-decoration: none; box-shadow: var(--shadow); transition: border-color .12s, transform .12s }
.hub-tile:hover { border-color: var(--pri); text-decoration: none; transform: translateY(-1px) }
.hub-tile i { font-size: 22px; color: var(--pri); background: var(--pri-soft); border-radius: 10px; padding: 8px }
.hub-tile.soon { opacity: .6 }
.hub-sec { font-size: 14px; color: var(--pri-ink); margin: 6px 0 8px }

/* branch picker next to the company */
.topbar select.branch-pick { max-width: 180px }
.branch-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--pri-soft); color: var(--pri-ink); font-weight: 600; font-size: 13px }
.rep-head .rep-branch { font-weight: 600; color: var(--pri-ink) }
@media print { .rep-head .rep-branch { color: #000; font-size: 13px } }

/* rows only on paper (signatures), rows left off paper (unticked) */
.print-only { display: none }
@media print {
  th.print-only, td.print-only { display: table-cell; min-width: 90px }
  tr.no-print-row { display: none }
}

/* inquiries chat: a bubble at the bottom of every screen */
.chat { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px }
.chat-bubble { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--pri); color: #fff; font-size: 26px; cursor: pointer;
  box-shadow: var(--shadow-lg); display: grid; place-items: center; align-self: flex-end }
.chat-bubble:hover { background: var(--pri-hover) }
.chat-bubble .badge { position: absolute; top: -2px; inset-inline-start: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--bad);
  color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center }
.chat-panel { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 110px)); background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--navy); color: #fff }
.chat-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px }
.chat-head .sp { flex: 1 }
.chat-head .icon-btn { color: #fff; background: transparent; border: 0 }
.chat-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px }
.chat-body.thread { max-height: none; margin: 0 }
.chat-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer }
.chat-item:hover { border-color: var(--pri) }
.chat-item.unread { border-color: var(--ok); background: var(--ok-soft) }
.chat-item .t { font-weight: 600 }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line) }
.chat-input textarea { flex: 1; resize: none }
.chat-input .btn { height: auto }
@media (max-width: 760px) { .chat { inset-inline-end: 12px; bottom: 12px } }

/* A company not registered for VAT: every tax column, field and total is hidden (see UserSession.TaxExempt). */
.no-tax .tax { display: none !important; }

/* live chat: «تم الرد» notice above the bubble and a pulse while an answer is unread */
.chat-notice { display: flex; align-items: center; gap: 6px; max-width: min(320px, calc(100vw - 32px)); padding: 10px 14px; border: 0; border-radius: 12px;
  background: var(--ok); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); animation: chat-pop .25s ease-out }
.chat-bubble.ring { animation: chat-ring 1.6s ease-out infinite }
@keyframes chat-pop { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes chat-ring { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55) } 100% { box-shadow: 0 0 0 16px rgba(22, 163, 74, 0) } }
@media (prefers-reduced-motion: reduce) { .chat-notice, .chat-bubble.ring { animation: none } }

/* visitor chat box: the trap field bots fill and people never see */
.chat .hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0 }