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

    /* Ink */
    --ink:#1c2230;
    --text:#1c2230;
    --text-dim:#667085;

    /* Brand — navy (authority, primary surfaces) */
    --navy:#1a2744;
    --navy-deep:#111b33;
    --navy-mid:#25365c;
    --header-bg:#1a2744;
    --header-bg-mid:#1a2744;

    /* Brand — teal (go / positive action) */
    --teal:#0e7c86;
    --teal-soft:#12a0ad;
    --teal-pale:#e0f2f4;
    --teal-deep:#0a5c64;

    /* Brand — honey (the bee accent; used sparingly, as a motif) */
    --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(--navy);
    color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 22px; flex-wrap:wrap; gap:10px;
    border-bottom:3px solid var(--honey);
    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; }

  /* ---------- 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:#1a2744; --tri-navy-light:#25365c; --tri-teal:#0e7c86;
  --tri-teal-light:#12a0ad; --tri-honey:#f5b400; --tri-honey-dark:#c98a00;
  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; }
.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:linear-gradient(145deg,var(--navy),var(--navy-mid)); color:#fff;
  box-shadow:0 4px 12px rgba(26,39,68,.22); border-bottom:3px solid var(--honey);
}
.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(--honey)); 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(--honey); 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; } }
@media print{ header.topbar .brand .trust-logo{ 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; }