:root{
    /* Modern neutral palette (default) — same signature medical-green
       accent as before, but a cleaner white/gray card system instead of
       the original warm ivory one. The old warm palette is fully
       preserved, never deleted — see html[data-palette="classic"] below,
       toggled from Settings without needing a page reload. */
    --bg:#f4f7f6; --bg2:#eef2f1;
    --surface:#ffffff; --surface-alt:#f8f9fa;
    --border:#e0e0e0; --border-soft:#ececec;
    --text:#333333; --text-muted:#7f8c8d;
    --accent:#0c5c4c; --accent-dark:#0a4d3f; --accent-soft:rgba(12,92,76,.08);
    --gold:#a9822f; --gold-dark:#8a6a24; --gold-soft:#f5ebd3;
    --medical-blue:#1f6f92; --medical-blue-soft:#e2eef3;
    --danger:#e74c3c; --danger-soft:#fceae8;
    --ok:#27ae60;
    --warning:#f39c12; --warning-soft:#fdf1de;
    --shadow: 0 20px 45px rgba(12,92,76,.12);
    --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
    --ease-ios: cubic-bezier(.22,1,.36,1);
  }
  html[data-theme="dark"]{
    --bg:#1a2530; --bg2:#141d26;
    --surface:#22303d; --surface-alt:#28394a;
    --border:#3a4d5c; --border-soft:#324351;
    --text:#ecf0f1; --text-muted:#94a6b3;
    --accent:#4ad392; --accent-dark:#2f9e6c; --accent-soft:rgba(74,211,146,.14);
    --gold:#d4af6a; --gold-dark:#c39a4c; --gold-soft:rgba(212,175,106,.14);
    --medical-blue:#6fa3c4; --medical-blue-soft:rgba(111,163,196,.14);
    --danger:#e8756a; --danger-soft:rgba(232,117,106,.14);
    --ok:#4ad392;
    --warning:#e0a94f; --warning-soft:rgba(224,169,79,.14);
    --shadow: 0 20px 45px rgba(0,0,0,.5);
  }

  /* Classic warm-ivory palette — the ORIGINAL design, kept intact and
     selectable from Settings (data-palette="classic"). Deep medical
     green primary, ivory backgrounds, restrained gold/bronze accent,
     warm grays for text — exactly as it was before the modern palette
     became the default. */
  html[data-palette="classic"]{
    --bg:#faf6ee; --bg2:#f2e9d6;
    --surface:#fffdf9; --surface-alt:#f8f1e4;
    --border:#e7dcc5; --border-soft:#f1e8d6;
    --text:#2f2a22; --text-muted:#7a7061;
    --accent:#0c5c4c; --accent-dark:#073d32; --accent-soft:#e6efe9;
    --gold:#a9822f; --gold-dark:#8a6a24; --gold-soft:#f5ebd3;
    --medical-blue:#1f6f92; --medical-blue-soft:#e2eef3;
    --danger:#b23b2c; --danger-soft:#f8e9e0;
    --ok:#3f9c6d;
    --warning:#c9821f; --warning-soft:#fbf0e0;
    --shadow: 0 20px 45px rgba(60,45,20,.12);
  }
  html[data-theme="dark"][data-palette="classic"]{
    --bg:#181310; --bg2:#120f0c;
    --surface:#241e17; --surface-alt:#2b241b;
    --border:#3e3325; --border-soft:#332a20;
    --text:#f4ede0; --text-muted:#aa9c87;
    --accent:#2fbf9d; --accent-dark:#22a184; --accent-soft:rgba(47,191,157,.16);
    --gold:#d4af6a; --gold-dark:#c39a4c; --gold-soft:rgba(212,175,106,.14);
    --medical-blue:#5fa8c9; --medical-blue-soft:rgba(95,168,201,.14);
    --danger:#e8756a; --danger-soft:rgba(232,117,106,.14);
    --ok:#4ad392;
    --warning:#d4af6a; --warning-soft:rgba(212,175,106,.14);
    --shadow: 0 20px 45px rgba(0,0,0,.5);
  }

  /* Classic design also uses emoji icons instead of FontAwesome — see
     .ic-emoji/.ic-fa below. Both markups are always present in the DOM;
     only visibility toggles, so nothing is ever regenerated on switch. */
  html[data-palette="classic"] .ic-fa{ display:none !important; }
  html:not([data-palette="classic"]) .ic-emoji{ display:none !important; }
  .ic-fa{ display:inline-block; vertical-align:-1px; line-height:1; }
  .ic-emoji{ display:inline-block; line-height:1; }
  .fa-regular.fa-star{ color:inherit; }

  /* accent color presets (Settings panel) */
  html[data-accent="navy"]{ --accent:#2c3e50; --accent-dark:#243342; --accent-soft:#e8ecef; }
  html[data-theme="dark"][data-accent="navy"]{ --accent:#5c7a99; --accent-dark:#41627f; --accent-soft:rgba(92,122,153,.16); }
  html[data-accent="blue"]{ --accent:#1c6fd6; --accent-dark:#12508f; --accent-soft:#e4eefc; }
  html[data-theme="dark"][data-accent="blue"]{ --accent:#5b9fef; --accent-dark:#3c7ed6; --accent-soft:rgba(91,159,239,.16); }
  html[data-accent="purple"]{ --accent:#7b4fd1; --accent-dark:#5a37a3; --accent-soft:#f0eafc; }
  html[data-theme="dark"][data-accent="purple"]{ --accent:#a888ec; --accent-dark:#8a63d6; --accent-soft:rgba(168,136,236,.16); }
  html[data-accent="rose"]{ --accent:#d1467e; --accent-dark:#a4325f; --accent-soft:#fbe9f0; }
  html[data-theme="dark"][data-accent="rose"]{ --accent:#ec7ba6; --accent-dark:#d1557f; --accent-soft:rgba(236,123,166,.16); }
  html[data-accent="amber"]{ --accent:#c9821f; --accent-dark:#996216; --accent-soft:#fbf0e0; }
  html[data-theme="dark"][data-accent="amber"]{ --accent:#e0a94f; --accent-dark:#c98d2f; --accent-soft:rgba(224,169,79,.16); }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0; padding:22px 16px 90px;
    background:radial-gradient(1200px 500px at 50% -10%, var(--bg2), var(--bg));
    font-family:"Tajawal","Cairo",sans-serif;
    color:var(--text);
    transition:background .3s ease, color .3s ease;
    min-height:100vh;
    overflow-x:hidden;
  }
  h1,h2,.heading-font{ font-family:"Cairo","Tajawal",sans-serif; }

  /* font family choice (settings) */
  html[data-font="cairo"] body{ font-family:"Cairo","Tajawal",sans-serif; }
  html[data-font="tajawal"] body{ font-family:"Tajawal","Cairo",sans-serif; }
  html[data-font="almarai"] body{ font-family:"Almarai","Tajawal",sans-serif; }

  /* font size choice (settings) — scales the whole page proportionally,
     including spacing, so nothing looks cramped or oversized in isolation */
  html[data-fontsize="sm"] body{ zoom:.92; }
  html[data-fontsize="lg"] body{ zoom:1.12; }
  html[data-fontsize="xl"] body{ zoom:1.26; }

  /* accessibility: visible keyboard focus on every interactive element */
  a, button, input, textarea, select, [tabindex]{ outline:none; }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
  select:focus-visible, [tabindex]:focus-visible{
    outline:none;
    box-shadow: var(--focus-ring);
    border-radius:8px;
  }
  .dep-item:focus-visible, .admin-row:focus-visible{ box-shadow: inset var(--focus-ring); }

  /* accessibility: screen-reader-only text (visually hidden, still announced) */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* accessibility: skip link, hidden until keyboard-focused */
  .skip-link{
    position:fixed; top:-60px; inset-inline-start:12px; z-index:100;
    background:var(--accent); color:#fff; padding:10px 18px; border-radius:8px;
    font-weight:700; font-size:13.5px; text-decoration:none; transition:top .15s ease;
  }
  .skip-link:focus{ top:12px; }

  /* premium iOS-style initial splash: SOHAR word reveal */
  #appLoader{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    background:
      radial-gradient(55% 34% at 50% 45%, color-mix(in srgb, var(--accent-soft) 82%, transparent), transparent 72%),
      radial-gradient(80% 55% at 50% 0%, color-mix(in srgb, var(--bg2) 82%, transparent), transparent 74%),
      var(--bg);
    opacity:1; visibility:visible;
    transition:opacity .62s var(--ease-ios), visibility 0s linear 0s;
  }
  #appLoader::before{
    content:"";
    position:absolute;
    width:280px; height:280px;
    border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent), transparent 68%);
    filter:blur(8px);
    animation:soharAura 2.8s ease-in-out infinite;
    pointer-events:none;
  }
  #appLoader.loader-hidden{
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .62s var(--ease-ios), visibility 0s linear .62s;
  }
  .loader-sohar{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transform:translateY(-2px);
  }
  .loader-word{
    display:flex;
    align-items:center;
    justify-content:center;
    direction:ltr;
    font-family:"Avenir Next","SF Pro Display","Helvetica Neue",Arial,sans-serif;
    font-size:clamp(38px, 10vw, 58px);
    line-height:1;
    font-weight:700;
    letter-spacing:.20em;
    color:var(--accent);
    text-indent:.20em;
    text-shadow:0 7px 28px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .loader-letter{
    display:inline-block;
    opacity:0;
    transform:translateY(11px) scale(.94);
    filter:blur(4px);
    animation:soharLetterIn .62s var(--ease-ios) forwards;
  }
  .loader-letter:nth-child(1){animation-delay:.04s}
  .loader-letter:nth-child(2){animation-delay:.13s}
  .loader-letter:nth-child(3){animation-delay:.22s}
  .loader-letter:nth-child(4){animation-delay:.31s}
  .loader-letter:nth-child(5){animation-delay:.40s}
  .loader-cursor{
    width:2px;
    height:.72em;
    margin-inline-start:8px;
    border-radius:99px;
    background:var(--accent);
    opacity:0;
    animation:soharCursor .95s ease-in-out .48s infinite;
    box-shadow:0 0 12px color-mix(in srgb, var(--accent) 38%, transparent);
  }
  .loader-subtitle{
    margin-top:13px;
    font-family:"Avenir Next","SF Pro Display","Helvetica Neue",Arial,sans-serif;
    font-size:10px;
    font-weight:600;
    letter-spacing:.34em;
    text-indent:.34em;
    color:var(--text-muted);
    opacity:0;
    animation:soharSubtitleIn .55s ease .72s forwards;
  }
  .loader-progress{
    position:relative;
    width:86px;
    height:2px;
    margin-top:22px;
    overflow:hidden;
    border-radius:99px;
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    opacity:0;
    animation:soharProgressIn .45s ease .78s forwards;
  }
  .loader-progress::after{
    content:"";
    position:absolute;
    inset:0;
    width:38%;
    border-radius:inherit;
    background:var(--accent);
    box-shadow:0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
    animation:soharProgress 1.35s var(--ease-ios) .85s infinite;
  }
  @keyframes soharLetterIn{
    0%{opacity:0; transform:translateY(11px) scale(.94); filter:blur(4px)}
    65%{opacity:1; transform:translateY(-1px) scale(1.015); filter:blur(0)}
    100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
  }
  @keyframes soharCursor{
    0%,100%{opacity:.18; transform:scaleY(.72)}
    50%{opacity:1; transform:scaleY(1)}
  }
  @keyframes soharSubtitleIn{
    from{opacity:0; transform:translateY(5px); letter-spacing:.42em}
    to{opacity:.72; transform:translateY(0); letter-spacing:.34em}
  }
  @keyframes soharProgressIn{from{opacity:0}to{opacity:1}}
  @keyframes soharProgress{
    0%{transform:translateX(-120%)}
    52%{transform:translateX(235%)}
    100%{transform:translateX(235%)}
  }
  @keyframes soharAura{
    0%,100%{transform:scale(.82);opacity:.45}
    50%{transform:scale(1.08);opacity:.9}
  }
  @media (prefers-reduced-motion: reduce){
    .loader-letter,.loader-cursor,.loader-subtitle,.loader-progress,.loader-progress::after,#appLoader::before{animation:none!important}
    .loader-letter{opacity:1;transform:none;filter:none}
    .loader-cursor{opacity:.55}
    .loader-subtitle,.loader-progress{opacity:1}
    #appLoader{transition:none}
  }
  html.reduce-motion .loader-letter,html.reduce-motion .loader-cursor,html.reduce-motion .loader-subtitle,html.reduce-motion .loader-progress,html.reduce-motion .loader-progress::after,html.reduce-motion #appLoader::before{animation:none!important}
  html.reduce-motion .loader-letter{opacity:1;transform:none;filter:none}
  html.reduce-motion .loader-cursor{opacity:.55}
  html.reduce-motion .loader-subtitle,html.reduce-motion .loader-progress{opacity:1}
  html.reduce-motion #appLoader{transition:none}

  /* topbar */
  .topbar{ max-width:1120px; margin:0 auto 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand .logo{ width:42px; height:42px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.12); flex-shrink:0; }
  .brand .logo img{ width:100%; height:100%; object-fit:contain; }
  .brand strong{ font-size:16px; font-weight:800; font-family:"Cairo",sans-serif; }
  .brand span{ display:block; font-size:11.5px; color:var(--text-muted); }
  .controls{ display:flex; align-items:center; gap:8px; }
  .lang-switch{ display:flex; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px; box-shadow:var(--shadow); }
  .lang-switch button{ border:none; background:transparent; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700; cursor:pointer; color:var(--text-muted); font-family:"Cairo",sans-serif; transition:.2s var(--ease-ios); }
  .lang-switch button.active{ background:var(--accent); color:#fff; }
  .icon-btn{ width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); transition:.2s var(--ease-ios); }
  .icon-btn:active{ transform:scale(.9); }
  .icon-btn:hover{ transform:translateY(-2px); }

  .health-strip{ max-width:1120px; margin:0 auto 12px; display:flex; align-items:center; gap:10px; background:linear-gradient(90deg, var(--accent-soft), transparent); border:1px solid var(--border); border-inline-start:4px solid var(--accent); border-radius:10px; padding:10px 16px; font-size:12.5px; color:var(--text); }
  .health-strip.hidden{ display:none; }
  .health-strip-ic{ font-size:16px; flex-shrink:0; }
  .header-stats{ font-size:12px; color:var(--text-muted); margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; }
  .header-stats b{ color:var(--accent-dark); }
  html[data-theme="dark"] .header-stats b{ color:var(--accent); }

  /* Signature animation: a heartbeat pulse settles into a hand-drawn heart,
     which dissolves into the word "صحار" glowing from within it, then
     fades back into the pulse — a slow, deliberate loop rather than a
     busy scroll. No box: it sits directly on the page background, with
     a soft breathing aura tying the three moments together. */
  .signature-wrap{ max-width:1120px; margin:0 auto 26px; display:flex; justify-content:center; }
  .signature-stage{ position:relative; width:230px; height:84px; }

  .sig-aura{
    position:absolute; inset:-30% -6%; border-radius:50%;
    background:radial-gradient(closest-side, var(--gold-soft), transparent 72%);
    filter:blur(6px); pointer-events:none;
    animation: sigAuraBreathe 13s var(--ease-ios) infinite;
  }

  .sig-layer{ position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; opacity:0; }

  .sig-ecg-svg{ width:100%; height:56%; }
  .sig-ecg-svg path{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; transition:stroke .3s ease; }
  .sig-pulse-dot{ fill:var(--accent); filter:drop-shadow(0 0 5px var(--accent)); transition:fill .3s ease; }
  .sig-ecg{ animation: sigEcgPhase 13s linear infinite; }

  .sig-heart-svg{ width:40%; height:82%; overflow:visible; }
  .sig-heart-svg path.sig-heart-fill{ fill:var(--gold); stroke:var(--gold-dark); stroke-width:1.5; stroke-linejoin:round; transition:fill .3s ease, stroke .3s ease; }
  .sig-heart{ animation: sigHeartPhase 13s linear infinite; transform-origin:50% 55%; }

  @keyframes sigAuraBreathe{
    0%,100%{ opacity:.35; transform:scale(.9); }
    30%{ opacity:.55; transform:scale(1.05); }
    50%{ opacity:.75; transform:scale(1.12); }
    68%{ opacity:.55; transform:scale(1.05); }
    88%{ opacity:.3; transform:scale(.92); }
  }
  @keyframes sigEcgPhase{
    0%{ opacity:1; filter:blur(0); }
    34%{ opacity:1; filter:blur(0); }
    44%{ opacity:0; filter:blur(6px); animation-timing-function: var(--ease-ios); }
    88%{ opacity:0; filter:blur(6px); }
    100%{ opacity:1; filter:blur(0); animation-timing-function: var(--ease-ios); }
  }
  @keyframes sigHeartPhase{
    0%,30%{ opacity:0; transform:scale(.9); filter:blur(6px) drop-shadow(0 0 0 transparent); }
    42%{ opacity:1; transform:scale(1); filter:blur(0) drop-shadow(0 0 3px var(--gold)); animation-timing-function: var(--ease-ios); }
    46%{ transform:scale(1.1); filter:blur(0) drop-shadow(0 0 10px var(--gold)); }
    49%{ transform:scale(.98); }
    52%{ transform:scale(1.05); filter:blur(0) drop-shadow(0 0 7px var(--gold)); }
    56%{ transform:scale(1); filter:blur(0) drop-shadow(0 0 4px var(--gold)); animation-timing-function: var(--ease-ios); }
    82%{ opacity:1; transform:scale(1); filter:blur(0) drop-shadow(0 0 2px transparent); }
    94%,100%{ opacity:0; transform:scale(.94); filter:blur(6px) drop-shadow(0 0 0 transparent); animation-timing-function: var(--ease-ios); }
  }

  @media (prefers-reduced-motion: reduce){
    .signature-stage{ display:flex; align-items:center; justify-content:center; gap:8px; width:auto; height:auto; }
    .sig-aura{ animation:none; opacity:.5; transform:scale(1); }
    .sig-ecg{ display:none; }
    .sig-heart{ animation:none; position:static; opacity:1; filter:none; transform:none; inset:auto; width:auto; height:auto; }
    .sig-heart-svg{ width:34px; height:34px; }
  }
  html.reduce-motion .signature-stage{ display:flex; align-items:center; justify-content:center; gap:8px; width:auto; height:auto; }
  html.reduce-motion .sig-aura{ animation:none; opacity:.5; transform:scale(1); }
  html.reduce-motion .sig-ecg{ display:none; }
  html.reduce-motion .sig-heart{ animation:none; position:static; opacity:1; filter:none; transform:none; inset:auto; width:auto; height:auto; }
  html.reduce-motion .sig-heart-svg{ width:34px; height:34px; }

  .tabs{ max-width:1120px; margin:0 auto 16px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  .tabs button{ font-family:inherit; font-size:13.5px; font-weight:600; padding:9px 18px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; transition:.18s var(--ease-ios); box-shadow:var(--shadow); }
  .tabs button:active{ transform:scale(.96); }
  .tabs button.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .tabs button:hover:not(.active){ background:var(--accent-soft); }

  .winwrap{ max-width:1120px; margin:0 auto; position:relative; }
  .window{ display:none; opacity:0; transform:translateY(18px) scale(.97); filter:blur(8px); transition:opacity .46s var(--ease-ios), transform .46s var(--ease-ios), filter .46s var(--ease-ios); background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
  .window.active{ display:block; }
  .window.show{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
  @media (prefers-reduced-motion: reduce){ .window{ transition:none; filter:none; } }
  html.reduce-motion .window{ transition:none; filter:none; }

  .titlebar{ background:var(--surface-alt); border-bottom:1px solid var(--border); padding:10px 16px; font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; justify-content:space-between; }
  .titlebar .dots{ display:flex; gap:6px; direction:ltr; }
  .titlebar .dots span{ width:11px; height:11px; border-radius:50%; display:inline-block; }
  .titlebar .dots span:nth-child(1){ background:#ef6a5f; }
  .titlebar .dots span:nth-child(2){ background:#f4bf4f; }
  .titlebar .dots span:nth-child(3){ background:#61c454; }
  .win-menu{ position:relative; }
  .win-menu-btn{ display:flex; align-items:center; gap:3px; padding:6px 7px; border:none; background:transparent; cursor:pointer; border-radius:7px; transition:.15s var(--ease-ios); }
  .win-menu-btn:hover, .win-menu.open .win-menu-btn{ background:var(--accent-soft); }
  .win-menu-btn span{ width:4px; height:4px; border-radius:50%; background:var(--text-muted); display:inline-block; transition:.15s var(--ease-ios); }
  .win-menu-btn:hover span, .win-menu.open .win-menu-btn span{ background:var(--accent); }
  .win-menu-panel{ position:absolute; inset-inline-end:0; top:calc(100% + 6px); min-width:220px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px; z-index:45; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s var(--ease-ios); }
  .win-menu.open .win-menu-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .win-menu-label{ font-size:11px; font-weight:700; color:var(--text-muted); margin-bottom:6px; }
  .win-menu-panel .option-row{ margin:0; }
  .window[data-size="wide"]{ width:94vw; max-width:1520px; position:relative; left:50%; right:50%; margin-left:-47vw; margin-right:-47vw; }
  .window[data-size="full"]{ width:97vw; max-width:none; position:relative; left:50%; right:50%; margin-left:-48.5vw; margin-right:-48.5vw; }
  .window[data-size="wide"] .dep-list{ max-height:60vh; }
  .window[data-size="full"] .dep-list{ max-height:74vh; }
  .window[data-size="wide"] .editor-body{ max-width:760px; }
  .window[data-size="full"] .editor-body{ max-width:920px; }
  @media(max-width:720px){
    .window[data-size="wide"], .window[data-size="full"]{ width:100vw; max-width:100vw; left:50%; margin-left:-50vw; margin-right:-50vw; border-radius:0; }
  }

  .app-pad{ padding:24px 26px 20px; }
  .main-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; flex-wrap:wrap; }
  .main-header h1{ font-size:23px; margin:0; font-weight:800; }

  .btn{ font-family:inherit; cursor:pointer; border-radius:9px; border:1px solid var(--border); background:var(--surface-alt); padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--text); transition:.15s var(--ease-ios); }
  .btn:hover{ transform:translateY(-1px); background:var(--accent-soft); }
  .btn:active{ transform:translateY(0) scale(.97); }
  .btn:disabled{ opacity:.55; cursor:default; transform:none; }
  .btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .btn.primary:hover{ background:var(--accent-dark); }
  .btn.danger{ background:var(--danger-soft); color:var(--danger); border-color:transparent; }
  .btn.danger:hover{ background:var(--danger); color:#fff; }

  /* ---- universal button loading / success micro-states ---- */
  .btn-spinner{ display:inline-block; width:15px; height:15px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; vertical-align:-3px; animation:btnSpin .7s linear infinite; }
  .btn:not(.primary) .btn-spinner{ border-color:var(--border); border-top-color:var(--accent); }
  .btn-loading-text{ margin-inline-start:8px; }
  @keyframes btnSpin{ to{ transform:rotate(360deg); } }
  .btn.btn-loading{ cursor:default; }
  .btn.btn-success{ background:var(--ok) !important; border-color:var(--ok) !important; color:#fff !important; transform:none !important; width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; padding:0 !important; border-radius:50% !important; margin-inline:auto !important; display:flex !important; align-items:center; justify-content:center; transition:width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1), border-radius .35s cubic-bezier(.4,0,.2,1), background .2s, border-color .2s; }
  .btn-check-icon{ display:block; margin:0 auto; }
  .btn-check-path{ stroke-dasharray:24; stroke-dashoffset:24; }
  .btn-check-path.draw{ transition:stroke-dashoffset .35s ease; stroke-dashoffset:0; }
  @media (prefers-reduced-motion: reduce){ .btn-spinner{ animation:none; border-top-color:transparent; } .btn-check-path{ transition:none; } }

  .search-wrap{ position:relative; margin-bottom:10px; }
  .search-wrap .ic{ position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:14px; opacity:.55; pointer-events:none; }
  .searchbox{ width:100%; height:44px; font-size:15px; padding:0 42px; border-radius:10px; border:1px solid var(--border); font-family:inherit; background:var(--surface-alt); color:var(--text); transition:.15s var(--ease-ios); }
  .searchbox:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .clear-search-btn{ position:absolute; top:50%; transform:translateY(-50%); inset-inline-end:8px; width:28px; height:28px; border:none; border-radius:50%; background:var(--border-soft); color:var(--text-muted); cursor:pointer; font-size:13px; display:none; align-items:center; justify-content:center; transition:.15s var(--ease-ios); }
  .clear-search-btn:hover{ background:var(--danger-soft); color:var(--danger); }
  .clear-search-btn.show{ display:flex; }

  .search-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .results-count{ font-size:12.5px; color:var(--text-muted); }
  .meta-right{ display:flex; align-items:center; gap:10px; }
  .export-btns{ display:flex; gap:6px; }
  .export-btn{ border:1px solid var(--border); background:var(--surface-alt); color:var(--text); width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; transition:.15s var(--ease-ios); }
  .export-btn:hover{ border-color:var(--accent); background:var(--accent-soft); }
  .export-btn:active{ transform:scale(.92); }
  .export-btn:disabled{ opacity:.5; cursor:not-allowed; }
  .filter-chips{ display:flex; gap:6px; }
  .chip{ font-family:inherit; font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text-muted); cursor:pointer; transition:.15s var(--ease-ios); display:flex; align-items:center; gap:5px; }
  .chip:active{ transform:scale(.94); }
  .chip:hover{ background:var(--accent-soft); }
  .chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

  .main-body{ display:flex; gap:16px; min-height:400px; flex-wrap:wrap; }
  .dep-list{ flex:1 1 320px; border:1px solid var(--border); border-radius:12px; overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:460px; background:var(--surface); }
  .dep-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border-soft); cursor:pointer; font-size:14.5px; position:relative; transition:.15s var(--ease-ios); }
  .dep-item:last-child{ border-bottom:none; }
  .dep-item:hover{ background:var(--accent-soft); }
  .dep-item.selected{ background:var(--accent-soft); }
  .dep-item.selected::before{ content:""; position:absolute; top:6px; bottom:6px; inset-inline-start:0; width:4px; background:var(--accent); border-radius:4px; }
  .dep-icon{ width:38px; height:38px; border-radius:10px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
  .dep-item-body{ flex:1; min-width:0; }
  .cat-pill{ display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; margin-top:3px; }
  .fav-star{ border:none; background:none; cursor:pointer; font-size:18px; flex-shrink:0; opacity:.4; padding:6px; line-height:1; transition:.15s var(--ease-ios); }
  .fav-star:hover{ opacity:.8; transform:scale(1.1); }
  .fav-star.active{ opacity:1; }

  @keyframes itemIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
  .dep-item{ animation:itemIn .28s ease both; }
  .dep-item:nth-child(1){ animation-delay:.01s; } .dep-item:nth-child(2){ animation-delay:.03s; }
  .dep-item:nth-child(3){ animation-delay:.05s; } .dep-item:nth-child(4){ animation-delay:.07s; }
  .dep-item:nth-child(5){ animation-delay:.09s; } .dep-item:nth-child(6){ animation-delay:.11s; }
  .dep-item:nth-child(n+7){ animation-delay:.12s; }
  html.reduce-motion *{ animation:none !important; transition:none !important; }
  @media (prefers-reduced-motion: reduce){ .dep-item{ animation:none; } }

  .detail-panel{ flex:1.4 1 380px; border:1px solid var(--border); border-radius:12px; padding:24px 26px; background:var(--surface); }
  .detail-name{ font-size:23px; font-weight:800; margin:0 0 2px; }
  .detail-en{ font-size:14px; color:var(--text-muted); margin:0 0 16px; direction:ltr; text-align:right; }
  html[dir="ltr"] .detail-en{ text-align:left; }
  .detail-meta{ font-size:13.5px; color:var(--text-muted); line-height:2; }
  .detail-meta b{ color:var(--text); font-weight:700; }
  .numbers-title{ font-size:15px; font-weight:800; margin:20px 0 8px; }
  .number-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface-alt); border-radius:9px; padding:9px 12px; margin-bottom:7px; font-size:14px; transition:.15s var(--ease-ios); flex-wrap:wrap; }
  .number-row:hover{ background:var(--accent-soft); }
  .number-row.primary{ background:var(--accent-soft); border:1px solid var(--accent); position:relative; }
  .number-row .row-label{ min-width:0; overflow-wrap:anywhere; }
  .number-row .num-actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
  .number-row .num{ direction:ltr; font-weight:700; color:var(--accent-dark); font-family:"Cairo",sans-serif; letter-spacing:.5px; font-size:15px; }
  html[data-theme="dark"] .number-row .num{ color:var(--accent); }
  .copy-btn, .call-btn{ border:none; background:none; cursor:pointer; font-size:15px; opacity:.6; transition:.15s var(--ease-ios); width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
  .copy-btn:hover, .call-btn:hover{ opacity:1; background:var(--surface); transform:scale(1.08); }
  .call-btn{ color:var(--ok); text-decoration:none; }
  .badge-primary{ font-size:10.5px; background:var(--accent); color:#fff; border-radius:10px; padding:2px 8px; font-weight:700; }
  .detail-notes{ margin-top:16px; font-size:13.5px; color:var(--text-muted); line-height:1.8; background:var(--surface-alt); padding:12px 14px; border-radius:10px; }
  .empty-hint{ color:var(--text-muted); font-size:14px; text-align:center; margin-top:60px; padding:0 20px; }

  .status-bar{ margin-top:16px; font-size:12px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:12px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .status-dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(58,167,109,.2); flex-shrink:0; }
  .status-dot.offline{ background:var(--danger); box-shadow:0 0 0 3px rgba(192,57,43,.2); }
  .status-bar .link-btn{ background:none; border:none; color:var(--accent); font-weight:700; cursor:pointer; font-size:12px; padding:0; font-family:inherit; }

  /* skeleton */
  .skel{ padding:12px 14px; }
  .skel-line{ height:38px; border-radius:8px; background:linear-gradient(90deg, var(--surface-alt) 25%, var(--border-soft) 50%, var(--surface-alt) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; margin-bottom:8px; }
  @keyframes shimmer{ from{background-position:200% 0;} to{background-position:-200% 0;} }
  @media (prefers-reduced-motion: reduce){ .skel-line{ animation:none; } }

  /* row-reveal: a light staggered fade + rise for freshly-rendered list/
     table rows (department table, users, sessions, audit log...). Each
     row sets --i to its own index; the stagger is capped at 14 so a long
     table doesn't make the last row wait seconds to appear — everything
     past that shows together at the capped delay. */
  @keyframes rowRevealIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
  .row-reveal{ animation:rowRevealIn .38s var(--ease-ios) both; animation-delay:calc(min(var(--i,0),14) * 32ms); }
  @media (prefers-reduced-motion: reduce){ .row-reveal{ animation:none; } }

  .error-card{ text-align:center; padding:40px 20px; color:var(--text-muted); font-size:13.5px; }
  .error-card .ic{ font-size:28px; display:block; margin-bottom:10px; }

  /* login */
  .login-body{ padding:34px 30px 30px; max-width:400px; margin:0 auto; }

  /* ---- minimal login screen (Phase 7.11) — small centered card, no
     background artwork, closer to how Apple/Instagram present sign-in:
     just a logo, a short label, the fields, and the button. ---- */
  #win-login.window{ background:none; border:none; box-shadow:none; }
  .login-hero{
    min-height:56vh; display:flex; align-items:center; justify-content:center; padding:60px 16px;
  }
  .login-hero-card{
    width:100%; max-width:360px; margin:0 auto; text-align:right;
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:30px 26px 24px; box-shadow:var(--shadow);
  }
  .login-hero-brand{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; margin-bottom:24px; }
  .login-hero-brand img{ width:46px; height:46px; object-fit:contain; margin-bottom:8px; }
  .login-hero-brand strong{ display:block; font:800 16px/1.3 "Cairo",sans-serif; color:var(--text); }
  .login-hero-brand span{ display:block; font:600 12.5px/1.3 "Tajawal",sans-serif; color:var(--text-muted); margin-top:3px; }
  .login-hero-card .btn{ width:100%; }
  .login-hero-forgot{ display:block; text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:14px; transition:.2s var(--ease-ios); }
  .login-hero-forgot:hover{ color:var(--accent-dark); }
  html[data-theme="dark"] .login-hero-forgot:hover{ color:var(--accent); }
  @media (max-width:520px){
    .login-hero{ min-height:auto; padding:44px 12px; }
    .login-hero-card{ padding:26px 20px 20px; }
  }
  .login-body h2{ font-size:19px; margin:0 0 18px; font-weight:800; }
  .field-label{ font-size:12.5px; color:var(--text-muted); margin-bottom:6px; display:block; font-weight:600; }
  input[type=password], input[type=text], textarea{ width:100%; border:1px solid var(--border); border-radius:9px; padding:10px 12px; font-size:14px; font-family:inherit; background:var(--surface-alt); color:var(--text); transition:.15s var(--ease-ios); }
  input:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .login-error{ color:var(--danger); font-size:12.5px; min-height:18px; margin:8px 0; }

  /* admin */
  .admin-toolbar{ display:flex; gap:8px; padding:20px 22px 12px; flex-wrap:wrap; align-items:center; }
  .admin-toolbar .spacer{ flex:1; }
  .session-pill{ font-size:12px; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
  table.admin-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
  table.admin-table th{ text-align:start; background:var(--surface-alt); padding:10px 14px; border-bottom:1px solid var(--border); font-weight:700; color:var(--text-muted); font-size:12px; }
  table.admin-table td{ padding:11px 14px; border-bottom:1px solid var(--border-soft); }
  table.admin-table tr{ transition:.15s var(--ease-ios); }
  table.admin-table tr:hover td{ background:var(--accent-soft); cursor:pointer; }
  table.admin-table tr.rowsel td{ background:var(--accent-soft); }
  table.admin-table tr.removing{ opacity:0; transform:translateX(20px); transition:.3s; }
  .admin-wrap{ padding:0 22px 22px; overflow-x:auto; }

  /* admin: video-style full-screen navigation
     The menu follows the reference interaction: a round hamburger at the
     top-right opens a clean full-screen page, the hamburger becomes X, and
     navigation choices are large centered text links. Destinations themselves
     remain real full-screen pages; the backend and their existing open/close
     functions are untouched. */
  .admin-nav{ position:fixed; inset:0; z-index:1000; display:none; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:60px 28px 120px; background:var(--bg); color:var(--text); overflow-y:auto; overscroll-behavior:contain; }
  body.modern-admin-nav.admin-nav-active #adminNav.admin-nav{ display:flex; }
  body.modern-admin-nav .admin-toolbar .admin-nav-duplicate{ display:none; }
  body.modern-admin-nav.admin-nav-menu-open{ overflow:hidden; }

  .admin-nav-item{ display:flex; align-items:center; justify-content:center; width:min(560px,100%); min-height:68px; border:0; background:transparent; color:var(--text); font:700 clamp(25px,4vw,40px)/1.2 "Tajawal","Cairo",sans-serif; text-align:center; cursor:pointer; white-space:normal; padding:10px 20px; border-radius:18px; opacity:0; transform:translateY(18px); transition:color .2s ease,background .2s ease,transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease; }
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) .admin-nav-item{ opacity:1; transform:none; }
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) .admin-nav-item:nth-of-type(2){ transition-delay:.03s; }
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) .admin-nav-item:nth-of-type(3){ transition-delay:.06s; }
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) .admin-nav-item:nth-of-type(4){ transition-delay:.09s; }
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) .admin-nav-item:nth-of-type(5){ transition-delay:.12s; }
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) .admin-nav-item:nth-of-type(6){ transition-delay:.15s; }
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) .admin-nav-item:nth-of-type(7){ transition-delay:.18s; }
  .admin-nav-item:hover{ background:var(--surface-alt); color:var(--accent); transform:scale(1.025); }
  .admin-nav-item.active{ color:var(--accent); background:transparent; box-shadow:none; }
  .admin-nav-item i,.admin-nav-item .ic-emoji{ display:none !important; }
  .admin-nav-divider{ display:none; }

  /* The same control is used for both states: hamburger when closed, X when open.
     Solid background on purpose — see CLAUDE-HANDOFF-NOTES.md entry #27: a
     translucent/blurred background here let whatever sits behind this
     fixed-position button bleed through and become visible. */
  .admin-nav-collapse-btn,
  .admin-nav-reopen{ position:fixed; z-index:1100; bottom:max(22px,env(safe-area-inset-bottom)); top:auto; inset-inline-start:22px; inset-inline-end:auto; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:var(--shadow); cursor:pointer; transition:transform .25s ease,background .2s ease,color .2s ease,opacity .2s ease; }
  .admin-nav-collapse-btn:hover,.admin-nav-reopen:hover{ color:var(--accent); transform:scale(1.04); }
  .admin-nav-collapse-btn{ display:none; margin:0; font-size:0; }
  .admin-nav-collapse-btn .ic-emoji{ display:none; }
  .admin-nav-collapse-btn i{ font-size:22px; }
  .admin-nav-reopen{ display:flex; font-size:0; }
  .admin-nav-reopen .ic-emoji{ display:none; }
  .admin-nav-reopen i{ font-size:22px; }
  /* Reaching for the admin menu only makes sense once signed in — before
     that this button had nothing to open (#adminNav itself is gated on
     .admin-nav-active, which requires a session; see updateAdminUI()). */
  body:not(.authed-ui) .admin-nav-reopen{ display:none; }
  /* And only below the hero — see the scroll listener that toggles
     body.past-hero. Above that point the hero's own down-arrow is still
     on screen (it scrolls away on its own, being inside the sticky
     #homeHero); showing this button at the same time would look like
     two competing controls instead of one handing off to the other. */
  body:not(.past-hero) .admin-nav-reopen{ display:none; }
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) .admin-nav-collapse-btn{ display:flex; }
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) .admin-nav-reopen{ display:none; }
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #adminNav.admin-nav{ display:none; }

  #adminNavBackdrop{ display:none !important; }

  /* Video-style destinations: full viewport, no sidebar/bottom bar. */
  body.modern-admin-nav #inventoryModal.modal-overlay,
  body.modern-admin-nav #auditLogModal.modal-overlay,
  body.modern-admin-nav #adminUsersModal.modal-overlay,
  body.modern-admin-nav #securityCenterModal.modal-overlay,
  body.modern-admin-nav #myProfileModal.modal-overlay{
    background:var(--bg); padding:0; align-items:stretch; justify-content:stretch;
  }
  body.modern-admin-nav #inventoryModal.modal-overlay .modal-card,
  body.modern-admin-nav #auditLogModal.modal-overlay .modal-card,
  body.modern-admin-nav #adminUsersModal.modal-overlay .modal-card,
  body.modern-admin-nav #securityCenterModal.modal-overlay .modal-card,
  body.modern-admin-nav #myProfileModal.modal-overlay .modal-card{
    max-width:none !important; width:100%; height:100%; margin:0; overflow-y:auto; border-radius:0; box-shadow:none;
  }
  body.modern-admin-nav.admin-nav-active #inventoryModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active #auditLogModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active #adminUsersModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active #securityCenterModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active #myProfileModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #inventoryModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #auditLogModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #adminUsersModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #securityCenterModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #myProfileModal.modal-overlay{
    inset:0;
  }

  @media(max-width:820px){
    .admin-nav{ padding:max(60px,env(safe-area-inset-top)) 22px max(115px,calc(env(safe-area-inset-bottom) + 90px)); }
    .admin-nav-item{ min-height:64px; font-size:clamp(24px,7vw,34px); }
    .admin-nav-collapse-btn,.admin-nav-reopen{ bottom:max(18px,env(safe-area-inset-bottom)); top:auto; inset-inline-start:18px; inset-inline-end:auto; width:52px; height:52px; }
  }
  @media(prefers-reduced-motion:reduce){
    .admin-nav-item{ transition:none !important; }
  }

  /* admin: search / filter / sort row */
  .admin-toolbar-row2{ display:flex; gap:8px; padding:0 22px 14px; flex-wrap:wrap; align-items:center; }
  .admin-search-input, .admin-filter-select{ padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-family:inherit; font-size:13px; }
  .admin-search-input{ flex:1; min-width:180px; }
  .admin-filter-select{ min-width:140px; }

  /* admin: stats */
  .admin-stats{ display:flex; gap:10px; padding:0 22px 16px; flex-wrap:wrap; }
  .stat-card{ flex:1; min-width:130px; background:var(--surface-alt); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
  .stat-card .stat-num{ font-size:22px; font-weight:800; color:var(--accent-dark); }
  html[data-theme="dark"] .stat-card .stat-num{ color:var(--accent); }
  .stat-card .stat-label{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }

  /* admin: status badges */
  .status-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; }
  .status-badge.active{ background:rgba(58,167,109,.14); color:#1f7a4e; }
  .qty-stepper{ display:flex; align-items:center; gap:8px; }
  .qty-stepper button{ width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:17px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .qty-stepper button:disabled{ opacity:.4; cursor:not-allowed; }
  .qty-stepper .qty-num{ min-width:34px; text-align:center; font-weight:800; font-family:"Cairo",sans-serif; }
  .status-badge.low-stock{ background:rgba(192,57,43,.14); color:#c0392b; }
  html[data-theme="dark"] .status-badge.low-stock{ color:var(--danger); }
  .status-badge.out-of-stock{ background:rgba(120,20,20,.16); color:#7a1f1f; font-weight:800; }
  html[data-theme="dark"] .status-badge.out-of-stock{ background:rgba(232,117,106,.22); color:#ffb3ab; }
  .inv-item-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--surface-alt); border-radius:9px; padding:10px 12px; margin-bottom:8px; }
  .inv-item-thumb{ width:42px; height:42px; border-radius:9px; object-fit:cover; flex-shrink:0; background:var(--surface); border:1px solid var(--border); }
  .inv-item-meta{ min-width:0; }
  .inv-item-meta .inv-name{ font-weight:700; }
  .inv-item-meta .inv-sub{ font-size:11.5px; color:var(--text-muted); }
  .inv-item-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .inventory-image-box{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; padding:12px; border:1px dashed var(--border); border-radius:14px; }
  .inventory-image-preview{ width:76px; height:76px; border-radius:14px; overflow:hidden; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--border); }
  .inventory-image-preview img{ width:100%; height:100%; object-fit:cover; }
  .inventory-image-placeholder{ font-size:24px; opacity:.4; }
  .inventory-image-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .inv-icon-btn{ width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:14px; }
  .inventory-add-box-more{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--border); }
  .inventory-add-box-more summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--accent); }
  .inventory-add-box-more .inventory-form-grid{ margin-top:10px; }
  .inventory-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.inventory-summary-grid .stat-card{min-width:0;padding:10px}.inventory-search-row{display:flex;gap:8px;align-items:center;margin:8px 0}.inventory-add-box,.documents-add-box{border-top:1px solid var(--border);padding-top:14px;margin-top:8px}.inventory-add-box summary,.documents-add-box summary{cursor:pointer;font-weight:800}.inventory-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.inventory-form-grid input,.inventory-add-box textarea,.documents-add-box textarea{padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:inherit}.inventory-add-box textarea,.documents-add-box textarea{width:100%;min-height:70px;margin-top:8px;resize:vertical;box-sizing:border-box}.inventory-checks{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:12px}.status-badge.expired{background:rgba(192,57,43,.16);color:#a93226}.status-badge.expiring{background:rgba(230,160,40,.16);color:#a36a00}.inventory-modal-card{max-width:760px;width:calc(100% - 24px);max-height:90vh;overflow-y:auto}.inventory-submit-bar{position:sticky;bottom:0;margin-top:10px;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);z-index:2}.inventory-submit-bar .btn{margin-top:0;width:100%}@media(max-width:650px){.inventory-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  html[data-theme="dark"] .status-badge.active{ color:var(--ok); }
  .status-badge.inactive{ background:var(--danger-soft); color:var(--danger); }
  .status-badge.info{ background:var(--medical-blue-soft); color:var(--medical-blue); }

  /* editor */
  .editor-body{ padding:26px 30px 28px; max-width:520px; margin:0 auto; }
  .editor-body h2{ font-size:18px; margin:0 0 6px; font-weight:800; }
  .editor-body .field-label{ margin-top:13px; }
  .editor-actions{ display:flex; gap:8px; margin-top:22px; }
  .field-error{ color:var(--danger); font-size:12px; margin-top:4px; min-height:14px; }
  .num-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
  .num-row input[type=text]{ flex:1; }
  .num-row input.numval{ direction:ltr; text-align:right; max-width:150px; }
  .num-row .primary-radio{ display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text-muted); white-space:nowrap; }
  .num-row .rm-btn{ border:none; background:var(--danger-soft); color:var(--danger); width:28px; height:28px; border-radius:8px; cursor:pointer; flex-shrink:0; font-size:14px; }
  .add-row-btn{ font-size:12.5px; margin-top:4px; }

  /* modal */
  .modal-overlay{ position:fixed; inset:0; background:rgba(20,15,8,.5); display:flex; align-items:center; justify-content:center; z-index:60; padding:20px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease-ios), visibility 0s linear .25s; }
  /* #confirmModal is a generic yes/no dialog opened FROM WITHIN other
     modals (e.g. "delete this item?" while the Inventory modal is open).
     At the shared base z-index, whichever modal comes later in DOM order
     wins the stack — for several callers that's the parent modal, not
     this one, so the confirmation silently renders behind it. Give it a
     dedicated higher z-index so it's always on top of any other modal. */
  #confirmModal{ z-index:1200; }
  .modal-overlay.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s var(--ease-ios), visibility 0s linear 0s; }
  .modal-card{ background:var(--surface); border-radius:14px; padding:24px; max-width:380px; width:100%; box-shadow:var(--shadow); transform:scale(.94) translateY(10px); opacity:0; transition:transform .32s var(--ease-ios), opacity .28s var(--ease-ios); }
  .modal-overlay.show .modal-card{ transform:scale(1) translateY(0); opacity:1; }
  @media (prefers-reduced-motion: reduce){ .modal-overlay, .modal-card{ transition:none; } }
  html.reduce-motion .modal-overlay, html.reduce-motion .modal-card{ transition:none; }
  .modal-card h3{ margin:0 0 8px; font-size:17px; font-weight:800; }
  .modal-card p{ margin:0 0 18px; font-size:13.5px; color:var(--text-muted); line-height:1.7; }
  .modal-actions{ display:flex; gap:8px; justify-content:flex-end; }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
  .modal-head h3{ margin:0; }
  .modal-close{ flex:none; width:30px; height:30px; border:none; border-radius:999px; background:var(--surface-alt); color:var(--text-muted); font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s var(--ease-ios); }
  .modal-close:hover{ background:var(--danger); color:#fff; }

  /* ---- forgot-password: step container, OTP boxes, countdown, help ---- */
  .reset-steps{ position:relative; overflow:hidden; }
  .reset-step{ display:none; opacity:0; transform:translateX(10px); transition:opacity .3s var(--ease-ios), transform .3s var(--ease-ios); }
  html[dir="rtl"] .reset-step{ transform:translateX(-10px); }
  .reset-step.active{ display:block; opacity:1; transform:translateX(0); }
  @media (prefers-reduced-motion: reduce){ .reset-step{ transition:none; } }
  .reset-step p{ font-size:13px; line-height:1.6; margin:0 0 14px; }

  /* Masked-destination chip — one compact line instead of a full sentence + a
     separate line for the address. */
  .otp-destination{ display:flex; align-items:center; justify-content:center; gap:7px; text-align:center; font-size:12.5px; color:var(--text-muted); margin:-4px 0 16px; }
  .otp-destination svg{ flex-shrink:0; opacity:.7; }
  .otp-destination b{ color:var(--text); font-weight:700; direction:ltr; unicode-bidi:isolate; }

  /* OTP stage: the 6 boxes literally merge into one continuous green pill
     (gap collapses to 0, only the outer two corners stay rounded, text
     hides) — matching the reference design's mechanic exactly — while a
     checkmark overlay fades in on top, centered over the merged shape. */
  .otp-stage{ position:relative; min-height:58px; display:flex; align-items:center; justify-content:center; }
  .otp-input-row{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; max-width:320px; margin:0 auto; justify-content:center; direction:ltr; transition:opacity .25s var(--ease-ios), transform .3s var(--ease-ios), gap .4s cubic-bezier(.4,0,.2,1); }
  .otp-input-row.otp-hide{ opacity:0; transform:scale(.92); pointer-events:none; }
  .otp-digit{ width:100%; max-width:46px; justify-self:center; aspect-ratio:5/6; text-align:center; font-size:22px; font-weight:800; border:1.5px solid var(--border); border-radius:12px; background:var(--surface-alt); color:var(--text); transition:border-color .15s var(--ease-ios), box-shadow .15s var(--ease-ios), transform .15s var(--ease-ios), background .4s cubic-bezier(.4,0,.2,1), color .4s cubic-bezier(.4,0,.2,1), border-radius .4s cubic-bezier(.4,0,.2,1); font-family:inherit; }
  .otp-digit:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .otp-digit.filled{ border-color:var(--accent); background:var(--accent-soft); }
  @keyframes otpPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
  .otp-digit.pop{ animation:otpPop .22s var(--ease-ios); }
  @keyframes otpShake{ 10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); } 30%,50%,70%{ transform:translateX(-5px); } 40%,60%{ transform:translateX(5px); } }
  .otp-input-row.otp-shake{ animation:otpShake .5s cubic-bezier(.36,.07,.19,.97); }
  .otp-input-row.otp-shake .otp-digit{ border-color:var(--danger); background:var(--danger-soft); }
  /* merged (success) state: boxes touch, turn green, hide their digits,
     and only the two outer corners keep any rounding — one seamless pill */
  .otp-input-row.otp-merged{ gap:0; }
  .otp-input-row.otp-merged .otp-digit{ background:var(--ok); border-color:var(--ok); color:transparent; box-shadow:none; border-radius:0; }
  .otp-input-row.otp-merged .otp-digit:first-child{ border-radius:12px 0 0 12px; }
  .otp-input-row.otp-merged .otp-digit:last-child{ border-radius:0 12px 12px 0; }
  .otp-success-pill{ position:absolute; inset:0; margin:auto; width:24px; height:24px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s var(--ease-ios) .3s; pointer-events:none; }
  .otp-success-pill.show{ opacity:1; }
  .otp-success-pill .otp-check-path{ stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .4s ease .45s; }
  .otp-success-pill.show .otp-check-path{ stroke-dashoffset:0; }
  @media (prefers-reduced-motion: reduce){ .otp-input-row, .otp-success-pill, .otp-digit{ transition:none; animation:none; } }

  .otp-timer{ text-align:center; font-size:12px; color:var(--text-muted); margin:14px 0 2px; font-variant-numeric:tabular-nums; }
  .scanner-torch-btn{ position:absolute; bottom:10px; inset-inline-end:10px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(0,0,0,.5); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s var(--ease-ios); z-index:2; }
  .scanner-torch-btn.active{ background:var(--gold,#a9822f); box-shadow:0 0 0 4px rgba(169,130,47,.3); }
  .otp-timer b{ color:var(--text); font-weight:800; }
  .otp-timer.expiring b{ color:var(--danger); }
  .reset-resend{ display:block; text-align:center; font-size:12px; color:var(--accent); background:none; border:none; cursor:pointer; margin:12px auto 0; padding:4px; font-family:inherit; }
  .reset-resend:disabled{ color:var(--text-muted); cursor:default; }
  .reset-back{ display:block; text-align:center; font-size:12px; color:var(--text-muted); background:none; border:none; cursor:pointer; margin:6px auto 0; padding:4px; font-family:inherit; }
  .reset-divider{ border:none; border-top:1px solid var(--border); margin:18px 0 14px; }
  .reset-success-icon{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:26px; }
  .forgot-help-toggle{ display:block; width:100%; text-align:center; font-size:11.5px; color:var(--text-muted); background:none; border:none; cursor:pointer; margin-top:16px; padding:4px; font-family:inherit; transition:.15s var(--ease-ios); }
  .forgot-help-toggle:hover{ color:var(--text); }
  .forgot-help-box{ max-height:0; overflow:hidden; opacity:0; transition:max-height .3s var(--ease-ios), opacity .25s var(--ease-ios), margin .3s var(--ease-ios); text-align:center; }
  .forgot-help-box.open{ max-height:80px; opacity:1; margin-top:10px; }
  .forgot-help-box a{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#2AABEE; text-decoration:none; padding:8px 14px; border:1px solid rgba(42,171,238,.35); border-radius:999px; background:rgba(42,171,238,.08); transition:.15s var(--ease-ios); }
  .forgot-help-box a:hover{ background:rgba(42,171,238,.16); }

  /* ---- About / info modal ---- */
  .about-card{ max-width:460px; max-height:88vh; overflow-y:auto; position:relative; padding:28px 26px 24px; }
  .about-close{ position:absolute; top:16px; inset-inline-end:16px; }
  .about-hero{ text-align:center; padding-top:4px; }
  .about-hero img{ width:52px; height:52px; object-fit:contain; margin-bottom:10px; }
  .about-hero h3{ margin:0 0 4px; font-size:19px; font-weight:800; }
  .about-version{ display:inline-block; font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:3px 12px; border-radius:999px; }
  .about-lead{ text-align:center; font-size:13px; color:var(--text-muted); line-height:1.8; margin:16px 0 22px; }
  .about-features{ display:flex; flex-direction:column; gap:16px; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .about-feature{ display:flex; align-items:flex-start; gap:12px; text-align:start; }
  .about-feature-ic{ flex:none; width:38px; height:38px; border-radius:11px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; font-size:18px; }
  .about-feature b{ display:block; font-size:13.5px; font-weight:800; margin-bottom:3px; }
  .about-feature span{ display:block; font-size:12px; color:var(--text-muted); line-height:1.7; }
  .about-footer{ text-align:center; margin-top:18px; font-size:11px; color:var(--text-muted); }

  /* ---- inline email verification widget (My Account + admin user form) ---- */
  .email-verify-inline{ margin-top:8px; }
  .email-verify-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; margin-inline-end:8px; }
  .email-verify-badge.verified{ background:rgba(52,199,89,.14); color:#1f9c48; }
  .email-verify-badge.pending{ background:rgba(10,132,255,.14); color:#0066cc; }
  .email-verify-badge.unverified{ background:rgba(255,149,0,.14); color:#b26a00; }
  .email-verify-send-btn{ font-size:11.5px; font-weight:700; color:var(--accent); background:none; border:none; cursor:pointer; padding:2px; font-family:inherit; }
  .email-verify-send-btn:disabled{ color:var(--text-muted); cursor:default; }
  .email-verify-code-row{ display:flex; gap:6px; align-items:center; margin-top:8px; }
  .email-verify-msg{ font-size:11.5px; margin-top:6px; min-height:14px; }
  .email-verify-msg.err{ color:var(--danger); }
  .email-verify-msg.ok{ color:#1f9c48; }
  .email-verify-msg.pending-note{ color:#0066cc; font-weight:600; }

  .settings-card{ max-width:400px; }
  .settings-section{ margin:16px 0; }
  .swatch-row{ display:flex; gap:10px; margin-top:8px; align-items:center; flex-wrap:wrap; }
  .swatch{ width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; position:relative; box-shadow:0 2px 6px rgba(0,0,0,.15); transition:.15s var(--ease-ios); }
  .swatch:hover{ transform:scale(1.12); }
  .swatch.active{ border-color:var(--text); }
  .swatch.active::after{ content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.4); }
  .swatch-custom{ background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red); display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .swatch-custom input[type=color]{ opacity:0; width:100%; height:100%; cursor:pointer; border:none; padding:0; }

  .option-row{ display:flex; gap:8px; margin:8px 0 14px; flex-wrap:wrap; }
  .option-btn{ font-family:inherit; cursor:pointer; border-radius:999px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text); padding:7px 15px; font-size:13px; font-weight:600; transition:.15s var(--ease-ios); }
  .option-btn:hover{ border-color:var(--accent); }
  .option-btn[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13.5px; padding:9px 0; cursor:pointer; }
  .switch{ position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; }
  .switch-track{ position:absolute; inset:0; background:var(--border); border-radius:999px; transition:.2s var(--ease-ios); }
  .switch-track::before{ content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:3px; inset-inline-start:3px; transition:.2s var(--ease-ios); box-shadow:0 1px 3px rgba(0,0,0,.3); }
  .switch input:checked + .switch-track{ background:var(--accent); }
  .switch input:checked + .switch-track::before{ inset-inline-start:21px; }

  .toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--text); color:var(--surface); padding:11px 20px; border-radius:999px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:.25s; box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:70; white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis; }
  html[data-theme="dark"] .toast{ background:var(--accent); color:#06231c; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  .footer-sig{ max-width:1120px; margin:26px auto 0; text-align:center; font-size:12.5px; color:var(--text-muted); }
  .footer-sig strong{ color:var(--accent-dark); }
  html[data-theme="dark"] .footer-sig strong{ color:var(--accent); }
  .footer-sig .footer-link{ color:inherit; font-weight:inherit; text-decoration:none; border-bottom:none; transition:.2s var(--ease-ios); }
  .footer-sig .footer-link:hover, .footer-sig .footer-link:focus-visible{ color:var(--accent-dark); }
  html[data-theme="dark"] .footer-sig .footer-link:hover, html[data-theme="dark"] .footer-sig .footer-link:focus-visible{ color:var(--accent); }

  @media (max-width:640px){
    .app-pad{ padding:18px 16px 16px; }
    .main-header h1{ font-size:19px; }
    .editor-body, .login-body{ padding:22px 18px 22px; }
    .main-header{ flex-direction:column; align-items:stretch; }
    .main-header .btn{ width:100%; }
    .detail-panel{ padding:18px 16px; }
    .dep-item{ padding:13px 12px; }
    .fav-star{ font-size:20px; padding:10px; }
    .copy-btn, .call-btn{ width:44px; height:44px; font-size:16px; }
    .number-row{ padding:10px 12px; }
    .search-meta{ gap:8px; }
    .chip{ padding:9px 14px; min-height:38px; }
    .icon-btn{ width:44px; height:44px; }
    .btn{ min-height:40px; }
    table.admin-table{ font-size:12.5px; }

    /* admin table -> stacked cards on mobile */
    .admin-wrap{ overflow-x:visible; }
    table.admin-table thead{ display:none; }
    table.admin-table, table.admin-table tbody, table.admin-table tr, table.admin-table td{ display:block; width:100%; }
    table.admin-table tr{ margin-bottom:10px; border:1px solid var(--border); border-radius:10px; padding:6px 4px; background:var(--surface); }
    table.admin-table tr.rowsel{ border-color:var(--accent); }
    table.admin-table td{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 12px; border-bottom:1px dashed var(--border-soft); text-align:start !important; direction:inherit !important; }
    table.admin-table td:last-child{ border-bottom:none; }
    table.admin-table td::before{ content:attr(data-label); font-weight:700; color:var(--text-muted); font-size:11px; flex-shrink:0; }
    .admin-toolbar-row2{ flex-direction:column; align-items:stretch; }
    .admin-search-input, .admin-filter-select{ width:100%; }
    .admin-toolbar{ padding:16px 16px 10px; }
    .admin-toolbar-row2, .admin-stats{ padding-inline:16px; }
    .admin-wrap{ padding:0 16px 16px; }
  }

  /* tablet: keep comfortable touch targets without changing the layout */
  @media (min-width:641px) and (max-width:1024px) and (pointer:coarse){
    .icon-btn{ width:42px; height:42px; }
    .copy-btn, .call-btn{ width:40px; height:40px; }
    .fav-star{ padding:8px; }
    .btn{ min-height:38px; }
    .dep-item{ padding:13px 14px; }
  }

  * { -webkit-tap-highlight-color: transparent; }
  .btn, .chip, .fav-star, .copy-btn, .call-btn, .icon-btn, .tabs button{ touch-action:manipulation; }

  /* PDF export: a dedicated print-only view. Hidden normally; when
     window.print() is triggered from exportToPDF(), only this area
     renders — everything else on the page is hidden for print. */
  #printExportArea{ display:none; }
  #printExportArea h1{ font-family:"Cairo",sans-serif; font-size:20px; margin:0 0 6px; }
  #printExportArea .print-meta{ font-size:12px; color:#555; margin:0 0 16px; }
  #printExportArea .print-footer{ margin-top:26px; font-size:9.5px; color:#999; text-align:center; }
  #printExportArea table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  #printExportArea th, #printExportArea td{ border:1px solid #ccc; padding:6px 8px; text-align:start; }
  #printExportArea thead{ background:#f0f0f0; }
  @media print{
    body > *:not(#printExportArea){ display:none !important; }
    #printExportArea{ display:block !important; }
    #printExportArea .print-footer{ position:fixed; bottom:10px; left:0; right:0; }
    body{ background:#fff; padding:0; }
  }

.admin-users-card{max-width:760px;width:calc(100% - 24px);max-height:90vh;overflow:auto}.user-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.user-form-grid input,.user-form-grid select,.admin-users-card input,.admin-users-card select{padding:10px;border:1px solid #ccc;border-radius:8px;background:var(--panel,#fff);color:inherit}.user-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #ddd}.user-meta{flex:1}.user-actions{display:flex;gap:6px}.login-hint{font-size:12px;opacity:.65;margin-top:10px}@media(max-width:600px){.user-form-grid{grid-template-columns:1fr}.user-row{align-items:flex-start;flex-direction:column}.user-actions{width:100%}}


  /* ================= IMAGE + GLASS CINEMATIC HOME ================= */
  /* Phase 7.4: the old per-frame video scrub (v22-smooth.mp4) was heavy to decode on
     every scroll tick and stalled on iOS/low-memory devices. Replaced with a static
     photo + CSS transform/blur/opacity pipeline — same cinematic feel, far smoother,
     no decode cost. See README "Phase 7.4" for details. */
  html{scroll-behavior:smooth;}
  .home-scroll-track{position:relative;height:120vh;min-height:calc(100vh + 260px);width:calc(100% + 32px);margin:-22px -16px 0;background:var(--bg);}
  .home-hero{position:sticky;top:0;width:100%;height:100vh;height:100svh;height:100dvh;min-height:100vh;overflow:hidden;isolation:isolate;background:#03070d;z-index:20;-webkit-transform:translateZ(0);transform:translateZ(0);}
  /* Phase 7.8 — same three art-directed pairs as 7.7. The background now
     starts noticeably zoomed in (scale 1.25) purely so that when it
     recedes it never shrinks past 100% coverage — object-fit:cover only
     guarantees full coverage at scale(1); shrinking below that reveals the
     hero's own dark background colour at the edges, which is the "black
     edges" this fixes. The building still grows from the same fixed ground
     line (transform-origin:50% 100%) as before. */
  .px-stage-wrap{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
  .px-scene{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;will-change:contents;}
  .px-scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;transform-origin:50% 100%;transform:scale(1.28);will-change:transform,filter;}
  .px-layer{position:absolute;display:block;will-change:transform,filter;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
  .px-building-shadow{position:absolute;inset:0;z-index:2;pointer-events:none;filter:drop-shadow(0 26px 40px rgba(0,0,0,.4));}
  .px-building{inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;transform-origin:50% 100%;transform:scale(1);}
  .home-hero-glow{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 55% 40% at 50% 46%,rgba(233,162,101,.5) 0%,rgba(233,162,101,0) 70%);opacity:0;pointer-events:none;will-change:opacity;}
  .home-hero-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,rgba(0,0,0,0) 40%,rgba(6,14,28,.5) 100%),linear-gradient(to top,rgba(6,14,28,.6) 0%,rgba(6,14,28,0) 32%);}
  .home-white-finish{position:absolute;inset:0;z-index:5;background:radial-gradient(ellipse at 50% 30%,var(--bg2) 0%,var(--bg) 70%);opacity:0;pointer-events:none;will-change:opacity;}
  .hero-nav{position:absolute;z-index:8;top:0;left:0;right:0;width:100%;padding:32px 6vw 24px;display:flex;align-items:center;justify-content:space-between;pointer-events:auto;color:#fff;transition:opacity .35s ease,color .35s ease;will-change:opacity;}

  .hero-brand{display:flex;align-items:center;gap:10px;direction:rtl;color:#fff;pointer-events:none;}
  .hero-brand-mark{width:48px;height:48px;border-radius:16px;padding:5px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 10px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.2);}
  .hero-brand-mark img{width:100%;height:100%;object-fit:contain;display:block;}
  .hero-brand-copy{display:flex;flex-direction:column;gap:2px;text-align:right;text-shadow:0 2px 14px rgba(0,0,0,.25);}
  .hero-brand-copy strong{font:600 14px/1.2 "Tajawal","Cairo",sans-serif;letter-spacing:.01em;}
  .hero-brand-copy span{font:400 10px/1.2 "Tajawal","Cairo",sans-serif;opacity:.86;}
  .hero-top-actions{display:flex;align-items:center;gap:10px;direction:rtl;}
  .hero-top-btn,.hero-bottom-btn{appearance:none;color:#fff;font:500 12px/1.2 "Tajawal","Cairo",sans-serif;letter-spacing:.08em;cursor:pointer;transition:transform .28s var(--ease-ios),background .28s ease,border-color .28s ease,box-shadow .28s ease,opacity .28s ease;text-shadow:0 1px 10px rgba(0,0,0,.25);}
  .hero-top-btn{border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.12);padding:11px 17px;border-radius:999px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 8px 28px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.18);}
  .hero-top-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.52);box-shadow:0 14px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.24);}
  .hero-sky-copy{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:11vh;pointer-events:none;text-align:center;transition:opacity .35s ease;}
  .hero-sky-copy h1{margin:0;width:min(760px,86vw);font-family:"Tajawal","Cairo",sans-serif;font-weight:700;font-size:clamp(22px,3.6vw,40px);line-height:1.4;color:#fff;letter-spacing:.02em;text-shadow:0 2px 16px rgba(0,0,0,.28);}
  .hero-bottom-cluster{position:absolute;z-index:8;bottom:clamp(22px,4.5vh,50px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;}
  .hero-bottom-actions{display:flex;align-items:center;gap:12px;direction:rtl;white-space:nowrap;color:#fff;pointer-events:auto;}
  .hero-bottom-btn{border:1px solid rgba(255,255,255,.32);background:rgba(10,28,42,.16);padding:12px 22px;border-radius:999px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 10px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.16);}
  .hero-bottom-btn:hover{transform:translateY(-3px);background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.52);}
  .hero-scroll-down{width:44px;height:44px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.14);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);color:#fff;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.22);pointer-events:auto;animation:heroArrowFloat 2.8s cubic-bezier(.45,0,.55,1) infinite;transition:background .25s ease,border-color .25s ease;}
  .hero-scroll-down svg{width:19px;height:19px;}
  .hero-scroll-down:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.55);}
  @keyframes heroArrowFloat{0%,100%{transform:translateY(0) scale(1);opacity:.92;}50%{transform:translateY(7px) scale(1.04);opacity:1;}}
  @media(prefers-reduced-motion:reduce){.hero-scroll-down{animation:none;}}

  /* Search bar now sits directly under the heading, in normal flow, so it
     never overlaps the hospital building artwork lower in the frame.
     A dark scrim sits under the glass gradient (not just the glass alone)
     so the white text/placeholder stays legible no matter how bright the
     hero photo behind it is at any given scroll position or device. */
  .hero-search-wrap{position:relative;z-index:9;margin:22px auto 0;width:min(720px,88vw);display:flex;align-items:center;gap:10px;padding:7px 8px 7px 18px;border:1px solid rgba(255,255,255,.46);border-radius:26px;background:linear-gradient(135deg,rgba(10,20,32,.30),rgba(10,20,32,.20)),linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08));backdrop-filter:blur(24px) saturate(175%);-webkit-backdrop-filter:blur(24px) saturate(175%);box-shadow:0 18px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.08);transition:opacity .35s ease,transform .35s var(--ease-ios);direction:rtl;will-change:opacity,transform;pointer-events:auto;}
  .hero-search-icon{font-size:19px;opacity:.96;filter:drop-shadow(0 1px 10px rgba(0,0,0,.4));pointer-events:none;}
  .hero-search-input{flex:1;min-width:0;height:50px;border:0;outline:0;background:transparent;color:#fff;font:400 16px/1.4 "Tajawal","Cairo",sans-serif;text-align:right;padding:0 2px;text-shadow:0 1px 12px rgba(0,0,0,.4);}
  .hero-search-input::placeholder{color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.4);}
  .hero-search-submit{height:50px;min-width:102px;border:1px solid rgba(255,255,255,.48);border-radius:19px;background:rgba(255,255,255,.30);color:#fff;font:600 13px/1 "Tajawal","Cairo",sans-serif;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .22s var(--ease-ios),background .22s ease,border-color .22s ease;}
  .hero-search-submit:hover{transform:translateY(-2px);background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.58);}
  .hero-search-submit:active{transform:scale(.97);}

  /* Floating global menu: remains available throughout every section/page.
     Pinned top-right (not mid-height) and drawn with the site's own
     surface/border/text colors so it stays clearly visible over the dark
     hero photo, the light directory, or the admin screens alike; the
     frosted glass look now only appears on hover/focus. */
  .floating-menu{position:fixed;z-index:1100;top:max(18px,env(safe-area-inset-top));left:18px;display:flex;align-items:flex-start;gap:10px;direction:rtl;}
  /* Visible whether signed in or not, by explicit request — About/
     Settings (language, theme) are useful on the public site too, and
     the Inventory/Quick-stock tiles already just route a signed-out
     visitor to the login screen on their own (see floatingMenuAction()
     in index.html), so nothing here needs gating. Only the *other*
     admin-nav trigger — the bottom corner .admin-nav-reopen button,
     fixed separately below — stays session-gated, since it opens a nav
     that itself doesn't exist for a signed-out visitor. */
  .floating-menu.pos-right{left:auto;right:max(18px,env(safe-area-inset-right));}
  .floating-menu.pos-left{left:max(18px,env(safe-area-inset-left));right:auto;}
  .floating-menu.pos-custom{right:auto;}
  .floating-menu.dragging{transition:none;opacity:.92;}
  .floating-menu.edit-mode .floating-menu-toggle{cursor:grab;box-shadow:0 0 0 3px var(--accent-soft),var(--shadow);}
  .floating-menu.edit-mode.dragging .floating-menu-toggle{cursor:grabbing;}
  .floating-menu-edit-hint{position:fixed;z-index:1600;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);display:none;align-items:center;gap:12px;padding:12px 16px 12px 20px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow);font:600 12.5px/1.2 "Tajawal","Cairo",sans-serif;white-space:nowrap;}
  .floating-menu-edit-hint.show{display:flex;}
  /* Home / Admin quick buttons, pinned right next to the options (☰) toggle. */
  .floating-menu-quick{position:fixed;z-index:1100;top:max(18px,env(safe-area-inset-top));inset-inline-end:80px;display:flex;align-items:center;gap:8px;transition:opacity .35s ease;}
  .floating-menu-quick-btn{height:52px;padding:0 16px;border-radius:16px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);color:var(--text);font:600 12.5px/1.2 "Tajawal","Cairo",sans-serif;white-space:nowrap;cursor:pointer;transition:transform .28s var(--ease-ios),background .2s ease,box-shadow .2s ease;}
  .floating-menu-quick-btn:hover,.floating-menu-quick-btn:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.4);}
  .floating-menu-quick-btn:active{transform:translateY(0) scale(.96);}
  html[data-theme="dark"] .floating-menu-quick-btn:hover,html[data-theme="dark"] .floating-menu-quick-btn:focus-visible{background:rgba(255,255,255,.1);}
  @media(max-width:720px){.floating-menu-quick-btn{height:48px;padding:0 12px;font-size:11px;border-radius:14px;}}
  @media(max-width:400px){.floating-menu-quick-btn{padding:0 9px;font-size:9.5px;}}
  .floating-menu-toggle{width:52px;height:52px;border-radius:16px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0;transition:transform .28s var(--ease-ios),background .28s ease,box-shadow .28s ease,backdrop-filter .28s ease,border-color .28s ease;}
  .floating-menu-toggle:hover,.floating-menu-toggle:focus-visible{transform:translateY(-2px) scale(1.04);background:rgba(255,255,255,.4);backdrop-filter:blur(16px) saturate(165%);-webkit-backdrop-filter:blur(16px) saturate(165%);box-shadow:0 14px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.55);border-color:rgba(255,255,255,.6);}
  html[data-theme="dark"] .floating-menu-toggle:hover,html[data-theme="dark"] .floating-menu-toggle:focus-visible{background:rgba(255,255,255,.1);box-shadow:0 14px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);}
  .floating-menu-toggle span{display:block;height:2px;border-radius:99px;background:var(--text);transition:transform .25s var(--ease-ios),width .25s ease,opacity .25s ease,background .25s ease;}
  .floating-menu-toggle span:nth-child(1),.floating-menu-toggle span:nth-child(2){width:23px}.floating-menu-toggle span:nth-child(3){width:15px;align-self:flex-start;margin-inline-start:15px;}
  .floating-menu.open .floating-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .floating-menu.open .floating-menu-toggle span:nth-child(2){opacity:0;transform:scaleX(.3)}
  .floating-menu.open .floating-menu-toggle span:nth-child(3){width:23px;align-self:center;margin:0;transform:translateY(-7px) rotate(-45deg)}
  /* Apple-style full-page quick menu (Phase 7.10): the toggle stays a small
     pinned button, but opening it now covers the entire viewport with
     a frosted sheet of large tappable tiles, instead of a small side
     dropdown — so it reads the same over the hero, the directory, or the
     admin screens. */
  .floating-menu-overlay{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,16,22,.6);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s var(--ease-ios),visibility 0s linear .35s;}
  .floating-menu.open .floating-menu-overlay{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
  .floating-menu-sheet{width:min(560px,100%);max-height:86vh;overflow:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:22px;transform:translateY(18px) scale(.96);transition:transform .4s var(--ease-ios);direction:rtl;}
  .floating-menu.open .floating-menu-sheet{transform:translateY(0) scale(1);}
  .floating-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
  .floating-menu-brand{display:flex;align-items:center;gap:10px;color:#fff;font:700 15px/1.2 "Cairo","Tajawal",sans-serif;}
  .floating-menu-brand img{width:34px;height:34px;border-radius:10px;background:#fff;object-fit:contain;padding:3px;}
  .floating-menu-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#fff;font-size:14px;line-height:1;cursor:pointer;transition:background .2s ease,transform .2s var(--ease-ios),backdrop-filter .2s ease;}
  .floating-menu-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .floating-menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  /* Each tile is plain/flat until hover, at which point a frosted glass
     highlight sweeps in — border brightens, backdrop blurs, subtle lift. */
  .floating-menu-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:22px 10px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font:600 13px/1.2 "Tajawal","Cairo",sans-serif;cursor:pointer;transition:background .25s ease,transform .25s var(--ease-ios),border-color .25s ease,backdrop-filter .25s ease,box-shadow .25s ease;position:relative;}
  @keyframes floatingTileIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  .floating-menu.open .floating-menu-tile{animation:floatingTileIn .5s var(--ease-ios) both;}
  .floating-menu.open .floating-menu-tile:nth-child(1){animation-delay:.10s;}
  .floating-menu.open .floating-menu-tile:nth-child(2){animation-delay:.16s;}
  .floating-menu.open .floating-menu-tile:nth-child(3){animation-delay:.22s;}
  .floating-menu.open .floating-menu-tile:nth-child(4){animation-delay:.28s;}
  @media(prefers-reduced-motion:reduce){.floating-menu-tile{opacity:1;animation:none!important;}}
  html.reduce-motion .floating-menu-tile{opacity:1;animation:none!important;}
  .floating-menu-tile:hover,.floating-menu-tile:focus-visible{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38);transform:translateY(-3px);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);box-shadow:0 12px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28);}
  .floating-menu-tile.wide{grid-column:1/-1;flex-direction:row;padding:15px 18px;}
  .floating-menu-tile .fmt-ic{font-size:24px;line-height:1;}
  .floating-menu-tile.wide .fmt-ic{font-size:19px;}

  /* Floating pill that appears only once you've scrolled past the hero
     into the directory/admin content — same idea as Apple's floating
     "compare" pill on product pages: hidden at rest, fades/slides in as
     a frosted glass capsule once it's actually useful, and never fights
     with the top-right quick menu for space. */
  .back-to-top{position:fixed;z-index:50;bottom:max(20px,env(safe-area-inset-bottom));inset-inline-end:18px;display:flex;align-items:center;gap:8px;padding:12px 20px 12px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);cursor:pointer;font:600 13px/1 "Tajawal","Cairo",sans-serif;opacity:0;visibility:hidden;transform:translateY(16px) scale(.92);transition:opacity .32s var(--ease-ios),transform .32s var(--ease-ios),background .2s ease,visibility 0s linear .32s;}
  .back-to-top.show{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition:opacity .32s var(--ease-ios),transform .32s var(--ease-ios),background .2s ease,visibility 0s linear 0s;}
  .back-to-top:hover{background:var(--accent-soft);}
  .back-to-top svg{width:16px;height:16px;flex:none;}
  @media(prefers-reduced-motion:reduce){.back-to-top{transition:none;}}
  html.reduce-motion .back-to-top{transition:none;}
  @media(max-width:720px){.back-to-top{padding:11px 16px 11px 13px;font-size:12px;inset-inline-end:14px;}}
  @media(max-width:720px){.hero-search-wrap{width:min(92vw,620px);margin-top:16px;padding:7px 8px 7px 12px;border-radius:19px}.hero-search-input{height:45px;font-size:14px}.hero-search-submit{height:45px;min-width:76px;font-size:12px;border-radius:14px}.floating-menu.pos-left{left:12px}.floating-menu.pos-right{right:12px;top:max(78px,calc(env(safe-area-inset-top) + 60px))}.floating-menu-quick{inset-inline-end:70px}.floating-menu-toggle{width:48px;height:48px;border-radius:14px}.hero-bottom-btn{padding:10px 17px;font-size:11.5px}}
  /* The real directory/search interface waits underneath the white ending frame. */
  .topbar{margin-top:-100svh;position:relative;z-index:30;}
  .topbar,.health-strip,.tabs,.winwrap{position:relative;z-index:30;will-change:opacity,transform;transition:opacity .28s ease;}
  @media(max-width:720px){.home-scroll-track{height:190vh;min-height:calc(100vh + 620px)}.hero-nav{padding:22px 18px 16px}.hero-brand-mark{width:42px;height:42px;border-radius:14px}.hero-brand-copy strong{font-size:12px}.hero-brand-copy span{font-size:9px}.hero-sky-copy{padding-top:12vh}.hero-sky-copy h1{font-size:clamp(19px,5.4vw,26px);width:90vw}}

  /* Directory interface rises into the final white frame of the video. */
  .home-directory-reveal{opacity:0;pointer-events:none;}
  /* Cross-device performance: preserve the glass look while reducing expensive compositing on small/touch screens.
     Note: .px-layer (the building photo) keeps its will-change here — it's the element that
     scales+blurs every scroll frame, and dropping its GPU layer on touch devices was causing the
     visible scroll stutter on the home hero, so it is intentionally not reset below. */
  @media (hover:none) and (pointer:coarse){
    .hero-top-btn,.hero-bottom-btn,.hero-brand-mark,.floating-menu-toggle{backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%)}
    .hero-search-wrap{backdrop-filter:blur(16px) saturate(145%);-webkit-backdrop-filter:blur(16px) saturate(145%);box-shadow:0 12px 34px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.34)}
  }
  @media(max-width:480px){.hero-search-wrap{width:94vw}.hero-nav{padding-top:max(16px,env(safe-area-inset-top));}.hero-bottom-cluster{padding-bottom:env(safe-area-inset-bottom)}}
  @media(prefers-reduced-motion:reduce){.hero-nav,.hero-sky-copy,.hero-search-wrap{transition:none!important;}}

  /* neutral loader: no heart or medical symbol */
  .loader-line{width:56px;height:1px;background:var(--accent);display:block;animation:loaderLine 1.1s ease-in-out infinite;}
  @keyframes loaderLine{0%,100%{transform:scaleX(.35);opacity:.35}50%{transform:scaleX(1);opacity:1}}

/* =========================================================
   HOSPITAL DIRECTORY — PREMIUM iOS NAVIGATION
   Scope: navigation only.
   ========================================================= */

body.modern-admin-nav.admin-nav-active{
  --ios-nav-blur: blur(28px) saturate(180%);
  --ios-nav-radius: 30px;
  --ios-nav-transition: cubic-bezier(.22,1,.36,1);
}

body.modern-admin-nav.admin-nav-active #adminNav.admin-nav{
  position:fixed;
  z-index:9998;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb, var(--border) 68%, transparent);
  background:var(--surface);
  box-shadow:
    0 24px 60px rgba(14,55,51,.16),
    0 5px 18px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.70);
  transition:
    transform .52s var(--ios-nav-transition),
    opacity .32s ease,
    width .45s var(--ios-nav-transition),
    height .45s var(--ios-nav-transition);
}

/* ---------- shared item treatment ---------- */

.admin-nav-item{
  position:relative;
  isolation:isolate;
  border:0;
  outline:0;
  color:var(--text-muted);
  transition:
    transform .28s var(--ios-nav-transition),
    color .28s ease,
    background .28s ease;
  -webkit-tap-highlight-color:transparent;
}

.admin-nav-item::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transform:scale(.72);
  transition:
    opacity .30s ease,
    transform .42s var(--ios-nav-transition);
}

.admin-nav-item .ic-fa{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:
    transform .38s var(--ios-nav-transition),
    color .25s ease;
}

.admin-nav-item:active{
  transform:scale(.94);
}

.admin-nav-item.active{
  color:var(--accent);
}

.admin-nav-item.active .ic-fa{
  color:var(--accent);
  transform:translateY(-1px) scale(1.04);
}

.admin-nav-item.active::after{
  content:"";
  position:absolute;
  pointer-events:none;
  background:var(--accent);
  opacity:.9;
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 32%, transparent);
}

/* ---------- desktop: elegant floating rail ---------- */

@media(min-width:821px){
  body.modern-admin-nav.admin-nav-active #adminNav.admin-nav{
    inset-inline-start:18px;
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    width:84px;
    min-height:392px;
    max-height:calc(100vh - 110px);
    padding:9px 7px;
    border-radius:27px;
    flex-direction:column;
    gap:3px;
    overflow-y:auto;
    overflow-x:hidden;
  }

  body.modern-admin-nav.admin-nav-active .winwrap{
    padding-inline-start:108px;
  }

  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed .winwrap{
    padding-inline-start:68px;
  }

  .admin-nav-item{
    min-height:61px;
    padding:7px 4px;
    border-radius:19px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font:700 10.5px/1.1 "Tajawal","Cairo",sans-serif;
  }

  .admin-nav-item .ic-emoji,
  .admin-nav-collapse-btn .ic-emoji,
  .admin-nav-reopen .ic-emoji{
    display:none;
  }

  .admin-nav-item .ic-fa{
    width:34px;
    height:34px;
    border-radius:12px;
    font-size:17px;
  }

  .admin-nav-item:hover:not(.active){
    color:var(--text);
    background:var(--surface-alt);
    transform:translateY(-1px);
  }

  .admin-nav-item.active{
    color:#fff;
    background:transparent;
  }

  .admin-nav-item.active::before{
    inset:3px 1px;
    border-radius:18px;
    opacity:1;
    transform:scale(1);
    background:linear-gradient(
      145deg,
      var(--accent),
      color-mix(in srgb,var(--accent) 76%, #063f39)
    );
    box-shadow:
      0 12px 26px -10px var(--accent),
      inset 0 1px 0 rgba(255,255,255,.25);
  }

  .admin-nav-item.active .ic-fa{
    color:#fff;
    background:rgba(255,255,255,.13);
  }

  .admin-nav-item.active::after{
    width:3px;
    height:18px;
    border-radius:99px;
    inset-inline-end:0;
    top:50%;
    transform:translateY(-50%);
    background:#fff;
  }

  .admin-nav-divider{
    height:1px;
    margin:4px 10px;
    background:color-mix(in srgb,var(--border) 72%, transparent);
  }

  .admin-nav-collapse-btn{
    width:38px;
    height:30px;
    margin:1px auto 5px;
    border-radius:11px;
    background:transparent;
    border:0;
    color:var(--text-muted);
  }

  .admin-nav-collapse-btn:hover{
    background:var(--surface-alt);
    color:var(--accent);
  }

  body.admin-nav-collapsed #adminNav.admin-nav{
    width:54px;
    padding-inline:5px;
  }

  body.admin-nav-collapsed .admin-nav-item > span:not(.ic-emoji){
    display:none;
  }

  body.admin-nav-collapsed .admin-nav-item{
    min-height:51px;
  }
}

/* ---------- mobile: native-iOS-inspired floating tab bar ---------- */

@media(max-width:820px){
  body.modern-admin-nav.admin-nav-active .winwrap{
    padding-inline-start:0;
  }

  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNavBackdrop{
    background:rgba(12,31,29,.20);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    animation:iosNavBackdropIn .34s ease both;
  }

  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav.admin-nav{
    inset-inline-start:10px;
    inset-inline-end:10px;
    top:auto;
    bottom:max(9px, env(safe-area-inset-bottom));
    width:auto;
    height:79px;
    min-height:0;
    padding:7px 7px;
    border-radius:29px;
    flex-direction:row;
    align-items:stretch;
    justify-content:space-between;
    gap:2px;
    overflow:visible;
    transform:translateY(0);
    animation:iosNavBarIn .52s var(--ios-nav-transition) both;
  }

  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav.admin-nav::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:28px;
    pointer-events:none;
    background:
      linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));
  }

  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav.admin-nav::after{
    content:"";
    position:absolute;
    top:-1px;
    left:20%;
    right:20%;
    height:1px;
    border-radius:99px;
    background:rgba(255,255,255,.78);
    pointer-events:none;
  }

  .admin-nav-item{
    flex:1 1 0;
    min-width:0;
    height:63px;
    margin:0;
    padding:5px 2px 3px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font:700 9.5px/1.08 "Tajawal","Cairo",sans-serif;
    white-space:nowrap;
  }

  .admin-nav-item .ic-emoji,
  .admin-nav-collapse-btn .ic-emoji,
  .admin-nav-reopen .ic-emoji{
    display:none;
  }

  .admin-nav-item .ic-fa{
    position:relative;
    z-index:2;
    width:32px;
    height:32px;
    border-radius:11px;
    font-size:16px;
    color:var(--text-muted);
  }

  .admin-nav-item > span[data-i18n]{
    position:relative;
    z-index:2;
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Animated iOS-style active capsule */
  .admin-nav-item.active{
    color:var(--accent);
  }

  .admin-nav-item.active::before{
    top:1px;
    left:50%;
    width:54px;
    height:50px;
    border-radius:17px;
    opacity:1;
    transform:translateX(-50%) scale(1);
    background:
      linear-gradient(
        145deg,
        color-mix(in srgb,var(--accent) 94%, white 6%),
        color-mix(in srgb,var(--accent) 78%, #063f39)
      );
    box-shadow:
      0 10px 24px -10px var(--accent),
      inset 0 1px 0 rgba(255,255,255,.28);
  }

  .admin-nav-item.active .ic-fa{
    color:#fff;
    transform:translateY(-1px) scale(1.08);
  }

  .admin-nav-item.active > span[data-i18n]{
    color:var(--accent);
    font-weight:800;
  }

  /* Tiny active indicator under the label */
  .admin-nav-item.active::after{
    bottom:0;
    left:50%;
    width:4px;
    height:4px;
    border-radius:50%;
    transform:translateX(-50%);
  }

  .admin-nav-item:hover:not(.active){
    background:rgba(120,145,142,.08);
  }

  /* Collapse control: small translucent iOS button */
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed)
  #adminNav.admin-nav .admin-nav-collapse-btn{
    position:fixed !important;
    z-index:2001;
    flex:0 0 39px;
    width:54px;
    height:54px;
    align-self:auto;
    top:auto !important;
    bottom:max(18px, env(safe-area-inset-bottom)) !important;
    inset-inline-start:18px !important;
    inset-inline-end:auto !important;
    margin:0;
    padding:0;
    border-radius:50%;
    border:1px solid color-mix(in srgb,var(--border) 72%, transparent);
    background:var(--surface);
    color:var(--text-muted);
    box-shadow:
      0 3px 11px rgba(0,0,0,.06),
      inset 0 1px 0 rgba(255,255,255,.55);
    transition:
      transform .28s var(--ios-nav-transition),
      background .25s ease,
      color .25s ease;
  }

  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed)
  #adminNav.admin-nav .admin-nav-collapse-btn:active{
    transform:scale(.91);
  }

  /* Collapsed state: compact floating control */
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #adminNav.admin-nav{
    display:none;
  }

  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed .admin-nav-reopen{
    display:flex !important;
    position:fixed;
    z-index:9998;
    inset-inline-start:16px;
    inset-inline-end:auto;
    top:auto;
    bottom:max(16px, env(safe-area-inset-bottom));
    width:56px;
    height:56px;
    border-radius:19px;
    border:1px solid color-mix(in srgb,var(--border) 68%, transparent);
    background:var(--surface);
    color:var(--accent);
    box-shadow:
      0 16px 34px rgba(12,53,49,.17),
      inset 0 1px 0 rgba(255,255,255,.70);
    animation:iosFabIn .44s var(--ios-nav-transition) both;
  }

  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed
  .admin-nav-reopen:active{
    transform:scale(.90);
  }
}

/* ---------- motion ---------- */

@keyframes iosNavBarIn{
  0%{
    opacity:0;
    transform:translateY(24px) scale(.965);
  }
  65%{
    opacity:1;
    transform:translateY(-2px) scale(1.002);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes iosNavBackdropIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes iosFabIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.82);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media(prefers-reduced-motion:reduce){
  body.modern-admin-nav.admin-nav-active #adminNav.admin-nav,
  .admin-nav-item,
  .admin-nav-item::before,
  .admin-nav-item .ic-fa{
    animation:none !important;
    transition:none !important;
  }
}

/* ---------- dark mode ---------- */

html[data-theme="dark"] body.modern-admin-nav.admin-nav-active #adminNav.admin-nav{
  background:
    linear-gradient(
      180deg,
      rgba(28,39,38,.92),
      rgba(19,29,28,.88)
    );
  border-color:rgba(255,255,255,.10);
  box-shadow:
    0 26px 65px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="dark"]
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed)
#adminNav.admin-nav::before{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));
}

html[data-theme="dark"]
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed)
#adminNav.admin-nav .admin-nav-collapse-btn{
  background:var(--surface);
  border-color:rgba(255,255,255,.09);
}


/* =========================================================
   SOHAR CINEMATIC LOADER — FINAL HANDOFF
   Letters are written left-to-right, then the final pulse resolves into
   SOHAR HOSPITAL before the directory is allowed to enter.
   ========================================================= */
#appLoader .loader-word{
  position:relative;
  isolation:isolate;
  animation:soharWordHold 2.05s var(--ease-ios) both;
}
#appLoader .loader-letter{
  opacity:0;
  transform:translate3d(-10px,8px,0) scale(.94);
  filter:blur(6px);
  animation:soharLetterCinema .62s var(--ease-ios) forwards;
}
#appLoader .loader-letter:nth-child(1){animation-delay:.12s}
#appLoader .loader-letter:nth-child(2){animation-delay:.28s}
#appLoader .loader-letter:nth-child(3){animation-delay:.44s}
#appLoader .loader-letter:nth-child(4){animation-delay:.60s}
#appLoader .loader-letter:nth-child(5){animation-delay:.76s}
#appLoader .loader-word::after{
  content:"";
  position:absolute;
  inset:-20px -28px;
  border:1px solid color-mix(in srgb,var(--accent) 24%, transparent);
  border-radius:999px;
  opacity:0;
  transform:scale(.76);
  pointer-events:none;
  animation:soharFinalPulse 1.05s var(--ease-ios) 1.30s both;
}
#appLoader .loader-cursor{
  animation:soharCursorCinema .42s ease-in-out .92s 4;
}
#appLoader .loader-hospital{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.34em;
  margin-top:17px;
  font-family:"Avenir Next","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(11px,2.7vw,15px);
  line-height:1;
  font-weight:700;
  letter-spacing:.30em;
  text-indent:.30em;
  color:var(--text-muted);
  opacity:0;
  transform:translateY(9px) scale(.94);
  filter:blur(10px);
  animation:soharHospitalReveal .78s var(--ease-ios) 1.72s both;
}
#appLoader .loader-hospital span:first-child{color:var(--accent)}
#appLoader .loader-progress{
  margin-top:25px;
  opacity:0;
  animation:soharProgressIn .42s ease 1.84s forwards;
}
@keyframes soharLetterCinema{
  0%{opacity:0;transform:translate3d(-10px,8px,0) scale(.94);filter:blur(6px)}
  62%{opacity:1;transform:translate3d(1px,-1px,0) scale(1.018);filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes soharWordHold{
  0%,55%{text-shadow:0 7px 28px color-mix(in srgb,var(--accent) 18%,transparent)}
  76%{text-shadow:0 0 0 transparent}
  100%{text-shadow:0 0 0 transparent}
}
@keyframes soharFinalPulse{
  0%{opacity:0;transform:scale(.76)}
  20%{opacity:.45;transform:scale(.92)}
  46%{opacity:.16;transform:scale(1.02)}
  100%{opacity:0;transform:scale(1.20)}
}
@keyframes soharCursorCinema{
  0%,100%{opacity:.22;transform:scaleY(.72)}
  50%{opacity:1;transform:scaleY(1)}
}
@keyframes soharHospitalReveal{
  0%{opacity:0;transform:translateY(9px) scale(.94);filter:blur(10px);letter-spacing:.46em}
  52%{opacity:.9;transform:translateY(-1px) scale(1.015);filter:blur(1px);letter-spacing:.31em}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);letter-spacing:.30em}
}
#appLoader.loader-hidden{transition:opacity .72s var(--ease-ios),visibility 0s linear .72s}

/* =========================================================
   ADMIN DESTINATIONS — REAL PAGE TRANSITIONS
   Inventory / audit / users / security / profile are no longer styled
   like floating dialog cards. They occupy the application viewport like
   normal pages and return to the dashboard with a native back action.
   ========================================================= */
body.modern-admin-nav.admin-page-open{
  overflow:hidden;
}
body.modern-admin-nav.admin-page-open #adminNav,
body.modern-admin-nav.admin-page-open #adminNavReopenBtn,
body.modern-admin-nav.admin-page-open #adminNavBackdrop{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
body.modern-admin-nav.admin-page-open .modal-overlay{
  background:var(--bg) !important;
  padding:0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  inset:0 !important;
  z-index:9990;
  opacity:0;
  transform:none;
  transition:opacity .34s var(--ease-ios), visibility 0s linear .34s;
}
body.modern-admin-nav.admin-page-open .modal-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .34s var(--ease-ios), visibility 0s linear 0s;
}
body.modern-admin-nav.admin-page-open #inventoryModal .modal-card,
body.modern-admin-nav.admin-page-open #auditLogModal .modal-card,
body.modern-admin-nav.admin-page-open #adminUsersModal .modal-card,
body.modern-admin-nav.admin-page-open #securityCenterModal .modal-card,
body.modern-admin-nav.admin-page-open #myProfileModal .modal-card{
  position:relative;
  width:100% !important;
  max-width:none !important;
  height:100%;
  min-height:100%;
  margin:0;
  padding:calc(20px + env(safe-area-inset-top)) max(18px,4vw) calc(30px + env(safe-area-inset-bottom));
  border:0;
  border-radius:0 !important;
  background:var(--bg);
  box-shadow:none;
  overflow-y:auto;
  overflow-x:hidden;
  transform:translateX(18px);
  opacity:0;
  transition:transform .42s var(--ease-ios),opacity .34s ease;
}
body.modern-admin-nav.admin-page-open .modal-overlay.show .modal-card{
  transform:translateX(0);
  opacity:1;
}
body.modern-admin-nav.admin-page-open .admin-page-back{
  position:sticky;
  top:0;
  z-index:10;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px auto;
  min-height:42px;
  padding:0 15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 8px 24px rgba(12,53,49,.07),inset 0 1px 0 rgba(255,255,255,.72);
  font:700 12px/1 "Tajawal","Cairo",sans-serif;
  cursor:pointer;
  transition:transform .28s var(--ease-ios),background .2s ease,box-shadow .2s ease;
}
body.modern-admin-nav.admin-page-open .admin-page-back:hover{background:var(--surface)}
body.modern-admin-nav.admin-page-open .admin-page-back:active{transform:scale(.96)}
body.modern-admin-nav.admin-page-open .admin-page-back i{font-size:13px}

/* The dashboard remains the only page carrying the navigation bar. */
body.modern-admin-nav.admin-page-open .topbar,
body.modern-admin-nav.admin-page-open .health-strip,
body.modern-admin-nav.admin-page-open .tabs{
  opacity:0;
  pointer-events:none;
}

/* A smoother mobile bar: no restartable keyframe, no display:none jump.
   It glides with one spring-like transform and keeps the browser's compositor
   doing the animation instead of recalculating layout. */
@media(max-width:820px){
  body.modern-admin-nav.admin-nav-active #adminNav.admin-nav{
    animation:none !important;
    will-change:transform,opacity;
    transition:transform .46s var(--ios-nav-transition),opacity .28s ease,visibility 0s linear 0s;
  }
  body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed):not(.admin-page-open) #adminNav.admin-nav{
    visibility:visible;
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #adminNav.admin-nav{
    display:flex !important;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translate3d(0,14px,0) scale(.975);
  }
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed .admin-nav-reopen{
    animation:none !important;
    opacity:1;
    visibility:visible;
    transform:translate3d(0,0,0) scale(1);
    transition:transform .42s var(--ios-nav-transition),opacity .24s ease;
  }
  body.modern-admin-nav.admin-page-open.admin-nav-collapsed .admin-nav-reopen,
  body.modern-admin-nav.admin-page-open .admin-nav-reopen{opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,12px,0) scale(.96)}
  body.modern-admin-nav.admin-page-open #inventoryModal .modal-card,
  body.modern-admin-nav.admin-page-open #auditLogModal .modal-card,
  body.modern-admin-nav.admin-page-open #adminUsersModal .modal-card,
  body.modern-admin-nav.admin-page-open #securityCenterModal .modal-card,
  body.modern-admin-nav.admin-page-open #myProfileModal .modal-card,
  body.modern-admin-nav.admin-page-open #documentsModal .modal-card{
    padding-top:max(14px,env(safe-area-inset-top));
  }
  body.modern-admin-nav.admin-page-open .admin-page-back{
    margin-top:4px;
    min-height:44px;
    border-radius:15px;
  }
}

@media(min-width:821px){
  body.modern-admin-nav.admin-page-open .modal-card{
    padding-inline-start:max(32px,5vw);
    padding-inline-end:max(32px,5vw);
  }
}

@media(prefers-reduced-motion:reduce){
  #appLoader .loader-letter,#appLoader .loader-word,#appLoader .loader-word::after,#appLoader .loader-cursor,#appLoader .loader-hospital,#appLoader .loader-progress,
  body.modern-admin-nav.admin-page-open .modal-overlay,
  body.modern-admin-nav.admin-page-open .modal-card,
  body.modern-admin-nav.admin-page-open .admin-page-back,
  body.modern-admin-nav.admin-page-open #adminNav{animation:none!important;transition:none!important}
}
html.reduce-motion #appLoader .loader-letter,#appLoader .loader-word,#appLoader .loader-word::after,#appLoader .loader-cursor,#appLoader .loader-hospital,#appLoader .loader-progress{animation:none!important}
html.reduce-motion #appLoader .loader-letter{opacity:1;transform:none;filter:none}
html.reduce-motion #appLoader .loader-hospital{opacity:1;transform:none;filter:none}

/* =========================================================
   POLISH PASS — mobile/desktop clipping + premium account/OTP UI
   ========================================================= */

/* Never allow long LTR values/placeholders to force a grid or page wider
   than the viewport. This is especially important in Arabic RTL layouts. */
.user-form-grid,
.user-form-grid > *,
.email-verify-inline,
.email-verify-code-row,
.modal-card,
.modal-head,
.modal-head h3,
.login-hero-card,
.reset-step,
.reset-steps{min-width:0;max-width:100%;box-sizing:border-box}

.user-form-grid input,
.user-form-grid select,
.user-form-grid button,
#userUsername,
#userDisplayName,
#userEmail,
#userPassword,
#userRole,
#userDepartment,
#profileEmail,
#profileDisplayName,
#profileCurrentPassword,
#resetUsername,
#resetNewPassword,
#resetNewPassword2,
#alertEmailInput{
  width:100%;min-width:0;max-width:100%;box-sizing:border-box;
}

/* LTR username/email fields: keep the text visually correct without
   letting a long value/placeholder push the field outside its container. */
/* Inputs must remain fully usable: never ellipsize typed usernames, passwords,
   or email addresses. Native inputs can scroll their LTR value horizontally. */
#userUsername,#userEmail,#loginUsername,#loginPassword,
#profileEmail,#profileCurrentPassword,#resetUsername,
#resetNewPassword,#resetNewPassword2,#alertEmailInput{
  overflow-x:auto;
  overflow-y:hidden;
  text-overflow:clip;
  white-space:nowrap;
}

/* Desktop RTL: the navigation rail is physically on the LEFT. Reserve
   space on the LEFT as well. The old inline-start rule reserved the wrong
   side in RTL, which made the first/left portion of the page appear clipped. */
@media(min-width:821px){
  body.modern-admin-nav.admin-nav-active .winwrap{
    padding-inline-start:0 !important;
    padding-inline-end:0 !important;
    padding-left:108px !important;
  }
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed .winwrap{
    padding-left:68px !important;
  }

  body.modern-admin-nav.admin-nav-active #adminNav.admin-nav{
    left:18px !important;
    right:auto !important;
  }

  body.modern-admin-nav.admin-nav-active #inventoryModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active #auditLogModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active #adminUsersModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active #securityCenterModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active #myProfileModal.modal-overlay{
    left:126px !important;
    right:18px !important;
    inset-inline-start:auto !important;
    inset-inline-end:auto !important;
  }
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #inventoryModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #auditLogModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #adminUsersModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #securityCenterModal.modal-overlay,
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed #myProfileModal.modal-overlay{
    left:76px !important;right:18px !important;
  }
}

/* Premium account/user form: closer to Instagram/Apple settings surfaces. */
.admin-users-card{
  overflow-x:hidden !important;
  overscroll-behavior:contain;
}
.admin-users-card .modal-head{
  padding-bottom:12px;
  border-bottom:1px solid var(--border-soft);
}
.admin-users-card h4{
  margin:18px 0 10px;
  font-size:14px;
  font-weight:800;
  color:var(--text);
}
.user-form-grid{
  gap:10px;
  align-items:start;
}
.user-form-grid input,
.user-form-grid select{
  min-height:44px;
  padding:11px 13px;
  border-radius:13px;
  border:1px solid color-mix(in srgb,var(--border) 90%,transparent);
  background:var(--surface-alt);
  transition:border-color .22s var(--ease-ios),box-shadow .22s var(--ease-ios),background .22s ease,transform .22s var(--ease-ios);
}
.user-form-grid input:hover,
.user-form-grid select:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));}
.user-form-grid input:focus,
.user-form-grid select:focus{
  transform:translateY(-1px);
  background:var(--surface);
}

/* Email verification is now a visible, self-contained security card rather
   than a tiny inline link that can disappear on narrow screens. */
.email-verify-inline{
  display:block;
  grid-column:1/-1;
  margin-top:-2px;
  padding:11px 12px;
  border:1px solid var(--border-soft);
  border-radius:15px;
  background:linear-gradient(180deg,var(--surface-alt),color-mix(in srgb,var(--surface-alt) 72%,transparent));
}
.email-verify-inline:has(.email-verify-code-row[style*="display: flex"]),
.email-verify-inline:has(.email-verify-msg.ok){
  border-color:color-mix(in srgb,var(--accent) 22%,var(--border));
}
.email-verify-badge{
  margin:0 7px 0 0;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  white-space:normal;
}
.email-verify-send-btn{
  min-height:30px;
  padding:5px 8px;
  border-radius:9px;
  transition:background .2s ease,transform .22s var(--ease-ios);
}
.email-verify-send-btn:hover{background:var(--accent-soft)}
.email-verify-send-btn:active{transform:scale(.96)}
.email-verify-code-row{
  display:flex;
  width:100%;
  gap:12px;
  margin-top:9px;
  align-items:center;
  flex-wrap:wrap;
}
/* Same 6-box design as the password-reset OTP row, scaled down to sit
   inline in a form next to a "تأكيد" button instead of centered alone
   in a modal. */
.otp-input-row-mini{
  max-width:none;
  width:auto;
  gap:6px;
  margin:0;
}
.otp-input-row-mini .otp-digit{
  width:38px;
  max-width:38px;
  aspect-ratio:5/6;
  font-size:16px;
  border-radius:9px;
}
.email-verify-code-row .btn{min-height:44px;border-radius:12px;padding-inline:16px;}
.email-verify-msg{line-height:1.55;word-break:break-word;}

/* Forgot-password OTP: make the destination and six-digit control clearly
   visible on every iPhone width, including 320–375px screens. */
#forgotPasswordModal .modal-card{
  width:min(420px,calc(100vw - 24px));
  max-width:420px !important;
  padding:24px 22px 22px;
  border-radius:24px;
  overflow:hidden;
}
#forgotPasswordModal.show{z-index:1200;}
.reset-head{margin-bottom:22px;justify-content:flex-start;gap:14px;}
.reset-head #forgotPwTitle{flex:1;min-width:0;font-size:22px;font-weight:800;letter-spacing:-.01em;white-space:normal;}
.reset-back-arrow{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:var(--surface-alt);
  color:var(--text);
  cursor:pointer;
  transition:background .15s var(--ease-ios), transform .15s var(--ease-ios);
}
/* Mirror the arrow for RTL — it should still point "back" toward the
   reading direction's start, i.e. visually to the right in Arabic. */
html[dir="rtl"] .reset-back-arrow svg{transform:scaleX(-1);}
.reset-back-arrow:hover{background:var(--surface-hover,var(--border-soft));}
.reset-back-arrow:active{transform:scale(.92);}
#forgotPasswordModal .otp-destination{
  flex-wrap:wrap;
  width:100%;
  padding:9px 12px;
  margin:0 0 15px;
  border:1px solid var(--border-soft);
  border-radius:13px;
  background:var(--surface-alt);
}
#forgotPasswordModal .otp-destination b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#forgotPasswordModal .otp-input-row{
  width:100%;
  max-width:330px;
  gap:7px;
}
#forgotPasswordModal .otp-digit{
  min-width:0;
  width:100%;
  max-width:none;
  height:52px;
  aspect-ratio:auto;
  border-radius:13px;
  font-size:21px;
}
#forgotPasswordModal .reset-step p{color:var(--text-muted);font-size:14.5px;line-height:1.6;}
#forgotPasswordModal .reset-divider{margin:18px 0;opacity:.7;}
#forgotPasswordModal .btn.primary{min-height:50px;font-size:15.5px;border-radius:14px;}
#forgotPasswordModal input[type="text"],
#forgotPasswordModal input[type="password"]{min-height:50px;border-radius:13px;font-size:16px;}

@media(max-width:420px){
  #forgotPasswordModal .modal-card{padding:19px 15px 17px;border-radius:22px;}
  #forgotPasswordModal .otp-input-row{gap:5px;max-width:100%;}
  #forgotPasswordModal .otp-digit{height:48px;font-size:19px;border-radius:11px;}
  .email-verify-inline{padding:10px;}
  .email-verify-code-row .btn{padding-inline:12px;}
}

/* Full-screen on phones — this specific flow (account recovery) is
   commonly presented as its own dedicated screen in mobile apps rather
   than a floating card over other content; matches that shape while
   every other modal in this app stays exactly as it was. */
@media(max-width:560px){
  #forgotPasswordModal{padding:0 !important;align-items:stretch;}
  #forgotPasswordModal .modal-card{
    width:100%;
    max-width:none !important;
    height:100% !important;
    max-height:none !important;
    margin:0 !important;
    border-radius:0;
    padding:max(22px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom)) !important;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow-y:auto;
  }
  .reset-head{margin-bottom:28px;}
  .reset-head #forgotPwTitle{font-size:24px;}
}

/* Mobile real-page surfaces: remove accidental horizontal overflow from
   nested cards and keep the content edge aligned like a native app page. */
@media(max-width:820px){
  body.modern-admin-nav.admin-page-open .modal-card{
    width:100% !important;
    max-width:100% !important;
    padding-left:max(15px,4vw) !important;
    padding-right:max(15px,4vw) !important;
    overflow-x:hidden !important;
  }
  body.modern-admin-nav.admin-page-open .modal-card > *{max-width:100%;}
  .inventory-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inventory-search-row{min-width:0;}
  .inventory-search-row .admin-search-input{min-width:0;width:100%;}
}

/* Smooth, restrained native-app press feedback instead of abrupt scaling. */
.btn,.option-btn,.chip,.modal-close,.admin-nav-item,.icon-btn{
  -webkit-tap-highlight-color:transparent;
}
.btn:active,.option-btn:active,.modal-close:active,.icon-btn:active{transform:scale(.97);}



/* =========================================================
   PREMIUM AUTH INPUTS — iPhone / Instagram-like polish
   ========================================================= */
.login-hero-card{
  overflow:hidden;
}
.login-hero-card input[type="text"],
.login-hero-card input[type="password"],
.login-hero-card input[type="email"],
#resetUsername,
#resetNewPassword,
#resetNewPassword2,
#profileEmail,
#profileCurrentPassword,
#userUsername,
#userEmail,
#userPassword,
#alertEmailInput{
  display:block;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:48px;
  min-height:48px;
  box-sizing:border-box !important;
  padding:0 14px !important;
  border:1px solid color-mix(in srgb,var(--border) 92%,transparent) !important;
  border-radius:14px !important;
  background:var(--surface-alt) !important;
  color:var(--text) !important;
  font-size:16px;
  line-height:48px;
  font-family:inherit;
  outline:none;
  transition:border-color .22s var(--ease-ios),box-shadow .22s var(--ease-ios),background .22s ease,transform .22s var(--ease-ios);
}
.login-hero-card input:hover,
#resetUsername:hover,#resetNewPassword:hover,#resetNewPassword2:hover,
#profileEmail:hover,#profileCurrentPassword:hover,
#userUsername:hover,#userEmail:hover,#userPassword:hover,#alertEmailInput:hover{
  border-color:color-mix(in srgb,var(--accent) 32%,var(--border)) !important;
}
.login-hero-card input:focus,
#resetUsername:focus,#resetNewPassword:focus,#resetNewPassword2:focus,
#profileEmail:focus,#profileCurrentPassword:focus,
#userUsername:focus,#userEmail:focus,#userPassword:focus,#alertEmailInput:focus{
  border-color:var(--accent) !important;
  background:var(--surface) !important;
  box-shadow:0 0 0 4px var(--accent-soft) !important;
  transform:translateY(-1px);
}

/* Passwords should never show an artificial ellipsis. */
input[type="password"]{
  text-overflow:clip !important;
}

/* Keep LTR values stable inside RTL UI. */
#loginUsername,#loginPassword,#resetUsername,#resetNewPassword,#resetNewPassword2,
#profileEmail,#profileCurrentPassword,#userUsername,#userEmail,#userPassword,#alertEmailInput{
  direction:ltr;
  unicode-bidi:plaintext;
  text-align:left;
}

@media(max-width:520px){
  .login-hero-card{
    width:100%;
    max-width:100%;
    padding:24px 17px 20px !important;
    border-radius:22px;
  }
  .login-hero{padding:30px 10px !important;}
  .login-hero-card input[type="text"],
  .login-hero-card input[type="password"],
  .login-hero-card input[type="email"]{height:49px;min-height:49px;}
}

/* OTP destination is deliberately a display-only masked address, never the
   real email. */
#forgotPasswordModal .otp-destination b{
  letter-spacing:.15px;
  font-variant-numeric:normal;
  direction:ltr;
  unicode-bidi:isolate;
}

/* =========================================================
   ADMIN NAVIGATION — FULL-SCREEN MENU (VIDEO STYLE)
   The admin navigation intentionally mirrors the supplied reference:
   a small floating hamburger in the top corner; tapping it opens a
   clean full-screen menu with vertically stacked destinations; tapping
   X closes it. Destinations themselves remain real full-screen pages.
   ========================================================= */
/* Scoped to narrow/mobile widths only — see CLAUDE-HANDOFF-NOTES.md
   entry #27. Desktop (≥821px) uses the compact rail from the
   "PREMIUM iOS NAVIGATION" section above instead; this block used to be
   unscoped and silently fought that rail for the nav's own width and
   its items' styling, which is what produced a half-sidebar/half-full-
   screen hybrid that matched neither design. */
@media(max-width:820px){
body.modern-admin-nav.admin-nav-active.admin-nav-menu-open{
  overflow:hidden;
}

/* The hamburger is the only navigation control visible while the menu is closed. */
body.modern-admin-nav.admin-nav-active.admin-nav-collapsed .admin-nav-reopen{
  display:flex !important;
  position:fixed;
  z-index:10001;
  inset-inline-start:18px;
  inset-inline-end:auto;
  top:auto;
  bottom:max(18px, env(safe-area-inset-bottom));
  width:54px;
  height:54px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--border) 80%, transparent);
  background:var(--surface);
  color:var(--text);
  box-shadow:0 10px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.75);
}
body.modern-admin-nav.admin-nav-active.admin-nav-collapsed .admin-nav-reopen .ic-fa{
  font-size:19px;
}
body.modern-admin-nav.admin-nav-active.admin-nav-collapsed .admin-nav-reopen .ic-emoji{
  display:none;
}

/* Full-screen menu. */
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav.admin-nav{
  position:fixed;
  z-index:10000;
  inset:0;
  width:auto;
  height:auto;
  min-height:100dvh;
  max-height:none;
  margin:0;
  padding:
    calc(92px + env(safe-area-inset-top))
    24px
    calc(40px + env(safe-area-inset-bottom));
  box-sizing:border-box;
  border:0;
  border-radius:0;
  background:var(--surface);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  overflow-y:auto;
  overflow-x:hidden;
  animation:adminVideoMenuIn .42s cubic-bezier(.22,1,.36,1) both;
}

/* No dim layer: the reference menu simply becomes the page. */
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNavBackdrop{
  display:none !important;
}

/* Close button in the same bottom-corner position as the reopen hamburger. */
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-collapse-btn{
  position:fixed !important;
  z-index:2;
  inset-inline-start:18px !important;
  inset-inline-end:auto !important;
  top:auto !important;
  bottom:max(18px, env(safe-area-inset-bottom)) !important;
  width:54px;
  height:54px;
  margin:0;
  padding:0;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--border) 80%, transparent);
  background:var(--surface);
  color:var(--text);
  box-shadow:0 10px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.75);
  font-size:0;
}
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-collapse-btn .ic-fa{
  display:inline-flex;
  font-size:19px;
}
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-collapse-btn .ic-fa::before{
  content:"\f00d";
}
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-collapse-btn .ic-emoji{
  display:none;
}

/* The video uses clean text links rather than icon tiles. */
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-item{
  flex:none;
  width:min(86vw, 360px);
  min-height:0;
  height:auto;
  margin:0;
  padding:9px 12px;
  border-radius:14px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:0;
  color:var(--text);
  background:transparent;
  box-shadow:none;
  font:800 clamp(21px, 5.6vw, 30px)/1.18 "Tajawal","Cairo",sans-serif;
  text-align:center;
  white-space:normal;
  transition:transform .24s cubic-bezier(.22,1,.36,1), color .2s ease, opacity .2s ease;
}
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-item .ic-fa,
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-item .ic-emoji{
  display:none !important;
}
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-item:hover:not(.active){
  background:transparent;
  color:var(--accent);
  transform:translateY(-1px);
}
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-item:active{
  transform:scale(.96);
}
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-item.active,
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-item.active:hover{
  color:var(--accent);
  background:transparent;
  box-shadow:none;
}
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-item.active::before,
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav .admin-nav-item.active::after{
  display:none;
}
} /* /@media(max-width:820px) — full-screen video-style menu */

/* Keep the admin page itself full width behind the menu on phones/tablets. */
@media(max-width:820px){
  body.modern-admin-nav.admin-nav-active .winwrap,
  body.modern-admin-nav.admin-nav-active.admin-nav-collapsed .winwrap{
    padding-inline-start:0 !important;
  }
}

@keyframes adminVideoMenuIn{
  from{opacity:0;transform:scale(.985)}
  to{opacity:1;transform:scale(1)}
}


/* =========================================================
   FORGOT PASSWORD — short-viewport safety net + real input fix
   #forgotPasswordModal .modal-card is already sized above (max 400px,
   fits every phone width). This adds only what that block doesn't:
   room to scroll on a *short* viewport (landscape, or a keyboard
   covering half the screen), and a fix for the three real text inputs
   below sitting at a sub-16px font. Under 16px, iOS Safari zooms the
   whole page in the moment the field is focused — the layout itself
   was fine, the browser was just zoomed past its edges, which is what
   made these look like they "don't show completely". The OTP boxes
   were never part of this: they're already 18–20px.
   Presentation-only; the reset/OTP JavaScript and backend are untouched.
   ========================================================= */
#forgotPasswordModal{
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow:auto;
}
#forgotPasswordModal .modal-card{
  max-height:calc(100dvh - 28px);
  overflow-y:auto;
  overflow-x:hidden;
  margin:auto;
}
#forgotPasswordModal #resetUsername,
#forgotPasswordModal #resetNewPassword,
#forgotPasswordModal #resetNewPassword2{
  height:46px !important;
  min-height:46px !important;
  padding:0 14px !important;
  border-radius:13px !important;
  font-size:16px !important;
  line-height:normal !important;
}

/* =========================================================
   SOHAR LOADING — CINEMATIC FINAL TREATMENT
   ========================================================= */
#appLoader .loader-sohar{gap:0;}
#appLoader .loader-word{
  font-size:clamp(48px, 12vw, 76px);
  font-weight:700;
  letter-spacing:.24em;
  text-indent:.24em;
}
#appLoader .loader-hospital{
  margin-top:14px;
  font-size:clamp(10px, 2.6vw, 14px);
  font-weight:600;
  letter-spacing:.38em;
  text-indent:.38em;
  text-transform:uppercase;
}
#appLoader .loader-progress{width:112px;height:2px;margin-top:27px;}

/* ================================================================
   SOHAR / SUHAR — 2026 visual refinement, additive / backwards-safe
   Retains the existing classic palette, admin layout, API and settings.
   ================================================================ */
html[data-palette="modern"]:not([data-theme="dark"]){
  --bg:#f3f7f7;
  --bg2:#eaf2f1;
  --surface:#fff;
  --surface-alt:#f7faf9;
  --border:#dfe9e6;
  --border-soft:#eaf1ef;
  --text:#173530;
  --text-muted:#6b817d;
  --shadow:0 18px 46px rgba(15,57,51,.085),0 3px 14px rgba(15,57,51,.035);
}
html[data-palette="modern"][data-theme="dark"]{
  --bg:#101e24;
  --bg2:#13272d;
  --surface:#192c32;
  --surface-alt:#20373d;
  --border:#304850;
  --border-soft:#294148;
  --text:#edf7f4;
  --text-muted:#a1bcb7;
  --shadow:0 18px 48px rgba(0,0,0,.25);
}
html{scroll-padding-top:20px;}
body{overflow-x:clip;}
html[data-palette="modern"] body{
  background-image:radial-gradient(ellipse at 20% 48%,rgba(72,157,131,.045),transparent 42%),radial-gradient(ellipse at 90% 88%,rgba(70,139,163,.055),transparent 35%);
}
html[data-palette="modern"] .topbar{
  max-width:1180px;
  padding:11px 18px;
  border:1px solid var(--border);
  border-radius:19px;
  background:var(--surface);
  box-shadow:0 8px 28px rgba(12,69,61,.045);
}
html[data-palette="modern"] .health-strip,
html[data-palette="modern"] .tabs,
html[data-palette="modern"] .winwrap{max-width:1180px;}
html[data-palette="modern"] .health-strip{border-radius:15px;border-inline-start-width:3px;}
html[data-palette="modern"] .tabs{gap:10px;}
html[data-palette="modern"] .tabs button{
  border-radius:13px;
  padding:12px 24px;
  box-shadow:0 5px 16px rgba(15,57,51,.045);
}
html[data-palette="modern"] .tabs button.active{
  box-shadow:0 7px 22px color-mix(in srgb,var(--accent) 25%,transparent);
}
html[data-palette="modern"] .window{
  border-radius:24px;
  box-shadow:var(--shadow);
}
html[data-palette="modern"] .app-pad{padding:clamp(17px,3vw,34px);}
html[data-palette="modern"] .main-header h1,
html[data-palette="modern"] .login-hero-card h1{letter-spacing:-.02em;}
html[data-palette="modern"] .searchbox{
  border-radius:15px;
  background:var(--surface-alt);
  border-color:var(--border);
  min-height:50px;
}
html[data-palette="modern"] .dep-list{
  border-radius:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
html[data-palette="modern"] .dep-item{
  min-height:68px;
  padding:15px 16px;
  transition:background .18s ease,box-shadow .18s ease;
}
html[data-palette="modern"] .dep-item:hover{background:var(--surface-alt);}
html[data-palette="modern"] .dep-item.selected{
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent);
}
html[data-palette="modern"] .dep-item.selected::before{top:13px;bottom:13px;width:4px;}
html[data-palette="modern"] .detail-panel,
html[data-palette="modern"] .stat-card,
html[data-palette="modern"] .inventory-add-box,
html[data-palette="modern"] .login-hero-card,
html[data-palette="modern"] .modal-card{
  border-radius:18px;
}
html[data-palette="modern"] .btn,
html[data-palette="modern"] .chip,
html[data-palette="modern"] .export-btn{
  border-radius:12px;
}
html[data-palette="modern"] .btn.primary{
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 17%,transparent);
}
html[data-palette="modern"] .btn.primary:hover{
  box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 24%,transparent);
}
html[data-palette="modern"] .icon-btn{
  width:41px;height:41px;border-radius:13px;box-shadow:none;
}
html[data-palette="modern"] .lang-switch{border-radius:13px;box-shadow:none;}
html[data-palette="modern"] .lang-switch button{border-radius:10px;}
html[data-palette="modern"] .floating-menu-toggle,
html[data-palette="modern"] .floating-menu-quick-btn{
  box-shadow:0 12px 34px rgba(10,32,37,.15);
}
html[data-palette="modern"] .status-bar{padding-top:18px;margin-top:20px;}

/* True perspective on an art-directed cutout, rather than photo zoom only.
   This is a photographic 2.5D scene, not an independently modelled building. */
.home-scroll-track{
  height:220svh;
  min-height:calc(100svh + 750px);
}
.home-hero{background:#143445;}
.px-stage-wrap{perspective:1350px;-webkit-perspective:1350px;perspective-origin:50% 63%;}
.px-scene{overflow:visible;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:auto;}
.px-scene-bg{
  transform:translate3d(0,0,0) scale(1.13);
  transform-origin:50% 50%;
  will-change:transform;
}
.hospital-3d-rig{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  transform-origin:50% 93%;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transform:rotateY(0deg);
  will-change:transform;
}
.hospital-depth{
  position:absolute;inset:0;
  background-image:url('../building-mobile.webp');
  background-size:100% 100%;background-repeat:no-repeat;
  transform-origin:50% 93%;
  pointer-events:none;
  filter:brightness(.1) saturate(.2);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.hospital-depth-back{
  transform:translate3d(2.5%,.2%,-78px);
  opacity:.10;
}
.hospital-depth-mid{
  transform:translate3d(1.1%,0,-38px);
  opacity:.14;
}
@media(min-width:768px){
  .hospital-depth{background-image:url('../building-tablet.webp');}
}
@media(min-width:1280px){
  .hospital-depth{background-image:url('../building-desktop.webp');}
}
.px-building-shadow{
  position:absolute;inset:0;z-index:3;
  transform:translateZ(24px);
  filter:drop-shadow(0 22px 28px rgba(5,30,42,.25));
}
.px-building{
  transform:none !important;
  filter:none !important;
  will-change:auto;
}
.hospital-3d-rig::after{
  content:"";position:absolute;z-index:1;
  bottom:0;left:8%;width:84%;height:7%;
  border-radius:50%;background:rgba(4,21,26,.35);
  filter:blur(26px);
  transform:translateZ(-105px) rotateX(78deg);
}
.home-hero-vignette{
  background:linear-gradient(to bottom,rgba(4,24,34,.4),transparent 27%),
    radial-gradient(ellipse 75% 90% at 50% 48%,transparent 39%,rgba(7,27,35,.3) 100%),
    linear-gradient(to top,rgba(3,22,33,.42),transparent 24%);
}
.home-hero-glow{background:radial-gradient(ellipse 45% 40% at 50% 65%,rgba(150,219,218,.38),transparent 78%);}
.hero-nav{padding-top:max(24px,env(safe-area-inset-top));}
.hero-brand{gap:13px;}
.hero-brand-mark{
  width:53px;height:53px;border-radius:16px;
  border:1px solid rgba(255,255,255,.39);
  background:rgba(255,255,255,.18);
}
.hero-brand-copy strong{font-size:16px;}
.hero-brand-copy span{font-size:11px;}
.hero-sky-copy{padding-top:clamp(115px,15vh,170px);}
.hero-eyebrow{
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:15px;padding:8px 18px;
  font:700 11px/1.4 "Tajawal","Cairo",sans-serif;
  color:#ecfff9;letter-spacing:.13em;
  background:rgba(2,43,60,.27);
  border:1px solid rgba(255,255,255,.25);
  border-radius:100px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero-sky-copy h1{
  width:min(780px,91vw);
  font-size:clamp(31px,4.6vw,63px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.025em;
  text-shadow:0 6px 30px rgba(0,25,31,.42);
}
.hero-intro{
  margin:12px 0 0;
  color:#fff;
  font:500 clamp(13px,1.35vw,18px)/1.5 "Tajawal","Cairo",sans-serif;
  text-shadow:0 3px 16px rgba(0,20,32,.55);
}
.hero-search-wrap{
  width:min(680px,90vw);
  margin-top:24px;
  padding:7px 8px 7px 14px;
  background:rgba(11,38,47,.48);
  border:1px solid rgba(255,255,255,.56);
  border-radius:20px;
  box-shadow:0 20px 48px rgba(0,28,39,.26),inset 0 1px rgba(255,255,255,.15);
}
.hero-search-input{font-size:16px;min-width:0;}
.hero-search-submit{
  background:#f5fdfb;color:#145f50;text-shadow:none;
  border:1px solid rgba(255,255,255,.75);
  border-radius:14px;
  font-size:15px;
}
.hero-search-submit:hover{background:#e1faf1;color:#0e5145;}
.hero-scroll-hint{
  position:absolute;bottom:clamp(100px,14vh,150px);
  left:50%;transform:translateX(-50%);
  z-index:7;pointer-events:none;
  display:flex;align-items:center;gap:13px;
  color:rgba(255,255,255,.96);
  text-shadow:0 2px 12px rgba(0,24,35,.5);
  white-space:nowrap;
  font:600 11px/1.2 "Tajawal","Cairo",sans-serif;
  letter-spacing:.045em;
}
.hero-scroll-hint-line{display:block;width:38px;height:1px;background:rgba(255,255,255,.75);}
.hero-scroll-down{background:rgba(3,36,49,.4);}

/* Make touch input reliable on iPhone — no focus zoom, large targets,
   no hover-only controls and no accidentally trapped focused controls. */
@media(max-width:720px){
  .home-scroll-track{height:210svh;min-height:calc(100svh + 540px);}
  .px-stage-wrap{perspective:1000px;-webkit-perspective:1000px;}
  .hero-sky-copy{padding-top:clamp(100px,13vh,130px);}
  .hero-sky-copy h1{font-size:clamp(29px,6.7vw,40px);line-height:1.22;}
  .hero-intro{max-width:84vw;font-size:13px;line-height:1.5;}
  .hero-eyebrow{font-size:10px;margin-bottom:12px;padding:7px 12px;}
  .hero-search-wrap{width:93vw;min-height:57px;margin-top:20px;border-radius:17px;}
  .hero-search-input{height:45px;min-height:45px;font-size:16px;}
  .hero-search-submit{min-width:78px;height:43px;font-size:13px;border-radius:12px;}
  .hero-scroll-hint{bottom:clamp(98px,16vh,150px);font-size:10px;}
  .hero-brand-mark{width:44px;height:44px;}
  .hero-brand-copy strong{font-size:13px;}
  .hero-brand-copy span{font-size:10px;}
  .hospital-depth-back{opacity:.13;}
  html[data-palette="modern"] .topbar{margin:0 10px 13px;padding:9px 12px;border-radius:15px;}
  html[data-palette="modern"] .app-pad{padding:18px 14px;}
  html[data-palette="modern"] .window{border-radius:18px;}
  html[data-palette="modern"] .tabs button{padding:11px 16px;}
  input,select,textarea{font-size:max(16px,1em);}
}
@media(max-width:380px){
  .hero-intro{max-width:92vw;}
  .hero-scroll-hint{display:none;}
  .hero-search-wrap{gap:5px;}
  .hero-search-icon{font-size:16px;}
}
:where(button,a,input,select,textarea,[tabindex="0"]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.hero-nav :focus-visible,.hero-sky-copy :focus-visible,.hero-bottom-cluster :focus-visible{
  outline-color:#fff;
}
@media(prefers-reduced-motion:reduce){
  .hospital-3d-rig,.px-scene-bg{will-change:auto;transition:none!important;}
  .hero-scroll-down{animation:none!important;}
}
html.reduce-motion .hospital-3d-rig,
html.reduce-motion .px-scene-bg{will-change:auto;transition:none!important;}
/* Keep the sky behind the entire rotating facade: flatten scene-level stacking
   rather than allowing half the facade to pass behind the sky plane. */
.px-scene{transform-style:flat;-webkit-transform-style:flat;perspective:1350px;-webkit-perspective:1350px;perspective-origin:50% 63%;}
.px-scene-bg{z-index:0;}
.hospital-3d-rig{z-index:3;}
@media(max-width:720px){.px-scene{perspective:1000px;-webkit-perspective:1000px;}}

/* A static architectural environment fills the edges outside the rotated
   foreground. A soft side matte keeps the orbital movement seamless. */
.hospital-environment-plate{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hospital-environment-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;}
.hospital-3d-rig{
  -webkit-mask-image:linear-gradient(to right,transparent,black 9%,black 91%,transparent);
  mask-image:linear-gradient(to right,transparent,black 9%,black 91%,transparent);
}

/* ======================================================================
   SUHAR LIQUID GLASS / October 2026
   Appearance-only enhancement: no event handlers, forms, routes or API
   contracts changed. The solid color declaration remains as the fallback.
   ====================================================================== */
:root{
  --lg-ink:var(--text);
  --lg-stroke:rgba(255,255,255,.88);
  --lg-layer:linear-gradient(155deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.69) 29%,rgba(237,248,247,.64) 65%,rgba(230,244,243,.76) 100%);
  --lg-shine:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0) 65%);
  --lg-depth:0 9px 21px rgba(19,67,63,.11),0 2px 5px rgba(22,70,64,.05),inset 0 1px 1px rgba(255,255,255,1),inset 0 -1px 1px rgba(12,73,64,.06);
  --lg-depth-hover:0 14px 30px rgba(18,67,65,.17),0 3px 8px rgba(18,67,65,.08),inset 0 1px 1px rgba(255,255,255,1),inset 0 -1px rgba(21,84,78,.07);
  --lg-icon-color:var(--accent);
  --lg-tint:color-mix(in srgb,var(--accent) 9%,transparent);
}
html[data-theme="dark"]{
  --lg-stroke:rgba(255,255,255,.22);
  --lg-layer:linear-gradient(155deg,rgba(80,111,123,.55) 0%,rgba(41,63,77,.7) 35%,rgba(28,47,60,.78) 100%);
  --lg-shine:linear-gradient(180deg,rgba(255,255,255,.14),transparent 70%);
  --lg-depth:0 12px 26px rgba(0,0,0,.27),0 2px 6px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.03);
  --lg-depth-hover:0 16px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.24);
  --lg-tint:color-mix(in srgb,var(--accent) 13%,transparent);
}

/* Consistent refractive surfaces with visible borders and text contrast. */
.btn:not(.btn-success),.icon-btn,.export-btn,.chip,.option-btn,
.tabs button,.lang-switch,.win-menu-btn,.clear-search-btn,
.copy-btn,.call-btn,.inv-icon-btn,.modal-close,
.floating-menu-toggle,.floating-menu-quick-btn,
.admin-nav-reopen,.admin-nav-collapse-btn,
body.modern-admin-nav.admin-page-open .admin-page-back{
  border:1px solid var(--lg-stroke);
  background:var(--surface);
  background:var(--lg-layer);
  color:var(--lg-ink);
  box-shadow:var(--lg-depth);
  -webkit-backdrop-filter:blur(14px) saturate(155%);
  backdrop-filter:blur(14px) saturate(155%);
  transition-property:transform,background,box-shadow,border-color,color,opacity;
  transition-duration:.24s;
  transition-timing-function:var(--ease-ios);
  -webkit-tap-highlight-color:transparent;
}
.btn:not(.btn-success),.icon-btn,.export-btn,.chip,.option-btn,
.tabs button,.win-menu-btn,.clear-search-btn,.copy-btn,.call-btn,
.inv-icon-btn,.modal-close,.floating-menu-toggle,.floating-menu-quick-btn,
.admin-nav-reopen,.admin-nav-collapse-btn,
body.modern-admin-nav.admin-page-open .admin-page-back{
  position:relative;
  isolation:isolate;
}
/* Faceted upper-edge light. No overlays covering text, clicks or focus. */
.btn:not(.btn-success)::after,.icon-btn::after,.export-btn::after,
.chip::after,.option-btn::after,.tabs button::after,
.floating-menu-toggle::after,.floating-menu-quick-btn::after,
.hero-top-btn::after,.hero-bottom-btn::after,.hero-search-submit::after,
.floating-menu-tile::after,.admin-nav-reopen::after{
  content:"";
  position:absolute;inset:1px 2px auto 2px;height:45%;border-radius:inherit;
  background:var(--lg-shine);
  opacity:.65;
  pointer-events:none;
  z-index:0;
}
.btn:not(.btn-success):hover:not(:disabled),.icon-btn:hover,
.export-btn:hover:not(:disabled),.chip:hover,.option-btn:hover,
.tabs button:hover,.win-menu-btn:hover,.copy-btn:hover,.call-btn:hover,
.inv-icon-btn:hover,.modal-close:hover,.floating-menu-toggle:hover,
.floating-menu-quick-btn:hover,.admin-nav-reopen:hover,
body.modern-admin-nav.admin-page-open .admin-page-back:hover{
  border-color:color-mix(in srgb,var(--accent) 28%,var(--lg-stroke));
  box-shadow:var(--lg-depth-hover);
  transform:translateY(-2px);
}
.btn:active:not(:disabled),.icon-btn:active,.export-btn:active:not(:disabled),
.chip:active,.option-btn:active,.tabs button:active,
.floating-menu-toggle:active,.floating-menu-quick-btn:active,
.inv-icon-btn:active,.admin-nav-reopen:active{
  transform:translateY(0) scale(.965);
  box-shadow:0 3px 10px rgba(14,62,57,.11),inset 0 1px 3px rgba(0,0,0,.04);
}
.btn:disabled,.export-btn:disabled,.icon-btn:disabled{opacity:.52;box-shadow:none;cursor:not-allowed;}

/* Primary and selected controls remain clearly differentiated.
   Keep white text over the deep-green tint in light appearance. */
.btn.primary:not(.btn-success),html[data-palette="modern"] .btn.primary:not(.btn-success),
.tabs button.active,.chip.active,.option-btn[aria-pressed="true"],
.lang-switch button.active{
  color:#fff;
  background:var(--accent);
  background:linear-gradient(148deg,color-mix(in srgb,var(--accent) 79%,#fff 21%),var(--accent) 58%,color-mix(in srgb,var(--accent) 78%,#002e35 22%));
  border-color:color-mix(in srgb,var(--accent) 64%,#fff 36%);
  box-shadow:0 11px 22px color-mix(in srgb,var(--accent) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.49),inset 0 -2px 0 rgba(0,0,0,.08);
  text-shadow:0 1px 2px rgba(0,0,0,.08);
}
.btn.primary:not(.btn-success):hover:not(:disabled),
html[data-palette="modern"] .btn.primary:not(.btn-success):hover:not(:disabled),
.tabs button.active:hover,.chip.active:hover,.option-btn[aria-pressed="true"]:hover{
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 75%,#fff 25%),var(--accent));
  box-shadow:0 15px 30px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 1px 1px rgba(255,255,255,.55);
  color:#fff;
}
html[data-theme="dark"] .btn.primary:not(.btn-success),
html[data-theme="dark"] .tabs button.active,
html[data-theme="dark"] .chip.active,
html[data-theme="dark"] .option-btn[aria-pressed="true"],
html[data-theme="dark"] .lang-switch button.active{
  color:#092b27;
  text-shadow:none;
  border-color:rgba(255,255,255,.25);
}
html[data-theme="dark"] .btn.primary:not(.btn-success):hover,
html[data-theme="dark"] .tabs button.active:hover,
html[data-theme="dark"] .chip.active:hover{color:#092b27;}
.btn.danger:not(.btn-success){
  background:linear-gradient(155deg,color-mix(in srgb,var(--danger) 10%,var(--surface)),color-mix(in srgb,var(--danger) 5%,var(--surface-alt)));
  color:var(--danger);border-color:color-mix(in srgb,var(--danger) 22%,var(--lg-stroke));
}
.btn.danger:not(.btn-success):hover:not(:disabled){
  background:linear-gradient(145deg,color-mix(in srgb,var(--danger) 85%,#fff 15%),var(--danger));
  color:#fff;border-color:color-mix(in srgb,var(--danger) 70%,#fff 30%);
}

/* Sculpted glyph containers, rather than plain glyphs on flat squares. */
.icon-btn,.export-btn,.inv-icon-btn,.copy-btn,.call-btn{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;border-radius:15px;
  color:var(--lg-icon-color);
  text-shadow:0 1px 0 rgba(255,255,255,.24);
}
.icon-btn{width:44px;height:44px;font-size:17px;}
.export-btn{width:40px;height:40px;font-size:16px;}
.inv-icon-btn{width:40px;height:40px;font-size:16px;}
.copy-btn,.call-btn{min-width:39px;min-height:39px;opacity:1;font-size:15px;}
.call-btn{color:var(--ok);}
.modal-close{width:36px;height:36px;font-size:16px;border-radius:13px;}
.win-menu-btn{padding:9px 10px;border-radius:12px;}
.clear-search-btn{width:30px;height:30px;border-radius:10px;}
.clear-search-btn:hover,.modal-close:hover{color:var(--danger);}
.ic-fa,.fmt-ic i{filter:drop-shadow(0 1px 1px rgba(19,68,58,.12));}
.dep-icon,.about-feature-ic,.reset-success-icon,.health-strip-ic{
  border:1px solid var(--lg-stroke);
  background:var(--lg-layer);
  color:var(--accent);
  box-shadow:0 6px 13px rgba(9,75,73,.08),inset 0 1px rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.dep-icon{width:43px;height:43px;border-radius:14px;}
.health-strip-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;}
.about-feature-ic{border-radius:14px;}

/* Pill controls and status switches. */
.btn{border-radius:14px;padding:10px 17px;min-height:41px;}
.chip{border-radius:999px;min-height:38px;padding:7px 14px;}
.option-btn{border-radius:14px;min-height:38px;}
.tabs button,html[data-palette="modern"] .tabs button{border-radius:16px;padding:12px 22px;}
.lang-switch{border-radius:16px;padding:4px;gap:3px;}
.lang-switch button{border-radius:12px;min-height:34px;padding:6px 13px;}
.lang-switch button:not(.active):hover{background:var(--lg-tint);color:var(--accent);}

/* Floating controls on photo are dark optical glass to retain contrast. */
.hero-top-btn,.hero-bottom-btn,.hero-scroll-down,.hero-search-submit{
  position:relative;isolation:isolate;
  border:1px solid rgba(255,255,255,.56);
  background:linear-gradient(145deg,rgba(255,255,255,.27),rgba(255,255,255,.09) 39%,rgba(2,30,38,.34));
  -webkit-backdrop-filter:blur(19px) saturate(165%);
  backdrop-filter:blur(19px) saturate(165%);
  box-shadow:0 12px 25px rgba(0,25,38,.22),inset 0 1px 1px rgba(255,255,255,.56),inset 0 -1px rgba(255,255,255,.10);
  color:#fff;text-shadow:0 1px 7px rgba(0,22,27,.4);
}
.hero-top-btn:hover,.hero-bottom-btn:hover,.hero-scroll-down:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.13) 45%,rgba(4,39,46,.32));
  box-shadow:0 17px 32px rgba(0,22,33,.28),inset 0 1px 1px rgba(255,255,255,.65);
  border-color:rgba(255,255,255,.76);
}
.hero-search-wrap{
  border-color:rgba(255,255,255,.65);
  background:linear-gradient(140deg,rgba(255,255,255,.20),rgba(255,255,255,.06) 55%),rgba(5,38,48,.52);
  box-shadow:0 22px 48px rgba(0,22,33,.28),inset 0 1px 1px rgba(255,255,255,.40);
}
.hero-search-icon{
  min-width:37px;height:37px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:13px;border:1px solid rgba(255,255,255,.23);
  background:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.hero-search-submit{
  min-width:105px;background:linear-gradient(150deg,#ffffff,#e9fcf7 48%,#ccefe6);
  color:#0a5549;text-shadow:none;font-size:14px;
}
.hero-search-submit:hover{
  background:linear-gradient(150deg,#fff,#d9f9ee);color:#07483e;
}
.hero-scroll-down{border-radius:50%;}

/* Global menu behaves like frosted ceramic glass in both light/dark modes. */
.floating-menu-toggle,.floating-menu-quick-btn,
html[data-palette="modern"] .floating-menu-toggle,
html[data-palette="modern"] .floating-menu-quick-btn{
  background:var(--lg-layer);color:var(--text);
  border-color:var(--lg-stroke);box-shadow:var(--lg-depth);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-radius:18px;
}
.floating-menu-toggle span{background:var(--accent);height:2.5px;}
.floating-menu-toggle:hover,.floating-menu-quick-btn:hover,
html[data-theme="dark"] .floating-menu-toggle:hover,
html[data-theme="dark"] .floating-menu-quick-btn:hover{
  background:var(--lg-layer);box-shadow:var(--lg-depth-hover);
}
.floating-menu-sheet{
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.035));
  border-color:rgba(255,255,255,.31);
  box-shadow:inset 0 1px rgba(255,255,255,.3),0 25px 65px rgba(0,0,0,.22);
}
.floating-menu-tile{
  border-radius:21px;
  background:linear-gradient(160deg,rgba(255,255,255,.20),rgba(255,255,255,.045));
  border-color:rgba(255,255,255,.31);
  box-shadow:inset 0 1px rgba(255,255,255,.18),0 9px 24px rgba(0,0,0,.1);
  -webkit-backdrop-filter:blur(14px) saturate(155%);backdrop-filter:blur(14px) saturate(155%);
}
.floating-menu-tile:hover,.floating-menu-tile:focus-visible{
  background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.10));
  border-color:rgba(255,255,255,.58);
}
.floating-menu-tile .fmt-ic{
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:16px;font-size:21px;
  border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(150deg,rgba(255,255,255,.28),rgba(255,255,255,.065));
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 8px 18px rgba(0,0,0,.09);
}
.floating-menu-tile.wide .fmt-ic{width:42px;height:42px;}
.floating-menu-close{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.32);}

/* Navigation icon capsules, without changing dashboard layout. */
.admin-nav-reopen,body.modern-admin-nav.admin-nav-active.admin-nav-collapsed .admin-nav-reopen,
body.modern-admin-nav.admin-nav-active:not(.admin-nav-collapsed) #adminNav.admin-nav .admin-nav-collapse-btn{
  background:var(--lg-layer);color:var(--accent);border-color:var(--lg-stroke);
  box-shadow:var(--lg-depth);-webkit-backdrop-filter:blur(16px) saturate(165%);backdrop-filter:blur(16px) saturate(165%);
}
@media(max-width:820px){
  .admin-nav-item .ic-fa{
    border:1px solid var(--lg-stroke);
    background:var(--lg-layer);
    box-shadow:0 4px 10px rgba(10,64,55,.1),inset 0 1px rgba(255,255,255,.5);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
  .admin-nav-item.active .ic-fa{background:transparent;border-color:transparent;box-shadow:none;}
}
/* Respect local/OS accessibility choices and prevent heavy blur on low power. */
@media(prefers-reduced-transparency:reduce){
  .btn,.icon-btn,.export-btn,.chip,.option-btn,.tabs button,.lang-switch,
  .floating-menu-toggle,.floating-menu-quick-btn{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
@media(prefers-reduced-motion:reduce){
  .btn,.icon-btn,.export-btn,.chip,.option-btn,.tabs button,
  .floating-menu-toggle,.floating-menu-quick-btn,.floating-menu-tile{
    transition:none!important;animation:none!important;
  }
}
html.reduce-motion .btn,html.reduce-motion .floating-menu-toggle,
html.reduce-motion .floating-menu-tile{transition:none!important;animation:none!important;}
@media(max-width:720px){
  .btn{min-height:44px;}
  .icon-btn{min-width:44px;min-height:44px;}
  .export-btn,.inv-icon-btn{width:44px;height:44px;}
  .floating-menu-toggle{border-radius:16px;}
  .floating-menu-quick-btn{border-radius:16px;}
  .hero-search-icon{min-width:32px;height:32px;border-radius:11px;}
  .hero-search-submit{min-width:76px;}
  /* Lower blur cost for mobile browsers while retaining the glass edge. */
  .btn,.icon-btn,.export-btn,.chip,.option-btn,
  .floating-menu-toggle,.floating-menu-quick-btn{
    -webkit-backdrop-filter:blur(9px) saturate(140%);backdrop-filter:blur(9px) saturate(140%);
  }
}

/* Compact action glyphs (favorite and call/copy) and the return pill. */
.fav-star{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;min-width:40px;padding:0;
  border:1px solid var(--lg-stroke);border-radius:13px;
  background:var(--lg-layer);color:var(--accent);
  box-shadow:var(--lg-depth);opacity:.72;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.fav-star.active{opacity:1;color:#b68422;background:linear-gradient(150deg,rgba(255,248,217,.9),rgba(251,225,170,.42));border-color:rgba(220,175,89,.5);}
.fav-star:hover{opacity:1;box-shadow:var(--lg-depth-hover);transform:translateY(-2px) scale(1.03);}
.back-to-top,.back-to-top:hover{
  border:1px solid var(--lg-stroke);background:var(--lg-layer);
  color:var(--text);box-shadow:var(--lg-depth);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
}
.back-to-top.show:hover{transform:translateY(-3px);box-shadow:var(--lg-depth-hover);}
.back-to-top svg{color:var(--accent);}
.scanner-torch-btn{
  border:1px solid rgba(255,255,255,.40);
  background:linear-gradient(145deg,rgba(255,255,255,.23),rgba(9,24,32,.62));
  box-shadow:0 9px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
/* Search clear is centered by translateY; avoid resetting that positioning on hover. */
.clear-search-btn:hover{transform:translateY(-50%) scale(1.04);}

/* ============================================================
   Quality + usability pass | Oct 2026
   Additive overrides: preserve both modern Liquid Glass and classic theme.
   ============================================================ */
:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
html{scroll-padding-top:18px;}
body{overflow-wrap:break-word;}
button,input,textarea,select{font-family:inherit;}
button{touch-action:manipulation;}
:where(.dep-item,.detail-panel,.main-header,.search-wrap,.search-meta){min-width:0;}
:where(.search-meta,.filter-chips,.detail-name,.num-actions){min-width:0;}
/* Preserve deliberate text direction for phone numbers and copy/call actions. */
.detail-panel .num,.row-label[dir="ltr"]{direction:ltr;unicode-bidi:isolate;}
.dep-item-body{line-height:1.55;}
.dep-item-body>span:first-child{overflow-wrap:anywhere;}
.detail-name{line-height:1.4;overflow-wrap:anywhere;}
.detail-name>span:first-child{min-width:0;}
.ux-detail-actions{display:inline-flex;gap:7px;align-items:center;flex-shrink:0;}
.ux-share-btn{
  width:40px;height:40px;min-width:40px;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:15px;color:var(--accent);
  border:1px solid var(--lg-stroke,var(--border));border-radius:13px;
  background:var(--lg-layer,var(--surface-alt));
  box-shadow:var(--lg-depth,0 5px 14px rgba(0,0,0,.05));
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.ux-share-btn:hover{transform:translateY(-2px);box-shadow:var(--lg-depth-hover,0 8px 20px rgba(0,0,0,.1));}
.ux-share-btn:active{transform:scale(.97);}
.ux-empty-state{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;line-height:1.8;}
.ux-reset-filter{max-width:100%;min-height:42px;white-space:normal;}
#chipRecent{display:inline-flex;align-items:center;gap:7px;justify-content:center;}
#chipRecent.active{box-shadow:0 0 0 1px rgba(12,92,76,.13),0 5px 15px rgba(12,92,76,.09);}
#chipRecent .ic-fa,#chipRecent .ic-emoji{font-size:13px;}
#depList .fav-star{opacity:1;min-width:42px;width:42px;height:42px;flex-shrink:0;}
#depList .fav-star[aria-pressed="true"]{border-color:rgba(190,146,61,.5);}
#depList .dep-item:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;}
#depList .fav-star:focus-visible,.ux-share-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
/* Glass backgrounds need contrast even when backdrop-filter is disabled. */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  html[data-palette="modern"] .ux-share-btn{background:var(--surface);}
}
/* Labels and secondary metadata: do not drop below readable sizes. */
.search-meta .results-count,.status-bar,.status-bar span,.detail-meta,.row-label,
.floating-menu-quick-btn,.cat-pill{line-height:1.55;}
.status-bar{flex-wrap:wrap;gap:7px 12px;}
:where(.modal-card,.window,.dep-list,.detail-panel) :where(input,textarea,select){max-width:100%;}
:where(.modal-card,.window) input:not([type="checkbox"]):not([type="radio"]),
:where(.modal-card,.window) select,:where(.modal-card,.window) textarea{min-height:40px;}
@media(max-width:720px){
  .filter-chips{flex-wrap:wrap;}
  #chipRecent{min-height:43px;}
  .detail-name{font-size:clamp(17px,5vw,23px);gap:12px;}
  .ux-share-btn,.ux-detail-actions .fav-star{min-width:44px;width:44px;height:44px;}
  .dep-item{scroll-margin-top:18px;}
  .detail-panel{scroll-margin-top:14px;}
  /* Forms do not trigger automatic iOS Safari zoom on input focus. */
  input,select,textarea,.searchbox{font-size:16px!important;}
  .modal-card{max-height:calc(100dvh - 30px);overflow-y:auto;overscroll-behavior:contain;}
}
@media(max-width:390px){
  .search-meta{align-items:stretch;}
  .filter-chips{flex:1 1 auto;}
  .filter-chips .chip{min-height:43px;padding-inline:12px;}
  .detail-name{align-items:flex-start!important;}
  .ux-detail-actions{gap:5px;}
  .ux-share-btn,.ux-detail-actions .fav-star{min-width:40px;width:40px;height:40px;}
}
@media(prefers-reduced-motion:reduce){
  .ux-share-btn{transition:none!important;}
}
/* English has separate system typography, without extra CDN downloads. */
html[lang="en"] body{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;letter-spacing:0;}
html[lang="en"] :where(h1,h2,h3,.heading-font,.hero-sky-copy h1){font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;letter-spacing:-.015em;}
html[lang="en"] .hero-sky-copy h1{line-height:1.3;}
/* Preserve readability if users request more contrast. */
@media(prefers-contrast:more){
  .ux-share-btn,#depList .fav-star,.chip,.btn,.export-btn{border-width:2px;}
  .detail-meta,.status-bar,.search-meta{color:var(--text);}
}


/* ================================================================
   Suhar Hospital — institutional government-inspired design layer
   2026-10-08. Based on readability/consistency principles, NOT a claim
   of official MOH or GOV.OM design-system certification.
   Keep the existing Liquid Glass interactions, admin layout, themes,
   custom font choices, palette presets and building parallax untouched.
   ================================================================ */
:root {
  --gov-font: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --gov-ink: #153c36;
  --gov-line: #dce7e2;
  --gov-radius: 17px;
}
html[data-font="government"] body,
html[data-font="default"] body,
html:not([data-font]) body {
  font-family: var(--gov-font);
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
}
html[data-font="government"] :where(h1,h2,h3,h4,.heading-font,.brand strong,.detail-name,.hero-sky-copy h1,.hero-brand-copy strong),
html[data-font="default"] :where(h1,h2,h3,h4,.heading-font,.brand strong,.detail-name,.hero-sky-copy h1) {
  font-family: var(--gov-font);
  letter-spacing: 0;
  line-height: 1.48;
}
html[data-font="government"] :where(button,input,select,textarea,.number-row .num,.hero-search-input),
html[data-font="default"] :where(button,input,select,textarea,.number-row .num,.hero-search-input) { font-family: var(--gov-font); }
html[lang="en"] body, html[lang="en"] :where(h1,h2,h3,h4,.heading-font,.hero-sky-copy h1){
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* Restrained white/green institutional palette and consistent hierarchy. */
html[data-palette="modern"][data-theme="light"] {
  --bg: #f3f7f6;
  --bg2: #eaf2ef;
  --surface: #fff;
  --surface-alt: #f7faf9;
  --border: #dce6e1;
  --border-soft: #e9efed;
  --text: #1a3833;
  --text-muted: #55716a;
  --shadow: 0 12px 32px rgba(12, 53, 42, .075);
}
html[data-palette="modern"][data-theme="dark"] {
  --bg: #12231f;
  --bg2: #172e28;
  --surface: #20342e;
  --surface-alt: #253d36;
  --border: #416058;
  --border-soft: #365149;
  --text: #f0f7f3;
  --text-muted: #bfd2c9;
  --shadow: 0 14px 36px rgba(0,0,0,.22);
}
html[data-palette="modern"] :where(.window,.modal-card,.dep-list,.detail-panel){
  border-color: var(--border);
  box-shadow: var(--shadow);
}
html[data-palette="modern"] :where(.window,.modal-card){
  border-radius: clamp(14px, 1.8vw, 22px);
}
html[data-palette="modern"] .main-header h1 {
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 750;
  color: var(--text);
  margin-bottom: 7px;
}
html[data-palette="modern"] .header-stats{font-size: 12px;color:var(--text-muted);}
html[data-palette="modern"] .searchbox,
html[data-palette="modern"] :where(.admin-search-input,.admin-filter-select) {
  border-radius: 13px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}
html[data-palette="modern"] .searchbox { min-height: 52px; }
html[data-palette="modern"] .searchbox::placeholder { color: var(--text-muted); opacity:.92; }
html[data-palette="modern"] :where(.chip,.btn,.export-btn,.option-btn,.number-row,.dep-icon) {border-radius: 12px;}
html[data-palette="modern"] :where(.btn,.chip,.option-btn) { font-weight: 650; }
html[data-palette="modern"] :where(.btn.primary,.chip.active) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 5px 13px rgba(12,92,76,.14);
}
html[data-palette="modern"] :where(.dep-list,.detail-panel) { border-radius: var(--gov-radius); }
html[data-palette="modern"] .dep-item{min-height:68px;}
html[data-palette="modern"] .dep-item.selected{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);}
html[data-palette="modern"] .detail-panel { padding: clamp(17px,2.2vw,27px); }
html[data-palette="modern"] .detail-name {font-size:clamp(20px,2vw,25px);font-weight:750;}
html[data-palette="modern"] .detail-meta {font-size:13.5px;line-height:1.95;}
html[data-palette="modern"] .number-row {padding:12px 14px;border:1px solid var(--border-soft);}
html[data-palette="modern"] .number-row.primary {border-color:color-mix(in srgb,var(--accent) 56%, var(--border));}
html[data-palette="modern"] .number-row .num{font-variant-numeric:tabular-nums;letter-spacing:0;}
html[data-palette="modern"] :where(.export-btn,.copy-btn,.fav-star,.ux-share-btn,.floating-menu-toggle,.floating-menu-close,.call-btn){min-height:42px;min-width:42px;}
html[data-palette="modern"] :where(.export-btn,.copy-btn,.fav-star,.ux-share-btn,.floating-menu-toggle,.floating-menu-close,.call-btn):hover {filter:brightness(1.04);}
html[data-palette="modern"] :where(button,input,select,textarea,[role="button"],a):focus-visible{
  outline:3px solid var(--accent) !important;
  outline-offset:3px;
}
html[data-palette="modern"] :where(.btn,.chip,.option-btn,.admin-nav-item):active {transform:scale(.98);}
/* Clean government-style staff sign-in: clear labels, password visibility,
   keyboard caps-lock warning. All authentication still runs server-side. */
.gov-password-wrap {position:relative;width:100%;}
.gov-password-wrap #loginPassword{padding-inline-end:52px;}
.gov-password-toggle {
  position:absolute;
  inset-inline-end:6px;top:50%;transform:translateY(-50%);
  display:flex;justify-content:center;align-items:center;
  height:40px;width:40px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-alt);
  color:var(--text);
  cursor:pointer;
}
.gov-caps-hint {font-size:12px;margin:7px 0;color:var(--warning);font-weight:650;}
.gov-caps-hint[hidden]{display:none;}
html[data-palette="modern"] .login-hero-card {border-radius:20px;}
html[data-palette="modern"] .login-hero-card .field-label{font-weight:650;}
html[data-palette="modern"] .login-hero-card input{font-size:16px;}
@media (max-width:650px) {
  html[data-palette="modern"] .dep-item {min-height:60px;}
  html[data-palette="modern"] .detail-panel{padding:17px;}
  html[data-palette="modern"] :where(.export-btn,.fav-star,.ux-share-btn){min-height:44px;min-width:44px;}
  html[data-palette="modern"] .number-row{gap:10px;}
}
@media(prefers-reduced-motion: reduce){
  html[data-palette="modern"] :where(.btn,.chip,.option-btn,.dep-item){transition:none!important;animation:none!important;}
}

.gov-session-hint{display:block;font-size:11.5px;line-height:1.65;margin-block:7px;color:var(--text-muted);}
/* Mobile: keep the global floating control clear of each window's menu. */
@media(max-width:650px){
  .floating-menu.pos-left:not(.pos-custom){top:max(78px,calc(env(safe-area-inset-top) + 64px));}
}
/* Passwords are entered left-to-right; keep the reveal icon on the right. */
.gov-password-wrap #loginPassword{padding-right:54px;padding-left:12px;}
.gov-password-toggle{right:6px;left:auto;}