:root{
    /* Paper */
    --bg:#f0f4f5;
    --card:#FFFFFF;
    --border:#d9dce3;
    --border-soft:#e6e8ee;

    /* Ink */
    --ink:#212b32;
    --text:#212b32;
    --text-dim:#4c6272;

    /* Brand — navy (authority, primary surfaces) */
    --navy:#003087;
    --navy-deep:#00205b;
    --navy-mid:#005eb8;
    --header-bg:#005eb8;
    --header-bg-mid:#005eb8;

    /* Brand — teal (go / positive action) */
    --teal:#005eb8;
    --teal-soft:#0072ce;
    --teal-pale:#e1eefa;
    --teal-deep:#003087;

    /* Brand — honey (the bee accent; used sparingly, as a motif) */
    --rule:#41b6e6;
    --honey:#f5b400;
    --honey-pale:#fdf1b8;
    --honey-deep:#8a5f00;

    /* Status */
    --amber:#B8860A;
    --amber-pale:#FBF2DD;
    --red:#c0392b;
    --red-pale:#FBE7E5;
    --purple:#6A3FB5;
    --purple-pale:#EEE6FB;
    --slate:#6B7C8A;
    --slate-pale:#EEF1F2;

    --radius:10px;
    --radius-sm:6px;
    --shadow-card:0 1px 2px rgba(26,39,68,.05);
    --shadow-pop:0 20px 48px rgba(10,39,64,.16);
  }
  *{box-sizing:border-box;}
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:'Segoe UI', system-ui, Arial, sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
  }
  a{ color:inherit; }
  h1,h2,h3{ color:var(--navy); }
  :focus-visible{ outline:2px solid var(--teal-soft); outline-offset:2px; border-radius:4px; }

  /* ---------- HEADER ---------- */
  header.topbar{
    background:var(--header-bg);
    color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 22px; flex-wrap:wrap; gap:10px;
    border-bottom:3px solid var(--rule);
    position:relative; z-index:5;
  }
  header.topbar .brand{ display:flex; align-items:center; gap:12px; }
  header.topbar .brand .mark{
    width:100px;height:100px; display:flex;align-items:center;justify-content:center;
    margin:-14px 0;
  }
  header.topbar .brand .mark img{ width:100%; height:100%; object-fit:contain; }
  header.topbar .brand .name{ font-weight:700; letter-spacing:.2px; font-size:16.5px; }
  header.topbar .brand .sub{ font-size:10px; color:#c9cedd; text-transform:uppercase; letter-spacing:1.6px; margin-top:3px; font-weight:600; }
  header.topbar .who{ display:flex; align-items:center; gap:14px; font-size:13px; color:#dfe2ec; }
  header.topbar button.logout{
    background:transparent; border:1px solid #566; color:#fff;
    padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12.5px; font-weight:600;
    transition:background .12s ease, border-color .12s ease;
  }
  header.topbar button.logout:hover{ background:var(--teal); border-color:var(--teal); }

  main{ max-width:1240px; margin:0 auto; padding:22px 22px 64px; }
  body[data-page="insights.html"] main{ max-width:1440px; }

  /* ---------- PAGE NAV (the "← Home / Build new requisition / ..." row) ----------
     Deliberately its own thing, not a repurposed underline-tab-row — a
     horizontal shelf of pill buttons needs its own spacing/border logic,
     not a border-bottom line sitting awkwardly under floating pills. */
  .tabs{
    display:flex; gap:6px; margin:0 auto; padding:16px 22px 0; max-width:1240px;
    flex-wrap:wrap;
  }

  .card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:22px; margin-bottom:16px; box-shadow:var(--shadow-card);
  }
  .card h2{
    margin:0 0 14px; font-size:19px; font-weight:700; color:var(--navy);
    line-height:1.3;
  }

  .home-tile{
    flex:1; min-width:168px; background:var(--card); border:1px solid var(--border); border-top:4px solid var(--teal); border-radius:10px;
    padding:26px 18px; text-align:center; cursor:pointer; font-family:inherit; text-decoration:none;
    display:block; box-shadow:var(--shadow-card);
    transition:transform .12s, box-shadow .12s;
  }
  .home-tile:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
  .home-tile .icon{ font-size:34px; line-height:1; }
  .home-tile .label{ font-weight:700; color:var(--navy); margin-top:10px; font-size:14px; letter-spacing:.1px; }

  label{ display:block; font-size:13px; color:var(--navy); margin:10px 0 4px; font-weight:600; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select{
    width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:6px;
    font-size:14px; background:#fff; color:var(--text); font-family:inherit;
    transition:border-color .12s ease, box-shadow .12s ease;
  }
  input:focus, select:focus{ outline:none; border-color:var(--teal-soft); box-shadow:0 0 0 3px var(--teal-pale); }
  .row{ display:flex; gap:14px; flex-wrap:wrap; }
  .row > div{ flex:1; min-width:180px; }

  /* ---------- BUTTONS ---------- */
  button.btn, a.btn{
    background:var(--navy); color:#fff; border:none; padding:9px 16px;
    border-radius:6px; font-size:13.5px; cursor:pointer; font-weight:600;
    display:inline-block; text-decoration:none; line-height:1.4; box-sizing:border-box;
    letter-spacing:.1px;
    transition:background .12s ease, transform .05s ease;
  }
  button.btn:hover, a.btn:hover{ background:var(--navy-mid); }
  button.btn:active, a.btn:active{ transform:translateY(1px); box-shadow:none; }
  button.btn.magenta, a.btn.magenta{ background:var(--teal); }
  button.btn.magenta:hover, a.btn.magenta:hover{ background:var(--teal-soft); }
  button.btn.ghost, a.btn.ghost{ background:#fff; color:var(--navy); border:1px solid var(--border); box-shadow:none; }
  button.btn.ghost:hover, a.btn.ghost:hover{ background:#fff; border-color:var(--navy); }
  button.btn.danger, a.btn.danger{ background:var(--red); color:#fff; border:none; box-shadow:none; }
  button.btn.danger:hover, a.btn.danger:hover{ background:var(--red); opacity:.9; }
  button.btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
  button.btn.small, a.btn.small{ padding:6px 12px; font-size:12.5px; }

  table{ width:100%; border-collapse:collapse; font-size:13.5px; }
  th{ text-align:left; color:var(--navy); font-weight:700; font-size:12.5px; background:#f7f8fb;
      padding:9px 10px; border-bottom:1px solid var(--border); }
  td{ padding:9px 10px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
  tr:last-child td{ border-bottom:none; }
  tbody tr:hover td{ background:rgba(14,124,134,.04); }

  .badge{ display:inline-block; padding:3px 12px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:.02em; }
  .badge.pending{ background:var(--amber-pale); color:var(--amber); }
  .badge.complete{ background:var(--teal-pale); color:var(--teal-deep); }
  .badge.out_of_stock{ background:var(--red-pale); color:var(--red); }
  .badge.suspended{ background:var(--slate-pale); color:var(--slate); }
  .badge.active{ background:var(--teal-pale); color:var(--teal-deep); }
  .badge.part_supplied{ background:var(--purple-pale); color:var(--purple); }
  .badge.duplicate{ background:var(--slate-pale); color:var(--slate); }
  .badge.non_urgent{ background:#E4EEF5; color:#3E6E93; }
  .badge.pending_approval{ background:var(--honey-pale); color:var(--honey-deep); }
  .badge.superseded{ background:var(--slate-pale); color:var(--slate); }
  .badge.rejected{ background:var(--red-pale); color:var(--red); }

  /* ---------- STATUS INDICATORS (signature element) ----------
     Hexagon = normal status, tying the one interaction this whole
     product is built around back to the honeycomb the name itself
     comes from. Triangle = a stock problem (out of stock / part
     supplied) — a genuinely different shape so those two can never be
     confused with an ordinary status at a glance, not just a different
     colour. Circle = turnaround timing (due today / next-day), a third
     shape again so it's never visually confusable with a status dot
     even where a colour might otherwise feel close. */
  .status-dot{
    display:inline-block; width:13px; height:13px; cursor:help; flex-shrink:0;
    clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  }
  .status-dot.shape-triangle{
    clip-path:polygon(50% 2%, 100% 98%, 0% 98%);
  }
  .status-dot.shape-circle{
    clip-path:none; border-radius:50%;
  }
  .attribution{ font-size:10.5px; color:var(--text-dim); margin-top:3px; }

  .muted{ color:var(--text-dim); font-size:13px; }
  .empty{ padding:34px 20px; text-align:center; color:var(--text-dim); font-size:13.5px; }
  .empty::before{ content:""; display:block; width:84px; height:68px; margin:0 auto 12px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='30' y='8' width='60' height='78' rx='6' fill='%23e0f2f4' stroke='%230e7c86' stroke-width='2'/%3E%3Crect x='46' y='3' width='28' height='12' rx='4' fill='white' stroke='%230e7c86' stroke-width='2'/%3E%3Cpath d='M42 38h36M42 52h36M42 66h20' stroke='%230e7c86' stroke-width='2' stroke-dasharray='2 6'/%3E%3Ccircle cx='88' cy='74' r='14' fill='white' stroke='%23c4247a' stroke-width='2'/%3E%3Cpath d='M82 74l4.5 4.5L95 69' stroke='%23c4247a' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat; }

  /* ---------- LOGIN ---------- */
  #login-screen{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(560px 420px at 15% 8%, rgba(30,138,115,.08), transparent),
      radial-gradient(620px 460px at 85% 92%, rgba(201,137,26,.07), transparent),
      linear-gradient(160deg, #EEF2F1 0%, #E3EEEC 100%);
    padding:20px;
  }
  .login-card{
    background:#fff; border-radius:14px; padding:36px 32px; width:100%; max-width:380px;
    box-shadow:0 20px 50px rgba(26,39,68,.14); border:1px solid rgba(26,39,68,.08); border-top:4px solid var(--teal); text-align:center;
  }
  .login-card .mark{
    width:88px;height:88px;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 12px;
  }
  .login-card .mark img{ width:100%; height:100%; object-fit:contain; }
  .login-card h1{ font-size:22px; margin:0 0 4px; color:var(--navy); letter-spacing:.2px; font-weight:800; }
  .login-card .tag{ font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1.6px; margin-bottom:28px; font-weight:600; }
  .login-card label{ margin-top:16px; text-align:left; }
  .login-card label:first-of-type{ margin-top:0; }
  .login-card input{ padding:12px 13px; font-size:15px; }
  .login-error{ color:var(--red); font-size:12.5px; margin-top:10px; min-height:16px; font-weight:600; }
  .login-card button{ width:100%; margin-top:22px; padding:13px; font-size:14.5px; }

  .searchbox{ position:relative; }
  .searchbox .results{
    position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--border);
    border-radius:10px; margin-top:6px; max-height:220px; overflow-y:auto; z-index:20;
    box-shadow:var(--shadow-pop);
  }
  .searchbox .results div{ padding:10px 14px; cursor:pointer; font-size:13.5px; }
  .searchbox .results div:hover{ background:var(--teal-pale); }
  .searchbox .results .none{ color:var(--text-dim); cursor:default; }
  .searchbox .results div:hover.none{ background:none; }

  .selected-pill{
    display:inline-flex; align-items:center; gap:9px; background:var(--teal-pale);
    border:1px solid var(--border-soft); padding:8px 15px; border-radius:20px; font-size:13.5px; margin-top:10px;
  }
  .selected-pill b{ color:var(--navy); }
  .selected-pill button{ background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; }

  .qty-stepper{ display:flex; align-items:center; gap:9px; margin-top:10px; }
  .qty-stepper button{
    width:30px;height:30px; border-radius:50%; border:1px solid var(--border); background:#fff;
    font-size:16px; cursor:pointer; color:var(--navy); font-weight:700;
    transition:background .1s ease, border-color .1s ease;
  }
  .qty-stepper button:hover{ background:var(--teal-pale); border-color:var(--teal-soft); }
  .qty-stepper span{ min-width:26px; text-align:center; font-weight:700; }

  .toast{
    position:fixed; bottom:22px; right:22px; background:var(--navy-deep); color:#fff;
    padding:11px 20px; border-radius:6px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-pop);
    z-index:100; animation:toast-in .18s ease;
  }
  .toast.err{ background:var(--red); }
  @keyframes toast-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

  .file-drop{
    border:1.5px dashed var(--border); border-radius:12px; padding:24px; text-align:center;
    font-size:13px; color:var(--text-dim); cursor:pointer; background:var(--slate-pale);
    transition:border-color .12s ease, background .12s ease, color .12s ease;
  }
  .file-drop:hover{ border-color:var(--teal); color:var(--navy); background:var(--teal-pale); }

  .modal-bg{
    position:fixed; inset:0; background:rgba(15,20,35,.55); display:flex;
    align-items:center; justify-content:center; z-index:50; padding:20px;
  }
  .modal{ background:#fff; border-radius:10px; padding:22px; width:100%; max-width:400px; box-shadow:var(--shadow-pop); }
  .modal.wide{ max-width:min(1080px, 96vw); max-height:88vh; overflow-y:auto; }
  .modal h3{ margin-top:0; font-size:16.5px; color:var(--navy); font-weight:700; }
  .modal .actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
  .modal-error{ color:var(--red); font-size:12.5px; margin-top:8px; min-height:16px; font-weight:600; }

  .checklist{ display:flex; flex-direction:column; gap:7px; max-height:160px; overflow-y:auto;
    border:1px solid var(--border); border-radius:9px; padding:11px; background:#fff; }
  .checklist label{ display:flex; align-items:center; gap:9px; font-weight:400; text-transform:none; letter-spacing:normal; color:var(--text); margin:0; font-size:13px; }
  .checklist input[type=checkbox]{ width:auto; }

  .diffline{ font-size:13.5px; padding:3px 0; }
  .diffline.add{ color:var(--teal-deep); }
  .diffline.rem{ color:var(--red); }
  .diff-box{ max-height:180px; overflow-y:auto; border:1px solid var(--border); border-radius:9px; padding:11px 14px; background:#fff; }

  .hidden{ display:none !important; }
  code.small{ font-size:11.5px; background:var(--teal-pale); color:var(--teal-deep); padding:2px 8px; border-radius:6px; font-weight:600; }

  .banner{
    background:linear-gradient(100deg, #7A3B0F, #8C4712); color:#fff; padding:12px 24px; font-size:13.5px; font-weight:600;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
  }
  .banner .msg{ display:flex; align-items:center; gap:10px; }
  .banner button{ background:rgba(255,255,255,.18); border:none; color:#fff; padding:6px 13px; border-radius:16px; font-size:12px; cursor:pointer; font-weight:600; }
  .banner button:hover{ background:rgba(255,255,255,.3); }

  .capsule{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; background:var(--teal-pale); color:var(--teal-deep); margin-right:4px; }
  .capsule.off{ background:var(--slate-pale); color:var(--slate); }

  #reset-screen{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(560px 420px at 15% 8%, rgba(30,138,115,.08), transparent),
      radial-gradient(620px 460px at 85% 92%, rgba(201,137,26,.07), transparent),
      linear-gradient(160deg, #EEF2F1 0%, #E3EEEC 100%);
    padding:20px;
  }

  @media (max-width:600px){
    header.topbar{ padding:6px 14px; }
    header.topbar .brand .mark{ width:76px; height:76px; margin:-10px 0; }
    header.topbar .brand .name{ font-size:14.5px; }
    main{ padding:18px 14px 48px; }
    .card{ padding:18px 16px 20px; }
    .row > div{ min-width:100%; }
  }

/* A row that just appeared on an auto-refreshing queue (e.g. a new
   ward submission arriving on the processing page) briefly highlights
   so it visibly registers rather than silently appearing on redraw. */
@keyframes row-flash-fade {
  0%   { background-color: var(--amber-pale); }
  100% { background-color: transparent; }
}
tr.row-flash { animation: row-flash-fade 3s ease-out; }

/* ======================================================================
   ED&G animated background — the original Pharmacy Portal look: six
   drifting triangles, pulsing orbs, falling light beams and rising
   particles. Injected as a fixed layer behind every page by
   injectBgAnim() in shared.js. Seasonal (Halloween/Christmas) variants
   deliberately NOT included. Motion stops for reduced-motion users and
   the layer is hidden when printing.
   ====================================================================== */
.bg-anim{
  --tri-navy:#003087; --tri-navy-light:#005eb8; --tri-teal:#00a499;
  --tri-teal-light:#41b6e6; --tri-honey:#ffb81c; --tri-honey-dark:#ed8b00; /* NHS palette */
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:linear-gradient(160deg,#EEF2F1 0%,#FFFFFF 45%,#F6F9F8 100%);
}
#app,#login-screen{ position:relative; z-index:1; }
  @keyframes triRight{
    0%  {transform:translateX(-120vw) scaleY(1)    scaleX(1);   clip-path:polygon(5% 100%,95% 100%,18% 0%);}
    25% {transform:translateX(-60vw)  scaleY(1.3)  scaleX(1.15);clip-path:polygon(3% 100%,92% 100%,32% 0%);}
    50% {transform:translateX(0vw)    scaleY(0.82) scaleX(0.9); clip-path:polygon(7% 100%,97% 100%,22% 0%);}
    75% {transform:translateX(60vw)   scaleY(1.2)  scaleX(1.2); clip-path:polygon(2% 100%,90% 100%,38% 0%);}
    100%{transform:translateX(120vw)  scaleY(1)    scaleX(1);   clip-path:polygon(5% 100%,95% 100%,18% 0%);}
  }
  @keyframes triLeft{
    0%  {transform:translateX(120vw)  scaleY(1)    scaleX(1);   clip-path:polygon(95% 100%,5% 100%,62% 0%);}
    25% {transform:translateX(60vw)   scaleY(0.8)  scaleX(1.25);clip-path:polygon(97% 100%,3% 100%,44% 0%);}
    50% {transform:translateX(0vw)    scaleY(1.35) scaleX(0.82);clip-path:polygon(92% 100%,8% 100%,70% 0%);}
    75% {transform:translateX(-60vw)  scaleY(0.9)  scaleX(1.1); clip-path:polygon(98% 100%,4% 100%,55% 0%);}
    100%{transform:translateX(-120vw) scaleY(1)    scaleX(1);   clip-path:polygon(95% 100%,5% 100%,62% 0%);}
  }
  .tri{position:absolute;bottom:-1px;}
  .tri-a{left:-5%;width:50%;height:165px;background:var(--tri-navy-light);opacity:0.5;transform-origin:bottom left;animation:triRight 180s linear infinite;animation-delay:0s;}
  .tri-b{left:-5%;width:50%;height:125px;background:var(--tri-teal-light);opacity:0.55;transform-origin:bottom left;animation:triRight 180s linear infinite;animation-delay:-90s;}
  .tri-c{right:-5%;width:48%;height:145px;background:var(--tri-teal);opacity:0.45;transform-origin:bottom right;animation:triLeft 216s linear infinite;animation-delay:0s;}
  .tri-d{right:-5%;width:36%;height:105px;background:var(--tri-honey);opacity:0.4;transform-origin:bottom right;animation:triLeft 216s linear infinite;animation-delay:-108s;}
  .tri-e{left:-5%;width:44%;height:150px;background:var(--tri-navy);opacity:0.35;transform-origin:bottom left;animation:triRight 180s linear infinite;animation-delay:-60s;}
  .tri-f{right:-5%;width:32%;height:118px;background:var(--tri-honey-dark);opacity:0.4;transform-origin:bottom right;animation:triLeft 216s linear infinite;animation-delay:-72s;}

  /* ---- Glowing orbs — subtle ambient colour, not theme-bound (kept
     as blue/green rgba so they stay a soft glow under any theme rather
     than needing an rgba variant of every theme colour). ---- */
  .orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;opacity:0;animation:orbPulse var(--dur) ease-in-out infinite var(--delay);z-index:1;}
  .orb1{width:320px;height:320px;background:rgba(95,182,224,0.30);top:10%;left:15%;--dur:7s;--delay:0s;}
  .orb2{width:260px;height:260px;background:rgba(76,175,80,0.20);top:30%;right:10%;--dur:9s;--delay:2s;}
  .orb3{width:200px;height:200px;background:rgba(18,160,173,0.18);bottom:20%;left:40%;--dur:11s;--delay:4s;}
  .orb4{width:180px;height:180px;background:rgba(159,208,238,0.35);bottom:30%;right:25%;--dur:8s;--delay:1s;}
  @keyframes orbPulse{0%{opacity:0;transform:scale(0.9);}40%{opacity:1;transform:scale(1.08);}70%{opacity:0.6;transform:scale(0.95);}100%{opacity:0;transform:scale(0.9);}}

  /* ---- Floating particles ---- */
  .particle{position:absolute;border-radius:50%;pointer-events:none;z-index:1;}
  @keyframes floatUp1{0%{transform:translateY(0) translateX(0);opacity:0;}10%{opacity:1;}90%{opacity:0.6;}100%{transform:translateY(-100vh) translateX(20px);opacity:0;}}
  @keyframes floatUp2{0%{transform:translateY(0) translateX(0);opacity:0;}10%{opacity:0.7;}90%{opacity:0.3;}100%{transform:translateY(-100vh) translateX(-30px);opacity:0;}}
  @keyframes floatUp3{0%{transform:translateY(0) translateX(0);opacity:0;}15%{opacity:0.9;}85%{opacity:0.4;}100%{transform:translateY(-100vh) translateX(15px);opacity:0;}}
  @keyframes bobble{0%,100%{transform:translateY(0);}50%{transform:translateY(-18px);}}

  /* ---- Light beams ---- */
  .light-beam{position:absolute;top:-20%;width:2px;pointer-events:none;z-index:1;border-radius:2px;}
  @keyframes beamFall{0%{transform:translateY(-10%) scaleX(1);opacity:0;}15%{opacity:1;}85%{opacity:0.6;}100%{transform:translateY(120vh) scaleX(1.4);opacity:0;}}
@media (prefers-reduced-motion:reduce){ .tri,.orb,.particle,.light-beam{ animation:none; } }
@media print{ .bg-anim{ display:none !important; } }

/* ======================================================================
   v4 revamp — admin workspace + order processing
   ====================================================================== */

/* ---- Page navigation: home button + grouped segmented control, then a
   page title block. #page-nav stays the mount point on every page. ---- */
.tabs{ flex-direction:column; align-items:stretch; gap:14px; }
.nav-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.nav-home{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:12.5px; font-weight:600; color:var(--navy); padding:7px 12px;
  border:1px solid var(--border); border-radius:20px; background:rgba(255,255,255,.9);
  transition:border-color .12s, background .12s;
}
.nav-home:hover{ border-color:var(--navy); background:#fff; }
.seg{
  display:flex; gap:2px; flex-wrap:wrap; padding:4px; border-radius:12px;
  background:rgba(255,255,255,.92); border:1px solid var(--border); box-shadow:var(--shadow-card);
}
.seg a{
  text-decoration:none; font-size:12.5px; font-weight:600; color:var(--text-dim);
  padding:7px 13px; border-radius:8px; white-space:nowrap;
  transition:background .12s, color .12s;
}
.seg a:hover{ background:var(--teal-pale); color:var(--navy); }
.seg a.on{ background:var(--navy); color:#fff; box-shadow:0 1px 3px rgba(26,39,68,.25); }
.page-head{ display:flex; align-items:center; gap:14px; padding:2px 2px 0; }
.ui-ic{ display:inline-block; vertical-align:-3px; flex:none; }
.page-head .ph-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:21px; background:var(--teal-pale); color:var(--teal);
}
.ui-ic .f{ fill:var(--teal-pale); stroke:var(--teal); }
.page-head .ph-icon .ui-ic .f{ fill:#fff; }
.page-head h1{ margin:0; font-size:22px; font-weight:800; letter-spacing:.1px; color:var(--navy); line-height:1.2; }
.page-head p{ margin:3px 0 0; font-size:13px; color:var(--text-dim); max-width:760px; }

/* ---- Admin cards & tables ---- */
body[data-admin="1"] .card{
  border-radius:12px; border-color:var(--border-soft); padding:20px 22px 22px;
  box-shadow:0 1px 3px rgba(26,39,68,.06), 0 8px 24px -12px rgba(26,39,68,.10);
  background:rgba(255,255,255,.97);
}
body[data-admin="1"] .card h2{
  display:flex; align-items:center; gap:10px; font-size:16.5px; padding-bottom:12px; margin-bottom:16px;
  border-bottom:1px solid var(--border-soft);
}
body[data-admin="1"] .card h2::before{
  content:''; width:4px; height:18px; border-radius:2px; background:linear-gradient(var(--teal),var(--rule)); flex-shrink:0;
}
body[data-admin="1"] .card h2 .muted{ font-weight:500; font-size:13px; }
body[data-admin="1"] table{ border:1px solid var(--border-soft); border-radius:10px; border-collapse:separate; border-spacing:0; overflow:hidden; }
body[data-admin="1"] th{
  text-transform:uppercase; letter-spacing:.06em; font-size:11px; color:var(--text-dim); background:#f4f6fa; padding:10px 12px;
}
body[data-admin="1"] td{ padding:11px 12px; }
body[data-admin="1"] tbody tr:nth-child(even) td{ background:#fafbfd; }
body[data-admin="1"] tbody tr:hover td{ background:rgba(14,124,134,.06); }
body[data-admin="1"] tr:last-child td{ border-bottom:none; }
body[data-admin="1"] label{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); font-weight:700; }
body[data-admin="1"] .checklist label{ text-transform:none; letter-spacing:normal; font-size:13px; color:var(--text); font-weight:400; }
body[data-admin="1"] .row{ gap:16px; }

/* ---- Order processing: queue ---- */
.queue-summary{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.qs-tile{
  flex:1; min-width:150px; background:rgba(255,255,255,.97); border:1px solid var(--border-soft); border-radius:12px;
  padding:14px 16px; box-shadow:var(--shadow-card); border-left:4px solid var(--teal);
}
.qs-tile.amber{ border-left-color:var(--honey); }
.qs-tile.navy{ border-left-color:var(--navy); }
.qs-tile b{ display:block; font-size:26px; line-height:1.1; color:var(--navy); }
.qs-tile span{ font-size:11.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.ward-cell{ font-weight:700; color:var(--navy); }
.type-pill{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:6px; margin-left:6px; vertical-align:1px; }
.type-pill.topup{ background:var(--teal-pale); color:var(--teal-deep); }
.type-pill.adhoc{ background:var(--honey-pale); color:var(--honey-deep); }

/* ---- Order processing: workbench dialogue ---- */
.modal.wide{ padding:0; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.modal.wide > #proc-modal-body{ display:flex; flex-direction:column; min-height:0; max-height:88vh; }
.proc-head{
  background:linear-gradient(135deg,var(--navy),var(--navy-mid)); color:#fff; padding:18px 24px 16px;
  border-bottom:3px solid var(--rule); display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.proc-head h3{ margin:0; color:#fff; font-size:19px; font-weight:800; }
.proc-head .ph-sub{ margin:4px 0 0; font-size:12.5px; color:#c9cedd; }
.proc-head .ph-tag{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:20px;
  background:var(--honey); color:var(--navy-deep); white-space:nowrap;
}
.proc-head .ph-tag.topup{ background:var(--teal-soft); color:#fff; }
.proc-progress{ padding:12px 24px 0; }
.proc-progress .pp-top{ display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.proc-progress .bar{ height:8px; border-radius:6px; background:var(--slate-pale); overflow:hidden; }
.proc-progress .bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--teal),var(--teal-soft)); transition:width .25s ease; }
.proc-body{ padding:14px 24px 6px; overflow-y:auto; min-height:0; flex:1; }
.proc-note{ font-size:13px; color:var(--text-dim); margin:0 0 12px; }
.proc-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.proc-toolbar .me{ color:var(--teal-deep); font-weight:700; font-size:13px; }
.proc-toolbar .spacer{ flex:1; }
.proc-line{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 14px; margin-bottom:8px;
  border:1px solid var(--border-soft); border-left:5px solid var(--honey); border-radius:10px; background:#fff;
  transition:background .15s, border-color .15s;
}
.proc-line:hover{ background:#fbfcfe; }
.proc-line.done{ border-left-color:var(--teal); background:#f6fbfb; }
.proc-line.oos{ border-left-color:var(--red); background:#fdf7f6; }
.proc-line.other{ border-left-color:var(--slate); background:#f8f9fa; }
.proc-line .pl-main{ flex:1 1 260px; min-width:200px; }
.proc-line .pl-name{ font-weight:700; color:var(--navy); font-size:14.5px; }
.proc-line .pl-meta{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.proc-line .pl-qty{
  min-width:64px; text-align:center; padding:6px 10px; border-radius:10px; background:var(--navy); color:#fff;
}
.proc-line .pl-qty b{ display:block; font-size:21px; line-height:1.1; }
.proc-line .pl-qty span{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.75; }
.proc-line .pl-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; flex:1 1 300px; }
.proc-line .pl-actions .btn.go{ background:var(--teal); }
.proc-line .pl-actions .btn.go:hover{ background:var(--teal-soft); }
.proc-line .pl-actions .btn.warn{ background:#fff; color:var(--red); border:1px solid #e3b9b4; }
.proc-line .pl-actions .btn.warn:hover{ background:var(--red-pale); }
.proc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 24px; border-top:1px solid var(--border-soft); background:#f7f8fb;
}
.proc-foot .hint{ font-size:12px; color:var(--text-dim); flex:1 1 200px; }
.proc-foot .btns{ display:flex; gap:10px; }
.proc-foot .btn.confirm{ padding:11px 26px; font-size:14.5px; }
.proc-empty{ padding:30px; text-align:center; color:var(--text-dim); }

@media (max-width:640px){
  .page-head .ph-icon{ width:38px; height:38px; font-size:18px; }
  .proc-line .pl-actions{ justify-content:flex-start; }
  .proc-head, .proc-body, .proc-foot, .proc-progress{ padding-left:16px; padding-right:16px; }
}
@media print{ .proc-foot, .seg, .nav-home{ display:none !important; } }
body[data-admin="1"] label:has(input[type=checkbox]){ text-transform:none; letter-spacing:normal; font-size:13px; color:var(--text); font-weight:500; }

/* ---- Request summary (what was actually sent) ---- */
.proc-line.alt, .proc-line.part{ border-left-color:var(--purple); background:#faf8fe; }
.proc-line.pend{ border-left-color:var(--honey); }
.proc-line .pl-qty.sent{ background:var(--teal); }
.proc-line .pl-qty.sent.less{ background:var(--purple); }
.proc-line .pl-qty.sent.zero{ background:var(--red); }
.proc-line .pl-qty{ flex-shrink:0; }
.rs-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.rs-chip{ font-size:12px; padding:5px 12px; border-radius:20px; background:var(--slate-pale); color:var(--navy); border:1px solid var(--border-soft); }
.rs-chip b{ font-size:14px; }
.rs-chip.done{ background:var(--teal-pale); color:var(--teal-deep); }
.rs-chip.alt, .rs-chip.part{ background:var(--purple-pale); color:var(--purple); }
.rs-chip.oos{ background:var(--red-pale); color:var(--red); }
.rs-chip.pend{ background:var(--amber-pale); color:var(--amber); }
.rs-label{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.rs-label.done{ color:var(--teal-deep); } .rs-label.oos{ color:var(--red); }
.rs-label.alt, .rs-label.part{ color:var(--purple); } .rs-label.pend{ color:var(--amber); }
tr.clickable{ cursor:pointer; }

/* ---- Trust logo in the header (every page) ---- */
header.topbar .brand .trust-logo{
  background:#fff; border-radius:8px; padding:4px 10px; height:46px; display:flex; align-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25); flex-shrink:0;
}
header.topbar .brand .trust-logo img{ height:100%; width:auto; max-width:190px; object-fit:contain; display:block; }
@media (max-width:600px){ header.topbar .brand .trust-logo{ height:38px; padding:3px 8px; } header.topbar .brand .trust-logo img{ max-width:130px; } }
/* Trust logo: login page and printed output only, not on screen once signed in. */
header.topbar .brand .trust-logo{ display:none; }
@media print{ header.topbar .brand .trust-logo{ display:flex; box-shadow:none; } }

/* ---- Home tile icons (SVG, theme colours) ---- */
.home-tile .icon{ display:flex; justify-content:center; color:var(--teal); }
.home-tile:hover .icon{ color:var(--navy); }

.home-tile{ position:relative; }
.home-tile .tile-badge{
  position:absolute; top:10px; right:10px; min-width:24px; height:24px; padding:0 7px; border-radius:12px;
  background:var(--red); color:#fff; font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.home-tile{ max-width:240px; }

/* ---- Daily dashboard (home) ---- */
.dash-card h2 .muted{ font-size:12.5px; font-weight:500; margin-left:6px; }
.dash-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.dash-tile{
  text-align:left; font:inherit; cursor:pointer; background:#fff; border:1px solid var(--border-soft); border-left:5px solid var(--navy);
  border-radius:12px; padding:16px 18px; box-shadow:var(--shadow-card); transition:transform .12s, box-shadow .12s;
}
.dash-tile:hover{ transform:translateY(-2px); box-shadow:0 8px 20px -8px rgba(26,39,68,.25); }
.dash-tile.teal{ border-left-color:var(--teal); } .dash-tile.red{ border-left-color:var(--red); background:#fdf7f6; }
.dash-tile .dt-num{ font-size:38px; font-weight:800; line-height:1.05; color:var(--navy); }
.dash-tile.teal .dt-num{ color:var(--teal-deep); } .dash-tile.red .dt-num{ color:var(--red); }
.dash-tile .dt-label{ font-size:13px; font-weight:700; color:var(--navy); margin-top:6px; }
.dash-tile .dt-sub{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }


/* ---- Slide-out side menu (navy) + top-bar menu/home buttons ---- */
header.topbar .tb-left{ display:flex; align-items:center; gap:10px; }
.nav-toggle,.home-btn{
  display:grid; place-items:center; width:38px; height:38px; padding:0; flex:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.35); border-radius:8px;
  color:#fff; cursor:pointer; text-decoration:none; transition:background .12s, border-color .12s;
}
.nav-toggle:hover,.home-btn:hover{ background:rgba(255,255,255,.18); border-color:#fff; }
.home-btn[aria-current="page"]{ background:rgba(255,255,255,.18); }
.nav-toggle:focus-visible,.home-btn:focus-visible{ outline:2px solid var(--rule); outline-offset:2px; }

.side-edge{ position:fixed; left:0; top:0; bottom:0; width:12px; z-index:59; pointer-events:none; }
.side-handle{
  position:fixed; left:0; top:50%; transform:translateY(-50%); width:26px; height:96px; padding:0;
  display:grid; place-items:center; background:var(--navy); color:#fff; border:0;
  border-right:3px solid var(--rule); border-radius:0 10px 10px 0; z-index:58; cursor:pointer;
  box-shadow:2px 0 10px -2px rgba(0,0,0,.35); transition:opacity .15s, width .15s;
}
.side-handle:hover{ width:32px; }
.side-handle.gone{ opacity:0; pointer-events:none; }
.side-scrim{ position:fixed; inset:0; background:rgba(10,16,32,.35); z-index:59; opacity:0; visibility:hidden; transition:opacity .2s, visibility 0s linear .2s; }
.side-scrim.show{ opacity:1; visibility:visible; transition:opacity .2s; }
.side-nav{
  position:fixed; left:0; top:0; bottom:0; width:min(270px,86vw); z-index:60;
  background:var(--navy); color:#dbe2f0; padding:16px 12px 24px; overflow-y:auto;
  display:flex; flex-direction:column; gap:2px; border-right:1px solid rgba(255,255,255,.12);
  box-shadow:10px 0 34px -12px rgba(0,0,0,.5);
  transform:translateX(-102%); visibility:hidden; transition:transform .22s ease, visibility 0s linear .22s;
}
.side-nav.open{ transform:none; visibility:visible; transition:transform .22s ease; }
.side-nav .sn-brand{ color:#fff; font-weight:700; font-size:16px; line-height:1; padding:4px 10px 14px; }
.side-nav .sn-brand small{ display:block; font-weight:400; font-size:10.5px; color:#9aa7c2; margin-top:3px; }
.side-nav hr{ border:0; border-top:1px solid rgba(255,255,255,.16); margin:8px 4px; }
.side-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; color:#dbe2f0;
  text-decoration:none; font-size:14px; font-weight:500; border-left:3px solid transparent;
}
.side-nav a:hover{ background:rgba(255,255,255,.1); color:#fff; }
.side-nav a[aria-current="page"]{ background:rgba(255,255,255,.14); color:#fff; border-left-color:var(--rule); }
.side-nav a:focus-visible{ outline:2px solid var(--rule); outline-offset:1px; }
.side-nav .sn-group{ display:flex; align-items:center; gap:10px; padding:8px 10px 4px; color:#9aa7c2; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.side-nav a.sn-sub{ padding:7px 10px 7px 41px; font-size:13.5px; font-weight:400; }
@media (max-width:600px){ header.topbar .tb-left{ gap:8px; } .side-handle{ height:72px; } }
@media print{ .side-nav,.side-edge,.side-handle,.side-scrim,.nav-toggle,.home-btn{ display:none !important; } }

.subtabs-wrap{ margin:0 0 14px; }
.seg.subtabs button{ font:inherit; font-size:13px; font-weight:600; color:var(--text-dim); background:none; border:0; padding:8px 15px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.seg.subtabs button:hover{ background:var(--teal-pale); color:var(--navy); }
.seg.subtabs button.on{ background:var(--navy); color:#fff; box-shadow:0 1px 3px rgba(26,39,68,.25); }
.st-off{ display:none !important; }

/* ---- Users: grouped by title, click a person to expand ---- */
details.u-group{ margin-bottom:10px; border:1px solid var(--border); border-radius:12px; background:#fff; }
details.u-group>summary{ cursor:pointer; padding:12px 16px; font-weight:700; color:var(--navy); list-style:none; }
details.u-group>summary::-webkit-details-marker{ display:none; }
details.u-group>summary::before{ content:'\203a'; display:inline-block; margin-right:10px; transition:transform .15s; }
details.u-group[open]>summary::before{ transform:rotate(90deg); }
.u-list{ padding:0 10px 10px; }
.u-item{ border:1px solid var(--border); border-radius:10px; margin-top:6px; background:#fff; }
.u-item.u-off .u-head{ opacity:.7; }
.u-head{ display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer; border-radius:10px; }
.u-head:hover{ background:rgba(27,38,70,.04); }
.u-head:focus-visible{ outline:2px solid var(--rule); }
.u-main{ flex:1 1 200px; min-width:0; }
.u-caps{ flex:2 1 220px; display:flex; flex-wrap:wrap; gap:4px; }
.u-chev{ font-size:20px; color:var(--text-dim); }
.u-head[aria-expanded="true"] .u-chev{ transform:rotate(90deg); }
.u-body{ padding:4px 14px 14px; border-top:1px solid var(--border); }
.u-actions{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 0; }
@media (max-width:700px){ .u-head{ flex-wrap:wrap; } .u-caps{ order:3; flex-basis:100%; } }

/* ---- Banners (Pharmacy Portal style) ---- */
.hbanner-stack{ display:flex; flex-direction:column; gap:8px; padding:10px 24px 0; }
.hbanner{ display:flex; gap:12px; align-items:flex-start; border-radius:10px; padding:12px 16px; border:1px solid transparent; border-left-width:6px; font-size:14.5px; line-height:1.5; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.hbanner .ic{ font-size:20px; line-height:1.25; flex:none; }
.hbanner .tx{ flex:1; white-space:pre-line; word-break:break-word; }
.hbanner a{ color:inherit; text-decoration:underline; font-weight:600; }
.hbanner.info{ background:#dbeefa; border-color:#7fb8dd; color:#10334d; }
.hbanner.success{ background:#dcf5e3; border-color:#6cc788; color:#10391f; }
.hbanner.warning{ background:#fff1c9; border-color:#e6b422; color:#4a3500; }
.hbanner.urgent{ background:#fde0e0; border-color:#d64545; color:#5a0f0f; }
.bn-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.bn-row .msg{ flex:1; min-width:220px; font-size:13.5px; white-space:pre-line; word-break:break-word; }
.bn-pill{ display:inline-block; font-size:11px; font-weight:700; border-radius:10px; padding:1px 8px; margin-right:6px; background:#eef0f5; border:1px solid var(--border); }
.bn-pill.live{ background:#d3f9d8; color:#1b6b2c; border-color:#8fd6a0; }

/* ---- Slicker dialogs + toasts ---- */
body.modal-open{ overflow:hidden; }
.modal-bg{
  background:rgba(12,18,34,.5); -webkit-backdrop-filter:blur(5px) saturate(1.1); backdrop-filter:blur(5px) saturate(1.1);
  animation:mbg-in .18s ease both;
}
.modal{
  position:relative; border-radius:18px; padding:26px 26px 22px; max-width:440px; border:1px solid rgba(26,39,68,.08);
  box-shadow:0 30px 70px -18px rgba(12,18,34,.55), 0 4px 14px rgba(12,18,34,.12);
  animation:modal-in .24s cubic-bezier(.2,.9,.3,1.15) both;
}
.modal:not(.wide)::before{
  content:''; position:absolute; left:26px; right:26px; top:0; height:3px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--honey),#ffd35c);
}
.modal.wide{ border-radius:18px; max-width:min(1080px,96vw); }
.modal h3{ font-size:18px; letter-spacing:-.01em; margin:0 0 6px; }
.modal p{ line-height:1.55; }
.modal p.muted{ font-size:13.5px; margin:0 0 4px; }
.modal label{ margin-top:12px; }
.modal input[type=text],.modal input[type=password],.modal input[type=number],.modal select,.modal textarea{ border-radius:10px; }
.modal-ic{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:14px;
  background:linear-gradient(135deg,#e9eefb,#dbe5fa); color:var(--navy);
}
.modal-ic.warn{ background:linear-gradient(135deg,#fff1c9,#ffe39a); color:#7a5200; }
.modal .actions{
  margin:22px -26px -22px; padding:14px 26px; gap:10px; background:#f6f7fb; border-top:1px solid var(--border);
  border-radius:0 0 18px 18px;
}
.modal .actions .btn{ min-width:92px; border-radius:10px; }
.modal-error:empty{ display:none; }
.modal-error{ background:#fdecef; border:1px solid #f3b8c6; border-radius:9px; padding:8px 11px; }
@keyframes mbg-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modal-in{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }
@media (max-width:520px){
  .modal-bg{ align-items:flex-end; padding:0; }
  .modal:not(.wide){ max-width:none; border-radius:20px 20px 0 0; animation-name:sheet-in; }
  .modal .actions{ flex-direction:column-reverse; }
  .modal .actions .btn{ width:100%; padding:11px; }
}
@keyframes sheet-in{ from{ transform:translateY(100%); } to{ transform:none; } }

#toast-root{ position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:10px; align-items:flex-end; z-index:100; pointer-events:none; }
.toast{
  position:relative; pointer-events:auto; cursor:pointer; display:flex; align-items:center; gap:11px; overflow:hidden;
  right:auto; bottom:auto; max-width:min(420px,calc(100vw - 32px));
  background:rgba(17,27,51,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:12px 18px 12px 12px; border-radius:14px; font-size:13.5px; font-weight:600; line-height:1.35;
  box-shadow:0 14px 34px -10px rgba(12,18,34,.6); animation:toast-in2 .26s cubic-bezier(.2,.9,.3,1.15) both;
}
.toast.err{ background:rgba(125,22,40,.97); }
.toast .toast-ic{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#1fa87a; color:#fff; }
.toast.err .toast-ic{ background:#ff6b81; }
.toast::after{ content:''; position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(255,255,255,.35); transform-origin:left; animation:toast-life var(--life,3200ms) linear forwards; }
.toast.out{ opacity:0; transform:translateY(6px); transition:opacity .18s, transform .18s; }
@keyframes toast-in2{ from{ opacity:0; transform:translateY(14px) scale(.95); } to{ opacity:1; transform:none; } }
@keyframes toast-life{ to{ transform:scaleX(0); } }
@media (prefers-reduced-motion:reduce){ .modal,.modal-bg,.toast{ animation:none !important; } .toast::after{ animation:none; } }
@media (max-width:520px){ #toast-root{ top:12px; bottom:auto; right:12px; left:12px; align-items:stretch; } .toast{ max-width:none; } }

/* ---- Users: slim list (Pharmacy Portal feel) ---- */
details.u-group{ margin-bottom:8px; border-radius:10px; box-shadow:none; }
details.u-group>summary{ padding:9px 14px; font-size:13.5px; }
.u-list{ padding:0 6px 6px; }
.u-item{ border:0; border-top:1px solid var(--border); border-radius:0; margin:0; }
.u-item:first-child{ border-top:0; }
.u-head{ gap:10px; padding:6px 10px; border-radius:8px; min-height:38px; }
.u-av{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.02em; }
.u-off .u-av{ background:#9aa3b8; }
.u-main{ flex:1 1 160px; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-id{ font-size:11px; color:var(--text-dim); margin-left:6px; }
.u-where{ flex:1 1 140px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-count{ flex:none; font-size:11.5px; font-weight:600; color:var(--text-dim); background:#eef0f5; border-radius:10px; padding:2px 9px; }
.u-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:#c4c9d6; }
.u-dot.on{ background:#22c55e; }
.u-caps{ display:none; }
.u-body{ padding:2px 12px 12px; border-top:0; background:#fafbfd; border-radius:0 0 8px 8px; }
.u-actions{ align-items:center; padding:8px 0; }
.perm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:2px 14px; margin-top:6px; }
.perm-grid label{ margin:0; padding:3px 0; }
.access-panel{ font-size:13px; }
@media (max-width:700px){ .u-where{ display:none; } }

/* ======================================================================
   SPLIT SIGN-IN LAYOUT (login.html, forgot-password.html) — same look as
   the Pharmacy Portal: animated brand panel left, navy form panel right.
   ====================================================================== */
body.sl{margin:0;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;}
body.sl .bg-anim{display:none;}
.sl-split{display:flex;flex:1;min-height:100vh;position:relative;z-index:1;}
.sl-hero{flex:1;position:relative;overflow:hidden;padding:56px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(160deg,#EEF2F1 0%,#FFFFFF 45%,#F6F9F8 100%);
  --tri-navy:#003087;--tri-navy-light:#005eb8;--tri-teal:#00a499;--tri-teal-light:#41b6e6;--tri-honey:#ffb81c;--tri-honey-dark:#ed8b00;}
.sl-tri{position:absolute;bottom:-1px;}
.sl-tri.a{left:-5%;width:50%;height:165px;background:var(--tri-navy-light);opacity:.5;transform-origin:bottom left;animation:triRight 180s linear infinite;}
.sl-tri.b{left:-5%;width:50%;height:125px;background:var(--tri-teal-light);opacity:.55;transform-origin:bottom left;animation:triRight 180s linear infinite;animation-delay:-90s;}
.sl-tri.c{right:-5%;width:48%;height:145px;background:var(--tri-teal);opacity:.45;transform-origin:bottom right;animation:triLeft 216s linear infinite;}
.sl-tri.d{right:-5%;width:36%;height:105px;background:var(--tri-honey);opacity:.4;transform-origin:bottom right;animation:triLeft 216s linear infinite;animation-delay:-108s;}
.sl-tri.e{left:-5%;width:44%;height:150px;background:var(--tri-navy);opacity:.35;transform-origin:bottom left;animation:triRight 180s linear infinite;animation-delay:-60s;}
.sl-tri.f{right:-5%;width:32%;height:118px;background:var(--tri-honey-dark);opacity:.4;transform-origin:bottom right;animation:triLeft 216s linear infinite;animation-delay:-72s;}
@keyframes triRight{
  0%{transform:translateX(-120vw) scaleY(1) scaleX(1);clip-path:polygon(5% 100%,95% 100%,18% 0%);}
  25%{transform:translateX(-60vw) scaleY(1.3) scaleX(1.15);clip-path:polygon(3% 100%,92% 100%,32% 0%);}
  50%{transform:translateX(0) scaleY(.82) scaleX(.9);clip-path:polygon(7% 100%,97% 100%,22% 0%);}
  75%{transform:translateX(60vw) scaleY(1.2) scaleX(1.2);clip-path:polygon(2% 100%,90% 100%,38% 0%);}
  100%{transform:translateX(120vw) scaleY(1) scaleX(1);clip-path:polygon(5% 100%,95% 100%,18% 0%);}}
@keyframes triLeft{
  0%{transform:translateX(120vw) scaleY(1) scaleX(1);clip-path:polygon(95% 100%,5% 100%,62% 0%);}
  25%{transform:translateX(60vw) scaleY(.8) scaleX(1.25);clip-path:polygon(97% 100%,3% 100%,44% 0%);}
  50%{transform:translateX(0) scaleY(1.35) scaleX(.82);clip-path:polygon(92% 100%,8% 100%,70% 0%);}
  75%{transform:translateX(-60vw) scaleY(.9) scaleX(1.1);clip-path:polygon(98% 100%,4% 100%,55% 0%);}
  100%{transform:translateX(-120vw) scaleY(1) scaleX(1);clip-path:polygon(95% 100%,5% 100%,62% 0%);}}
.sl-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;opacity:0;animation:slOrb var(--dur) ease-in-out infinite var(--delay);z-index:1;}
.sl-orb.o1{width:320px;height:320px;background:rgba(95,182,224,.30);top:10%;left:15%;--dur:7s;--delay:0s;}
.sl-orb.o2{width:260px;height:260px;background:rgba(76,175,80,.20);top:30%;right:10%;--dur:9s;--delay:2s;}
.sl-orb.o3{width:200px;height:200px;background:rgba(18,160,173,.18);bottom:20%;left:40%;--dur:11s;--delay:4s;}
@keyframes slOrb{0%{opacity:0;transform:scale(.9);}40%{opacity:1;transform:scale(1.08);}70%{opacity:.6;transform:scale(.95);}100%{opacity:0;transform:scale(.9);}}
.sl-p{position:absolute;border-radius:50%;pointer-events:none;z-index:1;bottom:5%;}
@keyframes slUp1{0%{transform:translateY(0);opacity:0;}10%{opacity:1;}90%{opacity:.6;}100%{transform:translateY(-100vh) translateX(20px);opacity:0;}}
@keyframes slUp2{0%{transform:translateY(0);opacity:0;}10%{opacity:.7;}90%{opacity:.3;}100%{transform:translateY(-100vh) translateX(-30px);opacity:0;}}
.sl-beam{position:absolute;top:-20%;pointer-events:none;z-index:1;border-radius:2px;}
@keyframes slBeam{0%{transform:translateY(-10%);opacity:0;}15%{opacity:1;}85%{opacity:.6;}100%{transform:translateY(120vh);opacity:0;}}
.sl-brand{position:relative;z-index:5;opacity:0;animation:slFade .6s .2s ease both;}
.sl-brand .name{font-size:34px;font-weight:800;color:#003087;letter-spacing:.01em;}
.sl-brand .name .tm{font-size:14px;font-weight:700;vertical-align:super;margin-left:2px;}
.sl-brand .sub{margin-top:4px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#005eb8;}
.sl-live{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:4px 12px 4px 10px;border-radius:999px;background:rgba(46,160,67,.12);border:1px solid rgba(46,160,67,.35);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1b6b2f;}
.sl-live i{width:9px;height:9px;border-radius:50%;background:#2ea043;animation:slPulse 2s ease-out infinite;}
.sl-live.down{background:rgba(180,83,9,.12);border-color:rgba(180,83,9,.4);color:#8a4a07;}
.sl-live.down i{background:#d97706;animation:none;}
@keyframes slPulse{0%{box-shadow:0 0 0 0 rgba(46,160,67,.55);}70%{box-shadow:0 0 0 8px rgba(46,160,67,0);}100%{box-shadow:0 0 0 0 rgba(46,160,67,0);}}
.sl-tagline{position:relative;z-index:5;font-size:40px;line-height:1.1;font-weight:800;color:#003087;max-width:400px;margin-bottom:60px;opacity:0;animation:slFade .6s .4s ease both;}
.sl-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:min(432px,80%);display:flex;justify-content:center;}
.sl-logo img{max-width:100%;max-height:270px;}
.sl-panel{flex:0 0 480px;background:#003087;color:#fff;display:flex;align-items:center;justify-content:center;padding:48px;position:relative;z-index:5;}
.sl-form{width:100%;max-width:340px;opacity:0;animation:slFade .6s .3s ease both;}
.sl-form h1{margin:0;font-size:30px;font-weight:800;color:#fff;text-align:left;}
.sl-form .lead{margin:6px 0 22px;font-size:15px;color:#c7d0e4;}
.sl-form label{color:#fff;font-weight:700;}
.sl-form input{background:rgba(255,255,255,.07);border:1.5px solid #4a5d88;color:#fff;}
.sl-form input::placeholder{color:#8a98ba;}
.sl-form input:focus{border-color:#5fd4de;outline:none;box-shadow:0 0 0 3px rgba(95,212,222,.3);}
.sl-form .btn.magenta,.sl-form button.btn{background:#2ec4d1;color:#06202a;font-weight:800;width:100%;margin-top:18px;}
.sl-form .btn.magenta:hover{background:#5fd4de;}
.sl-form .btn:disabled{opacity:.6;}
.sl-form a{color:#5fd4de;font-weight:700;}
.sl-form a:hover{color:#fff;}
.sl-form .muted{color:#c7d0e4;}
.sl-form .login-error{color:#ffb4c0;font-weight:600;min-height:18px;margin-top:8px;}
.sl-edg{position:fixed;right:40px;bottom:44px;z-index:6;text-align:right;text-decoration:none;animation:slFade .6s .5s ease both;}
.sl-edg .mark{font-size:30px;font-weight:800;color:#fff;line-height:1;}
.sl-edg .mark .amp{color:#5fd4de;}
.sl-edg .mark .tm{font-size:12px;font-weight:700;vertical-align:super;margin-left:1px;}
.sl-edg .name{margin-top:3px;font-size:12.5px;font-weight:700;color:#e8edf7;}
.sl-edg .rule{height:3px;margin-top:7px;border-radius:2px;overflow:hidden;display:flex;}
.sl-edg .rule span{flex:1;}
.sl-edg .rule span:nth-child(1){background:#41b6e6;}.sl-edg .rule span:nth-child(2){background:#0072ce;}.sl-edg .rule span:nth-child(3){background:#4caf50;}
@keyframes slFade{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.sl-tri,.sl-orb,.sl-p,.sl-beam,.sl-live i{animation:none;}.sl-brand,.sl-form,.sl-tagline,.sl-edg{animation:none;opacity:1;}}
@media (max-width:860px){
  body.sl{overflow:auto;}
  .sl-split{flex-direction:column;min-height:0;}
  .sl-hero{flex:0 0 auto;padding:28px 24px;}
  .sl-tagline{display:none;}
  .sl-logo{position:static;transform:none;margin:14px 0 0;width:auto;justify-content:flex-start;}
  .sl-logo img{max-height:64px;}
  .sl-panel{flex:1 0 auto;padding:36px 20px;}
  .sl-edg{position:static;padding:18px 24px;background:#003087;}
}

/* header identity: initials badge + name over role */
header.topbar .who [data-who-name]{ display:inline-flex; align-items:center; gap:10px; }
.who-av{ width:32px; height:32px; border-radius:50%; background:#fff; color:var(--navy); font-weight:800; font-size:12px; display:inline-flex; align-items:center; justify-content:center; letter-spacing:.02em; flex:none; }
.who-txt{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.who-txt b{ font-size:13px; font-weight:700; color:#fff; }
.who-txt small{ font-size:11px; color:#c9cedd; }
@media (max-width:640px){ .who-txt small{ display:none; } }

/* status key */
.legend-key{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.legend-key summary{ cursor:pointer; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.lg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px 22px; margin-top:12px; }
.lg-head{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin-bottom:6px; padding-bottom:4px; border-bottom:2px solid var(--border); }
.lg-item{ display:flex; gap:9px; align-items:flex-start; margin-bottom:7px; }
.lg-item .status-dot{ margin-top:3px; flex:none; transform:scale(1.15); }
.lg-item b{ display:block; font-size:13px; color:var(--text,#003087); }
.lg-item small{ display:block; font-size:11.5px; color:var(--text-dim); line-height:1.3; }

/* ===== Worklist-row home tiles ===== */
.tile-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; margin-top:10px; }
.home-tile{ max-width:none; display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:center; text-align:left; padding:12px 44px 12px 14px; border:1px solid var(--border); border-top:1px solid var(--border); border-radius:12px; box-shadow:none; transition:border-color .15s, background .15s, transform .12s; }
.home-tile:hover{ transform:none; box-shadow:none; border-color:var(--teal); background:var(--teal-pale); }
.home-tile::after{ content:"\203A"; position:absolute; right:16px; top:50%; transform:translateY(-52%); color:var(--text-dim); font-size:24px; line-height:1; }
.home-tile .ic{ width:48px; height:48px; border-radius:12px; background:var(--teal-pale); color:var(--teal); display:grid; place-items:center; }
.home-tile:hover .ic{ background:#fff; }
.home-tile .ic svg{ width:26px; height:26px; }
.home-tile .tx{ display:flex; flex-direction:column; min-width:0; }
.home-tile .label{ margin:0; font-size:14.5px; font-weight:700; color:var(--navy); }
.home-tile .sub{ font-size:12.5px; color:var(--text-dim); margin-top:1px; }
.home-tile .tile-badge{ top:50%; right:38px; transform:translateY(-50%); }

/* ===== Banner strip: labelled chip ===== */
.hbanner{ align-items:center; background:#fff; border:1px solid var(--border); border-left-width:1px; color:var(--text,#003087); box-shadow:0 1px 2px rgba(0,0,0,.05); padding:10px 14px; font-size:14px; }
.hbanner .chip{ flex:none; font-size:11px; font-weight:800; letter-spacing:.09em; padding:4px 9px; border-radius:6px; color:#fff; }
.hbanner.info .chip{ background:var(--teal); }
.hbanner.success .chip{ background:#1e8a73; }
.hbanner.warning .chip{ background:#b87a00; }
.hbanner.urgent .chip{ background:#c0392b; }
.hbanner.info,.hbanner.success,.hbanner.warning,.hbanner.urgent{ background:#fff; color:var(--text,#003087); }
.hbanner.warning{ border-color:#e6c36a; } .hbanner.urgent{ border-color:#e39a93; }

/* ===== Top-of-screen shimmer ===== */
header.topbar::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%); background-size:260% 100%; background-position:160% 0; animation:topShimmer 45s ease-in-out infinite; }
header.topbar::before{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px; pointer-events:none; background:linear-gradient(90deg,var(--rule) 0%,var(--rule) 35%,#fff0b0 50%,var(--rule) 65%,var(--rule) 100%); background-size:250% 100%; animation:topLine 45s ease-in-out infinite; }
@keyframes topShimmer{ 0%,93%{ background-position:160% 0; } 100%{ background-position:-60% 0; } }
@keyframes topLine{ 0%,93%{ background-position:150% 0; } 100%{ background-position:-50% 0; } }
@media (prefers-reduced-motion:reduce){ header.topbar::after,header.topbar::before{ animation:none; } header.topbar::after{ display:none; } }

/* ===== Accessibility settings ===== */
.a11y-btn{ background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; width:34px; height:34px; border-radius:8px; display:inline-grid; place-items:center; cursor:pointer; padding:0; }
.a11y-btn:hover{ background:rgba(255,255,255,.14); }
.a11y-set{ border:1px solid var(--border); border-radius:10px; padding:8px 12px 10px; margin:0 0 12px; }
.a11y-set legend{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-dim); padding:0 6px; }
.a11y-opt{ display:flex; align-items:center; gap:12px; padding:7px 4px; cursor:pointer; font-weight:400; }
.a11y-opt input{ width:auto; flex:none; }
.a11y-opt b{ display:block; font-size:14px; color:var(--text); }
.a11y-opt small{ display:block; font-size:12px; color:var(--text-dim); }
.a11y-sw{ flex:none; width:46px; height:34px; border-radius:8px; border:2px solid; display:grid; place-items:center; font-weight:800; font-size:14px; }

/* Black and white */
html[data-contrast="bw"]{ filter:grayscale(1) contrast(1.12); }
/* Blue contrast */
html[data-contrast="blue"]{
  --bg:#d6e6f8; --card:#f2f8ff; --border:#7ea3cc; --border-soft:#a9c4e2; --ink:#00183f; --text:#00183f; --text-dim:#24456f;
  --navy:#00205b; --navy-deep:#001540; --navy-mid:#0b3a85; --header-bg:#00205b; --header-bg-mid:#00205b;
  --teal:#005eb8; --teal-soft:#2a7fd1; --teal-pale:#dbeaff; --teal-deep:#003f86;
  --honey:#ffd23f; --honey-pale:#fff3bf; --honey-deep:#5e4200;
}
html[data-contrast="blue"] .bg-anim{ background:linear-gradient(160deg,#cfe2f6,#e4effb 50%,#cfe2f6); }
html[data-contrast="blue"] .sl-panel{ background:#00205b; }
html[data-contrast="blue"] .sl-hero{ background:linear-gradient(160deg,#cfe2f6,#e4effb 50%,#cfe2f6); }
/* Beige contrast */
html[data-contrast="beige"]{
  --bg:#f1e7cc; --card:#fbf5e4; --border:#b9a67a; --border-soft:#d6c8a2; --ink:#241c0a; --text:#241c0a; --text-dim:#5a4a28;
  --navy:#3a2f17; --navy-deep:#261e0e; --navy-mid:#54451f; --header-bg:#3a2f17; --header-bg-mid:#3a2f17;
  --teal:#7a3e00; --teal-soft:#9a5314; --teal-pale:#f3e1b8; --teal-deep:#5a2d00;
  --honey:#d99a00; --honey-pale:#f8e7b0; --honey-deep:#5c3f00;
}
html[data-contrast="beige"] .bg-anim{ background:linear-gradient(160deg,#ece0c0,#f7efd9 50%,#ece0c0); }
html[data-contrast="beige"] .sl-panel{ background:#3a2f17; }
html[data-contrast="beige"] .sl-hero{ background:linear-gradient(160deg,#ece0c0,#f7efd9 50%,#ece0c0); }
/* High contrast: inverted to a black page with light text; pictures are flipped back */
html[data-contrast="high"]{ filter:invert(1) hue-rotate(180deg) contrast(1.25); background:#fff;
  --border:#4a4a4a; --border-soft:#3a3a3a; --text-dim:#2b2b2b; }
html[data-contrast="high"] .side-nav{ filter:invert(1) hue-rotate(180deg); background:#000; }
html[data-contrast="high"] header.topbar{ filter:invert(1) hue-rotate(180deg); background:#000; border-bottom-color:#ffd23f; }
html[data-contrast="high"] img,html[data-contrast="high"] video,html[data-contrast="high"] canvas{ filter:invert(1) hue-rotate(180deg); }
html[data-contrast="high"] .bg-anim,html[data-contrast="high"] .sl-tri,html[data-contrast="high"] .sl-orb,html[data-contrast="high"] .sl-p,html[data-contrast="high"] .sl-beam{ display:none; }

/* Animations off: removes the moving triangles, orbs, particles and shimmer */
html[data-motion="off"] .bg-anim > *,
html[data-motion="off"] .sl-tri, html[data-motion="off"] .sl-orb, html[data-motion="off"] .sl-p, html[data-motion="off"] .sl-beam{ display:none !important; }
html[data-motion="off"] header.topbar::after{ display:none; }
html[data-motion="off"] header.topbar::before{ animation:none; }
html[data-motion="off"] .sl-live i{ animation:none; }

.u-susp{ flex:none; font-size:11.5px; font-weight:600; color:#9b1239; background:#fde8ee; border-radius:999px; padding:2px 9px; white-space:nowrap; }

.wp-tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; }
.wp-tools .wp-search{ max-width:240px; }