/* ═══════════════════════════════════════════════════════════════════════════
   IBSAR · UI2 — the 2026 redesign (design build only: cfg 'ui' => 'v2')

   The shape is the "Vertix" dashboard the owner picked: a soft grey canvas, the app as
   one big rounded floating panel, everything in pills — logo, the section tabs
   with a dark active pill, the icon cluster, the user chip — a slim icon rail,
   huge bold titles, borderless white cards, one vivid gradient hero, segmented
   controls and a circular dark-mode reveal.

   The colours are ours, measured from the logo (23 Oct 2026):
     #187ec0 iris blue · #0c4e78 deep blue · #3c9cd2 light blue
   Vertix's orange hero became the logo's blue; Ibsar's own orange (#ee7d22) is kept
   only for the warm accents (notification dots, "new" badges).

   Everything is scoped to html.ui2, so the classic build that shares falcon.css is
   untouched. Dark mode is html.ui2.dark.
   ═══════════════════════════════════════════════════════════════════════════ */

html.ui2{
  --u-canvas:#e8eaee;  --u-panel:#f3f4f6;  --u-card:#ffffff;  --u-sunk:#eef0f3;
  --u-hover:#e7eaee;   --u-ink:#0e1822;    --u-ink2:#4f5b67;  --u-ink3:#737e8a;
  --u-line:#e4e7eb;    --u-act:#0b2233;    --u-act-ink:#ffffff;
  --u-brand:#187ec0;   --u-brand-d:#0c4e78; --u-brand-l:#3c9cd2;
  --u-brand-soft:#e6f1f9; --u-warm:#ee7d22; --u-warm-soft:#fdeee2;
  --u-good:#15803d;    --u-good-soft:#e5f5ea; --u-bad:#dc2626; --u-bad-soft:#fdecec;
  --u-shadow:0 1px 2px rgba(14,24,34,.04),0 6px 20px rgba(14,24,34,.05);
  --u-shadow-lg:0 2px 6px rgba(14,24,34,.05),0 24px 60px rgba(14,24,34,.16);
  --u-r-xl:30px; --u-r-lg:22px; --u-r-md:14px; --u-r-sm:10px;
  --u-font:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Tahoma,Arial,sans-serif;
  --u-font-display:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Tahoma,Arial,sans-serif;

  /* the classic variables every screen already uses, re-pointed at the new palette —
     inline styles written as var(--line) / var(--accent) follow for free */
  --accent:var(--u-brand); --accent-d:var(--u-brand-d); --accent-l:var(--u-brand-soft); --accent-ll:var(--u-sunk);
  --edge:var(--u-line); --line:var(--u-line); --ink:var(--u-ink); --muted:var(--u-ink3);
  --field:var(--u-card); --field-ro:var(--u-sunk);
  --red:var(--u-brand); --red-d:var(--u-brand-d); --orange:var(--u-brand); --orange-d:var(--u-brand-d); --orange-l:var(--u-brand-soft);
  --navy:var(--u-act); --navy-d:var(--u-act);
  background:var(--u-canvas); color-scheme:light;
}
html.ui2.dark{
  --u-canvas:#050608;  --u-panel:#0c0e11;  --u-card:#15181c;  --u-sunk:#1c2025;
  --u-hover:#23282e;   --u-ink:#f1f3f5;    --u-ink2:#b2bac2;  --u-ink3:#8a949e;
  --u-line:#22272d;    --u-act:#f1f3f5;    --u-act-ink:#0b0d10;
  --u-brand-soft:rgba(60,156,210,.15); --u-warm-soft:rgba(238,125,34,.16);
  --u-good:#4ade80; --u-good-soft:rgba(74,222,128,.13); --u-bad:#f87171; --u-bad-soft:rgba(248,113,113,.14);
  --u-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px rgba(0,0,0,.35);
  --u-shadow-lg:0 30px 80px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* a screen inside a popup iframe: see-through, so the dimmed app shows around it */
html.ui2.u2-frame,html.ui2.u2-frame body{background:transparent !important}

/* ── base ─────────────────────────────────────────────────────────────────── */
html.ui2 body{background:var(--u-canvas);color:var(--u-ink);font-family:var(--u-font);font-size:13px;
  -webkit-font-smoothing:antialiased}
html.ui2 ::-webkit-scrollbar{width:10px;height:10px}
html.ui2 ::-webkit-scrollbar-track{background:transparent}
html.ui2 ::-webkit-scrollbar-thumb{background:var(--u-line);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
html.ui2 ::-webkit-scrollbar-thumb:hover{background:var(--u-ink3);background-clip:padding-box}
html.ui2 ::selection{background:var(--u-brand);color:#fff}

/* the circular reveal when the theme flips (ui2.js → View Transitions API) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* ── the floating panel ───────────────────────────────────────────────────── */
html.ui2 .app{
  margin:12px;min-height:calc(100vh - 24px);background:var(--u-panel);border-radius:var(--u-r-xl);
  display:grid;grid-template-columns:68px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"top top" "rail main" "foot foot";overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 40px rgba(14,24,34,.06)}
html.ui2.dark .app{box-shadow:0 0 0 1px #15181c inset}
html.ui2 .app>.topbar{grid-area:top}
html.ui2 .app>.u2-rail{grid-area:rail}
html.ui2 .app>.menu,html.ui2 .app>.workspace,html.ui2 .app>.u2-main{grid-area:main;min-width:0;min-height:0}
html.ui2 .app>.footbar{grid-area:foot}
html.ui2 body.is-test{outline:none}
html.ui2 .test-ribbon{display:none}

/* ── top bar: four pills ──────────────────────────────────────────────────── */
html.ui2 .topbar{background:transparent;border:0;box-shadow:none;color:var(--u-ink);
  padding:14px 18px 6px;gap:12px;display:flex;align-items:center}
html.ui2 .topbar .title,html.ui2 .topbar .win-min,html.ui2 .topbar>.win-x{display:none}
html.ui2 .u2-logo{order:1;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 6px;
  background:var(--u-card);border-radius:999px;box-shadow:var(--u-shadow);flex:none;text-decoration:none;color:var(--u-ink)}
html.ui2[dir=rtl] .u2-logo,html.ui2 body[dir=rtl] .u2-logo{padding:0 6px 0 16px}
html.ui2 .u2-logo img{width:34px;height:34px;border-radius:50%;display:block}
html.ui2 .u2-logo b{font-family:var(--u-font-display);font-size:15px;font-weight:800;letter-spacing:-.01em}
html.ui2 .u2-logo small{display:block;font-size:10px;color:var(--u-ink3);font-weight:600;margin-top:-1px}
html.ui2 .tb-branch{order:2;height:36px;padding:0 14px;background:var(--u-brand-soft);color:var(--u-brand-d);
  border-radius:999px;font-size:12px;font-weight:700;box-shadow:none}
html.ui2.dark .tb-branch{color:var(--u-brand-l)}
html.ui2 .u2-tabs{order:3;flex:1;display:flex;justify-content:center;min-width:0}
html.ui2 .u2-tabs .u2-tabs-in{display:inline-flex;gap:2px;padding:5px;background:var(--u-card);border-radius:999px;
  box-shadow:var(--u-shadow);max-width:100%;overflow-x:auto;scrollbar-width:none}
html.ui2 .u2-tabs .u2-tabs-in::-webkit-scrollbar{display:none}
html.ui2 .u2-tabs .cat{all:unset;box-sizing:border-box;cursor:pointer;white-space:nowrap;height:36px;padding:0 16px;
  display:inline-flex;align-items:center;border-radius:999px;font-size:13px;font-weight:600;color:var(--u-ink2);
  transition:background .2s,color .2s}
html.ui2 .u2-tabs .cat .ic{display:none}
/* each category carries its classic colour inline — the pill ignores it */
html.ui2 .u2-tabs .cat{background:transparent !important;box-shadow:none !important}
html.ui2 .u2-tabs .cat:hover{color:var(--u-ink);background:var(--u-sunk) !important}
html.ui2 .u2-tabs .cat.active{background:var(--u-act) !important;color:var(--u-act-ink)}
html.ui2 .topbar .topnav{order:4;display:inline-flex;gap:2px;padding:5px;background:var(--u-card);border-radius:999px;box-shadow:var(--u-shadow)}
html.ui2 .topbar .topnav a{width:36px;height:36px;border-radius:50%;background:transparent;color:var(--u-ink2)}
html.ui2 .topbar .topnav a:hover{background:var(--u-sunk);color:var(--u-ink)}
html.ui2 .topbar .topnav svg{opacity:1;width:18px;height:18px}
html.ui2 .tb-prof{order:5;height:46px;padding:0 14px 0 5px;background:var(--u-card);border-radius:999px;box-shadow:var(--u-shadow);gap:10px}
html.ui2 body[dir=rtl] .tb-prof{padding:0 5px 0 14px}
html.ui2 .tb-prof:hover{background:var(--u-card);box-shadow:var(--u-shadow),0 0 0 2px var(--u-line)}
html.ui2 .tb-prof .tx b{color:var(--u-ink);font-size:13px}
html.ui2 .tb-prof .tx small{color:var(--u-ink3);font-weight:600;font-size:10.5px}
html.ui2 .tb-av{width:36px;height:36px;box-shadow:none}
html.ui2 .tb-prof::after{content:"";width:16px;height:16px;opacity:.5;flex:none;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat}

/* narrower screens: the section tabs keep their room; the extras fold away first */
@media (max-width:1500px){
  html.ui2 .u2-logo small,html.ui2 .tb-prof .tx small{display:none}
  html.ui2 .u2-tabs .cat{padding:0 12px;font-size:12.5px}
}
@media (max-width:1300px){
  html.ui2 .u2-logo span,html.ui2 .u2-env{display:none}
  html.ui2 .u2-logo{padding:0 6px !important}
  html.ui2 .tb-prof .tx{display:none}
  html.ui2 .tb-prof{padding:0 10px 0 5px !important}
}
@media (max-width:1050px){
  html.ui2 .topbar{flex-wrap:wrap}
  html.ui2 .u2-tabs{order:9;flex-basis:100%}
}

/* dropdowns & the branch menu */
html.ui2 .tb-menu,html.ui2 .tb-brmenu{background:var(--u-card);border:1px solid var(--u-line);border-radius:18px;
  box-shadow:var(--u-shadow-lg);padding:6px}
html.ui2 .tb-menu .hd,html.ui2 .tb-brmenu .hd{color:var(--u-ink3);border-bottom:1px solid var(--u-line);background:transparent;
  text-transform:none;font-size:11px;letter-spacing:.04em}
html.ui2 .tb-menu a,html.ui2 .tb-brmenu button{color:var(--u-ink);border-radius:12px;font-weight:500}
html.ui2 .tb-menu a:hover,html.ui2 .tb-brmenu button:hover{background:var(--u-sunk);color:var(--u-ink)}
html.ui2 .tb-brmenu button.on{background:var(--u-brand-soft);color:var(--u-brand-d)}
html.ui2 .tb-brmenu .ft{background:transparent;color:var(--u-ink3);border-top:1px solid var(--u-line)}
html.ui2 .tb-menu a.logout{color:var(--u-bad);border-top:1px solid var(--u-line);border-radius:12px}
html.ui2 .tb-menu a.logout:hover{background:var(--u-bad-soft)}

/* ── the icon rail ────────────────────────────────────────────────────────── */
html.ui2 .u2-rail{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 16px}
html.ui2 .u2-grp{display:flex;flex-direction:column;gap:4px;padding:5px;background:var(--u-card);border-radius:999px;box-shadow:var(--u-shadow)}
html.ui2 .u2-grp.end{margin-top:auto}
html.ui2 .u2-ib{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--u-ink2);cursor:pointer;
  display:grid;place-items:center;position:relative;text-decoration:none;transition:background .18s,color .18s,transform .18s}
html.ui2 .u2-ib svg{width:18px;height:18px}
html.ui2 .u2-ib:hover{background:var(--u-sunk);color:var(--u-ink)}
html.ui2 .u2-ib.on{background:var(--u-act);color:var(--u-act-ink)}
html.ui2 .u2-ib.out:hover{background:var(--u-bad-soft);color:var(--u-bad)}
/* hover label, on the side away from the edge */
html.ui2 .u2-ib[data-tip]:hover::after{content:attr(data-tip);position:absolute;inset-inline-start:calc(100% + 10px);top:50%;
  transform:translateY(-50%);white-space:nowrap;background:var(--u-act);color:var(--u-act-ink);font-size:11.5px;font-weight:600;
  padding:5px 10px;border-radius:8px;pointer-events:none;z-index:60;box-shadow:var(--u-shadow-lg)}

/* ── footer: a quiet line ─────────────────────────────────────────────────── */
html.ui2 .footbar{padding:6px 22px 12px;background:transparent}
html.ui2 .footbar .fclock{color:var(--u-ink3);font-weight:600}
html.ui2 .footbar .wm{height:26px;opacity:.75}
html.ui2.dark .footbar .wm{filter:brightness(0) invert(1);opacity:.5}
html.ui2 .footbar .pby,html.ui2 .footbar .pby b{color:var(--u-ink3)}

/* ── home (the menu) ──────────────────────────────────────────────────────── */
html.ui2 .menu{display:block;overflow:auto;padding:4px 22px 18px}
html.ui2 .menu-side{display:none}
html.ui2 .menu-main{background:transparent;overflow:visible}
html.ui2 .menu-main::after{display:none}
html.ui2 .menu-pane{padding:4px 0 6px}

html.ui2 .u2-hello{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 0 18px;flex-wrap:wrap}
html.ui2 .u2-hello h1{margin:0;font-family:var(--u-font-display);font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-.025em;color:var(--u-ink)}
html.ui2 .u2-hello p{margin:6px 0 0;color:var(--u-ink2);font-size:14px}
html.ui2 .u2-cards{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-bottom:22px}
@media (max-width:1050px){html.ui2 .u2-cards{grid-template-columns:1fr}}

/* the hero: the logo's blue, a glow, big white numbers */
html.ui2 .u2-hero{position:relative;overflow:hidden;border-radius:var(--u-r-lg);padding:20px 24px 22px;color:#fff;
  background:radial-gradient(120% 140% at 85% 20%,#5fb2e2 0%,rgba(95,178,226,0) 55%),
             linear-gradient(135deg,#2a8fd0 0%,#187ec0 45%,#0c4e78 100%);
  box-shadow:0 18px 40px rgba(12,78,120,.28)}
html.ui2 .u2-hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;inset-inline-end:-140px;top:-170px;
  background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
html.ui2 .u2-hero .row{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
html.ui2 .u2-chip svg{width:14px;height:14px}
html.ui2 .u2-env{order:2;height:30px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border-radius:999px;flex:none;
  background:var(--u-warm-soft);color:var(--u-warm);font-size:11.5px;font-weight:700;white-space:nowrap}
html.ui2 .u2-env::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
html.ui2 .u2-chip{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(4px)}
html.ui2 .u2-hero .since{font-size:12px;opacity:.85}
html.ui2 .u2-hero .big{display:flex;align-items:baseline;gap:10px;margin:22px 0 14px;position:relative;z-index:1}
html.ui2 .u2-hero .big b{font-family:var(--u-font-display);font-size:58px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
html.ui2 .u2-hero .big span{font-size:15px;opacity:.9}
html.ui2 .u2-bar{position:relative;z-index:1;height:9px;border-radius:999px;overflow:hidden;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 2px,rgba(255,255,255,.08) 2px 6px)}
html.ui2 .u2-bar i{position:absolute;inset-block:0;inset-inline-start:0;background:#fff;border-radius:999px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
html.ui2 .u2-hero .legend{display:flex;justify-content:space-between;font-size:12px;opacity:.9;margin-top:8px;position:relative;z-index:1}
html.ui2 .u2-hero .acts{display:flex;gap:8px;margin-top:18px;position:relative;z-index:1;flex-wrap:wrap}
html.ui2 .u2-pill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;text-decoration:none;transition:transform .15s,filter .15s,background .15s}
html.ui2 .u2-pill svg{width:15px;height:15px}
html.ui2 .u2-pill.light{background:#fff;color:#0c4e78}
html.ui2 .u2-pill.glass{background:rgba(255,255,255,.16);color:#fff}
html.ui2 .u2-pill.dark{background:var(--u-act);color:var(--u-act-ink)}
html.ui2 .u2-pill:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* white cards */
html.ui2 .u2-card{background:var(--u-card);border-radius:var(--u-r-lg);padding:18px 20px;box-shadow:var(--u-shadow)}
html.ui2 .u2-card h3{margin:0 0 12px;font-size:16px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:8px}
html.ui2 .u2-seg{display:inline-flex;gap:2px;padding:3px;background:var(--u-sunk);border-radius:999px;margin-bottom:12px}
html.ui2 .u2-seg button{all:unset;cursor:pointer;height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;color:var(--u-ink2)}
html.ui2 .u2-seg button.on{background:var(--u-card);color:var(--u-ink);box-shadow:0 1px 3px rgba(14,24,34,.1)}
html.ui2 .u2-list{display:flex;flex-direction:column;gap:2px}
html.ui2 .u2-li{display:flex;align-items:center;gap:12px;padding:8px 2px;border-radius:12px}
html.ui2 .u2-li .ci{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--u-brand-soft);color:var(--u-brand)}
html.ui2.dark .u2-li .ci{color:var(--u-brand-l)}
html.ui2 .u2-li .ci svg{width:16px;height:16px}
html.ui2 .u2-li .ci.warm{background:var(--u-warm-soft);color:var(--u-warm)}
html.ui2 .u2-li .ci.good{background:var(--u-good-soft);color:var(--u-good)}
html.ui2 .u2-li .tx{flex:1;min-width:0}
html.ui2 .u2-li .tx b{display:block;font-size:13px;font-weight:600}
html.ui2 .u2-li .tx small{color:var(--u-ink3);font-size:11.5px}
html.ui2 .u2-li .v{font-family:var(--u-font-display);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
html.ui2 .u2-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700;
  background:var(--u-warm-soft);color:var(--u-warm)}
html.ui2 .u2-badge.blue{background:var(--u-brand-soft);color:var(--u-brand)}

/* section heading for each tab's tiles */
html.ui2 .u2-pane-t{display:flex;align-items:center;justify-content:space-between;margin:2px 0 14px}
html.ui2 .u2-pane-t h2{margin:0;font-family:var(--u-font-display);font-size:22px;font-weight:700;letter-spacing:-.02em}
html.ui2 .u2-pane-t span{color:var(--u-ink3);font-size:12.5px}
html.ui2 .sections{display:flex;flex-direction:column;align-items:stretch;gap:20px}
html.ui2 .section,html.ui2 .section.narrow{width:auto}
html.ui2 .sec-title{color:var(--u-ink3);font-size:12px;font-weight:600;letter-spacing:.03em;margin:0 0 10px}

/* tiles → cards; the tile's own colour lives on as its icon */
html.ui2 .menu-tiles,html.ui2 .section.narrow .menu-tiles{display:grid;width:auto;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
html.ui2 .tile{background:var(--u-card) !important;color:var(--u-ink);width:auto;height:auto;min-height:118px;
  border-radius:var(--u-r-lg);box-shadow:var(--u-shadow);padding:16px;gap:14px;
  align-items:flex-start;justify-content:space-between;text-align:start;filter:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
html.ui2 .tile.wide{grid-column:span 2;width:auto}
html.ui2 .tile:hover{transform:translateY(-4px);filter:none;box-shadow:var(--u-shadow),0 16px 34px rgba(14,24,34,.10)}
html.ui2.dark .tile:hover{box-shadow:0 16px 34px rgba(0,0,0,.5),0 0 0 1px var(--u-line)}
html.ui2 .tile .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:20px;
  background:color-mix(in srgb,var(--tc,var(--u-brand)) 14%,transparent);color:var(--tc,var(--u-brand))}
html.ui2.dark .tile .ic{background:color-mix(in srgb,var(--tc,var(--u-brand)) 22%,transparent);color:color-mix(in srgb,var(--tc,var(--u-brand)) 70%,#fff)}
html.ui2 .tile .ic svg{width:21px;height:21px}
html.ui2 .tile .ic img{width:26px;height:26px;filter:none}
html.ui2 .tile .nm{font-size:13.5px;font-weight:600;line-height:1.35}
html.ui2 .tile .badge{background:var(--u-warm-soft);color:var(--u-warm);font-weight:700;top:12px;inset-inline-end:12px}
html.ui2 .tile.soon{opacity:.55}

/* daily digest card + backup alarm */
html.ui2 .digest-host{padding:0;max-width:none;margin:0 0 22px}
html.ui2 .digest-host .ai-card{border:0;border-radius:var(--u-r-lg);box-shadow:var(--u-shadow);background:var(--u-card);color:var(--u-ink)}
html.ui2 .digest-host .ai-card .ai-head,html.ui2 .digest-host .ai-card .ai-head b{color:var(--u-ink)}
html.ui2 .digest-host .ai-card .ai-sub,html.ui2 .digest-host .ai-card .ai-foot{color:var(--u-ink3)}
html.ui2 .digest-host .ai-card .ai-body,html.ui2 .digest-host .ai-card .ai-lines{color:var(--u-ink2)}
html.ui2 .dg-tabs button{border-color:var(--u-line);background:var(--u-sunk);color:var(--u-ink2)}
html.ui2 .dg-tabs button.on{background:var(--u-act);color:var(--u-act-ink);border-color:var(--u-act)}
html.ui2 .dg-days button.on{background:var(--u-brand);border-color:var(--u-brand);color:#fff}
html.ui2 .dg-note{color:var(--u-ink)}
html.ui2 .vault-warn{margin:0 0 16px;max-width:none;border-radius:var(--u-r-md);border:0;background:var(--u-bad-soft);color:var(--u-bad)}

/* entrance: cards rise in, one after another */
@keyframes u2rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.ui2 .u2-hello,html.ui2 .u2-cards>*,html.ui2 .digest-host,html.ui2 .u2-pane-t,html.ui2 .menu-pane:not([style*="none"]) .tile{
  animation:u2rise .55s cubic-bezier(.2,.8,.2,1) both}
html.ui2 .u2-cards>*:nth-child(2){animation-delay:.06s}
html.ui2 .digest-host{animation-delay:.1s}
html.ui2 .menu-pane .tile:nth-child(1){animation-delay:.08s} html.ui2 .menu-pane .tile:nth-child(2){animation-delay:.11s}
html.ui2 .menu-pane .tile:nth-child(3){animation-delay:.14s} html.ui2 .menu-pane .tile:nth-child(4){animation-delay:.17s}
html.ui2 .menu-pane .tile:nth-child(5){animation-delay:.20s} html.ui2 .menu-pane .tile:nth-child(6){animation-delay:.23s}
html.ui2 .menu-pane .tile:nth-child(7){animation-delay:.26s} html.ui2 .menu-pane .tile:nth-child(n+8){animation-delay:.29s}
@media (prefers-reduced-motion:reduce){html.ui2 *{animation:none !important;transition:none !important}}

/* ═══ every window, popup and screen ═════════════════════════════════════════
   Windows go dark with everything else. What a screen paints for itself is turned
   dark by js/ui2-dark.js; what is written here (tokens) always wins over that. */
html.ui2 .pop-ov{background:rgba(9,15,22,.26);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:u2fade .2s ease both}
html.ui2.dark .pop-ov{background:rgba(0,0,0,.5)}
@keyframes u2fade{from{opacity:0}to{opacity:1}}
html.ui2 .modal-bg{background:rgba(9,15,22,.32);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}

html.ui2 .win{background:var(--u-card);border:0 !important;border-radius:var(--u-r-lg);box-shadow:var(--u-shadow-lg);overflow:hidden}
html.ui2 .dlg-host .win{border:0;box-shadow:var(--u-shadow-lg);animation:u2pop .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes u2pop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
html.ui2 .win-title{background:transparent !important;color:var(--u-ink);font-family:var(--u-font-display);font-size:17px;font-weight:700;
  letter-spacing:-.01em;padding:16px 18px 10px;border-bottom:1px solid var(--u-line)}
html.ui2 .win-title .t{text-align:start}
html.ui2 .win-band{display:none}
html.ui2 .win-x{width:32px;height:32px;border-radius:50%;border:0;background:var(--u-sunk);color:var(--u-ink2);font-size:13px}
html.ui2 .win-x:hover{background:var(--u-bad-soft);color:var(--u-bad)}
html.ui2 .win-body{padding:18px 20px}
html.ui2 .def-head{background:transparent;border-bottom:1px solid var(--u-line);padding:14px 18px}
html.ui2 .def-foot{background:transparent;border-top:1px solid var(--u-line)}

/* buttons → pills */
html.ui2 .dbtn{border:0;border-radius:999px;background:var(--u-sunk);color:var(--u-ink);font-weight:600;font-size:12.5px;
  padding:6px 14px 6px 6px;box-shadow:none;gap:8px;transition:background .15s,transform .15s}
html.ui2 body[dir=rtl] .dbtn{padding:6px 6px 6px 14px}
html.ui2 .dbtn:hover{background:var(--u-hover);color:var(--u-ink);border:0}
html.ui2 .dbtn:active{transform:translateY(1px)}
html.ui2 .dbtn .ic{width:26px;height:26px;border-radius:50%}
html.ui2 .dbtn.save{background:var(--u-act);color:var(--u-act-ink)}
html.ui2 .dbtn.save:hover{background:var(--u-act);filter:brightness(1.15)}
html.ui2 .dbtn.save .ic{background:rgba(255,255,255,.16)}
html.ui2 .tbtn{border:0;border-radius:999px;padding:8px 16px;font-weight:600;box-shadow:none;background:var(--u-sunk);color:var(--u-ink)}
html.ui2 .tbtn.save{background:var(--u-act);color:var(--u-act-ink)}
html.ui2 .tbtn.new{background:var(--u-brand);color:#fff}
html.ui2 .tbtn.del{background:var(--u-bad-soft);color:var(--u-bad)}
html.ui2 .tbtn.close,html.ui2 .tbtn.ghost{background:var(--u-sunk);color:var(--u-ink2)}
html.ui2 .tbtn:hover{filter:none;background-image:none;transform:translateY(-1px)}
html.ui2 .toolbar{background:transparent;border:0;padding:10px 14px}
html.ui2 .mini-add{border-radius:50%;background:var(--u-brand)}
html.ui2 .def-nav a{border:0;border-radius:50%;width:32px;height:32px;background:var(--u-sunk);color:var(--u-ink2)}
html.ui2 .def-nav a:hover{background:var(--u-hover);color:var(--u-ink)}

/* fields: always visible — a white box with a clear outline (23 Oct: the filled
   grey version only showed up on hover), a blue ring on focus. Read-only ones are the
   grey ones, so "can I type here?" is answered at a glance. */
html.ui2{--u-field:#ffffff;--u-field-line:#d3d9e0;--u-field-hover:#aab4bf}
html.ui2.dark{--u-field:#101316;--u-field-line:#2c333b;--u-field-hover:#46505b}
html.ui2 :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
  background:var(--u-field);border:1px solid var(--u-field-line);border-radius:11px;color:var(--u-ink)}
html.ui2 :where(input:not([type=checkbox]):not([type=radio]),select,textarea):hover{border-color:var(--u-field-hover)}
html.ui2 :where(input,select,textarea):focus{background:var(--u-field);border-color:var(--u-brand);box-shadow:0 0 0 4px var(--u-brand-soft)}
html.ui2 :where(input[readonly],input:disabled,select:disabled,textarea:disabled){background:var(--u-sunk);color:var(--u-ink2);border-color:var(--u-line)}
html.ui2 .field label,html.ui2 .def-row>label,html.ui2 .frow label,html.ui2 .def-check{color:var(--u-ink2);font-weight:600}
html.ui2 input[type=checkbox],html.ui2 input[type=radio]{border-color:var(--u-ink3);background:var(--u-card)}
html.ui2 input[type=checkbox]:checked,html.ui2 input[type=radio]:checked{background:var(--u-brand);border-color:var(--u-brand)}

/* tables: airy rows, quiet headers */
html.ui2 table.data{border:0;background:transparent;border-collapse:separate;border-spacing:0}
html.ui2 table.data thead th,html.ui2 table.data th,html.ui2 .def-grid th{background:var(--u-card);color:var(--u-ink2);font-weight:600;font-size:11.5px;
  letter-spacing:.02em;border:0;border-bottom:1px solid var(--u-line);padding:9px 12px}
html.ui2 table.data td{border:0;border-bottom:1px solid var(--u-line);padding:9px 12px;font-size:12.5px}
html.ui2 table.data tr:nth-child(even) td{background:transparent}
html.ui2 table.data tr:hover td{background:var(--u-sunk)}
html.ui2 .def-grid tr.sel td{background:var(--u-brand-soft) !important;box-shadow:none}
html.ui2 .def-grid tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--u-brand)}

/* tabs → a segmented control */
html.ui2 .tabs{display:inline-flex;gap:2px;padding:4px;border:0;background:var(--u-sunk);border-radius:999px;margin-bottom:12px}
html.ui2 .tab{border:0;background:transparent;border-radius:999px;padding:7px 16px;color:var(--u-ink2);font-weight:600}
html.ui2 .tab.active{background:var(--u-card);color:var(--u-ink);box-shadow:0 1px 3px rgba(14,24,34,.12)}
html.ui2 .panel{border:0;background:transparent;padding:6px 2px}
html.ui2 .pill{background:var(--u-act);color:var(--u-act-ink)}

/* the navy strips on the patient screen become quiet bands */
html.ui2 .pt-strip{background:var(--u-sunk);color:var(--u-ink2);border-radius:14px;margin:10px 14px 0;padding:8px 12px}
html.ui2 .pt-strip b{color:var(--u-ink)}
/* the patient screen styles these for the old navy band (white text on a see-through
   box) — on the light band that is white on white */
html.ui2 .pt-strip input,html.ui2 .pt-strip select{color:var(--u-ink) !important;background:var(--u-card) !important;border-color:transparent !important}
html.ui2 .pt-strip label,html.ui2 .pt-strip span{color:var(--u-ink2)}
html.ui2 .pt-nav a{background:var(--u-card);color:var(--u-brand);border-radius:50%}
html.ui2 .pt-bottom{background:var(--u-sunk);border-top:1px solid var(--u-line)}
html.ui2 .pt-bottom button,html.ui2 .pt-bottom a{background:var(--u-card);border:0;color:var(--u-ink);border-radius:999px}
html.ui2 .pt-bottom button:hover,html.ui2 .pt-bottom a:hover{background:var(--u-hover)}
html.ui2 .pt-bottom .pt-stop{color:var(--u-bad)}
html.ui2 .pt-bottom .pt-arch{color:var(--u-warm)}
html.ui2 .pt-mag{background:var(--u-brand)}

/* profile modal */
html.ui2 #prof-ov{background:rgba(9,15,22,.32)}
html.ui2 .prof-card{border-radius:26px;background:var(--u-card)}
html.ui2 .prof-hero{background:linear-gradient(160deg,var(--u-brand-soft),var(--u-card) 75%)}
html.ui2 .prof-act .lang{background:var(--u-brand-soft);color:var(--u-brand-d);border-radius:999px}
html.ui2 .prof-act .out{background:var(--u-bad-soft);color:var(--u-bad);border-radius:999px}

/* the loading eye sits on the new canvas */
html.ui2 #app-spin .sp{border-radius:26px;background:var(--u-card)}
html.ui2.dark #app-spin{background:rgba(0,0,0,.25)}

/* ═══ login ═══ */
html.ui2 .lg2-bg{background:var(--u-canvas);position:relative}
html.ui2 .lg2-card{background:var(--u-card);border:0;border-radius:28px;box-shadow:var(--u-shadow-lg);padding:30px 32px 26px}
html.ui2.dark .lg2-logo{filter:brightness(0) invert(1);opacity:.92}
html.ui2 .lg2-sub{color:var(--u-ink3);font-weight:600}
html.ui2 .lg2-seg{background:var(--u-sunk);padding:4px;border-radius:999px;gap:2px}
html.ui2 .lg2-seg button{border:0;background:transparent;border-radius:999px;height:36px;color:var(--u-ink2);font-weight:600}
html.ui2 .lg2-seg button:hover{color:var(--u-ink);border:0}
html.ui2 .lg2-seg button.on{background:var(--u-act);color:var(--u-act-ink);box-shadow:none}
html.ui2 .lg2-field label{color:var(--u-ink2);font-weight:600}
html.ui2 .lg2-field input{border:1px solid transparent;background:var(--u-sunk);border-radius:14px;height:44px;color:var(--u-ink)}
html.ui2 .lg2-card input:focus{background:var(--u-card);border-color:var(--u-brand);box-shadow:0 0 0 4px var(--u-brand-soft)}
html.ui2 .lg2-who{color:var(--u-brand)}
html.ui2 .lg2-btn{height:46px;border-radius:999px;background:var(--u-act);color:var(--u-act-ink);box-shadow:none;font-weight:700}
html.ui2 .lg2-btn:hover{filter:brightness(1.15)}
html.ui2 .lg2-err{background:var(--u-bad-soft);color:var(--u-bad);border:0;border-radius:14px}
html.ui2 .u2-login-top{position:fixed;top:16px;inset-inline:16px;display:flex;justify-content:space-between;align-items:center;z-index:5;pointer-events:none}
html.ui2 .u2-login-top>*{pointer-events:auto}

/* ═══ screen by screen: what each one painted for the old navy look ═════════════
   Found by an automated pass over all 82 screens on 23 Oct 2026 (text below 3:1
   contrast, and navy bars still drawn). The same three patterns, many class names. */

/* 1 · the selected row — navy with white text, as a class rule or set from script */
html.ui2 :is(.udc,.phw,.cst,.aex,.acl,.acp,.uin,.ugr,.sty,.crc-vch) tbody tr.on td,
html.ui2 .crc-vch tr.on td,html.ui2 #b-grid tbody tr.sel,html.ui2 #b-grid tbody tr.sel td,
html.ui2 tr[style*="47, 60, 90"],html.ui2 tr[style*="47, 60, 90"] td,html.ui2 tr[style*="#2f3c5a"],html.ui2 tr[style*="#2f3c5a"] td{
  background:var(--u-brand-soft) !important;color:var(--u-ink) !important}
html.ui2 :is(.udc,.phw,.cst,.aex,.acl,.acp,.uin,.ugr,.sty,.crc-vch) tbody tr.on td:first-child,
html.ui2 tr[style*="47, 60, 90"] td:first-child{box-shadow:inset 3px 0 0 var(--u-brand)}
html.ui2 body[dir=rtl] :is(.udc,.phw,.cst,.aex,.acl,.acp,.uin,.ugr,.sty,.crc-vch) tbody tr.on td:first-child,
html.ui2 body[dir=rtl] tr[style*="47, 60, 90"] td:first-child{box-shadow:inset -3px 0 0 var(--u-brand)}
/* list items picked the same way */
html.ui2 .crc-clinics a.on,html.ui2 .opw-side .list div.on,
html.ui2 a[style*="background:#2f3c5a"]{background:var(--u-act) !important;color:var(--u-act-ink) !important;border-radius:10px}

/* 2 · the navy action bars and totals strips → quiet bands */
html.ui2 :is(.opw-foot,.crc-foot,.arv-foot,.cst-foot,.acp-foot,.acl-foot,.bil-totals),html.ui2 .phw .impexp,
html.ui2 div[style*="background:#33415c"]{
  background:var(--u-sunk) !important;color:var(--u-ink) !important;border:0 !important;border-radius:14px;margin:10px 14px !important}
html.ui2 :is(.opw-foot,.crc-foot,.arv-foot,.cst-foot,.acp-foot,.acl-foot,.bil-totals,.impexp) :is(b,span,label,small,i,div):not([class*=btn]):not(.ic),
html.ui2 div[style*="background:#33415c"] :is(b,span,label,small,i,div):not([class*=btn]):not(.ic){color:inherit !important}
html.ui2 .bil-totals{font-variant-numeric:tabular-nums}

/* 3 · navy table headers */
html.ui2 #b-grid thead th,html.ui2 .aex th,html.ui2 th[style*="#2f3c5a"],html.ui2 b[style*="#2f3c5a"]{
  background:var(--u-card) !important;color:var(--u-ink2) !important;border:0 !important;border-bottom:1px solid var(--u-line) !important}
html.ui2 b[style*="#2f3c5a"]{background:var(--u-sunk) !important;border-radius:10px;border:0 !important}

/* the patient screen's archive button sat on navy; on white it needs the darker orange */
html.ui2 .pt-bottom .pt-arch{color:#b35a0f}

/* the bare text-buttons those navy bars carried (white, no background) → pills */
html.ui2 :is(.opw-foot,.crc-foot,.arv-foot,.cst-foot,.acp-foot,.acl-foot,.impexp) :is(a,button):not(.dbtn):not(.tbtn),
html.ui2 div[style*="background:#33415c"] :is(a,button):not(.dbtn):not(.tbtn){
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:999px;border:0 !important;
  background:var(--u-card) !important;color:var(--u-ink) !important;font-weight:600;box-shadow:0 1px 2px rgba(14,24,34,.06);text-decoration:none}
html.ui2 :is(.opw-foot,.crc-foot,.arv-foot,.cst-foot,.acp-foot,.acl-foot,.impexp) :is(a,button):not(.dbtn):not(.tbtn):hover,
html.ui2 div[style*="background:#33415c"] :is(a,button):not(.dbtn):not(.tbtn):hover{background:var(--u-hover) !important}
/* "Close" was pink-on-navy */
html.ui2 a[style*="#ffb3ab"]{background:var(--u-bad-soft) !important;color:var(--u-bad) !important}
html.ui2 a[style*="#ffb3ab"] span[style*="#e8483f"]{background:transparent !important;padding:0 !important}

/* hint greys written straight into the pages, too pale on white (2.5–3.2:1) */
html.ui2 :is([style*="color:#8aa0b3"],[style*="color:#8a98a6"],[style*="color:#7c93a8"],[style*="color:#7d90a1"],
  [style*="color:#8aa;"],[style*="color:#8aa\""],[style*="color:#aab"],[style*="color:#b0bdc9"],[style*="color:#9ab0c0"],
  [style*="color: rgb(138, 160, 179)"]){color:var(--u-ink3) !important}
/* accounting export: the totals row was black */
html.ui2 .aex .tot td{background:var(--u-sunk) !important;color:var(--u-ink) !important;border-color:var(--u-line) !important}
html.ui2 .aex .tot td.l{background:var(--u-hover) !important}

/* ═══ SCHEDULE (estiqbal/schedule.php) — and the other full-page calendars that share
   .cal-page/.cal-side (patient flow). The screen keeps its layout and every type colour;
   the navy chrome becomes the panel, a light sidebar and white titles. ══════════════ */
html.ui2 .cal-page{background:transparent;padding:12px;box-sizing:border-box;gap:0}
html.ui2 .cal-page>.win-title{background:var(--u-panel) !important;color:var(--u-ink);border:0;
  border-radius:var(--u-r-xl) var(--u-r-xl) 0 0;padding:14px 18px 10px;font-size:20px}
html.ui2 .cal-page>.win-title .t{text-align:start;font-size:20px;font-weight:700;letter-spacing:-.02em}
html.ui2 .cal-page>.win-title .win-x{background:var(--u-card) !important;color:var(--u-ink2) !important;box-shadow:var(--u-shadow);width:36px;height:36px}
html.ui2 .cal-page>.win-title .win-x:hover{background:var(--u-bad-soft) !important;color:var(--u-bad) !important;transform:none}
html.ui2 .cal-page .cal{background:var(--u-panel);border-radius:0 0 var(--u-r-xl) var(--u-r-xl);padding:0 12px 12px;gap:12px}
html.ui2 .cal-side,html.ui2 .cal-side.navy,html.ui2 .cal-side.teal{background:var(--u-card) !important;color:var(--u-ink);
  border-radius:var(--u-r-lg);box-shadow:var(--u-shadow);width:236px}
html.ui2 .cal-side .lbl{background:transparent !important;color:var(--u-ink3);font-weight:600;letter-spacing:.03em;padding:12px 14px 4px}
html.ui2 .cal-side select{background:var(--u-field);border:1px solid var(--u-field-line);color:var(--u-ink);margin:4px 10px 8px;width:calc(100% - 20px)}
html.ui2 .cal-side .cal-month{background:var(--u-sunk) !important;border:0;border-radius:18px;margin:10px;color:var(--u-ink)}
html.ui2 .cal-side .cal-month .hd b{color:var(--u-ink)}
html.ui2 .cal-side .cal-month .hd a{color:var(--u-ink2);background:var(--u-card)}
html.ui2 .cal-side .cal-month .hd a:hover{background:var(--u-hover);color:var(--u-ink)}
html.ui2 .cal-side .cal-month th{color:var(--u-ink3)}
html.ui2 .cal-side .cal-month td{color:var(--u-ink)}
html.ui2 .cal-side .cal-month td a{color:var(--u-ink);border-radius:50%;width:26px;height:26px}
html.ui2 .cal-side .cal-month td a:hover{background:var(--u-card);color:var(--u-ink)}
html.ui2 .cal-side .cal-month td a.sel{background:var(--u-act) !important;color:var(--u-act-ink) !important;box-shadow:none}
html.ui2 .cal-side .cal-month td a.tod{outline:2px solid var(--u-brand);color:var(--u-brand)}
html.ui2 .cal-side .cal-month td.oth a{color:var(--u-ink3);opacity:.6}
html.ui2 .cal-act{color:var(--u-ink);border-radius:12px;font-weight:600}
html.ui2 .cal-act .ci{color:var(--u-ink3)}
html.ui2 .cal-act:hover{background:var(--u-sunk);color:var(--u-ink)}
html.ui2 .cal-act:hover .ci{color:var(--u-brand)}
html.ui2 .cal-act .badge{background:var(--u-warm)}
html.ui2 .cal-main{background:var(--u-card);border-radius:var(--u-r-lg);box-shadow:var(--u-shadow)}
html.ui2 .cal-doc-hd{background:var(--u-card) !important;color:var(--u-ink);font-weight:700;border-bottom:1px solid var(--u-line);border-inline-start:0}
html.ui2 .cal-time{background:var(--u-card);color:var(--u-ink3)}
html.ui2 .cal-time b{color:var(--u-ink)}
html.ui2 .cal-cell{border-inline-start:1px solid var(--u-line);border-bottom:1px solid color-mix(in srgb,var(--u-line) 55%,transparent)}
html.ui2 .cal-cell.hour,html.ui2 .cal-time.hour{border-top:1px solid var(--u-line)}
html.ui2 .cal-cell:hover{background:var(--u-brand-soft)}
html.ui2 .cal-appt{border-radius:9px}
/* its dialogs: white titles, one pill family */
html.ui2 .s-head{background:var(--u-card) !important;color:var(--u-ink);border-bottom:1px solid var(--u-line);padding:14px 16px}
html.ui2 .s-head>.ic{background:var(--u-brand-soft);color:var(--u-brand);border-radius:12px}
html.ui2 .s-head>.t{text-align:start;font-size:16px}
html.ui2 .s-head .hx{background:var(--u-sunk);color:var(--u-ink2)}
html.ui2 .s-head .hx:hover{background:var(--u-bad-soft);color:var(--u-bad);transform:none}
html.ui2 .s-btn{border-radius:999px;box-shadow:none !important}
html.ui2 .s-btn.prim{background:var(--u-act);color:var(--u-act-ink)}
html.ui2 .s-btn.ok{background:#15803d;color:#fff}
html.ui2 .s-btn.dang{background:var(--u-bad-soft);color:var(--u-bad)}
html.ui2 .s-btn.warn{background:var(--u-warm-soft);color:#9a4a0b}
html.ui2 .s-btn.ghost,html.ui2 .s-btn.soft{background:var(--u-sunk);border-color:transparent;color:var(--u-ink)}
html.ui2 .s-btn.ghost:hover:not([disabled]),html.ui2 .s-btn.soft:hover:not([disabled]){background:var(--u-hover)}
html.ui2 .s-sechd{background:var(--u-sunk);color:var(--u-ink2);border:0;border-radius:12px 12px 0 0}
html.ui2 #b_services{background:var(--u-card);border-color:var(--u-line) !important}
html.ui2 .s-foot,html.ui2 #bookbg .s-foot,html.ui2 #viewbg .s-foot{background:var(--u-card);border-top:1px solid var(--u-line)}
html.ui2 #bookbg input,html.ui2 #bookbg select,html.ui2 #viewbg input,html.ui2 #viewbg select,html.ui2 .av-dates input,html.ui2 #av-note{
  border-color:var(--u-field-line);border-radius:11px}
html.ui2 #bookbg .def-row>label,html.ui2 #viewbg .def-row>label{color:var(--u-ink2)}
html.ui2 .av-kind.on,html.ui2 .av-day.on{border-color:var(--u-brand)}
html.ui2 .av-day.on{background:var(--u-act);border-color:var(--u-act);color:var(--u-act-ink)}
html.ui2 .av-lbl,html.ui2 .av-kind small,html.ui2 .av-none{color:var(--u-ink3)}
html.ui2 td[style*="#2f3c5a"]{background:var(--u-sunk) !important}

/* the "who is here now" board in the schedule's sidebar (drawn for the navy) */
html.ui2 .fb{background:var(--u-sunk);border:0;border-radius:18px;margin:10px}
html.ui2 .fb-hd{background:transparent}
html.ui2 .fb-t{color:var(--u-ink)}
html.ui2 .fb-clock{color:var(--u-ink3)}
html.ui2 .fb-n{background:transparent;gap:4px;padding:0 6px 6px}
html.ui2 .fb-c{background:var(--u-card);border-radius:12px}
html.ui2 .fb-c b{color:var(--u-ink)}
html.ui2 .fb-c span{color:var(--u-ink3)}
html.ui2 .fb-c.in b{color:var(--u-good)}
html.ui2 .fb-add{background:var(--u-act);color:var(--u-act-ink);border:0;border-radius:50%;width:22px;height:22px}
html.ui2 .fb-undo{color:var(--u-ink2);border-color:var(--u-line)}
html.ui2 .fb-undo:hover{background:var(--u-hover);color:var(--u-ink)}
html.ui2 .fb-walkrow{background:transparent}
html.ui2 .fb-walkrow input{background:var(--u-field);color:var(--u-ink);border:1px solid var(--u-field-line)}
html.ui2 .fb-walkrow input::placeholder{color:var(--u-ink3)}
html.ui2 .fb-sec,html.ui2 .fb-empty{color:var(--u-ink3)}
html.ui2 .fb-row .nm{color:var(--u-ink)}
html.ui2 .fb-row.nock .nm{color:#b35a0f}
html.ui2 .fb-row .mt{color:var(--u-ink3)}
html.ui2 .fb-row .mt.hot{color:#b35a0f}
html.ui2 .fb-row .mt.ex{color:var(--u-good)}
html.ui2 .fb-go{background:var(--u-card);border:1px solid var(--u-line);color:var(--u-ink);border-radius:999px}
html.ui2 .fb-go:hover{background:var(--u-act);border-color:var(--u-act);color:var(--u-act-ink)}

/* ═══ CLINIC (clinic/index.php) — the doctor's screen. Layout, tabs and every clinical
   colour (allergy red/green, eye-exam fields, the type chips) stay; the navy frame
   becomes the floating panel. ═══════════════════════════════════════════════════ */
html.ui2.u2-frame .cl,html.ui2 .cl{background:var(--u-panel);margin:12px;min-height:calc(100vh - 24px);
  border-radius:var(--u-r-xl);overflow:clip;box-shadow:var(--u-shadow-lg)}
html.ui2 body:has(> .cl),html.ui2 body:has(.cl){background:transparent}
html.ui2 .cl-top{background:var(--u-panel) !important;color:var(--u-ink);padding:14px 18px 8px}
html.ui2 .cl-top .ic{background:var(--u-brand-soft);color:var(--u-brand);border-radius:12px}
html.ui2 .cl-top .t{font-size:20px;font-weight:700;letter-spacing:-.02em}
html.ui2 .cl-top .x{background:var(--u-card);color:var(--u-ink2);box-shadow:var(--u-shadow);width:36px;height:36px}
html.ui2 .cl-top .x:hover{background:var(--u-bad-soft);color:var(--u-bad);transform:none}
html.ui2 .cl-head{background:var(--u-card);border:0;border-radius:var(--u-r-lg);margin:0 14px;box-shadow:var(--u-shadow)}
html.ui2 .cl-head table td b{color:var(--u-ink3)}
html.ui2 .cl-head input{border-color:var(--u-field-line);background:var(--u-field);color:var(--u-ink)}
html.ui2 .cl-head table tr:first-child td:last-child input{background:var(--u-brand-soft);border-color:transparent;color:var(--u-ink)}
html.ui2 .cl-tabs{background:transparent;border:0;padding:12px 14px 8px;gap:2px}
html.ui2 .cl-tabs{display:flex;width:max-content;max-width:calc(100% - 28px)}
html.ui2 .cl-tab{border:0;border-radius:999px;color:var(--u-ink2);font-weight:600;padding:8px 16px}
html.ui2 .cl-tab:hover{background:var(--u-card);color:var(--u-ink)}
html.ui2 .cl-tab.on{background:var(--u-act);color:var(--u-act-ink);box-shadow:none;border:0}
html.ui2 .cl-body{background:var(--u-card);margin:0 14px;border-radius:var(--u-r-lg);box-shadow:var(--u-shadow)}
html.ui2 .cl-foot{background:transparent !important;color:var(--u-ink2);padding:12px 14px}
html.ui2 .cl-foot b{color:var(--u-ink3)}
html.ui2 .cl-foot .nb{border-radius:999px;background:var(--u-act);color:var(--u-act-ink);box-shadow:none}
html.ui2 .cl-foot .quiet{background:var(--u-card);color:var(--u-ink);border:0;box-shadow:var(--u-shadow)}
html.ui2 .cl-foot .quiet:hover:not(:disabled){background:var(--u-hover)}
html.ui2 .cl-foot .ai{background:linear-gradient(135deg,#8b5cf6,#6d4c9f);color:#fff}
html.ui2 .cl-foot .new{background:var(--u-brand);color:#fff}
html.ui2 .cl-foot .close{background:var(--u-bad-soft);color:var(--u-bad)}
html.ui2 #vp-btn{border-radius:999px;background:var(--u-card);border-color:var(--u-line)}
html.ui2 #vp-drop{border-radius:18px;border-color:var(--u-line);box-shadow:var(--u-shadow-lg)}

/* discharge on patient's responsibility: its body was painted with the old red */
html.ui2 .dis-body{background:var(--u-card) !important}
html.ui2 .dis-body label,html.ui2 .dis-body b{color:var(--u-ink2) !important}
html.ui2 .dis-body input{background:var(--u-field)}

/* "what's new" (whatsnew.php) — navy head and blue pills → the panel's language */
html.ui2 #wn-bg{background:rgba(9,15,22,.4)}
html.ui2 #wn-bg *{font-family:var(--u-font)}
html.ui2 .wn-win{background:var(--u-card);border-radius:28px;box-shadow:var(--u-shadow-lg)}
html.ui2 .wn-head{background:var(--u-card) !important;color:var(--u-ink);border-bottom:1px solid var(--u-line);padding:18px 20px}
html.ui2 .wn-head h2{font-size:20px;font-weight:700;letter-spacing:-.02em}
html.ui2 .wn-badge{background:var(--u-warm-soft);color:var(--u-warm)}
html.ui2 .wn-x{background:var(--u-sunk);color:var(--u-ink2)}
html.ui2 .wn-x:hover{background:var(--u-bad-soft);color:var(--u-bad);transform:none}
html.ui2 .wn-list{background:var(--u-panel);border-color:var(--u-line)}
html.ui2 .wn-stage{background:var(--u-sunk)}
html.ui2 .wn-stage img{border-color:var(--u-line)}
html.ui2 .wn-item:hover{background:var(--u-hover)}
html.ui2 .wn-item.on{background:var(--u-card);box-shadow:var(--u-shadow)}
html.ui2 .wn-item .n{color:var(--u-ink2)}
html.ui2 .wn-item.on .n{color:var(--u-ink)}
html.ui2 .wn-item .d{color:var(--u-ink2)}
html.ui2 .wn-item .tr{background:var(--u-line)}
html.ui2 .wn-item .tr i{background:var(--u-brand)}
html.ui2 .wn-foot{background:var(--u-card);border-color:var(--u-line)}
html.ui2 .wn-hint{color:var(--u-ink3)}
html.ui2 .wn-btn{background:var(--u-act);color:var(--u-act-ink);border-radius:999px;box-shadow:none}

/* the clinic's own dialog heads (case dialogs, image editor, cross-branch notes) and the
   invoice's cross-branch-patient head: navy gradients → white titles */
html.ui2 :is(.c-head,.ie-head,.xp-hd),html.ui2 div[style*="#0b2545"]{background:var(--u-card) !important;color:var(--u-ink) !important;
  border-bottom:1px solid var(--u-line)}
html.ui2 :is(.c-head>.ic,.ie-head-ic){background:var(--u-brand-soft);color:var(--u-brand)}
html.ui2 :is(.c-head .hx,.c-head .hact,.xp-x),html.ui2 div[style*="#0b2545"] a{background:var(--u-sunk) !important;color:var(--u-ink2) !important;border-radius:50%}
html.ui2 :is(.c-head .hx,.xp-x):hover{background:var(--u-bad-soft) !important;color:var(--u-bad) !important;transform:none}
html.ui2 .c-head .hact:hover{background:var(--u-hover) !important}
html.ui2 .ie-head *{color:inherit}
html.ui2 .ie-head-txt small,html.ui2 .ie-head-txt span{color:var(--u-ink3) !important}
html.ui2 .av-y{color:var(--u-ink3) !important}
html.ui2 .ark-stage{background:var(--u-sunk) !important}

/* dark mode: the deep logo blue is a background colour; as TEXT on dark it needs the light one */
html.ui2.dark{--u-brand-d:#8cc8ee;--accent-d:#8cc8ee}
html.ui2 .def-foot .prog{background:var(--u-sunk);border-color:var(--u-line)}
html.u2-still *,html.u2-still *::before,html.u2-still *::after{transition:none !important}

/* ═══ the action buttons, everywhere: line icons instead of emoji ═════════════════
   .dbtn/.tbtn save·del·new·close are used by dozens of screens; the emoji inside .ic
   is hidden and a drawn icon takes its place. */
html.ui2 :is(.dbtn,.tbtn):is(.save,.del,.new,.close) .ic{font-size:0;background:transparent !important;width:18px;height:18px}
html.ui2 :is(.dbtn,.tbtn):is(.save,.del,.new,.close) .ic img{display:none}
html.ui2 :is(.dbtn,.tbtn):is(.save,.del,.new,.close) .ic::before{content:"";display:block;width:17px;height:17px;background:currentColor;
  -webkit-mask:var(--u2i) center/17px no-repeat;mask:var(--u2i) center/17px no-repeat}
html.ui2 :is(.dbtn,.tbtn).save{--u2i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E")}
html.ui2 :is(.dbtn,.tbtn).del{--u2i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6'/%3E%3C/svg%3E")}
html.ui2 :is(.dbtn,.tbtn).new{--u2i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
html.ui2 :is(.dbtn,.tbtn).close{--u2i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
html.ui2 .dbtn{padding:0 16px !important;height:38px;gap:7px}
html.ui2 .dbtn.del{background:var(--u-bad-soft);color:var(--u-bad)}
html.ui2 .dbtn.del:hover{background:var(--u-bad-soft);filter:brightness(.97)}
html.ui2 .dbtn.new{background:var(--u-brand-soft);color:var(--u-brand)}
html.ui2.dark .dbtn.new{color:var(--u-brand-l)}
html.ui2 .dbtn.close{background:transparent;color:var(--u-ink2)}
html.ui2 .dbtn.close:hover{background:var(--u-sunk)}
html.ui2 .dbtn[disabled]{opacity:.4;cursor:default}
html.ui2 .def-toolbar{gap:8px}

/* ═══ DEFINITIONS (definitions/index.php — 15 screens) ════════════════════════════
   Master-detail: the records on one side, the editor card on the other, search on top
   of the list. Same form, same fields, same actions — only where things sit. */
html.ui2 form.def-win{display:grid;width:min(1180px,96vw);max-width:none !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  grid-template-areas:"title title" "editor search" "editor list";grid-template-rows:auto auto 1fr;
  max-height:calc(100vh - 48px)}
html.ui2 form.def-win>.win-title{grid-area:title}
html.ui2 form.def-win>.def-head{grid-area:editor;border:0;padding:18px 20px 0;display:flex;flex-direction:column;gap:2px;
  overflow:auto;min-height:0}
html.ui2 form.def-win>.def-grid{grid-area:list;max-height:none;min-height:0;overflow:auto;margin:0 16px 16px;
  background:var(--u-sunk);border-radius:18px;padding:4px}
html.ui2 form.def-win>.def-foot{grid-area:search;border:0;background:transparent;padding:16px 16px 10px;gap:8px;flex-wrap:nowrap}
html.ui2 form.def-win>.def-foot>.dbtn,html.ui2 form.def-win>.def-foot>.prog,html.ui2 form.def-win>.def-foot>.prog+span{display:none}
html.ui2 form.def-win>.def-foot input[name=q]{flex:1;width:auto !important;height:40px !important;border-radius:999px !important;
  padding:0 16px 0 40px !important;border:1px solid var(--u-field-line) !important;background:var(--u-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737e8a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center/17px}
html.ui2 body[dir=rtl] form.def-win>.def-foot input[name=q]{padding:0 40px 0 16px !important;background-position:calc(100% - 14px) center}
html.ui2 form.def-win>.def-foot .pill{background:var(--u-sunk);color:var(--u-ink2);height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px}
html.ui2 form.def-win>.def-foot .def-imp{color:var(--u-ink3)}
/* the list */
html.ui2 .def-grid table.data{border-spacing:0 3px}
html.ui2 .def-grid table.data thead th{background:var(--u-sunk);position:sticky;top:0;z-index:1;border:0;font-size:11px}
html.ui2 .def-grid table.data td{background:var(--u-card);border:0;padding:10px 12px}
html.ui2 .def-grid table.data tr td:first-child{border-start-start-radius:12px;border-end-start-radius:12px}
html.ui2 .def-grid table.data tr td:last-child{border-start-end-radius:12px;border-end-end-radius:12px}
html.ui2 .def-grid table.data tr:hover td{background:var(--u-hover)}
html.ui2 .def-grid tr.sel td{background:var(--u-act) !important;color:var(--u-act-ink) !important;box-shadow:none !important}
html.ui2 .def-grid tr.sel td b{color:inherit}
html.ui2 .def-grid tr[hidden]{display:none}
/* the editor */
html.ui2 .def-head .def-row{margin:0 0 10px;gap:12px}
html.ui2 .def-head .def-row>label{width:112px;color:var(--u-ink2);font-weight:600;font-size:12.5px}
html.ui2 .def-head .def-row input,html.ui2 .def-head .def-row select,html.ui2 .def-head .def-row textarea{min-height:38px;border-radius:12px}
html.ui2 .def-head .def-row input.code{background:var(--u-sunk);font-weight:700;color:var(--u-ink)}
html.ui2 .def-head .def-nav a{width:30px;height:30px}
html.ui2 .def-head .dcols{gap:20px}
html.ui2 .def-head .def-checks,html.ui2 .def-head .def-checks2{border-top:1px solid var(--u-line);padding-top:12px;margin-top:4px}
html.ui2 .def-head .def-toolbar{position:sticky;bottom:0;margin:auto -20px 0;padding:14px 20px;background:var(--u-card);
  border-top:1px solid var(--u-line);z-index:2}
html.ui2 .def-head .dplus{background:var(--u-good-soft);color:var(--u-good);font-size:0}
html.ui2 .def-head .dplus::before{content:"+";font-size:16px;font-weight:700}
html.ui2 .def-head .dminus{background:var(--u-bad-soft);color:var(--u-bad);font-size:0}
html.ui2 .def-head .dminus::before{content:"×";font-size:16px;font-weight:700}
@media (max-width:900px){
  html.ui2 form.def-win{grid-template-columns:1fr;grid-template-areas:"title" "editor" "search" "list"}
}
/* two-column field sets (doctors, insurance…) stack inside the editor card */
html.ui2 form.def-win .dcols{flex-direction:column;gap:0}
html.ui2 form.def-win .dcols>div{width:100%}
html.ui2 form.def-win .def-row{min-width:0}
html.ui2 form.def-win .def-row>*:not(label):not(.def-check):not(.dplus):not(.dminus):not(b){flex:1;min-width:0}
html.ui2 form.def-win .def-row .def-nav{flex:none}
html.ui2 form.def-win .def-row input.code{flex:none !important;max-width:110px}
/* screens whose rows pair two fields get the room for them */
html.ui2 form.def-win:has(.dcols){width:min(1360px,97vw);grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
html.ui2 form.def-win .def-row>label~label{width:auto;min-width:84px;margin-inline-start:6px}
html.ui2 form.def-win{max-height:calc(100vh - 76px)}
/* the editor is a card that hugs its fields — a one-field list (nationalities) no longer
   sits in a half-empty window; a long one (doctors) scrolls inside it, buttons pinned */
html.ui2 form.def-win>.def-head{align-self:start;margin:16px;padding:18px 18px 0;background:var(--u-sunk);border-radius:20px;
  max-height:100%;box-sizing:border-box}
html.ui2 form.def-win .def-head .def-toolbar{margin:8px -18px 0;padding:14px 18px;background:var(--u-sunk);border-top:1px solid var(--u-line);
  border-radius:0 0 20px 20px}
html.ui2 form.def-win>.def-foot{padding-top:16px}
html.ui2 form.def-win:not(:has(.dcols)){width:min(1040px,96vw);grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
html.ui2 .def-grid table.data tr:nth-child(even) td{background:var(--u-card)}
html.ui2 .def-grid table.data tr:nth-child(even):hover td{background:var(--u-hover)}
/* wide lists (insurance: 8 columns) keep one line per record and scroll inside their card */
html.ui2 .def-grid table.data td,html.ui2 .def-grid table.data th{white-space:nowrap}
html.ui2 .def-grid{overflow:auto}

/* ═══ bare text-button bars → pill bars ═══════════════════════════════════════════
   Screens that drew their actions as plain text with an emoji (archive, billing, pharmacy,
   export, insurer links, every report's .rpt .btns, and the navy footers above). The
   first action is the primary one in each of these bars (حفظ / بحث / تجهيز) and becomes
   the dark pill; «إغلاق» the soft red one; the emoji go, the words stay. */
html.ui2 :is(.aex-top,.aip .btns,.bil-btns,.arw .abar,.arw .btns,.phw .btns,.rpt .btns){display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:8px;padding:12px 14px;border:0}
html.ui2 :is(.aex-top,.aip .btns,.phw .btns,.rpt .btns) :is(button,a),html.ui2 :is(.bil-btns,.arw .abar,.arw .btns) .bb,
html.ui2 :is(.opw-foot,.crc-foot,.arv-foot,.cst-foot,.acp-foot,.acl-foot,.impexp) :is(a,button):not(.dbtn):not(.tbtn),
html.ui2 div[style*="background:#33415c"] :is(a,button):not(.dbtn):not(.tbtn){
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px !important;border-radius:999px;
  border:0 !important;background:var(--u-sunk) !important;color:var(--u-ink) !important;font:600 13px var(--u-font) !important;
  text-decoration:none;cursor:pointer;box-shadow:none;transition:background .15s,transform .15s}
html.ui2 :is(.aex-top,.aip .btns,.phw .btns,.rpt .btns) :is(button,a):hover,html.ui2 :is(.bil-btns,.arw .abar,.arw .btns) .bb:hover,
html.ui2 :is(.opw-foot,.crc-foot,.arv-foot,.cst-foot,.acp-foot,.acl-foot,.impexp) :is(a,button):not(.dbtn):not(.tbtn):hover{background:var(--u-hover) !important;transform:translateY(-1px)}
html.ui2 :is(.aex-top,.aip .btns,.phw .btns,.rpt .btns) > :is(button,a):first-child,html.ui2 :is(.bil-btns,.arw .btns) > .bb:first-child,
html.ui2 :is(.opw-foot,.crc-foot,.arv-foot,.cst-foot,.acp-foot,.acl-foot) > :is(a,button):first-child{
  background:var(--u-act) !important;color:var(--u-act-ink) !important}
html.ui2 :is(.aex-top,.aip .btns,.phw .btns,.rpt .btns,.bil-btns,.arw .abar,.arw .btns,.opw-foot,.crc-foot,.arv-foot,.cst-foot,.acp-foot,.acl-foot,.impexp) :is(img.emo,.i){display:none}
html.ui2 :is(.aex-top,.aip .btns,.phw .btns,.rpt .btns,.bil-btns,.arw .abar,.arw .btns,.opw-foot,.crc-foot,.arv-foot,.cst-foot,.acp-foot,.acl-foot) a[href$="/"],
html.ui2 a[style*="#ffb3ab"]{background:var(--u-bad-soft) !important;color:var(--u-bad) !important}
html.ui2 :is(.aex-top,.aip .btns,.phw .btns,.rpt .btns,.bil-btns,.arw .abar,.arw .btns) :is(button,a,.bb)[disabled]{opacity:.4;transform:none}
/* archive screen */
html.ui2 .arw .lblrow{color:var(--u-ink2)} html.ui2 .arw .lblrow b{color:var(--u-ink)}
html.ui2 .arw .patrow{border-color:var(--u-line)}
html.ui2 .arw .patrow input{height:38px;border-radius:12px;width:360px}
html.ui2 .arw .atabs{background:transparent;border:0;padding:10px 14px 0;gap:2px}
html.ui2 .arw .atab{border:0 !important;border-radius:999px;padding:7px 16px;color:var(--u-ink2)}
html.ui2 .arw .atab.on{background:var(--u-act);color:var(--u-act-ink)}
html.ui2 .arw .aview{background:var(--u-sunk);margin:10px 14px 14px;border-radius:18px}
html.ui2 .arw .abar,html.ui2 .arw .btns{border-bottom:1px solid var(--u-line)}

/* an open window holds the page still — nothing behind it scrolls (23 Oct) */
html.ui2:has(.pop-ov),html.ui2:has(.pop-ov) body,html.ui2:has(.pop-ov) .menu,
html.ui2:has(#prof-ov.on) .menu,html.ui2:has(#wn-bg) .menu{overflow:hidden !important;overscroll-behavior:contain}
html.ui2 .pop-ov{overscroll-behavior:contain}
/* the dashboard pane */
html.ui2 .u2-dash{padding-top:0}

/* ── icons, not emoji (23 Oct, the owner: "we dont need emojis at all… white on a white
   background") — ui2-icons.js swaps every emoji for a line icon drawn in currentColor,
   so an icon is always as readable as the words beside it ─────────────────────────── */
html.ui2 .u2ic{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.18em;flex:none;stroke-width:2}
html.ui2 .u2dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;vertical-align:.04em;flex:none}
html.ui2 :is(button,a,.btn,.tbtn,.dbtn,.cat,.tile) .u2ic{margin-inline-end:.15em}
/* the dbtn/tbtn masks already draw save·del·new·close */
html.ui2 :is(.dbtn,.tbtn):is(.save,.del,.new,.close) .ic .u2ic{display:none}
/* other .ic chips: no coloured disc behind a line icon, the icon takes the button's ink */
html.ui2 .dbtn .ic{background:transparent !important;color:inherit;width:auto;height:auto;font-size:15px;display:inline-grid;place-items:center}
html.ui2 .dbtn .ic .u2ic{width:17px;height:17px;vertical-align:0;margin:0}

/* the Settings / Users dropdowns: grouped, an icon tile per entry */
html.ui2 .tb-menu.u2-menu{min-width:268px;padding:8px;max-height:calc(100vh - 90px);overflow:auto}
html.ui2 .tb-menu.u2-menu .hd{font-size:15px;font-weight:800;color:var(--u-ink);letter-spacing:0;border:0;padding:6px 10px 4px}
html.ui2 .tb-menu.u2-menu .grp{font-size:11px;font-weight:700;color:var(--u-ink3);padding:10px 10px 4px;letter-spacing:.03em}
html.ui2 .tb-menu.u2-menu .sep{height:1px;background:var(--u-line);margin:8px 6px}
html.ui2 .tb-menu.u2-menu a{gap:12px;padding:6px 8px;font-size:13px;font-weight:600;border:0;margin:0;border-radius:12px;color:var(--u-ink)}
html.ui2 .tb-menu.u2-menu a:hover{background:var(--u-sunk)}
html.ui2 .tb-menu.u2-menu .mi{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--u-brand-soft);color:var(--u-brand);transition:background .15s,color .15s}
html.ui2.dark .tb-menu.u2-menu .mi{color:var(--u-brand-l)}
html.ui2 .tb-menu.u2-menu .mi svg{width:18px;height:18px}
html.ui2 .tb-menu.u2-menu a:hover .mi{background:var(--u-act);color:var(--u-act-ink)}
html.ui2 .tb-menu.u2-menu .tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
html.ui2 .tb-menu.u2-menu .tx small{font-size:11px;font-weight:500;color:var(--u-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
html.ui2 .tb-menu.u2-menu a.logout{color:var(--u-bad)}
html.ui2 .tb-menu.u2-menu a.logout .mi{background:var(--u-bad-soft);color:var(--u-bad)}
html.ui2 .tb-menu.u2-menu a.logout:hover{background:var(--u-bad-soft)}
html.ui2 .tb-menu.u2-menu a.logout:hover .mi{background:var(--u-bad);color:#fff}

/* record navigation ⏮ ◀ ▶ ⏭ → chevrons. In Arabic the row reads right-to-left, so the
   first record is on the RIGHT and its arrow points right (the owner: "shouldnt it be the
   other way around?") */
html.ui2 :is(.def-nav,.pt-nav){display:inline-flex;gap:4px;direction:inherit}
html.ui2 :is(.def-nav,.pt-nav,.nav-arrows)>:is(a,span){display:inline-grid;place-items:center;font-size:0 !important;color:var(--u-ink2);text-decoration:none}
html.ui2 :is(.def-nav,.pt-nav,.nav-arrows)>:is(a,span)>*{display:none !important}
html.ui2 :is(.def-nav,.pt-nav,.nav-arrows)>:is(a,span)::before{content:"";width:17px;height:17px;background:currentColor;
  -webkit-mask:var(--u2n) center/17px no-repeat;mask:var(--u2n) center/17px no-repeat}
html.ui2[dir=rtl] :is(.def-nav,.pt-nav)>a::before,html.ui2 [dir=rtl] :is(.def-nav,.pt-nav)>a::before{transform:scaleX(-1)}
html.ui2 :is(.def-nav,.pt-nav,.nav-arrows)>:is(a,span):nth-child(1){--u2n:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 18-6-6 6-6M7 6v12'/%3E%3C/svg%3E")}
html.ui2 :is(.def-nav,.pt-nav,.nav-arrows)>:is(a,span):nth-child(2){--u2n:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")}
html.ui2 :is(.def-nav,.pt-nav,.nav-arrows)>:is(a,span):nth-child(3){--u2n:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}
html.ui2 :is(.def-nav,.pt-nav,.nav-arrows)>:is(a,span):nth-child(4){--u2n:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 18 6-6-6-6M17 6v12'/%3E%3C/svg%3E")}
html.ui2 :is(.def-nav,.pt-nav,.nav-arrows)>a:hover{background:var(--u-act);color:var(--u-act-ink)}
html.ui2 .nav-arrows>span{opacity:.35}
html.ui2 .pt-nav>a{width:30px;height:30px;border-radius:50%;background:var(--u-card);color:var(--u-ink2)}

/* disabled buttons: clearly "not now", still readable (Delete used to fade to pink-on-pink) */
html.ui2 :is(.dbtn,.tbtn)[disabled],html.ui2 :is(.dbtn,.tbtn)[disabled]:hover{opacity:1 !important;background:var(--u-sunk) !important;
  color:var(--u-ink3) !important;filter:none;transform:none;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--u-line)}
/* the editor's action bar: even pills, centred labels */
html.ui2 .def-toolbar{display:flex;flex-wrap:wrap;gap:8px}
html.ui2 .def-toolbar>.dbtn{flex:1 1 auto;justify-content:center;text-decoration:none}
/* narrow windows: the editor and the list stack (the two-column rules above used to win) */
@media (max-width:900px){
  html.ui2 form.def-win:is(*,:has(.dcols),:not(:has(.dcols))){grid-template-columns:minmax(0,1fr)}
}

/* ── tabs, cleaner (23 Oct): every tab set is one track; on the top bar the dark pill
   slides from tab to tab instead of blinking (ui2.js draws .u2-ind) ─────────────── */
html.ui2 .u2-tabs .u2-tabs-in{position:relative;padding:4px;gap:0;border:1px solid var(--u-line)}
html.ui2 .u2-tabs .cat{position:relative;z-index:1;height:34px;padding:0 15px;letter-spacing:0;transition:color .25s}
html.ui2 .u2-tabs .cat:hover{background:transparent !important;color:var(--u-ink)}
html.ui2 .u2-tabs .u2-tabs-in:not(.u2-slide) .cat:hover:not(.active){background:var(--u-sunk) !important}
html.ui2 .u2-tabs .u2-tabs-in.u2-slide .cat.active{background:transparent !important;color:var(--u-act-ink)}
html.ui2 .u2-tabs .u2-ind{position:absolute;z-index:0;top:4px;left:0;height:34px;width:0;border-radius:999px;background:var(--u-act);
  box-shadow:0 2px 8px rgba(11,34,51,.18);transition:transform .38s cubic-bezier(.3,.8,.25,1),width .38s cubic-bezier(.3,.8,.25,1);pointer-events:none}
html.ui2.dark .u2-tabs .u2-ind{box-shadow:0 2px 10px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){html.ui2 .u2-tabs .u2-ind{transition:none}}
/* the clinic's tabs and the archive's tabs: a track like the top bar's */
html.ui2 .cl-tabs{background:var(--u-card);border:1px solid var(--u-line);border-radius:999px;padding:4px;margin:12px 14px 10px;
  box-shadow:var(--u-shadow);overflow-x:auto;scrollbar-width:none}
html.ui2 .cl-tabs::-webkit-scrollbar{display:none}
html.ui2 .cl-tab{padding:7px 16px;white-space:nowrap;transition:background .2s,color .2s}
html.ui2 .cl-tab:hover:not(.on){background:var(--u-sunk)}
html.ui2 .arw .atabs{display:flex;width:max-content;max-width:calc(100% - 28px);background:var(--u-sunk);border-radius:999px;padding:4px;
  margin:10px 14px 0;gap:2px}
html.ui2 .arw .atab{padding:6px 16px;white-space:nowrap}
html.ui2 .arw .atab:hover:not(.on){background:var(--u-card)}
html.ui2 .tab{transition:background .2s,color .2s}
html.ui2 .tab:hover:not(.active){color:var(--u-ink)}

/* small round icon buttons beside fields (search, add, remove, other-branch patient):
   one family — a soft tinted chip with the icon in the strong shade, so no icon is
   ever white on white again (billing's «مريض من فرع آخر» was exactly that) */
html.ui2 :is(.bic,.mini-add,.pt-mag){width:30px !important;height:30px !important;border-radius:10px !important;border:0 !important;
  display:inline-grid !important;place-items:center;box-shadow:none !important;cursor:pointer;flex:none;text-decoration:none;
  background:var(--u-brand-soft) !important;color:var(--u-brand) !important;transition:background .15s,color .15s,transform .1s}
html.ui2.dark :is(.bic,.mini-add,.pt-mag){color:var(--u-brand-l) !important}
html.ui2 :is(.bic,.mini-add,.pt-mag):hover{background:var(--u-brand) !important;color:#fff !important;filter:none !important}
html.ui2 :is(.bic,.mini-add,.pt-mag):active{transform:scale(.94)}
html.ui2 :is(.bic,.mini-add,.pt-mag) :is(.u2ic,svg){width:16px;height:16px;margin:0;vertical-align:0}
html.ui2 :is(.bic.plus,.mini-add){background:var(--u-good-soft) !important;color:var(--u-good) !important}
html.ui2 :is(.bic.plus,.mini-add):hover{background:var(--u-good) !important;color:#fff !important}
html.ui2.dark :is(.bic.plus,.mini-add):hover{color:#0b1a10 !important}
html.ui2 .bic.minus{background:var(--u-bad-soft) !important;color:var(--u-bad) !important}
html.ui2 .bic.minus:hover{background:var(--u-bad) !important;color:#fff !important}
html.ui2 .bic.mag,html.ui2 .pt-win .pt-mag{background:var(--u-warm-soft) !important;color:var(--u-warm) !important}
html.ui2 .bic.mag:hover,html.ui2 .pt-win .pt-mag:hover{background:var(--u-warm) !important;color:#fff !important}
/* dropdown caret inside searchable fields, and empty-state art: quiet but visible */
html.ui2 .sdd-c{color:var(--u-ink3) !important}
html.ui2 .ark-empty svg{color:var(--u-ink3) !important;opacity:.7}
/* a coloured inline chip inside a footer button: the button's own colour takes over */
html.ui2 :is(.cst-foot,.opw-foot,.crc-foot,.arv-foot,.acp-foot,.acl-foot) span[style*="background"]{background:transparent !important;padding:0 !important;color:inherit !important}
html.ui2:not(.dark) :is(.bic.mag,.pt-win .pt-mag){color:#b45309 !important}
html.ui2:not(.dark) :is(.bic.mag,.pt-win .pt-mag):hover{color:#fff !important}
/* a dialog inside a screen is open (ui2-lock.js): the screen under it stays put */
html.ui2.u2-lock,html.ui2.u2-lock body{overflow:hidden !important;overscroll-behavior:none}
html.ui2 .u2-held{overflow:hidden !important;overscroll-behavior:none}
/* light-blue icon/link colours written for the old navy-and-white look */
html.ui2 .stw-drop svg{stroke:var(--u-brand) !important}
html.ui2.dark .stw-drop svg{stroke:var(--u-brand-l) !important}
html.ui2 a[style*="color:#2a9fd6"]{color:var(--u-brand) !important}
html.ui2.dark a[style*="color:#2a9fd6"]{color:var(--u-brand-l) !important}

/* ── patient search in the top bar (23 Oct): every identifier, every branch ─────────── */
html.ui2 .u2-qs{order:2;position:relative;display:flex;align-items:center;gap:8px;height:46px;width:290px;flex:none;
  padding:0 8px 0 14px;background:var(--u-card);border-radius:999px;box-shadow:var(--u-shadow);color:var(--u-ink3);
  transition:width .25s cubic-bezier(.3,.8,.25,1),box-shadow .2s}
html.ui2 body[dir=rtl] .u2-qs,html.ui2[dir=rtl] .u2-qs{padding:0 14px 0 8px}
html.ui2 .u2-qs:focus-within{width:360px;box-shadow:0 0 0 2px var(--u-brand),var(--u-shadow);color:var(--u-brand)}
html.ui2 .u2-qs>svg{width:18px;height:18px;flex:none}
html.ui2 .u2-qs input{flex:1;min-width:0;height:100%;border:0 !important;outline:0;background:transparent !important;box-shadow:none !important;
  font:inherit;font-size:13.5px;color:var(--u-ink);padding:0}
html.ui2 .u2-qs input::placeholder{color:var(--u-ink3)}
html.ui2 .u2-qs input::-webkit-search-cancel-button{display:none}
html.ui2 .u2-qs kbd{font:700 11px/1 inherit;font-family:inherit;color:var(--u-ink3);background:var(--u-sunk);border-radius:7px;padding:5px 8px;flex:none}
html.ui2 .u2-qs:focus-within kbd{display:none}
html.ui2 .u2-qs-pop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;width:min(520px,92vw);max-height:min(560px,calc(100vh - 110px));
  overflow:auto;z-index:960;background:var(--u-card);border:1px solid var(--u-line);border-radius:20px;box-shadow:var(--u-shadow-lg);padding:8px;color:var(--u-ink)}
html.ui2 .u2-qs-pop .hd{display:flex;align-items:center;gap:8px;padding:8px 10px 6px;font-size:11.5px;font-weight:700;color:var(--u-ink3)}
html.ui2 .u2-qs-pop .hd .sp{flex:1}
html.ui2 .u2-qs-pop .msg{padding:22px 12px;text-align:center;color:var(--u-ink3);font-size:13px}
html.ui2 .u2-qs-pop .r{border-radius:14px;cursor:pointer;padding:8px 10px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center}
html.ui2 .u2-qs-pop .r:hover,html.ui2 .u2-qs-pop .r.sel{background:var(--u-sunk)}
html.ui2 .u2-qs-pop .r.open{background:var(--u-brand-soft)}
html.ui2 .u2-qs-pop .av{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;
  background:var(--u-sunk);color:var(--u-brand)}
html.ui2 .u2-qs-pop .r.open .av{background:var(--u-brand);color:#fff}
html.ui2 .u2-qs-pop .tx{min-width:0;display:flex;flex-direction:column;line-height:1.35}
html.ui2 .u2-qs-pop .tx b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ui2 .u2-qs-pop .tx small{font-size:11.5px;color:var(--u-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
html.ui2 .u2-qs-pop .tx small i{font-style:normal;font-weight:700;color:var(--u-warm)}
html.ui2 .u2-qs-pop mark{background:color-mix(in srgb,var(--u-warm) 28%,transparent);color:inherit;border-radius:3px;padding:0 1px}
html.ui2 .u2-qs-pop .bb{font-size:11px;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap;background:var(--u-sunk);color:var(--u-ink2)}
html.ui2 .u2-qs-pop .bb.far{background:var(--u-warm-soft);color:var(--u-warm)}
html.ui2 .u2-qs-pop .acts{grid-column:1 / -1;display:none;gap:8px;padding:6px 0 2px 48px}
html.ui2 body[dir=rtl] .u2-qs-pop .acts,html.ui2[dir=rtl] .u2-qs-pop .acts{padding:6px 48px 2px 0}
html.ui2 .u2-qs-pop .r.open .acts{display:flex}
html.ui2 .u2-qs-pop .acts button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;border:0;border-radius:999px;
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:var(--u-card);color:var(--u-ink);box-shadow:0 1px 3px rgba(14,24,34,.1)}
html.ui2 .u2-qs-pop .acts button.p{background:var(--u-act);color:var(--u-act-ink)}
html.ui2 .u2-qs-pop .acts button:hover{filter:brightness(1.08);transform:translateY(-1px)}
html.ui2 .u2-qs-pop .acts button:focus-visible{outline:2px solid var(--u-brand);outline-offset:2px}
html.ui2 .u2-qs-pop .acts svg{width:16px;height:16px}
html.ui2 .u2-qs-pop .acts small{font-weight:600;opacity:.7}
html.ui2 .u2-qs-pop .ft{display:flex;gap:14px;justify-content:center;padding:8px 6px 4px;border-top:1px solid var(--u-line);margin-top:6px;
  font-size:11px;color:var(--u-ink3)}
html.ui2 .u2-qs-pop .ft kbd{font:700 10.5px/1 inherit;font-family:inherit;background:var(--u-sunk);border-radius:5px;padding:2px 5px;margin-inline-end:3px}
@media (max-width:1500px){html.ui2 .u2-qs{width:220px} html.ui2 .u2-qs:focus-within{width:320px}}
@media (max-width:1300px){html.ui2 .u2-qs{width:46px;padding:0 14px;cursor:pointer} html.ui2 .u2-qs input,html.ui2 .u2-qs kbd{width:0;opacity:0}
  html.ui2 .u2-qs:focus-within{width:300px} html.ui2 .u2-qs:focus-within input{width:auto;opacity:1}}