/* ============================================================
   MedCenter ERP — Design System (blue, 2026-09-09)
   ------------------------------------------------------------
   One accent (medical blue), a near-white canvas, white cards,
   hairline borders and very soft elevation. No gold, no maroon,
   no navy slab, no 3D. RTL-first: logical properties everywhere,
   physical alignment only where a cell flips its own direction
   (.n / .mono carry LTR digits inside Arabic text).

   Every colour in this file comes from a token. Raw hex appears
   only in the token block below and inside the data: URIs that
   cannot read custom properties.
   ============================================================ */

:root{
  /* ---- blue scale ------------------------------------------------ */
  --blue-50:#F2F6FD;
  --blue-100:#E3ECFB;
  --blue-200:#C6D9F7;
  --blue-300:#9CBCF0;
  --blue-400:#6598E5;
  --blue-500:#3B7BDE;
  --blue-600:#1B62D6;
  --blue-700:#154FAE;
  --blue-800:#143F88;
  --blue-900:#12336B;

  /* ---- neutral scale (very slightly cool) ------------------------ */
  --grey-50:#F7F8FA;
  --grey-100:#F0F2F6;
  --grey-200:#E6E9EF;
  --grey-300:#D5DAE3;
  --grey-400:#AAB2C0;
  --grey-500:#8892A2;
  --grey-600:#6B7688;
  --grey-700:#4B5565;
  --grey-800:#2C333F;
  --grey-900:#171C24;

  /* ---- semantic surfaces ----------------------------------------- */
  --canvas:#F7F8FA;
  --canvas-veil:rgba(247,248,250,.88);   /* sticky bars over the canvas */
  --surface:#FFFFFF;
  --surface-2:#F4F6FA;
  --surface-3:#FAFBFD;
  --border:#E6E9EF;
  --border-strong:#D5DAE3;

  /* ---- semantic text --------------------------------------------- */
  --text:#171C24;
  --text-2:#4B5565;
  --text-3:#626C7D;

  /* ---- accent ----------------------------------------------------- */
  --accent:#1B62D6;
  --accent-hover:#154FAE;
  --accent-active:#143F88;
  --accent-soft:#EAF1FD;
  --accent-soft-2:#D8E5FB;
  --accent-line:#C6D9F7;
  --accent-ink:#144EAF;
  --accent-contrast:#FFFFFF;
  --on-accent:#FFFFFF;      /* text/icons that sit on any coloured field */
  --shade:#000000;          /* only ever used inside a colour-mix */

  /* sidebar: a deep but unmistakably blue field, never navy-black */
  --side-bg:#154FAE;
  --side-text:#E4EDFB;
  --side-text-dim:#BDD3F5;
  --side-line:rgba(255,255,255,.16);
  --side-hover:rgba(255,255,255,.12);

  /* ---- status ------------------------------------------------------ */
  --ok:#0B7A46;      --ok-bg:#E8F6EE;    --ok-line:#BFE3CE;    --ok-ink:#0A6238;
  --warn:#C07C10;    --warn-bg:#FFF6E6;  --warn-line:#F0DCB1;  --warn-ink:#7A4B00;
  --danger:#D22B3F;  --danger-bg:#FDEBED;--danger-line:#F5C6CC;--danger-ink:#A81E30;
  --info:#1B62D6;    --info-bg:#EAF1FD;  --info-line:#C6D9F7;  --info-ink:#144EAF;

  /* ---- print: ink and rules that survive a laser printer ------------ */
  --print-ink:#000000; --print-paper:#FFFFFF; --print-rule:#C9CED8; --print-hair:#E2E5EA; --print-accent:#1B62D6; --print-line:#98A0AE;

  /* ---- elevation: one shadow in three layers ------------------------
     A tight contact shadow keeps the edge crisp, a soft ambient gives the
     card its body, a wide far shadow lifts it off the canvas. All three are
     tinted with the sidebar blue rather than black: on a cool canvas a grey
     shadow reads as dirt, a blue one reads as depth. Total ink never passes
     ~25%, which is why the page stays calm with everything raised. */
  --raise:
    0 1px 1px rgba(20,63,136,.06),
    0 3px 6px -2px rgba(20,63,136,.09),
    0 14px 28px -12px rgba(20,63,136,.10);
  --raise-hover:
    0 1px 1px rgba(20,63,136,.07),
    0 8px 14px -4px rgba(20,63,136,.12),
    0 26px 44px -16px rgba(20,63,136,.16);
  --raise-press:
    0 1px 1px rgba(20,63,136,.10),
    0 2px 3px -1px rgba(20,63,136,.10);
  /* the lit top edge: what turns a rectangle into a moulded surface */
  --lit:inset 0 1px 0 rgba(255,255,255,.9);
  --lit-2:inset 0 1px 0 rgba(255,255,255,.34);
  /* fields are the opposite of a card: sunk into the surface they sit on */
  --sunk:inset 0 1px 2px rgba(20,63,136,.10),inset 0 0 0 1px rgba(20,63,136,.02);
  /* surfaces are gradients, never flat white */
  --card-grad:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%);
  --head-grad:linear-gradient(180deg,#FCFDFF 0%,#F1F4FA 100%);
  --btn-grad:linear-gradient(180deg,#FFFFFF 0%,#F4F7FC 100%);
  --foot-grad:linear-gradient(180deg,#F7F9FD 0%,#EFF3F9 100%);

  --e1:0 1px 1px rgba(20,63,136,.05),0 2px 4px -1px rgba(20,63,136,.07);
  --e2:var(--raise);
  --e3:0 2px 4px rgba(20,63,136,.07),0 14px 26px -8px rgba(20,63,136,.16),0 36px 64px -24px rgba(20,63,136,.22);
  --ring:0 0 0 3px rgba(27,98,214,.22);
  --ring-danger:0 0 0 3px rgba(210,43,63,.20);

  /* ---- department tones --------------------------------------------
     Eight families anchored on the blue primary. Each is deep and slightly
     desaturated (premium, never neon) and carries a 400/500/600 ramp for
     gradients, a wash for the card corner, and an ink that clears AA on
     white; the lowest is teal at 6.8:1. The default is the primary blue, so
     anything that forgets to name a tone still looks deliberate. */
  --tone-400:#4A86E3; --tone-500:#2C6FD9; --tone-600:#1B55B8; --tone-ink:#14509F;
  --tone-wash:rgba(44,111,217,.10);
  --tone:var(--tone-500); --tone-2:var(--tone-400);
  /* the wash sits in the leading top corner; [dir=rtl] flips it below */
  --wash-at:0% 0%;

  /* ---- radii -------------------------------------------------------- */
  --r-xs:7px; --r-sm:11px; --r-md:16px; --r-lg:20px;
  --r:16px;

  /* ---- spacing ------------------------------------------------------ */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  --page-x:24px;   /* page gutter */
  --gap:16px;      /* gap between cards */
  --pad:20px;      /* padding inside a card */

  /* ---- shell metrics ------------------------------------------------ */
  --side:264px; --top:64px;

  /* ---- z-index ------------------------------------------------------ */
  --z-tabs:25; --z-topbar:30; --z-scrim:35; --z-side:40; --z-menu:60; --z-search:70; --z-dialog:80; --z-toast:90;

  /* ---- type --------------------------------------------------------- */
  --ar:'Tajawal','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --en:'Inter','Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  --num:'Inter',system-ui,sans-serif;

  --fs-display:28px; --lh-display:1.22;
  --fs-h1:22px;      --lh-h1:1.32;
  --fs-h2:17px;      --lh-h2:1.40;
  --fs-body:14px;    --lh-body:1.60;
  --fs-sm:12.5px;    --lh-sm:1.55;
  --fs-micro:11px;   --lh-micro:1.45;

  /* Legacy aliases. A handful of views still name the old palette; they now
     resolve onto the blue system instead of falling back to nothing. */
  --maroon:var(--accent); --maroon-2:var(--accent); --maroon-3:var(--blue-500); --maroon-4:var(--blue-400);
  --maroon-deep:var(--text); --maroon-ink:var(--blue-900);
  --maroon-tint:var(--accent-soft); --maroon-tint-2:var(--accent-line);
  --gold:var(--accent); --gold-soft:var(--accent-line); --gold-deep:var(--accent-ink); --gold-tint:var(--accent-soft);
  --paper:var(--canvas); --paper-2:var(--grey-100);
  --card:var(--surface); --card-2:var(--surface-3);
  --line:var(--border); --line-2:var(--border-strong);
  --ink:var(--text); --text-dim:var(--text-2); --muted:var(--text-3);
  --sh-1:var(--e1); --sh-2:var(--e2); --sh-3:var(--e3); --sh-4:var(--e3);
}

/* ============================================================
   Department tones
   The keys are the ones config/modules.php already hands out; only the
   values moved onto the new families. Set the class anywhere (a card, a row,
   a whole grid) and every tile, wash, pill and bar underneath picks it up.
   ============================================================ */
.tone-maroon,.tone-primary{--tone-400:#4A86E3;--tone-500:#2C6FD9;--tone-600:#1B55B8;--tone-ink:#14509F;--tone-wash:rgba(44,111,217,.10)}
.tone-plum,.tone-indigo   {--tone-400:#7B72DE;--tone-500:#5B51CC;--tone-600:#43389F;--tone-ink:#4438A8;--tone-wash:rgba(91,81,204,.10)}
.tone-teal                {--tone-400:#2E9E97;--tone-500:#12867E;--tone-600:#0B6560;--tone-ink:#0A6660;--tone-wash:rgba(18,134,126,.11)}
.tone-green,.tone-emerald {--tone-400:#2FA167;--tone-500:#128B4E;--tone-600:#0A6A3B;--tone-ink:#0A6B3B;--tone-wash:rgba(18,139,78,.11)}
.tone-gold,.tone-amber    {--tone-400:#C08414;--tone-500:#A96F09;--tone-600:#8A5803;--tone-ink:#7A4B00;--tone-wash:rgba(169,111,9,.11)}
.tone-orange,.tone-rose   {--tone-400:#E06578;--tone-500:#D6415A;--tone-600:#AF2942;--tone-ink:#AC2038;--tone-wash:rgba(214,65,90,.10)}
.tone-blue,.tone-cyan     {--tone-400:#2A9BC4;--tone-500:#0E80A8;--tone-600:#0A6180;--tone-ink:#0A6383;--tone-wash:rgba(14,128,168,.11)}
.tone-slate               {--tone-400:#7A8497;--tone-500:#5C687C;--tone-600:#414C5E;--tone-ink:#414B5C;--tone-wash:rgba(92,104,124,.11)}
/* status borrows the same families, so a KPI and a pill never disagree */
.tone-ok  {--tone-400:#2FA167;--tone-500:#128B4E;--tone-600:#0A6A3B;--tone-ink:#0A6B3B;--tone-wash:rgba(18,139,78,.11)}
.tone-warn{--tone-400:#C08414;--tone-500:#A96F09;--tone-600:#8A5803;--tone-ink:#7A4B00;--tone-wash:rgba(169,111,9,.11)}
.tone-bad {--tone-400:#E06578;--tone-500:#D6415A;--tone-600:#AF2942;--tone-ink:#AC2038;--tone-wash:rgba(214,65,90,.10)}

/* ============ Base ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;color-scheme:light;-webkit-text-size-adjust:100%}
body{
  min-height:100%;font-family:var(--ar);background:var(--canvas);color:var(--text);
  font-size:var(--fs-body);line-height:1.75;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* Latin runs read tighter than Arabic, which needs the extra leading. */
[dir="ltr"] body{font-family:var(--en);line-height:var(--lh-body);letter-spacing:-.005em}
[dir="ltr"] input,[dir="ltr"] button,[dir="ltr"] select,[dir="ltr"] textarea{font-family:var(--en)}
[dir="rtl"]{--wash-at:100% 0%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;color:inherit}
svg{flex:0 0 auto}
svg:where(:not([width])){width:1.15em;height:1.15em}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em}
/* Numbers and codes need bidi isolation, otherwise a minus sign or a decimal
   separator jumps to the wrong end inside Arabic text. */
.mono,.n,td.n,.stat .s-val{direction:ltr;unicode-bidi:isolate}
::selection{background:var(--accent-soft-2);color:var(--accent-active)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--grey-300);border-radius:10px;border:2px solid var(--canvas)}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* One focus ring for the whole app: a 2px accent outline, always visible. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-offset:3px}

.muted{color:var(--text-3)}
.mono{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:0}
.n{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:0}
.plus{color:var(--ok)} .minus{color:var(--danger-ink)}
.net{color:var(--accent);font-weight:700} .gold{color:var(--accent-ink)}
.nowrap{white-space:nowrap}
.hint{font-size:var(--fs-micro);color:var(--text-3);line-height:1.6}

kbd{font-family:var(--num);font-size:var(--fs-micro);line-height:1;color:var(--text-3);
  border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--r-xs);
  padding:3px 6px;background:var(--btn-grad);white-space:nowrap;display:inline-block;
  box-shadow:0 1px 1px rgba(20,63,136,.08),inset 0 1px 0 #FFFFFF}

/* ============ Background ============
   The canvas is a flat near-white now; the animated maroon mesh is gone. The
   elements stay in the markup so no view breaks. */
.scene{position:fixed;inset:0;z-index:-2;background:var(--canvas)}
.mesh{display:none}

/* ============ Cards ============
   The recipe every surface in the app follows, and the answer to "all white,
   looks poor": a gradient instead of flat white, a lit top edge, a wash of
   the card's own tone in the leading top corner, three layers of blue-tinted
   shadow, and a border that darkens along the bottom edge where a real object
   would catch its own shadow. */
.card,.glass{
  background:var(--card-grad);border:1px solid var(--border);border-bottom-color:var(--border-strong);
  border-radius:var(--r-md);box-shadow:var(--raise),var(--lit);
  position:relative;isolation:isolate;min-width:0;
  transition:box-shadow .16s ease,transform .16s ease;
}
/* The wash. z-index:-1 paints it over the card's own background and under its
   content, so no child ever needs a stacking fix of its own. */
.card::before,.glass::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px 170px at var(--wash-at),var(--tone-wash),transparent 70%);
  opacity:.85;transition:opacity .16s ease;
}
.raised,.card3d{transition:box-shadow .16s ease,transform .16s ease}
.raised:hover,.card3d:hover{box-shadow:var(--raise-hover),var(--lit)}
.raised:hover::before,.card3d:hover::before{opacity:1}
/* Only a card you can act on moves under the pointer; a card holding a table
   that jumped every time the mouse crossed it would be noise, not depth. */
a.card:hover,button.card:hover,label.card:hover,.stat:hover,.hub-card:hover{transform:translateY(-3px)}
a.card:active,button.card:active,label.card:active,.stat:active,.hub-card:active{
  transform:translateY(1px);box-shadow:var(--raise-press),var(--lit)}
.card.flat{box-shadow:none;background:var(--surface);border-bottom-color:var(--border)}
.card.flat::before{opacity:0}
.card.tint{background:linear-gradient(180deg,var(--accent-soft),#FFFFFF);border-color:var(--accent-line)}
.card.gold-edge{border-top:2px solid var(--accent)}
/* a 3px tone bar along the top edge, for a card that leads a section */
.card.bar::after{content:"";position:absolute;inset-inline:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--tone-400),var(--tone-600));
  border-start-start-radius:var(--r-md);border-start-end-radius:var(--r-md)}

/* The head is visually attached to the body: a gradient strip with its own lit
   edge and a hairline beneath, so the table below reads as one raised object. */
.card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px var(--pad);
  background:var(--head-grad);border-bottom:1px solid var(--border);
  border-start-start-radius:var(--r-md);border-start-end-radius:var(--r-md);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.card-head h2,.card-head h3{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;color:var(--text)}
.card-head .spacer{flex:1}
.card-head .sub{font-size:var(--fs-sm);color:var(--text-3);width:100%}
.card-body{padding:var(--pad)}
.card-body.tight{padding:0}
.card-body.tight .tbl-wrap{border:0;box-shadow:none;background:none;border-radius:0 0 var(--r-md) var(--r-md)}
.card-body.tight .tbl thead tr:first-child th{border-radius:0}
.card-body.tight .empty{padding:44px var(--pad)}
.card-body.tight .pagination{border-top:1px solid var(--border)}
.card-body.tight > form{padding:var(--pad)}
.card-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px var(--pad);border-top:1px solid var(--border);
  background:var(--foot-grad);border-radius:0 0 var(--r-md) var(--r-md);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.section-title{font-size:var(--fs-h2);font-weight:700;color:var(--text);margin:20px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border)}

/* ============ Icon tiles ============
   One recipe for every icon that introduces something: a gradient tile in the
   element's own tone, a white stroke icon, an inner lit edge and a shadow in
   the tile's own colour. This single rule carries most of the richness; the
   pale 30px chips it replaces were the main reason the cards looked cheap. */
.i-tile,.stat .s-ico,.card-head .ico,.hub-card .hub-ico,.empty .e-ico,.rep-link .rep-ico,
.mod-card .m-ico,.gs-item .gs-ico,.rec-head .rec-avatar,.logo-mark{
  background:linear-gradient(150deg,var(--tone-400) 0%,var(--tone-600) 100%);
  color:#FFFFFF;border:0;
  box-shadow:0 6px 14px -5px var(--tone-500),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.12);
}
.i-tile > svg,.stat .s-ico svg,.card-head .ico svg,.hub-card .hub-ico svg,.empty .e-ico svg,
.rep-link .rep-ico svg,.mod-card .m-ico svg,.gs-item .gs-ico svg,.rec-head .rec-avatar svg{stroke-width:2}
.i-tile{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px}
.i-tile > svg{width:22px;height:22px}
.i-tile.sm{width:36px;height:36px;border-radius:11px}
.i-tile.sm > svg{width:19px;height:19px}
.i-tile.lg{width:56px;height:56px;border-radius:16px}
.i-tile.lg > svg{width:26px;height:26px}

/* ============ Logo mark ============ */
.logo-mark{width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.logo-mark svg{width:55%;height:55%;stroke-width:2}
.logo-mark.big{width:60px;height:60px;border-radius:var(--r-md);font-size:24px}

/* ============ Buttons ============
   Raised like everything else: a gradient face, a lit top edge, a press that
   actually travels. Filled buttons get a darker underside instead of a
   border, which is what makes them read as a solid object rather than a
   coloured rectangle. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--r-sm);
  font-size:var(--fs-body);font-weight:600;line-height:1.45;color:var(--text-2);background:var(--btn-grad);
  border:1px solid var(--border-strong);
  box-shadow:0 1px 1px rgba(20,63,136,.06),0 3px 6px -3px rgba(20,63,136,.16),var(--lit);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease,border-color .14s ease;
  white-space:nowrap;text-decoration:none}
.btn svg{width:17px;height:17px;stroke-width:2}
.btn:hover{background:linear-gradient(180deg,#FFFFFF,#EEF3FB);border-color:var(--grey-400);color:var(--text);
  transform:translateY(-1px);box-shadow:0 1px 1px rgba(20,63,136,.07),0 6px 12px -4px rgba(20,63,136,.20),var(--lit)}
.btn:active{transform:translateY(1px);box-shadow:var(--raise-press),inset 0 1px 2px rgba(20,63,136,.10)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{color:var(--accent-contrast);background:linear-gradient(180deg,#3B7BDE 0%,var(--accent) 55%,#1957C2 100%);
  border-color:var(--accent-active);
  box-shadow:inset 0 -2px 0 rgba(18,51,107,.45),inset 0 1px 0 rgba(255,255,255,.28),
    0 1px 1px rgba(20,63,136,.14),0 6px 14px -5px rgba(20,63,136,.55)}
.btn.primary:hover{background:linear-gradient(180deg,#4C88E4 0%,#1D66DC 55%,#154FAE 100%);border-color:var(--accent-active);color:var(--accent-contrast);
  box-shadow:inset 0 -2px 0 rgba(18,51,107,.45),inset 0 1px 0 rgba(255,255,255,.32),
    0 2px 3px rgba(20,63,136,.16),0 12px 22px -8px rgba(20,63,136,.60)}
.btn.primary:active{background:linear-gradient(180deg,var(--accent-hover),var(--accent-active));
  box-shadow:inset 0 2px 4px rgba(11,33,72,.45)}
.btn.gold{color:var(--accent-contrast);background:linear-gradient(180deg,#3B7BDE,var(--accent));border-color:var(--accent-active)}
.btn.gold:hover{background:linear-gradient(180deg,#4C88E4,var(--accent-hover));border-color:var(--accent-active);color:var(--accent-contrast)}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft);border-color:transparent;color:var(--accent-hover);box-shadow:none}
.btn.danger{color:var(--accent-contrast);background:linear-gradient(180deg,#E04357 0%,var(--danger) 55%,#B32334 100%);border-color:var(--danger-ink);
  box-shadow:inset 0 -2px 0 rgba(105,15,26,.42),inset 0 1px 0 rgba(255,255,255,.26),0 6px 14px -5px rgba(168,30,48,.50)}
.btn.danger:hover{background:linear-gradient(180deg,#E4586A,#BE2536);border-color:var(--danger-ink);color:var(--accent-contrast)}
.btn.danger:focus-visible{outline-color:var(--danger)}
.btn.ok{color:var(--accent-contrast);background:linear-gradient(180deg,#0F8E52 0%,var(--ok) 55%,#086036 100%);border-color:var(--ok-ink);
  box-shadow:inset 0 -2px 0 rgba(5,50,29,.42),inset 0 1px 0 rgba(255,255,255,.26),0 6px 14px -5px rgba(10,98,56,.50)}
.btn.ok:hover{background:linear-gradient(180deg,#13A05E,#096A3C);border-color:var(--ok-ink);color:var(--accent-contrast)}
.btn.sm{padding:6px 11px;font-size:var(--fs-sm);border-radius:var(--r-xs);gap:6px}
.btn.sm svg{width:15px;height:15px}
.btn.xs{padding:3px 9px;font-size:var(--fs-micro);border-radius:var(--r-xs)}
.btn.w100{width:100%}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none;box-shadow:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-row.end{justify-content:flex-end}
.btn-row form{display:contents}

/* ============ Fields ============ */
.field{text-align:start;margin-bottom:var(--s4);min-width:0}
.field label,label{display:block;font-size:var(--fs-sm);color:var(--text-2);margin-bottom:6px;font-weight:600}
.field label .req{color:var(--danger-ink);font-style:normal}
/* Fields read as sunken against a raised card: a soft inner shadow, a face
   that darkens slightly at the top, and a focus state that fills back in. */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=time],input[type=month],
input[type=datetime-local],input[type=number],input[type=search],input[type=url],select,textarea,.search{
  width:100%;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:linear-gradient(180deg,#F6F8FC 0%,#FFFFFF 46%);
  color:var(--text);font-size:var(--fs-body);line-height:1.5;box-shadow:var(--sunk);
  transition:border-color .14s,box-shadow .14s,background .14s;min-width:0}
input:hover,select:hover,textarea:hover{border-color:var(--grey-400)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:#FFFFFF;
  box-shadow:var(--ring),inset 0 1px 2px rgba(20,63,136,.06)}
input::placeholder,textarea::placeholder{color:var(--grey-400)}
input[type=number],input[type=date],input[type=time],input[type=datetime-local],input[type=month]{direction:ltr;text-align:start;font-family:var(--num);font-variant-numeric:tabular-nums}
[dir="rtl"] input[type=number],[dir="rtl"] input[type=date],[dir="rtl"] input[type=time],[dir="rtl"] input[type=datetime-local]{text-align:right}
input[type=file]{padding:8px;background:var(--surface-3);width:100%;border:1px dashed var(--border-strong);border-radius:var(--r-sm);font-size:13px}
input[readonly],input[disabled],select[disabled],textarea[readonly]{background:var(--grey-100);color:var(--text-3);border-color:var(--border);box-shadow:none}
textarea{resize:vertical;min-height:84px;line-height:1.7}
select{appearance:none;-webkit-appearance:none;padding-inline-end:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px;background-position:right 11px center}
[dir="rtl"] select{background-position:left 11px center}
select[multiple]{background-image:none;padding-inline-end:12px}
.field .hint{font-size:var(--fs-micro);color:var(--text-3);margin-top:5px;line-height:1.6}
.field .ferr,.field .error{font-size:var(--fs-micro);color:var(--danger-ink);margin-top:5px}
.field.invalid input,.field.invalid select,.field.invalid textarea,.is-invalid{border-color:var(--danger);box-shadow:var(--ring-danger)}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;padding:8px 0}
.check input{width:17px;height:17px;accent-color:var(--accent);flex:0 0 auto}
.check label{margin:0;font-size:13.5px;color:var(--text);font-weight:500}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.field-row{display:grid;gap:0 var(--gap);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.field-row.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.field-row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:6px}

/* ============ Shell ============ */
/* ============ Sidebar ============
   Every tab is its own raised card on the blue field: a translucent white
   gradient, a lit top edge, a soft dark shadow beneath. Hover lifts, press
   pushes down, active becomes a solid white card with an accent bar on the
   leading edge. Contrast on the field is checked at the lightest point of
   every gradient: resting 4.9:1, hover 5.1:1, active 7.8:1. */
.side{position:fixed;top:0;inset-inline-start:0;bottom:0;width:var(--side);z-index:var(--z-side);
  display:flex;flex-direction:column;color:var(--side-text);
  background:linear-gradient(180deg,var(--side-bg) 0%,var(--side-bg) 55%,#12448F 100%)}
.side::after{content:"";position:absolute;top:0;bottom:0;inset-inline-end:0;width:1px;
  background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.24));pointer-events:none}

.side-brand{display:flex;align-items:center;gap:12px;padding:18px 16px 16px;border-bottom:1px solid var(--side-line);
  box-shadow:0 1px 0 rgba(255,255,255,.07)}
.side-brand .b-txt{min-width:0;flex:1}
.side-brand .logo-mark{color:var(--on-accent);
  background:linear-gradient(160deg,rgba(255,255,255,.30),rgba(255,255,255,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 3px 8px rgba(6,26,64,.35)}
.side-brand .b-name{font-size:15px;font-weight:700;line-height:1.3;color:var(--on-accent);letter-spacing:-.01em}
.side-brand .b-sub{font-size:var(--fs-micro);color:var(--side-text-dim);letter-spacing:.4px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.side-nav{flex:1;padding:8px 10px 14px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain}
.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-color:transparent}
.side-sec{font-size:var(--fs-micro);letter-spacing:.7px;text-transform:uppercase;color:#C9DCF7;padding:14px 12px 6px;font-weight:800}
.side-nav a{position:relative;display:flex;align-items:center;gap:10px;min-height:42px;padding:7px 10px;border-radius:12px;
  color:#EDF4FF;font-size:13.5px;font-weight:600;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(6,26,64,.24),0 8px 16px -10px rgba(6,26,64,.45);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease}
/* the icon sits in its own recessed chip, cut into the tab */
.side-nav a svg{width:27px;height:27px;padding:4px;border-radius:9px;flex:none;stroke-width:2;
  background:rgba(4,20,52,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.32),inset 0 -1px 0 rgba(255,255,255,.10);
  transition:background .15s ease,box-shadow .15s ease,color .15s ease}
.side-nav a:hover{color:#FFFFFF;transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 5px 9px rgba(6,26,64,.30),0 14px 24px -12px rgba(6,26,64,.55)}
.side-nav a:active{transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(4,18,46,.40),0 1px 1px rgba(6,26,64,.20)}
.side-nav a:focus-visible{outline:2px solid var(--on-accent);outline-offset:2px}
.side-nav a.active{color:var(--accent-ink);font-weight:800;border-color:#FFFFFF;
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F5FD 100%);
  box-shadow:inset 0 1px 0 #FFFFFF,0 3px 6px rgba(6,26,64,.30),0 16px 28px -12px rgba(6,26,64,.60)}
.side-nav a.active::before{content:"";position:absolute;inset-inline-start:-1px;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--blue-500),var(--accent-active))}
.side-nav a.active svg{color:#FFFFFF;background:linear-gradient(150deg,var(--blue-400),var(--blue-700));
  box-shadow:0 4px 10px -4px var(--blue-600),inset 0 1px 0 rgba(255,255,255,.36)}
.side-nav a .cnt{margin-inline-start:auto;color:#FFFFFF;font-size:var(--fs-micro);font-weight:800;
  padding:2px 8px;border-radius:20px;font-family:var(--num);direction:ltr;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#2F6ACB,#1E56AF);border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 4px rgba(6,26,64,.35)}
.side-nav a.active .cnt{background:linear-gradient(180deg,var(--accent),var(--blue-700));border-color:var(--accent-active)}

.side-foot{padding:12px;border-top:1px solid var(--side-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.user-chip{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 6px rgba(6,26,64,.28),0 12px 22px -12px rgba(6,26,64,.55)}
.avatar{width:36px;height:36px;border-radius:11px;flex:0 0 auto;color:var(--on-accent);
  background:linear-gradient(150deg,var(--blue-400),var(--blue-800));
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 4px 10px -4px rgba(6,26,64,.60)}
.user-chip .u-txt{min-width:0;flex:1}
.user-chip .u-name{font-size:13px;font-weight:700;line-height:1.35;color:var(--on-accent);overflow-wrap:anywhere}
.user-chip .u-role{font-size:var(--fs-micro);color:#C9DCF7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip .u-out{margin-inline-start:auto;color:#DCE9FC;padding:7px;border-radius:9px;display:flex;
  background:rgba(4,20,52,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.30);
  transition:color .15s,background .15s,transform .15s}
.user-chip .u-out:hover{color:var(--on-accent);background:rgba(4,20,52,.38);transform:translateY(-1px)}
.user-chip .u-out:active{transform:translateY(1px)}
.scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:rgba(23,28,36,.42);opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.show{opacity:1;pointer-events:auto}

.main{margin-inline-start:var(--side);min-height:100vh;padding:0 var(--page-x) 48px;min-width:0}
.topbar{min-height:var(--top);display:flex;align-items:center;gap:12px 16px;position:sticky;top:0;z-index:var(--z-topbar);
  margin:0 calc(var(--page-x) * -1) var(--gap);padding:10px var(--page-x);
  background:var(--canvas-veil);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border)}
.icon-btn{position:relative;width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  color:var(--text-2);background:var(--btn-grad);border:1px solid var(--border-strong);
  box-shadow:0 1px 1px rgba(20,63,136,.06),0 3px 6px -3px rgba(20,63,136,.16),var(--lit)}
.icon-btn svg{width:18px;height:18px;stroke-width:2}
.icon-btn .dot{position:absolute;top:8px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
.burger{display:none;padding:8px;border-radius:var(--r-xs);color:var(--text-2)}

/* Arabic is cursive: the tracking that makes small Latin caps legible pulls the
   joined letterforms apart, so it is dropped in RTL. */
[dir="rtl"] :where(.tbl th,.subhead,.side-sec,.m-sec,.gs-sec,.upper,.rec-facts dt,.stat .s-delta,.stat .s-label,.badge,.pal-sec,.keys-group h3){letter-spacing:0}

/* ============ Content rhythm ============ */
#view{animation:viewIn .25s ease both;min-width:0}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.h-row{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:0 0 var(--gap);flex-wrap:wrap}
.h-row h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;color:var(--text)}
.h-row .sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
.h-row > div > .sub:first-child{margin-top:0}
.h-row .btn-row{margin-inline-start:auto}
.grid{display:grid;gap:var(--gap);min-width:0}
.grid > *{min-width:0}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c2.wide{grid-template-columns:2fr 1fr}
.grid + .grid{margin-top:var(--gap)}
.stack{display:flex;flex-direction:column;gap:var(--gap);min-width:0}

/* ============ Stat / KPI cards ============
   The number is the loudest thing on the card and everything else steps back:
   the label is a quiet micro-caption, the hint is one line of --text-3, the
   delta is a small raised pill. The tile carries the colour. */
.stat{padding:18px var(--pad) 16px;overflow:hidden;display:flex;flex-direction:column;min-height:132px}
.stat .s-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.stat .s-label{font-size:11.5px;color:var(--text-3);font-weight:700;line-height:1.4;letter-spacing:.5px;text-transform:uppercase}
.stat .s-ico{width:46px;height:46px;border-radius:14px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.stat .s-ico svg{width:22px;height:22px}
/* The value keeps LTR digits but sits under the label on the reading side. */
.stat .s-val{font-size:31px;font-weight:800;margin-top:10px;color:var(--text);
  font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.12;min-width:0;overflow-wrap:anywhere}
[dir="rtl"] .stat .s-val{text-align:right}
[dir="ltr"] .stat .s-val{text-align:left}
.stat .s-val.v-long{font-size:25px}
.stat .s-val.v-xlong{font-size:20px;letter-spacing:0}
.stat .s-val small{font-size:.46em;font-weight:700;color:var(--text-3);margin-inline-start:5px;font-family:var(--ar)}
.stat .s-hint{font-size:var(--fs-micro);color:var(--text-3);margin-top:auto;padding-top:8px;line-height:1.55}
.stat .s-spark{margin-top:auto;padding-top:6px;display:flex;justify-content:flex-end}
.stat .s-spark svg{width:100%;max-width:160px;height:34px}
.stat.plus  {--tone-400:#2FA167;--tone-500:#128B4E;--tone-600:#0A6A3B;--tone-ink:#0A6B3B;--tone-wash:rgba(18,139,78,.11)}
.stat.minus {--tone-400:#E06578;--tone-500:#D6415A;--tone-600:#AF2942;--tone-ink:#AC2038;--tone-wash:rgba(214,65,90,.10)}
.stat.warn  {--tone-400:#C08414;--tone-500:#A96F09;--tone-600:#8A5803;--tone-ink:#7A4B00;--tone-wash:rgba(169,111,9,.11)}
.stat.gold  {--tone-400:#C08414;--tone-500:#A96F09;--tone-600:#8A5803;--tone-ink:#7A4B00;--tone-wash:rgba(169,111,9,.11)}
.stat.info  {--tone-400:#2A9BC4;--tone-500:#0E80A8;--tone-600:#0A6180;--tone-ink:#0A6383;--tone-wash:rgba(14,128,168,.11)}
.stat.maroon{--tone-400:#4A86E3;--tone-500:#2C6FD9;--tone-600:#1B55B8;--tone-ink:#14509F;--tone-wash:rgba(44,111,217,.10)}
.stat.plum  {--tone-400:#7B72DE;--tone-500:#5B51CC;--tone-600:#43389F;--tone-ink:#4438A8;--tone-wash:rgba(91,81,204,.10)}
.stat.teal  {--tone-400:#2E9E97;--tone-500:#12867E;--tone-600:#0B6560;--tone-ink:#0A6660;--tone-wash:rgba(18,134,126,.11)}
.stat.slate {--tone-400:#7A8497;--tone-500:#5C687C;--tone-600:#414C5E;--tone-ink:#414B5C;--tone-wash:rgba(92,104,124,.11)}
.stat.plus .s-val{color:var(--ok-ink)}
.stat.minus .s-val{color:var(--danger-ink)}
.stat .s-val.plus{color:var(--ok-ink)}
.stat .s-val.minus{color:var(--danger-ink)}
.stat .s-val.gold{color:var(--accent-ink)}

/* Module launcher cards (legacy markup kept alive) */
.mod-card{padding:22px var(--pad);display:flex;flex-direction:column;gap:12px;min-height:160px;overflow:hidden}
.mod-card .m-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.mod-card .m-ico svg{width:22px;height:22px}
.mod-card h3{font-size:16px;font-weight:700;color:var(--text)}
.mod-card p{font-size:var(--fs-sm);color:var(--text-3);flex:1}
.mod-card .m-go{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--accent);font-weight:600}
.mod-card .m-go svg{width:15px;height:15px;transition:transform .2s ease}
.mod-card:hover .m-go svg{transform:translateX(calc(var(--flip,1) * -3px))}
[dir="ltr"] .mod-card{--flip:-1}

/* ============ Tables ============
   A header is aligned exactly like the cells beneath it. Text columns sit on the
   reading side; numeric columns (.n) hug the right in both directions because
   digits are LTR either way; action columns sit at the end. */
/* A standalone table sits in its own raised container; inside .card-body.tight
   the card is the container and the wrapper gets out of the way. */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--border);border-bottom-color:var(--border-strong);
  background:var(--card-grad);box-shadow:var(--raise),var(--lit);
  -webkit-overflow-scrolling:touch;min-width:0;max-width:100%;position:relative}
.tbl-wrap.tall{max-height:min(70vh,760px);overflow-y:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;line-height:1.5}
.tbl th,.tbl td{text-align:start;vertical-align:middle;padding:13px 14px}
[dir="rtl"] .tbl th,[dir="rtl"] .tbl td{text-align:right}
[dir="ltr"] .tbl th,[dir="ltr"] .tbl td{text-align:left}
/* Header strip: a shallow gradient with a lit edge above and a hairline below,
   so it reads as attached to the rows rather than printed on top of them. */
.tbl th{font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--text-3);font-weight:800;
  padding:11px 14px;white-space:nowrap;background:var(--head-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 var(--border);
  border-bottom:0;position:sticky;top:0;z-index:2}
/* inside a scrolling wrapper the header is permanently pinned, so it carries
   its own shadow to say the rows are running underneath it */
.tbl-wrap.tall .tbl th{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 var(--border),0 8px 12px -8px rgba(20,63,136,.30)}
.tbl th a{color:var(--text-2)}
.tbl th a:hover{color:var(--accent)}
.tbl th .sort{opacity:.7;font-size:10px;margin-inline-start:4px}
.tbl td{border-bottom:1px solid var(--border);color:var(--text-2);position:relative}
.tbl tbody tr{transition:background .14s ease}
.tbl tbody tr:nth-child(even){background:rgba(20,63,136,.014)}
/* A soft tint of the row's tone on hover, plus a 3px bar that slides in from
   the leading edge. Nothing changes size, so the row never jumps. */
.tbl tbody tr:hover{background:var(--tone-wash)}
.tbl tbody tr:hover td{color:var(--text)}
.tbl tbody tr > td:first-child::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:linear-gradient(180deg,var(--tone-400),var(--tone-600));
  transform:scaleX(0);transform-origin:var(--edge-origin,left);transition:transform .16s ease;pointer-events:none}
[dir="rtl"] .tbl tbody tr > td:first-child::before{--edge-origin:right}
.tbl tbody tr:hover > td:first-child::before,.tbl tbody tr.selected > td:first-child::before{transform:scaleX(1)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr.selected{background:var(--tone-wash)}
.tbl tbody tr.dim td{color:var(--text-3)}
.tbl tbody tr.row-link{cursor:pointer}
.tbl tbody tr.row-link:hover{background:var(--accent-soft)}
/* numeric column: header and cells both hug the right edge, digits stay LTR */
.tbl th.n,.tbl td.n{text-align:right;white-space:nowrap}
.tbl th.n{font-family:inherit;direction:inherit;unicode-bidi:normal}
.tbl td.n{direction:ltr;unicode-bidi:isolate;font-family:var(--num);font-variant-numeric:tabular-nums;color:var(--text)}
.tbl th.c,.tbl td.c{text-align:center}
.tbl td.mono{white-space:nowrap}
.tbl td.wrap{white-space:normal;min-width:160px;max-width:360px}
.tbl td.muted{color:var(--text-3)}
.tbl td .sub,.tbl td small{display:block;font-size:var(--fs-micro);color:var(--text-3);line-height:1.4;font-weight:400}
.tbl td .pill{vertical-align:middle}
.tbl td .pill + .pill{margin-inline-start:4px}
.tbl .btn.sm{padding:5px 10px;line-height:1.4;vertical-align:middle}
/* action cells never wrap and never stretch the row */
.tbl .td-actions{white-space:nowrap;display:flex;gap:5px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.tbl td.td-actions{display:table-cell}
.tbl td.td-actions > *{vertical-align:middle}
.tbl td.td-actions > .btn,.tbl td.td-actions > form,.tbl td.td-actions > a{display:inline-flex;margin-inline-start:5px}
.tbl td.td-actions > :first-child{margin-inline-start:0}
.tbl td:has(> .td-actions),.tbl td.td-actions,.tbl th.th-actions{width:1%;white-space:nowrap;text-align:end}
[dir="rtl"] .tbl td:has(> .td-actions),[dir="rtl"] .tbl td.td-actions,[dir="rtl"] .tbl th.th-actions{text-align:left}
[dir="ltr"] .tbl td:has(> .td-actions),[dir="ltr"] .tbl td.td-actions,[dir="ltr"] .tbl th.th-actions{text-align:right}
.tbl .td-actions form{display:contents}
.tbl .td-actions .btn.sm{padding:5px 10px;height:30px}
.tbl .td-actions .btn.sm.icon{padding:5px;min-width:30px;justify-content:center}
/* action cells: small raised chips, fixed height so a row never grows */
.tbl .btn.icon,.btn.icon{padding:5px;min-width:32px;height:32px;justify-content:center;gap:0;border-radius:9px}
.btn.icon svg{width:16px;height:16px}
.tbl .td-actions .btn{box-shadow:0 1px 1px rgba(20,63,136,.07),0 2px 5px -3px rgba(20,63,136,.20),var(--lit)}
.tbl .td-actions .btn:hover{transform:translateY(-1px)}
.tbl .td-actions .btn:active{transform:translateY(1px)}
.tbl td.td-actions .btn.icon{width:30px}
/* the totals row reads as the base the table stands on */
.tbl tfoot td{font-weight:800;background:var(--foot-grad);border-top:1px solid var(--border-strong);border-bottom:0;color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.tbl tfoot tr > td:first-child::before{display:none}
.tbl tfoot td.n{font-weight:700}
.tbl a{color:var(--accent);font-weight:600}
.tbl a:hover{color:var(--accent-hover);text-decoration:underline}
.tbl .meter{margin-top:5px}
.tbl.compact th,.tbl.compact td{padding:7px 10px;font-size:var(--fs-sm)}
.tbl.compact th{padding:9px 10px}
.tbl .tr-group td{background:var(--grey-100);font-weight:700;color:var(--text);font-size:var(--fs-sm)}
.tbl td .tiny,.tiny{font-size:var(--fs-micro);color:var(--text-3);line-height:1.4}
.tbl th.w-1,.tbl td.w-1{width:1%;white-space:nowrap}
.tbl-wrap.compact .tbl th,.tbl-wrap.compact .tbl td{padding:9px 12px;font-size:var(--fs-sm)}
.tbl-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px var(--pad);
  border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-3)}

/* ============ Pills and badges — status semantics only ============ */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:20px;font-size:var(--fs-micro);font-weight:700;
  line-height:1.7;border:1px solid var(--border);white-space:nowrap;vertical-align:middle;color:var(--text-2);
  background:linear-gradient(180deg,#FFFFFF,var(--grey-100));
  box-shadow:0 1px 1px rgba(20,63,136,.06),inset 0 1px 0 rgba(255,255,255,.85)}
/* a filled tone pill: white on --tone-600 or deeper, never below 6:1 */
.pill.fill{color:#FFFFFF;border-color:transparent;
  background:linear-gradient(180deg,var(--tone-600),color-mix(in srgb,var(--tone-600) 78%,var(--shade)));
  box-shadow:0 3px 8px -3px var(--tone-500),inset 0 1px 0 rgba(255,255,255,.26)}
.pill.fill::before{opacity:.9}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.85}
.pill.lg{font-size:var(--fs-sm);padding:4px 13px}
.pill-info,.pill-open,.pill-confirmed,.pill-issued,.pill-presented,.pill-in_progress,.pill-scheduled,.pill-sent{color:var(--info-ink);background:linear-gradient(180deg,#FFFFFF,var(--info-bg));border-color:var(--info-line)}
.pill-warn,.pill-pending,.pill-arrived,.pill-frozen,.pill-draft,.pill-partial,.pill-waiting,.pill-low,.pill-on_hold{color:var(--warn-ink);background:linear-gradient(180deg,#FFFDF7,var(--warn-bg));border-color:var(--warn-line)}
.pill-ok,.pill-active,.pill-completed,.pill-signed,.pill-paid,.pill-accepted,.pill-done,.pill-approved,.pill-published,.pill-dispensed{color:var(--ok-ink);background:linear-gradient(180deg,#FBFEFC,var(--ok-bg));border-color:var(--ok-line)}
.pill-danger,.pill-no_show,.pill-cancelled,.pill-canceled,.pill-refunded,.pill-expired,.pill-declined,.pill-void,.pill-rejected,.pill-locked,.pill-depleted{color:var(--danger-ink);background:linear-gradient(180deg,#FFFBFB,var(--danger-bg));border-color:var(--danger-line)}
.pill-muted,.pill-consumed,.pill-closed,.pill-archived,.pill-inactive,.pill-not_sent,.pill-none{color:var(--text-3);background:linear-gradient(180deg,#FFFFFF,var(--grey-100));border-color:var(--border)}
.pill-maroon,.pill-in_consultation,.pill-amended,.pill-in_session{color:var(--accent-ink);background:linear-gradient(180deg,#FFFFFF,var(--accent-soft));border-color:var(--accent-line)}
.pill-gold{color:var(--accent-ink);background:linear-gradient(180deg,#FFFFFF,var(--accent-soft));border-color:var(--accent-line)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:20px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.3px;
  background:linear-gradient(180deg,#FFFFFF,var(--accent-soft));border:1px solid var(--accent-line);color:var(--accent-ink);white-space:nowrap;
  box-shadow:0 1px 1px rgba(20,63,136,.06),inset 0 1px 0 rgba(255,255,255,.85)}
.badge.maroon{background:linear-gradient(180deg,#FFFFFF,var(--accent-soft));border-color:var(--accent-line);color:var(--accent-ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;vertical-align:middle}

/* ============ Toolbar, chips and tabs ============ */
.toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:var(--gap);
  padding:13px 15px;border-radius:var(--r-md);background:var(--card-grad);border:1px solid var(--border);
  border-bottom-color:var(--border-strong);box-shadow:var(--raise),var(--lit);position:relative}
.toolbar.bare{padding:0;border:0;background:none;box-shadow:none}
.toolbar .field{margin:0;min-width:140px;flex:0 1 auto}
.toolbar .field label{margin-bottom:4px;font-size:var(--fs-micro)}
.toolbar .field.grow,.toolbar .grow{flex:1 1 220px;min-width:200px}
.toolbar .tb-spacer{flex:1}
.toolbar .tb-title{font-size:var(--fs-h2);font-weight:700;color:var(--text);align-self:center}
.toolbar input,.toolbar select{padding:8px 11px;font-size:13.5px}
.toolbar select{padding-inline-end:32px}
.toolbar .btn{flex:0 0 auto;padding:8px 14px;font-size:13.5px;align-self:end}
.toolbar .btn.sm{padding:6px 12px;font-size:var(--fs-sm);align-self:end;margin-bottom:2px}
.toolbar .check{align-self:center;padding:0 0 8px}
.toolbar .tb-hint{flex:1 1 100%;font-size:var(--fs-sm);color:var(--text-3);margin:2px 0 0}
.toolbar .muted{align-self:center}
.card-body > .toolbar:last-child{margin-bottom:0}
.chips{flex:1 1 100%;display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-top:10px;border-top:1px solid var(--border);margin-top:2px}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;border-radius:20px;font-size:var(--fs-sm);font-weight:700;
  background:linear-gradient(180deg,#FFFFFF,var(--accent-soft));color:var(--accent-ink);border:1px solid var(--accent-line);
  box-shadow:0 1px 1px rgba(20,63,136,.07),inset 0 1px 0 rgba(255,255,255,.9)}
[dir="rtl"] .chip{padding:3px 10px 3px 6px}
.chip b{font-weight:700}
.chip button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--accent-ink);background:var(--surface);line-height:1;font-size:12px}
.chip button:hover{background:var(--accent);color:var(--accent-contrast)}
.chips .chip-clear{font-size:var(--fs-sm);color:var(--text-3);font-weight:600;padding:3px 8px;text-decoration:underline}
.chips .chip-clear:hover{color:var(--accent)}

.tabbar{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tab{padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--text-3);position:relative;transition:color .15s;display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--text)}
.tab.on,.tab.active{color:var(--accent)}
.tab.on::after,.tab.active::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--blue-500),var(--accent))}
.tab .cnt{background:linear-gradient(180deg,#FFFFFF,var(--grey-100));color:var(--text-3);font-size:var(--fs-micro);padding:0 7px;
  border-radius:20px;font-family:var(--num);border:1px solid var(--border);box-shadow:inset 0 1px 0 #FFFFFF}

/* ============ Alerts ============ */
.alert{padding:13px 15px;border-radius:var(--r-sm);font-size:13.5px;margin-bottom:var(--gap);
  border:1px solid var(--border);border-inline-start:4px solid var(--border-strong);background:var(--card-grad);color:var(--text-2);
  box-shadow:var(--raise),var(--lit)}
.alert.ok,.alert.success{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line);border-inline-start-color:var(--ok)}
.alert.warn,.alert.warning{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line);border-inline-start-color:var(--warn)}
.alert.danger,.alert.error{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-line);border-inline-start-color:var(--danger)}
.alert.info{background:var(--info-bg);color:var(--info-ink);border-color:var(--info-line);border-inline-start-color:var(--info)}
.alert strong{font-weight:700;display:block;margin-bottom:3px}
.alert ul{margin:6px 0 0;padding-inline-start:18px}
.alert li{margin-bottom:3px}
.alert a{text-decoration:underline;font-weight:600}
.alert.inline{margin:0}
.alert .a-x{float:inline-end;width:24px;height:24px;border-radius:var(--r-xs);display:grid;place-items:center;opacity:.6;margin:-2px -4px 0 0}
.alert .a-x:hover{opacity:1;background:rgba(0,0,0,.06)}
.alert .a-x svg{width:14px;height:14px}

/* A clinical alert is the loudest thing on the page on purpose. An alert that has
   to be hunted for is an alert that gets missed on the day it matters. */
.clinical-alert{padding:14px 16px;border-radius:var(--r-sm);margin-bottom:var(--gap);font-size:13.5px;
  color:var(--danger-ink);background:var(--danger-bg);border:1px solid var(--danger-line);border-inline-start:4px solid var(--danger)}
.clinical-alert b{display:flex;align-items:center;gap:7px;font-weight:700;margin-bottom:5px}
.clinical-alert b svg{width:17px;height:17px}
.clinical-alert ul{margin:0;padding-inline-start:18px}

/* ============ Empty states and small lists ============ */
.empty{padding:44px var(--pad);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty .e-ico{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.empty .e-ico svg{width:26px;height:26px}
.empty h3{font-size:16px;font-weight:700;color:var(--text)}
.empty p{font-size:13.5px;color:var(--text-3);max-width:460px;margin:0}
.empty .btn{margin-top:6px}
.empty.sm{padding:24px 16px;gap:8px}
.empty.sm .e-ico{width:46px;height:46px;border-radius:14px}
.empty.sm .e-ico svg{width:22px;height:22px}
.empty.sm h3{font-size:15px}
.mini-empty{text-align:center;color:var(--text-3);font-size:13px;padding:22px}

/* Key/value lists: <dl class="kv"><div><dt>label</dt><dd>value</dd></div></dl> */
.kv{display:grid}
.kv > div{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);align-items:baseline}
.kv > div:last-child{border-bottom:0}
.kv dt{color:var(--text-3);font-size:var(--fs-sm);font-weight:500;margin:0}
.kv dd{margin:0;font-size:13.5px;min-width:0;overflow-wrap:anywhere;text-align:start;color:var(--text)}
[dir="rtl"] .kv dd{text-align:right}
[dir="ltr"] .kv dd{text-align:left}
.kv dd.mono,.kv dd.n{font-family:var(--num);font-variant-numeric:tabular-nums}
.kv.cols{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 24px}

/* Meters: bought against delivered, at a glance. */
.meter{height:7px;border-radius:99px;background:var(--grey-200);overflow:hidden;min-width:96px;margin-top:4px;direction:ltr;
  box-shadow:inset 0 1px 2px rgba(20,63,136,.14)}
[dir="rtl"] .meter{direction:rtl}
.meter > span{display:block;height:100%;border-radius:99px;max-width:100%;
  background:linear-gradient(180deg,var(--blue-400),var(--accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.34)}
.meter.full > span,.meter.ok > span{background:linear-gradient(180deg,#2FA167,var(--ok))}
.meter.warn > span{background:linear-gradient(180deg,#C08414,var(--warn))}
.meter.danger > span{background:linear-gradient(180deg,#E06578,var(--danger))}
.meter.lg{height:10px}

/* Laravel's paginator markup, restyled. */
.pagination{display:flex;gap:5px;flex-wrap:wrap;padding:12px var(--pad);align-items:center}
.pagination nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;width:100%}
.pagination nav > div:first-child{display:none;gap:6px}
.pagination nav > div:last-child{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;flex-wrap:wrap}
.pagination p{font-size:var(--fs-sm);color:var(--text-3);margin:0}
.pagination p span{font-weight:600;color:var(--text);font-family:var(--num);font-variant-numeric:tabular-nums}
.pagination nav > div:last-child > div:last-child > span{display:inline-flex;gap:5px;align-items:center}
.pagination nav > div:first-child > a,.pagination nav > div:first-child > span,
.pagination [aria-current] > span,.pagination [aria-disabled] > span,
.pagination nav > div:last-child > div:last-child a{
  display:inline-flex;align-items:center;justify-content:center;min-width:33px;height:33px;padding:0 10px;border-radius:var(--r-xs);
  font-size:var(--fs-sm);font-family:var(--num);font-weight:700;color:var(--text-2);border:1px solid var(--border-strong);
  background:var(--btn-grad);box-shadow:0 1px 1px rgba(20,63,136,.06),var(--lit);
  transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.pagination a:hover{background:linear-gradient(180deg,#FFFFFF,var(--accent-soft));color:var(--accent);border-color:var(--accent-line);transform:translateY(-1px)}
.pagination a:active{transform:translateY(1px)}
.pagination [aria-current] > span{background:linear-gradient(180deg,#3B7BDE 0%,var(--accent) 55%,#1957C2 100%);color:var(--accent-contrast);
  border-color:var(--accent-active);box-shadow:inset 0 -2px 0 rgba(18,51,107,.42),inset 0 1px 0 rgba(255,255,255,.26),0 4px 10px -4px rgba(20,63,136,.50)}
.pagination [aria-disabled] > span{opacity:.45;cursor:default}
.pagination svg{width:14px;height:14px}
[dir="rtl"] .pagination svg{transform:scaleX(-1)}
.pagination.simple{justify-content:flex-end}

/* ============ Charts (see assets/js/charts.js) ============ */
.chart{padding:4px 2px;min-width:0}
.chart-t{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:12px}
.bars{display:flex;align-items:flex-end;gap:8px;padding:0 2px 6px;border-bottom:1px solid var(--border);position:relative}
.bars::before{content:"";position:absolute;inset-inline:0;top:0;border-top:1px dashed var(--border)}
.bar-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.bar-v{font-size:var(--fs-micro);font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums;font-family:var(--num);white-space:nowrap;direction:ltr}
.bar{width:100%;max-width:44px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 88%,var(--shade)));
  transition:filter .15s;animation:barGrow .4s cubic-bezier(.2,.9,.25,1) both}
.bar:hover{filter:brightness(1.06)}
@keyframes barGrow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.bar-l{font-size:10.5px;color:var(--text-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-family:var(--num);direction:ltr}
.bars.dense{gap:4px}
.bars.dense .bar-l{overflow:visible;font-size:10px}
.bars.dense .bar-v{font-size:10px}
.bars.dense .bar{border-radius:3px 3px 2px 2px}

.ranks{display:flex;flex-direction:column;gap:9px}
.rank{display:grid;grid-template-columns:minmax(90px,1.1fr) 3fr auto;align-items:center;gap:10px}
.rank-l{font-size:var(--fs-sm);font-weight:500;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-track{height:10px;border-radius:99px;background:var(--grey-200);overflow:hidden}
.rank-fill{display:block;height:100%;border-radius:99px;background:var(--c);animation:rankGrow .45s cubic-bezier(.2,.9,.25,1) both}
@keyframes rankGrow{from{width:0}}
.rank-v{font-size:var(--fs-sm);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;font-family:var(--num);min-width:52px;text-align:end;direction:ltr}

.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}
.donut{flex:0 0 auto}
.donut circle{transition:opacity .2s} .donut:hover circle{opacity:.7} .donut circle:hover{opacity:1}
.donut-v{font-size:20px;font-weight:700;fill:var(--text);font-family:var(--num)}
.donut-l{font-size:10.5px;fill:var(--text-3)}
.legend{display:flex;flex-direction:column;gap:7px;font-size:var(--fs-sm);min-width:150px;flex:1 1 150px;max-width:260px}
.legend span{display:flex;align-items:center;gap:8px;color:var(--text-2)}
.legend i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.legend b{margin-inline-start:auto;color:var(--text);font-variant-numeric:tabular-nums;font-family:var(--num)}

.linechart{display:block;overflow:visible;width:100%}
.line-x{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-3);margin-top:4px;font-family:var(--num)}
.line-x span{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.spark{display:inline-block;vertical-align:middle;overflow:visible}
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--gap)}

/* ============ Modal, dialogs, toasts ============ */
.modal-scrim{position:fixed;inset:0;z-index:var(--z-dialog);display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(23,28,36,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-scrim[hidden]{display:none}
.modal{width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;animation:rise .22s cubic-bezier(.2,.9,.25,1) both}
.modal.sm{width:min(400px,100%)} .modal.lg{width:min(860px,100%)}
.m-head{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad) 12px;border-bottom:1px solid var(--border)}
.m-title{font-size:var(--fs-h2);font-weight:700;color:var(--text)}
.m-x{width:32px;height:32px;border-radius:var(--r-xs);font-size:20px;line-height:1;color:var(--text-3);display:grid;place-items:center}
.m-x:hover{background:var(--grey-100);color:var(--text)}
.m-body{padding:16px var(--pad);overflow-y:auto}
.m-actions{display:flex;gap:10px;justify-content:flex-end;padding:14px var(--pad);border-top:1px solid var(--border);background:var(--surface-3)}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}

dialog.dlg{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%;margin:auto;color:var(--text)}
dialog.dlg::backdrop{background:rgba(23,28,36,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.dlg[open]{animation:rise .2s cubic-bezier(.2,.9,.25,1) both}
dialog.dlg .card{box-shadow:var(--e3);display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
dialog.dlg .card-body{overflow-y:auto}
dialog.dlg.sm{max-width:min(420px,calc(100vw - 32px))} dialog.dlg.lg{max-width:min(860px,calc(100vw - 32px))}
dialog.dlg .m-x{margin-inline-start:auto}
dialog.dlg .m-x svg{width:16px;height:16px}
dialog.dlg .card-foot{justify-content:flex-end}
dialog.dlg .dlg-ico{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;background:var(--warn-bg);color:var(--warn-ink)}
dialog.dlg .dlg-ico.danger{background:var(--danger-bg);color:var(--danger-ink)}
dialog.dlg .dlg-ico svg{width:20px;height:20px}
dialog.dlg .dlg-row{display:flex;gap:14px;align-items:flex-start}
dialog.dlg .dlg-row p{font-size:var(--fs-body);line-height:1.6;margin:0;color:var(--text-2)}
body:has(dialog.dlg[open]){overflow:hidden}

#toasts{position:fixed;top:calc(var(--top) + 10px);inset-inline-end:22px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;
  align-items:flex-end;max-width:min(420px,calc(100vw - 32px))}
.toast{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;
  color:var(--text);background:var(--surface);border:1px solid var(--border);border-inline-start:3px solid var(--accent);
  box-shadow:var(--e3);width:100%;animation:rise .25s ease both;transition:opacity .25s,transform .25s}
.toast svg{width:18px;height:18px;flex:none}
.toast .t-x{margin-inline-start:auto;width:24px;height:24px;border-radius:var(--r-xs);display:grid;place-items:center;color:currentColor;opacity:.6}
.toast .t-x:hover{opacity:1;background:rgba(0,0,0,.06)}
.toast.ok{border-inline-start-color:var(--ok);color:var(--ok-ink)}
.toast.err{border-inline-start-color:var(--danger);color:var(--danger-ink)}
.toast.warn{border-inline-start-color:var(--warn);color:var(--warn-ink)}
.toast.info{border-inline-start-color:var(--info);color:var(--info-ink)}
.toast.out{opacity:0;transform:translateY(-8px)}

/* ============ Login ============ */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;
  background:
    radial-gradient(90% 70% at 50% -10%, var(--accent-soft) 0%, transparent 62%),
    var(--canvas)}
.login-card{width:min(400px,100%);padding:36px 32px 28px;text-align:center;box-shadow:var(--e3);border-radius:var(--r-lg);
  animation:rise .4s cubic-bezier(.2,.9,.25,1) both}
.login-card .logo-mark{margin:0 auto 14px}
.login-title{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;color:var(--text);letter-spacing:-.015em}
.login-sub{font-size:var(--fs-sm);color:var(--text-3);margin:4px 0 22px}
.login-note{font-size:var(--fs-micro);color:var(--text-3);margin-top:18px;line-height:1.6}
.login-card .field{text-align:start}
.login-card .check{justify-content:flex-start}

/* ============ Language switch ============ */
.lang-sw{display:flex;gap:2px;padding:3px;border-radius:var(--r-sm);background:linear-gradient(180deg,var(--grey-100),#FFFFFF);
  border:1px solid var(--border);flex:0 0 auto;box-shadow:var(--sunk)}
.lang-sw a,.lang-sw button{padding:5px 12px;border-radius:var(--r-xs);font-size:var(--fs-sm);font-weight:600;
  color:var(--text-3);transition:background .15s,color .15s;text-decoration:none;line-height:1.5}
.lang-sw a:hover,.lang-sw button:hover{color:var(--text)}
.lang-sw a.on,.lang-sw button.on{background:var(--btn-grad);color:var(--accent);font-weight:700;
  box-shadow:0 1px 2px rgba(20,63,136,.14),var(--lit)}
.login-card .lang-sw{margin:0 auto 18px;width:max-content}

/* ============ Clinical chart, dental chart, timeline ============ */
.vitals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;margin-bottom:12px}
.vitals .field{margin:0}
.vitals .field label{font-size:var(--fs-micro)}
.ro{padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--surface-3);min-height:38px;
  white-space:pre-wrap;font-size:13.5px;line-height:1.7;overflow-wrap:anywhere;color:var(--text)}
.ro:empty::before{content:"—";color:var(--text-3)}
.chk{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--border-strong);border-radius:var(--r-xs);
  background:var(--surface);cursor:pointer;font-size:13px;transition:background .15s,border-color .15s,color .15s;user-select:none;margin:0 0 6px}
.chk input{margin:0;accent-color:var(--accent);width:15px;height:15px}
.chk:hover{border-color:var(--accent)}
.chk:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.chk-row{display:flex;flex-wrap:wrap;gap:6px}

.teeth{display:flex;flex-direction:column;gap:6px;direction:ltr}
.teeth-row{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.tooth{width:32px;height:38px;border-radius:6px 6px 10px 10px;border:1px solid var(--border-strong);background:var(--surface);
  font-size:var(--fs-micro);font-family:var(--num);color:var(--text-2);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.tooth:hover{border-color:var(--accent);box-shadow:var(--e1)}
.tooth.on,.tooth[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px}
.tooth-key{font-size:var(--fs-micro);padding:2px 8px;border-radius:99px;border:1px solid var(--border);background:var(--surface);
  display:inline-flex;align-items:center;gap:5px;color:var(--text-2)}
.teeth-legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.t-healthy{background:var(--surface)}
.t-caries{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger-ink)}
.t-filled{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.t-missing{background:var(--grey-100);color:var(--grey-400);text-decoration:line-through}
.t-crown{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.t-implant{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.t-rct{background:var(--grey-100);border-color:var(--grey-400);color:var(--text-2)}

.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-inline-start:18px}
.timeline::before{content:"";position:absolute;inset-block:6px;inset-inline-start:5px;width:2px;background:var(--border);border-radius:2px}
.timeline > div{position:relative;padding:8px 0 14px}
.timeline > div::before{content:"";position:absolute;inset-inline-start:-18px;top:14px;width:10px;height:10px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);box-shadow:0 0 0 3px var(--surface)}
.timeline .t-when{font-size:var(--fs-micro);color:var(--text-3);font-family:var(--num)}
.timeline .t-what{font-weight:600;color:var(--text)}

/* ============================================================
   Page system: one header, one KPI strip, one card, one toolbar,
   one table, one form, one empty state.
   ============================================================ */

/* every top-level block on a page sits one gap under the last */
#view > * + *{margin-top:var(--gap)}
#view > .toolbar,#view > .alert,#view > .h-row,#view > .grid + .grid{margin-bottom:0}
.stack > .toolbar,.card-body > .toolbar{margin-bottom:0}
.gap{height:var(--gap)}
#view > .gap{display:none}

/* ---- page header: crumbs · title · subtitle | actions | tools */
.ph{min-width:0;flex:1 1 220px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--fs-micro);color:var(--text-3);font-weight:500;white-space:nowrap;overflow:hidden;min-height:15px}
.crumbs a{color:var(--text-3)} .crumbs a:hover{color:var(--accent)}
.crumbs .sep{opacity:.5} .crumbs .cur{color:var(--text-2);overflow:hidden;text-overflow:ellipsis}
.crumbs:empty{display:none}
.page-title{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;color:var(--text);letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-sub{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-sub:empty{display:none}
.top-actions{display:flex;align-items:center;gap:8px;flex:0 1 auto;justify-content:flex-end;min-width:0}
.top-actions:empty{display:none}
.top-actions .btn{padding:8px 14px;font-size:13.5px}
.top-actions form{display:contents}
.top-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-inline-start:auto}
.top-actions + .top-tools{margin-inline-start:0}
.top-tools::before{content:"";width:1px;height:24px;background:var(--border);margin:0 4px}
.top-actions:empty + .top-tools::before{display:none}

/* overflow menu: actions beyond the first two collapse into "more" */
.menu{position:relative}
.menu-list{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:220px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--e3);padding:6px;z-index:var(--z-menu);
  display:none;flex-direction:column;gap:2px}
.menu-list.open{display:flex}
.menu-list .btn,.menu-list a,.menu-list button{justify-content:flex-start;width:100%;background:none;border:0;box-shadow:none;padding:8px 10px;
  border-radius:var(--r-xs);font-size:13.5px;font-weight:500;color:var(--text-2);text-align:start;display:flex;align-items:center;gap:10px}
.menu-list .btn:hover,.menu-list a:hover,.menu-list button:hover{background:var(--accent-soft);color:var(--accent-hover);box-shadow:none}
.menu-list .btn.primary{color:var(--accent);background:none} .menu-list .btn.danger{color:var(--danger-ink);background:none}
.menu-list .btn.danger:hover{background:var(--danger-bg);color:var(--danger-ink)}
.menu-list .btn svg,.menu-list a svg{width:16px;height:16px}
.menu-list form{display:contents}
.menu-list .m-sec{font-size:var(--fs-micro);letter-spacing:.5px;color:var(--text-3);padding:8px 10px 4px;font-weight:700;text-transform:uppercase}
.menu-list hr{border:0;border-top:1px solid var(--border);margin:4px 0}
.icon-btn{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .14s,color .14s,border-color .14s}
.icon-btn:hover{background:linear-gradient(180deg,#FFFFFF,var(--accent-soft));color:var(--accent);border-color:var(--accent-line);transform:translateY(-1px)}
.icon-btn:active{transform:translateY(1px);box-shadow:var(--raise-press),inset 0 1px 2px rgba(20,63,136,.10)}
.icon-btn[aria-expanded="true"]{background:linear-gradient(180deg,#3B7BDE,var(--accent));color:var(--accent-contrast);border-color:var(--accent-active)}
.icon-btn.primary{background:linear-gradient(180deg,#3B7BDE 0%,var(--accent) 55%,#1957C2 100%);color:var(--accent-contrast);border-color:var(--accent-active);
  box-shadow:inset 0 -2px 0 rgba(18,51,107,.45),inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px -5px rgba(20,63,136,.55)}
.icon-btn.primary:hover{background:linear-gradient(180deg,#4C88E4,#154FAE);border-color:var(--accent-active);color:var(--accent-contrast)}
.icon-btn .cnt{position:absolute;top:-6px;inset-inline-end:-6px;background:var(--danger);color:var(--accent-contrast);font-size:10px;font-weight:700;
  min-width:18px;height:18px;padding:0 5px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  font-family:var(--num);box-shadow:0 0 0 2px var(--canvas)}
.mod-btn{width:36px;height:36px;padding:0;justify-content:center}
.mod-btn svg{width:18px;height:18px}

/* ---- global search */
.gsearch{position:relative;flex:0 1 300px;min-width:160px}
.gsearch input[type=search]{padding:8px 14px 8px 36px;border-radius:var(--r-sm);font-size:13.5px;background:var(--surface)}
[dir="rtl"] .gsearch input[type=search]{padding:8px 36px 8px 14px}
.gsearch > svg{position:absolute;top:50%;inset-inline-start:12px;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3);pointer-events:none}
.gsearch kbd{position:absolute;top:50%;inset-inline-end:8px;transform:translateY(-50%);pointer-events:none;border-bottom-width:1px}
.gsearch input:focus ~ kbd{display:none}
.gs-list{position:absolute;top:calc(100% + 8px);inset-inline:0;min-width:320px;max-height:420px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--e3);padding:6px;z-index:var(--z-search);display:none}
.gs-list.open{display:block}
.gs-sec{font-size:var(--fs-micro);letter-spacing:.5px;color:var(--text-3);padding:8px 10px 4px;font-weight:700;text-transform:uppercase}
.gs-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-xs);text-decoration:none;color:var(--text-2);font-size:13.5px}
.gs-item:hover,.gs-item.on{background:var(--accent-soft);color:var(--accent-hover)}
.gs-item .gs-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}
.gs-item .gs-ico svg{width:17px;height:17px}
.gs-item b{font-weight:600;display:block;line-height:1.3;color:var(--text)}
.gs-item small{display:block;color:var(--text-3);font-size:var(--fs-micro);font-family:var(--num);direction:ltr;text-align:start}
.gs-empty{padding:18px 12px;text-align:center;color:var(--text-3);font-size:13px}
.search-toggle{display:none}

/* ---- KPI strip */
.kpis{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:stretch}
.kpis.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpis.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* a row of KPI cards is one clean band: same height, whatever is inside */
.kpis > .stat{min-height:138px;height:100%}
.stat .s-label{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.stat .s-val{min-height:36px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.stat .s-hint{min-height:17px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;overflow:hidden}
.stat .s-hint a{color:var(--accent);font-weight:600}
.stat .s-delta{font-size:var(--fs-micro);font-weight:800;padding:2px 8px;border-radius:20px;font-family:var(--num);direction:ltr;
  border:1px solid var(--border);box-shadow:0 1px 1px rgba(20,63,136,.07),inset 0 1px 0 rgba(255,255,255,.85)}
.stat .s-delta.up{color:var(--ok-ink);background:linear-gradient(180deg,#FBFEFC,var(--ok-bg));border-color:var(--ok-line)}
.stat .s-delta.down{color:var(--danger-ink);background:linear-gradient(180deg,#FFFBFB,var(--danger-bg));border-color:var(--danger-line)}
.stat .s-delta.flat{color:var(--text-3);background:linear-gradient(180deg,#FFFFFF,var(--grey-100))}
a.stat{text-decoration:none;color:inherit;display:flex}
a.stat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kpi-more{margin-top:12px}
.kpi-more > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;
  color:var(--accent);padding:7px 14px;border-radius:20px;border:1px solid var(--border-strong);background:var(--btn-grad);user-select:none;
  box-shadow:0 1px 1px rgba(20,63,136,.06),0 3px 6px -3px rgba(20,63,136,.16),var(--lit)}
.kpi-more > summary::-webkit-details-marker{display:none}
.kpi-more > summary svg{width:14px;height:14px;transition:transform .2s}
.kpi-more[open] > summary svg{transform:rotate(180deg)}
.kpi-more > summary:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.kpi-more .kpis{margin-top:12px}
.kpi-more .t-more,.kpi-more[open] .t-less{display:inline}
.kpi-more .t-less,.kpi-more[open] .t-more{display:none}

/* ---- cards, continued */
.card-head .ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.card-head .ico svg{width:20px;height:20px}
.card-head .cnt{background:linear-gradient(180deg,#FFFFFF,var(--grey-100));color:var(--text-2);font-size:var(--fs-micro);padding:2px 9px;
  border-radius:20px;font-family:var(--num);font-weight:800;border:1px solid var(--border);box-shadow:inset 0 1px 0 #FFFFFF}
.card-head .btn.sm{padding:5px 11px}
.card > .card-body + .card-body{border-top:1px solid var(--border)}
.card-body.tight .toolbar{padding:14px var(--pad) 0;margin:0;border:0;background:none}
.card-body.tight .empty{padding:36px var(--pad)}
.stack > .card{margin:0}
.card.h-full{height:100%}

/* ---- forms: two columns on desktop, labels above, sticky action bar */
.form-grid{display:grid;gap:0 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid .span-2,.form-grid .field.span-2{grid-column:1 / -1}
.form-grid .card,.form-grid .section-title{grid-column:1 / -1}
.field label .req,.req{color:var(--danger-ink);font-weight:700;margin-inline-start:2px}
.field.invalid label{color:var(--danger-ink)}
.field .ferr{display:flex;align-items:center;gap:5px;font-weight:600}
.field .ferr::before{content:"!";width:14px;height:14px;border-radius:50%;background:var(--danger);color:var(--accent-contrast);font-size:10px;
  display:inline-grid;place-items:center;flex:none;font-family:var(--num)}
.form-bar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:var(--gap) calc(var(--page-x) * -1) -48px;padding:12px var(--page-x);
  background:var(--canvas-veil);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--border)}
.form-bar .spacer{flex:1}
.form-bar .hint{margin:0}
.form-bar .btn{padding:9px 18px}
.card .form-bar{margin:0;position:static;background:var(--surface-3);border-radius:0 0 var(--r-md) var(--r-md);padding:12px var(--pad)}
.form-actions{justify-content:flex-start}
.form-actions .btn.ghost{margin-inline-start:auto}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 16px;margin-bottom:12px}
.checks .check{padding:6px 0}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.input-group{display:flex;align-items:stretch}
.input-group input{border-start-end-radius:0;border-end-end-radius:0}
.input-group .btn{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:-1px}
.input-group .addon{display:flex;align-items:center;padding:0 12px;border:1px solid var(--border-strong);border-inline-start:0;
  background:var(--grey-100);color:var(--text-3);font-size:var(--fs-sm);
  border-start-end-radius:var(--r-sm);border-end-end-radius:var(--r-sm);white-space:nowrap}

/* ---- record pages: summary header card + tabs */
.rec-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px var(--pad)}
.rec-head .rec-avatar{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none;
  font-weight:800;font-size:20px;font-family:var(--num)}
.rec-head .rec-avatar svg{width:24px;height:24px}
.rec-head .rec-txt{min-width:0;flex:1 1 240px}
.rec-head h2{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;color:var(--text);letter-spacing:-.015em;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
.rec-head .rec-sub{font-size:var(--fs-sm);color:var(--text-3);display:flex;gap:6px 12px;flex-wrap:wrap;margin-top:3px;align-items:center}
.rec-head .rec-sub .mono{color:var(--text-2)}
.rec-head .rec-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rec-head .rec-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-inline-start:auto}
.rec-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:1px solid var(--border);
  background:var(--foot-grad);border-radius:0 0 var(--r-md) var(--r-md);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.rec-facts > div{padding:10px var(--pad);border-inline-end:1px solid var(--border);min-width:0}
.rec-facts > div:last-child{border-inline-end:0}
.rec-facts dt{font-size:var(--fs-micro);color:var(--text-3);font-weight:600;letter-spacing:.3px}
.rec-facts dd{margin:0;font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-facts dd.n,.rec-facts dd.mono{font-family:var(--num);font-variant-numeric:tabular-nums}

.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:0;padding:0 2px;
  position:sticky;top:var(--top);z-index:var(--z-tabs);background:var(--canvas)}
.tabs .tab{border:0;background:none;padding:10px 12px;font-size:13.5px;font-weight:600;color:var(--text-3);cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap}
.tabs .tab:hover{color:var(--text)}
.tabs .tab[aria-selected="true"]{color:var(--accent)}
.tabs .tab[aria-selected="true"]::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--accent)}
.tabs .tab .cnt{background:var(--grey-100);color:var(--text-3);font-size:var(--fs-micro);padding:0 7px;border-radius:20px;font-family:var(--num);font-weight:700}
.tabs .tab[aria-selected="true"] .cnt{background:var(--accent-soft);color:var(--accent-ink)}
.tabs .tab svg{width:15px;height:15px}
.tab-panel[hidden]{display:none}
.tab-panel{animation:viewIn .2s ease both}

/* ---- sidebar: collapsible sections */
.side-sec{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;border-radius:var(--r-xs);margin-top:4px;padding:14px 12px 6px}
.side-sec:first-child{margin-top:0}
.side-sec:hover{color:var(--on-accent)}
.side-sec .sec-t{flex:1}
.side-sec .sec-ch{width:13px;height:13px;opacity:.7;transition:transform .2s}
.side-sec.closed .sec-ch{transform:rotate(-90deg)}
[dir="rtl"] .side-sec.closed .sec-ch{transform:rotate(90deg)}
.side-nav a[hidden]{display:none}

/* ---- skeleton / busy */
.skeleton{position:relative;overflow:hidden;background:var(--grey-100);border-radius:var(--r-xs);min-height:14px}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:translateX(-100%);animation:shimmer 1.3s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel-lines{display:flex;flex-direction:column;gap:10px;padding:var(--pad)}
.skel-lines .skeleton:nth-child(1){width:38%;height:18px} .skel-lines .skeleton:nth-child(2){width:90%}
.skel-lines .skeleton:nth-child(3){width:76%} .skel-lines .skeleton:nth-child(4){width:84%} .skel-lines .skeleton:nth-child(5){width:52%}
.skel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.skel-grid .skeleton{height:110px;border-radius:var(--r-md)}
[aria-busy="true"] > *:not(.toolbar):not(.topbar){opacity:.4;pointer-events:none;transition:opacity .2s}
[aria-busy="true"]{position:relative}
[aria-busy="true"]::after{content:"";position:absolute;top:120px;left:50%;width:36px;height:36px;margin-left:-18px;border-radius:50%;
  border:3px solid var(--accent-line);border-top-color:var(--accent);animation:spin .8s linear infinite;z-index:5}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   ERP shell: department hub, module chip, switcher
   Department tones are a muted, blue-anchored family: they help you tell
   eight departments apart without turning the hub into a rainbow.
   ============================================================ */
.tone-maroon{--tone:#1B62D6;--tone-2:#3B7BDE}
.tone-plum  {--tone:#5B54C8;--tone-2:#7B75DA}
.tone-gold  {--tone:#1F6E9C;--tone-2:#3D8CB8}
.tone-green {--tone:#0B7A46;--tone-2:#2E9463}
.tone-blue  {--tone:#154FAE;--tone-2:#3670C6}
.tone-orange{--tone:#A85A2A;--tone-2:#C3784A}
.tone-teal  {--tone:#0E7C7B;--tone-2:#2E9897}
.tone-slate {--tone:#4B5565;--tone-2:#6B7688}

.side-module{display:flex;align-items:center;gap:10px;margin:12px 10px 6px;padding:10px 12px;border-radius:12px;
  text-decoration:none;color:var(--on-accent);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 3px 6px rgba(6,26,64,.28),0 12px 22px -12px rgba(6,26,64,.55);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.side-module:hover{transform:translateY(-2px);background:linear-gradient(180deg,rgba(255,255,255,.21),rgba(255,255,255,.11));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 5px 10px rgba(6,26,64,.32),0 16px 28px -12px rgba(6,26,64,.60)}
.side-module:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(4,18,46,.40)}
.side-module .m-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:#FFFFFF;
  background:linear-gradient(150deg,var(--tone-400),var(--tone-600));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 4px 10px -4px rgba(6,26,64,.65)}
.side-module.is-hub .m-ico{background:linear-gradient(150deg,var(--blue-400),var(--blue-800))}
.side-module .m-ico svg{width:18px;height:18px;stroke-width:2}
.side-module .m-txt{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.3}
.side-module .m-name{font-weight:700;font-size:13.5px}
.side-module .m-sub{font-size:var(--fs-micro);color:var(--side-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-module .m-sw{opacity:.75}.side-module .m-sw svg{width:15px;height:15px}
[dir="rtl"] .side-module .m-sw svg{transform:scaleX(-1)}

.mod-switch{position:relative}
.mod-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:260px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);box-shadow:var(--e3);padding:6px;z-index:var(--z-menu);display:none;gap:2px}
.mod-menu.open{display:grid}
.mod-menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-xs);text-decoration:none;color:var(--text-2);font-weight:500;font-size:13.5px}
.mod-menu a .m-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#FFFFFF;flex:none;
  background:linear-gradient(150deg,var(--tone-400),var(--tone-600));
  box-shadow:0 4px 9px -4px var(--tone-500),inset 0 1px 0 rgba(255,255,255,.32)}
.mod-menu a .m-ico svg{width:16px;height:16px;stroke-width:2}
.mod-menu a:hover{background:var(--accent-soft);color:var(--accent-hover)}
.mod-menu a.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.mod-menu a.all{border-top:1px solid var(--border);margin-top:4px;padding-top:10px;color:var(--text-3)}
.mod-menu a.all .m-ico{background:var(--grey-100);color:var(--text-2)}

/* ---- the hub: the first screen after login, and the showcase */
.hub-head{margin:4px 0 24px}
.hub-head h1{margin:0 0 4px;font-size:var(--fs-display);line-height:var(--lh-display);color:var(--text);letter-spacing:-.025em;font-weight:800}
.hub-head p{font-size:13.5px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
/* The hub is the showcase: the biggest tiles, the boldest names, a filled
   tone badge and an Open row that becomes a real button under the pointer. */
.hub-card{display:flex;flex-direction:column;gap:11px;padding:22px;text-decoration:none;color:var(--text);position:relative;
  min-height:228px;overflow:hidden}
/* 3px tone bar along the top edge; ::before is the card wash */
.hub-card::after{content:"";position:absolute;inset-inline:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--tone-400),var(--tone-600))}
.hub-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hub-card .hub-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hub-card .hub-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;flex:none}
.hub-card .hub-ico svg{width:26px;height:26px}
.hub-card .hub-badge{display:inline-flex;align-items:baseline;gap:5px;padding:5px 11px;border-radius:20px;
  background:linear-gradient(180deg,var(--tone-600),color-mix(in srgb,var(--tone-600) 78%,var(--shade)));
  color:#FFFFFF;font-weight:800;font-size:14px;line-height:1.2;font-family:var(--num);
  box-shadow:0 4px 10px -4px var(--tone-500),inset 0 1px 0 rgba(255,255,255,.28);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hub-card .hub-badge small{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.88);font-family:var(--ar)}
.hub-card .hub-name{font-weight:800;font-size:17.5px;color:var(--text);line-height:1.32;letter-spacing:-.015em;margin-top:4px}
.hub-card .hub-desc{font-size:var(--fs-sm);color:var(--text-3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hub-card .hub-today{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.hub-card .hub-today svg{width:24px;height:24px;padding:4px;border-radius:8px;flex:none;stroke-width:2;color:var(--tone-ink);
  background:var(--tone-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone-500) 16%,transparent)}
.hub-card .hub-today b{color:var(--text);font-family:var(--num);font-variant-numeric:tabular-nums}
.hub-card .hub-foot{margin-top:auto;display:flex;align-items:center;padding-top:14px;border-top:1px solid var(--border)}
.hub-card .hub-go{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:11px;
  color:var(--tone-ink);font-weight:800;font-size:var(--fs-sm);border:1px solid transparent;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.hub-card .hub-go svg{width:17px;height:17px;stroke-width:2;transition:transform .18s ease}
.hub-card:hover .hub-go{background:var(--btn-grad);border-color:var(--border-strong);
  box-shadow:0 1px 1px rgba(20,63,136,.06),0 3px 6px -3px rgba(20,63,136,.18),var(--lit)}
[dir="ltr"] .hub-card:hover .hub-go svg{transform:translateX(3px)}
[dir="rtl"] .hub-card:hover .hub-go svg{transform:translateX(-3px)}
/* the old markup (arrow outside the pill) still lands somewhere sensible */
.hub-card .hub-foot > svg{width:17px;height:17px;margin-inline-start:auto;color:var(--tone-ink)}

/* ---- reports hub: one link card per report */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rep-link{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r-sm);border:1px solid var(--border);
  border-bottom-color:var(--border-strong);background:var(--card-grad);text-decoration:none;color:var(--text-2);
  box-shadow:var(--raise),var(--lit);transition:transform .15s ease,box-shadow .15s ease}
.rep-link:hover{transform:translateY(-2px);box-shadow:var(--raise-hover),var(--lit)}
.rep-link:active{transform:translateY(1px);box-shadow:var(--raise-press),var(--lit)}
.rep-link .rep-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.rep-link .rep-ico svg{width:19px;height:19px}
.rep-link .rep-txt{min-width:0;flex:1}
.rep-link b{display:block;font-size:13.5px;color:var(--text);font-weight:600}
.rep-link small{display:block;font-size:var(--fs-micro);color:var(--text-3);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-link > svg{width:16px;height:16px;color:var(--text-3);flex:none}

/* ---- misc blocks that replace inline styles */
.mt-0{margin-top:0!important} .mt-1{margin-top:6px!important} .mt-2{margin-top:10px!important} .mt-3{margin-top:16px!important} .mt-4{margin-top:24px!important}
.mb-0{margin-bottom:0!important} .mb-1{margin-bottom:6px!important} .mb-2{margin-bottom:10px!important} .mb-3{margin-bottom:16px!important}
.m-0{margin:0!important} .p-0{padding:0!important}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.center{text-align:center}
.pre{white-space:pre-line}
.upper{text-transform:uppercase;letter-spacing:.5px}
.xs{font-size:var(--fs-micro)} .sm{font-size:var(--fs-sm)} .md{font-size:13px} .lg{font-size:16px;font-weight:700} .xl{font-size:18px;font-weight:700}
.list{margin:0;padding-inline-start:20px} .list li{margin-bottom:4px}
.list.plain{list-style:none;padding:0}
.w-70{width:70px} .w-80{width:80px} .w-90{width:90px} .w-100{width:100px} .w-110{width:110px} .w-120{width:120px}
.w-130{width:130px} .w-150{width:150px} .w-160{width:160px}
.divider{border:0;border-top:1px solid var(--border);margin:14px 0}
.subhead{font-size:var(--fs-micro);letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);font-weight:700;margin:16px 0 8px}
.subhead:first-child{margin-top:0}
.sub-list{display:flex;flex-direction:column;gap:6px}
.sub-list > .h-row{margin:0;padding:8px 0;border-bottom:1px solid var(--border);align-items:center}
.sub-list > .h-row:last-child{border-bottom:0}
.notes{display:flex;flex-direction:column;gap:10px}
.note{padding:13px 15px;border-radius:var(--r-sm);background:var(--card-grad);border:1px solid var(--border);
  border-bottom-color:var(--border-strong);border-inline-start:4px solid var(--tone-500);font-size:13.5px;color:var(--text-2);
  box-shadow:var(--raise),var(--lit)}
.note .n-meta{font-size:var(--fs-micro);color:var(--text-3);font-weight:600;margin-bottom:3px;display:flex;gap:8px;flex-wrap:wrap}
.note .n-meta .mono{font-family:var(--num);font-weight:500}
/* Quick actions: small raised tiles, each with its own tone tile, rotating
   through the family so the block carries colour without becoming a rainbow. */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.quick-grid .btn{justify-content:flex-start;padding:10px 12px;font-size:13px;gap:11px;font-weight:700;color:var(--text)}
.quick-grid .btn svg{width:32px;height:32px;padding:7px;border-radius:10px;flex:none;stroke-width:2;color:#FFFFFF;
  background:linear-gradient(150deg,var(--tone-400),var(--tone-600));
  box-shadow:0 4px 9px -4px var(--tone-500),inset 0 1px 0 rgba(255,255,255,.32)}
.quick-grid > *:nth-child(8n+1){--tone-400:#4A86E3;--tone-500:#2C6FD9;--tone-600:#1B55B8}
.quick-grid > *:nth-child(8n+2){--tone-400:#2E9E97;--tone-500:#12867E;--tone-600:#0B6560}
.quick-grid > *:nth-child(8n+3){--tone-400:#7B72DE;--tone-500:#5B51CC;--tone-600:#43389F}
.quick-grid > *:nth-child(8n+4){--tone-400:#C08414;--tone-500:#A96F09;--tone-600:#8A5803}
.quick-grid > *:nth-child(8n+5){--tone-400:#2FA167;--tone-500:#128B4E;--tone-600:#0A6A3B}
.quick-grid > *:nth-child(8n+6){--tone-400:#E06578;--tone-500:#D6415A;--tone-600:#AF2942}
.quick-grid > *:nth-child(8n+7){--tone-400:#2A9BC4;--tone-500:#0E80A8;--tone-600:#0A6180}
.quick-grid > *:nth-child(8n+8){--tone-400:#7A8497;--tone-500:#5C687C;--tone-600:#414C5E}
.list-rows{display:flex;flex-direction:column}
.list-rows > div{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.list-rows > div:last-child{border-bottom:0}
.list-rows .n{margin-inline-start:auto;font-weight:700;color:var(--text)}
.indent{padding-inline-start:28px}
.p-hint{font-size:var(--fs-sm);padding:12px var(--pad) 0;margin:0;color:var(--text-3)}
.check.top{margin-top:26px}
.row-end{align-items:end}
.inline{display:inline}
.bordered{border-bottom:1px solid var(--border)}
.py-1{padding-top:4px;padding-bottom:4px} .py-2{padding-top:8px;padding-bottom:8px} .pb-1{padding-bottom:6px}
.ms-2{margin-inline-start:8px}
.w-min-140{min-width:140px} .w-min-240{min-width:240px} .w-max-140{max-width:140px} .w-max-160{max-width:160px} .w-max-260{max-width:260px}
.pad{padding:12px 14px} .pad-sm{padding:8px 14px}
.h-row.py-1{margin:0}
.side-sec.py-1,.side-sec.py-2,.card-body .side-sec{color:var(--text-3);padding-inline:0;cursor:default;font-size:var(--fs-micro);
  letter-spacing:.6px;text-transform:uppercase;font-weight:700;background:none;margin:16px 0 8px}
.card-body .side-sec:first-child{margin-top:0}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1240px){
  .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vitals{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpis.c6,.kpis.c5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpis.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gsearch{flex-basis:220px}
}
@media (max-width:1100px){
  .gsearch kbd{display:none}
}
@media (max-width:900px){
  :root{--page-x:16px;--pad:16px}
  .side{transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.9,.25,1)}
  [dir="ltr"] .side{transform:translateX(-100%)}
  .side.open{transform:none;box-shadow:var(--e3)}
  body.nav-open{overflow:hidden}
  .main{margin-inline-start:0}
  .topbar{flex-wrap:wrap;gap:8px 10px;padding:8px var(--page-x);min-height:56px}
  .burger{display:flex}
  .grid.c4,.grid.c3,.grid.c2,.grid.c2.wide{grid-template-columns:1fr}
  /* KPI rows stay two-up on a phone: four stacked numbers is a scroll, not a dashboard */
  .grid.c4:has(> .stat),.grid.c3:has(> .stat),.grid.c2:has(> .stat){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kv > div{grid-template-columns:1fr;gap:2px}
  .h-row{margin:0 0 14px}
  .h-row h2{font-size:16px}
  .stat{min-height:118px;padding:15px 16px 13px}
  .kpis > .stat{min-height:118px}
  .stat .s-val{font-size:26px}
  .stat .s-ico{width:40px;height:40px;border-radius:12px}
  .stat .s-ico svg{width:20px;height:20px}
  .hub-card{padding:18px}
  .toolbar .field,.toolbar .grow{flex:1 1 100%;min-width:0}
  .toolbar .btn{flex:1 1 auto}
  .vitals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .empty{padding:32px 16px}
  .pagination{padding:12px 14px}
  .pagination nav > div:first-child{display:flex;justify-content:space-between;width:100%}
  .pagination nav > div:last-child{display:none}
  .rank{grid-template-columns:minmax(70px,1fr) 2fr auto}
  .ph{flex:1 1 0;order:0}
  .crumbs{display:none}
  .page-title{font-size:17px}
  .top-tools{order:1;margin-inline-start:auto}
  .top-tools::before{display:none}
  .gsearch{display:none;flex:1 1 100%;order:3;min-width:0}
  .gsearch.open{display:block}
  .search-toggle{display:flex}
  .top-actions{order:4;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .top-actions::-webkit-scrollbar{display:none}
  .top-actions .btn{flex:0 0 auto}
  .kpis,.kpis.c4,.kpis.c5,.kpis.c6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}
  .form-bar{margin:var(--gap) calc(var(--page-x) * -1) -40px;padding:10px var(--page-x)}
  .card .form-bar{margin:0}
  .rec-head{padding:14px 16px}
  .rec-facts{grid-template-columns:repeat(2,1fr)}
  .rec-facts > div{padding:8px 16px;border-bottom:1px solid var(--border)}
  .rec-facts > div:nth-child(even){border-inline-end:0}
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;top:0}
  .tabs::-webkit-scrollbar{display:none}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  #toasts{inset-inline:14px;max-width:none;align-items:stretch}
  .hub-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .hub-head h1{font-size:22px}
}
@media (max-width:700px){
  /* Tables stack into cards: the header row hides, each cell shows its own label.
     Opt out with .no-stack. */
  .tbl-wrap:not(.no-stack){overflow:visible;background:var(--surface)}
  .tbl-wrap:not(.no-stack) .tbl thead{display:none}
  .tbl-wrap:not(.no-stack) .tbl,.tbl-wrap:not(.no-stack) .tbl tbody,.tbl-wrap:not(.no-stack) .tbl tr,.tbl-wrap:not(.no-stack) .tbl tfoot{display:block}
  .tbl-wrap:not(.no-stack) .tbl tr{padding:8px 14px;border-bottom:1px solid var(--border)}
  .tbl-wrap:not(.no-stack) .tbl tbody tr:nth-child(even){background:var(--surface)}
  .tbl-wrap:not(.no-stack) .tbl tbody tr:hover{background:var(--surface)}
  .tbl-wrap:not(.no-stack) .tbl tbody tr > td:first-child::before{display:none}
  .tbl-wrap:not(.no-stack) .tbl td{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 8px;padding:6px 0;
    border-bottom:1px dashed var(--border);text-align:end!important;white-space:normal;min-width:0;max-width:100%}
  .tbl-wrap:not(.no-stack) .tbl td:last-child{border-bottom:0}
  .tbl-wrap:not(.no-stack) .tbl td::before{content:attr(data-label);font-size:var(--fs-micro);color:var(--text-3);font-weight:600;
    text-align:start;flex:0 0 36%;margin-inline-end:auto;white-space:normal}
  .tbl-wrap:not(.no-stack) .tbl td:not([data-label])::before,.tbl-wrap:not(.no-stack) .tbl td[data-label=""]::before{display:none}
  .tbl-wrap:not(.no-stack) .tbl td[data-label=""],.tbl-wrap:not(.no-stack) .tbl td:not([data-label]){justify-content:flex-end}
  .tbl-wrap:not(.no-stack) .tbl td.n{direction:ltr}
  .tbl-wrap:not(.no-stack) .tbl td.td-actions,.tbl-wrap:not(.no-stack) .tbl td:has(> .td-actions){justify-content:flex-end;width:auto;padding-top:8px}
  .tbl-wrap:not(.no-stack) .tbl td[colspan]{justify-content:flex-start}
  .tbl-wrap:not(.no-stack) .tbl td[colspan]::before{display:none}
  .tbl-wrap:not(.no-stack) .tbl tfoot td{background:var(--surface-2);border-top:0}
  .tbl-wrap:not(.no-stack) .tbl td .meter{min-width:80px}
  .tbl-wrap:not(.no-stack) .tbl td > *{max-width:100%}
  .tbl-wrap:not(.no-stack) .tbl td .pill{white-space:normal}
  .tbl-wrap:not(.no-stack) .tbl td .td-actions{flex-wrap:wrap;justify-content:flex-end;white-space:normal}
  .tbl-wrap.tall{max-height:none}
  .rec-head .rec-actions{margin-inline-start:0;width:100%}
}
@media (max-width:480px){
  .field-row,.field-row.c2,.field-row.c3{grid-template-columns:1fr}
  .btn-row .btn{flex:1 1 auto}
  .donut-wrap{flex-direction:column}
  .kpis,.kpis.c4,.kpis.c5,.kpis.c6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat .s-val{font-size:24px}
  .stat .s-label{font-size:10.5px;letter-spacing:.4px}
  .stat .s-ico{width:36px;height:36px;border-radius:11px}
  .stat .s-ico svg{width:18px;height:18px}
  .quick-grid{grid-template-columns:1fr 1fr}
  .rec-facts{grid-template-columns:1fr 1fr}
  .hub-grid{grid-template-columns:1fr}
  .hub-card{min-height:0}
  .hub-card .hub-ico{width:48px;height:48px;border-radius:14px}
  .hub-card .hub-ico svg{width:23px;height:23px}
}

/* ============================================================
   Print — clinic paperwork: black text, one blue rule, no heavy fills
   ============================================================ */
@media print{
  @page{margin:12mm}
  body{background:var(--print-paper);color:var(--print-ink);font-size:11.5px;line-height:1.5}
  .scene,.side,.scrim,.topbar,.burger,.lang-sw,.top-actions,.btn,.btn-row,.pagination,.toolbar,.no-print,
  .td-actions,.th-actions,.icon-btn,.crumbs,.top-tools,.gsearch,.form-bar,.tabs,#toasts,dialog{display:none !important}
  .main{margin:0;padding:0;min-height:0}
  #view{animation:none}
  .tab-panel[hidden]{display:block !important}
  /* Depth and colour are for the screen. On paper every card is a hairline
     box on white: no shadow, no wash, no gradient, no coloured tile. */
  .card::before,.glass::before,.card.bar::after,.hub-card::after,
  .tbl tbody tr > td:first-child::before,.side-nav a.active::before{display:none !important}
  .card,.glass,.toolbar,.alert,.note,.rep-link,.tbl-wrap,.tbl th,.tbl tfoot td,.card-head,.card-foot,
  .rec-facts,.pill,.badge,.chip,.stat .s-delta,.meter > span,kbd{
    background-image:none !important;box-shadow:none !important;background-color:var(--print-paper) !important}
  .card,.glass{box-shadow:none !important;border:1px solid var(--print-rule);break-inside:avoid;background:var(--print-paper)}
  .card-head{border-bottom:1px solid var(--print-rule)}
  .stat{border:1px solid var(--print-rule);min-height:0}
  .stat .s-ico,.card-head .ico,.hub-card .hub-ico,.empty .e-ico,.rep-link .rep-ico,.gs-item .gs-ico{display:none}
  .rec-head .rec-avatar{background:none !important;box-shadow:none !important;color:var(--print-ink) !important;border:1px solid var(--print-rule)}
  .stat .s-val{color:var(--print-ink)}
  .grid.c4,.grid.c3{grid-template-columns:repeat(2,1fr)}
  .tbl-wrap{overflow:visible;box-shadow:none;border-color:var(--print-rule)}
  .tbl th{position:static;color:var(--print-ink);background:var(--print-paper) !important;border-bottom:1.5px solid var(--print-accent)}
  .tbl tbody tr:hover,.tbl tbody tr:nth-child(even){background:transparent !important}
  .tbl td,.tbl th{padding:5px 7px;border-bottom:1px solid var(--print-hair);color:var(--print-ink)}
  .tbl td.n,.tbl tfoot td{color:var(--print-ink)}
  .tbl tfoot td{background:var(--print-paper) !important;border-top:1px solid var(--print-accent)}
  .pill{border:1px solid var(--print-line);color:var(--print-ink) !important;background:var(--print-paper) !important}
  .pill::before{display:none}
  .bar,.rank-fill{animation:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a[href]::after{content:""}
  a{color:var(--print-ink)}
}

/* ---- shortcuts & command palette ---- */
/* Everything the keyboard layer needs. Appended on purpose: it borrows the
   tokens above and redefines none of them. */

/* keys printed on a button, and inside the cheat sheet */
.kbd-chip{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;border:0;background:none;padding:0;line-height:1;white-space:nowrap}
.kbd-chip i{font-style:normal;font-size:10px;color:var(--muted)}
.kbd-chip kbd,.pal-item kbd,.pal-foot kbd{
  font-family:var(--en);font-size:10.5px;font-weight:600;line-height:1.6;color:var(--text-dim);
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;padding:0 5px;background:var(--paper);
  min-width:18px;text-align:center;white-space:nowrap}
.btn .kbd-chip{margin-inline-start:2px;opacity:.75}
.btn.primary .kbd-chip kbd{background:rgba(0,0,0,.20);border-color:rgba(255,255,255,.36);color:#fff}

/* ---------- command palette ---------- */
dialog.dlg.pal{max-width:min(680px,calc(100vw - 24px));margin-top:min(9vh,90px);margin-bottom:auto}
dialog.dlg.pal .card{max-height:min(640px,calc(100vh - 120px));overflow:hidden}
.pal-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pal-top .pal-ico{color:var(--maroon);display:grid;place-items:center;flex:none}
.pal-top .pal-ico svg{width:19px;height:19px}
.pal-top input{flex:1;border:0;background:none;font-size:16px;font-weight:600;padding:4px 0;min-width:0}
.pal-top input:focus{outline:none;box-shadow:none}
.pal-top input::placeholder{font-weight:500;color:var(--muted)}
.pal-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--maroon);animation:pal-spin .7s linear infinite;flex:none}
@keyframes pal-spin{to{transform:rotate(360deg)}}
.pal-note[hidden]{display:none}
.pal-note{display:flex;flex-direction:column;gap:2px;padding:9px 16px;background:var(--maroon-tint);border-bottom:1px solid var(--line);font-size:12.5px}
.pal-note b{color:var(--maroon-deep);font-size:13px}
.pal-note span{color:var(--text-dim)}
.pal-list{overflow-y:auto;padding:6px;flex:1;min-height:120px}
.pal-sec{font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;font-weight:800;color:var(--muted);padding:10px 10px 4px}
.pal-item{display:flex;align-items:center;gap:11px;width:100%;text-align:start;padding:9px 10px;border-radius:10px;
  background:none;border:0;color:var(--text);font:inherit;cursor:pointer}
.pal-item .p-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--paper-2);color:var(--maroon)}
.pal-item .p-ico svg{width:16px;height:16px}
.pal-item .p-txt{min-width:0;flex:1;display:block}
.pal-item .p-txt b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-item .p-txt small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-item .p-key{flex:none;opacity:.8}
.pal-item .p-needs{font-size:10.5px;color:var(--muted);border:1px dashed var(--line-2);border-radius:6px;padding:1px 7px}
.pal-item.on{background:var(--maroon);color:#fff}
.pal-item.on .p-txt small,.pal-item.on .p-needs{color:#D8E5FB}
.pal-item.on .p-ico{background:rgba(255,255,255,.18);color:#fff}
.pal-item.on kbd{background:rgba(0,0,0,.20);border-color:rgba(255,255,255,.36);color:#fff}
.pal-empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:13px}
.pal-foot{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;
  padding:9px 14px;border-top:1px solid var(--line);background:var(--card-2);font-size:11.5px;color:var(--muted)}
.pal-sheet-link{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--maroon);font-weight:600}
.pal-sheet-link:hover{text-decoration:underline}

/* ---------- the ? cheat sheet ---------- */
.keys-cols{columns:2;column-gap:26px}
@media (max-width:760px){.keys-cols{columns:1}}
.keys-group{break-inside:avoid;margin-bottom:16px}
.keys-group h3{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:6px}
.keys-group.is-current h3{color:var(--maroon)}
.keys-group dl{margin:0}
.keys-row{display:flex;align-items:baseline;gap:10px;padding:4px 0;border-bottom:1px dashed var(--line)}
.keys-row:last-child{border-bottom:0}
.keys-row dt{flex:0 0 118px;display:flex;align-items:center;gap:5px}
.keys-row dd{margin:0;font-size:12.5px;color:var(--text-dim);flex:1}
.keys-or{color:var(--muted);font-size:10px}

/* ---------- reception quick-action bar ---------- */
.deskbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
@media (max-width:1100px){.deskbar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.deskbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.deskbar-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
  min-height:104px;padding:14px 10px;border-radius:var(--r);border:1px solid var(--line-2);background:#fff;color:var(--text);
  box-shadow:var(--raise);transition:transform .15s,box-shadow .15s,border-color .15s}
.deskbar-btn:hover{transform:translateY(-2px);box-shadow:var(--raise-hover);border-color:var(--maroon-3)}
.deskbar-btn:active{transform:translateY(0)}
.deskbar-btn .d-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--maroon-tint);color:var(--maroon)}
.deskbar-btn .d-ico svg{width:19px;height:19px}
.deskbar-btn .d-txt{font-size:13px;font-weight:700;line-height:1.35}
.deskbar-btn.primary{background:linear-gradient(180deg,var(--maroon-2),var(--maroon));color:#fff;border-color:var(--maroon-deep)}
.deskbar-btn.primary .d-ico{background:rgba(255,255,255,.18);color:#fff}
.deskbar-btn.primary kbd{background:rgba(0,0,0,.20);border-color:rgba(255,255,255,.36);color:#fff}

/* ---------- current patient chip ---------- */
.ctx-chip{position:relative;display:flex;align-items:center}
.ctx-btn{display:inline-flex;align-items:center;gap:7px;max-width:190px;padding:7px 11px;
  border-start-start-radius:30px;border-end-start-radius:30px;
  border:1px solid var(--line-2);border-inline-end:0;background:var(--maroon-tint);color:var(--maroon-deep);font-size:12.5px;font-weight:700}
.ctx-btn svg{width:15px;height:15px;flex:none}
.ctx-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-x{width:30px;align-self:stretch;border:1px solid var(--line-2);background:var(--maroon-tint);
  border-start-end-radius:30px;border-end-end-radius:30px;
  color:var(--maroon);font-size:16px;line-height:1}
.ctx-x:hover{background:var(--maroon-tint-2)}
.ctx-chip .menu-list{inset-inline-end:0;inset-inline-start:auto}

/* ---------- the one-time coach mark ---------- */
.coach{position:fixed;z-index:80;max-width:280px;display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  padding:13px 15px;border-radius:var(--r-sm);background:var(--maroon);color:#fff;box-shadow:var(--raise-hover);
  font-size:12.5px;line-height:1.6;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
.coach.in{opacity:1;transform:none}
.coach::before{content:"";position:absolute;top:-6px;inset-inline-end:24px;width:12px;height:12px;background:var(--maroon);transform:rotate(45deg)}
.coach .btn{background:rgba(0,0,0,.20);color:#fff;border-color:rgba(255,255,255,.36);padding:5px 12px}
.coach .btn:hover{background:rgba(0,0,0,.32)}

/* ---------- keyboard-navigable rows ---------- */
[data-rows] [data-row]{scroll-margin-block:80px}
[data-rows] [data-row].row-on > td,[data-rows] [data-row].row-on > th{background:var(--maroon-tint)}
[data-rows] [data-row].row-on > td:first-child,[data-rows] [data-row].row-on > th:first-child{box-shadow:inset 3px 0 0 var(--maroon)}
[dir="rtl"] [data-rows] [data-row].row-on > td:first-child{box-shadow:inset -3px 0 0 var(--maroon)}
[data-rows] [data-row].row-on{outline:2px solid rgba(27,98,214,.28);outline-offset:-2px}
[data-rows] [data-row]:focus-visible{outline:2px solid var(--maroon);outline-offset:-2px}

/* ---------- a submit that says it is working ---------- */
.btn.is-busy{position:relative;color:transparent!important;pointer-events:none}
.btn.is-busy > *{visibility:hidden}
.btn.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:pal-spin .7s linear infinite}
.btn:not(.primary):not(.danger).is-busy::after{border-color:var(--line-2);border-top-color:var(--maroon)}
[aria-busy="true"] .tbl{opacity:.55;transition:opacity .15s}
[data-live-clock]{font-size:11px;color:var(--muted)}
[data-live-clock].pulse{animation:pal-pulse .9s ease}
@keyframes pal-pulse{0%{color:var(--maroon)}100%{color:var(--muted)}}

/* ---------- focus is always visible ---------- */
a:focus-visible,button:focus-visible,.btn:focus-visible,.deskbar-btn:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,.pal-item:focus-visible{outline:2px solid var(--maroon);outline-offset:2px;border-radius:8px}
.deskbar-btn:focus-visible{outline-offset:3px}


/* toasts sit above the page but never in the way of a click */
#toasts{pointer-events:none}
#toasts .toast{pointer-events:auto}
/* ---------- printing the cheat sheet ---------- */
@media print{
  body.printing-keys > *:not(#keys-sheet){display:none!important}
  body.printing-keys #keys-sheet{display:block!important;position:static;max-width:none;width:100%}
  body.printing-keys #keys-sheet::backdrop{display:none}
  body.printing-keys #keys-sheet .card{box-shadow:none;border:0;max-height:none}
  body.printing-keys #keys-sheet .m-x,body.printing-keys #keys-sheet [data-keys-print]{display:none!important}
  .deskbar,.coach,.ctx-chip{display:none!important}
}

/* ============================================================
   Depth layer for the keyboard block above
   The shortcuts CSS is kept verbatim; everything that needs to join the
   raised system is restated here, after it, instead of being edited inside.
   ============================================================ */

/* ---------- reception quick-action bar: six coloured raised tiles ---------- */
.deskbar{gap:12px;margin-bottom:var(--gap)}
.deskbar-btn{
  min-height:112px;padding:16px 12px;gap:9px;border-radius:var(--r-md);
  background:var(--card-grad);border:1px solid var(--border);border-bottom-color:var(--border-strong);
  color:var(--text);position:relative;isolation:isolate;overflow:hidden;
  box-shadow:var(--raise),var(--lit);
  transition:transform .16s ease,box-shadow .16s ease;
}
.deskbar-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(200px 150px at var(--wash-at),var(--tone-wash),transparent 70%);
  opacity:.9;transition:opacity .16s ease;
}
.deskbar-btn:hover{transform:translateY(-3px);box-shadow:var(--raise-hover),var(--lit);border-color:var(--border-strong)}
.deskbar-btn:hover::before{opacity:1}
.deskbar-btn:active{transform:translateY(1px);box-shadow:var(--raise-press),var(--lit)}
.deskbar-btn .d-ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#FFFFFF;
  background:linear-gradient(150deg,var(--tone-400),var(--tone-600));
  box-shadow:0 6px 14px -5px var(--tone-500),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.12);
}
.deskbar-btn .d-ico svg{width:22px;height:22px;stroke-width:2}
.deskbar-btn .d-txt{font-size:13.5px;font-weight:800;line-height:1.35;letter-spacing:-.01em}
.deskbar-btn .kbd-chip{opacity:1}
.deskbar-btn > *:nth-child(1){position:relative}
/* the tones rotate so the row carries colour without becoming a rainbow */
.deskbar-btn:nth-child(1){--tone-400:#4A86E3;--tone-500:#2C6FD9;--tone-600:#1B55B8;--tone-ink:#14509F;--tone-wash:rgba(44,111,217,.10)}
.deskbar-btn:nth-child(2){--tone-400:#2E9E97;--tone-500:#12867E;--tone-600:#0B6560;--tone-ink:#0A6660;--tone-wash:rgba(18,134,126,.11)}
.deskbar-btn:nth-child(3){--tone-400:#C08414;--tone-500:#A96F09;--tone-600:#8A5803;--tone-ink:#7A4B00;--tone-wash:rgba(169,111,9,.11)}
.deskbar-btn:nth-child(4){--tone-400:#7B72DE;--tone-500:#5B51CC;--tone-600:#43389F;--tone-ink:#4438A8;--tone-wash:rgba(91,81,204,.10)}
.deskbar-btn:nth-child(5){--tone-400:#2FA167;--tone-500:#128B4E;--tone-600:#0A6A3B;--tone-ink:#0A6B3B;--tone-wash:rgba(18,139,78,.11)}
.deskbar-btn:nth-child(6){--tone-400:#2A9BC4;--tone-500:#0E80A8;--tone-600:#0A6180;--tone-ink:#0A6383;--tone-wash:rgba(14,128,168,.11)}
/* the one primary target stays accent-filled, whatever position it lands in */
.deskbar-btn.primary{
  color:#FFFFFF;border-color:var(--accent-active);
  background:linear-gradient(170deg,#3E7FE0 0%,var(--accent) 48%,#154FAE 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(18,51,107,.40),
    0 2px 3px rgba(20,63,136,.20),0 16px 30px -12px rgba(20,63,136,.65);
}
.deskbar-btn.primary::before{background:radial-gradient(200px 150px at var(--wash-at),rgba(255,255,255,.20),transparent 70%)}
.deskbar-btn.primary:hover{border-color:var(--accent-active);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -2px 0 rgba(18,51,107,.40),
    0 3px 5px rgba(20,63,136,.24),0 24px 40px -14px rgba(20,63,136,.75)}
.deskbar-btn.primary .d-ico{
  background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.12));color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 10px -4px rgba(6,26,64,.55)}

/* ---------- command palette rows join the tile system ---------- */
.pal-item .p-ico{width:32px;height:32px;border-radius:10px;color:#FFFFFF;
  background:linear-gradient(150deg,var(--blue-400),var(--blue-700));
  box-shadow:0 4px 10px -4px var(--blue-600),inset 0 1px 0 rgba(255,255,255,.32)}
.pal-item .p-ico svg{width:17px;height:17px;stroke-width:2}
.pal-item.on .p-ico{background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.14));box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.pal-top{background:var(--head-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.pal-foot{background:var(--foot-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.kbd-chip kbd,.pal-item kbd,.pal-foot kbd{background:var(--btn-grad);box-shadow:0 1px 1px rgba(20,63,136,.08),inset 0 1px 0 #FFFFFF}
.btn.primary .kbd-chip kbd,.pal-item.on kbd,.deskbar-btn.primary kbd,.coach .btn kbd{box-shadow:inset 0 1px 0 rgba(255,255,255,.20)}

/* ---------- the current-patient chip ---------- */
.ctx-btn{background:linear-gradient(180deg,#FFFFFF,var(--accent-soft));
  box-shadow:0 1px 1px rgba(20,63,136,.07),0 3px 6px -3px rgba(20,63,136,.18),var(--lit)}
.ctx-x{background:linear-gradient(180deg,#FFFFFF,var(--accent-soft));
  box-shadow:0 1px 1px rgba(20,63,136,.07),0 3px 6px -3px rgba(20,63,136,.18),var(--lit)}
.ctx-x:hover{background:linear-gradient(180deg,var(--accent-soft),var(--accent-soft-2))}

/* ---------- keyboard row highlight uses the row's own tone ---------- */
[data-rows] [data-row].row-on > td,[data-rows] [data-row].row-on > th{background:var(--tone-wash)}
[data-rows] [data-row].row-on > td:first-child{box-shadow:none}
[data-rows] [data-row].row-on > td:first-child::before{transform:scaleX(1)}

/* ---------- the coach mark keeps its accent field but gains a body ---------- */
.coach{background:linear-gradient(170deg,#3B7BDE,var(--accent) 55%,#154FAE);
  box-shadow:0 4px 8px rgba(20,63,136,.22),0 24px 44px -16px rgba(20,63,136,.65)}

/* ---------- print: strip everything this layer added ---------- */
@media print{
  .deskbar-btn::before{display:none !important}
  .deskbar-btn,.deskbar-btn .d-ico,.pal-item .p-ico,.ctx-btn,.ctx-x,.coach{
    background-image:none !important;box-shadow:none !important}
}