/* Smart Nutrition POS — visual system
   Ink teal carries the brand chrome (as on the center's own signage); white working surfaces;
   brand teal for actions; harvest orange only for highlights; leaf green for "active / done".
   Type: IBM Plex Sans Arabic for the Arabic interface, Inter for the English one — each screen in one language. */

:root {
  --ink: #0C3337;          /* chrome, headings */
  --ink-2: #134A4F;        /* chrome hover / raised */
  --brand: #04767B;        /* primary action */
  --brand-dark: #035C60;
  --mint: #E3F0EE;         /* selection, soft fills */
  --mint-2: #CFE5E2;
  --accent: #E79800;       /* highlight only */
  --accent-soft: #FCEFD3;
  --accent-ink: #5A3B00;
  --leaf: #5C8A1C;         /* active / done */
  --leaf-soft: #EAF3DC;
  --danger: #B42318;
  --danger-soft: #FCEBE9;
  --ground: #EEF2F1;
  --surface: #FFFFFF;
  --soft: #F5F8F7;
  --line: #D9E2E0;
  --line-2: #E9EFEE;
  --text: #13262A;
  --muted: #536663;
  --muted-2: #6E807D;

  --r-ctl: 10px;           /* buttons, inputs */
  --r-panel: 14px;         /* panels, modals */
  --font: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  font-family: var(--font);
  color: var(--text);
  font-feature-settings: 'tnum' 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); }
body { font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 3px solid rgba(4, 118, 123, .45); outline-offset: 2px; }
[hidden] { display: none !important; }
.spacer { flex: 1; }
.neg { color: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex-shrink: 0; display: block; }
[data-icon] { display: inline-flex; }
[lang="ar"] { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ───────────── Buttons & fields ───────────── */
.btn { height: 44px; padding: 0 18px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface);
       font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--text); }
.btn:hover { background: var(--soft); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: #D48B00; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #9A1D14; }
.btn-danger-soft { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.btn-soft { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.btn-soft:hover { background: var(--mint-2); }
.btn-lg { height: 52px; font-size: 16px; padding: 0 22px; }
.btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 500; display: flex; gap: 8px; justify-content: space-between; }
.field input, .field select { height: 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 0 12px; background: #fff; }
.field input:focus, .field select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(4, 118, 123, .15); }
.form-error { color: var(--danger); min-height: 20px; margin: 0; font-size: 14px; }
.hint { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ───────────── Login ───────────── */
/* (sign-in screen styles are further down, under "Sign in") */

/* ───────────── POS frame ───────────── */
.pos { height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 60px; background: var(--ink); color: #DCEBE9; display: flex; align-items: center; gap: 20px; padding: 0 20px; font-size: 13px; flex-shrink: 0; }
.topbar-logo { height: 40px; }
.topbar-title { color: #fff; font-weight: 500; font-size: 15px; padding-inline-start: 18px; border-inline-start: 1px solid rgba(255,255,255,.18); display: flex; gap: 10px; align-items: baseline; }
.topbar-title span { color: #9FC3C0; font-size: 13px; }
.tb-item { display: inline-flex; align-items: center; gap: 7px; color: #C6DDDA; }
.tb-clock { color: #fff; font-weight: 500; }
.online { display: inline-flex; align-items: center; gap: 7px; background: rgba(140, 200, 70, .14); color: #CDE8A9; padding: 5px 12px; border-radius: 99px; font-weight: 500; }
.online .dot { width: 8px; height: 8px; border-radius: 99px; background: #8CC846; box-shadow: 0 0 0 3px rgba(140, 200, 70, .25); }
.online.off { background: rgba(240, 90, 80, .16); color: #FFC9C3; }
.online.off .dot { background: #F05A50; box-shadow: 0 0 0 3px rgba(240, 90, 80, .25); }
.offline { position: fixed; inset: 0 0 auto 0; z-index: 100; background: var(--danger); color: #fff; text-align: center; padding: 10px; font-weight: 600; }
.statusbar { height: 30px; background: var(--surface); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 24px; padding: 0 20px; font-size: 12px; color: var(--muted-2); flex-shrink: 0; }

.pos-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(430px, 43%) 250px minmax(0, 1fr); gap: 14px; padding: 14px; }

/* Cart column */
.col-cart { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.scan { position: relative; }
.scan-ico { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--brand); }
.scan input { width: 100%; height: 52px; border: 2px solid var(--brand); border-radius: 12px; padding-block: 0; padding-inline: 48px 16px; font-size: 16px; background: #fff; outline: none; }
.scan input:focus { box-shadow: 0 0 0 4px rgba(4, 118, 123, .16); }
.scan input::placeholder { color: var(--muted-2); }

.member-strip { display: flex; align-items: center; gap: 12px; background: var(--accent-soft); border: 1px solid #F3D9A0; border-radius: 12px; padding: 9px 12px; }
.tier { background: var(--accent); color: #fff; font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 7px; white-space: nowrap; }
.member-strip .who { display: flex; flex-direction: column; line-height: 1.35; flex: 1; min-width: 0; }
.member-strip .who b { font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.member-strip .who span { font-size: 12px; color: #7A5B1E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.status.ACTIVE { color: var(--leaf); background: var(--leaf-soft); }
.status.FROZEN { color: #24547E; background: #E4EEF7; }
.status.EXPIRED { color: var(--danger); background: var(--danger-soft); }
.status.NONE { color: var(--muted); background: var(--soft); }
.x-btn { border: none; background: transparent; font-size: 16px; color: var(--muted); width: 34px; height: 34px; border-radius: 8px; display: inline-grid; place-items: center; }
.x-btn:hover { background: rgba(0,0,0,.06); }

.cart { flex: 1; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); display: flex; flex-direction: column; overflow: hidden; }
.cart-head, .cart-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 72px 64px 80px 28px; gap: 8px; padding: 10px 12px 10px 16px; align-items: center; }
.cart-head { font-size: 12px; font-weight: 500; color: var(--muted-2); border-bottom: 1px solid var(--line); }
.cart-head span:not(:first-child), .cart-row > span:not(:first-child) { text-align: end; }
.cart-head span:nth-child(2), .cart-row > span:nth-child(2) { text-align: center; }
.cart-rows { overflow-y: auto; flex: 1; }
.cart-row { border: none; border-bottom: 1px solid var(--line-2); width: 100%; background: #fff; text-align: start; font-size: 14px; cursor: pointer; position: relative; }
.cart-row:hover { background: var(--soft); }
.cart-row.sel { background: var(--mint); }
.cart-row.sel::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--brand); }
.cart-row .name { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cart-row .name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-row .name small { font-size: 12px; color: var(--muted-2); }
.cart-row .amt { font-weight: 600; }
.cart-row .disc { color: var(--danger); }
.cart-empty { height: 100%; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted-2); padding: 24px; text-align: center; }
.cart-empty .ico { color: var(--mint-2); margin-bottom: 4px; }
.cart-empty b { color: var(--muted); font-weight: 500; }
.cart-empty span { font-size: 13px; }

.summary { margin: 0; border-top: 1px solid var(--line); padding: 10px 16px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 16px; background: var(--soft); }
.summary div { display: flex; flex-direction: column; gap: 1px; }
.summary dt { font-size: 12px; color: var(--muted-2); display: flex; gap: 6px; }
.summary dt span { color: var(--muted-2); }
.summary dd { margin: 0; font-weight: 500; }
.summary .due { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; }
.summary .due dt { font-size: 14px; color: var(--ink); font-weight: 500; }
.summary .due dd { font-size: 24px; font-weight: 700; color: var(--ink); }

/* Action column: grouped by what each action works on */
.col-actions { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; }
.group { margin: 6px 2px 0; font-size: 12px; color: var(--muted-2); font-weight: 500; }
.group:first-child { margin-top: 0; }
.act { min-height: 46px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; gap: 12px; padding: 0 12px; text-align: start; color: var(--text); }
.act:hover { border-color: var(--mint-2); background: var(--soft); }
.act > [data-icon] { color: var(--brand); }
.act .lbl { display: flex; flex-direction: column; line-height: 1.2; font-weight: 500; font-size: 14px; }
.act .lbl small { font-size: 12px; font-weight: 400; color: var(--muted-2); }
.void-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.void-pair .act { padding: 0 10px; gap: 8px; }
.act-warn { background: var(--danger-soft); border-color: #F2CBC6; color: var(--danger); }
.act-warn > [data-icon], .act-warn .lbl small { color: var(--danger); }
.act-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.act-danger > [data-icon], .act-danger .lbl small { color: #FFD9D4; }
.act-danger:hover { background: #9A1D14; border-color: #9A1D14; }
.act:active, .key:active, .tile:active, .pay:active { transform: translateY(1px); }

/* Keypad & sale tiles */
.col-keys { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.key { height: 56px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); font-size: 22px; font-weight: 500; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.key:hover { background: var(--soft); }
.key small { font-size: 11px; font-weight: 400; color: var(--muted-2); }
.key.fn { background: var(--mint); border-color: var(--mint); font-size: 14px; }
.key.clr { background: var(--danger-soft); border-color: #F2CBC6; color: var(--danger); }
.key.enter { background: var(--ink); border-color: var(--ink); color: #fff; font-size: 15px; }
.big-row { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; min-height: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tile { flex: 1; border-radius: 12px; border: 1px solid var(--mint-2); background: var(--mint); color: var(--ink); display: flex; align-items: center; gap: 14px; padding: 0 18px; text-align: start; min-height: 56px; }
.tile:hover { background: var(--mint-2); }
.tile > [data-icon] { color: var(--brand); }
.tile .lbl { display: flex; flex-direction: column; font-weight: 600; font-size: 15px; line-height: 1.25; }
.tile .lbl small { font-size: 12px; font-weight: 400; color: var(--muted); }
.tile-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.tile-accent > [data-icon] { color: #fff; }
.tile-accent .lbl small { color: #FFF1D6; }
.tile-accent:hover { background: #D48B00; }

/* The pay button is the one loud thing on the screen: it shows what is due. */
.pay { flex: 3; border-radius: 16px; border: none; background: var(--brand); color: #fff; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; padding: 18px 20px; text-align: start; min-height: 150px; }
.pay:hover { background: var(--brand-dark); }
.pay-top { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.pay-top span { font-weight: 400; color: #BFE3E1; }
.pay kbd { margin-inline-start: auto; font-family: inherit; font-size: 11px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 2px 7px; color: #D6EEEC; }
.pay-amt { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.pay-amt span { font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.pay-amt small { font-size: 16px; color: #BFE3E1; }
.pay.empty { background: #6E9C9E; }
.pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair .act { justify-content: center; }

/* ───────────── Modals ───────────── */
.modal-back { position: fixed; inset: 0; background: rgba(8, 32, 35, .5); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--surface); border-radius: var(--r-panel); width: min(var(--w, 720px), 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(8, 32, 35, .3); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); flex: 1; }
.modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line-2); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; background: var(--soft); }
.list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: none; border-bottom: 1px solid var(--line-2); background: #fff; text-align: start; font-size: 14px; width: 100%; }
.list-row:last-child { border-bottom: none; }
button.list-row:hover, button.list-row:focus-visible { background: var(--soft); }
.list-row .grow { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.list-row b { font-weight: 500; }
.list-row small { color: var(--muted-2); font-size: 12px; }
.empty { color: var(--muted-2); text-align: center; padding: 20px; font-size: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.kv { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.kv span { color: var(--muted-2); font-size: 12px; }
.kv b { font-weight: 500; }
.section-title { font-weight: 600; font-size: 15px; margin: 6px 0 0; color: var(--ink); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.row-between > span { color: var(--muted); }

/* Packages */
.pk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; align-content: start; }
.pk { min-height: 128px; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start; }
.pk:hover { border-color: var(--mint-2); }
.pk.sel { border: 2px solid var(--brand); padding: 11px 13px; background: var(--mint); }
.pk .chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 7px; }
.pk .desc { font-size: 14px; font-weight: 500; }
.pk .price { margin-top: auto; font-size: 22px; font-weight: 700; color: var(--ink); }
.pk .price small { font-size: 12px; font-weight: 400; color: var(--muted); }
.pk-side { background: var(--soft); border: 1px solid var(--line-2); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pk-side h3 { margin: 0; font-size: 24px; font-weight: 700; color: var(--ink); }
.alloc { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.alloc .num { font-size: 28px; font-weight: 700; color: var(--ink); min-width: 48px; text-align: start; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 20px; font-weight: 600; color: var(--brand); }
.stepper button:hover:not(:disabled) { background: var(--mint); }
.stepper .btn-sm { width: auto; height: 44px; font-size: 13px; padding: 0 12px; color: var(--text); }

/* Payment */
.pay-wrap { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; }
.pay-due { font-size: 44px; font-weight: 700; color: var(--ink); line-height: 1.05; }
.pay-due small { color: var(--muted); font-weight: 400; }
.pay-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pm { height: 66px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; gap: 2px; }
.pm:hover { border-color: var(--mint-2); background: var(--soft); }
.pm small { font-size: 12px; font-weight: 400; color: var(--muted-2); }
.pm.sel { background: var(--ink); border-color: var(--ink); color: #fff; }
.pm.sel small { color: #9FC3C0; }
.amount-in { height: 56px; border: 2px solid var(--brand); border-radius: 12px; padding: 0 16px; font-size: 26px; font-weight: 600; text-align: end; width: 100%; background: #fff; outline: none; }
.amount-in:focus { box-shadow: 0 0 0 4px rgba(4, 118, 123, .15); }
.quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.quick button { height: 46px; border-radius: 10px; border: 1px solid var(--mint-2); background: var(--mint); font-weight: 500; color: var(--ink); }
.quick button:hover { background: var(--mint-2); }
.pay-lines { background: var(--soft); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pay-lines .row-between b { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.change { color: var(--leaf); }
.done-box { text-align: center; padding: 14px 0 4px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.done-box .big { font-size: 34px; font-weight: 700; color: var(--leaf); }

/* ───────────── Toasts ───────────── */
.toasts { position: fixed; top: 72px; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: 90vw; display: flex; flex-direction: column; gap: 8px; z-index: 90; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 28px rgba(8, 32, 35, .25); max-width: 90vw; }
.toast.err { background: var(--danger); }
.toast.ok { background: var(--leaf); }

/* ───────────── Receipt (80mm thermal) ───────────── */
.print-root { display: none; }
.receipt { width: 72mm; font-family: var(--font); color: #000; font-size: 11px; line-height: 1.35; font-feature-settings: 'tnum' 1; }
.receipt .c { text-align: center; }
.receipt img.logo { width: 46mm; display: block; margin: 0 auto 2mm; }
.receipt hr { border: none; border-top: 1px dashed #000; margin: 2mm 0; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt td { padding: .6mm 0; vertical-align: top; }
.receipt td.r { text-align: right; white-space: nowrap; }
.receipt .tot td { font-size: 14px; font-weight: 700; }
.receipt .bc { display: block; margin: 2mm auto 0; width: 64mm; height: 13mm; }
.receipt .small { font-size: 9.5px; }
.receipt .ltr { direction: ltr; unicode-bidi: isolate; }
.receipt .legal { font-size: 11.5px; letter-spacing: .02em; }
.receipt .vatno { font-size: 10.5px; margin-top: .6mm; }
.receipt table.meta td { padding: .3mm 0; font-size: 10px; }
.receipt .qr-block { display: flex; align-items: center; gap: 2.5mm; margin: 2.5mm 0 1.5mm; padding: 2mm; border: 1px dashed #000; border-radius: 2mm; }
.receipt .qr-block img.qr { width: 20mm; height: 20mm; flex: none; image-rendering: pixelated; }
@media print {
  @page { size: 80mm auto; margin: 3mm 4mm; }
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block !important; }
  html, body { background: #fff; height: auto; }
}

/* ───────────── Smaller screens (phone, tablet, working from home) ───────────── */
@media (max-width: 1100px) {
  .pos { height: auto; min-height: 100vh; }
  .pos-grid { grid-template-columns: 1fr; }
  .col-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .col-actions .group, .col-actions .void-pair { grid-column: 1 / -1; }
  .col-actions .spacer { display: none; }
  .cart { min-height: 300px; }
  .big-row { min-height: 300px; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .topbar-title, .tb-clock { display: none; }
  .pk-wrap, .pay-wrap { grid-template-columns: 1fr; }
  .pay-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cart-head, .cart-row { grid-template-columns: minmax(0, 1fr) 36px 84px; padding: 9px 12px; }
  .cart-head span:nth-child(3), .cart-head span:nth-child(4), .cart-row > span:nth-child(3), .cart-row > span:nth-child(4) { display: none; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar-logo { height: 32px; }
  .tb-item { display: none; }
  .big-row { grid-template-columns: 1fr; }
}

/* ───────────── Back office ───────────── */
body.admin { min-height: 100vh; }
.admin .topbar { position: sticky; top: 0; z-index: 10; }
.admin-wrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 60px); }
.admin-nav { background: var(--ink); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.admin-nav button { display: flex; align-items: center; gap: 12px; text-align: start; border: none; background: transparent; padding: 10px 12px; border-radius: 10px; color: #B7D2CF; }
.admin-nav button .lbl { display: flex; flex-direction: column; line-height: 1.25; font-size: 14px; font-weight: 500; }
.admin-nav button .lbl small { font-size: 11px; font-weight: 400; color: #7FA6A2; }
.admin-nav button:hover { background: var(--ink-2); color: #fff; }
.admin-nav button.sel { background: var(--brand); color: #fff; }
.admin-nav button.sel .lbl small { color: #CDEBE9; }
.admin-main { padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 1400px; }
.page-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 12px; }
.page-title span { font-size: 14px; font-weight: 400; color: var(--muted-2); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.panel h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.stat { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; border-inline-end: 1px solid var(--line-2); }
.stat:last-child { border-inline-end: none; }
.stat span { font-size: 13px; color: var(--muted-2); }
.stat b { font-size: 26px; font-weight: 600; color: var(--ink); }
.stat.bad b { color: var(--danger); } .stat.warn b { color: #A86E00; } .stat.ok b { color: var(--leaf); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { background: var(--soft); color: var(--muted-2); font-size: 12px; font-weight: 500; text-align: start; padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl td { padding: 11px 14px; border-top: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr:first-child td { border-top: none; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: var(--soft); }
.tbl tr.row-bad td { background: #FFF7F6; } .tbl tr.row-ok td { background: #F6FAEF; }
.tbl .empty { padding: 24px; }
.sub { font-size: 12px; color: var(--muted-2); }
.chip-s { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 99px; background: var(--soft); color: var(--muted); white-space: nowrap; }
.chip-s.bad { background: var(--danger-soft); color: var(--danger); }
.chip-s.warn { background: var(--accent-soft); color: var(--accent-ink); }
.chip-s.ok { background: var(--leaf-soft); color: var(--leaf); }
.toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.toolbar .field { min-width: 150px; }
.search { height: 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 0 14px; min-width: min(360px, 100%); flex: 1; background: #fff; outline: none; }
.search:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(4, 118, 123, .15); }
.search.big { height: 54px; font-size: 18px; max-width: 460px; border: 2px solid var(--brand); }
.last-scan { font-weight: 600; color: var(--leaf); font-size: 16px; }
.mini { width: 90px; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; }
.mini-date { height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; }
.mid { width: 100%; max-width: 360px; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; }
.ta { width: 100%; min-width: 280px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; line-height: 1.6; }
.picker-wrap { display: flex; flex-direction: column; gap: 6px; }
.picker:empty { display: none; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { border: none; background: transparent; padding: 8px 14px; border-radius: 9px; font-weight: 500; color: var(--muted); }
.seg button.sel { background: var(--ink); color: #fff; }
.banner { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid #F3D9A0; border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.banner.ok { background: var(--leaf-soft); color: var(--leaf); border-color: #D2E5B5; }
.msgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.msg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.msg p { margin: 0; font-size: 14px; line-height: 1.7; white-space: pre-line; }
.pl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 6px 18px; max-width: 680px; }
.pl-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.pl-row.sum { font-weight: 600; border-bottom: 1px solid var(--line); }
.pl-row.total { font-size: 18px; color: var(--ink); border-bottom: none; font-weight: 700; }
.bar { position: relative; width: 120px; height: 22px; background: var(--soft); border-radius: 99px; overflow: hidden; }
.bar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--mint-2); }
.bar span { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 600; line-height: 22px; color: var(--ink); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.perm { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 14px; background: #fff; }
.perm:has(input:checked) { border-color: var(--brand); background: var(--mint); }
.perm input { width: 20px; height: 20px; accent-color: var(--brand); flex-shrink: 0; }
.perm.locked { background: var(--soft); color: var(--muted-2); cursor: not-allowed; border-style: dashed; }
.perm small { font-size: 11px; }
.stat b, .pl-row b, .kpi b, .big-num { direction: ltr; unicode-bidi: isolate; }
.admin .tbl td { unicode-bidi: plaintext; }
.admin .tbl td { text-align: start; }
@media (max-width: 900px) {
  .admin-wrap { grid-template-columns: 1fr; }
  .admin-nav { flex-direction: row; overflow-x: auto; padding: 8px; }
  .admin-nav button { white-space: nowrap; flex-shrink: 0; }
  .admin-nav button .lbl small { display: none; }
  .admin-main { padding: 16px 14px 40px; }
  .stat { border-inline-end: none; border-bottom: 1px solid var(--line-2); }
}

/* ───────────── Customer display (second screen) ───────────── */
body.display { background: var(--ink); color: #fff; min-height: 100vh; display: flex; flex-direction: column; }
.disp-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 36px; border-bottom: 1px solid rgba(255,255,255,.1); }
.disp-head img { height: 60px; }
.disp-head span { font-size: 22px; color: #9FC3C0; }
.disp-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; padding: 30px 36px; }
.disp-lines { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 8px 24px; overflow: auto; }
.disp-line { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 22px; }
.disp-line small { display: block; font-size: 15px; color: #9FC3C0; }
.disp-total { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.disp-total .lbl { font-size: 22px; color: #9FC3C0; }
.disp-total .amt { font-size: 80px; font-weight: 700; line-height: 1; }
.disp-total .vat { font-size: 18px; color: #9FC3C0; }
.disp-member { background: var(--accent); color: #fff; border-radius: 18px; padding: 18px 22px; font-size: 18px; line-height: 1.7; }
.disp-idle { flex: 1; display: grid; place-items: center; text-align: center; font-size: 30px; padding: 40px; color: #9FC3C0; }
.disp-idle img { width: min(560px, 80vw); margin-bottom: 18px; }
.disp-idle p { margin: 0; }

/* ───────────── Customer page ───────────── */
body.client { background: var(--ink); min-height: 100vh; }
.client-wrap { max-width: 460px; margin: 0 auto; padding: 28px 16px 40px; display: flex; flex-direction: column; gap: 18px; }
.client-logo { text-align: center; padding: 8px 0 4px; }
.client-logo img { width: 230px; }
.client-card { background: var(--surface); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.client-card h1 { margin: 0; font-size: 24px; font-weight: 600; color: var(--ink); }
.big-num { font-size: 56px; font-weight: 700; color: var(--brand); line-height: 1; text-align: right; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--soft); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.kpi span { font-size: 12px; color: var(--muted-2); }
.kpi b { font-size: 22px; font-weight: 600; color: var(--ink); text-align: right; }
.client-foot { text-align: center; font-size: 13px; color: #9FC3C0; line-height: 1.8; }

/* Language switch */
.lang-switch { height: 34px; min-width: 42px; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.28); background: transparent;
               color: #fff; font-weight: 600; font-size: 14px; }
.lang-switch:hover { background: rgba(255,255,255,.1); }
.login-brand .lang-switch, .client-logo .lang-switch { margin-top: 6px; }
.client-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.who-chip { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--soft); color: var(--muted); white-space: nowrap; }
.who-chip.me { background: var(--mint); color: var(--ink); font-weight: 500; }

/* Numbers and amounts always read left to right, also inside Arabic pages */
.cart-row > span:not(:first-child), .summary dd, .pay-amt, .pay-due, .pay-lines b, .list-row > b, .pk .price,
.disp-line > b, .disp-total .amt, .row-between > b, .alloc .num { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .cart-row > span:not(:first-child) { text-align: left; }
html[dir="rtl"] .cart-row > span:nth-child(2) { text-align: center; }
html[dir="rtl"] .summary dd, html[dir="rtl"] .pay-due, html[dir="rtl"] .disp-total .amt { text-align: right; }
html[dir="rtl"] .pay-amt { justify-content: flex-start; }
html[dir="rtl"] .alloc .num { text-align: right; }
.pm { padding: 0 6px; text-align: center; line-height: 1.2; }

/* Supervisor PIN (above any open window) */
.pin-back { z-index: 200; }
.pin-box .pin-msg { margin: 0 0 4px; font-weight: 600; }
.pin-box .pin-msg.err { color: var(--danger, #B42318); }
.pin-input { width: 100%; font-size: 26px; letter-spacing: .5em; text-align: center; padding: 10px; margin: 8px 0 12px; }
.pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; direction: ltr; }
.pin-who-l { display: grid; gap: 4px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.pin-who-l select { width: 100%; font-size: 15px; padding: 8px 10px; }
.pin-key { height: 52px; font-size: 20px; font-weight: 600; justify-content: center; }

/* Account security */
.sec-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.sec-row:first-of-type { border-top: 0; }
.sec-row .grow { flex: 1; }
.totp-wrap { display: flex; gap: 16px; align-items: center; margin: 8px 0 12px; flex-wrap: wrap; }
.totp-qr svg { width: 168px; height: 168px; display: block; border-radius: 8px; border: 1px solid var(--line); }
.totp-key { display: inline-block; direction: ltr; font-size: 15px; letter-spacing: .06em; background: var(--mint); padding: 6px 10px; border-radius: 6px; margin-top: 6px; }
ol.steps { margin: 0 0 8px; padding-inline-start: 20px; line-height: 1.8; }

/* Keypad / quick products switch */
.keys-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 3px; gap: 3px; }
.keys-tabs button { border: 0; background: transparent; border-radius: calc(var(--r-ctl) - 3px); height: 32px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.keys-tabs button[aria-selected="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(12, 51, 55, .12); }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 56px; gap: 8px; }
.quick-grid[hidden], .keypad[hidden] { display: none; }
.qtile { position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-ctl); padding: 5px 8px; display: grid;
  grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; column-gap: 6px; text-align: start; cursor: pointer; min-width: 0; font: inherit; color: var(--ink); }
.qtile:hover { border-color: var(--brand); background: var(--mint); }
.qtile .qn { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: start; }
.qtile .qf { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: start; }
.qtile .qp { font-size: 11.5px; font-weight: 700; color: var(--brand); direction: ltr; unicode-bidi: isolate; }
.qtile.pinned::before { content: ''; position: absolute; inset-inline-end: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.qtile.out { opacity: .5; }

/* Barcode labels (printed from Products & stock) */
@page labels-a4 { size: A4; margin: 0; }
@page labels-roll { size: 50mm 30mm; margin: 0; }
.lbl-sheet { display: grid; grid-template-columns: repeat(var(--cols), var(--w)); grid-auto-rows: var(--h); column-gap: var(--gx); row-gap: var(--gy);
  padding: var(--top) var(--side) 0; box-sizing: border-box; break-after: page; font-family: var(--font); color: #000; background: #fff; }
.lbl-sheet.labels-a4 { page: labels-a4; width: 210mm; height: 297mm; }
.lbl-sheet.labels-roll { page: labels-roll; width: 50mm; height: 30mm; padding: 0; }
.lbl { box-sizing: border-box; padding: 1.6mm 2.4mm; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.lbl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 2mm; }
.lbl-brand { font-size: 6.5pt; letter-spacing: .04em; text-transform: uppercase; color: #333; }
.lbl-price { font-size: 10.5pt; white-space: nowrap; }
.lbl-name { font-size: 8pt; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .4mm; }
.lbl-flavor { font-size: 7pt; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-bc { display: block; width: 100%; flex: 1; min-height: 0; object-fit: contain; margin-top: .6mm; }
.lbl-code { font-size: 6.5pt; text-align: center; letter-spacing: .05em; }
.lbl-none { font-size: 7pt; text-align: center; margin-top: 2mm; }
@media print {
  body.printing-labels > *:not(.print-root) { display: none !important; }
  body.printing-labels .print-root { display: block !important; }
}

/* Products tab: selection, quick star, Arabic names */
.sel-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 10px; background: var(--mint); border-radius: var(--r-ctl); font-size: 13px; }
.sel-bar > span { flex: 1; color: var(--ink); font-weight: 600; }
.tbl tr.picked td { background: #F1F8F7; }
.tbl td.num { direction: ltr; unicode-bidi: isolate; font-feature-settings: 'tnum' 1; }
.star { border: 0; background: transparent; font-size: 20px; line-height: 1; color: #C9D3D2; cursor: pointer; padding: 2px 6px; }
.star.on { color: var(--accent); }
.star:disabled { cursor: default; }
.link-btn { border: 0; background: none; padding: 0; margin-top: 2px; font: inherit; font-size: 12px; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sub.ar-name { color: var(--ink); }
.hint.warn { color: #8A5A00; background: #FFF6E5; padding: 6px 10px; border-radius: 6px; }

/* Owner home */
:root { --viz-today: #009098; --viz-lw: #B98000; }
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-ctl); margin-bottom: 14px; font-size: 14px; }
.banner.warn { background: #FFF6E5; color: #6B4600; border: 1px solid #F3DDB0; }
.banner .grow { flex: 1; }
.home-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.home-head h2 { margin: 0; font-size: 20px; }
.hkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hk { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.hk-l { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.hk-v { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.15; direction: ltr; unicode-bidi: isolate; text-align: start; }
html[dir="rtl"] .hk-v { text-align: right; }
.hk-v small { font-size: 13px; font-weight: 500; color: var(--muted); }
.hk-s { font-size: 12px; color: var(--muted); }
.delta { font-size: 12px; color: var(--muted); }
.delta.up .n, .delta.up > span:first-child { color: #2E7D32; font-weight: 700; }
.delta.down .n, .delta.down > span:first-child { color: var(--danger); font-weight: 700; }
.legend { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .grow { flex: 1; }
.k { display: inline-block; width: 16px; height: 0; border-top: 2px dashed var(--viz-lw); }
.k.k-today { border: 0; height: 3px; background: var(--viz-today); border-radius: 2px; }
.k.k-today.box { width: 10px; height: 10px; border-radius: 3px; }
.chart-wrap { position: relative; }
.hchart { width: 100%; height: auto; display: block; overflow: visible; outline: none; direction: ltr; }
.hchart .grid { stroke: #E6ECEB; stroke-width: 1; }
.hchart .base { stroke: #B8C4C3; stroke-width: 1; }
.hchart .ax { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.hchart .hbar { fill: var(--viz-today); }
.hchart .lw { fill: none; stroke: var(--viz-lw); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.hchart .lw-dot { fill: var(--viz-lw); stroke: var(--surface); stroke-width: 2; }
.hchart .hair { stroke: #8A9998; stroke-width: 1; }
.hchart:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
.tip { position: absolute; top: 8px; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(12, 51, 55, .14); padding: 8px 10px; font-size: 12px; pointer-events: none; }
.tip-h { color: var(--muted); margin-bottom: 4px; }
.tip-r { display: flex; align-items: center; gap: 8px; }
.tip-r b { direction: ltr; unicode-bidi: isolate; font-size: 13px; color: var(--ink); min-width: 52px; }
.tip-r span { color: var(--muted); }
.home-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.barlist { display: flex; flex-direction: column; gap: 10px; }
.bl-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bl-label { min-width: 0; font-size: 13px; }
.bl-label span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.bl-label small { color: var(--muted); font-size: 11.5px; }
.bl-track { height: 10px; background: transparent; }
.bl-bar { height: 10px; background: var(--viz-today); border-radius: 0 4px 4px 0; }
html[dir="rtl"] .bl-bar { border-radius: 4px 0 0 4px; margin-inline-start: 0; }
.bl-val { font-size: 13px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.alert-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.alert-tile { text-align: start; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.alert-tile b { font-size: 22px; }
.alert-tile span { font-size: 12px; color: var(--muted); }
.alert-tile.bad { border-color: #F2CBC6; background: var(--danger-soft); }
.alert-tile.bad b { color: var(--danger); }
.alert-tile.warn { border-color: #F3DDB0; background: #FFF8EA; }
.alert-tile.warn b { color: #8A5A00; }
.alert-tile.zero b { color: var(--muted-2); }

.banner.okb { background: #EAF5EC; color: #1E5B2A; border: 1px solid #CDE6D2; }
code.cmd { display: block; background: var(--ink); color: #E6F2F1; padding: 10px 14px; border-radius: 8px; font-size: 13px; overflow-x: auto; white-space: nowrap; }

/* CRM / categories */
.seg-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.seg-filter button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }
.seg-filter button small { color: var(--muted); font-size: 11.5px; direction: ltr; unicode-bidi: isolate; }
.seg-filter button.sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg-filter button.sel small { color: #CFE7E5; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 12px 0; font-size: 13px; color: var(--muted); }
.warn-t { color: #8A5A00 !important; }
.h3 { font-size: 15px; margin: 16px 0 8px; }
tr.click { cursor: pointer; }
tr.click:hover td { background: #F4F9F8; }

/* Cart line: − qty + and delete */
.cart-row .qty { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.cart-row .qb { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 16px; line-height: 1; cursor: pointer; color: var(--ink); padding: 0; }
.cart-row .qb:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.cart-row .qb:disabled { opacity: .35; cursor: default; }
.cart-row .qv { min-width: 22px; text-align: center; font-weight: 600; }
.cart-row .line-x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted-2); cursor: pointer; font-size: 13px; padding: 0; }
.cart-row .line-x:hover { background: var(--danger-soft); color: var(--danger); }
.cart-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Sale screen: category chips, top-bar buttons, card digits, income table */
.quick-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.quick-cats[hidden] { display: none; }
.quick-cats button { flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.quick-cats button.sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.quick-grid { max-height: 248px; overflow-y: auto; align-content: start; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #CFE7E5; cursor: pointer; }
.tb-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.tb-btn[hidden] { display: none; }
.last4-row { display: flex; align-items: center; gap: 10px; }
.last4-row[hidden] { display: none; }
.last4-row label { font-size: 13px; color: var(--muted); flex: 1; }
.last4 { width: 110px; font-size: 18px; letter-spacing: .3em; text-align: center; padding: 8px; }
.tbl.income td.num, .tbl.income th { text-align: end; }
.tbl.income th:first-child { text-align: start; }
.tbl.income tr.tot td { font-weight: 700; border-top: 2px solid var(--line); }

/* A4 documents (invoice / packing slip / delivery note) */
@page doc-a4 { size: A4; margin: 14mm 12mm; }
.doc-a4 { page: doc-a4; font-family: var(--font); color: #111; font-size: 12px; line-height: 1.45; max-width: 186mm; margin: 0 auto; background: #fff; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid #04767B; padding-bottom: 10px; }
.doc-logo { width: 46mm; }
.doc-legal { text-align: left; font-size: 11px; color: #333; }
.doc-legal b { font-size: 13px; color: #111; }
.doc-title { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px; }
.doc-title h1 { margin: 0; font-size: 22px; color: #04767B; }
.doc-title span { color: #666; font-size: 13px; letter-spacing: .04em; }
.doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 16px; background: #F3F7F6; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
.doc-meta div { display: flex; flex-direction: column; } .doc-meta span { font-size: 10.5px; color: #666; }
.doc-meta .void b { color: #B42318; font-size: 14px; }
.doc-items { width: 100%; border-collapse: collapse; }
.doc-items th { background: #04767B; color: #fff; font-weight: 600; font-size: 11px; padding: 6px 8px; text-align: start; }
.doc-items td { border-bottom: 1px solid #E2E8E7; padding: 6px 8px; vertical-align: top; }
.doc-items td.n, .doc-items th:not(:nth-child(2)) { text-align: center; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.doc-items .sub { font-size: 10.5px; color: #666; }
.doc-totals { width: 82mm; margin-inline-start: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.doc-totals div { display: flex; justify-content: space-between; } .doc-totals b { direction: ltr; unicode-bidi: isolate; }
.doc-totals .grand { border-top: 2px solid #111; padding-top: 6px; font-size: 15px; }
.doc-totals .dpay { font-size: 11px; color: #444; display: flex; justify-content: space-between; }
.doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; font-size: 12px; }
.doc-foot { margin-top: 24px; border-top: 1px solid #E2E8E7; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 10.5px; color: #555; }
.doc-bc { width: 58mm; height: 12mm; }
@media print {
  body.printing-doc > *:not(.print-root) { display: none !important; }
  body.printing-doc .print-root { display: block !important; }
}
/* Customer invoice page */
body.invoice-page { background: var(--ground); }
.invoice-wrap { max-width: 860px; margin: 24px auto; background: #fff; border-radius: 12px; padding: 28px max(16px, 3vw); box-shadow: 0 8px 30px rgba(12, 51, 55, .08); }
.invoice-actions { display: flex; justify-content: center; margin-top: 18px; }
@media print { .invoice-wrap { box-shadow: none; margin: 0; padding: 0; } .invoice-actions { display: none; } }

/* Invoices management */
.toolbar.filters { flex-wrap: wrap; align-items: flex-end; }
.toolbar.filters .field { margin: 0; }
.th-sort { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; font-weight: 600; }
.th-sort.on { color: var(--brand); }
.inv-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.inv-act { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); text-align: start; }
.inv-act:hover { border-color: var(--brand); color: var(--brand); }
.inv-act.danger { color: var(--danger); } .inv-act.danger:hover { border-color: var(--danger); }
.inv-pane { border-top: 1px solid var(--line); padding-top: 12px; }
.preview-receipt { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; justify-content: center; }
.preview-doc { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; overflow-x: auto; }
.toolbar > select, .toolbar select { height: 40px; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 0 10px; background: #fff; min-width: 140px; }
.toolbar > select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(4, 118, 123, .15); }

/* Reports center */
.rep-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.rep-list { position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; max-height: calc(100vh - 100px); overflow-y: auto; }
.rep-group p { margin: 10px 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted-2); letter-spacing: .02em; }
.rep-group button { display: block; width: 100%; text-align: start; border: 0; background: transparent; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.rep-group button:hover { background: var(--soft); }
.rep-group button.sel { background: var(--mint); color: var(--brand); font-weight: 600; }
.rep-main { min-width: 0; transition: opacity .15s; }
.rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rep-head h2 { margin: 0 0 2px; font-size: 19px; }
.tbl.rep th.num, .tbl.rep td.num { text-align: end; }
.tbl.rep tfoot td { font-weight: 700; background: var(--soft); border-top: 2px solid var(--line); }
.rep-print .doc-items { font-size: 10.5px; }
.rep-print .doc-items tfoot td { border-top: 2px solid #111; }
@media (max-width: 900px) { .rep-wrap { grid-template-columns: 1fr; } .rep-list { position: static; max-height: none; } }

/* Permission matrix, notification center */
.tbl.matrix td { vertical-align: top; min-width: 110px; }
.tbl.matrix td:first-child { min-width: 120px; }
.mperm { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.35; margin-bottom: 6px; cursor: pointer; }
.mperm input { margin-top: 2px; flex: none; }
.mperm.locked { color: var(--muted-2); cursor: default; }
.mperm small { color: var(--danger); }
.nc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.panel.nc { margin: 0; border-top: 4px solid var(--line); }
.panel.nc.bad { border-top-color: var(--danger); } .panel.nc.warn { border-top-color: var(--accent); } .panel.nc.info { border-top-color: var(--brand); }
.panel.nc.zero { opacity: .7; }
.nc-head { display: flex; align-items: center; gap: 10px; } .nc-head h2 { flex: 1; margin: 0; font-size: 15px; }
.nc-n { font-size: 20px; direction: ltr; }
.nc-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.nc-list li { border-bottom: 1px dashed var(--line); padding-bottom: 5px; }

.tb-admin { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 10px; background: var(--accent); color: #fff;
  font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.tb-admin:hover { background: #D48B00; }
.tb-admin[hidden] { display: none; }

/* Customer file (Member contact management) */
.mf { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 12px; }
.mf-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 16px; }
.mf-head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.mf-head .sub { color: #9FC3C0; font-size: 13px; }
.mf-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.mf-table .tr { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-bottom: 1px solid var(--line-2); min-height: 40px; }
.mf-table .tr:last-child { border-bottom: 0; }
.mf-table .tr > span { display: flex; align-items: center; padding: 0 14px; font-size: 13.5px; color: var(--muted); background: var(--soft); border-inline-end: 1px solid var(--line-2); }
.mf-table .tr > div { display: flex; align-items: center; padding: 4px 10px; font-weight: 600; color: var(--ink); font-size: 14px; gap: 8px; }
.mf-table .tr input, .mf-table .tr select { width: 100%; height: 32px; border: 1px solid transparent; border-radius: 7px; background: transparent; padding: 0 8px; font: inherit; font-weight: 600; color: var(--ink); }
.mf-table .tr input:hover, .mf-table .tr select:hover { border-color: var(--line); }
.mf-table .tr input:focus, .mf-table .tr select:focus { border-color: var(--brand); background: #fff; outline: none; }
.mf-table .th { background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600; min-height: 32px; }
.mf-table .th > span, .mf-table .th > div { background: transparent; color: #fff; border: 0; font-weight: 600; font-size: 12.5px; }
.mf-side { display: flex; flex-direction: column; gap: 6px; }
.mf-side .tb { min-height: 42px; }
.mf-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mf-stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.mf-stat span { font-size: 12px; color: var(--muted-2); }
.mf-stat b { font-size: 20px; color: var(--ink); font-weight: 700; }
.mf-stat small { font-size: 12px; color: var(--muted); }
.mf-stat.hl { background: var(--leaf-soft); border-color: #CFE3B5; }
.mf-stat.hl b { color: var(--leaf); }
.mf-stat.fz { background: #E4EEF7; border-color: #C5D8EA; }
.mf-stat.fz b { color: #24547E; }
.mf-sec { grid-column: 1 / -1; }
.mf-sec h4 { margin: 4px 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.confirm-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; font-size: 14.5px; }
.confirm-card span { color: var(--muted); }
.confirm-card b { color: var(--ink); }
.confirm-card .big { color: var(--brand); font-size: 17px; }

.confirm-layer { z-index: 60; background: rgba(8, 32, 35, .35); }
.list-row.sel { background: var(--mint); }
.till .cart-row .name { overflow: hidden; }
.till .cart-row .name b, .till .cart-row .name small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.till .cart-row .name b .tag { vertical-align: 2px; }

/* Admin: product name opens the edit window */
.name-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand); cursor: pointer; text-align: start; }
.name-btn:hover { text-decoration: underline; }
/* Admin: packages */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pkg-card { text-align: start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font: inherit; color: var(--text); }
.pkg-card:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(12, 51, 55, .08); }
.pkg-card.off { opacity: .6; }
.pkg-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pkg-top b { font-size: 17px; color: var(--ink); }
.pkg-price { font-size: 24px; font-weight: 700; color: var(--brand); }
/* Admin: permissions as cards with switches */
.perm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.perm-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.perm-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); margin-bottom: 2px; }
.perm-head b { color: var(--ink); font-size: 14.5px; }
.perm-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.perm-row:hover { background: var(--soft); }
.perm-row.on { background: var(--mint); }
.perm-row span { display: flex; flex-direction: column; line-height: 1.3; }
.perm-row b { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.perm-row small { font-size: 11.5px; color: var(--muted-2); }
.perm-row.locked { cursor: not-allowed; opacity: .55; }
.switch { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch:checked { background: var(--brand); }
.switch:checked::after { inset-inline-start: 19px; }
.switch:disabled { cursor: not-allowed; }

/* ═════════════ Login ═════════════ */
/* (sign-in styles: see "Sign in v3" at the end) */

/* ═════════════ Sales screen — the old till's split ═════════════
   Left: search, message line, customer line, invoice lines, totals. Right: one column of buttons ending with Pay. */
html[lang="en"] { --font: 'Inter', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; }
.pos { height: 100vh; overflow: hidden; background: var(--ground); }
.till { flex: 1; min-height: 0; display: grid; gap: 10px; padding: 0 10px 10px;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 460px); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top" "main col"; }
.t-top { grid-area: top; margin: 0 -10px; }
.t-main { grid-area: main; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.t-col { grid-area: col; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)) 4px repeat(3, minmax(0, 1fr)) minmax(0, 1fr) minmax(0, 1.7fr); gap: 6px; min-height: 0; }
.t-gap { display: block; }
.t-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-height: 0; }
.t-search { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
.t-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.t-field > label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.t-input { position: relative; }
.t-input input { width: 100%; height: 42px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; padding-inline: 40px 12px;
  font-size: 15px; font-weight: 500; color: var(--ink); outline: none; }
#item-input { border-color: var(--brand); }
.t-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(4, 118, 123, .14); }
.t-input input::placeholder { color: var(--muted-2); font-weight: 400; }
.t-ico { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--brand); pointer-events: none; }
.suggest { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(12, 51, 55, .18); max-height: 380px; overflow-y: auto; padding: 4px; min-width: 340px; }
.sg { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: 100%; border: 0; background: transparent;
  text-align: start; padding: 9px 10px; border-radius: 8px; font: inherit; color: var(--text); cursor: pointer; }
.sg:hover, .sg.on { background: var(--mint); }
.sg b { font-weight: 600; color: var(--ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg small { font-size: 12px; color: var(--muted-2); }
.sg .p { font-weight: 700; color: var(--ink); }
.sg .q { font-size: 12px; color: var(--muted-2); }
.sg .q.out { color: var(--danger); }
.sg-empty { padding: 12px; color: var(--muted-2); font-size: 13px; }
.t-msg { height: 36px; flex: none; display: flex; align-items: center; padding: 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-msg.ok { color: var(--leaf); border-color: #CFE3B5; background: var(--leaf-soft); }
.t-msg.err { color: var(--danger); border-color: #F2CBC6; background: var(--danger-soft); }
.cust-line { flex: none; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13.5px; color: var(--muted-2); overflow: hidden; }
.cust-line.has { background: var(--accent-soft); border-color: #F3D9A0; color: var(--accent-ink); padding-inline-end: 6px; }
.cust-line .cl-name { font-weight: 700; color: var(--ink); white-space: nowrap; }
.cust-line .cl-items { flex: 1; min-width: 0; display: flex; gap: 6px; overflow: hidden; }
.cust-line .cl-i { background: #fff; border-radius: 7px; padding: 3px 8px; white-space: nowrap; font-size: 12.5px; color: var(--ink); }
.cust-line .cl-i b { font-weight: 700; }
.cust-line .cl-i.hl { background: var(--leaf-soft); color: var(--leaf); }
.cust-line .cl-i.fz { background: #E4EEF7; color: #24547E; }
.cust-line .cl-i.warn { background: var(--danger-soft); color: var(--danger); }
.cust-line .btn-sm { height: 32px; padding: 0 10px; font-size: 12.5px; flex: none; }
.cust-line .x-btn { flex: none; }
.till .cart { flex: 1; min-height: 0; border-radius: 10px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.till .cart-head, .till .cart-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 86px 76px 92px 36px; gap: 8px; padding: 0 12px; align-items: center; }
.till .cart-head { height: 38px; background: #5E6B6C; color: #fff; font-size: 14px; font-weight: 700; border-bottom: 0; }
.till .cart-rows { --row: 50px; flex: 1; overflow-y: auto;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), #E3E9E8 calc(var(--row) - 1px) var(--row));
  background-attachment: local; }
.till .cart-row { height: var(--row); border-bottom: 0; background: transparent; font-size: 15px; width: 100%; cursor: pointer; position: relative; }
.till .cart-row:hover { background: rgba(4, 118, 123, .05); }
.till .cart-row.sel { background: var(--mint); }
.till .cart-row.sel::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--brand); }
.till .cart-row .name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; overflow: hidden; }
.till .cart-row .name b { font-weight: 600; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: start; }
.till .cart-row .name small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--muted-2); }
.till .cart-head span:not(:first-child), .till .cart-row > span:not(:first-child) { text-align: center; }
.till .cart-row .amt { font-weight: 700; color: var(--ink); }
.qty-in { width: 64px; height: 34px; border: 1.5px solid var(--line); border-radius: 8px; text-align: center; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); background: #fff; }
.qty-in:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(4, 118, 123, .14); }
.till .cart-row .line-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #F2CBC6; background: var(--danger-soft); color: var(--danger); font-size: 13px; cursor: pointer; }
.till .cart-row .line-x:hover { background: var(--danger); color: #fff; }
.cart-row .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; margin-inline-start: 6px; vertical-align: 1px; }
.cart-row .tag.cr { background: var(--leaf-soft); color: var(--leaf); }
.cart-row .tag.pkg { background: var(--accent-soft); color: var(--accent-ink); }
.cart-row .sw { border: 1px solid var(--line); background: #fff; border-radius: 6px; font-size: 11px; padding: 1px 6px; margin-inline-start: 6px; cursor: pointer; color: var(--brand); }
.till .cart-empty { height: calc(var(--row) * 2); display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted-2); font-size: 14px; }
.till .cart-empty .ico { color: var(--brand); opacity: .5; }
.t-totals { flex: none; margin: 0; display: grid; grid-template-rows: repeat(4, 40px); gap: 5px; }
.t-totals div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
.t-totals dt, .t-totals dd { margin: 0; display: flex; align-items: center; padding: 0 16px; border-radius: 9px; background: #E4E8E8; font-size: 15px; }
.t-totals dt { color: var(--ink); font-weight: 500; }
.t-totals dd { justify-content: flex-end; font-weight: 700; color: var(--ink); }
.t-totals dd.neg { color: var(--danger); }
.t-totals .due dt, .t-totals .due dd { background: var(--ink); color: #fff; }
.t-totals .due dd { font-size: 19px; }
.tb { min-height: 0; border-radius: 10px; border: 1px solid var(--brand-dark); background: var(--brand); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 8px; cursor: pointer; text-align: center; line-height: 1.2; position: relative; }
.tb:hover { background: var(--brand-dark); }
.tb:active { transform: translateY(1px); }
.tb-pk { background: var(--accent); border-color: #C98400; }
.tb-pk:hover { background: #D48B00; }
.tb-red { background: var(--danger); border-color: #8F1B12; }
.tb-red:hover { background: #9A1D14; }
.tb-dark { background: var(--ink); border-color: var(--ink); }
.tb-dark:hover { background: var(--ink-2); }
.tb .badge { background: #fff; color: var(--accent-ink); border-radius: 99px; font-size: 11.5px; font-weight: 700; padding: 1px 8px; }
.t-col .pay { min-height: 0; border-radius: 10px; border: 0; background: var(--leaf); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 14px; cursor: pointer; }
.t-col .pay:hover { background: #4E7717; }
.t-col .pay-top { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 700; }
.t-col .pay-amt { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.t-col .pay-amt span { font-size: clamp(20px, 2vw, 30px); font-weight: 700; }
.t-col .pay.empty { background: var(--mint); color: var(--muted-2); }
.t-col .pay.empty kbd { border-color: var(--mint-2); color: var(--muted-2); }
.zr { display: flex; flex-direction: column; gap: 12px; }
.zr-total { background: var(--ink); color: #fff; border-radius: 14px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; }
.zr-total span { color: #9FC3C0; }
.zr-total b { font-size: 30px; }
.zr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.zr-m { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.zr-m span { font-size: 12.5px; color: var(--muted-2); }
.zr-m b { font-size: 19px; color: var(--ink); }
.zr-m.zero b { color: var(--muted-2); font-weight: 500; }

/* Payment window */
.pw { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
.pw-due { background: var(--ink); color: #fff; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.pw-due span { color: #9FC3C0; font-size: 13px; }
.pw-due b { font-size: 34px; font-weight: 700; }
.pw-due .row-between { color: #CFE3E0; font-size: 13.5px; }
.pw-left { background: var(--soft); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pw-left .big { font-size: 20px; font-weight: 700; color: var(--ink); }
.pw-left .ok { color: var(--leaf); }
.pw-left .bad { color: var(--danger); }
.pw-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-m { height: 42px; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; }
.pw-m:hover { border-color: var(--brand); }
.pw-m.sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.pw-split { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); font-weight: 500; }
.pw-rows { display: flex; flex-direction: column; gap: 8px; }
.pw-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 120px; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.pw-row b { color: var(--ink); }
.pw-row input { height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; font: inherit; font-size: 16px; font-weight: 600; text-align: end; width: 100%; }
.pw-row input:focus { border-color: var(--brand); outline: none; }
.pw-row .last4 { text-align: center; letter-spacing: .2em; }
.pw-hint { font-size: 13px; color: var(--muted-2); margin: 0; }


@media (max-height: 820px) {
  .till { gap: 8px; padding: 0 8px 8px; }
  .t-top { margin: 0 -8px; }
  .t-input input { height: 38px; font-size: 14.5px; }
  .t-msg { height: 32px; font-size: 13.5px; }
  .cust-line { min-height: 40px; }
  .till .cart-rows { --row: 44px; }
  .t-totals { grid-template-rows: repeat(4, 32px); gap: 4px; }
  .t-totals dt, .t-totals dd { font-size: 14px; }
  .tb { font-size: 14px; }
  .statusbar { display: none; }
}
@media (max-height: 660px) {
  .topbar.t-top { height: 46px; }
  .till .cart-row .name small { display: none; }
  .till .cart-rows { --row: 38px; }
  .t-totals { grid-template-rows: repeat(4, 28px); }
  .tb { font-size: 13px; }
}
@media (max-width: 1100px) {
  .till { grid-template-columns: minmax(0, 1fr) 260px; }
  .t-search { grid-template-columns: 1fr; }
  .till .cart-head, .till .cart-row { grid-template-columns: minmax(0, 1fr) 70px 70px 0 76px 30px; gap: 6px; }
  .till .cart-head span:nth-child(4), .till .cart-row > span:nth-child(4) { visibility: hidden; }
  .topbar-title, .t-top .tb-item { display: none; }
  .pw { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pos { height: auto; min-height: 100vh; overflow: visible; }
  .till { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "top" "main" "col"; }
  .till .cart { min-height: 300px; }
  .t-col { grid-template-rows: none; grid-auto-rows: 50px; }
  .t-col .t-gap { display: none; }
  .t-pair-big { grid-row: span 2; }
  .till .cart-head, .till .cart-row { grid-template-columns: minmax(0, 1fr) 70px 76px 30px; }
  .till .cart-head span:nth-child(3), .till .cart-head span:nth-child(4), .till .cart-row > span:nth-child(3), .till .cart-row > span:nth-child(4) { display: none; }
  .t-top .tb-clock, .t-top .online { display: none; }
  .pw-row { grid-template-columns: 1fr 1fr; }
  .cust-line { flex-wrap: wrap; }
}

/* Invoice lines: light grid, tighter rows */
.till .cart-head, .till .cart-row { gap: 0; padding: 0; }
.till .cart-head > span, .till .cart-row > span, .till .cart-row > .line-x { padding: 0 10px; height: 100%; display: flex; align-items: center; border-inline-start: 1px solid #E6ECEB; }
.till .cart-head > span { border-inline-start-color: rgba(255,255,255,.18); }
.till .cart-head > span:first-child, .till .cart-row > span:first-child { border-inline-start: 0; }
.till .cart-head span:not(:first-child), .till .cart-row > span:not(:first-child) { justify-content: center; }
.till .cart-row > .line-x { border: 0; margin: auto; height: 26px; width: 26px; padding: 0; justify-content: center; }
.till .cart-head { height: 32px; font-size: 13px; }
.till .cart-rows { --row: 38px; }
.till .cart-row { font-size: 14px; }
.till .cart-row .name { justify-content: center; flex-direction: row; align-items: center; gap: 8px; }
.till .cart-row .name b { flex: none; max-width: 70%; }
.till .cart-row .name small { flex: 1; min-width: 0; }
.qty-in { height: 28px; width: 58px; font-size: 14px; }
@media (max-height: 820px) { .till .cart-rows { --row: 34px; } }
@media (max-height: 660px) { .till .cart-rows { --row: 32px; } }

/* Payment window: method buttons + rows + summary */
.pm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
.pm-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pm-btn { height: 54px; border-radius: 10px; border: 2px solid transparent; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: #fff; background: #5E6B6C; }
.pm-btn:hover { filter: brightness(1.08); }
.pm-btn.sel { outline: 3px solid var(--ink); outline-offset: 2px; }
.pm-cash { background: #3E9B4F; } .pm-card { background: #C0392B; } .pm-benefit { background: #E3E8E8; color: var(--ink); } .pm-talabat { background: #F26B21; }
.pm-web { background: #E3E8E8; color: var(--ink); } .pm-app { background: #E3E8E8; color: var(--ink); } .pm-voucher { background: var(--accent); }
.pm-credit { background: #24409B; } .pm-multi { background: #1E2526; }
.pm-work { display: flex; flex-direction: column; gap: 10px; }
.pm-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted-2); text-align: center; }
.pm-row { position: relative; background: #EEF1F7; border: 1px solid #D9DEEA; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pm-row-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.pm-row-head b { color: var(--ink); } .pm-row-head span { font-weight: 700; color: var(--brand); }
.pm-x { position: absolute; top: 6px; inset-inline-end: 6px; }
.pm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pm-f input, .pm-f select { height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
.pm-f input:focus, .pm-f select:focus { border-color: var(--brand); outline: none; }
.pm-add { align-self: stretch; height: 42px; }
.pm-sum { background: #C0392B; color: #fff; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.pm-sum div { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 10px; }
.pm-sum div:last-child { border-bottom: 0; padding-bottom: 0; }
.pm-sum span { font-size: 12.5px; opacity: .85; }
.pm-sum b { font-size: 24px; }
.pm-sum .ok b { color: #D9F7C8; }
@media (max-width: 900px) { .pm-wrap { grid-template-columns: 1fr; } .pm-two { grid-template-columns: 1fr; } }

/* New customer: choose sale or subscription first */
.nm { display: flex; flex-direction: column; gap: 10px; }
.nm-step { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.nm-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nm-opt { display: flex; align-items: center; gap: 12px; text-align: start; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font: inherit; cursor: pointer; color: var(--ink); }
.nm-opt:hover { border-color: var(--mint-2); background: var(--soft); }
.nm-opt.sel { border-color: var(--brand); background: var(--mint); }
.nm-opt span:last-child { display: flex; flex-direction: column; gap: 2px; }
.nm-opt b { font-size: 16px; }
.nm-opt small { font-size: 12.5px; color: var(--muted-2); }
.nm-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; position: relative; }
.nm-opt.sel .nm-dot { border-color: var(--brand); }
.nm-opt.sel .nm-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); }
.nm-note { margin: 0; margin-inline-end: auto; font-size: 13px; color: var(--danger); }

/* Invoice grid: faint rows and columns across the whole table, compact */
.till .cart-rows { --row: 34px; background-image: none; }
.till .cart-head > span, .till .cart-row > span, .till .cart-row > .line-x { border-inline-start: 1px solid #E9EEED; }
.till .cart-row { border-bottom: 1px solid #E9EEED; font-size: 14px; }
.till .cart-row.ph { cursor: default; pointer-events: none; background: transparent; }
.till .cart-row > span:nth-child(5) { border-inline-end: 1px solid #E9EEED; }
.till .cart-row.ph > span:last-child { border-inline-start: 0; }
.till .cart-head > span:nth-child(5) { border-inline-end: 1px solid rgba(255,255,255,.18); }
.till .cart-head > span:last-child { border-inline-start: 0; }
.till .cart-row > .line-x { border: 1px solid #F2CBC6; }
.till .cart-head, .till .cart-row { grid-template-columns: minmax(0, 1fr) 76px 80px 70px 86px 34px; }
.till .cart-head { height: 30px; font-size: 13px; }
.qty-in { height: 26px; width: 54px; font-size: 13.5px; border-radius: 6px; }
.till .cart-row > .line-x { height: 24px; width: 24px; font-size: 12px; }
@media (max-height: 820px) { .till .cart-rows { --row: 32px; } }
@media (max-height: 660px) { .till .cart-rows { --row: 30px; } }

/* Header and rows share the same width: the rows' scrollbar space is kept on the header too */
.till .cart-rows { scrollbar-gutter: stable; }
.till .cart-head { scrollbar-gutter: stable; overflow-y: hidden; }
.till .cart-head > span, .till .cart-row > span { justify-content: center; text-align: center; }
.till .cart-head > span:first-child, .till .cart-row > span:first-child { justify-content: flex-start; text-align: start; }
.till .cart-row > span:nth-child(3), .till .cart-row > span:nth-child(5) { font-variant-numeric: tabular-nums; }
/* Column lines: one rule for header and rows, so they line up exactly */
.till .cart-head > *, .till .cart-row > * { border-inline-start: 0 !important; border-inline-end: 1px solid #E9EEED !important; }
.till .cart-head > * { border-inline-end-color: rgba(255,255,255,.2) !important; }
.till .cart-head > :last-child, .till .cart-row > :last-child { border-inline-end: 0 !important; }
.till .cart-row > .line-x { border: 1px solid #F2CBC6 !important; }

/* Taking products from credit: the screen shows it clearly */
.t-msg.redeem { background: var(--leaf); border-color: var(--leaf); color: #fff; font-weight: 600; justify-content: space-between; gap: 10px; padding-inline-end: 4px; }
.t-msg.redeem .rd-text { overflow: hidden; text-overflow: ellipsis; }
.t-msg.redeem .btn { height: 28px; background: #fff; color: var(--leaf); border: 0; font-weight: 700; flex: none; }
.till.redeem-mode #item-input { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(92, 138, 28, .2); background: #F6FBEF; }
.till.redeem-mode .t-ico { color: var(--leaf); }

/* ── Customer file on one screen (no page scrolling) ── */
.modal-body.mf-body { padding: 12px 16px; }
.mf { grid-template-columns: minmax(0, 1fr) 196px; gap: 8px 10px; }
.mf-head { padding: 7px 14px; border-radius: 10px; }
.mf-head h3 { font-size: 16px; }
.mf-head .sub { font-size: 12px; }
.mf-stats { gap: 6px; }
.mf-stat { padding: 5px 12px; border-radius: 10px; gap: 0; }
.mf-stat span, .mf-stat small { font-size: 11.5px; }
.mf-stat b { font-size: 16px; }
.mf .mf-table { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.mf .mf-table .th { display: none; }
.mf .mf-table .tr { grid-template-columns: 112px minmax(0, 1fr); min-height: 36px; }
.mf .mf-table .tr:nth-child(even) { border-inline-end: 1px solid var(--line-2); }
.mf .mf-table .tr:last-child { grid-column: 1 / -1; border-inline-end: 0; }
.mf .mf-table .tr > span { padding: 0 10px; font-size: 12.5px; }
.mf .mf-table .tr > div { padding: 2px 6px; font-size: 13.5px; }
.mf .mf-table .tr input, .mf .mf-table .tr select { height: 30px; }
.mf-side { gap: 5px; }
.mf-side .tb { min-height: 34px; font-size: 13.5px; padding: 4px 8px; }
.mf-secs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mf-secs .mf-sec h4 { margin: 0 0 4px; font-size: 12.5px; }
.mf-secs .list { max-height: 148px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: 10px; }
.mf-secs .list-row { padding: 5px 10px; min-height: 0; }
.mf-secs .list-row small { font-size: 11.5px; }
.mf-secs .empty { padding: 14px; font-size: 13px; border: 1px dashed var(--line); border-radius: 10px; }
.modal-foot.mf-foot { padding: 10px 16px; }
.mf-go { width: 100%; justify-content: center; min-height: 46px; font-size: 16px; }

/* Popups fit the screen: tighter spacing everywhere */
.modal { max-height: calc(100vh - 20px); }
.modal-back { padding: 10px; }
.modal-head { padding: 11px 18px; }
.modal-body { padding: 14px 18px; gap: 10px; }
.modal-foot { padding: 10px 18px; }

/* New customer: small type switch */
.nm { gap: 8px; }
.nm-choice { display: inline-flex; gap: 0; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; width: max-content; }
.nm-opt { padding: 7px 18px; border: 0; border-radius: 0; gap: 8px; }
.nm-opt + .nm-opt { border-inline-start: 1.5px solid var(--line); }
.nm-opt small { display: none; }
.nm-opt b { font-size: 14.5px; }
.nm-dot { width: 16px; height: 16px; }
.nm-opt.sel .nm-dot::after { inset: 2px; }
.nm .mf-table { display: grid; grid-template-columns: 1fr 1fr; }
.nm .mf-table .th { display: none; }
.nm .mf-table .tr { grid-template-columns: 112px minmax(0, 1fr); min-height: 38px; }
.nm .mf-table .tr:nth-child(even) { border-inline-end: 1px solid var(--line-2); }
.nm .mf-table .tr:last-child { grid-column: 1 / -1; border-inline-end: 0; }
.nm .mf-table .tr > span { padding: 0 10px; font-size: 12.5px; }
.nm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mf .mf-side { grid-row: span 2; }
.mf .mf-secs { grid-column: 1; }
.mf-secs .mf-sec { grid-column: auto; min-width: 0; }
.mf-secs .list-row .btn-sm { padding: 3px 10px; min-height: 0; font-size: 12.5px; }
.tk-list { max-height: calc(100vh - 330px); overflow-y: auto; border: 1px solid var(--line-2); border-radius: 10px; }
.tk-list .list-row { padding: 6px 10px; }
.tk-find { height: 36px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; font: inherit; }
.rt-row { cursor: pointer; padding: 6px 12px; }
.rt-row.sel { background: var(--mint); }
.rt-row.done { opacity: .55; cursor: default; }
.rt-chk { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.nt-grid .list { max-height: calc((100vh - 260px) / 3 - 34px); min-height: 0; }
.nt-grid .empty { padding: 10px; }
.zr { gap: 9px; }
.zr-total { padding: 10px 16px; }
.zr-total b { font-size: 26px; }
.zr-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 6px; }
.zr-m { padding: 6px 12px; }
.zr-m b { font-size: 17px; }

/* Date field (dd/mm/yyyy everywhere) */
sn-date { position: relative; display: inline-block; vertical-align: middle; }
.field sn-date, .mf-table sn-date, .grid2 sn-date { display: block; width: 100%; }
sn-date > input[type=text] { width: 100%; min-width: 9.5em; padding-inline-end: 34px !important; font-variant-numeric: tabular-nums; }
sn-date > input.bad { border-color: var(--danger) !important; background: #FDF1F0; }
.sn-date-btn { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.sn-date-btn:hover { background: var(--soft); color: var(--brand); }
.sn-date-native { position: absolute; inset-inline-end: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.fz-grid { display: grid; grid-template-columns: 1fr 1fr 110px; gap: 10px; }
.fz-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mf .mf-secs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mf-secs .list-row.void { opacity: .55; text-decoration: line-through; }
.mf-secs .list-row small { overflow: hidden; text-overflow: ellipsis; }
.mf-secs .list-row .grow small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }

/* ── Management Center: refined type ── */
body.admin { --font: 'Readex Pro', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif; font-family: var(--font);
  font-size: 14px; letter-spacing: 0; -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1; background: #F3F6F5; }
body.admin h1, body.admin h2, body.admin h3 { font-weight: 600; letter-spacing: -.005em; }
body.admin .panel h2 { font-size: 16px; color: var(--ink); }
.admin .topbar-title { font-weight: 500; font-size: 15px; letter-spacing: .01em; }
.admin-nav { padding: 12px 10px; gap: 1px; }
.admin-nav button { padding: 9px 14px; border-radius: 9px; gap: 12px; color: #A9C7C4; position: relative; }
.admin-nav button .lbl { font-size: 13.5px; font-weight: 400; }
.admin-nav button:hover { color: #fff; }
.admin-nav button.sel { background: rgba(255,255,255,.08); color: #fff; font-weight: 500; }
.admin-nav button.sel::before { content: ''; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: #E79800; }
.admin-nav button.sel .lbl { font-weight: 500; }
.admin-nav button .ico { opacity: .85; }
.admin .tbl th { font-weight: 500; font-size: 12.5px; letter-spacing: .01em; }
.admin .tbl td { font-size: 13.5px; }
.admin .tbl td b, .admin .tbl td strong { font-weight: 500; }
.admin .btn { font-weight: 500; }
html[lang="en"] .lf input { direction: ltr; }
.per-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.per-chips .chip { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.per-chips .chip:hover { border-color: var(--brand); }
.per-chips .chip.sel { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.tx-list { max-height: calc(100vh - 330px); overflow-y: auto; border: 1px solid var(--line-2); border-radius: 10px; }
.tx-list .list-row { padding: 7px 12px; }
.tx-list .list-row.void { opacity: .55; }
.tx-sum { display: flex; align-items: center; gap: 14px; padding: 8px 12px; background: var(--soft); border-radius: 10px; font-size: 13.5px; color: var(--muted); }
.tx-sum b { color: var(--ink); font-size: 16px; }
.tx-sum .grow { flex: 1; }
sn-date > input[type=text] { padding-left: 36px !important; padding-right: 10px !important; text-align: left; }
.sn-date-btn { inset-inline-end: auto; left: 4px; right: auto; }

/* ═════════════ Reports center (v2) ═════════════ */
.rp { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 20px; align-items: start; }
.rp-nav { position: sticky; top: 76px; background: #fff; border: 1px solid #E3EAE8; border-radius: 16px; padding: 14px 10px 10px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 2px rgba(6, 35, 39, .04); }
.rp-nav-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 8px; }
.rp-nav-head b { font-size: 15px; font-weight: 600; color: var(--ink); }
.rp-nav-head span { font-size: 12px; color: var(--muted-2); }
.rp-find { height: 38px; border: 1px solid #E3EAE8; border-radius: 10px; padding: 0 12px; background: #F7FAF9; font: inherit; font-size: 13px; margin: 0 4px; }
.rp-find:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(4, 118, 123, .1); }
.rp-nav-list { overflow-y: auto; min-height: 0; padding: 0 2px; }
.rp-grp { margin-bottom: 6px; }
.rp-grp p { display: flex; align-items: center; gap: 7px; margin: 10px 8px 4px; font-size: 11.5px; font-weight: 600; color: #7C918F; letter-spacing: .02em; }
.rp-grp p .ico { color: var(--brand); opacity: .8; }
.rp-grp p small { margin-inline-start: auto; font-weight: 500; background: #EEF3F2; color: #6B7F7D; border-radius: 999px; padding: 0 7px; font-size: 10.5px; line-height: 17px; }
.rp-grp button { position: relative; display: block; width: 100%; text-align: start; border: 0; background: transparent; border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px;
  cursor: pointer; color: #2B4245; transition: background .12s, color .12s; }
.rp-grp button:hover { background: #F2F7F6; color: var(--ink); }
.rp-grp button.sel { background: #E8F4F3; color: var(--brand); font-weight: 600; }
.rp-grp button.sel::before { content: ''; position: absolute; inset-inline-start: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--brand); }
.rp-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; transition: opacity .15s; }
.rp-main.busy { opacity: .55; pointer-events: none; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-radius: 16px; color: #fff;
  background: radial-gradient(600px 220px at 100% 0%, rgba(4, 118, 123, .55), transparent 60%), linear-gradient(135deg, #0B3539 0%, #062327 100%); box-shadow: 0 8px 24px rgba(6, 35, 39, .12); }
.rp-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #E7B04A; letter-spacing: .02em; }
.rp-title h2 { margin: 6px 0 4px; font-size: 22px; font-weight: 600; color: #fff; }
.rp-title p { margin: 0; font-size: 13px; color: #A9C7C4; }
.rp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-acts .btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.rp-acts .btn:hover { background: rgba(255,255,255,.14); }
.rp-acts .btn-brand { background: #E79800; border-color: #E79800; color: #1F1400; font-weight: 600; }
.rp-acts .btn-brand:hover { background: #F2A70F; }
.rp-period { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid #E3EAE8; border-radius: 14px; padding: 12px 14px; }
.rp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-chips button { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid #DCE5E3; background: #fff; font: inherit; font-size: 12.5px; color: #2B4245; cursor: pointer; transition: all .12s; }
.rp-chips button:hover { border-color: var(--brand); color: var(--brand); }
.rp-chips button.sel { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.rp-dates { display: flex; gap: 8px; align-items: flex-end; }
.rp-dates .field { margin: 0; min-width: 150px; }
.rp-dates .field label, .rp-filters .field label { font-size: 11.5px; color: #6B7F7D; }
.rp-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; background: #fff; border: 1px solid #E3EAE8; border-radius: 14px; padding: 12px 14px; }
.rp-filters .field { margin: 0; }
.rp-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: #F0F7F6; border: 1px solid #D5E9E7; color: #2D5457; font-size: 13px; line-height: 1.7; }
.rp-note.warn { background: #FFF8EB; border-color: #F6DFA9; color: #6B4A00; }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.rp-kpi { position: relative; background: #fff; border: 1px solid #E3EAE8; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 2px rgba(6, 35, 39, .04); }
.rp-kpi span { font-size: 12.5px; color: #6B7F7D; }
.rp-kpi b { font-size: 24px; font-weight: 600; color: var(--ink); font-feature-settings: 'tnum' 1; direction: ltr; text-align: end; display: flex; gap: 6px; align-items: baseline; justify-content: flex-end; }
.rp-kpi b small { font-size: 12px; color: #8AA09E; font-weight: 500; }
.rp-kpi.accent { background: linear-gradient(135deg, #04767B, #0A5E62); border-color: transparent; }
.rp-kpi.accent span { color: #CDEBE9; } .rp-kpi.accent b { color: #fff; } .rp-kpi.accent b small { color: #CDEBE9; }
.rp-kpi-edit { position: absolute; top: 10px; inset-inline-end: 10px; border: 0; background: #F2F7F6; color: var(--brand); border-radius: 7px; font: inherit; font-size: 11.5px; padding: 3px 9px; cursor: pointer; }
.rp-kpi-edit:hover { background: #E3F0EE; }
.rp-kpi-form { display: flex; gap: 6px; }
.rp-kpi-form input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--brand); border-radius: 8px; padding: 0 10px; font: inherit; }
.rp-card { background: #fff; border: 1px solid #E3EAE8; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(6, 35, 39, .04); }
.rp-card-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #EDF2F1; }
.rp-count { font-size: 13px; color: #6B7F7D; font-weight: 500; }
.rp-q { height: 36px; width: min(280px, 100%); border: 1px solid #E3EAE8; border-radius: 10px; padding: 0 12px; background: #F7FAF9; font: inherit; font-size: 13px; }
.rp-q:focus { outline: none; border-color: var(--brand); background: #fff; }
.rp-table { overflow: auto; max-height: calc(100vh - 220px); }
.rp-tbl { font-size: 13.5px; }
.rp-tbl thead th { position: sticky; top: 0; z-index: 1; background: #F5F8F7; padding: 0; border-bottom: 1px solid #E3EAE8; }
.rp-tbl .th-sort { display: flex; align-items: center; gap: 6px; width: 100%; padding: 11px 14px; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: #5E7472; cursor: pointer; white-space: nowrap; text-align: start; }
.rp-tbl th.num .th-sort { justify-content: flex-end; }
.rp-tbl .th-sort i { font-style: normal; font-size: 9px; color: var(--brand); }
.rp-tbl .th-sort:hover, .rp-tbl .th-sort.on { color: var(--brand); }
.rp-tbl td { padding: 10px 14px; border-top: 1px solid #F0F4F3; white-space: nowrap; }
.rp-tbl td.num { text-align: end; }
.rp-tbl td.dt { color: #4A6062; font-feature-settings: 'tnum' 1; }
.rp-tbl tbody tr:nth-child(even) td { background: #FBFCFC; }
.rp-tbl tbody tr:hover td { background: #F1F8F7; }
.rp-tbl tfoot td { position: sticky; bottom: 0; background: #EEF5F4; font-weight: 700; color: var(--ink); border-top: 2px solid #D5E5E2; padding: 11px 14px; }
.rp-tbl .link-btn { font-weight: 500; text-decoration: none; color: var(--brand); }
.rp-tbl .link-btn:hover { text-decoration: underline; }
.rp-print-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 10px; }
.rp-print-kpis div { border: 1px solid #ccc; border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.rp-print-kpis span { font-size: 9.5px; color: #555; } .rp-print-kpis b { font-size: 13px; }
.rp-print-note { font-size: 9.5px; color: #555; margin-top: 8px; }
@media (max-width: 1000px) { .rp { grid-template-columns: 1fr; } .rp-nav { position: static; max-height: 320px; } }

/* ═════════════ Data export ═════════════ */
.ex { display: flex; flex-direction: column; gap: 18px; }
.ex-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 22px 24px; border-radius: 18px; color: #fff;
  background: radial-gradient(700px 260px at 100% 0%, rgba(4, 118, 123, .6), transparent 60%), linear-gradient(135deg, #0B3539, #062327); box-shadow: 0 10px 28px rgba(6, 35, 39, .14); }
.ex-hero h2 { margin: 6px 0 6px; font-size: 24px; font-weight: 600; color: #fff; }
.ex-hero p { margin: 0; color: #A9C7C4; font-size: 13.5px; line-height: 1.7; }
.ex-hero-opts { display: flex; flex-direction: column; gap: 10px; }
.ex-hero-opts .field label { color: #A9C7C4; font-size: 12px; }
.ex-hero-opts select { height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; padding: 0 10px; font: inherit; }
.ex-hero-opts select option { color: #0B2A2D; }
.ex-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; color: #E3EFEE; }
.ex-check input { width: 18px; height: 18px; accent-color: #E79800; margin-top: 2px; }
.ex-check small { display: block; color: #8FB3B0; font-size: 11.5px; }
.ex-hero-acts { display: flex; flex-direction: column; gap: 8px; }
.ex-hero-acts .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 230px; border-radius: 12px; }
.ex-hero-acts .btn-brand { background: #E79800; border-color: #E79800; color: #1F1400; font-weight: 600; box-shadow: 0 8px 20px rgba(231, 152, 0, .25); }
.ex-hero-acts .btn-brand:hover { background: #F2A70F; }
.ex-hero-acts .btn:not(.btn-brand) { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.ex-sets { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; overflow: visible; }
.ex-sets-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.ex-sets-head h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.ex-period { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ex-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid #E3EAE8; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.ex-card:hover { border-color: #BFD6D3; box-shadow: 0 4px 12px rgba(6, 35, 39, .05); }
.ex-card.on { border-color: var(--brand); background: #F3FAF9; }
.ex-card > input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.ex-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #EAF4F3; color: var(--brand); flex: none; }
.ex-card.on .ex-ic { background: var(--brand); color: #fff; }
.ex-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ex-txt b { font-size: 14px; font-weight: 600; color: var(--ink); }
.ex-txt small { font-size: 11.5px; color: #7C918F; line-height: 1.5; }
.ex-one { flex: none; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 9px; }
.ex-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid #EDF2F1; }
.ex-foot .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; }
@media (max-width: 1100px) { .ex-hero { grid-template-columns: 1fr; } .ex-hero-acts .btn { min-width: 0; } }

.rp-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rp-tbl td, .rp-tbl .th-sort { padding-inline: 11px; }
.rp-tbl { font-size: 13px; }
.rp-controls { background: #fff; border: 1px solid #E3EAE8; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px rgba(6, 35, 39, .04); }
.rp-controls .rp-filters { border: 0; padding: 0; background: none; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.rp { grid-template-columns: 236px minmax(0, 1fr); gap: 16px; }
.rp-tbl td { white-space: normal; }
.rp-tbl td.num, .rp-tbl td.dt { white-space: nowrap; }
.rp-tbl .th-sort { white-space: normal; line-height: 1.3; }
.rp-tbl td:first-child { min-width: 160px; }

/* Management Center on phones/tablets: a slim scrollable tab bar instead of a stretched block */
@media (max-width: 900px) {
  .admin-wrap { grid-template-rows: auto 1fr; align-content: start; min-height: 0; }
  .admin-nav { position: sticky; top: 60px; z-index: 9; flex-direction: row; align-items: center; height: auto; gap: 4px; padding: 8px 10px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav button { flex: 0 0 auto; height: 38px; padding: 0 14px; gap: 8px; border-radius: 999px; scroll-snap-align: start; }
  .admin-nav button .lbl { font-size: 13px; }
  .admin-nav button .ico { width: 16px; height: 16px; }
  .admin-nav button.sel { background: var(--brand); }
  .admin-nav button.sel::before { display: none; }
  .admin .topbar-title { display: none; }
}
@media (max-width: 1000px) {
  .rp { grid-template-columns: 1fr; }
  .rp-nav { position: static; max-height: 260px; }
  .rp-head { align-items: flex-start; padding: 16px; }
  .rp-acts { width: 100%; }
  .rp-acts .btn { flex: 1; justify-content: center; }
  .rp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rp-chips button { flex: 0 0 auto; }
  .rp-card-bar { flex-wrap: wrap; }
  .rp-q { width: 100%; }
  .rp-table { max-height: none; }
}
.rp-acts .btn { white-space: nowrap; }

/* ═════════════ Sign in v3 — one deep teal field, a glass card, gold accents ═════════════ */
.login { --gold: #E3A93B; --gold-2: #C98A14; position: fixed; inset: 0; z-index: 5; overflow: auto; display: grid; place-items: center; padding: 32px 16px;
  color: #EAF4F2; background-color: #05282B;
  background-image:
    radial-gradient(1100px 700px at 50% 38%, rgba(10, 118, 122, .42), transparent 62%),
    radial-gradient(520px 420px at 82% 12%, rgba(227, 169, 59, .10), transparent 70%),
    radial-gradient(620px 520px at 12% 92%, rgba(118, 176, 64, .10), transparent 70%),
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.2px);
  background-size: auto, auto, auto, 22px 22px; }
.login[hidden] { display: none; }
.login::before, .login::after { content: ''; position: fixed; pointer-events: none; border-radius: 50%; filter: blur(2px); }
/* two quiet rings around the centre, like a measuring plate */
.login::before { width: 820px; height: 820px; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 0 0 90px rgba(255,255,255,.012), 0 0 0 180px rgba(255,255,255,.008); animation: lgBreath 10s ease-in-out infinite; }
.login::after { width: 420px; height: 420px; right: -120px; top: -120px; background: radial-gradient(circle, rgba(227,169,59,.16), transparent 65%); }
@keyframes lgBreath { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); } }
@keyframes lgRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lg-stage { position: relative; z-index: 1; width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 26px; }
.lg-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: lgRise .7s cubic-bezier(.2,.7,.2,1) both; }
.lg-logo { width: 230px; height: auto; filter: drop-shadow(0 14px 30px rgba(0,0,0,.35)); }
.lg-sys { margin: 0; display: flex; align-items: center; gap: 12px; font: 500 11px/1 'Inter', system-ui, sans-serif; letter-spacing: .38em; color: #9FC4C0; }
.lg-sys::before, .lg-sys::after { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.lg-sys::after { transform: scaleX(-1); }
.login-card { position: relative; width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 34px 32px 26px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.035) 100%);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); animation: lgRise .7s .1s cubic-bezier(.2,.7,.2,1) both; }
/* a thin gold line across the top of the card */
.login-card::before { content: ''; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.login-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.login-title h1 { margin: 0; font-size: 26px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.login-title p { margin: 7px 0 0; font-size: 13.5px; color: #93B6B2; }
#login-lang .lang-switch { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #DCEBE9; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; }
#login-lang .lang-switch:hover { border-color: var(--gold); color: #fff; }
.lf-label { margin-top: 8px; font-size: 13px; font-weight: 500; color: #B9D2CF; }
.lf { position: relative; display: flex; align-items: center; gap: 12px; height: 54px; padding-inline: 16px; border-radius: 16px;
  background: rgba(3, 22, 24, .45); border: 1px solid rgba(255,255,255,.10); transition: border-color .25s ease, box-shadow .3s ease, background .25s ease; }
.lf:hover { border-color: rgba(255,255,255,.18); }
.lf:focus-within { border-color: rgba(227,169,59,.7); background: rgba(3, 22, 24, .6); box-shadow: 0 0 0 4px rgba(227,169,59,.12); }
.lf > [data-icon] { display: grid; color: #7FA8A4; transition: color .2s; }
.lf:focus-within > [data-icon] { color: var(--gold); }
.lf input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: .01em; text-align: start; direction: rtl; }
.lf input::placeholder { color: #6E928E; font-weight: 400; }
.lf input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #0B3134 inset; caret-color: #fff; }
html[lang="en"] .lf input { direction: ltr; }
.lf-eye { display: grid; place-items: center; padding: 6px; border: 0; border-radius: 10px; background: transparent; color: #7FA8A4; cursor: pointer; transition: all .2s; }
.lf-eye:hover { color: #fff; background: rgba(255,255,255,.08); }
.login .form-error { min-height: 20px; margin: 6px 0 0; font-size: 13px; color: #FFB4A8; }
.login-btn { height: 56px; margin-top: 4px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-size: 17px; font-weight: 700; letter-spacing: .02em; color: #2A1A00;
  background: linear-gradient(180deg, #F2C064 0%, #E3A93B 55%, #CF9223 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 16px 34px -14px rgba(227,169,59,.65); transition: transform .2s ease, box-shadow .3s ease, filter .2s ease; }
.login-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 20px 40px -14px rgba(227,169,59,.75); }
.login-btn:active { transform: none; }
.login-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.login-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; color: #8DB0AC; }
.login-note [data-icon] { display: grid; color: #8BC34A; }
.lg-copy { margin: 0; font: 400 11.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .08em; color: #5E8783; }
@media (max-width: 520px) { .login-card { padding: 26px 20px 20px; border-radius: 22px; } .lg-logo { width: 180px; } .lg-stage { gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .login::before, .lg-brand, .login-card { animation: none; } }
.login-card, .lg-stage, .lf { box-sizing: border-box; } .login-card { max-width: 100%; }
.login { grid-template-columns: minmax(0, 1fr); justify-items: center; } .lg-stage { width: 100%; max-width: 440px; }

/* ═════════════ Back office building blocks ═════════════ */
.page-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.page-bar > .toolbar { align-items: center; }
.page-title { margin: 0 0 4px; font-size: 20px; font-weight: 600; color: var(--ink); }
.page-bar .sub { max-width: 720px; line-height: 1.7; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.m-sec { margin: 6px 0 -2px; font-size: 13px; font-weight: 600; color: var(--brand); letter-spacing: .01em; }
.seg-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-choice button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; cursor: pointer; text-align: start; transition: all .15s; }
.seg-choice button b { font-size: 14.5px; color: var(--ink); } .seg-choice button small { font-size: 12px; color: var(--muted-2); }
.seg-choice button:hover { border-color: #BFD6D3; }
.seg-choice button.sel { border-color: var(--brand); background: #F1F8F7; box-shadow: 0 0 0 3px rgba(4,118,123,.08); }
.seg-choice button.sel b { color: var(--brand); }
/* accounts */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.acct { background: #fff; border: 1px solid #E3EAE8; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px rgba(6,35,39,.04); }
.acct.off { opacity: .65; }
.acct header { display: flex; align-items: center; gap: 12px; }
.acct header b { display: block; font-size: 15px; color: var(--ink); } .acct header small { color: var(--muted-2); font-size: 12px; }
.acct-av { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #0A8F95, #04767B); color: #fff; font-weight: 700; font-size: 17px; flex: none; }
.acct-perm { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.acct-bar { flex: 1; height: 6px; border-radius: 6px; background: #EDF2F1; overflow: hidden; }
.acct-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #04767B, #2FA4A9); }
.acct-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 10px 0 0; border-top: 1px solid #F0F4F3; }
.acct-meta dt { font-size: 11px; color: var(--muted-2); } .acct-meta dd { margin: 2px 0 0; font-size: 12.5px; color: var(--ink); font-weight: 500; }
.acct footer { display: flex; gap: 6px; flex-wrap: wrap; }
.acct-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 12px; align-items: end; }
.acct-active { border: 1px solid var(--line); }
/* permissions editor */
.perm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 6px; border-top: 1px solid #EDF2F1; }
.perm-top .sub { margin: 4px 0 0; }
.perm-sum { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--muted-2); }
.perm-count { font-size: 20px; color: var(--brand); font-feature-settings: 'tnum' 1; }
.perm-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.perm-tools .rp-chips button.ghost { border-style: dashed; color: var(--muted); }
.perm-find { height: 36px; width: min(240px, 100%); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 13px; background: #F7FAF9; }
.perm-groups { columns: 2 340px; column-gap: 12px; }
.perm-group { break-inside: avoid; margin-bottom: 12px; background: #fff; border: 1px solid #E3EAE8; border-radius: 14px; padding: 8px; }
.perm-group header { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; border-bottom: 1px solid #F0F4F3; margin-bottom: 4px; }
.perm-group header b { font-size: 14px; color: var(--ink); } .perm-group header small { color: var(--muted-2); font-size: 11.5px; background: #EEF3F2; border-radius: 999px; padding: 0 8px; }
.perm-group header .link-btn { margin-inline-start: auto; font-size: 12px; }
.perm-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.perm-item:hover { background: #F5F9F8; }
.perm-item.on { background: #EEF7F6; }
.perm-item.locked { cursor: default; opacity: .6; }
.perm-item .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.perm-item b { font-size: 13.5px; font-weight: 600; color: var(--ink); } .perm-item small { font-size: 11.5px; color: var(--muted-2); line-height: 1.45; }
.modal-foot .spacer { flex: 1; }
@media (max-width: 700px) {
  .acct-grid { grid-template-columns: 1fr; }
  .perm-groups { columns: 1; }
  .seg-choice { grid-template-columns: 1fr; }
  .page-bar { align-items: stretch; } .page-bar > .btn, .page-bar > .toolbar { width: 100%; }
}
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.grid3 .field, .grid2 .field { margin: 0; }
@media (max-width: 760px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .grid3 { grid-template-columns: 1fr; } }
.seg-choice button { padding: 8px 12px; }
html:has(> body.admin) { background: #F3F6F5; }
@media (max-width: 1000px) {
  .ex-sets-head, .ex-period { align-items: stretch; width: 100%; }
  .ex-period .rp-chips { max-width: 100%; }
  .rp-dates { flex-wrap: wrap; } .rp-dates .field { flex: 1; min-width: 130px; }
  .ex-grid { grid-template-columns: 1fr; }
  .ex-hero { padding: 18px; }
}
@media (max-width: 700px) {
  .acct-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-form .acct-active { grid-column: 1 / -1; }
  .modal-foot .spacer { display: none; }
  .modal-foot .btn-brand { flex: 1; }
  .perm-top { flex-wrap: wrap; }
}
.mf-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .mf-stat.lt { background: linear-gradient(135deg, #04767B, #0A5E62); border-color: transparent; } .mf-stat.lt span, .mf-stat.lt small { color: #CDEBE9; } .mf-stat.lt b { color: #fff; }
.lt-band { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 1px; border-radius: 14px; overflow: hidden; background: #DCE8E6; }
.lt-band > div { background: #fff; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.lt-band > div:first-child { background: linear-gradient(135deg, #04767B, #0A5E62); color: #fff; }
.lt-band span { font-size: 11.5px; color: var(--muted-2); } .lt-band > div:first-child span { color: #CDEBE9; }
.lt-band b { font-size: 16px; color: var(--ink); font-feature-settings: 'tnum' 1; } .lt-band > div:first-child b { font-size: 22px; color: #fff; }
.lt-band small { font-size: 11px; opacity: .8; }
@media (max-width: 700px) { .lt-band { grid-template-columns: 1fr 1fr; } .lt-band > div:first-child { grid-column: 1 / -1; } }
/* combos on the sales screen */
.tag.cb { background: #FFF1D6; color: #8A5A00; }
.cart-row.combo-sum { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; background: #FFF9EC !important; border-inline-start: 3px solid #E79800; padding-inline: 12px; cursor: default; }
.cart-row.combo-sum .cs-text { display: flex; flex-direction: column; min-width: 0; } .cart-row.combo-sum .cs-text b { font-size: 13px; color: #6B4500; }
.cart-row.combo-sum .cs-text small { font-size: 11.5px; color: #8A6A2E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-row.combo-sum .cs-amt { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; color: #6B4500; direction: ltr; white-space: nowrap; }
.cart-row.combo-sum .cs-amt small { font-weight: 500; font-size: 11px; color: #3F7A1F; direction: rtl; }
.pk-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.pk-tabs button { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--ink); }
.pk-tabs button.sel { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pk-custom { font-size: 11px; font-weight: 600; color: #6B4500; background: #FFF1D6; border-radius: 999px; padding: 1px 8px; margin-inline-start: 6px; }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cb-card { border: 1px solid #F0DDB2; background: linear-gradient(180deg, #FFFCF5, #fff); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cb-card header { display: flex; align-items: center; gap: 8px; }
.cb-card header b { font-size: 17px; color: var(--ink); flex: 1; }
.cb-badge { font-size: 11px; font-weight: 700; color: #fff; background: #E79800; border-radius: 6px; padding: 2px 8px; }
.cb-price { font-size: 20px; font-weight: 700; color: var(--brand); direction: ltr; } .cb-price small { font-size: 12px; color: var(--muted-2); }
.cb-save { margin: 0; font-size: 12.5px; color: #3F7A1F; }
.cb-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed #F0E2C4; }
.cb-item b { font-size: 13.5px; } .cb-item select { height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; font: inherit; max-width: 55%; }
.sec-gap { margin-top: 18px; padding-top: 18px; border-top: 1px solid #E3EAE8; }
.pkg-card.custom { border-color: #F0DDB2; background: linear-gradient(180deg, #FFFCF5, #fff); }
.cbx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cbx { background: #fff; border: 1px solid #F0DDB2; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(6,35,39,.04); }
.cbx.off { opacity: .6; }
.cbx header { display: flex; align-items: center; gap: 8px; } .cbx header b { font-size: 17px; flex: 1; color: var(--ink); }
.cbx-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .cbx-price b { font-size: 24px; color: var(--brand); } .cbx-price span { font-size: 12px; color: #3F7A1F; margin-inline-start: 6px; }
.cbx ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cbx li { display: flex; flex-direction: column; padding: 6px 10px; background: #FBFAF6; border-radius: 10px; } .cbx li b { font-size: 13.5px; } .cbx li small { font-size: 11.5px; color: var(--muted-2); }
.cbx footer { display: flex; align-items: center; gap: 6px; } .cbx footer .sub { flex: 1; }
.cbx-items { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cbx-item { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cbx-row { display: flex; gap: 10px; align-items: flex-end; } .cbx-row select { flex: 1; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; min-width: 0; }
.cbx-row .field { width: 100px; margin: 0; } .cbx-row .field input { width: 100%; }
.cbx-n { width: 28px; height: 28px; border-radius: 8px; background: #FFF1D6; color: #8A5A00; display: grid; place-items: center; font-weight: 700; flex: none; margin-bottom: 6px; }
.cbx-flv { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .cbx-flv small { width: 100%; color: var(--muted-2); font-size: 11.5px; }
.cbx-flv button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; cursor: pointer; }
.cbx-flv button.sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.cbx-sum { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 6px 20px; padding: 12px 14px; background: #F5F9F8; border-radius: 12px; font-size: 13.5px; }
.cbx-sum b { text-align: end; } .ok-t { color: #3F7A1F; } .bad-t { color: var(--danger); font-size: 12px; }
@media (max-width: 700px) { .cbx-row { flex-wrap: wrap; } .cbx-row select { flex-basis: 100%; } }
.pk { min-height: 112px; padding: 10px 12px; gap: 2px; } .pk .price { font-size: 20px; } .pk-side { padding: 12px 14px; gap: 7px; } .pk-side h3 { font-size: 20px; } .pk-tabs button { height: 32px; }

/* ═════════════ Welcome transition after sign-in ═════════════ */
.welcome { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; overflow: hidden; cursor: pointer;
  background-color: #05282B;
  background-image: radial-gradient(1000px 650px at 50% 42%, rgba(10,118,122,.5), transparent 62%), radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.2px);
  background-size: auto, 22px 22px; }
.wl-stage { position: relative; width: 280px; height: 280px; display: grid; place-items: center; }
.wl-glow { position: absolute; inset: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(227,169,59,.20), rgba(47,164,169,.10) 42%, transparent 68%);
  filter: blur(8px); animation: wlPulse 2.4s ease-in-out both; }
.wl-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wl-ring circle { fill: none; stroke-width: 2.5; }
.wl-track { stroke: rgba(255,255,255,.07); }
.wl-arc { stroke-linecap: round; stroke-dasharray: 629; stroke-dashoffset: 629; animation: wlDraw 1.9s .15s cubic-bezier(.65,.05,.25,1) forwards; filter: drop-shadow(0 0 6px rgba(242,192,100,.6)); }
.wl-logo { position: relative; width: 190px; height: auto; opacity: 0; transform: scale(.86); filter: drop-shadow(0 12px 30px rgba(0,0,0,.4));
  animation: wlLogo .9s .25s cubic-bezier(.2,.8,.2,1) forwards; }
.wl-text { text-align: center; color: #EAF4F2; position: relative; }
.wl-greet { margin: 0; font-size: 15px; color: #9FC4C0; opacity: 0; animation: wlUp .6s .75s ease forwards; }
.wl-name { margin: 4px 0 18px; font-size: 32px; font-weight: 600; letter-spacing: -.01em; color: #fff; opacity: 0; animation: wlUp .7s .9s ease forwards; }
.wl-bar { width: 180px; height: 3px; margin: 0 auto; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; opacity: 0; animation: wlUp .4s 1.1s ease forwards; }
.wl-bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #2FA4A9, #F2C064); transform-origin: right; transform: scaleX(0); animation: wlBar 1.4s 1.15s cubic-bezier(.4,0,.2,1) forwards; }
html[lang="en"] .wl-bar i { transform-origin: left; }
.wl-sub { margin: 12px 0 0; font-size: 12.5px; letter-spacing: .04em; color: #7FA8A4; opacity: 0; animation: wlUp .5s 1.2s ease forwards; }
/* a few leaves drifting up, like the leaves in the logo */
.wl-leaf { position: absolute; top: 58%; left: calc(50% + (var(--i) - 3) * 9vw); width: 10px; height: 16px; border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #9BD15A, #5E9F2E); opacity: 0; animation: wlLeaf 2.6s calc(.3s + var(--i) * .12s) ease-out forwards; }
.wl-leaf:nth-child(odd) { background: linear-gradient(135deg, #F2C064, #CF9223); width: 7px; height: 11px; }
.welcome.out { animation: wlOut .65s cubic-bezier(.4,0,.2,1) forwards; }
.welcome.calm *, .welcome.calm { animation-duration: .01s !important; animation-delay: 0s !important; }
.welcome.calm .wl-leaf { display: none; }
@keyframes wlIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wlOut { to { opacity: 0; transform: scale(1.06); filter: blur(6px); } }
@keyframes wlDraw { to { stroke-dashoffset: 0; } }
@keyframes wlLogo { to { opacity: 1; transform: scale(1); } }
@keyframes wlUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wlBar { to { transform: scaleX(1); } }
@keyframes wlPulse { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.05); } 100% { opacity: .85; transform: scale(1); } }
@keyframes wlLeaf { 0% { opacity: 0; transform: translateY(40px) rotate(0); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-300px) rotate(calc(120deg + var(--i) * 25deg)); } }
@media (max-width: 520px) { .wl-stage { width: 220px; height: 220px; } .wl-logo { width: 150px; } .wl-name { font-size: 26px; } }

/* ═════════════ Sales screen v2 — soft frames, brand colours with a gentle sheen ═════════════ */
.pos { --gold: #E3A93B; --sheen: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 52%);
  background: radial-gradient(1200px 600px at 100% 0%, rgba(4,118,123,.07), transparent 60%), linear-gradient(180deg, #F2F6F5, #E9EFEE); }
.till { gap: 12px; padding: 0 12px 12px; }
.t-top { margin: 0 -12px; }
/* top bar: deep teal, gold hairline, clearer logo, sign-out next to the language switch */
.till .topbar { height: 62px; background: linear-gradient(180deg, #0E3B3F 0%, #082A2D 100%); box-shadow: inset 0 -1px 0 rgba(227,169,59,.35), 0 6px 18px rgba(6,35,39,.18); }
.till .topbar-logo { height: 46px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)) brightness(1.08) contrast(1.05); }
.till .topbar-title { font-size: 15.5px; font-weight: 600; letter-spacing: .01em; }
.tb-logout { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: #FFD9D3; background: rgba(214, 69, 56, .14); border: 1px solid rgba(255, 140, 125, .35); transition: all .2s; }
.tb-logout:hover { background: #C0392B; border-color: #C0392B; color: #fff; }
.till .tb-btn, .till .lang-switch { border-radius: 999px; }
/* search fields: one soft frame language for every input on the screen */
.t-field > label { font-size: 13px; font-weight: 600; color: #3E5557; }
.t-input input { height: 46px; border: 1px solid #D5E1DF; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(6,35,39,.05), inset 0 1px 0 rgba(255,255,255,.8);
  transition: border-color .2s, box-shadow .25s; }
#item-input { border-color: #9CC9C7; box-shadow: 0 0 0 4px rgba(4,118,123,.06), 0 1px 2px rgba(6,35,39,.05); }
.t-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(4,118,123,.12), 0 4px 14px -6px rgba(4,118,123,.35); }
.t-msg { height: 38px; border-radius: 12px; border-color: #E0E8E6; box-shadow: 0 1px 2px rgba(6,35,39,.04); }
.cust-line { min-height: 46px; border-radius: 14px; border-color: #E0E8E6; box-shadow: 0 1px 2px rgba(6,35,39,.04); }
.cust-line.has { background: linear-gradient(180deg, #FFF8EA, #FFF3DC); border-color: #F1D9A6; }
.cust-line .cl-i { border-radius: 999px; padding: 3px 10px; box-shadow: 0 1px 1px rgba(6,35,39,.05); }
/* invoice table */
.till .cart { border-radius: 16px; border-color: #DCE6E4; box-shadow: 0 2px 6px rgba(6,35,39,.05), 0 12px 30px -18px rgba(6,35,39,.25); }
.till .cart-head { height: 40px; background: linear-gradient(180deg, #164A4E, #0E3B3F); color: #E9F4F3; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.till .cart-rows { background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), #EDF2F1 calc(var(--row) - 1px) var(--row)); }
.till .cart-row.sel { background: linear-gradient(90deg, rgba(4,118,123,.10), rgba(4,118,123,.04)); }
.till .cart-row.sel::before { width: 3px; border-radius: 3px; inset-block: 6px; }
.qty-in { border-radius: 10px; border-color: #D5E1DF; }
.till .cart-row .line-x { border-radius: 10px; border-color: #F3D3CE; }
/* totals */
.t-totals { gap: 6px; grid-template-rows: repeat(4, 42px); }
.t-totals dt, .t-totals dd { border-radius: 12px; background: #fff; border: 1px solid #E0E8E6; box-shadow: 0 1px 2px rgba(6,35,39,.04); }
.t-totals .due dt, .t-totals .due dd { background: linear-gradient(180deg, #164A4E, #0B3236); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(6,35,39,.6); }
.t-totals .due dd { color: #F6D58D; font-size: 21px; letter-spacing: .01em; }
/* action column: brand colours, rounded, a soft light sheen on top */
.t-col { gap: 8px; }
.tb { border-radius: 14px; border: 1px solid rgba(0,0,0,.06); font-size: 15px; letter-spacing: .01em; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #0B8C92 0%, #04767B 55%, #036A6E 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 14px -8px rgba(4,118,123,.7); transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.tb::after { content: ''; position: absolute; inset: 0 0 50% 0; background: var(--sheen); pointer-events: none; z-index: -1; }
.tb:hover { background: linear-gradient(180deg, #0B8C92 0%, #04767B 55%, #036A6E 100%); filter: brightness(1.07); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 20px -10px rgba(4,118,123,.8); }
.tb:active { transform: translateY(1px) scale(.995); }
.tb-pk, .tb-pk:hover { background: linear-gradient(180deg, #F4BE52 0%, #E79800 60%, #D58A00 100%); color: #2E1C00; border-color: rgba(150,95,0,.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 6px 14px -8px rgba(231,152,0,.8); }
.tb-red, .tb-red:hover { background: linear-gradient(180deg, #D9564A 0%, #C0392B 60%, #A93226 100%); border-color: rgba(120,20,10,.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 14px -8px rgba(192,57,43,.8); }
.tb-dark, .tb-dark:hover { background: linear-gradient(180deg, #1A5357 0%, #0E3B3F 60%, #0A3134 100%); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 14px -8px rgba(6,35,39,.8); }
.tb .badge { background: #F6D58D; color: #4A3100; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.t-col .pay { border-radius: 16px; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #78B23A 0%, #5E9F2E 50%, #4C8724 100%); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 24px -12px rgba(76,135,36,.9); transition: filter .2s, transform .15s; }
.t-col .pay::after { content: ''; position: absolute; inset: 0 0 55% 0; background: var(--sheen); pointer-events: none; z-index: -1; }
.t-col .pay:hover { background: linear-gradient(160deg, #78B23A 0%, #5E9F2E 50%, #4C8724 100%); filter: brightness(1.06); }
.t-col .pay.empty { background: linear-gradient(160deg, #A9C7A0, #93B58A); box-shadow: none; }
.t-col .pay kbd { border-color: rgba(255,255,255,.4); border-radius: 8px; background: rgba(255,255,255,.12); }
.t-pair-big { gap: 8px; }
/* package cards: smaller, coloured by tier, with an emblem */
.pk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.pk.tier { min-height: 0; padding: 10px 11px; gap: 6px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--m) 35%, transparent);
  background: linear-gradient(150deg, var(--c1) 0%, var(--c2) 100%); color: var(--ink); position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 12px -8px rgba(6,35,39,.4); transition: transform .15s, box-shadow .2s; }
.pk.tier::after { content: ''; position: absolute; inset: 0 0 55% 0; background: linear-gradient(180deg, rgba(255,255,255,.35), transparent); z-index: -1; pointer-events: none; }
.pk.tier:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 20px -12px rgba(6,35,39,.5); }
.pk.tier.sel { padding: 10px 11px; border: 1px solid var(--m); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) 35%, transparent), 0 10px 20px -12px rgba(6,35,39,.5); }
.pk-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.pk-name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pk-name b { font-size: 15px; font-weight: 700; } .pk-name small { font-size: 11px; opacity: .75; }
.pk.tier .desc { font-size: 12.5px; font-weight: 500; opacity: .9; }
.pk.tier .price { font-size: 18px; color: var(--ink); } .pk.tier .price small { color: var(--ink); opacity: .7; }
.tier-emb { display: grid; place-items: center; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.pk-side { background: linear-gradient(160deg, color-mix(in srgb, var(--c1, #F5F8F7) 70%, #fff), #fff 60%); border-radius: 16px; }
.pk-side-head { display: flex; align-items: center; gap: 10px; }
/* notifications */
.nt-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.nt-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border-radius: 14px; border: 1px solid #E0E8E6; background: #fff; cursor: pointer; font: inherit; text-align: start;
  box-shadow: 0 1px 2px rgba(6,35,39,.04); transition: all .15s; }
.nt-tile:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(6,35,39,.4); }
.nt-tile b { font-size: 24px; line-height: 1; color: var(--ink); } .nt-tile small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.nt-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.nt-tile.warn .nt-ic { background: #FFF1D6; color: #A86A00; } .nt-tile.bad .nt-ic { background: #FDE8E5; color: #B3261E; }
.nt-tile.info .nt-ic { background: #E4EEF7; color: #24547E; } .nt-tile.ok .nt-ic { background: #EAF5DF; color: #3F7A1F; }
.nt-tile.none { opacity: .6; }
.nt-tile.sel { border-color: var(--brand); background: linear-gradient(180deg, #F1F9F8, #fff); box-shadow: 0 0 0 3px rgba(4,118,123,.12); }
.nt-pane h4 { margin: 4px 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.nt-pane h4 span { font-size: 12px; background: #EEF3F2; border-radius: 999px; padding: 1px 9px; color: var(--muted); }
.nt-table { border: 1px solid #E0E8E6; border-radius: 14px; overflow: auto; max-height: calc(100vh - 330px); }
.nt-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nt-table th { position: sticky; top: 0; background: #F5F8F7; color: #5E7472; font-size: 12px; font-weight: 600; text-align: start; padding: 9px 12px; border-bottom: 1px solid #E0E8E6; white-space: nowrap; }
.nt-table td { padding: 8px 12px; border-top: 1px solid #F0F4F3; white-space: nowrap; }
.nt-table tbody tr:hover td { background: #F7FBFA; }
@media (max-width: 900px) { .nt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* close of day (Z report) */
.zr-note { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5E7472; }
.zr-note .ico { color: var(--brand); }
.zr-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 18px 22px; border-radius: 18px; color: #fff;
  background: radial-gradient(500px 200px at 100% 0%, rgba(4,118,123,.6), transparent 60%), linear-gradient(135deg, #12464A, #082A2D); box-shadow: 0 12px 28px -16px rgba(6,35,39,.8); }
.zr-hero span { display: block; font-size: 13px; color: #A9C7C4; }
.zr-hero > div:first-child b { display: block; font-size: 38px; font-weight: 700; color: #F6D58D; letter-spacing: -.01em; line-height: 1.15; }
.zr-hero small { color: #8FB3B0; font-size: 12px; }
.zr-hero-net { text-align: end; } .zr-hero-net b { font-size: 20px; color: #fff; }
.zk-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.zk { background: #fff; border: 1px solid #E0E8E6; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 2px rgba(6,35,39,.04); }
.zk span { font-size: 11.5px; color: #6B7F7D; } .zk b { font-size: 18px; color: var(--ink); font-feature-settings: 'tnum' 1; } .zk small { font-size: 11px; color: var(--muted-2); }
.zk.neg b { color: #B3261E; }
.zr-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.zr-side { display: flex; flex-direction: column; gap: 10px; }
.zr-card { background: #fff; border: 1px solid #E0E8E6; border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(6,35,39,.04); }
.zr-card h4 { margin: 0 0 8px; font-size: 13.5px; color: var(--brand); font-weight: 600; }
.zm { display: flex; flex-direction: column; gap: 7px; }
.zm-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px 80px; gap: 10px; align-items: center; font-size: 13.5px; }
.zm-name { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zm-bar { height: 8px; border-radius: 8px; background: #EEF3F2; overflow: hidden; } .zm-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #2FA4A9, #04767B); }
.zm-pct { font-size: 12px; color: var(--muted-2); text-align: end; } .zm-row b { text-align: end; font-feature-settings: 'tnum' 1; }
.zm-zero { margin: 6px 0 0; font-size: 11.5px; color: var(--muted-2); line-height: 1.6; }
.zl { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px dashed #EDF2F1; font-size: 13.5px; }
.zl:first-of-type { border-top: 0; } .zl b { font-feature-settings: 'tnum' 1; } .zl.tot b { color: var(--brand); font-size: 16px; }
.zr-card.drawer { background: linear-gradient(180deg, #F6FBFA, #fff); }
@media (max-width: 900px) { .zk-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zr-cols { grid-template-columns: 1fr; } .zr-hero { flex-direction: column; align-items: flex-start; } .zr-hero-net { text-align: start; } }
/* customer file: sections as tabs */
.mf-secs { display: flex !important; flex-direction: column; gap: 8px; }
.mf-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mf-tab { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid #DCE6E4; background: linear-gradient(180deg, #fff, #F4F8F7);
  color: #3E5856; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all .15s; min-width: 0; }
.mf-tab span { flex: 1; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-tab b { min-width: 26px; padding: 1px 8px; border-radius: 20px; background: #E7F0EF; color: var(--brand); font-size: 12px; }
.mf-tab:hover { border-color: #9FC9C7; }
.mf-tab.on { color: #fff; border-color: transparent; background: linear-gradient(180deg, #0B8A8F, #04676B); box-shadow: 0 6px 16px -10px rgba(4,103,107,.9), inset 0 1px 0 rgba(255,255,255,.2); }
.mf-tab.on b { background: rgba(255,255,255,.2); color: #fff; }
.mf-pane .list { max-height: 210px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: 12px; }
.mf-pane .list-row { padding: 6px 12px; min-height: 0; }
.mf-pane .empty { padding: 18px; font-size: 13px; border: 1px dashed var(--line); border-radius: 12px; }
@media (max-width: 700px) { .mf-tab { flex-direction: column; gap: 2px; padding: 8px 4px; font-size: 12px; } .mf-tab span { white-space: normal; text-align: center; } }
/* error message dialog */
.al-layer { z-index: 90; background: rgba(8, 32, 35, .45); backdrop-filter: blur(2px); }
.modal.al-box { padding: 26px 26px 20px; text-align: center; border-radius: 20px; border-top: 4px solid #C8372D; }
.al-ico { width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 700; color: #fff;
  background: radial-gradient(circle at 35% 30%, #F0776B, #C8372D 70%); box-shadow: 0 8px 20px -8px rgba(200,55,45,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.al-title { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
.al-msg { margin: 0 0 18px; font-size: 15.5px; line-height: 1.75; color: #3A4F4D; white-space: pre-line; }
.al-foot .btn { min-width: 140px; }
.zr-hero { padding: 13px 20px; } .zr-hero > div:first-child b { font-size: 32px; }
.zk { padding: 7px 12px; } .zk b { font-size: 17px; }
.zr-card { padding: 10px 14px; } .zl { padding: 5px 0; }
/* Sales screen v3: a bigger invoice table; totals in one compact strip; slimmer message bar; customer strip fully readable */
.t-totals { grid-template-rows: none !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: 8px !important; }
.t-totals div { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 7px 14px; border-radius: 13px;
  background: linear-gradient(180deg, #fff, #F7FAF9); border: 1px solid #E0E8E6; box-shadow: 0 1px 2px rgba(6,35,39,.05); }
.t-totals dt, .t-totals dd { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; }
.t-totals dt { font-size: 12px !important; color: #6B7F7D !important; font-weight: 500; }
.t-totals dd { justify-content: flex-start; font-size: 17px !important; font-feature-settings: 'tnum' 1; }
.t-totals .due { flex-direction: row; align-items: center; justify-content: space-between; border-color: transparent;
  background: linear-gradient(180deg, #164A4E, #0B3236); box-shadow: 0 8px 20px -10px rgba(6,35,39,.6); }
.t-totals .due dt { color: #CFE3E1 !important; font-size: 14px !important; font-weight: 600; }
.t-totals .due dd { color: #F6D58D !important; font-size: 23px !important; }
.t-msg { height: 32px !important; font-size: 13.5px; border-radius: 10px; }
.cust-line { min-height: 42px !important; padding-block: 3px; gap: 6px; }
.cust-line .cl-items { gap: 5px; }
.cust-line .cl-i { padding: 3px 9px; font-size: 12.5px; }
.cust-line .btn-sm { height: 30px; }
@media (max-width: 760px) {
  .t-totals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .t-totals .due { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .till { grid-template-columns: minmax(0, 1fr) !important; }
  .cust-line { flex-wrap: wrap; } .cust-line .cl-items { flex-wrap: wrap; flex-basis: 100%; order: 2; }
}
@media (max-width: 760px) {
  .till .cart-head, .till .cart-row { grid-template-columns: minmax(0, 1fr) 62px 76px 32px !important; }
}
/* Rows in a scrolling list keep their full height (they scroll instead of squeezing and overlapping). */
.list > * { flex-shrink: 0; }
.mf-pane .list-row { min-height: 46px; }
/* sign-in footer: brand line + rights line, same type and colour as before */
.lg-copy { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.lg-copy .lg-copy-brand { font-weight: 600; letter-spacing: .18em; }
/* home: period sales + best sellers */
.hs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hs-head .h2 { margin: 0; font-size: 16px; }
.hs-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.hs-kpis > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border: 1px solid #E0E8E6; border-radius: 14px; background: linear-gradient(180deg, #fff, #F7FAF9); }
.hs-kpis span { font-size: 12px; color: #6B7F7D; } .hs-kpis b { font-size: 20px; color: var(--ink); font-feature-settings: 'tnum' 1; }
.hs-kpis b small { font-size: 12px; color: #6B7F7D; font-weight: 500; }
.ts-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.ts-group { border: 1px solid #E0E8E6; border-radius: 14px; background: #fff; overflow: hidden; }
.ts-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: linear-gradient(180deg, #F4F9F8, #EDF4F3); }
.ts-head b { font-size: 14.5px; color: var(--ink); }
.ts-rank { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #0B8A8F, #04676B); flex: none; }
.ts-tot { font-weight: 700; color: var(--brand); } .ts-amt { font-size: 12.5px; color: #5E7472; min-width: 70px; text-align: end; font-feature-settings: 'tnum' 1; }
.ts-pct { font-size: 11.5px; color: #8A6A1F; background: #FFF4DC; border-radius: 20px; padding: 1px 8px; }
.ts-flavors { display: flex; flex-direction: column; padding: 6px 14px 10px; gap: 5px; }
.ts-f { display: grid; grid-template-columns: minmax(90px, 180px) minmax(0, 1fr) 40px 80px; gap: 10px; align-items: center; font-size: 13px; }
.ts-fn { color: #3A4F4D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-bar { height: 8px; border-radius: 8px; background: #EEF3F2; overflow: hidden; } .ts-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #E9B44C, #E79800); }
.ts-f b { text-align: end; }
@media (max-width: 700px) { .hs-kpis { grid-template-columns: 1fr 1fr; } .ts-f { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 30px 60px; gap: 6px; } }
/* admin: edit invoice */
.inv-act.edit { color: #8A5A00; border-color: #F1D9A6; background: linear-gradient(180deg, #FFFCF5, #FFF6E3); }
.ie-tbl td { vertical-align: middle; } .ie-tbl small { color: var(--muted-2); }
.ie-in { width: 92px; height: 34px; border: 1px solid #D5E1DF; border-radius: 9px; padding: 0 8px; font: inherit; text-align: center; }
.ie-fixed td { color: #6B7F7D; background: #F7FAF9; }
.ie-added td { background: #F2FAF0; }
.ie-add { position: relative; margin: 10px 0; }
.ie-sugg { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ie-opt { text-align: start; border: 1px solid #E0E8E6; background: #fff; border-radius: 9px; padding: 7px 10px; font: inherit; cursor: pointer; }
.ie-opt:hover { border-color: var(--brand); }
.ie-pays { display: flex; flex-direction: column; gap: 6px; }
.ie-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.ie-sum > div { border: 1px solid #E0E8E6; border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.ie-sum span { font-size: 12px; color: #6B7F7D; } .ie-sum b { font-size: 17px; } .ie-sum .ie-new { color: var(--brand); } .ie-sum b.neg { color: var(--danger); }
.ie-sum .ok { border-color: #CFE3B5; background: var(--leaf-soft); } .ie-sum .bad { border-color: #F2CBC6; background: var(--danger-soft); }
@media (max-width: 700px) { .ie-sum { grid-template-columns: 1fr 1fr; } .ie-in { width: 70px; } }
/* categories */
.ct-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-top .h2 { margin: 0 0 4px; font-size: 18px; } .ct-top .sub { margin: 0; max-width: 520px; }
.ct-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ct-add input { width: 190px; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.ct-card { border: 1px solid #E0E8E6; border-radius: 16px; background: linear-gradient(180deg, #fff, #F8FBFA); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(6,35,39,.04); }
.ct-card.off { opacity: .7; background: #F4F6F6; }
.ct-card header { display: flex; align-items: center; gap: 10px; }
.ct-card header .grow { display: flex; flex-direction: column; min-width: 0; } .ct-card header b { font-size: 15px; color: var(--ink); } .ct-card header small { color: var(--muted-2); font-size: 12px; text-align: start; }
.ct-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--brand); background: #E7F2F1; flex: none; }
.ct-sw { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5E7472; cursor: pointer; }
.ct-count { display: flex; align-items: baseline; gap: 6px; } .ct-count b { font-size: 22px; color: var(--brand); } .ct-count span { font-size: 12.5px; color: #6B7F7D; }
.ct-card footer { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp-cols section { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .cp-cols .h3 { margin: 0; }
.cp-list { border: 1px solid #E0E8E6; border-radius: 12px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; }
.cp-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid #EEF3F2; flex-shrink: 0; }
.cp-row .grow { display: flex; flex-direction: column; min-width: 0; } .cp-row small { color: var(--muted-2); font-size: 11.5px; }
@media (max-width: 760px) { .cp-cols { grid-template-columns: 1fr; } .ct-add input { width: 100%; } }
.mf-spec { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5E7472; margin-bottom: 4px; }
.mf-spec select { height: 38px; border-radius: 10px; border: 1px solid #D5E1DF; padding: 0 10px; font: inherit; font-size: 13.5px; background: #fff; }
/* suppliers */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sp-card { border: 1px solid #E0E8E6; border-radius: 16px; background: linear-gradient(180deg, #fff, #F8FBFA); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: all .15s; box-shadow: 0 1px 2px rgba(6,35,39,.04); }
.sp-card:hover, .sp-card:focus-visible { border-color: #9FC9C7; transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(6,35,39,.5); }
.sp-card header { display: flex; align-items: center; gap: 10px; } .sp-card header .grow { display: flex; flex-direction: column; min-width: 0; }
.sp-card header b { font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-card header small { color: var(--muted-2); font-size: 12px; }
.sp-av { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #0B8A8F, #04676B); flex: none; font-size: 16px; }
.sp-av.big { width: 52px; height: 52px; font-size: 22px; border-radius: 16px; }
.sp-info { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: #4E6361; } .sp-info span { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.sp-card footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-top: 1px dashed #E3ECEA; padding-top: 8px; }
.sp-card footer div { display: flex; flex-direction: column; } .sp-card footer span { font-size: 11px; color: #6B7F7D; } .sp-card footer b { font-size: 13.5px; color: var(--ink); }
.sp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: center; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #F2F8F7, #fff); border: 1px solid #E0E8E6; margin-bottom: 12px; }
.sp-ident { display: flex; align-items: center; gap: 12px; } .sp-ident h3 { margin: 0; font-size: 18px; } .sp-ident small { color: var(--muted-2); }
.sp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } .sp-facts div { display: flex; flex-direction: column; min-width: 0; }
.sp-facts span { font-size: 11.5px; color: #6B7F7D; } .sp-facts b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
/* expenses */
.ex-form .ex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ex-form .field { margin: 0; } .ex-form .field input, .ex-form .field select { width: 100%; }
.ex-sums { display: grid; grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.ex-sums > div { border: 1px solid #E0E8E6; border-radius: 14px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.ex-sums span { font-size: 12px; color: #6B7F7D; } .ex-sums b { font-size: 18px; color: var(--ink); font-feature-settings: 'tnum' 1; } .ex-sums small { font-size: 11px; color: #8FA3A1; }
.ex-sums .big { background: linear-gradient(135deg, #12464A, #082A2D); border-color: transparent; } .ex-sums .big span, .ex-sums .big small { color: #A9C7C4; } .ex-sums .big b { color: #F6D58D; font-size: 24px; }
.ex-sums .pur { background: #FFF8EA; border-color: #F1D9A6; }
.ex-filter { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ex-grps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ex-grp { border: 1px solid #E0E8E6; border-radius: 16px; padding: 12px 14px; background: #fff; border-top: 4px solid var(--brand); }
.ex-grp.g-admin { border-top-color: #7C5CC4; } .ex-grp.g-purchase { border-top-color: #E79800; }
.ex-grp header { display: flex; justify-content: space-between; align-items: baseline; } .ex-grp header b { font-size: 14.5px; } .ex-grp header span { font-weight: 700; color: var(--brand); }
.ex-grp .sub { margin: 2px 0 8px; font-size: 11.5px; }
.ex-items { display: flex; flex-direction: column; } .ex-items > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed #EDF2F1; font-size: 13px; }
.ex-items > div:first-child { border-top: 0; } .ex-items b { font-feature-settings: 'tnum' 1; } .ex-items .pur { color: #8A6A1F; } .ex-items small { color: var(--muted-2); }
/* profit */
.pf-top { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pf-views { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: #EAF1F0; align-self: flex-start; }
.pf-views button { border: 0; background: transparent; padding: 8px 16px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: #3E5856; cursor: pointer; }
.pf-views button.sel { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(6,35,39,.15); }
.pf-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-radius: 18px; color: #fff; margin-bottom: 12px;
  background: radial-gradient(500px 200px at 100% 0%, rgba(4,118,123,.6), transparent 60%), linear-gradient(135deg, #12464A, #082A2D); }
.pf-hero.neg { background: linear-gradient(135deg, #6B2420, #3D1210); }
.pf-hero > div:first-child span { font-size: 13px; color: #A9C7C4; display: block; } .pf-hero > div:first-child b { display: block; font-size: 34px; color: #F6D58D; } .pf-hero small { color: #8FB3B0; font-size: 12px; }
.pf-mini { display: flex; gap: 18px; flex-wrap: wrap; } .pf-mini div { display: flex; flex-direction: column; } .pf-mini span { font-size: 11.5px; color: #A9C7C4; } .pf-mini b { font-size: 17px; }
.pf-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.pl-row small { display: block; font-size: 11px; color: var(--muted-2); }
td.neg b { color: var(--danger); } td.pos b { color: #2E7D32; }
/* staff */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 12px 0; }
.st-card { border: 1px solid #E0E8E6; border-radius: 16px; background: #fff; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.st-card header { display: flex; align-items: center; gap: 10px; } .st-card header .grow { display: flex; flex-direction: column; } .st-card header small { color: var(--muted-2); font-size: 11.5px; text-align: start; }
.st-target { display: flex; flex-direction: column; gap: 5px; font-size: 13px; } .st-target small { color: #6B7F7D; font-size: 11.5px; }
.st-target .bar { height: 9px; border-radius: 9px; background: #EEF3F2; overflow: hidden; position: relative; } .st-target .bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #2FA4A9, #04767B); }
.st-target .bar.done i { background: linear-gradient(90deg, #7CB342, #2E7D32); }
.st-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .st-nums div { background: #F6FAF9; border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; }
.st-nums span { font-size: 11px; color: #6B7F7D; } .st-nums b { font-size: 14.5px; }
.st-pk { display: flex; flex-wrap: wrap; gap: 5px; } .st-pk span { font-size: 11.5px; background: #FFF4DC; color: #8A5A00; border-radius: 20px; padding: 2px 9px; }
.st-card footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #E3ECEA; padding-top: 8px; font-size: 12.5px; color: #5E7472; } .st-card footer b { color: var(--brand); font-size: 14.5px; }
.bn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.bn { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; align-items: center; border: 1px solid #E0E8E6; border-radius: 12px; padding: 8px 10px; }
.bn > div { display: flex; flex-direction: column; } .bn small { color: var(--muted-2); font-size: 11.5px; } .bn input { width: 100%; height: 34px; }
@media (max-width: 900px) { .ex-form .ex-grid { grid-template-columns: 1fr 1fr; } .ex-sums { grid-template-columns: 1fr 1fr; } .ex-sums .big { grid-column: 1 / -1; } .pf-cols, .sp-head { grid-template-columns: 1fr; } .sp-facts { grid-template-columns: 1fr; } }
.pf-cols.one { grid-template-columns: minmax(0, 760px); }

/* ═════════════ Logo reveal after sign-in (original mark, background = the sign-in screen's own) ═════════════ */
.welcome.wv { gap: 0; background-color: #05282B;
  background-image: radial-gradient(1100px 700px at 50% 38%, rgba(10,118,122,.42), transparent 62%), radial-gradient(520px 420px at 82% 12%, rgba(227,169,59,.10), transparent 70%),
    radial-gradient(620px 520px at 12% 92%, rgba(118,176,64,.10), transparent 70%), radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.2px);
  background-size: auto, auto, auto, 22px 22px; }
.wv-glow { position: absolute; left: 50%; top: 42%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(242,192,100,.22), rgba(227,169,59,.08) 38%, transparent 66%); opacity: 0; transform: scale(.75);
  animation: wvGlow 2.4s .1s cubic-bezier(.3,.6,.2,1) forwards; }
.wv-mark { position: relative; width: 168px; aspect-ratio: 420 / 438; margin-top: -24px; }
.wv-mark img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.wv-fig { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(12px); filter: blur(5px) drop-shadow(0 14px 26px rgba(0,0,0,.35));
  animation: wvFig 1s .1s cubic-bezier(.22,.9,.24,1) forwards; }
.wv-leaves { opacity: 0; transform-origin: 26% 52%; transform: scale(.55) rotate(-14deg); clip-path: circle(0% at 26% 52%);
  animation: wvLeaves .85s .65s cubic-bezier(.2,.9,.25,1.08) forwards; }
/* a soft gold light passing over the mark only (masked by its own two layers) */
.wv-sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,226,160,.0) 38%, rgba(255,230,170,.75) 50%, rgba(255,226,160,0) 62%, transparent 70%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask-image: url(../img/mark-figure.png), url(../img/mark-leaves.png); mask-image: url(../img/mark-figure.png), url(../img/mark-leaves.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mix-blend-mode: screen;
  animation: wvSheen .9s 1.35s ease-in-out forwards; }
.wv-word { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 22px; font-family: 'Inter', system-ui, sans-serif; line-height: 1; }
.wv-smart { font-size: 40px; font-weight: 700; color: #fff; letter-spacing: .5em; margin-right: -.5em; opacity: 0; filter: blur(4px);
  animation: wvWord .8s 1.45s cubic-bezier(.2,.8,.2,1) forwards; --ls: .16em; }
.wv-nut { font-size: 15px; font-weight: 600; color: #EF9A37; letter-spacing: .9em; margin-right: -.9em; opacity: 0; filter: blur(3px);
  animation: wvWord2 .8s 1.62s cubic-bezier(.2,.8,.2,1) forwards; }
.wv-line { width: 180px; height: 1px; margin-top: 18px; background: linear-gradient(90deg, transparent, #E3A93B, transparent); transform: scaleX(0); opacity: .9;
  animation: wvLine .7s 1.85s cubic-bezier(.4,0,.2,1) forwards; }
.wv-greet { margin: 14px 0 0; font-size: 14px; color: #9FC4C0; opacity: 0; animation: wlUp .5s 2s ease forwards; }
.wv-greet b { color: #EAF4F2; font-weight: 600; }
.welcome.wv.out { animation: wvOut .55s cubic-bezier(.4,0,.2,1) forwards; }
.welcome.wv.calm *, .welcome.wv.calm { animation: none !important; }
.welcome.wv.calm .wv-fig, .welcome.wv.calm .wv-leaves, .welcome.wv.calm .wv-smart, .welcome.wv.calm .wv-nut, .welcome.wv.calm .wv-greet, .welcome.wv.calm .wv-glow { opacity: 1; clip-path: none; transform: none; filter: none; letter-spacing: normal; }
.welcome.wv.calm .wv-smart { letter-spacing: .16em; margin-right: -.16em; } .welcome.wv.calm .wv-nut { letter-spacing: .5em; margin-right: -.5em; }
.welcome.wv.calm .wv-line { transform: none; } .welcome.wv.calm .wv-sheen { display: none; }
.welcome.wv.calm.out { opacity: 0; transition: opacity .25s; }
@keyframes wvGlow { 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: .85; transform: scale(1); } }
@keyframes wvFig { to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; filter: none; } }
@keyframes wvLeaves { to { opacity: 1; transform: none; clip-path: circle(150% at 26% 52%); } }
@keyframes wvSheen { 0% { opacity: 0; background-position: 130% 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
@keyframes wvWord { to { opacity: 1; filter: blur(0); letter-spacing: .16em; margin-right: -.16em; } }
@keyframes wvWord2 { to { opacity: 1; filter: blur(0); letter-spacing: .5em; margin-right: -.5em; } }
@keyframes wvLine { to { transform: scaleX(1); } }
@keyframes wvOut { to { opacity: 0; transform: scale(1.04); filter: blur(5px); } }
@media (max-width: 520px) { .wv-mark { width: 132px; } .wv-smart { font-size: 31px; } .wv-nut { font-size: 12px; } }
/* sign-in: remember me / forgot password — same look as the card */
.lf-opts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 2px 0; font-size: 13px; }
.lf-remember { display: inline-flex; align-items: center; gap: 8px; color: #A9C7C4; cursor: pointer; user-select: none; }
.lf-remember input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lf-box { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); display: grid; place-items: center; transition: all .15s; }
.lf-remember input:checked + .lf-box { background: linear-gradient(180deg, #F2C064, #D9A03A); border-color: transparent; }
.lf-remember input:checked + .lf-box::after { content: ''; width: 5px; height: 9px; border: solid #1B1300; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.lf-remember input:focus-visible + .lf-box { outline: 2px solid #F2C064; outline-offset: 2px; }
.lf-forgot { border: 0; background: none; padding: 0; font: inherit; color: #E3A93B; cursor: pointer; }
.lf-forgot:hover { color: #F2C064; text-decoration: underline; text-underline-offset: 3px; }
.fp-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.fp-field input { height: 42px; border: 1px solid #D5E1DF; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; }
.fp-note { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; font-size: 12.5px; color: #5E7472; line-height: 1.6; } .fp-note .ico { color: var(--brand); flex: none; margin-top: 2px; }
/* phone: log-out stays in the top bar as an icon button (it wrapped under the search field) */
@media (max-width: 760px) {
  .t-top { flex-wrap: nowrap !important; gap: 8px; }
  .t-top .tb-logout { width: 34px; height: 34px; padding: 0; justify-content: center; flex: none; }
  .t-top .tb-logout span:not([data-icon]):not(.ico) { display: none; }
  .t-top .topbar-logo { flex: none; }
}
/* sign-in card a little more compact so the footer fits at 768px height with the new row */
.lf-opts { margin-top: 10px; } .login .form-error { min-height: 16px; margin-top: 4px; }
/* home: cost cards */
.cost-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; margin-bottom: 14px; }
.cc { border: 1px solid #E0E8E6; border-radius: 16px; background: #fff; padding: 12px 14px; }
.cc header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .cc header b { font-size: 14px; }
.cc-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.cc-row > div { display: flex; flex-direction: column; gap: 2px; background: #F6FAF9; border-radius: 12px; padding: 8px 10px; }
.cc-row span { font-size: 11.5px; color: #6B7F7D; } .cc-row b { font-size: 16px; font-feature-settings: 'tnum' 1; } .cc-row small { font-size: 11px; color: #8FA3A1; }
.cc-row .tot { background: linear-gradient(135deg, #12464A, #0B3236); } .cc-row .tot span, .cc-row .tot small { color: #A9C7C4; } .cc-row .tot b { color: #F6D58D; }
@media (max-width: 900px) { .cost-cards { grid-template-columns: 1fr; } .cc-row { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }
/* today's income pill + modal */
.tb-today { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(246,213,141,.35);
  background: linear-gradient(180deg, rgba(246,213,141,.16), rgba(246,213,141,.06)); color: #F6D58D; font: inherit; font-size: 12.5px; cursor: pointer; margin-inline-start: 6px; }
.tb-today b { color: #fff; font-feature-settings: 'tnum' 1; } .tb-today:hover { border-color: #F6D58D; }
.td-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.td-k { border: 1px solid #E0E8E6; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.td-k span { font-size: 12px; color: #6B7F7D; } .td-k b { font-size: 18px; font-feature-settings: 'tnum' 1; } .td-k.neg b { color: var(--danger); }
.td-k.main { background: linear-gradient(135deg, #12464A, #0B3236); border-color: transparent; } .td-k.main span { color: #A9C7C4; } .td-k.main b { color: #F6D58D; }
.td-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .td-cols h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--brand); }
.td-list { border: 1px solid #E0E8E6; border-radius: 12px; overflow: hidden; }
.td-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px; gap: 8px; align-items: center; padding: 8px 12px; border-top: 1px solid #EEF3F2; font-size: 13.5px; }
.td-list > div:first-child { border-top: 0; } .td-list small { color: var(--muted-2); font-size: 11.5px; } .td-list b { text-align: end; font-feature-settings: 'tnum' 1; }
.td-list .tot { background: #F2F8F7; } .td-list .tot b { color: var(--brand); }
@media (max-width: 900px) { .td-row { grid-template-columns: 1fr 1fr; } .td-row .main { grid-column: 1 / -1; } .td-cols { grid-template-columns: 1fr; } .tb-today .tt-l { display: none; } }
.sg .q .wq { color: #6B7F7D; font-weight: 500; }
.cust-line .cl-i.gold { background: #FFF4DC; color: #8A5A00; }
.rf-box { display: flex; flex-direction: column; gap: 8px; }
.rf-methods { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.rf-methods .pm { flex-direction: column; gap: 2px; } .rf-methods .pm small { font-size: 10.5px; opacity: .75; }
.rf-methods .pm:disabled { opacity: .45; cursor: not-allowed; }
.rf-ref { font-size: 16px !important; text-align: start !important; }
@media (max-width: 700px) { .rf-methods { grid-template-columns: 1fr 1fr !important; } }
.pk-spec { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink, #13262A); }
.pk-spec select { height: 38px; border-radius: 10px; border: 1px solid rgba(0,0,0,.15); padding: 0 10px; font: inherit; background: rgba(255,255,255,.85); }
.mf-edited { font-size: 11.5px; opacity: .8; }

/* ═════════════ Logo reveal v2: the mark glides into the official lockup (geometry measured from logo-dark.png) ═════════════ */
.wv-lock { position: relative; width: min(460px, 82vw); aspect-ratio: 640 / 268; margin-top: 40px; }
.wv-lock > img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
/* final place of the mark inside the lockup = where the symbol is in the official logo */
.wv-lock .wv-mark { position: absolute; left: 52.54%; top: -0.28%; width: 29.99%; height: 74.69%; margin: 0; aspect-ratio: auto;
  transform: translate(-58.5%, 4%) scale(1.75); transform-origin: 50% 50%;
  animation: wvGlide 1s 2.25s cubic-bezier(.65,0,.25,1) forwards; }
.wv-lock .wv-fig { animation: wvFig 1.25s .15s cubic-bezier(.22,.9,.24,1) forwards; }
.wv-lock .wv-leaves { animation: wvLeaves 1.05s .85s cubic-bezier(.2,.9,.25,1.06) forwards; }
.wv-lock .wv-sheen { animation: wvSheen 1s 1.7s ease-in-out forwards; }
.wv-letters { opacity: 0; filter: blur(3px); transform: translateY(5px); animation: wvLetters .8s 2.5s cubic-bezier(.2,.8,.2,1) forwards; }
.wv-official { opacity: 0; animation: wvOfficial .35s 3.2s ease forwards; }
.welcome.wv .wv-line { margin-top: 22px; animation: wvLine .7s 3.05s cubic-bezier(.4,0,.2,1) forwards; }
.welcome.wv .wv-greet { animation: wlUp .5s 3.15s ease forwards; }
.welcome.wv .wv-glow { top: 46%; animation: wvGlow 2.8s .1s cubic-bezier(.3,.6,.2,1) forwards; }
@keyframes wvGlide { to { transform: none; } }
@keyframes wvLetters { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes wvOfficial { to { opacity: 1; } }
.welcome.wv.calm .wv-lock .wv-mark { transform: none; }
.welcome.wv.calm .wv-letters, .welcome.wv.calm .wv-official { opacity: 1; filter: none; transform: none; }
@media (max-width: 520px) { .wv-lock { width: min(320px, 86vw); margin-top: 28px; } }
/* phone: the top bar must fit the screen width — otherwise the phone zooms the whole page out and the bottom is cut */
.tb-today b { white-space: nowrap; }
@media (max-width: 760px) {
  .t-top { gap: 6px !important; padding-inline: 10px !important; min-width: 0; }
  .t-top .topbar-logo { height: 34px; }
  .t-top .tb-today { height: 32px; padding: 0 9px; gap: 5px; margin-inline-start: 0; font-size: 12px; flex: none; }
  .t-top .tb-admin { width: 34px; height: 34px; padding: 0 !important; justify-content: center; flex: none; }
  .t-top .tb-admin span:not([data-icon]):not(.ico) { display: none; }
  .t-top .tb-btn, .t-top .tb-tools > * { flex: none; }
  .t-top .online { display: none; }
}
@media (max-width: 360px) { .t-top .tb-today [data-icon], .t-top .tb-today .ico { display: none; } .t-top .topbar-logo { height: 30px; } }
/* combo summary row: text and amount side by side, never on top of each other (phone widths) */
.cart-row.combo-sum { height: auto !important; min-height: var(--row, 34px); padding-block: 5px; }
.cart-row.combo-sum .cs-text { flex: 1 1 auto; width: auto; position: static; }
.cart-row.combo-sum .cs-amt { flex: none; position: static; }
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .suggest { max-width: 100%; overflow-x: hidden; }
  .cart-row.combo-sum .cs-text small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cart-row .del, .cart-row button[aria-label="حذف السطر"] { min-width: 32px; min-height: 32px; }
  .rt-chk { width: 22px; height: 22px; }
}
@media (max-width: 760px) { .t-input .suggest { left: 0 !important; right: 0 !important; width: auto !important; min-width: 0 !important; } }
/* iPhone: Safari zooms the page in when a field under 16px gets focus (the payment window looked shifted) —
   every field is 16px on phones. */
@media (max-width: 760px) {
  input, select, textarea, .amount-in { font-size: 16px !important; }
  /* customer forms (new customer, customer file): one column — label beside a full-width field */
  .nm .mf-table, .mf .mf-table { grid-template-columns: minmax(0, 1fr) !important; }
  .nm .mf-table .tr, .mf .mf-table .tr { grid-template-columns: 112px minmax(0, 1fr) !important; min-height: 46px; border-inline-end: 0 !important; grid-column: auto !important; }
  .nm .mf-table .tr input, .nm .mf-table .tr select, .mf .mf-table .tr input, .mf .mf-table .tr select { height: 38px; }
  .mf-table input[type=date] { -webkit-appearance: none; appearance: none; min-width: 0; text-align: start; display: block; line-height: 38px; }
  .nm-choice { flex-wrap: wrap; }
  .nm-head { flex-wrap: wrap; gap: 8px; }
}
/* Z report: the center's whole day on top (matches «دخل المركز اليوم»), then this employee's session */
.zr-day { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: stretch; margin-bottom: 12px; border: 1px solid #E8D6A8; background: #FFF9EC; border-radius: 16px; padding: 12px 14px; }
.zr-day-main { display: flex; flex-direction: column; gap: 2px; } .zr-day-main span { font-size: 12.5px; color: #8A6A2E; } .zr-day-main b { font-size: 26px; color: #6B4500; font-feature-settings: 'tnum' 1; } .zr-day-main small { font-size: 12px; color: #8A6A2E; }
.zr-day-staff { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.zr-day-staff > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.7); } .zr-day-staff > div.me { outline: 1px solid #E79800; }
.zr-day-staff b { font-feature-settings: 'tnum' 1; }
@media (max-width: 760px) { .zr-day { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .rp { grid-template-columns: minmax(0, 1fr) !important; } .rp > * { min-width: 0; } .rp-find { min-width: 0; width: 100%; box-sizing: border-box; } }
/* Z report: who sold how much — a breakdown that adds up to the same total */
.zr-staff-btn { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid #CFE0DE; background: #F3F8F7; color: var(--brand); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.zr-staff-btn[aria-expanded="true"] { background: #E4F0EE; }
.zr-staff { border: 1px solid #E0E8E6; border-radius: 14px; padding: 6px 12px; margin-bottom: 12px; background: #fff; }
.zr-staff .zl.sum { border-top: 1px dashed #D5E1DF; margin-top: 4px; padding-top: 8px; } .zr-staff .zl.neg b { color: var(--danger); }
/* today's income: the eye hides / shows the amount */
.tb-today-w { display: inline-flex; align-items: center; gap: 4px; flex: none; } .tb-today-w[hidden] { display: none; }
.tb-today-w .tb-today { margin-inline-start: 0; }
.tb-eye { width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(246,213,141,.35); background: rgba(246,213,141,.08); color: #F6D58D; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.tb-eye:hover { border-color: #F6D58D; } .tb-today b.masked { letter-spacing: .12em; }
@media (max-width: 760px) { .tb-eye { width: 30px; height: 30px; } }
/* phone: amount and eye in one pill (the bar must stay within the screen width) */
@media (max-width: 760px) {
  .t-top > .spacer { display: none; } .t-top .tb-today-w + .spacer + *, .t-top .tb-admin { margin-inline-start: auto; }
  .t-top .tb-today-w { gap: 0; border: 1px solid rgba(246,213,141,.35); border-radius: 999px; background: linear-gradient(180deg, rgba(246,213,141,.16), rgba(246,213,141,.06)); }
  .t-top .tb-today-w .tb-today { border: 0; background: transparent; padding-inline: 10px 2px; }
  .t-top .tb-today [data-icon], .t-top .tb-today .ico { display: none; }
  .t-top .tb-today-w .tb-eye { border: 0; background: transparent; width: 30px; height: 30px; }
}
@media (max-width: 380px) { .t-top { gap: 5px !important; padding-inline: 8px !important; } .t-top .topbar-logo { height: 30px; } }
.tb-today b .cur { font-size: .85em; font-weight: 600; opacity: .8; }
@media (max-width: 400px) { .t-top .tb-today b .cur { display: none; } .t-top .tb-today-w .tb-today { padding-inline: 9px 0; } }
.td-cols.one { grid-template-columns: 1fr; }
/* new customer → subscription: the nutrition specialist */
.nm-spec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; padding: 10px 12px; border: 1px solid #E8D6A8; background: #FFF9EC; border-radius: 12px; }
.nm-spec[hidden] { display: none; }
.nm-spec span { font-weight: 600; font-size: 14px; color: #6B4500; }
.nm-spec select { flex: 1 1 220px; min-width: 0; height: 40px; border: 1px solid #D9C79C; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 15px; background: #fff; }

/* Customer activity log (32_credit_docs): every operation stays listed; voided ones are marked, not struck out */
.mf-pane .act-list { max-height: 300px; }
.act-row { align-items: flex-start; gap: 10px; text-align: start; }
.mf-secs .act-row.void { text-decoration: none; opacity: .8; }
.act-row .act-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--line-2, #EEF3F2); color: #04767B; margin-top: 2px; }
.act-row.k-credit_return .act-ico, .act-row.k-credit_exchange .act-ico, .act-row.k-credit_old .act-ico, .act-row.k-return .act-ico { background: #FDF3DF; color: #9A6500; }
.act-row .grow small { display: block; line-height: 1.5; }
.act-row .act-meta { opacity: .7; }
.act-row .act-st { color: #B42318; font-style: normal; font-weight: 600; }
.act-row .act-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
@media (max-width: 640px) { .act-row { flex-wrap: wrap; } .act-row .act-side { flex-direction: row; gap: 8px; width: 100%; justify-content: flex-start; padding-inline-start: 40px; } }
.mf-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Phone: the customer file in one column (data, then the buttons two by two, then the tabs and the log) */
@media (max-width: 700px) {
  .mf { grid-template-columns: minmax(0, 1fr) !important; }
  .mf .mf-side { display: grid; grid-template-columns: 1fr 1fr; }
  .mf .mf-side .mf-spec { grid-column: 1 / -1; }
  .mf .mf-secs { grid-column: 1 / -1 !important; }
  .mf-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mf-tab { padding: 7px 3px; font-size: 11.5px; }
  .mf-pane .act-list { max-height: 60vh; }
}

/* ── Previous invoices: a clear table (number · date · time · customer · employee · payment · amount) ── */
.tx-list { border: 1px solid #DCE6E4; border-radius: 14px; background: #fff; overflow: auto; max-height: calc(100vh - 340px); }
.tx-row { display: grid; grid-template-columns: 150px 92px 56px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 104px 18px; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid #EEF3F2; background: #fff; font: inherit; color: var(--ink); text-align: start; cursor: pointer; }
.tx-row:last-child { border-bottom: 0; }
button.tx-row:nth-of-type(even) { background: #FAFCFC; }
button.tx-row:hover { background: #EEF7F6; }
button.tx-row:focus-visible { outline: 2px solid #04767B; outline-offset: -2px; }
.tx-head { position: sticky; top: 0; z-index: 1; background: #F2F7F6 !important; cursor: default; padding-block: 8px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid #DCE6E4; }
.tx-row > span { min-width: 0; }
.tx-no { font-weight: 700; color: #04767B; font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-start; direction: ltr; }
[dir="rtl"] .tx-no { justify-content: flex-end; }
.tx-date, .tx-time { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tx-time { color: var(--muted); }
.tx-cust { display: flex; flex-direction: column; line-height: 1.35; }
.tx-cust b { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-cust i { font-style: normal; color: var(--muted-2, #8A9A98); font-size: 13px; }
.tx-cust small { color: var(--muted); font-size: 11.5px; align-self: flex-start; }
.tx-emp .who-chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tx-pay { display: flex; flex-wrap: wrap; gap: 4px; }
.pm-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 99px; background: #EEF3F2; color: #3D5553; white-space: nowrap; }
.pm-chip.cash { background: #E8F5EC; color: #1F7A3E; }
.pm-chip.card { background: #E6EFF8; color: #24547E; }
.pm-chip.benefit { background: #FDEDEE; color: #A3262E; }
.pm-chip.voucher { background: #FDF3DF; color: #9A6500; }
.pm-chip.later { background: #F3EAF8; color: #6B3A8A; }
.tx-amt { font-weight: 700; font-size: 15px; text-align: end; font-variant-numeric: tabular-nums; }
.tx-amt small { font-weight: 500; font-size: 11px; color: var(--muted); }
.tx-go { color: #9FB5B3; font-size: 20px; line-height: 1; text-align: center; }
[dir="ltr"] .tx-go { transform: scaleX(-1); }
.tx-row.void .tx-amt { text-decoration: line-through; color: var(--muted); }
.tx-row.void .tx-date, .tx-row.void .tx-cust, .tx-row.void .tx-emp, .tx-row.void .tx-pay { opacity: .6; }
.tx-void { font-style: normal; font-size: 11px; font-weight: 600; color: #B42318; background: #FDECEA; border-radius: 99px; padding: 1px 8px; }
.tx-list .empty { padding: 28px; text-align: center; color: var(--muted); }
.tx-list .tx-more { display: block; margin: 10px auto; }
.tx-sum { border: 1px solid #DCE6E4; background: #F6FAF9; border-radius: 12px; padding: 10px 14px; }
.tx-sum b { color: #04767B; font-size: 17px; }
@media (max-width: 1000px) { .tx-row { grid-template-columns: 140px 88px 50px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr) 96px 14px; gap: 8px; padding-inline: 10px; } }
/* Phone: a card per invoice — number and amount on top, date · time, customer, employee and payment below */
@media (max-width: 760px) {
  .tx-list { max-height: calc(100vh - 300px); border-radius: 12px; }
  .tx-head { display: none; }
  .tx-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no amt" "dt dt" "cust cust" "meta meta"; gap: 4px 10px; padding: 11px 12px; }
  .tx-no { grid-area: no; }
  .tx-amt { grid-area: amt; }
  .tx-date { grid-area: dt; font-size: 12px; color: var(--muted); }
  .tx-time { display: none; }
  .tx-date::after { content: attr(data-time); }
  .tx-cust { grid-area: cust; flex-direction: row; gap: 8px; align-items: baseline; }
  .tx-emp, .tx-pay { grid-area: meta; }
  .tx-row .tx-emp { justify-self: start; }
  .tx-row .tx-pay { justify-self: end; }
  .tx-go { display: none; }
}

/* ── Invoice view: the printed receipt on paper, the status and amount above it ── */
.modal-body.iv-body { background: #EEF3F2; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.iv-strip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #DCE6E4; border-radius: 12px; padding: 9px 14px; }
.iv-st { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; background: #E8F5EC; color: #1F7A3E; }
.iv-strip.void .iv-st { background: #FDECEA; color: #B42318; }
.iv-when { flex: 1; font-size: 13px; color: var(--muted); }
.iv-amt { font-size: 17px; color: #04767B; }
.iv-strip.void .iv-amt { text-decoration: line-through; color: var(--muted); }
.iv-paper { position: relative; background: #fff; border-radius: 4px; padding: 18px 10px 22px; box-shadow: 0 1px 2px rgba(10, 40, 40, .08), 0 10px 28px -12px rgba(10, 40, 40, .28); }
.iv-paper .receipt { margin: 0 auto; }
.iv-paper.void::after { content: 'ملغاة'; position: absolute; inset: 40% 0 auto; text-align: center; font-size: 46px; font-weight: 800; color: rgba(180, 35, 24, .18); transform: rotate(-18deg); pointer-events: none; }
[lang="en"] .iv-paper.void::after { content: 'VOIDED'; }
.tx-head span:nth-child(7) { text-align: end; }
/* Exchange of a bought product: the difference panel */
.px-diff:empty { display: none; }
.px-diff { margin-top: 12px; border: 1px solid #DCE6E4; border-radius: 12px; background: #F6FAF9; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.px-line { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.px-line span { color: var(--muted); }
.px-tot { border-top: 1px dashed #CFDCDA; padding-top: 6px; font-size: 15px; }
.px-tot b { font-size: 18px; }
.px-tot.pay b { color: #9A6500; }
.px-tot.get b { color: #04767B; }
.px-f { display: flex; align-items: center; gap: 10px; }
.px-f span { flex: none; font-size: 13px; color: var(--muted); }
.px-f select, .px-f input { flex: 1; height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; font: inherit; background: #fff; }
.mf-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 700px) { .mf-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }