/* =============================================================================
   main.css — SSL Service Manager · merged CSS of ALL module wireframes (v1)
   Generated 7 Aug 2026 from the 14 module wireframe pages listed below.
   Method: every <style> block extracted; exact-duplicate rules (the shared
   core that repeats on every page) kept once, at first occurrence; each
   page's remaining unique rules follow under its own banner, in page order
   (old 17-administration precedes 28-administration-v2, so v2 wins where
   they overlap). WALL-BOARD.html is EXCLUDED — standalone full-screen page
   whose body/layout rules would override the app shell; JS-injected styles
   (table-tools.js, shell JS) remain in those scripts.
   NOTE: pages were designed standalone; where two pages define the same
   selector differently, the LATER page's rule wins in this merged file.
   The full list of such selectors is in the build note at the end.
   ============================================================================= */


/* ==========================================================================
   SOURCE: 03-service-user-profile-wireframes.html  (619 unique statements)
   ========================================================================== */

circle,line{stroke:%23334a54}
@media(prefers-color-scheme:dark){circle,line{stroke:%23dfe7ea}}
/* ====== Tunstall brand + Mark's SM component language ====== */
  :root{
    --navy:#001923;--slate:#4E5861;--assure:#007689;--tunstall:#334a54;
    --safe:#E6E8E8;--white:#FFFFFF;--border:#c6ccd0;--pri:#334a54;--pri-dk:#22343c;
    --assure-10:rgba(0,118,137,.10);--assure-15:rgba(0,118,137,.15);
    --green:#176b44;--green-bg:rgba(27,125,79,.13);
    --amber:#835400;--amber-bg:rgba(178,106,0,.15);
    --red:#b3261e;--red-bg:rgba(179,38,30,.10);
    --ink:#001923;          /* body text */
    --bg:#eef0f1;           /* page background */
    --bg2:var(--bg2);          /* table headers / nested rows */
    --hover:var(--hover);        /* hover surfaces */
    --slate2:#4E5861;       /* secondary text (theme-aware twin of --slate) */
    --pri-ink:#334a54;      /* text that is dark-slate on light surfaces */
    --ph:#5e686f;           /* placeholder text */
  }
/* ----- dark theme (toggle: System / Light / Dark) ----- */
  html[data-theme="dark"]{
    --ink:#dfe7ea;--bg:#0c1519;--bg2:#16242b;--hover:#20323a;
    --white:#142128;--safe:#1c2c34;--border:#2e404a;--slate:#9fb0b8;--slate2:#9fb0b8;
    --assure:#3aa6b8;--assure-10:rgba(58,166,184,.14);--assure-15:rgba(58,166,184,.20);
    --green:#5dbd8c;--green-bg:rgba(93,189,140,.16);
    --amber:#d9a14a;--amber-bg:rgba(217,161,74,.16);
    --red:#e4756c;--red-bg:rgba(228,117,108,.15);
    --pri-ink:#b9cfd6;--ph:#93a6ae;
  }
@media (prefers-color-scheme: dark){
    html[data-theme="system"]{
      --ink:#dfe7ea;--bg:#0c1519;--bg2:#16242b;--hover:#20323a;
      --white:#142128;--safe:#1c2c34;--border:#2e404a;--slate:#9fb0b8;--slate2:#9fb0b8;
      --assure:#3aa6b8;--assure-10:rgba(58,166,184,.14);--assure-15:rgba(58,166,184,.20);
      --green:#5dbd8c;--green-bg:rgba(93,189,140,.16);
      --amber:#d9a14a;--amber-bg:rgba(217,161,74,.16);
      --red:#e4756c;--red-bg:rgba(228,117,108,.15);
      --pri-ink:#b9cfd6;--ph:#93a6ae;
    }
  }
/* dark-mode AA: pill colours whose light values fail on dark surfaces */
  html.is-dark .p-acc{background:rgba(99,148,233,.20);color:#9dbdf5}
html.is-dark .p-onhold{background:rgba(151,113,224,.22);color:#c4abf7}
html.is-dark .p-live{color:#7ccfdd}
html.is-dark .p-urgent{color:#ef938c}
html.is-dark .ilos img{filter:invert(.88) hue-rotate(180deg)}
html.is-dark .side .tlogo{border-color:var(--slate);color:var(--slate)}
html.is-dark .pill.p-int{color:var(--slate)}
*{box-sizing:border-box}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,label:focus-visible{outline:2px solid var(--assure);outline-offset:2px}
#tb-summary:focus-visible ~ .tabs label[for=tb-summary]{outline:2px solid var(--assure);outline-offset:2px}
#tb-contacts:focus-visible ~ .tabs label[for=tb-contacts]{outline:2px solid var(--assure);outline-offset:2px}
#tb-requests:focus-visible ~ .tabs label[for=tb-requests]{outline:2px solid var(--assure);outline-offset:2px}
#tb-assess:focus-visible ~ .tabs label[for=tb-assess]{outline:2px solid var(--assure);outline-offset:2px}
#tb-equip:focus-visible ~ .tabs label[for=tb-equip]{outline:2px solid var(--assure);outline-offset:2px}
#tb-calls:focus-visible ~ .tabs label[for=tb-calls]{outline:2px solid var(--assure);outline-offset:2px}
#tb-notes:focus-visible ~ .tabs label[for=tb-notes]{outline:2px solid var(--assure);outline-offset:2px}
#tb-msgs:focus-visible ~ .tabs label[for=tb-msgs]{outline:2px solid var(--assure);outline-offset:2px}
#tb-audit:focus-visible ~ .tabs label[for=tb-audit]{outline:2px solid var(--assure);outline-offset:2px}
#rq-all:focus-visible ~ .card label[for=rq-all]{outline:2px solid var(--assure);outline-offset:2px}
#rq-live:focus-visible ~ .card label[for=rq-live]{outline:2px solid var(--assure);outline-offset:2px}
#rq-closed:focus-visible ~ .card label[for=rq-closed]{outline:2px solid var(--assure);outline-offset:2px}
#hide-refs:focus-visible ~ .drawer .refswitch,#drawer-open:focus-visible ~ .drawer .drawer-tab,#ticker-off:focus-visible ~ .ticker-restore{outline:2px solid var(--assure);outline-offset:2px}
::placeholder{color:var(--ph);opacity:1;font-family:var(--font)}
/* FA icon base (Round 12) */
  .fi{display:inline-flex;align-items:center;justify-content:center;width:1em;font-size:16px;line-height:1;flex:none}
.side .fi{font-size:17px;width:20px}
.btn .fi{font-size:14px}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none}*{transition:none!important}}
/* Round 12: Mark-style system font stack, 16px default */
  :root{--font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI Variable","Segoe UI",Arial,sans-serif}
body{font-family:var(--font);margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45}
input,select,textarea,button,::placeholder{font-family:var(--font)}
a{color:var(--assure)}
b,strong,h1,h2,h3{font-weight:700}
svg.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ====== top bar ====== */
  .topbar{background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 10px 28px -30px rgba(15,30,42,.55);display:flex;align-items:center;gap:14px;padding:0 16px;height:48px;position:fixed;top:0;left:0;right:0;z-index:40}
/* header logo: always in the header (Round 13) */
  .topbar .ilos{display:flex;align-items:center;text-decoration:none}
.topbar .ilos-img{height:30px;width:auto}
.hdr-when{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.hdr-when #hdr-date{font-size:13px;font-weight:700;color:var(--ink)}
.hdr-when #clock{font-size:11.5px;font-weight:500;color:var(--slate)}
.searchwrap{margin-left:auto;position:relative;flex:1 1 auto;max-width:620px;min-width:240px}
.searchwrap .searchwrap-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--slate);font-size:14px;pointer-events:none}
.searchwrap input{width:100%;background:rgb(239,243,245);border:1px solid var(--border);color:var(--ink);border-radius:10px;padding:8px 14px 8px 36px;font-size:14px;font-weight:500;outline:none}
.searchwrap input::placeholder{color:var(--ph);font-weight:400}
.searchwrap input:focus{border-color:var(--assure);box-shadow:0 0 0 2px rgba(0,118,137,.22)}
html.is-dark .searchwrap input{background:var(--bg2)}
/* logged-in user menu (Round 12) */
  .usermenu{position:relative;flex:none}
.userbtn{display:flex;align-items:center;gap:8px;background:none;border:1px solid transparent;border-radius:999px;padding:4px 8px 4px 4px;cursor:pointer;color:var(--ink)}
.userbtn:hover{background:var(--hover);border-color:var(--border)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--pri);color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none;letter-spacing:.02em}
.avatar-lg{width:38px;height:38px;font-size:14px}
.userbtn-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.userbtn-txt b{font-size:13px;font-weight:700}
.userbtn-txt small{font-size:11px;color:var(--slate)}
.userbtn-caret{font-size:11px;color:var(--slate);transition:transform .15s}
.usermenu.open .userbtn-caret{transform:rotate(180deg)}
.usermenu-pop{position:absolute;right:0;top:46px;width:262px;background:var(--white);border:1px solid var(--cardborder);border-radius:12px;box-shadow:0 18px 40px rgba(0,25,35,.22);padding:8px;display:none;z-index:60}
.usermenu.open .usermenu-pop{display:block}
.um-head{display:flex;gap:10px;align-items:center;padding:8px 8px 10px}
.um-head b{font-size:14px}
.um-sub{font-size:11.5px;color:var(--slate)}
.um-sep{height:1px;background:var(--border);margin:4px 0}
.um-theme{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;font-size:13px}
.um-theme select{width:auto;padding:4px 8px;font-size:12px;border-radius:8px}
.um-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:500}
.um-item:hover{background:var(--hover)}
.um-item .fi,.um-theme .fi{font-size:14px;width:18px;color:var(--slate)}
.um-signout{color:var(--red)}
.um-signout .fi{color:var(--red)}
/* notifications in the header (Round 13) */
  .notifmenu{position:relative;flex:none}
.iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid transparent;background:none;color:var(--slate);cursor:pointer;font-family:inherit}
.iconbtn:hover{background:var(--hover);border-color:var(--border);color:var(--ink)}
.iconbtn .fi{font-size:17px}
.notif-badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--white)}
.notif-pop{position:absolute;right:0;top:46px;width:340px;max-width:88vw;background:var(--white);border:1px solid var(--cardborder);border-radius:12px;box-shadow:0 18px 40px rgba(0,25,35,.22);padding:6px;display:none;z-index:60}
.notifmenu.open .notif-pop{display:block}
.notif-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px;font-size:13px}
.notif-hd a{font-size:12px;text-decoration:none}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:9px;margin:4px 0;text-decoration:none;color:var(--ink);font-size:12.5px;line-height:1.35}
.notif-item:hover{background:var(--hover)}
.notif-item small{color:var(--slate)}
.notif-item.unread{background:var(--assure-10);box-shadow:inset 3px 0 0 var(--assure)}
.notif-item.unread:hover{background:var(--assure-15)}
.notif-ic{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#fff}
.notif-ic.n-urgent{background:var(--red)}
.notif-ic.n-amber{background:var(--amber)}
.notif-ic.n-blue{background:var(--assure)}
.notif-ic.n-grey{background:var(--slate)}
.notif-foot{display:block;text-align:center;padding:9px;font-size:12px;color:var(--assure);text-decoration:none;font-weight:600;border-top:1px solid var(--border);margin-top:4px}
.notif-foot:hover{background:var(--hover);border-radius:0 0 9px 9px}
.search-drop{position:absolute;top:40px;left:0;right:0;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 40px rgba(0,25,35,.18);overflow:hidden;display:none}
.searchwrap:focus-within .search-drop,.search-drop:hover{display:block}
.sd-item{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--ink)}
.sd-item:hover{background:var(--assure-10)}
.sd-item small{color:var(--slate)}
.sd-foot{display:block;padding:9px 14px;font-size:12px;background:var(--hover);color:var(--assure);font-weight:500;text-decoration:none}
.userchip{font-size:12px;color:var(--slate);white-space:nowrap}
.refswitch{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--slate);cursor:pointer;white-space:nowrap;user-select:none}
.refswitch .track{width:30px;height:16px;border-radius:999px;background:var(--assure);position:relative;transition:.15s;flex:none}
.refswitch .track::after{content:'';position:absolute;top:2px;left:16px;width:12px;height:12px;border-radius:50%;background:#fff;transition:.15s}
#hide-refs:checked ~ .drawer .refswitch .track{background:#b9c2c6}
#hide-refs:checked ~ .drawer .refswitch .track::after{left:2px}
#hide-refs:checked ~ .content .ref,
  #hide-refs:checked ~ .content .anno,
  #hide-refs:checked ~ .side .anno,
  #hide-refs:checked ~ .overlay .ref,
  #hide-refs:checked ~ .overlay .anno{display:none}
/* ----- wireframe drawer: sits outside the app layout (right edge) ----- */
  .drawer{position:fixed;right:0;top:30%;z-index:55;display:flex;align-items:flex-start;font-size:12px}
.drawer-tab{writing-mode:vertical-rl;background:var(--navy);color:#fff;padding:12px 7px;border-radius:10px 0 0 10px;cursor:pointer;font-weight:700;letter-spacing:.08em;box-shadow:-4px 4px 14px rgba(0,25,35,.25);user-select:none}
.drawer-body{display:none;background:var(--white);border:1px solid var(--border);border-right:none;border-radius:12px 0 0 12px;box-shadow:-10px 10px 30px rgba(0,25,35,.2);padding:14px 16px;width:250px}
#drawer-open:checked ~ .drawer .drawer-body{display:block}
.drawer-body h4{margin:0 0 8px;font-size:12px}
.drawer-body p{margin:8px 0 0;color:var(--slate);font-size:11.5px;line-height:1.5}
/* ----- bottom live ticker (Mark's ribbon) ----- */
  .ticker{position:fixed;left:0;right:0;bottom:0;height:32px;background:var(--navy);color:#cfdde3;display:flex;align-items:center;overflow:hidden;z-index:50;font-size:12px}
.ticker-track{display:flex;gap:48px;white-space:nowrap;animation:tick 45s linear infinite;padding-right:48px}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker b{color:#fff}
.ticker .t-sep{color:var(--assure)}
@keyframes tick{to{transform:translateX(-50%)}}
/* content duplicated once → seamless infinite loop */
  .ticker-close{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;padding:0 12px;background:linear-gradient(90deg,transparent,var(--navy) 30%);cursor:pointer;color:#fff;font-weight:700}
#ticker-off:checked ~ .ticker{display:none}
.ticker-restore{display:none;position:fixed;bottom:10px;right:12px;z-index:49;background:var(--navy);color:#fff;border-radius:999px;padding:6px 13px;font-size:11px;font-weight:500;cursor:pointer;box-shadow:0 8px 20px rgba(0,25,35,.35);align-items:center;gap:6px}
#ticker-off:checked ~ .ticker-restore{display:flex}
#ticker-off:checked ~ .content{padding-bottom:0}
#ticker-off:checked ~ .side .powered{margin-bottom:6px}
.content{padding-bottom:32px}
/* ====== left sidebar (Mark's: white, 232px, icon items, solid active highlight) ====== */
  .side{position:fixed;top:48px;left:0;bottom:0;width:232px;background:var(--white);border-right:1px solid var(--border);overflow-y:auto;z-index:30;padding:12px 10px;display:flex;flex-direction:column}
.side .grp{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#8a949b;margin:16px 10px 5px;font-weight:700}
.side a,.side span.mi{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;font-size:14px;color:var(--ink);text-decoration:none;cursor:pointer;margin:1px 0;font-weight:500}
.side span.mi{color:var(--slate)}
/* hover effect (Round 13/14 – soft neutral fill; icons turn teal) */
  .side a:hover,.side span.mi:hover{background:var(--hover)}
.side a:hover .fi,.side span.mi:hover .fi{color:var(--assure)}
.side .badge{margin-left:auto;font-size:10px;background:var(--assure-15);color:#00657a;border-radius:999px;padding:1px 7px;font-weight:700}
body:not(:has(.views :target)) .side a[href="#profile"],
  body:has(#profile:target) .side a[href="#profile"],
  body:has(#profile :target) .side a[href="#profile"],
  body:has(#request:target) .side a[href="#request"],
  body:has(#request :target) .side a[href="#request"],
  body:has(#advsearch:target) .side a[href="#advsearch"],
  body:has(#queue:target) .side a[href="#queue"],
  body:has(#archive:target) .side a[href="#archive"],
  body:has(#archive :target) .side a[href="#archive"],
  body:has(#assessmt:target) .side a[href="#assessmt"],
  body:has(#assessmt :target) .side a[href="#assessmt"],
  body:has(#termprofile:target) .side a[href="#archive"],
  body:has(#termprofile :target) .side a[href="#archive"]{background:rgba(0,118,137,.12);color:var(--ink);font-weight:600;position:relative}
body:not(:has(.views :target)) .side a[href="#profile"]::before,
  body:has(#profile:target) .side a[href="#profile"]::before,
  body:has(#profile :target) .side a[href="#profile"]::before,
  body:has(#request:target) .side a[href="#request"]::before,
  body:has(#request :target) .side a[href="#request"]::before,
  body:has(#advsearch:target) .side a[href="#advsearch"]::before,
  body:has(#queue:target) .side a[href="#queue"]::before,
  body:has(#archive:target) .side a[href="#archive"]::before,
  body:has(#archive :target) .side a[href="#archive"]::before,
  body:has(#assessmt:target) .side a[href="#assessmt"]::before,
  body:has(#assessmt :target) .side a[href="#assessmt"]::before,
  body:has(#termprofile:target) .side a[href="#archive"]::before,
  body:has(#termprofile :target) .side a[href="#archive"]::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 999px 999px 0;background:var(--assure)}
/* active/selected page (Round 13 – per the "Customers" reference: soft teal tint, teal text + icon) */
  body:not(:has(.views :target)) .side a[href="#profile"] .fi,
  body:has(#profile:target) .side a[href="#profile"] .fi,
  body:has(#profile :target) .side a[href="#profile"] .fi,
  body:has(#request:target) .side a[href="#request"] .fi,
  body:has(#request :target) .side a[href="#request"] .fi,
  body:has(#advsearch:target) .side a[href="#advsearch"] .fi,
  body:has(#queue:target) .side a[href="#queue"] .fi,
  body:has(#archive:target) .side a[href="#archive"] .fi,
  body:has(#archive :target) .side a[href="#archive"] .fi,
  body:has(#assessmt:target) .side a[href="#assessmt"] .fi,
  body:has(#assessmt :target) .side a[href="#assessmt"] .fi,
  body:has(#termprofile:target) .side a[href="#archive"] .fi,
  body:has(#termprofile :target) .side a[href="#archive"] .fi{color:var(--assure)}
/* Round 13: Powered by at the bottom; collapse button returns to the top (see below) */
  .side-foot{margin-top:auto;padding-top:10px;margin-bottom:36px}
body.navmin .side{width:58px;padding:12px 6px}
body.navmin .side a,body.navmin .side span.mi{justify-content:center;padding:10px 8px}
body.navmin .side .nav-txt{display:none}
body.navmin .side .grp,body.navmin .side .badge,body.navmin .side .anno,body.navmin .side .powered{display:none}
body.navmin .content{margin-left:58px}
.side .powered{padding:14px 10px 0;text-align:left}
.side .powered p{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#8a949b}
.side .powered .tlogo-img{height:30px;width:auto;opacity:.85}
/* collapse button – original circular control at the top (Round 13 revert) */
  .navtoggle{position:fixed;left:219px;top:62px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--border);background:var(--white);border-radius:50%;color:var(--slate);cursor:pointer;font-family:inherit;z-index:35;box-shadow:0 2px 8px rgba(0,25,35,.12);transition:left .15s}
.navtoggle:hover{border-color:var(--pri-ink);color:var(--pri-ink)}
.navtoggle .navtoggle-ic{font-size:12px;transition:transform .15s}
body.navmin .navtoggle .navtoggle-ic{transform:rotate(180deg)}
body.navmin .navtoggle{left:45px}
html.is-dark .side .powered .tlogo-img{filter:invert(1) brightness(1.6) contrast(.9);opacity:.7}
/* ====== layout ====== */
  .content{margin:48px 0 0 232px;min-height:calc(100vh - 48px)}
.crumbs{padding:9px 20px;font-size:12.5px;color:var(--slate);background:var(--white);border-bottom:1px solid var(--border)}
.crumbs b{color:var(--ink);font-weight:500}
.crumbs a{text-decoration:none}
.mainc{padding:16px 22px;width:100%}
/* stretches to the full viewport – incl. 4K (review item 3) */
  /* ----- responsiveness ----- */
  @media (min-width:2200px){ .mainc{padding:16px 36px} .grid{grid-template-columns:380px 1fr} }
@media (max-width:900px){
    .side{width:58px;padding:12px 6px}
    .side a,.side span.mi{justify-content:center;padding:10px 8px}
    .side .nav-txt{display:none}
    .side .grp,.side .badge,.side .powered,.side .anno{display:none}
    .navtoggle{justify-content:center;padding:10px 8px}
    .navtoggle .nav-txt{display:none}
    .content{margin-left:58px}
    .searchwrap{min-width:160px;max-width:300px}
    .userbtn-txt{display:none}
  }
@media (max-width:640px){
    .frow{grid-template-columns:1fr}
    .grid{grid-template-columns:1fr}
    .ilos small{display:none}
    .mainc{padding:12px 10px}
    .card-b{overflow-x:auto}
  }
/* ====== views: default = profile; :target switches ====== */
  .views > section{display:none}
.views > section#profile{display:block}
.views:has(:target) > section#profile{display:none}
.views > section:target{display:block}
.views > section:has(:target){display:block}
.views:has(#profile:target) > section#profile{display:block}
/* must out-rank the ID-based hide rule above: keep the profile visible while one of its own modals is the :target */
  .views > section#profile:has(:target){display:block}
/* ====== components ====== */
  .pill{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;vertical-align:middle;line-height:1.6}
.p-active{background:var(--green-bg);color:var(--green)}
.p-live{background:var(--assure-15);color:#00657a}
.p-urgent{background:var(--red-bg);color:var(--red)}
.p-hold{background:var(--amber-bg);color:var(--amber)}
.p-closed{background:var(--safe);color:var(--slate)}
.p-draft{background:var(--amber-bg);color:var(--amber)}
.p-pub{background:var(--green-bg);color:var(--green)}
.p-term{background:var(--safe);color:var(--slate)}
.p-redact{background:var(--red-bg);color:var(--red)}
.p-int{background:var(--safe);color:var(--tunstall);border:1px solid var(--border)}
.p-acc{background:rgba(59,111,212,.14);color:#2c56a8}
/* accepted / acknowledged */
  .p-prog{background:var(--amber-bg);color:var(--amber)}
/* in progress / scheduled */
  .p-done{background:var(--green-bg);color:var(--green)}
/* complete / closed-successfully */
  .p-onhold{background:rgba(124,77,187,.16);color:#5e3a96}
/* on hold – distinct from in-progress */
  /* Round 12: more prominent section borders */
  :root{--cardborder:rgba(27,46,55,0.45)}
html[data-theme="dark"]{--cardborder:#3a4d57}
@media (prefers-color-scheme: dark){html[data-theme="system"]{--cardborder:#3a4d57}}
.card{background:var(--white);border:1px solid var(--cardborder);border-radius:10px;margin-bottom:14px;overflow:hidden;box-shadow:0 1px 2px rgba(0,25,35,.06)}
.card-h{padding:11px 16px;border-bottom:1.5px solid var(--cardborder);display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(0deg,var(--bg2),var(--white))}
/* item 7: consistent, emphasised section/table titles (Mark's SM: bold primary heading + accent) */
  .card-h h3{margin:0;font-size:15px;font-weight:700;color:var(--pri-ink);letter-spacing:.005em;display:inline-flex;align-items:center;gap:9px;line-height:1.3}
.card-h h3::before{content:'';width:4px;height:16px;border-radius:3px;background:var(--assure);flex:none}
.card-h small{color:var(--slate)}
/* Round 12: count filter buttons in section headers */
  .svc-counts{display:inline-flex;gap:6px;flex-wrap:wrap}
.countbtn{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--border);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:600;color:var(--slate);cursor:pointer;font-family:inherit}
.countbtn .fi{font-size:11px}
.countbtn b{font-weight:800;color:var(--ink)}
.countbtn:hover{border-color:var(--pri-ink)}
.countbtn.is-on{background:var(--pri);border-color:var(--pri);color:#fff}
.countbtn.is-on b{color:#fff}
.countbtn.cb-active.is-on{background:var(--green);border-color:var(--green)}
.countbtn.cb-exp.is-on{background:var(--amber);border-color:var(--amber)}
/* Round 12: working Columns picker */
  .colmenu{position:relative;display:inline-block}
/* Round 13: results card lets the columns dropdown overflow on top of the table */
  .card.popover-host{overflow:visible}
.colmenu-pop{position:absolute;right:0;top:34px;background:var(--white);border:1px solid var(--cardborder);border-radius:10px;box-shadow:0 16px 36px rgba(0,25,35,.2);padding:8px;min-width:200px;z-index:70;display:none}
.colmenu.open .colmenu-pop{display:block}
.colmenu-hd{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#8a949b;padding:2px 6px 6px}
.colmenu-pop label{display:flex;align-items:center;gap:8px;padding:5px 6px;font-size:13px;font-weight:400;color:var(--ink);border-radius:7px;cursor:pointer}
.colmenu-pop label:hover{background:var(--hover)}
.colmenu-pop input{width:auto}
.card-b{padding:14px 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:10px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;text-align:center;line-height:1.3;transition:.12s}
.btn-pri{background:var(--pri);color:#fff}
.btn-pri:hover{background:var(--pri-dk)}
.btn-sec{background:var(--white);color:var(--pri-ink);border-color:var(--border)}
.btn-sec:hover{border-color:var(--pri-ink);background:var(--hover)}
.btn-dan{background:var(--white);color:var(--red);border-color:rgba(179,38,30,.35)}
.btn-dan:hover{border-color:var(--red);background:var(--red-bg)}
.btn-sm{padding:4px 11px;font-size:12px}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;padding:8px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);border-bottom:1px solid var(--border);background:var(--bg2);font-weight:700}
td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:hover td{background:var(--assure-10)}
a.rowlink{font-weight:700;text-decoration:underline}
.ref{text-decoration:none;font-size:10px;font-weight:500;color:var(--assure);background:var(--assure-10);border:1px solid rgba(0,118,137,.25);border-radius:4px;padding:0 5px;vertical-align:middle;margin-left:6px;cursor:help;line-height:1.5;display:inline-block}
/* profile */
  .grid{display:grid;grid-template-columns:330px 1fr;gap:14px;align-items:start}
@media (max-width:1100px){.grid{grid-template-columns:1fr}}
/* Round 15: label + value on one line; overflowing values truncate with an ellipsis-expand control */
  .idrow{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:13px}
.idrow .k{flex:none;width:120px;color:var(--slate);font-size:12px;display:inline-flex;align-items:center;gap:7px}
.idrow .k .fi{font-size:12px;width:15px;color:var(--ink)}
.idrow .v{flex:1 1 auto;min-width:0;white-space:normal;overflow:visible}
.idrow.expanded{align-items:flex-start}
.idrow.expanded .v{white-space:normal;overflow:visible}
.idrow .ref{flex:none}
.vmore{flex:none;display:none;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--slate);cursor:pointer;font-size:10px;padding:0;font-family:inherit;line-height:1}
.vmore:hover{border-color:var(--assure);color:var(--assure)}
/* compact profile header (Round 15) */
  .id-head{display:flex;gap:13px;align-items:flex-start;flex-wrap:wrap}
.id-logo{flex:none;border-radius:12px}
.id-head-main{flex:1 1 220px;min-width:160px}
/* item 10: Print/Edit grouped top-right; wrap below the name on narrow widths so they never overlap it */
  .id-actions{flex:none;margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.id-name{font-size:17px;font-weight:700;line-height:1.2}
.id-sub{color:var(--slate);font-size:12.5px;margin:2px 0 7px}
.id-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.id-edit{flex:none;align-self:flex-start}
/* Round 13: plain identity details (no panel background) */
  .id-key{margin:2px 0}
.id-key .idrow{margin:10px 0}
.id-more{margin:0}
.showmore-wrap{display:flex;justify-content:flex-end;margin-top:4px}
.showmore-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--border);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:600;color:var(--assure);cursor:pointer;font-family:inherit}
.showmore-btn:hover{background:var(--hover);border-color:var(--assure)}
.showmore-btn .fi{font-size:9px;transition:transform .15s}
.showmore-btn[aria-expanded="true"] .fi{transform:rotate(180deg)}
.dot{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;border:1px solid rgba(0,0,0,.15)}
.kw{display:inline-flex;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:700;margin:2px 3px 2px 0;color:#fff}
/* tabs */
  .tabctl{position:absolute;opacity:0;pointer-events:none}
.tabs{display:inline-flex;gap:3px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:14px;flex-wrap:wrap}
.tabs label{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:12.5px;color:var(--slate);cursor:pointer;border-radius:9px;white-space:nowrap;font-weight:500;transition:.12s}
.tabs label:hover{background:var(--hover);color:var(--ink)}
.tabs svg.ti{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tabs i.ti{font-size:13px;width:15px;text-align:center;flex:none}
.ptab{display:none}
#tb-summary:checked  ~ .tabs label[for=tb-summary],
  #tb-contacts:checked ~ .tabs label[for=tb-contacts],
  #tb-requests:checked ~ .tabs label[for=tb-requests],
  #tb-assess:checked   ~ .tabs label[for=tb-assess],
  #tb-equip:checked    ~ .tabs label[for=tb-equip],
  #tb-calls:checked    ~ .tabs label[for=tb-calls],
  #tb-notes:checked    ~ .tabs label[for=tb-notes],
  #tb-msgs:checked     ~ .tabs label[for=tb-msgs],
  #tb-audit:checked    ~ .tabs label[for=tb-audit]{background:var(--assure-10);color:var(--assure);font-weight:600}
/* counter pills inside the ACTIVE (dark) tab: invert to stay visible */
  #tb-summary:checked  ~ .tabs label[for=tb-summary] .pill,
  #tb-contacts:checked ~ .tabs label[for=tb-contacts] .pill,
  #tb-requests:checked ~ .tabs label[for=tb-requests] .pill,
  #tb-assess:checked   ~ .tabs label[for=tb-assess] .pill,
  #tb-equip:checked    ~ .tabs label[for=tb-equip] .pill,
  #tb-calls:checked    ~ .tabs label[for=tb-calls] .pill,
  #tb-notes:checked    ~ .tabs label[for=tb-notes] .pill,
  #tb-msgs:checked     ~ .tabs label[for=tb-msgs] .pill,
  #tb-audit:checked    ~ .tabs label[for=tb-audit] .pill{background:var(--assure);color:#fff}
#tb-summary:checked  ~ #pt-summary,
  #tb-contacts:checked ~ #pt-contacts,
  #tb-requests:checked ~ #pt-requests,
  #tb-assess:checked   ~ #pt-assess,
  #tb-equip:checked    ~ #pt-equip,
  #tb-calls:checked    ~ #pt-calls,
  #tb-notes:checked    ~ #pt-notes,
  #tb-msgs:checked     ~ #pt-msgs,
  #tb-audit:checked    ~ #pt-audit{display:block}
.fbar{display:flex;gap:6px;margin-bottom:10px;align-items:center;flex-wrap:wrap}
.fpill{padding:5px 14px;border:1px solid var(--border);border-radius:999px;font-size:12px;font-weight:500;color:var(--slate);cursor:pointer;background:var(--white)}
/* item 1 (Ivan, 14 Jul 2026): the request filters moved into the table's card header, so the
     :checked selectors now reach the pills through .card instead of the retired .fbar. */
  #rq-all:checked ~ .card label[for=rq-all],
  #rq-live:checked ~ .card label[for=rq-live],
  #rq-closed:checked ~ .card label[for=rq-closed]{background:var(--pri);border-color:var(--pri);color:#fff}
.fpills{display:inline-flex;gap:6px;align-items:center;flex:none}
/* item 1: one phone glyph – the platform does not record whether a number is mobile/home/work */
  .phico{color:var(--slate);font-size:11px;margin-right:2px}
/* item 3: the request key sits under its title, muted – the Requests-console pattern */
  .rid{display:block;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;color:var(--slate);margin-top:2px}
/* item 1: the advanced-search Columns button is icon-only like the rest of the platform */
  .colbtn-icon{gap:0;padding:0;width:32px;height:32px;justify-content:center;flex:none}
/* item 2: the audit filters live in the table header, so they are compact inline controls */
  .audit-h{flex-wrap:wrap;row-gap:8px}
.au-filters{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.au-filters select,.au-filters input[type=date]{width:auto;flex:none;padding:5px 9px;font-size:12.5px;border-radius:8px}
.au-range{display:inline-flex;gap:6px;align-items:center}
.au-dash{font-size:12px;color:var(--slate)}
/* item 3: the equipment scope filter reads as part of the table title, not a page-level control */
  .eq-scope{flex:none;width:auto;min-width:170px;padding:5px 10px;font-size:12.5px;border-radius:8px}
#rq-live:checked ~ .card tr.rq-c{display:none}
#rq-closed:checked ~ .card tr.rq-l{display:none}
#nc-lookup:placeholder-shown ~ .sugg{display:none}
.task-row td{background:var(--bg2);font-size:12.5px}
.task-row td:first-child{padding-left:34px}
.tkey{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:11px;color:var(--slate);white-space:nowrap}
/* seniority / task-complexity tags (Senior / Mid / Junior) */
.lvl{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:700;line-height:1.6;white-space:nowrap}
.lvl-sen{background:#ede3f7;color:#6b3fa0}
.lvl-mid{background:#e0eef1;color:#0a6c7e}
.lvl-jun{background:#e7ecef;color:#4E5861}
html.is-dark .lvl-sen{background:#3a2a52;color:#cdb0ef}
html.is-dark .lvl-mid{background:#123740;color:#84d2e0}
html.is-dark .lvl-jun{background:#2a3138;color:#b2bcc3}
/* review fix: tags / pills / badges / chips never wrap onto a new line */
  .pill,.bdg,.chip,.grp-chip,.kw,.lvl,.mw-chip,.wait,.rkw-chip,.rl-chip,.rtag,.phonechip,.eta,.fpill,.pc-chip,.tbd,.badge,.sz,.tkey,.rkey,.cnt,.cscore,.gct,.step,.countbtn{white-space:nowrap}
/* item 1 (batch3): scrollable messages dropdown */
  .notif-pop{max-height:min(72vh,440px);overflow-y:auto}
/* item 1 (batch5): horizontal-scroll indicator – gradient edge shades overlaid ABOVE the table (so cell backgrounds don't hide them), shown only when content is hidden. Each table is wrapped at runtime (tables are the scroll container on mobile). */
  .twshade{position:relative}
.tws-l,.tws-r{position:absolute;top:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:4}
.tws-l{left:0;background:linear-gradient(to right, rgba(0,25,35,.22), rgba(0,0,0,0))}
.tws-r{right:0;background:linear-gradient(to left, rgba(0,25,35,.22), rgba(0,0,0,0))}
.twshade.has-l .tws-l{opacity:1}
.twshade.has-r .tws-r{opacity:1}
html.is-dark .tws-l{background:linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0))}
html.is-dark .tws-r{background:linear-gradient(to left, rgba(0,0,0,.55), rgba(0,0,0,0))}
.notebox{border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin:6px 0;font-size:12.5px;background:var(--bg2)}
.notebox small{color:var(--slate)}
.avail{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:10.5px;text-align:center;margin-top:6px}
.avail div{padding:4px 2px;border-radius:5px;background:var(--green-bg);color:var(--green);font-weight:700}
.avail div.na{background:var(--red-bg);color:var(--red)}
.phonerow{display:flex;gap:8px;align-items:center;margin:6px 0}
.phonechip{display:inline-flex;align-items:center;gap:6px;background:var(--safe);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:12px}
.phonechip a{text-decoration:none;color:var(--slate)}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:12.5px}
.cats label{display:flex;align-items:center;gap:7px;margin:2px 0;font-weight:400;color:var(--ink)}
.cats input{width:auto}
.sugg{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:8px 0}
.sugg .s-h{background:var(--hover);padding:6px 12px;font-size:11px;color:var(--slate);font-weight:700}
.sugg a,.sugg .srow{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-top:1px solid var(--border);font-size:12.5px;text-decoration:none;color:var(--navy)}
.sugg a:hover{background:var(--assure-10)}
/* modals */
  .overlay{position:fixed;inset:0;background:rgba(0,25,35,.45);display:none;align-items:center;justify-content:center;z-index:60}
.overlay:target,.overlay.open{display:flex}
.modal{background:var(--white);border-radius:14px;max-width:640px;width:94%;box-shadow:0 24px 60px rgba(0,25,35,.35);max-height:90vh;overflow-y:auto}
.modal-h{background:var(--navy);color:#fff;padding:13px 18px;font-weight:700;display:flex;justify-content:space-between;font-size:14px;position:sticky;top:0}
.modal-h a,.modal-h span.x{color:#fff;opacity:.7;text-decoration:none;cursor:pointer}
.modal-b{padding:18px}
.steps{display:flex;gap:6px;margin-bottom:14px}
.step{flex:1;height:5px;border-radius:999px;background:var(--safe)}
.step.on{background:var(--assure)}
/* === progressive disclosure + per-type SLA panel (ported from file 14) === */
  .nr-rest{display:none}
.nr-rest.on{display:block}
.nr-pick{background:var(--bg2);border:1px dashed var(--border);border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--slate);margin:12px 0 2px}
.slabox{border:1.5px solid var(--assure);border-left:5px solid var(--assure);background:var(--assure-10);border-radius:12px;padding:11px 14px;margin:12px 0 4px}
.slabox .sla-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--assure);margin-bottom:4px}
.slabox .sla-t{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.slabox .sla-s{font-size:11.5px;color:var(--slate);margin-top:3px}
.slabox.urgent{border-color:var(--red);border-left-color:var(--red);background:var(--red-bg)}
.slabox.urgent .sla-h{color:var(--red)}
.booked{display:none;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);background:var(--green-bg);border:1px solid rgba(27,125,79,.35);border-radius:9px;padding:7px 11px;margin:6px 0 0}
.booked.on{display:flex}
.booked .fi{color:var(--green)}
.schedgrid{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:8px 0}
.schedrow{display:grid;grid-template-columns:150px 1fr;border-top:1px solid var(--border)}
.schedrow:first-child{border-top:none}
.schedrow .who{padding:8px 10px;font-size:12.5px;font-weight:600;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
.schedrow .who small{font-weight:400;color:var(--slate)}
.slots{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;align-items:center}
.slot{border:1px solid var(--border);border-radius:8px;padding:5px 9px;font-size:11.5px;font-family:inherit;background:var(--white);color:var(--ink);cursor:pointer}
.slot:hover{border-color:var(--assure);color:var(--assure);background:var(--assure-10)}
.slot.busy{background:var(--hover);color:var(--slate);text-decoration:line-through;cursor:not-allowed;border-style:dashed}
.slot.off{background:transparent;color:var(--slate);border-style:dashed;cursor:not-allowed}
.reflib-list{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:8px 0;max-height:320px;overflow-y:auto}
.reflib-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--border);font-size:12.5px;cursor:pointer}
.reflib-row:first-child{border-top:none}
.reflib-row:hover{background:var(--hover)}
.reflib-row .ri{color:var(--assure);font-size:15px;width:18px;text-align:center}
.reflib-row .rt{flex:1}
.reflib-row .rt b{display:block;color:var(--ink)}
.reflib-row .rt small{color:var(--slate)}
.reflib-row .rtag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:2px 8px}
.sugglink{display:flex;align-items:center;gap:8px;font-size:12px;background:var(--bg2);border:1px dashed var(--border);border-radius:9px;padding:6px 10px;margin:5px 0}
.sugglink .fi{color:var(--assure)}
.sugglink button{margin-left:auto;border:1px solid var(--assure);background:var(--white);color:var(--assure);border-radius:8px;font-size:11px;font-weight:700;padding:3px 9px;cursor:pointer;font-family:inherit}
.w3wmap-box{position:relative;height:230px;border:1px solid var(--border);border-radius:10px;margin:8px 0;overflow:hidden;background:linear-gradient(0deg,rgba(0,118,137,.06),rgba(0,118,137,.06)),repeating-linear-gradient(0deg,var(--bg2),var(--bg2) 26px,var(--white) 26px,var(--white) 27px),repeating-linear-gradient(90deg,var(--bg2),var(--bg2) 26px,var(--white) 26px,var(--white) 27px)}
.w3wpin{position:absolute;transform:translate(-50%,-100%);color:var(--red);font-size:22px}
.w3wsq{position:absolute;width:30px;height:20px;border:2px solid var(--assure);background:rgba(0,118,137,.12);transform:translate(-50%,-50%);border-radius:3px;cursor:pointer}
.w3wsq:hover,.w3wsq:focus-visible{background:rgba(0,118,137,.28);outline:2px solid var(--assure);outline-offset:1px}
.w3wroad{position:absolute;left:-6%;right:-6%;top:30%;height:18px;background:#dfe4e7;border-top:1px solid #c6ccd0;border-bottom:1px solid #c6ccd0;transform:rotate(-4deg);display:flex;align-items:center}
.w3wroad span{font-size:10px;color:#7c878e;font-weight:700;letter-spacing:.04em;margin-left:14%}
.w3wbldg{position:absolute;left:30%;top:40%;width:18%;height:18%;background:rgba(78,88,97,.18);border:1.5px solid var(--slate);border-radius:2px;display:flex;align-items:center;justify-content:center}
.w3wbldg span{font-size:11px;font-weight:700;color:var(--slate)}
.w3wcap{position:absolute;left:8px;bottom:8px;background:var(--white);border:1px solid var(--border);border-radius:7px;padding:3px 8px;font-size:11px;font-weight:600;color:var(--ink);box-shadow:0 2px 6px rgba(0,25,35,.12)}
.w3wcap .fi{color:var(--red)}
.urgflag{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:700;font-size:12.5px}
.urgflag .fi{font-size:12px}
.pill.p-shared{background:#e3f1f3;color:#0a6b7d}
html.is-dark .pill.p-shared{background:rgba(58,166,184,.22);color:#bfe6ee}
.lu-cand{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--white);border:1px solid var(--border);border-radius:9px;padding:9px 12px;margin:6px 0;cursor:pointer;font-family:inherit;font-size:13px;color:var(--ink)}
.lu-cand:hover,.lu-cand:focus-visible{background:var(--hover);border-color:var(--assure);outline:none}
.lu-eq{display:flex;align-items:center;gap:8px;font-weight:400}
.lu-eq input{width:auto}
.addr-wrap{position:relative}
.addr-sugg{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--white);border:1px solid var(--border);border-top:none;border-radius:0 0 9px 9px;box-shadow:0 8px 20px rgba(0,25,35,.14);display:none;max-height:200px;overflow:auto}
.addr-sugg.open{display:block}
.addr-sugg button{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 12px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--bg2)}
.addr-sugg button:hover{background:var(--hover)}
/* task-row quick actions (named .tqa – file 03's .qa is a different component) */
  .tqa{display:inline-flex;gap:3px}
.tqa a,.tqa button{width:28px;height:28px;border-radius:8px;border:1px solid transparent;background:none;color:var(--slate);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;font-size:12.5px;text-decoration:none}
.tqa a:hover,.tqa button:hover{background:var(--hover);border-color:var(--border);color:var(--assure)}
.tqa .qa-dan:hover{color:var(--red)}
.sla{font-weight:700;font-variant-numeric:tabular-nums}
.sla.amber{color:var(--amber)}
.sla.red{color:var(--red)}
.sla.green{color:var(--green)}
/* linked-requests indicator on the Requests tab */
  .linkedbanner{display:flex;align-items:center;gap:9px;background:var(--assure-10);border:1px solid var(--assure);border-radius:10px;padding:9px 13px;font-size:12.5px;color:var(--ink);margin:0 0 12px}
.linkedbanner .fi{color:var(--assure);font-size:14px}
.warn{background:var(--amber-bg);border:1px solid rgba(178,106,0,.35);border-radius:10px;padding:10px 12px;font-size:12.5px;margin:10px 0}
.danger-note{background:var(--red-bg);border:1px solid rgba(179,38,30,.3);border-radius:10px;padding:10px 12px;font-size:12.5px;margin:10px 0}
.okay{background:var(--green-bg);border:1px solid rgba(27,125,79,.35);border-radius:10px;padding:10px 12px;font-size:12.5px;margin:10px 0}
label{font-size:12px;color:var(--slate);font-weight:700}
.modal-b label{display:block;margin:10px 0 4px}
/* item 1 (Ivan, 14 Jul 2026): email/number/search/url were missing from this list, so any such
     input rendered as a raw browser control next to the styled ones. Kept as an explicit list
     rather than a blanket input{} so checkboxes, radios and file inputs stay untouched. */
  select,input[type=text],input[type=email],input[type=number],input[type=search],input[type=url],input[type=password],input[type=date],input[type=tel],input[type=time],textarea{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;color:var(--ink);background:var(--white)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--assure);box-shadow:0 0 0 2px rgba(0,118,137,.2)}
textarea{resize:vertical}
.inline select,.inline input{width:auto}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.ntgrp{display:none}
.ntgrp.on{display:block}
.qa{border-bottom:1px solid var(--border);padding:7px 0;font-size:12.5px}
.qa .q{color:var(--slate);font-size:11.5px}
.toast{position:fixed;top:60px;right:16px;background:var(--white);border:1px solid var(--border);border-left:4px solid var(--green);border-radius:10px;box-shadow:0 14px 34px rgba(0,25,35,.2);padding:10px 14px 10px 12px;font-size:12.5px;color:var(--ink);z-index:90;display:none;max-width:330px;font-weight:500}
.toast::before{content:'✓ ';color:var(--green);font-weight:700}
.wf-note{position:fixed;bottom:14px;right:14px;background:var(--navy);color:#fff;font-size:12px;padding:10px 14px;border-radius:10px;max-width:300px;box-shadow:0 10px 24px rgba(0,25,35,.4);z-index:70;display:none}
.availtbl{width:100%;border-collapse:collapse;table-layout:auto}
.availtbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);text-align:left;font-weight:700;padding:4px 8px}
.availtbl td{padding:5px 8px;white-space:nowrap}
.availtbl input[type=time]{width:104px;padding:4px 7px}
/* ===== item 8: lock the page behind an open popup ===== */
  body:has(.overlay:target){overflow:hidden}
body.modal-open{overflow:hidden}
/* ===== item 12.3: interaction grammar – quick context (task, device) opens as a slide-in side panel, not a centred modal ===== */
  .overlay.panel{align-items:stretch;justify-content:flex-end}
.overlay.panel .modal{max-width:460px;width:100%;max-height:100vh;height:100vh;border-radius:0;box-shadow:-26px 0 70px rgba(0,25,35,.35)}
@media (prefers-reduced-motion: no-preference){.overlay.panel:target .modal,.overlay.panel.open .modal{animation:slidein .18s ease}}
@keyframes slidein{from{transform:translateX(34px);opacity:.5}to{transform:none;opacity:1}}
@media (max-width:640px){.overlay.panel .modal{max-width:100%}}
/* ===== item 12.5: required-field marks, inline validation, error summary ===== */
  .req{color:var(--red);font-weight:700;margin-left:2px;text-decoration:none}
.err-summary{display:none;background:var(--red-bg);border:1px solid rgba(179,38,30,.35);border-radius:10px;padding:10px 12px;font-size:12.5px;margin:0 0 10px;color:var(--red)}
.err-summary.on{display:block}
.err-summary a{color:var(--red);font-weight:700}
input.invalid,select.invalid,textarea.invalid{border-color:var(--red)!important;box-shadow:0 0 0 2px rgba(179,38,30,.18)}
.field-err{color:var(--red);font-size:11.5px;margin-top:3px;display:none;font-weight:500}
.field-err.on{display:block}
/* ===== item 13.1: urgent-request ARC timeline (S-013) ===== */
  .timeline{display:flex;gap:0;margin:4px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.timeline li{flex:1;min-width:110px;position:relative;padding:0 6px 0 0}
.timeline .tl-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--border);background:var(--white);display:inline-block;position:relative;z-index:1}
.timeline li::after{content:'';position:absolute;top:6px;left:13px;right:0;height:3px;background:var(--border)}
.timeline li:last-child::after{display:none}
.timeline li.done .tl-dot{background:var(--green);border-color:var(--green)}
.timeline li.done::after{background:var(--green)}
.timeline li.now .tl-dot{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-bg)}
.timeline .tl-lbl{display:block;margin-top:7px;font-weight:700;font-size:12px}
.timeline .tl-time{display:block;font-size:11px;color:var(--slate)}
.eta{display:inline-flex;align-items:center;gap:6px;background:var(--amber-bg);color:var(--amber);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700}
/* ===== item 13.4: contact call-order badge ===== */
  .ord{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--assure-15);color:var(--assure);font-weight:700;font-size:12.5px;flex:none}
/* ===== item 13.2: per-row quick actions ===== */
  .qa-cell{display:flex;gap:4px;align-items:center;white-space:nowrap}
/* item 1: services – action icons aligned to the right of the column */
  #svctbl td:last-child{text-align:right}
#svctbl .qa-cell{justify-content:flex-end}
.qa-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--slate2);cursor:pointer;font-family:inherit}
.qa-ic:hover{border-color:var(--pri-ink);color:var(--pri-ink);background:var(--hover)}
/* ===== item 12.6: typeahead keyboard model ===== */
  .sd-item.active,.sd-item:focus{background:var(--assure-10);outline:none}
.search-drop mark{background:#ffd23d;color:#2a2000;border-radius:3px;padding:0 3px;font-weight:700;box-shadow:0 0 0 1px rgba(120,86,0,.35)}
html.is-dark .search-drop mark{background:#ffcf33;color:#241a00;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.sd-empty{padding:12px 14px;color:var(--slate);font-size:12.5px}
/* ===== item 12.1: assessment as a full-page route ===== */
  .assess-wrap{display:grid;grid-template-columns:228px 1fr;gap:20px;align-items:start}
@media (max-width:900px){.assess-wrap{grid-template-columns:1fr}}
.assess-nav{position:sticky;top:62px}
.assess-nav a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink);font-weight:500;font-size:13px;margin:2px 0}
.assess-nav a:hover{background:var(--hover)}
.assess-nav a.cur{background:var(--pri);color:#fff}
.assess-nav .gct{font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;background:var(--assure-15);color:var(--assure)}
.assess-nav a.cur .gct{background:#fff;color:var(--pri-ink)}
.assess-grp{scroll-margin-top:120px}
.autosave{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--green);font-weight:600}
.autosave .dotpulse{width:8px;height:8px;border-radius:50%;background:var(--green)}
@media (prefers-reduced-motion: no-preference){.autosave .dotpulse{animation:pulse 2s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.stickybar{position:sticky;top:48px;z-index:20;background:var(--white);border-bottom:1px solid var(--border);padding:10px 22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* ===== item 5: audit pagination – numbered pages (replaces 'show more') ===== */
  .pager{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pager button{min-width:30px;height:30px;border:1px solid var(--border);background:var(--white);color:var(--ink);border-radius:8px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:0 8px}
.pager button:hover:not(:disabled){border-color:var(--pri-ink);background:var(--hover)}
.pager button.cur{background:var(--pri);color:#fff;border-color:var(--pri)}
.pager button:disabled{opacity:.4;cursor:default}
/* ===== item 7: Requests tab – visually separate each request block ===== */
  #pt-requests table tr.rq-head > td{border-top:12px solid var(--bg)}
/* ===== item 14 (Ivan, 13 Jul 2026): active-incident card at the top of the Summary tab =====
     Red accent bar + pulsing dot so a live incident reads instantly, without shouting over the
     rest of the profile. Uses the existing .arc-panel timeline inside it. */
  .incident-card{position:relative;border-color:rgba(179,38,30,.45);box-shadow:0 1px 3px rgba(179,38,30,.14)}
.incident-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px;background:var(--red)}
/* item 1.5 (Ivan, 14 Jul 2026): "all day unavailable" greys the row's times out rather than
     just disabling them, so the row reads as switched off at a glance. The values stay put, ready
     for when the box is unticked. An invalid window (start >= end) is flagged in red on both inputs. */
  .availtbl tr.day-off td{background:var(--hover)}
.availtbl tr.day-off input[type=time]{opacity:.42;color:var(--slate);background:var(--hover);border-color:var(--border);cursor:not-allowed;text-decoration:line-through}
.availtbl tr.day-off td:first-child b{color:var(--slate)}
.availtbl input[type=time].invalid{border-color:var(--red);background:var(--red-bg);color:var(--red)}
.availtbl input[type=time].invalid:focus{outline:2px solid var(--red);outline-offset:1px}
/* item 1.7 (Ivan, 14 Jul 2026): dwelling / risk colour selects show the actual colour.
     Native <option> styling is limited, but background-color on an option is honoured in
     Chrome, Edge and Firefox on desktop; the swatch on the select itself works everywhere,
     and the colour name is always present, so nothing depends on colour alone (WCAG 1.4.1). */
  .colsel{padding-left:32px}
.colsel option{padding-left:6px;font-weight:600}
.colsel option[value="blue"]{background:#d7e8f5;color:#12496e}
.colsel option[value="green"]{background:#d8efe0;color:#14603a}
.colsel option[value="amber"]{background:#fbeacd;color:#7a4d00}
.colsel option[value="red"]{background:#f7d9d7;color:#8c1d17}
.colwrap{position:relative}
.colwrap .colswatch{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,25,35,.28);pointer-events:none}
.sw-blue{background:#2f6f9f}
.sw-green{background:#1b7d4f}
.sw-amber{background:#e9a100}
.sw-red{background:#b3261e}
/* item 1.6: the preferred name reads with the name, not as a separate row */
  .id-knownas{font-weight:400;color:var(--slate);font-size:.86em}
.incident-card .card-h h3{display:flex;align-items:center;gap:8px;color:var(--red)}
/* the standard teal title accent bar is suppressed here – the red pulsing dot is the marker */
  .incident-card .card-h h3::before{display:none}
.inc-dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;box-shadow:0 0 0 0 rgba(179,38,30,.55);animation:incpulse 1.8s ease-out infinite}
@keyframes incpulse{0%{box-shadow:0 0 0 0 rgba(179,38,30,.55)}70%{box-shadow:0 0 0 7px rgba(179,38,30,0)}100%{box-shadow:0 0 0 0 rgba(179,38,30,0)}}
@media (prefers-reduced-motion:reduce){.inc-dot{animation:none}}
.inc-line{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;font-size:13.5px}
/* ===== item 7: ARC response timeline – centred, visually distinct panel ===== */
  .arc-panel{background:var(--assure-10);border:1px dashed var(--assure);border-radius:12px;padding:14px 16px 12px;margin:8px auto;max-width:760px}
.arc-panel .arc-head{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.arc-panel .timeline{justify-content:center;max-width:680px;margin:0 auto}
/* ===== item 4 (Ivan, 13 Jul 2026): print / export-to-PDF for a completed assessment =====
     The print header only exists on paper; on screen it is hidden. When printing, the app shell
     (menu, top bar, ticker, drawer, toasts) and the modal chrome drop away, and the assessment
     alone is laid out on white – so "Save as PDF" in the browser's print dialog produces a clean,
     shareable document (GP, funder, family, coroner's bundle). */
  .printhead{display:none}
/* The assessment is printed from a dedicated root appended to the document body, NOT in
     place. #assessview lives inside .views, nested in its parent section – printing it where
     it sits meant fighting every ancestor's display rule, and one of them (hiding .views)
     won, which is why the first attempt produced a blank page. Cloning the assessment into a
     top-level container sidesteps ancestor layout entirely. */
  #printroot{display:none}
@media print{
    html,body{background:#fff!important}
    /* only the print root exists on paper */
    body.printing-assessment > *{display:none!important}
    body.printing-assessment > #printroot{display:block!important}
    body.printing-assessment{overflow:visible!important;height:auto!important}
    #printroot{color:#001923;font-size:12.5px}
    #printroot .printhead{display:block!important;border-bottom:2px solid #001923;padding-bottom:10px;margin-bottom:14px}
    #printroot .printhead .ph-t{font-size:19px;font-weight:800;color:#001923}
    #printroot .printhead .ph-s{font-size:12px;color:#4E5861;margin-top:3px}
    /* on-screen chrome that has no meaning on paper */
    #printroot .ref,#printroot .anno,#printroot .btn,#printroot .field-err,#printroot .err-summary{display:none!important}
    #printroot .okay,#printroot .notebox{border:1px solid #c6ccd0!important;background:#fff!important;color:#001923!important;padding:8px 10px;border-radius:6px}
    #printroot label{display:block;font-weight:700;font-size:13px;margin:14px 0 4px;color:#001923}
    #printroot .frow{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
    #printroot .qa{break-inside:avoid;page-break-inside:avoid;padding:5px 0;border-bottom:1px solid #e3e9ea}
    #printroot .qa .q{font-size:11.5px;color:#4E5861}
    #printroot .idrow{padding:4px 0}
    #printroot a{color:#001923;text-decoration:none}
    a[href]:after{content:none!important}
    @page{margin:14mm}
  }
/* ===== item 9: change-priority list ===== */
  .prio-list{list-style:none;margin:10px 0;padding:0}
.prio-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;margin:6px 0;background:var(--bg2)}
.prio-item .prio-name{flex:1}
.prio-item .prio-btns{display:flex;gap:4px}
/* ===== shared additions: menu sub-nav, prominent tooltips, sortable tables ===== */
  .side .subnav{display:none;flex-direction:column;margin:0 0 4px}
/* collapsible sub-pages: hidden by default, chevron indicator on parents (04 Jul 2026) */
  .side .subnav.open{display:flex}
.sub-caret{margin-left:auto;width:22px;height:22px;border:none;background:none;color:var(--slate);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;flex:none;padding:0}
.sub-caret:hover{background:var(--hover);color:var(--assure)}
.sub-caret .fi{font-size:10px;transition:transform .15s}
.sub-caret.on .fi{transform:rotate(180deg)}
.side a .badge + .sub-caret{margin-left:4px}
body.navmin .side a{position:relative}
body.navmin .sub-caret{position:absolute;right:0;top:50%;transform:translateY(-50%);width:14px;height:100%;border-radius:0}
body.navmin .sub-caret .fi{font-size:8px}
.side .subnav a{padding:7px 12px 7px 12px;font-size:13px;font-weight:500;color:var(--slate);margin:1px 0 1px 28px}
.side .subnav a:hover{color:var(--ink)}
.side .subnav .badge{margin-left:auto}
body.navmin .side .subnav.open{display:flex;flex-direction:column}
/* icon rail keeps sub-pages selectable – icon-only, slightly inset */
  body.navmin .side .subnav a{margin:1px 0;justify-content:center;padding:8px;min-height:34px;box-shadow:inset 2.5px 0 0 var(--border)}
body.navmin .side .subnav a .fi{font-size:12.5px;opacity:.85}
.tipwrap{position:fixed;z-index:200;background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;line-height:1.35;padding:7px 10px;border-radius:8px;max-width:260px;box-shadow:0 6px 20px rgba(0,25,35,.32);pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s}
.tipwrap.show{opacity:1;transform:translateY(0)}
.tipwrap::after{content:"";position:absolute;width:9px;height:9px;background:inherit;transform:rotate(45deg);left:var(--ax,12px)}
.tipwrap.below::after{top:-4px}
.tipwrap.above::after{bottom:-4px}
html[data-theme="dark"] .tipwrap,html.is-dark .tipwrap{background:#0c2530;color:#eaf2f4}
@media (prefers-reduced-motion:reduce){.tipwrap{transition:none}}
table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
table th.sortable:hover{color:var(--assure)}
table th.sortable .sarr{font-size:12px;margin-left:4px;opacity:.45}
table th.sortable.asc .sarr,table th.sortable.desc .sarr{opacity:1;color:var(--assure)}
/* ---- review round (19 Jun 2026): popups, badge, search highlight, help ---- */
  html.is-dark .overlay{background:rgba(0,0,0,.66)}
html.is-dark .modal{border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.78)}
html.is-dark .notif-badge{background:#f5392f}
.help-h{margin:14px 0 6px;font-size:13px;font-weight:700;color:var(--ink)}
.help-b .help-h:first-child{margin-top:0}
.help-tbl{width:100%;border-collapse:collapse}
.help-tbl td{padding:6px 8px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
.help-tbl td:first-child{white-space:nowrap;width:152px}
.help-ul{margin:4px 0 0;padding-left:18px;font-size:13px}
.help-ul li{margin:5px 0}
.kbd{display:inline-block;min-width:16px;text-align:center;padding:2px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;background:var(--safe);font-size:11px;font-weight:700;color:var(--ink);font-family:inherit}
html.is-dark .kbd{background:var(--bg2)}
/* ---- round 3 (19 Jun 2026): links, reflib multi-select, linked rows, keyword tags ---- */
  .sugglink button{padding:4px 11px;font-size:12px}
.linkitem{position:relative;padding-right:34px}
.linkitem .linkdel{position:absolute;top:50%;right:7px;transform:translateY(-50%);opacity:0;border:none;background:none;color:var(--red);cursor:pointer;font-size:13px;padding:3px 6px;border-radius:6px;font-family:inherit;transition:opacity .12s}
.linkitem:hover .linkdel,.linkitem:focus-within .linkdel{opacity:1}
.linkitem .linkdel:hover{background:var(--red-bg)}
tr.linked-row td{background-color:rgba(99,102,241,.05)}
tr.linked-row:hover td{background-color:rgba(99,102,241,.10)}
tr.linked-row.rq-head td:first-child{box-shadow:inset 3px 0 0 #6366f1}
html.is-dark tr.linked-row td{background-color:rgba(129,140,248,.10)}
html.is-dark tr.linked-row:hover td{background-color:rgba(129,140,248,.16)}
.linked-tag{background:#e7ecfb!important;color:#3346a0!important}
html.is-dark .linked-tag{background:#2b3358!important;color:#b9c5f5!important}
.rl-selbar{margin:10px 0 0}
.rl-selbar .rl-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin-bottom:5px}
.rl-chips{display:flex;flex-wrap:wrap;gap:6px}
.rl-chip{display:inline-flex;align-items:center;gap:6px;background:var(--assure-10);border:1px solid var(--assure);color:var(--assure);border-radius:999px;padding:3px 6px 3px 11px;font-size:11.5px;font-weight:600}
.rl-chip button{border:none;background:none;color:var(--assure);cursor:pointer;font-size:14px;line-height:1;padding:0 1px;font-family:inherit}
.reflib-row.sel{background:var(--assure-10)}
.reflib-row .rl-check{width:16px;text-align:center;color:var(--assure);opacity:0}
.reflib-row.sel .rl-check{opacity:1}
.kwedit{border:1px solid var(--border);border-radius:10px;padding:7px;background:var(--white)}
.kwtags{display:flex;flex-wrap:wrap;gap:6px}
.kwtags:empty{display:none}
.kwtags .kw{margin:0;cursor:default}
.kwtags .kw button{border:none;background:rgba(255,255,255,.25);color:#fff;cursor:pointer;border-radius:999px;width:15px;height:15px;line-height:13px;font-size:11px;padding:0;margin-left:5px;font-family:inherit}
.kwinputwrap{position:relative;margin-top:7px}
.kwsugg{position:absolute;left:0;right:0;top:calc(100% + 3px);background:var(--white);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 34px rgba(0,25,35,.16);overflow:hidden;display:none;z-index:5;max-height:220px;overflow-y:auto}
.kwsugg.open{display:block}
.kwsugg div{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:12.5px;cursor:pointer}
.kwsugg div:hover,.kwsugg div.active{background:var(--hover)}
.kwsugg .sw{width:11px;height:11px;border-radius:3px;flex:none}
.kwsugg .none{cursor:default;color:var(--slate)}
/* round 4: keyboard row highlight */
  tr.kbrow td{background:var(--assure-15)!important;box-shadow:inset 0 0 0 1px var(--assure)}
/* item 6: My account popup */
  .ma-id{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.ma-av{width:42px;height:42px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.ma-h{margin:16px 0 6px;font-size:13px;font-weight:700;color:var(--ink)}
.ma-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--border);font-size:13px}
.ma-row input[type=checkbox]{width:18px;height:18px;flex:none;margin-top:2px}
.ma-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:2px}
.ma-grid label{display:block;font-size:12px;color:var(--slate);margin-bottom:3px}
.ma-grid select{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;color:var(--ink);background:var(--white)}
@media(max-width:560px){.ma-grid{grid-template-columns:1fr}}
/* ===== MOBILE-NAV-PATCH: responsive phone shell ===== */
.m-hamb{display:none}
.nav-scrim{display:none}
@media (max-width:760px){
  .hdr-when{display:none}
}
@media (max-width:600px){
  .m-hamb{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
          border:1px solid var(--border);background:var(--white);color:var(--ink);border-radius:10px;
          cursor:pointer;font-size:0;line-height:0;padding:0}
  .m-hamb::before{content:"";display:block;width:18px;height:2px;background:currentColor;border-radius:2px;
          box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
  .m-hamb:hover{background:var(--hover)}
  .m-hamb:focus-visible{outline:2px solid var(--assure);outline-offset:2px}
  .topbar{gap:9px;padding:0 10px}
  .topbar .ilos-img{height:25px;width:auto}
  .searchwrap{min-width:0;flex:1 1 auto;max-width:none}
  .navtoggle{display:none!important}
  /* off-canvas sidebar */
  .side{position:fixed;top:0;left:0;height:100%;width:266px;max-width:84vw;padding:14px 10px;
        transform:translateX(-100%);transition:transform .22s ease;z-index:1200;overflow-y:auto;
        border-right:1px solid var(--border)}
  body.nav-open .side{transform:translateX(0);box-shadow:8px 0 40px rgba(0,25,35,.30)}
  .side a,.side span.mi{justify-content:flex-start;padding:11px 12px;min-height:44px}
  .side .nav-txt{display:inline}
  .side .grp{display:block}
  .side .powered{display:block}
  .side .badge{display:inline-flex}
  .side .subnav.open{display:block}
  .side .anno{display:block}
  .content{margin-left:0!important}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(0,25,35,.45);
             opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:1100}
  body.nav-open .nav-scrim{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  /* count tiles two-up, flexible */
  .statband{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* grid items must shrink (min-width:auto would force overflow, e.g. profile tabs) */
  .grid,.grid>*{min-width:0}
  .tabs{flex-wrap:wrap}
  /* detail rows wrap so long values do not force horizontal scroll */
  .idrow{flex-wrap:wrap;min-width:0}
  .idrow .v,.idrow .vmore{min-width:0}
  .idrow .v{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .id-head{flex-wrap:wrap}
  .id-head-main,.id-name,.id-sub,.id-badges{min-width:0}
  /* control rows wrap instead of overflowing */
  .listctl,.rosterctl,.seg,.scopebtns,.card-h .right{flex-wrap:wrap}
  /* wireframe drawer tab moved clear of content */
  .drawer{top:auto!important;bottom:46px!important}
  .drawer-body{position:fixed!important;right:8px!important;left:auto!important;bottom:84px!important;top:auto!important;width:min(290px,92vw)!important;max-height:60vh;overflow:auto;border-right:1px solid var(--border)!important;border-radius:12px!important;box-shadow:0 16px 40px rgba(0,25,35,.3)!important}
  .drawer-tab{writing-mode:horizontal-tb!important;border-radius:8px 0 0 8px!important;padding:7px 11px!important;font-size:11px!important;letter-spacing:.04em}
  .drawer .drawer-body{width:300px;max-width:86vw}

  /* ===== MOBILE REFINEMENTS (30 Jun 2026) ===== */
  /* (5) count/stat tiles much smaller on phones */
  .statband{gap:7px!important;margin-bottom:10px}
  .stat{padding:8px 9px!important;gap:2px!important;border-radius:10px}
  .stat::before{width:3px}
  .stat .s-lbl{font-size:9.5px;letter-spacing:.02em;gap:5px}
  .stat .s-lbl .fi{font-size:11px}
  .stat .s-val{font-size:18px}
  .stat .s-sub{font-size:9.5px}
  /* (6) Scheduling "Work to schedule" + Roster filter rows fit the screen */
  .card-h .right.listctl{flex-wrap:wrap!important;overflow:visible!important;margin-left:0;width:100%}
  .listctl,.rosterctl{flex-wrap:wrap!important;width:100%;min-width:0}
  .rosterctl .right{flex:1 1 100%!important;width:100%;flex-wrap:wrap!important;justify-content:flex-start;margin-left:0;min-width:0}
  .listctl>*,.rosterctl>*,.rosterctl .right>*{min-width:0;max-width:100%}
  .listctl .seg,.rosterctl .seg,.listctl .reqsearch{flex:1 1 100%!important}
  .listctl .reqsel,.rosterctl .reqsel,.rosterctl .right .reqsel{flex:1 1 auto!important;width:auto;max-width:100%!important}
  .rosterctl h3{flex:1 1 100%!important;min-width:0}
  .rosterctl .weeknav{flex:0 0 auto!important}
  /* (2) tables: show full contents, scroll horizontally instead of squashing/clipping */
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table:not(.fc *){display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .fc table{white-space:normal}
  /* (3) Messages popup + (4) header search suggestions: fixed, span the screen, just under the header */
  .notif-pop{position:fixed!important;top:54px!important;left:8px!important;right:8px!important;width:auto!important;max-width:none!important;max-height:calc(100vh - 66px);overflow-y:auto;z-index:1000}
  .search-drop{position:fixed!important;top:54px!important;left:8px!important;right:8px!important;width:auto!important;max-width:none!important;max-height:calc(100vh - 66px);overflow-y:auto;z-index:1000}
}
/* iOS safe-area (viewport-fit=cover): fill the screen edge-to-edge, keep UI clear of the notch & home indicator */
@supports (padding: max(0px)) {
  @media (min-width:601px){
    .topbar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
    .side{padding-left:max(10px,env(safe-area-inset-left))}
    .mainc{padding-right:max(22px,env(safe-area-inset-right))}
  }
  @media (max-width:600px){
    .topbar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
    .mainc{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
    .side{padding-left:max(10px,env(safe-area-inset-left))}
  }
  .ticker{height:auto;min-height:32px;padding-bottom:env(safe-area-inset-bottom)}
  .content{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
}
/* tables scroll horizontally at every width when content exceeds the card (Ivan, 06 Jul) */
.twshade>table:not(.fc *){display:block;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}
'+css+'
.gsd-pill{position:fixed;right:18px;bottom:60px;z-index:2147483000;display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;border:1px solid var(--cardborder,#c6ccd0);cursor:pointer;
  background:var(--tun-slate,#334a54);color:#fff;font-family:inherit;font-size:13px;font-weight:600;line-height:1;
  box-shadow:0 6px 22px rgba(0,25,35,.30)}
.gsd-pill:hover{filter:brightness(1.12)}
.gsd-pill .fi{font-size:12px}
.gsd-dim{position:fixed;inset:0;background:rgba(0,25,35,.55);z-index:59;pointer-events:none}
/* interactive tours keep the full dark dim; page modals sit above it (z-index 59) */
.gsd-hole{position:fixed;z-index:59;pointer-events:none;border-radius:10px;
  box-shadow:0 0 0 200vmax rgba(0,25,35,.55);outline:2px solid var(--assure,#007689);outline-offset:2px;
  transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease}
@keyframes gsdPulse{0%,100%{outline-color:var(--assure,#007689)}50%{outline-color:#7fd0dc}}
.gsd-hole{animation:gsdPulse 2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.gsd-hole{transition:none;animation:none}}
.gsd-card{position:fixed;z-index:2147483002;width:min(400px,calc(100vw - 28px));background:var(--white,#fff);
  color:var(--ink,#0b2430);border:1px solid var(--cardborder,#c6ccd0);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,25,35,.38);font-family:inherit;font-size:13px;line-height:1.55}
.gsd-top{display:flex;align-items:center;gap:8px;padding:12px 14px 0}
.gsd-ch{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--assure,#007689) 12%,transparent);
  color:var(--assure,#007689);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600;white-space:nowrap}
.gsd-x{margin-left:auto;border:1px solid transparent;background:none;border-radius:8px;width:28px;height:28px;
  color:var(--slate,#4E5861);cursor:pointer;font-size:13px}
.gsd-x:hover{background:var(--hover,#eef1f2);border-color:var(--border,#c6ccd0)}
.gsd-body{padding:6px 16px 2px}
.gsd-body h4{margin:4px 0 6px;font-size:15px;color:var(--navy,var(--ink,#001923))}
.gsd-body p{margin:0 0 8px;color:var(--slate,#4E5861)}
.gsd-body b{color:var(--ink,#0b2430)}
.gsd-kbd{display:inline-block;border:1px solid var(--border,#c6ccd0);border-bottom-width:2px;border-radius:5px;
  padding:0 5px;font-size:11px;background:var(--hover,#eef1f2);color:var(--ink,#0b2430)}
.gsd-prog{height:4px;background:var(--hover,#e6e8e8);border-radius:99px;margin:4px 16px 0;overflow:hidden}
.gsd-prog i{display:block;height:100%;background:var(--assure,#007689);border-radius:99px;transition:width .3s}
.gsd-foot{display:flex;align-items:center;gap:8px;padding:10px 14px 13px}
.gsd-n{font-size:11px;color:var(--slate,#4E5861);margin-right:auto;white-space:nowrap}
.gsd-btn{border-radius:999px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;padding:9px 16px;
  border:1px solid var(--cardborder,#c6ccd0);background:var(--white,#fff);color:var(--ink,#0b2430)}
.gsd-btn:hover{background:var(--hover,#eef1f2)}
.gsd-btn:disabled{opacity:.45;cursor:default}
.gsd-btn.pri{background:var(--tun-slate,#334a54);border-color:var(--tun-slate,#334a54);color:#fff}
.gsd-btn.pri:hover{filter:brightness(1.12)}
.gsd-btn.ico{width:34px;padding:9px 0;text-align:center}
.gsd-btn.on{background:color-mix(in srgb,var(--assure,#007689) 14%,transparent);border-color:var(--assure,#007689);color:var(--assure,#007689)}
@media (max-width:600px){.gsd-card{left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;width:auto;max-height:46vh;overflow:auto}
 .gsd-pill{bottom:74px}}
.gsd-note{position:fixed;z-index:2147483003;pointer-events:none;max-width:220px;font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-size:24px;font-weight:700;color:#b3261e;line-height:1.05;transform:rotate(-4deg);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.gsd-arrow{position:fixed;left:0;top:0;z-index:2147483002;pointer-events:none;overflow:visible}

/* ==========================================================================
   SOURCE: 12-home-dashboard-wireframes.html  (84 unique statements)
   ========================================================================== */

/* ====== Tunstall brand + Mark's SM component language (shared with file 03) ====== */
  :root{
    --navy:#001923;--slate:#4E5861;--assure:#007689;--tunstall:#334a54;
    --safe:#E6E8E8;--white:#FFFFFF;--border:#c6ccd0;--pri:#334a54;--pri-dk:#22343c;
    --assure-10:rgba(0,118,137,.10);--assure-15:rgba(0,118,137,.15);
    --green:#176b44;--green-bg:rgba(27,125,79,.13);
    --amber:#835400;--amber-bg:rgba(178,106,0,.15);
    --red:#b3261e;--red-bg:rgba(179,38,30,.10);
    --ink:#001923;--bg:#eef0f1;--bg2:#e7ebed;--hover:#eef2f4;
    --slate2:#4E5861;--pri-ink:#334a54;--ph:#5e686f;
    --cardborder:rgba(27,46,55,0.45);
    --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI Variable","Segoe UI",Arial,sans-serif;
  }
html[data-theme="dark"]{
    --ink:#dfe7ea;--bg:#0c1519;--bg2:#16242b;--hover:#20323a;
    --white:#142128;--safe:#1c2c34;--border:#2e404a;--slate:#9fb0b8;--slate2:#9fb0b8;
    --assure:#3aa6b8;--assure-10:rgba(58,166,184,.14);--assure-15:rgba(58,166,184,.20);
    --green:#5dbd8c;--green-bg:rgba(93,189,140,.16);
    --amber:#d9a14a;--amber-bg:rgba(217,161,74,.16);
    --red:#e4756c;--red-bg:rgba(228,117,108,.15);
    --pri-ink:#b9cfd6;--ph:#93a6ae;--cardborder:#3a4d57;
  }
@media (prefers-color-scheme: dark){
    html[data-theme="system"]{
      --ink:#dfe7ea;--bg:#0c1519;--bg2:#16242b;--hover:#20323a;
      --white:#142128;--safe:#1c2c34;--border:#2e404a;--slate:#9fb0b8;--slate2:#9fb0b8;
      --assure:#3aa6b8;--assure-10:rgba(58,166,184,.14);--assure-15:rgba(58,166,184,.20);
      --green:#5dbd8c;--green-bg:rgba(93,189,140,.16);
      --amber:#d9a14a;--amber-bg:rgba(217,161,74,.16);
      --red:#e4756c;--red-bg:rgba(228,117,108,.15);
      --pri-ink:#b9cfd6;--ph:#93a6ae;--cardborder:#3a4d57;
    }
  }
html.is-dark .ilos .ilos-img{filter:invert(.88) hue-rotate(180deg)}
.notif-ic{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff}
.sd-empty{padding:12px 14px;font-size:12.5px;color:var(--slate)}
/* active page = Home (this module) */

  .side a[href="#dashboard"]{background:rgba(0,118,137,.12);color:var(--ink);font-weight:600;position:relative}
.side a[href="#dashboard"]::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 999px 999px 0;background:var(--assure)}
.side a[href="#dashboard"] .fi{color:var(--assure)}
@media (min-width:2200px){ .mainc{padding:16px 36px} }
@media (max-width:900px){
    .side{width:58px;padding:12px 6px}
    .side a,.side span.mi{justify-content:center;padding:10px 8px}
    .side .nav-txt,.side .grp,.side .badge,.side .powered,.side .anno{display:none}
    .content{margin-left:58px}.navtoggle{display:none}
    .searchwrap{min-width:160px;max-width:300px}.userbtn-txt{display:none}
  }
@media (max-width:640px){ .mainc{padding:12px 10px} }
.p-active,.p-done{background:var(--green-bg);color:var(--green)}
.p-hold,.p-prog{background:var(--amber-bg);color:var(--amber)}
.p-closed,.p-term{background:var(--safe);color:var(--slate)}
.p-normal{background:var(--safe);color:var(--steady)}
.card-h{padding:11px 16px;border-bottom:1.5px solid var(--cardborder);display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--white)}
.card-h h3{margin:0;font-size:15px;font-weight:700;color:var(--pri-ink);display:inline-flex;align-items:center;gap:9px;line-height:1.3}
.card-h .right{margin-left:auto;display:inline-flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:10px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;line-height:1.3;transition:.12s}
th{text-align:left;padding:8px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);border-bottom:1px solid var(--border);background:transparent;font-weight:700}
tbody tr:hover td{background:var(--assure-10);cursor:pointer}
.anno{font-size:11.5px;color:var(--slate);font-style:italic}
/* ====== Greeting (prominent – no page title) ====== */
  .greetbar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 0 14px}
.greet h1{font-size:26px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.01em}
.greet .greet-sub{margin:3px 0 0;font-size:13.5px;color:var(--slate);font-weight:500}
.greet .greet-meta{margin:5px 0 0;font-size:11.5px;color:var(--slate)}
.toolbar{margin-left:auto;display:inline-flex;align-items:center;gap:10px;color:var(--slate);font-size:12.5px}
.toolbar .asof{font-variant-numeric:tabular-nums;white-space:nowrap}
.refreshbtn{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--pri-ink);cursor:pointer;font-family:inherit}
.refreshbtn:hover{border-color:var(--pri-ink);background:var(--hover)}
.refreshbtn.spin .fi{animation:spin .6s linear}
@keyframes spin{to{transform:rotate(360deg)}}
/* ====== Stat tiles (refined) ====== */
  .statband{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
@media (max-width:1300px){.statband{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1100px){.statband{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.statband{grid-template-columns:1fr}}
.stat{position:relative;background:var(--white);border:1px solid var(--cardborder);border-radius:12px;padding:15px 16px 14px;
    box-shadow:0 1px 2px rgba(0,25,35,.06);text-align:left;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:10px;
    transition:box-shadow .14s, transform .14s, border-color .14s;overflow:hidden}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--slate);opacity:.5}
.stat.s-green::before{background:var(--green);opacity:1}
.stat.s-amber::before{background:var(--amber);opacity:1}
.stat.s-red::before{background:var(--red);opacity:1}
.stat.s-blue::before{background:var(--assure);opacity:1}
.stat:hover{box-shadow:0 10px 26px -12px rgba(0,25,35,.4);transform:translateY(-1px);border-color:var(--assure)}
.stat .s-top{display:flex;align-items:center;gap:10px}
.stat .s-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--assure-10);color:var(--assure);flex:none}
.stat.s-amber .s-ic{background:var(--amber-bg);color:var(--amber)}
.stat.s-red .s-ic{background:var(--red-bg);color:var(--red)}
.stat.s-green .s-ic{background:var(--green-bg);color:var(--green)}
.stat .s-lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;color:var(--slate);line-height:1.25}
.stat .s-val{font-size:34px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .s-val.sm{font-size:26px}
.stat .s-sub{font-size:12px;color:var(--slate);display:flex;align-items:center;gap:6px}
.stat .s-sub.ok{color:var(--green)}
.stat .s-sub.warn{color:var(--amber)}
.stat .s-sub.bad{color:var(--red)}
.stat .s-go{position:absolute;right:13px;top:15px;color:var(--slate);font-size:12px;opacity:0;transition:opacity .14s}
.stat:hover .s-go{opacity:.9;color:var(--assure)}
.tbd{display:inline-flex;font-size:9.5px;font-weight:700;letter-spacing:.04em;background:var(--amber-bg);color:var(--amber);padding:1px 6px;border-radius:999px}
/* work queue */
  .q-su{font-weight:700;color:var(--ink)}
tbody tr:hover .q-su{color:var(--assure)}
.sla{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap{overflow-x:auto}
.cardfoot{padding:9px 16px;border-top:1px solid var(--border);font-size:12px}
.seg{display:inline-flex;gap:8px;background:none;border:none}
.seg button{padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:var(--white);font-size:12.5px;color:var(--slate);font-family:inherit;cursor:pointer}
.seg button:last-child{border-right:1px solid var(--border)}
.seg button:hover{border-color:var(--pri-ink);background:var(--hover)}
.seg button.on{background:var(--assure-10);color:var(--assure);border-color:var(--assure);font-weight:700}
.modal-h{background:var(--navy);color:#fff;padding:13px 18px;font-weight:700;display:flex;justify-content:space-between;align-items:center;font-size:14px;position:sticky;top:0;gap:10px}
.modal-h a{color:#fff;opacity:.75;text-decoration:none;cursor:pointer}
.modal-h a:hover{opacity:1}
@media (prefers-reduced-motion: no-preference){.overlay.panel:target .modal{animation:slidein .18s ease}}
@keyframes slidein{from{transform:translateX(40px);opacity:.4}to{transform:translateX(0);opacity:1}}
.teamgrp{margin-bottom:16px}
.teamgrp .th{display:flex;align-items:center;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#8a949b;font-weight:700;margin:4px 0 8px}
.teamgrp .th .cnt{background:var(--assure-10);color:var(--assure);border-radius:999px;padding:1px 8px;font-size:11px}
.resp{display:flex;align-items:center;gap:11px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;background:var(--white)}
.resp .ra{width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.resp .ri{flex:1;min-width:0}
.resp .ri .rn{font-size:13.5px;font-weight:700;color:var(--ink)}
.resp .ri .rs{font-size:11.5px;color:var(--slate);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.veh{font-size:11px;color:var(--slate);margin-top:3px}
.wf-note{position:fixed;bottom:42px;right:14px;background:var(--navy);color:#fff;font-size:12px;padding:10px 14px;border-radius:10px;max-width:320px;box-shadow:0 10px 24px rgba(0,25,35,.4);z-index:70;display:none}

/* ==========================================================================
   SOURCE: 14-requests-console-wireframes.html  (143 unique statements)
   ========================================================================== */

.searchwrap .searchwrap-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--slate);font-size:13px;width:16px;text-align:center;pointer-events:none}
.searchwrap input{width:100%;background:rgb(239,243,245);border:1px solid var(--border);color:var(--ink);border-radius:10px;padding:8px 14px 8px 40px;font-size:14px;font-weight:500;outline:none}
/* active page = Requests (this module) – stays active on the request detail too */
  body:not(:has(.views :target)) .side a[href="#requests"],
  body:has(#requests:target) .side a[href="#requests"],
  body:has(#request:target) .side a[href="#requests"],
  body:has(#request :target) .side a[href="#requests"],
  body:has(#urgentreq:target) .side a[href="#requests"],
  body:has(#urgentreq :target) .side a[href="#requests"]{background:rgba(0,118,137,.12);color:var(--ink);font-weight:600;position:relative}
body:not(:has(.views :target)) .side a[href="#requests"]::before,
  body:has(#requests:target) .side a[href="#requests"]::before,
  body:has(#request:target) .side a[href="#requests"]::before,
  body:has(#request :target) .side a[href="#requests"]::before,
  body:has(#urgentreq:target) .side a[href="#requests"]::before,
  body:has(#urgentreq :target) .side a[href="#requests"]::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 999px 999px 0;background:var(--assure)}
body:not(:has(.views :target)) .side a[href="#requests"] .fi,
  body:has(#requests:target) .side a[href="#requests"] .fi,
  body:has(#request:target) .side a[href="#requests"] .fi,
  body:has(#request :target) .side a[href="#requests"] .fi,
  body:has(#urgentreq:target) .side a[href="#requests"] .fi{color:var(--assure)}
.p-active,.p-done,.p-pub{background:var(--green-bg);color:var(--green)}
.card-h .right{margin-left:auto;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
th{text-align:left;padding:var(--pad-row,8px 12px);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);border-bottom:1px solid var(--border);background:transparent;font-weight:700}
tbody tr:hover td{background:var(--assure-10)}
a.rowlink{font-weight:700;text-decoration:underline;color:var(--ink)}
tbody tr:hover a.rowlink{color:var(--assure)}
.rid{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--slate);display:block;font-weight:600}
.cardfoot{padding:9px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--slate)}
.idrow{display:flex;align-items:flex-start;gap:10px;margin:9px 0;font-size:13px}
.idrow .k{flex:none;width:128px;color:var(--slate);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.idrow .v{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:break-word}
.toolbar{margin-left:auto;display:inline-flex;align-items:center;gap:10px;color:var(--slate);font-size:12.5px;flex-wrap:wrap}
/* ====== compact filter stat tiles (clickable = set the status filter) ====== */
  .statband{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-bottom:14px}
@media (max-width:1100px){.statband{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.statband{grid-template-columns:1fr 1fr}}
.stat{position:relative;background:var(--white);border:1px solid var(--cardborder);border-radius:12px;padding:12px 14px;box-shadow:0 1px 2px rgba(0,25,35,.06);text-align:left;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:6px;transition:box-shadow .14s, transform .14s, border-color .14s;overflow:hidden}
.stat .s-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;color:var(--slate);line-height:1.2;display:flex;align-items:center;gap:7px}
.stat .s-lbl .fi{font-size:13px;color:var(--slate)}
.stat.s-red .s-lbl .fi{color:var(--red)}
.stat.s-amber .s-lbl .fi{color:var(--amber)}
.stat.s-green .s-lbl .fi{color:var(--green)}
.stat.s-blue .s-lbl .fi{color:var(--assure)}
.stat .s-val{font-size:28px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .s-sub{font-size:11.5px;color:var(--slate)}
/* ====== list controls: one horizontal row (scope · search · type) ====== */
  /* item 5.3/5.4: the Actions column has no visible heading (the icons are self-evident and the
     word only added noise), but it keeps an accessible name for screen readers. The column and its
     header are right-aligned so every row's icons line up flush under one another. */
  .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
th.th-actions,td.td-actions{text-align:right;white-space:nowrap}
td.td-actions .qa{justify-content:flex-end}
/* item 5.7: the primary action sits with the table it acts on */
  .listctl-actions{display:inline-flex;gap:8px;align-items:center;margin-left:auto;flex:none}
/* the search box is the elastic element: it gives up width so the actions never do */
  .listctl .reqsearch{min-width:120px}
.listctl .seg{flex:0 0 auto}
@media (max-width:1150px){.listctl .reqsel{max-width:150px}}
/* ===== item 1.2 (Ivan, 14 Jul 2026): scheduling facts on the Tasks table ==================
     There is no room for a column per attribute, so the constraints Scheduling enforces ride as
     compact chips under the task name, and the booking gets one column of its own. Same vocabulary
     as the Scheduling board (size/duration, females-only, two-person, access), so a dispatcher
     reading the request and a dispatcher reading the board see the same thing. Every chip carries
     a full explanation on hover; none of them rely on colour alone. */
  .tchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.tchip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;line-height:1.6;
    padding:0 7px;border-radius:999px;border:1px solid var(--border);background:var(--bg2);color:var(--slate);
    white-space:nowrap;cursor:help}
.tchip .fi{font-size:9.5px}
.tchip.tc-sz{font-variant-numeric:tabular-nums}
.tchip.tc-fem{background:rgba(196,60,140,.10);border-color:rgba(196,60,140,.35);color:#a3327a}
.tchip.tc-mp{background:rgba(0,118,137,.10);border-color:rgba(0,118,137,.35);color:var(--assure)}
.tchip.tc-acc{background:rgba(233,161,0,.12);border-color:rgba(233,161,0,.4);color:#8a6100}
.tchip.tc-urg{background:rgba(179,38,30,.10);border-color:rgba(179,38,30,.35);color:var(--red)}
html.is-dark .tchip.tc-fem{color:#eda9d3}
html.is-dark .tchip.tc-acc{color:#e9c46a}
html.is-dark .tchip.tc-mp{color:#7fd3e0}
html.is-dark .tchip.tc-urg{color:#ff9d95}
/* the booking column: date on top, the slot and any co-attendee beneath */
  .tsched{display:flex;flex-direction:column;line-height:1.35;white-space:nowrap}
.tsched b{font-size:12.5px;color:var(--ink)}
.tsched small{font-size:11px;color:var(--slate)}
.tsched-none{color:var(--slate);font-style:italic}
.tsched-now b{color:var(--red)}
#tasktbl td,#utasktbl td{vertical-align:top}
/* item 5.3 (Ivan, 14 Jul 2026): the Task column (name + constraint chips) was absorbing all the
     width and crushing Scheduled / Assigned / SLA / Status into slivers. Explicit column shares and
     a minimum table width fix the balance: below that width the shared .ttwrap scroller takes over
     (with its edge shadows), which is the honest answer – scroll, don't squeeze. */
  #tasktbl,#utasktbl{min-width:820px}
#tasktbl th:nth-child(1),#utasktbl th:nth-child(1){width:30%}
#tasktbl th:nth-child(2),#utasktbl th:nth-child(2){width:15%}
#tasktbl th:nth-child(3),#utasktbl th:nth-child(3){width:18%}
#tasktbl th:nth-child(4),#utasktbl th:nth-child(4){width:15%}
#tasktbl th:nth-child(5),#utasktbl th:nth-child(5){width:12%}
#tasktbl th:nth-child(6),#utasktbl th:nth-child(6){width:10%}
#tasktbl .rowlink,#utasktbl .rowlink{font-weight:600}
/* the chips wrap under the name rather than stretching the column */
  #tasktbl .tchips,#utasktbl .tchips{max-width:100%}
#stocktbl{min-width:760px}
/* item 5.6: service-user typeahead – search only, no free text */
  .su-wrap{position:relative}
.su-sugg{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;background:var(--white);
    border:1px solid var(--border);border-radius:10px;box-shadow:0 18px 40px rgba(0,25,35,.18);overflow:hidden;max-height:260px;overflow-y:auto}
.su-sugg.open{display:block}
.su-sugg button{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--bg2);
    padding:8px 12px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.su-sugg button:last-child{border-bottom:none}
.su-sugg button:hover,.su-sugg button.on{background:var(--assure-10)}
.su-sugg .su-nm{font-weight:600}
.su-sugg .su-meta{display:block;font-size:11.5px;color:var(--slate)}
.su-sugg mark{background:#ffd23d;color:#2a2000;border-radius:3px;padding:0 2px;font-weight:700}
.su-none{padding:10px 12px;font-size:12.5px;color:var(--slate);font-style:italic}
.su-picked{display:flex;align-items:center;gap:8px;margin-top:6px;padding:7px 10px;border:1px solid var(--assure);
    background:var(--assure-10);border-radius:10px;font-size:13px;font-weight:600;color:var(--ink)}
.su-picked > .fi{color:var(--assure)}
.su-x{margin-left:auto;border:none;background:none;color:var(--slate);cursor:pointer;border-radius:6px;width:24px;height:24px}
.su-x:hover{background:var(--hover);color:var(--red)}
.listctl{flex-wrap:nowrap;gap:10px}
.reqsearch{position:relative;flex:0 1 260px;max-width:260px;min-width:170px}
.reqsearch input,.reqsearch input[type=text]{width:100%;padding:7px 12px 7px 40px;border:1px solid var(--border);border-radius:10px;font-size:12.5px;font-family:inherit;background:var(--white);color:var(--ink)}
.reqsearch .reqsearch-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--slate);font-size:13px;width:16px;text-align:center;pointer-events:none}
.reqsel{flex:0 0 160px;width:160px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;font-size:12.5px;font-family:inherit;background:var(--white);color:var(--ink)}
@media (max-width:680px){.listctl{flex-wrap:wrap}.reqsearch{flex:1 1 100%;min-width:0}.reqsel{flex:1 1 auto;width:auto}}
/* item 1 (Ivan, 14 Jul 2026): the scope segment drops its labels and becomes icons only at
     1150px, NOT 900px. The three labelled buttons plus the search box and the type filter left no
     room for the primary action, so "New request" was being pushed out of the row entirely at
     around 1040px – the button disappeared before the labels ever collapsed. Collapsing the labels
     first frees the space, so the primary action survives every width. The text stays in the DOM
     (visually hidden) so the accessible name and the tooltip still read in full. */
  @media (max-width:1150px){
    .listctl .seg button{gap:0;padding:6px 10px}
    .listctl .seg button .seg-t{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .listctl .seg button .fi{font-size:13px}
  }
.qa{display:inline-flex;gap:3px}
.qa a,.qa button{width:28px;height:28px;border-radius:8px;border:1px solid transparent;background:none;color:var(--slate);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;font-size:12.5px;text-decoration:none}
.qa a:hover,.qa button:hover{background:var(--hover);border-color:var(--border);color:var(--assure)}
.qa .qa-dan:hover{color:var(--red)}
.empty-row td{text-align:center;color:var(--slate);font-style:italic;padding:22px}
select,input[type=text],input[type=date],input[type=tel],input[type=time],textarea{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;color:var(--ink);background:var(--white)}
@media (max-width:640px){.frow{grid-template-columns:1fr}}
.sugg .srow{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-top:1px solid var(--border);font-size:12.5px;color:var(--ink)}
/* === prominent per-type SLA panel === */
  .slabox{border:1.5px solid var(--assure);border-left:5px solid var(--assure);background:var(--assure-10);
          border-radius:12px;padding:11px 14px;margin:12px 0 4px}
.slabox .sla-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.05em;
          text-transform:uppercase;color:var(--assure);margin-bottom:4px}
/* === booked-on line under the assignee === */
  .booked{display:none;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);
          background:var(--green-bg);border:1px solid rgba(27,125,79,.35);border-radius:9px;padding:7px 11px;margin:6px 0 0}
/* simple map placeholder for what3words */
  .w3wmap-box{position:relative;height:230px;border:1px solid var(--border);border-radius:10px;margin:8px 0;overflow:hidden;
              background:linear-gradient(0deg,rgba(0,118,137,.06),rgba(0,118,137,.06)),repeating-linear-gradient(0deg,var(--bg2),var(--bg2) 26px,var(--white) 26px,var(--white) 27px),repeating-linear-gradient(90deg,var(--bg2),var(--bg2) 26px,var(--white) 26px,var(--white) 27px)}
.views > section#requests{display:block}
.views:has(:target) > section#requests{display:none}
.views:has(#requests:target) > section#requests{display:block}
.views > section#requests:has(:target){display:block}
/* active filter card (cards on top now drive the filter) */
  .stat.active{border-color:var(--assure);box-shadow:0 0 0 2px var(--assure-15),0 10px 26px -12px rgba(0,25,35,.4)}
.stat.active .s-val{color:var(--assure)}
/* item 5.5 (Ivan, 14 Jul 2026): the "clear" chip used to be position:absolute in the card's
     top-right corner, so as the cards narrowed it printed straight over the label text. It now
     sits IN THE FLOW at the end of the label row: the label takes the space it needs, the chip
     takes what is left, and they can never overlap. Hidden (not just transparent) when the card
     is not the active filter, so it also stops stealing space from the label. */
  .stat .s-clear{display:none;flex:none;margin-left:auto;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
    color:var(--assure);background:var(--assure-10);border:1px solid rgba(0,118,137,.3);border-radius:999px;
    padding:1px 7px;line-height:1.5;white-space:nowrap}
.stat.active .s-clear{display:inline-flex}
.stat .s-lbl{min-width:0}
.stat .s-lbl > span,.stat .s-lbl > b{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.stat .s-clear{font-size:0;padding:2px 5px;gap:0}.stat .s-clear .fi{font-size:9px}}
/* search-match highlight (mirrors the header search) */
  #reqbody mark{background:#ffd23d;color:#2a2000;border-radius:3px;padding:0 2px;font-weight:700;box-shadow:0 0 0 1px rgba(120,86,0,.35)}
html.is-dark #reqbody mark{background:#ffcf33;color:#241a00;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
/* breached request rows – whole row highlighted */
  tr.breached td{background:var(--red-bg)}
tr.breached:hover td{background:rgba(179,38,30,.16)}
html.is-dark tr.breached:hover td{background:rgba(228,117,108,.22)}
/* item 5.2: row colour-coding – overdue=red (above), due-soon=yellow, on-hold=muted, standard=white */
  tr.duesoon td{background:rgba(180,120,10,.10)}
tr.duesoon:hover td{background:rgba(180,120,10,.16)}
tr.onhold td{background:rgba(120,128,136,.10)}
tr.onhold:hover td{background:rgba(120,128,136,.16)}
.seg button{padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:var(--white);font-size:12.5px;color:var(--slate);font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
/* pagination */
  .pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pager button{min-width:30px;height:30px;padding:0 9px;border:1px solid var(--border);background:var(--white);border-radius:8px;font-size:12.5px;font-family:inherit;color:var(--ink);cursor:pointer}
.pager button.on{background:var(--assure-10);border-color:var(--assure);color:var(--assure);font-weight:700}
.pager button:disabled{opacity:.45;cursor:default}
.pager .pg-gap{color:var(--slate);padding:0 2px}
.timeline li{flex:1;min-width:104px;position:relative;padding:0 6px 8px 0}
/* status-pill hover → whole timeline popover (urgent requests in the list) */
  .tlhost{position:relative;display:inline-flex;align-items:center;gap:6px}
.tlhost .tl-hint{color:var(--slate);font-size:11px}
.tltip{position:fixed;z-index:80;display:none;background:var(--white);border:1px solid var(--cardborder);border-radius:12px;box-shadow:0 18px 40px rgba(0,25,35,.28);padding:12px 14px 8px;width:min(560px,86vw)}
.tltip .tl-cap{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin:0 0 6px}
/* fast create-incident path (Ivan, 15 Jul 2026) */
  .raise-inc{border-color:var(--red)!important;color:var(--red)!important;background:var(--red-bg)!important;font-weight:700}
.raise-inc:hover{background:var(--red)!important;color:#fff!important}
.ri-prefill{background:var(--red-bg);border:1px solid var(--red);border-radius:10px;padding:10px 12px;font-size:12.5px;margin:0 0 12px;color:var(--ink)}
.ri-prefill b{color:var(--red)}
.ri-sec-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin:14px 0 6px}
.ri-resp{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin:6px 0}
.ri-resp .ri-av{width:30px;height:30px;border-radius:50%;background:var(--assure-15);color:#00657a;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none}
.ri-resp .ri-meta{flex:1 1 auto;min-width:0;font-size:12.5px}
.ri-resp .ri-meta small{color:var(--slate)}
.ri-resp.busy{opacity:.6}
.ri-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
.ri-dot.free{background:var(--green,#1f9d55)}
.ri-dot.onjob{background:var(--amber)}
.ri-ext{border-style:dashed}
body:has(.overlay:target),body.modal-open{overflow:hidden}

/* ==========================================================================
   SOURCE: 16-referrals-wireframes.html  (87 unique statements)
   ========================================================================== */

/* active page = Referrals (this module) – stays active on the referral detail + templates too */
  body:not(:has(.views :target)) .side a[href="#referrals"],
  body:has(#referrals:target) .side a[href="#referrals"],
  body:has(#referral:target) .side a[href="#referrals"],
  body:has(#referral :target) .side a[href="#referrals"],
  body:has(#reftemplates:target) .side a[href="#referrals"],
  body:has(#reftemplates :target) .side a[href="#referrals"]{background:rgba(0,118,137,.12);color:var(--ink);font-weight:600;position:relative}
body:not(:has(.views :target)) .side a[href="#referrals"]::before,
  body:has(#referrals:target) .side a[href="#referrals"]::before,
  body:has(#referral:target) .side a[href="#referrals"]::before,
  body:has(#referral :target) .side a[href="#referrals"]::before,
  body:has(#reftemplates:target) .side a[href="#referrals"]::before,
  body:has(#reftemplates :target) .side a[href="#referrals"]::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 999px 999px 0;background:var(--assure)}
body:not(:has(.views :target)) .side a[href="#referrals"] .fi,
  body:has(#referrals:target) .side a[href="#referrals"] .fi,
  body:has(#referral:target) .side a[href="#referrals"] .fi,
  body:has(#referral :target) .side a[href="#referrals"] .fi,
  body:has(#reftemplates:target) .side a[href="#referrals"] .fi{color:var(--assure)}
.btn-ok{background:#1b7d4f;color:#fff}
.btn-ok:hover{filter:brightness(1.08)}
.linkflag{color:var(--assure)}
/* item 6.10: a referral opened by another user is locked – padlock + tinted row */
  .lockflag{color:var(--amber);margin-left:6px}
tr.ref-row.locked td{background:rgba(180,120,10,.10)}
tr.ref-row.locked:hover td{background:rgba(180,120,10,.16)}
/* ===== item 12 (Ivan, 13 Jul 2026): who locked a referral is shown in the project's
     styled tooltip (navy card + arrow), never the browser's default title bubble.
     The shared .tipwrap helper drives it; pre-line lets the tip carry two lines. ===== */
  .tipwrap{white-space:pre-line;text-align:left}
.lockflag.has-tip{cursor:help}
.lockflag.has-tip:hover,.lockflag.has-tip:focus-visible{color:var(--red);outline:none}
.lockbtn{appearance:none;border:1px solid var(--border);background:var(--white);color:var(--slate);border-radius:8px;width:26px;height:26px;line-height:1;font-size:11.5px;cursor:pointer;margin-left:6px;vertical-align:middle}
.lockbtn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg)}
/* item 9: lock panel on the referral detail */
  .lockbox{display:flex;gap:10px;align-items:flex-start;background:var(--amber-bg);border:1px solid rgba(180,120,10,.35);border-radius:10px;padding:10px 12px;font-size:13px}
.lockbox > .fi{color:var(--amber);margin-top:2px}
.lockbox .lk-when{color:var(--slate);font-size:12.5px;white-space:nowrap}
/* item 13: deactivated-agreement indicator – the Possible-match grammar in amber */
  .match-alert.deact-alert{background:var(--amber-bg);border-color:rgba(180,120,10,.35)}
/* ===== item 3 (Ivan, 13 Jul 2026): attachments – multiple files, Word / PDF / images only ===== */
  .att-drop{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1.5px dashed var(--border);border-radius:10px;padding:12px 14px;background:var(--safe);transition:border-color .12s,background .12s}
.att-drop.over{border-color:var(--assure);background:var(--assure-10)}
.att-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.att-cta{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;margin:0}
.att-cta:hover{border-color:var(--assure);color:var(--assure)}
.att-drop input[type=file]:focus-visible + .att-cta{outline:2px solid var(--assure);outline-offset:2px}
.att-hint{font-size:11.5px;color:var(--slate)}
.att-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.att-list:empty{margin-top:0}
.att-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:9px;padding:7px 10px;background:var(--white);font-size:12.5px}
.att-ic{width:26px;height:26px;flex:none;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#fff}
.att-ic.a-doc{background:#2b579a}
.att-ic.a-pdf{background:#b3261e}
.att-ic.a-img{background:#1b7d4f}
.att-nm{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-sz{color:var(--slate);font-size:11.5px;margin-left:auto;flex:none}
.att-x{appearance:none;border:1px solid transparent;background:none;color:var(--slate);border-radius:7px;width:26px;height:26px;flex:none;cursor:pointer;font-size:12px}
.att-x:hover{background:var(--hover);border-color:var(--border);color:var(--red)}
/* item 8: template editor field grid */
  .tf-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px 14px;border:1px solid var(--border);border-radius:10px;padding:11px 13px;background:var(--safe)}
.tf-fields label{display:flex;gap:7px;align-items:center;font-weight:400;font-size:12.5px;margin:0}
.tf-fields input{width:auto}
.nolink{color:var(--slate);opacity:.8}
/* ====== compact filter stat tiles (clickable = set the status filter) ====== */
  .statband{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}
.stat.s-purple::before{background:#7c4dbb;opacity:1}
.stat.s-purple .s-lbl .fi{color:#7c4dbb}
/* ====== list controls: one horizontal row (scope · search · source) ====== */
  .listctl{flex-wrap:nowrap}
.listctl .seg{flex:none}
.reqsearch{position:relative;flex:1 1 auto;min-width:120px}
.reqsel{flex:none;padding:6px 10px;border:1px solid var(--border);border-radius:10px;font-size:12.5px;font-family:inherit;background:var(--white);color:var(--ink)}
@media (max-width:680px){.listctl{flex-wrap:wrap}.reqsearch{min-width:160px}}
.age{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.age.amber{color:var(--amber)}
.age.red{color:var(--red)}
.age.green{color:var(--slate)}
.qa .qa-ok:hover{color:var(--green)}
select,input[type=text],input[type=date],input[type=tel],input[type=email],input[type=time],textarea{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;color:var(--ink);background:var(--white)}
.match-alert{background:var(--assure-10);border:1px solid rgba(0,118,137,.4);border-radius:10px;padding:11px 13px;font-size:12.5px;margin:10px 0}
.codebox{font-family:ui-monospace,Menlo,monospace;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:12px;word-break:break-all;color:var(--ink)}
/* referral lifecycle pipeline (detail header) */
  .pipe{display:flex;gap:0;list-style:none;margin:4px 0 0;padding:0;flex-wrap:wrap}
.pipe li{flex:1;min-width:92px;position:relative;padding:0 6px 8px 0}
.pipe .pp-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:var(--white);display:inline-block;position:relative;z-index:1}
.pipe li::after{content:'';position:absolute;top:6px;left:12px;right:0;height:3px;background:var(--border)}
.pipe li:last-child::after{display:none}
.pipe li.done .pp-dot{background:var(--green);border-color:var(--green)}
.pipe li.done::after{background:var(--green)}
.pipe li.now .pp-dot{background:var(--assure);border-color:var(--assure);box-shadow:0 0 0 4px var(--assure-15)}
.pipe li.rej .pp-dot{background:var(--red);border-color:var(--red)}
.pipe .pp-lbl{display:block;margin-top:7px;font-weight:700;font-size:12px}
.views > section#referrals{display:block}
.views:has(:target) > section#referrals{display:none}
.views:has(#referrals:target) > section#referrals{display:block}
.views > section#referrals:has(:target){display:block}
.stat .s-clear{position:absolute;right:10px;top:10px;font-size:11px;color:var(--assure);opacity:0;transition:opacity .12s}
.stat.active .s-clear{opacity:1}
/* search-match highlight (mirrors the header search) */
  #refbody mark{background:#ffd23d;color:#2a2000;border-radius:3px;padding:0 2px;font-weight:700;box-shadow:0 0 0 1px rgba(120,86,0,.35)}
html.is-dark #refbody mark{background:#ffcf33;color:#241a00;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
/* referral keywords field (predefined typeahead) */
.rkw-wrap{position:relative;margin-bottom:6px}
.rkw-field{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:6px 8px;background:var(--white)}
.rkw-field input{border:none;outline:none;flex:1;min-width:120px;font-family:inherit;font-size:13px;background:transparent;color:var(--ink)}
.rkw-chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.rkw-chip{display:inline-flex;align-items:center;gap:5px;color:#fff;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700}
.rkw-chip button{background:none;border:none;color:#fff;cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.85}
.rkw-chip button:hover{opacity:1}
.rkw-sugg{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--white);border:1px solid var(--cardborder);border-radius:10px;box-shadow:0 14px 30px rgba(0,25,35,.18);max-height:220px;overflow:auto;z-index:30;display:none}
.rkw-sugg.open{display:block}
.rkw-sugg div[role=option]{padding:8px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--ink)}
.rkw-sugg div[role=option]:hover,.rkw-sugg div[role=option].active{background:var(--assure-10)}
.rkw-sw{width:11px;height:11px;border-radius:50%;flex:none}
.rkw-none{color:var(--slate);font-size:12.5px;padding:8px 12px}

/* ==========================================================================
   SOURCE: 17-administration-wireframes.html  (70 unique statements)
   ========================================================================== */

/* consistent active-page highlight (tint + left line), keyed on aria-current (item 1) */
  .side a[aria-current="page"]{background:rgba(0,118,137,.12);color:var(--ink);font-weight:600;position:relative}
.side a[aria-current="page"]::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 999px 999px 0;background:var(--assure)}
.side a[aria-current="page"] .fi{color:var(--assure)}
/* breadcrumbs unified with every other page: a full-width bar at the top of the
     section (breaks out of the .mainc padding so it matches .crumbs elsewhere) */
  .crumb{margin:-16px -22px 16px;padding:9px 22px;font-size:12.5px;color:var(--slate);background:var(--white);border-bottom:1px solid var(--border)}
.crumb a{color:var(--assure);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb b{color:var(--ink);font-weight:500}
@media (max-width:640px){.crumb{margin:-12px -10px 12px;padding:9px 10px}}
@media (min-width:2200px){.crumb{margin-left:-36px;margin-right:-36px;padding-left:36px;padding-right:36px}}
/* manufacturers & products admin */
.twshade>table{display:block;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}
.am-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.am-grid{grid-template-columns:1fr}}
.am-in{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:10px;font-size:13px;background:var(--white);color:var(--ink);box-sizing:border-box;font-family:inherit}
#manufacturers .overlay .anno{font-size:12px}
/* full-width tables with evenly-justified columns */
#manufacturers table.tbl-even{table-layout:fixed}
#manufacturers table.tbl-even td{word-break:break-word}
#storetbl th,#storetbl td{white-space:nowrap}
#admin .hex{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--slate);min-width:62px;display:inline-block}
#admin .chip{display:inline-block;border-radius:999px;padding:2px 12px;font-size:12px;font-weight:700;color:#fff}
#admin input[type=color]{width:38px;height:26px;border:1px solid var(--border);border-radius:6px;padding:0;background:none;cursor:pointer;vertical-align:middle}
#admin .sw{display:inline-flex;align-items:center;gap:10px}
#admin .synccard{background:#fdf4e3;border:1px solid #f0d49a;color:#5b3d00;border-radius:10px;padding:12px 14px;font-size:13.5px;margin:0 0 18px}
/* item 7.1: selected sub-page matches Service Users / Scheduling (tint + border, not border alone) */
  .side .subnav a.sub-on{background:var(--assure-10);color:var(--assure);font-weight:600;box-shadow:inset 3px 0 0 var(--assure)}
.side .subnav a.sub-on .fi{color:var(--assure)}
.emp-tbl{width:100%;border-collapse:collapse;font-size:13px}
.emp-tbl th,.emp-tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.emp-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);white-space:nowrap}
.emp-breaks{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.emp-breaks h4{margin:0 0 10px;font-size:13px}
.emp-break-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.emp-break-grid label{font-size:12.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.emp-break-grid input{width:auto;min-width:64px;padding:5px 7px;border:1px solid var(--border);border-radius:7px;font-family:inherit;color:var(--ink);background:var(--white)}
.emp-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--border);margin-top:6px}
.emp-h{margin:16px 0 8px;font-size:13px}
.pair-map{height:180px;max-width:460px;border:1px solid var(--cardborder);border-radius:10px;margin:8px 0 4px;overflow:hidden;position:relative;z-index:0;isolation:isolate}
.pe-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.pe-grid label{display:block;font-size:12px;color:var(--slate);font-weight:700;margin:0 0 4px}
.pe-grid select{width:100%}
.pe-period{display:flex;align-items:center;gap:6px}
.pe-period input{flex:1;min-width:0}
@media(max-width:560px){.pe-grid{grid-template-columns:1fr}}
#pairedit label{font-size:12px;color:var(--slate);font-weight:700}
.emp-week{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--bg2)}
.emp-week-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-bottom:4px}
.emp-sched-row{display:flex;align-items:center;gap:8px;margin:6px 0;flex-wrap:wrap}
.emp-sched-row select,.emp-sched-row input{padding:6px 8px;border:1px solid var(--border);border-radius:7px;font-family:inherit;color:var(--ink);background:var(--white)}
#empedit label{display:block;font-size:12px;color:var(--slate);font-weight:700;margin:4px 0}
#emp-home{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--white)}
.tc-grid{display:flex;flex-direction:column;gap:2px;margin:12px 0}
.tc-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.tc-sw{width:18px;height:18px;border-radius:5px;flex:none;border:1px solid var(--border)}
.tc-name{flex:1;font-size:13px}
.tc-row input[type=color]{width:48px;height:30px;border:1px solid var(--border);border-radius:6px;background:var(--white);cursor:pointer;padding:2px}
.tc-row input[type=color]:disabled{opacity:.4;cursor:default}
.sp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--border)}
.sp-row .sp-name{width:150px;padding:6px 8px;border:1px solid var(--border);border-radius:7px;font-family:inherit;color:var(--ink);background:var(--white)}
.sp-times input[type=time]{padding:6px 8px;border:1px solid var(--border);border-radius:7px;font-family:inherit;color:var(--ink);background:var(--white)}
.sp-days{display:flex;gap:4px;flex-wrap:wrap}
.sp-day{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;border:1px solid var(--border);border-radius:7px;padding:3px 7px;cursor:pointer;color:var(--slate)}
.sp-day.on{background:var(--assure-10);border-color:var(--assure);color:var(--assure);font-weight:600}
.sp-day input{margin:0;width:auto}
.emp-home-wrap{position:relative}
.emp-home-sugg{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--white);border:1px solid var(--border);border-radius:9px;box-shadow:0 14px 30px rgba(0,25,35,.18);max-height:220px;overflow:auto;margin-top:3px}
.ehs{display:block;width:100%;text-align:left;padding:8px 10px;border:none;background:none;font-family:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.ehs:hover{background:var(--hover)}
/* item 7.2: standard input / dropdown styling to match the other modules */
  #admin select,#admin input[type=text],#admin input[type=number],#admin input[type=datetime-local],#admin input[type=date],#admin input[type=time],#admin textarea{padding:7px 10px;border:1px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;color:var(--ink);background:var(--white)}
/* match the Service Users focus effect (soft assure ring) instead of the default outline */
  #admin select:focus,#admin input:focus,#admin textarea:focus{outline:none;border-color:var(--assure);box-shadow:0 0 0 2px rgba(0,118,137,.2)}
#admin select{cursor:pointer}
#admin .durcell{display:inline-flex;align-items:center;gap:5px;color:var(--slate);font-size:12.5px}
#admin .durcell input{width:64px;text-align:right}

/* ==========================================================================
   SOURCE: 18-scheduling-wireframes.html  (555 unique statements)
   ========================================================================== */

.tkey{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:var(--slate)}
#statband{grid-template-columns:repeat(6,1fr)}
@media (max-width:1100px){#statband{grid-template-columns:repeat(3,1fr)}}
/* ====== list controls: one horizontal row (scope · search · source) ====== */
  .card-h .right.listctl,.listctl{flex-wrap:nowrap;overflow-x:auto}
.rosterctl .right{flex-wrap:nowrap;justify-content:flex-end;gap:7px;flex:0 0 auto}
@media (max-width:980px){.rosterctl{flex-wrap:wrap}.rosterctl .right{flex-wrap:wrap}}
.views > section#planning{display:block}
.views:has(:target) > section#bookings{display:none}
.views:has(#bookings:target) > section#bookings{display:block}
.views > section#bookings:has(:target){display:block}
/* search-match highlight (mirrors the header search) */
  #schedbody mark{background:#ffd23d;color:#2a2000;border-radius:3px;padding:0 2px;font-weight:700;box-shadow:0 0 0 1px rgba(120,86,0,.35)}
html.is-dark #schedbody mark{background:#ffcf33;color:#241a00;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.tipwrap{position:fixed;z-index:200;background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;line-height:1.4;padding:9px 13px;border-radius:9px;max-width:300px;box-shadow:0 8px 24px rgba(0,25,35,.34);pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s}
.leaflet-tooltip{background:var(--navy)!important;color:#fff!important;border:none!important;border-radius:9px!important;font-family:var(--font)!important;font-size:13px!important;font-weight:600!important;padding:8px 12px!important;box-shadow:0 8px 24px rgba(0,25,35,.34)!important}
.leaflet-tooltip-top:before{border-top-color:var(--navy)!important}
.leaflet-tooltip-bottom:before{border-bottom-color:var(--navy)!important}
.leaflet-tooltip-left:before{border-left-color:var(--navy)!important}
.leaflet-tooltip-right:before{border-right-color:var(--navy)!important}
/* ===== Scheduling module ===== */
  /* T-shirt job size badge (S/M/L/XL) */
  .sz{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 5px;border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.02em;border:1px solid var(--border);vertical-align:middle}
.sz-s{background:var(--green-bg);color:var(--green);border-color:rgba(27,125,79,.3)}
.sz-m{background:var(--assure-10);color:#00657a;border-color:rgba(0,118,137,.3)}
.sz-l{background:var(--amber-bg);color:var(--amber);border-color:rgba(178,106,0,.3)}
.sz-xl{background:var(--red-bg);color:var(--red);border-color:rgba(179,38,30,.3)}
html.is-dark .sz-m{color:var(--assure)}
/* tray waiting-time chip (escalates if not accepted) */
  .wait{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wait .fi{font-size:10px}
.wait.g{background:var(--green-bg);color:var(--green)}
.wait.a{background:var(--amber-bg);color:var(--amber)}
.wait.r{background:var(--red-bg);color:var(--red);animation:waitpulse 1.6s ease-in-out infinite}
@keyframes waitpulse{0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.0)}50%{box-shadow:0 0 0 3px rgba(179,38,30,.18)}}
@media (prefers-reduced-motion:reduce){.wait.r{animation:none}}
/* available-jobs pool card */
  .poolband{display:flex;gap:10px;flex-wrap:wrap}
.pooljob{flex:1 1 240px;min-width:0;border:1.5px solid var(--cardborder);border-left:4px solid var(--assure);border-radius:10px;padding:10px 12px;background:var(--white);display:flex;flex-direction:column;gap:5px}
.pooljob .pj-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pooljob b{font-size:13px}
.pooljob small{font-size:11.5px;color:var(--slate)}
.pooljob .pj-act{display:flex;gap:6px;margin-top:4px}
/* Teams integration modal */
  .teams-conn{display:flex;align-items:center;gap:10px;background:var(--green-bg);border:1px solid rgba(27,125,79,.35);border-radius:10px;padding:10px 13px;font-size:13px;margin-bottom:12px}
.teams-logo{width:26px;height:26px;border-radius:6px;background:#4b53bc;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.tgl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}
.tgl-row:last-child{border-bottom:none}
.tgl{appearance:none;width:38px;height:20px;border-radius:999px;background:var(--border);position:relative;cursor:pointer;flex:none;transition:.15s}
.tgl:checked{background:var(--green)}
.tgl::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.tgl:checked::after{left:20px}
/* durations config table */
  .durtbl input{width:64px;padding:4px 6px;text-align:center}
.durtbl td,.durtbl th{text-align:center}
.durtbl td:first-child,.durtbl th:first-child{text-align:left}
/* task-type pills */
  .t-install{background:var(--assure-15);color:#00657a}
.t-change{background:var(--amber-bg);color:var(--amber)}
.t-decom{background:var(--safe);color:var(--slate)}
.t-assess{background:rgba(124,77,187,.16);color:#5e3a96}
.t-welfare{background:var(--green-bg);color:var(--green)}
.t-other{background:rgba(59,111,212,.14);color:#2c56a8}
html.is-dark .t-assess{color:#c4abf7}
.rec-tag{display:inline-flex;align-items:center;font-weight:700;color:var(--assure);background:var(--assure-10);border:1px solid rgba(0,118,137,.25);border-radius:4px;padding:1px 4px;margin-left:4px;white-space:nowrap;cursor:help}
.rec-tag .fi{font-size:9.5px;width:auto}
/* schedule modal: free-slot grid */
  .slotgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0}
@media (max-width:560px){.slotgrid{grid-template-columns:repeat(3,1fr)}}
.slot{padding:8px 6px;border:1px solid var(--green);background:var(--green-bg);color:var(--green);border-radius:9px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer}
.slot:hover{filter:brightness(.97)}
.slot.sel{background:var(--green);color:#fff}
.slot.busy{border-color:var(--border);background:var(--bg2);color:var(--slate);cursor:not-allowed;font-weight:500}
/* dispatcher board layout */
  .plan-grid{display:grid;grid-template-columns:260px 1fr 380px;gap:14px;align-items:start}
@media (max-width:1300px){.plan-grid{grid-template-columns:240px 1fr}.mapcol{grid-column:1 / -1;grid-row:1}}
@media (max-width:900px){.plan-grid{grid-template-columns:1fr}}
.pcol{min-width:0}
.lanes-head{margin:0 0 8px}
.lanes{display:flex;flex-direction:column;gap:12px}
.uns{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;border:1px solid var(--cardborder);border-left:4px solid var(--assure);border-radius:10px;padding:9px 11px;background:var(--white);cursor:pointer;font-family:inherit;color:var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.uns-filt{display:flex;gap:6px;flex:1 1 100%;min-width:0;margin-top:3px}
.uns-filt select{flex:1 1 0!important;min-width:0!important;max-width:none!important}
.uns:hover{background:var(--hover)}
.uns.sel{border-color:var(--assure);box-shadow:0 0 0 2px var(--assure-15);background:var(--assure-10)}
#unschedlist .uns.sel{transform:translateX(10px);outline:2px solid var(--assure);outline-offset:2px;border-top-color:var(--cardborder);border-right-color:var(--cardborder);border-bottom-color:var(--cardborder);box-shadow:none;position:relative;z-index:2}
#unschedlist .uns .pick-no{position:absolute;top:-9px;left:8px;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;background:var(--assure);color:#fff;font-size:11px;font-weight:800;border-radius:999px;box-shadow:0 2px 5px rgba(0,25,35,.25);z-index:3}
/* colour-code the task box by type (item 6) */
  .uns.t-install{border-left-color:#0089a3}
.uns.t-change{border-left-color:var(--amber)}
.uns.t-decom{border-left-color:var(--slate)}
.uns.t-assess{border-left-color:#7c4dbb}
.uns.t-welfare{border-left-color:var(--green)}
.uns.t-other{border-left-color:#2c56a8}
/* responsible's user group selector */
  .lanes-grp{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.uns-h{display:flex;gap:6px;margin-bottom:2px;flex-wrap:wrap;align-items:center}
.uns b{font-size:13px}
.uns small{font-size:11.5px;color:var(--slate);display:block;line-height:1.35}
.lane{border:1.5px solid var(--cardborder);border-radius:12px;background:var(--white);box-shadow:0 1px 2px rgba(0,25,35,.06);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.lane:hover{border-color:var(--assure)}
.lane.focus{border-color:var(--assure);box-shadow:0 0 0 2px var(--assure-15)}
.lane-h{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.lane-h b{font-size:14px}
.lane-h .dot{width:11px;height:11px;border-radius:50%;flex:none}
.lane-stat{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--slate);white-space:nowrap}
.lane-stat.over{color:var(--red)}
.lane-h .dayfill{flex:1 1 100%;display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.dayfill-track{position:relative;flex:1;min-width:64px;height:10px;border-radius:999px;background:var(--bg2);border:1px solid var(--border);overflow:hidden}
.dfs{position:absolute;top:0;bottom:0}
.dfs-work{background:#0891b2}
.dfs-travel{background:#eab308}
.dfs-busy{background:#7c3aed}
.dfs-wait{background:repeating-linear-gradient(45deg,#f59e0b 0 4px,#fcd34d 4px 8px)}
/* gender-restricted visits + multi-person + pairing chips */
  .rx-chip{font-size:10px;font-weight:700;border-radius:4px;padding:0 5px;border:1px solid;display:inline-block}
.rx-f{color:#c2186b;background:rgba(194,24,107,.09);border-color:rgba(194,24,107,.4)}
.rx-m{color:#2c56a8;background:rgba(44,86,168,.09);border-color:rgba(44,86,168,.4)}
html.is-dark .rx-f{color:#f27dae}
html.is-dark .rx-m{color:#8fb0ee}
.mp-chip{font-size:10px;font-weight:700;border-radius:4px;padding:0 5px;border:1px solid rgba(8,145,178,.4);color:#0e7490;background:rgba(8,145,178,.09);display:inline-block}
.mp-chip .fi{font-size:9px}
.mp-chip.mp-short{color:#92400e;background:rgba(224,165,0,.12);border-color:rgba(224,165,0,.5)}
html.is-dark .mp-chip{color:#67d7ee}
html.is-dark .mp-chip.mp-short{color:#fcd34d}
.pair-chip{font-size:10px;font-weight:700;border-radius:999px;padding:1px 8px;border:1px solid rgba(124,58,237,.4);color:#6d28d9;background:rgba(124,58,237,.09);display:inline-flex;align-items:center;gap:4px}
.pair-chip .fi{font-size:9px}
html.is-dark .pair-chip{color:#c4b5fd}
.trav.mp-wait{color:#92400e;background:rgba(224,165,0,.1);border:1px dashed rgba(224,165,0,.55);border-radius:8px}
html.is-dark .trav.mp-wait{color:#fcd34d}
.mp-cand{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--cardborder);border-radius:10px;padding:9px 11px;margin:7px 0;cursor:pointer;font-size:13px}
.mp-cand:hover{background:var(--hover)}
.mp-cand input{margin:0}
.mp-cand .dot{width:9px;height:9px;border-radius:50%;flex:none}
.mp-cand .mp-eta{color:var(--slate);font-size:12px}
.mp-cand.mp-over{opacity:.75}
.lane-stats{font-size:10.5px;font-weight:600;color:var(--slate);white-space:nowrap;flex:none}
.lane-stats .fi{font-size:10px;color:var(--pri-ink);margin:0 1px}
.ac-ul{margin:8px 0 0;padding-left:18px;font-size:13px}
.ac-ul li{margin:4px 0}
.teams-call{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;margin:0 2px;border:1px solid transparent;background:none;border-radius:7px;cursor:pointer;vertical-align:middle;flex:none;font-size:14px;color:#6264a7}
.teams-call:hover{background:var(--hover);border-color:var(--border);color:#6264a7}
.dayfill-pct{font-size:11px;font-weight:700;color:var(--slate);white-space:nowrap}
.busy-block{display:flex;align-items:center;gap:10px;border:1px dashed #6264a7;border-left:4px solid #6264a7;border-radius:9px;padding:7px 10px;color:var(--ink);background:repeating-linear-gradient(45deg,rgba(98,100,167,.07) 0 8px,rgba(98,100,167,.15) 8px 16px)}
.busy-block .busy-ic{display:inline-flex;flex:none;line-height:0;margin-left:auto}
/* Teams icon on the right so the hours align down the lane */
  .teams-pick{position:fixed;z-index:600;background:var(--white);border:1px solid var(--cardborder);border-radius:10px;box-shadow:0 14px 34px rgba(0,25,35,.25);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:170px}
.teams-pick small{padding:2px 8px;color:var(--slate);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.teams-pick button{display:flex;align-items:center;gap:8px;padding:7px 10px;border:none;border-radius:8px;background:none;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
.teams-pick button:hover{background:var(--hover)}
.teams-pick .fi{color:#5b5fc7;font-size:12px}
.lane-shift{font-size:11px;font-weight:700;color:var(--slate);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.lane-shift .fi{font-size:10px}
.dfs-free{background:transparent}
.slaind{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;border-radius:4px;padding:1px 6px;border:1px solid}
.slaind .fi{font-size:9px}
.slaind.amber{color:#92400e;background:rgba(224,165,0,.14);border-color:rgba(224,165,0,.55)}
.slaind.red{color:var(--red);background:rgba(179,38,30,.10);border-color:rgba(179,38,30,.5)}
.busy-block .busy-ic svg{display:block;width:19px;height:19px}
.jt-tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:3px}
.jt-tags .pill{font-size:10px}
.jt-dur{font-size:10.5px;font-weight:700;color:var(--slate);white-space:nowrap}
.busy-block .job-b b{font-size:12.5px}
.lane-toggle{width:22px;height:22px;flex:none;border:1px solid transparent;background:none;color:var(--slate);border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0;font-family:inherit}
.lane-toggle:hover{background:var(--hover);border-color:var(--border);color:var(--assure)}
.lane-toggle .fi{transition:transform .2s}
.lane.collapsed .lane-toggle .fi{transform:rotate(-90deg)}
.lane.collapsed .lane-body{display:none}
.own-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;background:var(--assure-10);color:var(--assure);border:1px solid var(--assure-15);border-radius:999px;padding:1px 7px;white-space:nowrap}
@keyframes jobEnter{from{opacity:0;transform:translateX(-16px) scale(.97)}to{opacity:1;transform:none}}
.job.job-enter{animation:jobEnter .34s cubic-bezier(.2,.7,.3,1)}
@keyframes unsEnter{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.uns.uns-enter{animation:unsEnter .3s ease}
.lane-body{padding:10px 14px;display:flex;flex-direction:column;gap:4px}
.job{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--cardborder);border-left:4px solid var(--assure);border-radius:9px;padding:7px 10px;background-color:var(--bg2);cursor:pointer;font-family:inherit;color:var(--ink)}
.job:hover{box-shadow:0 0 0 2px var(--assure-15)}
.job.t-install{border-left-color:#0089a3}
.job.t-change{border-left-color:#ea7c0c}
.job.t-decom{border-left-color:#4E5861}
.job.t-assess{border-left-color:#7c4dbb}
.job.t-welfare{border-left-color:#15803d}
.job.t-other{border-left-color:#2c56a8}
.job-t{font-weight:700;font-variant-numeric:tabular-nums;font-size:12.5px;flex:none;width:42px}
.job-b b{font-size:13px;display:block}
.job-b small{font-size:11px;color:var(--slate)}
.trav{font-size:11px;color:var(--slate);padding:1px 0 1px 46px;display:flex;align-items:center;gap:6px}
.trav.end{padding-left:46px;font-style:italic}
.lane-add{margin:0 14px 12px;display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--assure);background:var(--assure-10);color:var(--assure);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer}
.lane-add:hover{background:var(--assure-15)}
.mapwrap{width:100%;height:360px;border-bottom:1px solid var(--border);z-index:0}
.job.atrisk{box-shadow:0 0 0 2px #e0a500,0 0 13px 1px rgba(224,165,0,.6)}
.job.impossible{box-shadow:0 0 0 2px #e5342a,0 0 14px 1px rgba(229,52,42,.62)}
.risk-flag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;border-radius:999px;padding:1px 10px;margin-left:6px;white-space:nowrap;vertical-align:middle;line-height:1.4}
.risk-flag.rf-imp{background:var(--red);color:#fff}
.risk-flag.rf-atr{background:var(--amber);color:#fff}
.pill.p-rel{background:#fbe3d2;color:#9a4a16}
html.is-dark .pill.p-rel{background:rgba(216,122,58,.26);color:#f0b48a}
.rel-note{display:block;color:#9a4a16;font-size:11px;margin-top:1px;font-weight:600}
html.is-dark .rel-note{color:#f0b48a}
.rel-note .fi{font-size:10px;margin-right:3px}
.rtl-ev[draggable]{cursor:grab}
.rtl-ev[draggable]:active{cursor:grabbing}
.rtl-track.dragover{outline:2px dashed var(--assure);outline-offset:-2px;background:var(--assure-10)}
.rtl-snap{position:absolute;top:0;bottom:0;width:2px;background:var(--assure);pointer-events:none;z-index:6}
.rtl-snap .rtl-snap-t{position:absolute;top:3px;left:3px;background:var(--assure);color:#fff;font-size:10px;font-weight:800;padding:1px 5px;border-radius:5px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,25,35,.3)}
.caldrop-change{display:flex;gap:14px;align-items:stretch;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.caldrop-change>div{flex:1}
.caldrop-change .anno{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.job-move{display:inline-flex;flex-direction:column;gap:2px;margin:0 2px;flex:none}
.jm{width:22px;height:16px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;background:none;color:var(--slate);border-radius:8px;cursor:pointer;font-size:10px;padding:0;font-family:inherit}
.jm:hover:not([disabled]){background:var(--hover);border-color:var(--border);color:var(--assure)}
.jm[disabled]{opacity:.32;cursor:default}
.maph{cursor:pointer}
#mapscrim{display:none;position:fixed;inset:0;background:rgba(0,25,35,.5);z-index:199}
.mapcol.map-expanded{position:fixed;inset:3vh 3vw;z-index:200;margin:0;max-width:none;width:auto;background:var(--white);border-radius:14px;box-shadow:0 30px 90px rgba(0,25,35,.5);overflow:auto;display:flex;flex-direction:column}
.mapcol.map-expanded>.card-b{flex:1;min-height:0;display:flex;flex-direction:column}
.mapcol.map-expanded .mapwrap{flex:1;height:auto!important;min-height:0}
.ilos-note{display:flex;align-items:flex-start;gap:9px;background:var(--assure-10);border:1px solid rgba(0,118,137,.25);border-radius:9px;padding:9px 13px;font-size:12.5px;color:var(--ink);margin:0 0 12px;line-height:1.4}
.ilos-note .fi{color:var(--assure);margin-top:2px;flex:none}
/* dark mode: lift the near-black dark basemap so streets/areas are legible (item 4.1) */
  /* Dark-mode map – CodePen invert technique: standard OSM tiles, inverted only on the basemap layer + zoom controls (markers/routes unaffected) */
  html.is-dark .mapwrap .leaflet-layer,
  html.is-dark .mapwrap .leaflet-control-zoom-in,
  html.is-dark .mapwrap .leaflet-control-zoom-out{filter:invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)}
.mapwrap .leaflet-pane img,.mapwrap .leaflet-tile,.mapwrap img.leaflet-image-layer{max-width:none!important}
.mapwrap .leaflet-overlay-pane svg,.mapwrap .leaflet-zoom-box{width:auto;height:auto;max-width:none}
.leaflet-container{font:inherit}
.routebar{padding:11px 14px;font-size:12.5px;color:var(--ink);line-height:1.5}
/* DP9: wider tasks column, narrower schedule column */
  .plan-grid{grid-template-columns:340px minmax(0,1fr) 430px}
/* responsive (02 Jul 2026): keep the centre (Responders' day) usable on laptop widths –
     shrink the side columns first, then drop the map below, then stack */
  @media (max-width:1780px){.plan-grid{grid-template-columns:300px minmax(0,1fr) 370px}}
@media (max-width:1560px){.plan-grid{grid-template-columns:300px minmax(0,1fr)}.plan-grid .mapcol{grid-column:1 / -1;grid-row:1}}
/* map goes ON TOP when the 3 columns no longer fit */
  @media (max-width:1300px){.plan-grid{grid-template-columns:280px minmax(0,1fr)}}
/* insertion slots (drop a task anywhere in a lane, DP6) */
  .insert-slot{display:flex;align-items:center;justify-content:center;width:100%;height:20px;margin:1px 0;border:1px dashed var(--assure);background:var(--assure-10);color:var(--assure);border-radius:7px;cursor:pointer;font-family:inherit;font-size:11px}
.insert-slot:hover{background:var(--assure-15)}
.insert-slot .fi{font-size:11px}
/* auto-schedule proposals (DP3) */
  .propbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--assure-10);border:1px solid rgba(0,118,137,.35);border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:12.5px;color:var(--ink)}
.propbar .pb-act{margin-left:auto;display:flex;gap:6px}
.job.proposed{border-style:dashed;border-left-style:solid;background:var(--assure-10);box-shadow:inset 0 0 0 1px var(--assure-15)}
.prop-act{margin-left:auto;display:flex;gap:4px}
.prop-act .btn{padding:3px 8px;font-size:11px}
.prop-tag{font-size:10px;font-weight:700;color:var(--assure);background:var(--assure-10);border:1px solid rgba(0,118,137,.3);border-radius:4px;padding:0 5px}
.uns.proposed{opacity:.62;border-left-style:dashed}
/* optimise proposals (DP4): old struck, new highlighted */
  .opt-blk{border:1px dashed var(--border);border-radius:9px;padding:8px;margin:6px 0}
.opt-blk.new{border-color:var(--assure);background:var(--assure-10)}
.opt-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:4px}
.opt-act{margin-top:8px;display:flex;gap:6px}
.job.opt-moved{box-shadow:inset 0 0 0 2px var(--assure);background:var(--assure-10)}
/* map legend + flash link (DP10) */
  .maplegend{display:flex;gap:14px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid var(--border);font-size:11.5px;color:var(--slate)}
.maplegend span{display:inline-flex;align-items:center;gap:6px}
.lg{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.lg-dep{border-radius:3px;background:var(--ink)}
.lg-sched{background:var(--assure)}
.lg-uns{background:transparent;border:2px dashed var(--red);width:12px;height:12px}
.lg-route{width:16px;height:0;border-top:3px solid var(--assure);border-radius:0}
.flash{box-shadow:0 0 0 2px var(--assure),0 0 0 5px var(--assure-15)!important}
/* roster grid */
  .rostertbl{table-layout:fixed;min-width:980px}
/* all 7 day columns share the same width */
  .rostertbl th:first-child{width:250px}
.rostertbl td{vertical-align:top}
.rcell{cursor:pointer;min-width:78px;overflow:hidden}
.rcell:hover{outline:2px solid var(--assure);outline-offset:-2px}
.rc-l{display:block;font-weight:700;font-size:12px}
.rc-s{display:block;font-size:10.5px;color:var(--slate);font-weight:500}
.rcell.r-shift{background:var(--green-bg)}
.rcell.r-shift .rc-l{color:var(--green)}
.rcell.r-off{background:transparent}
.rcell.r-off .rc-l{color:var(--slate);font-weight:500}
.rcell.r-sick{background:var(--red-bg)}
.rcell.r-sick .rc-l{color:var(--red)}
.rcell.r-hol{background:var(--amber-bg)}
.rcell.r-hol .rc-l{color:var(--amber)}
.rcell.r-train{background:var(--assure-10)}
.rcell.r-train .rc-l{color:#00657a}
/* item 1.1: Admin = teal, distinct from Training's indigo */
  .rcell.r-admin{background:rgba(13,148,136,.16)}
.rcell.r-admin .rc-l{color:#0f766e}
html.is-dark .rcell.r-train .rc-l{color:var(--assure)}
html.is-dark .rcell.r-admin{background:rgba(45,212,191,.22)}
html.is-dark .rcell.r-admin .rc-l{color:#5eead4}
.rlegend{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rkey{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}
.rkey.r-shift{background:var(--green-bg);color:var(--green)}
.rkey.r-off{background:var(--safe);color:var(--slate)}
.rkey.r-sick{background:var(--red-bg);color:var(--red)}
.rkey.r-hol{background:var(--amber-bg);color:var(--amber)}
.rkey.r-train{background:var(--assure-10);color:#00657a}
.rkey.r-admin{background:rgba(13,148,136,.16);color:#0f766e}
html.is-dark .rkey.r-admin{background:rgba(45,212,191,.22);color:#5eead4}
.sf-row{padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.sf-row .sf-sel{margin-top:5px;max-width:280px}
/* item 9: the sick flow now has two sections – booked tasks and locked referrals */
  .sf-sechd{display:flex;align-items:center;gap:8px;margin:16px 0 2px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate)}
.sf-sechd .fi{color:var(--assure)}
.sf-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--assure-10);color:var(--assure);font-size:11px;font-weight:700;letter-spacing:0}
#sf-refsec .sf-sechd .fi{color:var(--amber)}
#sf-refsec .sf-count{background:var(--amber-bg);color:var(--amber)}
.sf-reflink{font-weight:700;color:var(--assure);text-decoration:none}
.sf-reflink:hover{text-decoration:underline}
/* roster controls on one row */
  .rosterctl{flex-wrap:wrap;gap:8px}
.rosterctl h3{flex:0 1 auto;min-width:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rosterctl .weeknav{flex:none;margin-right:6px}
.weeknav{display:inline-flex;align-items:center;gap:6px}
.rosterctl .right{margin-left:auto}
.rosterctl .right .reqsel{padding:5px 8px;font-size:12px;max-width:150px}
.rosterctl .right .btn{white-space:nowrap}
@media (max-width:760px){.rosterctl{flex-wrap:wrap}}
/* free-text note shown in a roster cell (item 1.4) */
  .rc-note{display:block;font-size:10px;line-height:1.25;color:var(--slate);font-style:italic;font-weight:500;margin-top:1px}
/* clickable staff name (opens shift pattern) */
  .rname{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
.rname:hover{color:var(--assure);text-decoration:underline}
/* item 3.3: highlight today's column */
  /* item 1.1: today's column is outlined, not filled */
  .rostertbl th.r-today{color:var(--assure);background:transparent;box-shadow:inset 0 2px 0 var(--assure),inset 2px 0 0 var(--assure),inset -2px 0 0 var(--assure)}
.rostertbl td.rcell.r-today{box-shadow:inset 2px 0 0 var(--assure),inset -2px 0 0 var(--assure)}
.rostertbl td.rcell.r-today-last{box-shadow:inset 2px 0 0 var(--assure),inset -2px 0 0 var(--assure),inset 0 -2px 0 var(--assure)}
.rostertbl th.r-today::after{content:' • today';font-size:9px;font-weight:800;letter-spacing:.03em}
/* 24h on-shift bar in a roster cell */
  .hbar{display:flex;gap:1px;height:14px;border-radius:3px;overflow:hidden;margin:1px 0 3px}
.hseg{flex:1;background:var(--bg2)}
.hseg.on{background:var(--green)}
html.is-dark .hseg{background:#22343c}
/* item 1.7: keep the on-duty segments green in dark mode (override the generic dark .hseg rule) */
  html.is-dark .hseg.on{background:#37c98a}
/* shift cells: neutral background – only the on-hours are coloured (in the bar) */
  .rcell.r-shift{background:transparent}
/* Training – distinct indigo (was too close to Shift) */
  .rcell.r-train{background:rgba(79,70,229,.15)}
.rcell.r-train .rc-l{color:#4338ca}
.rkey.r-train{background:rgba(79,70,229,.15);color:#4338ca}
/* item 1.7: stronger Training contrast in dark mode */
  html.is-dark .rcell.r-train{background:rgba(140,131,255,.30)}
html.is-dark .rcell.r-train .rc-l,html.is-dark .rkey.r-train{color:#d4d1ff}
html.is-dark .rkey.r-train{background:rgba(140,131,255,.28)}
/* shift-pattern modal day chips */
  .spdays{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}
.spchk{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:8px;padding:5px 9px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.spchk input{width:auto}
/* calendar view */
  .caltbl td{vertical-align:top}
.calcell{min-width:120px}
.calchip{display:block;width:100%;text-align:left;border:1px solid var(--border);border-left:3px solid var(--assure);border-radius:7px;padding:5px 8px;margin:0 0 5px;font-size:11.5px;font-family:inherit;color:var(--ink);cursor:pointer;line-height:1.3;background:var(--bg2)}
.calchip:hover{background:var(--hover)}
.calchip b{font-variant-numeric:tabular-nums}
.calchip.t-install{border-left-color:#0089a3}
.calchip.t-change{border-left-color:var(--amber)}
.calchip.t-decom{border-left-color:var(--slate)}
.calchip.t-assess{border-left-color:#7c4dbb}
.calchip.t-welfare{border-left-color:var(--green)}
.calchip.t-other{border-left-color:#2c56a8}
/* outfield phone preview */
  .phonewrap{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
@media (max-width:760px){.phonewrap{grid-template-columns:1fr}}
.phone{background:var(--navy);border-radius:28px;padding:10px;box-shadow:0 20px 50px rgba(0,25,35,.35);max-width:300px}
.phone-top{display:flex;justify-content:space-between;color:#cfdde3;font-size:11px;padding:6px 12px}
.phone-body{background:var(--bg);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:480px}
.ph-greet{background:var(--white);border:1px solid var(--cardborder);border-radius:12px;padding:10px 12px;font-size:13px}
.ph-push{background:var(--assure);color:#fff;border-radius:10px;padding:8px 11px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}
.phjob{background:var(--white);border:1px solid var(--cardborder);border-radius:12px;padding:11px 12px;font-size:12.5px}
.phjob.new{border-color:var(--assure);box-shadow:0 0 0 2px var(--assure-15)}
.phjob-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.phjob-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.phreject{display:none;margin-top:9px;border-top:1px solid var(--border);padding-top:9px}
.phreject.on{display:block}
.phone-side{display:flex;flex-direction:column;gap:12px;max-width:560px}
/* ===== round 5 (24 Jun 2026): type tints, people cards, FullCalendar ===== */
  /* item 1.3: colour-code task boxes by job type using the tag colours */
  .uns.t-install,.job.t-install,.calchip.t-install{background-color:rgba(0,137,163,.10)}
.uns.t-change,.job.t-change,.calchip.t-change{background-color:rgba(234,124,12,.11)}
.uns.t-decom,.job.t-decom,.calchip.t-decom{background-color:rgba(78,88,97,.10)}
.uns.t-assess,.job.t-assess,.calchip.t-assess{background-color:rgba(124,77,187,.11)}
.uns.t-welfare,.job.t-welfare,.calchip.t-welfare{background-color:rgba(21,128,61,.11)}
.uns.t-other,.job.t-other,.calchip.t-other{background-color:rgba(44,86,168,.10)}
html.is-dark .uns.t-install,html.is-dark .job.t-install,html.is-dark .calchip.t-install{background-color:rgba(0,170,200,.17)}
html.is-dark .uns.t-change,html.is-dark .job.t-change,html.is-dark .calchip.t-change{background-color:rgba(234,140,40,.18)}
html.is-dark .uns.t-decom,html.is-dark .job.t-decom,html.is-dark .calchip.t-decom{background-color:rgba(150,160,170,.16)}
html.is-dark .uns.t-assess,html.is-dark .job.t-assess,html.is-dark .calchip.t-assess{background-color:rgba(160,110,230,.20)}
html.is-dark .uns.t-welfare,html.is-dark .job.t-welfare,html.is-dark .calchip.t-welfare{background-color:rgba(40,170,90,.18)}
html.is-dark .uns.t-other,html.is-dark .job.t-other,html.is-dark .calchip.t-other{background-color:rgba(90,130,220,.18)}
/* item 1.4: people cards */
  .peoplecards{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.pcard{flex:1 1 180px;min-width:168px;border:1px solid var(--cardborder);border-radius:12px;background:var(--white);padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.pcard .pc-h{display:flex;align-items:center;gap:8px}
.pcard .pc-dot{width:10px;height:10px;border-radius:50%;flex:none}
.pcard .pc-name{font-weight:700}
.pcard .pc-meta{font-size:12px;color:var(--slate)}
.pcard .pc-load{display:flex;gap:6px;font-size:11.5px;margin-top:1px;flex-wrap:wrap}
.pcard .pc-chip{background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:1px 8px;font-weight:600;color:var(--ink)}
.pcard.off{opacity:.55}
/* item 4: calendar (FullCalendar) + unassigned panel */
  .calwrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}
.calwrap > .card:nth-child(2){order:-1}
@media(max-width:1000px){.calwrap{grid-template-columns:1fr}}
#fc{min-height:560px}
.fc{font-family:inherit}
.fc .fc-toolbar-title{font-size:16px;font-weight:700}
.fc .fc-button{font-size:12.5px}
.fc .fc-button-primary{background:var(--pri);border-color:var(--pri)}
.fc .fc-button-primary:not(:disabled).fc-button-active,.fc .fc-button-primary:hover{background:var(--pri-dk);border-color:var(--pri-dk)}
.fc-event{cursor:pointer;border:none}
.unasgn{display:flex;flex-direction:column;gap:8px}
.unasgn .uitem{border:1px solid var(--cardborder);border-left:4px solid var(--slate);border-radius:10px;padding:8px 10px;background:var(--white)}
.unasgn .uitem b{font-size:13px}
.unasgn .uitem .ui-row{display:flex;gap:6px;margin-top:7px}
.unasgn .uitem select{flex:1;min-width:0;padding:5px 8px;font-size:12px;border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--ink);font-family:inherit}
/* ===== round 6 (25 Jun 2026): unschedule control, SLA-breach flag, completed greying, full-width filters, resource timeline ===== */
  /* split the lane job into a clickable main area + a small unschedule button */
  .job-main{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:none;padding:0;margin:0;font-family:inherit;color:inherit;text-align:left;cursor:pointer}
.job-uns{flex:none;width:28px;height:28px;border:1px solid transparent;background:none;color:var(--slate);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-family:inherit}
.job-uns:hover{background:var(--hover);border-color:var(--border);color:var(--assure)}
/* SLA-breach indicator */
  .sla-flag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;color:var(--red);background:var(--red-bg);border:1px solid rgba(179,38,30,.35);border-radius:5px;padding:0 5px;margin-left:5px;white-space:nowrap;vertical-align:middle}
.job.breach{border-left-color:var(--red)!important;box-shadow:inset 2px 0 0 var(--red)}
td .sla-flag{margin-left:6px}
/* completed tasks: greyed out across lanes / table / calendar */
  .job.done,.uns.done{opacity:.5;filter:grayscale(.55)}
.job.done .job-uns{display:none}
tr.row-done{opacity:.5;filter:grayscale(.4)}
/* item 2.1: Request-style SLA row colour-coding in the work queue */
  #schedbody tr.breached td{background:var(--red-bg)}
#schedbody tr.duesoon td{background:rgba(180,120,10,.10)}
html.is-dark #schedbody tr.duesoon td{background:rgba(217,161,74,.12)}
.done-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green);background:var(--green-bg);border:1px solid rgba(27,125,79,.35);border-radius:5px;padding:0 5px;margin-left:6px;vertical-align:middle}
.pill.p-done{background:var(--safe);color:var(--slate)}
.fc-event.fc-done{opacity:.5;filter:grayscale(.5)}
.calchip.done{opacity:.5;filter:grayscale(.5)}
/* item 3: Work-to-schedule filters on a single full-width line (no horizontal scroll) */
  .card-h .right.listctl{margin-left:0;flex:1 1 100%;flex-wrap:nowrap;overflow:visible;justify-content:space-between;align-items:center;gap:12px;margin-top:2px}
.listctl>*{flex:1 1 0;min-width:0}
.listctl .seg{flex:1 1 auto;justify-content:flex-start}
.listctl .reqsearch{flex:2 1 0}
.listctl .reqsel{flex:1 1 0;width:100%}
@media (max-width:680px){.card-h .right.listctl{flex-wrap:wrap}.listctl>*{flex:1 1 100%}}
/* item 1.4: resource-timeline calendar (one row per person) */
  .fc .fc-datagrid-cell-main{font-weight:700}
.fc .fc-resource-timeline .fc-event{padding:1px 4px}
.fc-timeline-event .fc-event-title{font-size:11.5px;font-weight:600}
/* ===== round 7 (25 Jun 2026): group chip, smaller Leaflet footer, before/after optimise, custom resource timeline ===== */
  /* item 1.1: user-group chip beside the responder name */
  .grp-chip{font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 9px;white-space:nowrap}
.grp-inst{background:var(--assure-15);color:#00657a}
.grp-assess{background:rgba(124,77,187,.16);color:#5e3a96}
html.is-dark .grp-inst{color:var(--assure)}
html.is-dark .grp-assess{color:#c4abf7}
/* item 1.6: shrink the Leaflet attribution footer on the route map */
  .mapwrap .leaflet-control-attribution{font-size:8.5px;padding:0 4px;line-height:1.5;background:rgba(255,255,255,.7)}
html.is-dark .mapwrap .leaflet-control-attribution{background:rgba(20,33,40,.7);color:var(--slate)}
.mapwrap .leaflet-control-attribution a{color:var(--slate)}
/* item 1.3: optimise before/after blocks */
  .opt-wrap{display:flex;flex-direction:column;gap:6px}
.opt-blk{border:1px dashed var(--border);border-radius:9px;padding:8px}
.opt-blk.before{opacity:.6}
.opt-blk.after{border-color:var(--assure);border-style:solid;background:var(--assure-10)}
.opt-blk .opt-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.opt-blk.after .opt-lbl{color:var(--assure)}
.opt-mini{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 6px;border-radius:7px}
.opt-mini .ot{font-variant-numeric:tabular-nums;font-weight:700;width:40px;flex:none;color:var(--ink)}
.opt-mini.before-row{color:var(--slate)}
.opt-mini .seq{width:18px;height:18px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none}
.opt-blk.after .opt-mini .seq{background:var(--assure);color:#fff;border-color:var(--assure)}
/* item 3.2: custom resource timeline (people rows × time) */
  .rtl-wrap{overflow:auto;background:var(--white)}
.rtl{min-width:100%}
.rtl.rtl-week{min-width:700px}
.rtl.rtl-day{--hpx:112px;width:calc(150px + 24 * var(--hpx));background-image:repeating-linear-gradient(to right, var(--border) 0, var(--border) 1px, transparent 1px, transparent var(--hpx));background-position:150px 0}
/* one source of truth: 112px per hour (2x zoom); grid, header and rows all derive from it */
  .rtl-row{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--border)}
.rtl-row:last-child{border-bottom:none}
.rtl-head{position:sticky;top:0;z-index:2;background:var(--bg2);box-shadow:inset 0 -2px 0 var(--border)}
.rtl-res{padding:8px 10px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px;justify-content:center;background:var(--white);position:sticky;left:0;z-index:3}
.rtl-head .rtl-res{background:var(--bg2);font-size:11px;color:var(--slate);font-weight:700;z-index:4}
.rtl-res .rn{font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px}
.rtl-res .rn .dot{width:9px;height:9px;border-radius:50%;flex:none}
.rtl-res .grp-chip{align-self:flex-start}
.rtl-track{position:relative;min-height:54px}
/* item 8: day view zoomed in – hour columns derive from --hpx; horizontal scroll; the view opens at the first task */
  .rtl-day .rtl-row{grid-template-columns:150px calc(24 * var(--hpx,112px))}
/* item 7: a bound pair shares one DOUBLE-HEIGHT row; its task blocks stretch to fill it */
  .rtl-row-pair .rtl-track{min-height:104px}
.rtl-off{position:absolute;top:0;bottom:0;background:rgba(78,88,97,.12);pointer-events:auto;z-index:0}
.rtl-travel{position:absolute;top:14px;bottom:14px;background:repeating-linear-gradient(45deg,rgba(234,179,8,.35) 0 5px,rgba(234,179,8,.15) 5px 10px);border:1px dashed rgba(234,179,8,.8);border-radius:5px;display:flex;align-items:center;justify-content:center;color:#92400e;font-size:9px;z-index:1}
.cal-shift{font-size:10.5px;font-weight:700;color:var(--slate)}
#cal-unlist .uns.sel{transform:translateX(10px);outline:2px solid var(--assure);outline-offset:2px;box-shadow:none;position:relative;z-index:2}
#cal-unlist .uns{position:relative}
#cal-unlist .uns .pick-no{position:absolute;top:-9px;left:8px;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;background:var(--assure);color:#fff;font-size:11px;font-weight:800;border-radius:999px;box-shadow:0 2px 5px rgba(0,25,35,.25);z-index:3}
.rtl-grid{position:absolute;inset:0;display:flex;pointer-events:none}
.rtl-gcol{flex:1;border-right:1px dashed var(--border)}
.rtl-gcol:last-child{border-right:none}
.rtl-times{display:flex}
.rtl-times .rtl-gcol{font-size:10.5px;color:var(--ink);font-weight:700;text-align:left;padding:6px 0 6px 5px;border:none;border-left:1px solid var(--border)}
.rtl-times .rtl-gcol:first-child{border-left:none}
.rtl-ev{position:absolute;top:6px;bottom:6px;border-radius:6px;padding:3px 7px;color:#fff;font-size:11px;font-weight:600;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:center;box-shadow:0 1px 3px rgba(0,25,35,.25);min-width:0}
.rtl-ev small{font-weight:500;opacity:.92;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtl-ev.done{background:#6b7a82!important;opacity:1;filter:none;color:#fff}
.rtl-ev.done small{color:rgba(255,255,255,.85)}
.rtl-ev b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtl-empty{padding:18px;text-align:center;color:var(--slate);font-size:13px}
/* week mode: 7 day columns */
  .rtl-week7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%}
.rtl-head .rtl-week7 .rtl-gcol{padding:4px 6px;font-size:10.5px;color:var(--slate);font-weight:700;border-right:1px dashed var(--border)}
.rtl-head .rtl-week7 .rtl-gcol:last-child{border-right:none}
.rtl-wgrid{min-height:54px}
.rtl-wcell{border-right:1px dashed var(--border);padding:4px;display:flex;flex-direction:column;gap:3px}
.rtl-wcell:last-child{border-right:none}
.rtl-chip{display:block;width:100%;text-align:left;border:1px solid var(--border);border-left:3px solid var(--assure);border-radius:6px;background:var(--bg2);color:var(--ink);font-family:inherit;font-size:10.5px;padding:3px 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtl-chip:hover{background:var(--hover)}
.rtl-chip.done{opacity:.5;filter:grayscale(.5)}
.card-h .right.right{margin-left:auto}
/* item 5: timeline drop targets when a task is picked */
  .rtl-track.droppable{cursor:copy;box-shadow:inset 0 0 0 1px var(--assure-15)}
.rtl-track.droppable:hover{background:var(--assure-10)}
.rtl-wcell.droppable{cursor:copy}
.rtl-wcell.droppable:hover{background:var(--assure-10);box-shadow:inset 0 0 0 1px var(--assure)}
#cal-unlist .uns{cursor:pointer}
#cal-unlist .uns.sel{border-color:var(--assure);box-shadow:0 0 0 2px var(--assure-15);background:var(--assure-10)}
/* ===== Handover subpage ===== */
  .ho-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
/* today (left) and previous shifts (right) take equal width */
  .ho-grid>.ho-side{order:1}
/* today on the left */
  .ho-grid>.card{order:2}
/* previous days on the right */
  @media(max-width:1100px){.ho-grid{grid-template-columns:1fr}}
.ho-side{display:flex;flex-direction:column;gap:14px}
.ho-acts button.ho-del:hover{color:var(--red);border-color:var(--red)}
.ho-datefilter{margin-left:auto;max-width:150px;padding:6px 9px;border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:12.5px;color:var(--ink);background:var(--white)}
.ho-staff{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ho-person{display:inline-flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:3px 11px 3px 3px;font-size:12.5px;font-weight:600;color:var(--ink)}
.ho-av{width:24px;height:24px;border-radius:50%;background:var(--pri);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700}
.ho-composer{border:1px solid var(--cardborder);border-radius:11px;padding:12px;background:var(--bg2);margin-bottom:14px}
#handover textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--white);resize:vertical;box-sizing:border-box}
#handover textarea:focus,#handover select:focus{outline:none;border-color:var(--assure);box-shadow:0 0 0 2px var(--assure-15)}
#handover select{padding:7px 10px;border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--white)}
#handover label{font-size:12px;color:var(--slate);font-weight:600}
/* radio list for "Add to the shift picture" – one-tap type selection */
  .ho-types{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.ho-type-opt{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;padding:4px 11px;border:1px solid var(--border);border-radius:999px;background:var(--white)}
.ho-type-opt:hover{border-color:var(--assure)}
.ho-type-opt input{width:auto;margin:0;accent-color:var(--assure)}
.ho-type-opt:has(input:checked){background:var(--assure-10);border-color:var(--assure);box-shadow:inset 0 0 0 1px var(--assure-15)}
/* per-day sections in the live-picture log */
  .ho-day{display:flex;flex-direction:column;gap:8px}
.ho-day+.ho-day{margin-top:6px}
.ho-day-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);padding-bottom:5px;border-bottom:1px solid var(--border)}
.ho-day-n{font-weight:700;background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:0 7px;font-size:10.5px;color:var(--slate)}
.ho-stream{display:flex;flex-direction:column;gap:8px}
.ho-item{display:flex;gap:10px;border:1px solid var(--border);border-radius:10px;padding:9px 11px;background:var(--white)}
.ho-item .ho-tagcell{flex:none;width:76px;align-self:flex-start}
.ho-body{min-width:0;font-size:13px;color:var(--ink)}
.ho-meta{font-size:11.5px;color:var(--slate);margin-bottom:2px}
.ho-tag{flex:none;align-self:flex-start;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:5px;padding:2px 6px;white-space:nowrap}
.ho-tag.note{background:var(--assure-10);color:#00657a}
.ho-tag.risk,.ho-tag.escalation{background:var(--red-bg);color:var(--red)}
.ho-tag.event{background:var(--amber-bg);color:var(--amber)}
.ho-tag.customer{background:rgba(124,77,187,.16);color:#5e3a96}
.ho-tag.staffing{background:rgba(44,86,168,.14);color:#2c56a8}
.ho-tag.carry{background:var(--green-bg);color:var(--green)}
.ho-tag.todo{background:rgba(8,145,178,.14);color:#0e7490}
html.is-dark .ho-tag.todo{color:#67d7ee}
/* next-shift orientation (02 Jul 2026): audience toggle + prominent next-shift entries + ack + formatting bar */
  .ho-audrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.ho-aud-opt{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.ho-aud-opt small{color:var(--slate);font-weight:400}
.ho-aud-opt input{width:auto;margin:0}
.ho-item.ho-next{border-left:3px solid var(--assure);background:var(--assure-10);border-radius:8px}
.ho-aud{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:6px;padding:3px 8px;margin-left:6px;display:inline-flex;align-items:center;justify-content:center;min-height:16px;line-height:1.3}
.ho-aud .fi{font-size:8px;line-height:1}
.ho-acts{display:inline-flex;gap:2px;margin-left:auto;align-self:flex-start}
.ho-acts button{width:26px;height:26px;border:1px solid transparent;border-radius:8px;background:none;color:var(--slate);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.ho-acts button:hover{background:var(--hover);border-color:var(--border);color:var(--assure)}
.ho-acts button.qa-ok:hover{color:var(--green)}
.ho-state{font-size:11.5px;margin-top:4px;font-weight:600}
.ho-state.res{color:var(--green)}
.ho-state.own{color:#92400e}
.ho-state.late{color:var(--red)}
.ho-cmt{font-size:11.5px;color:var(--slate);margin-top:4px}
.ho-item.ho-late{border:1px solid rgba(179,38,30,.55);border-left:4px solid var(--red);border-radius:8px;background:rgba(179,38,30,.05)}
.ho-item.ho-owned{border-left:4px solid #e0a500;border-radius:8px;background:rgba(224,165,0,.06)}
.ho-item.ho-res{opacity:.72}
.ho-del{width:26px;height:26px;flex:none;align-self:flex-start;border:1px solid transparent;border-radius:8px;background:none;color:var(--slate);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-left:auto}
.ho-del:hover{background:var(--hover);border-color:var(--border);color:var(--red)}
.ho-aud.next{background:var(--assure);color:#fff}
.ho-aud.all{background:var(--bg2);color:var(--slate);border:1px solid var(--border)}
.ho-sum{border:1px solid var(--cardborder);border-left:4px solid var(--assure);border-radius:10px;background:var(--assure-10);padding:10px 13px;margin:8px 0 10px}
.ho-sum.draft{border-left-color:var(--slate);background:var(--bg2)}
.ho-sum-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--assure);display:flex;align-items:center;gap:6px}
.ho-sum.draft .ho-sum-h{color:var(--slate)}
.ho-sum p{margin:6px 0;font-size:13px;line-height:1.5;color:var(--ink)}
.ho-sum-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--slate)}
.ho-fmtbar{display:flex;gap:4px;margin:4px 0 6px}
.ho-fmtbar button{width:30px;height:26px;border:1px solid var(--border);border-radius:7px;background:var(--white);color:var(--ink);cursor:pointer;font-size:12px;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.ho-fmtbar button:hover{background:var(--hover)}
html.is-dark .ho-tag.note{color:var(--assure)}
html.is-dark .ho-tag.customer{color:#c4abf7}
.ho-prev p{margin:0 0 8px;font-size:13px;color:var(--ink)}
.ho-block{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:8px 0;border-top:1px solid var(--border);color:var(--ink)}
.ho-carry{display:flex;flex-direction:column;gap:7px;border:1px solid var(--border);border-radius:9px;padding:10px;background:var(--bg2)}
.ho-check{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer}
.ho-check input{width:auto}
/* item 3.1: pulsating current-location marker */
  .resp-pin{background:none;border:none}
.resp-pulse{position:relative;display:block;width:16px;height:16px;border-radius:50%;background:var(--rc);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,25,35,.5)}
.resp-pulse::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--rc);animation:resppulse 1.6s ease-out infinite}
@keyframes resppulse{0%{transform:scale(.6);opacity:.85}100%{transform:scale(2.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.resp-pulse::after{animation:none}}
html.is-dark .resp-pulse{border-color:#0c1519}
/* item 3.5: lighten the date-picker calendar icon in dark mode */
  html.is-dark input[type=date]::-webkit-calendar-picker-indicator,html.is-dark input[type=time]::-webkit-calendar-picker-indicator{filter:invert(0.85)}
/* item 3.5: better contrast for the Installation type tag in dark mode */
  html.is-dark .t-install{color:#5cc6d8}
html.is-dark .uns.t-install,html.is-dark .job.t-install,html.is-dark .calchip.t-install{background-color:rgba(0,180,210,.22)}
.jd-mapbtn{appearance:none;border:0;background:rgba(255,255,255,.12);color:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-left:auto;margin-right:10px}
.jd-mapbtn:hover{background:rgba(255,255,255,.24)}
.jd-mapbtn:focus-visible{outline:2px solid #fff;outline-offset:1px}
/* Density (Ivan, 10 Jul 2026): Compact from the profile menu tightens the
   scheduler surfaces as well - lanes, jobs, unscheduled tray, roster cells
   (td/th are covered by the shared token rule in shell-a11y). */
html[data-density="compact"] .job{padding:4px 7px;gap:7px}
html[data-density="compact"] .uns{padding:5px 8px}
html[data-density="compact"] .uitem{padding:5px 8px}
html[data-density="compact"] .card-h{padding:7px 12px}
html[data-density="compact"] .idrow{margin:5px 0;font-size:12.5px}
html[data-density="compact"] .lane .job+.job{margin-top:3px}

/* ==========================================================================
   SOURCE: 19-messages-wireframes.html  (40 unique statements)
   ========================================================================== */

/* active page = Home (this module) */

  .side a[href="#messages"]{background:rgba(0,118,137,.12);color:var(--ink);font-weight:600;position:relative}
.side a[href="#messages"]::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 999px 999px 0;background:var(--assure)}
.side a[href="#messages"] .fi{color:var(--assure)}
/* ===== empty / error state pattern (01 shell, 10 Jul 2026) ===== */
.wf-empty{display:none;flex-direction:column;align-items:center;gap:8px;padding:36px 20px;text-align:center;color:var(--slate)}
body.demo-empty .wf-empty{display:flex}
.wf-empty .ic{width:44px;height:44px;border-radius:50%;background:var(--hover,#eef2f4);color:var(--slate);display:flex;align-items:center;justify-content:center;font-size:18px}
.wf-empty b{color:var(--ink);font-size:14px}
.wf-empty small{font-size:12.5px;max-width:340px}
.wf-error{display:none;gap:10px;align-items:center;background:var(--red-bg,#fdecec);border:1px solid rgba(179,38,30,.35);border-left:4px solid var(--red,#b3261e);border-radius:10px;padding:10px 14px;font-size:13px;margin:0 0 10px;color:var(--ink)}
body.demo-empty .wf-error{display:flex}
body.demo-empty #mb-list>.mb-conv{display:none}
body.demo-empty #mb-list>div{display:none}
.mb-ctx{display:inline-flex;gap:5px;align-items:center;background:var(--assure-10,rgba(0,118,137,.1));color:var(--assure,#007689);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;text-decoration:none;cursor:pointer}
.mb-ctx:hover{background:rgba(0,118,137,.18)}
#messages .mb-grid{display:grid;grid-template-columns:340px 1fr;min-height:540px}
#messages .mb-list{border-right:1px solid var(--cardborder);overflow:auto}
#messages .mb-conv{display:flex;gap:11px;width:100%;text-align:left;border:none;background:none;border-bottom:1px solid var(--bg2);padding:11px 14px;cursor:pointer;font-family:inherit;align-items:flex-start}
#messages .mb-conv:hover{background:var(--hover)}
#messages .mb-conv.on{background:var(--assure-10);box-shadow:inset 3px 0 0 var(--assure)}
#messages .mb-av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--assure-15);color:#00657a;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
#messages .mb-main{flex:1;min-width:0}
#messages .mb-who{font-weight:700;font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:6px}
#messages .mb-prev{font-size:12.5px;color:var(--slate);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#messages .mb-meta{display:flex;gap:6px;align-items:center;margin-top:5px}
#messages .mb-tag{font-size:9.5px;font-weight:800;letter-spacing:.05em;color:var(--slate);border:1px solid var(--border);border-radius:4px;padding:0 5px;text-transform:uppercase}
#messages .mb-cust{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--assure);background:var(--assure-10);border:1px solid rgba(0,118,137,.3);border-radius:999px;padding:1px 8px;text-decoration:none;white-space:nowrap}
#messages .mb-cust .fi{font-size:8.5px}
#messages a.mb-cust:hover{background:var(--assure-15,rgba(0,118,137,.15))}
#messages .mb-time{margin-left:auto;font-size:11px;color:var(--slate)}
#messages .mb-unread{width:8px;height:8px;border-radius:50%;background:var(--assure);flex:none;margin-top:6px}
#messages .mb-thread{display:flex;flex-direction:column}
#messages .mb-thead{padding:12px 16px;border-bottom:1px solid var(--cardborder);display:flex;align-items:center;gap:10px}
#messages .mb-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;overflow:auto;background:var(--bg2)}
#messages .bubble{max-width:74%;padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.4;box-shadow:0 1px 2px rgba(0,25,35,.08)}
#messages .bubble small{display:block;font-size:10.5px;color:var(--slate);margin-bottom:2px;font-weight:700}
#messages .bubble.in{background:var(--white);align-self:flex-start;border:1px solid var(--cardborder)}
#messages .bubble.out{background:var(--assure-10);align-self:flex-end}
#messages .mb-reply{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--cardborder)}
#messages .mb-reply input{flex:1}
@media(max-width:760px){#messages .mb-grid{grid-template-columns:1fr}#messages .mb-list{max-height:260px;border-right:none;border-bottom:1px solid var(--cardborder)}}

/* ==========================================================================
   SOURCE: 20-live-service-wireframes.html  (100 unique statements)
   ========================================================================== */

.pooljob{flex:1 1 240px;min-width:0;border:1px solid var(--cardborder);border-left:4px solid var(--assure);border-radius:10px;padding:10px 12px;background:var(--white);display:flex;flex-direction:column;gap:5px}
.rec-tag{font-size:10px;font-weight:700;color:var(--assure);background:var(--assure-10);border:1px solid rgba(0,118,137,.25);border-radius:4px;padding:0 5px;margin-left:4px;white-space:nowrap}
@media (max-width:1300px){.plan-grid{grid-template-columns:240px 1fr}.mapcol{grid-column:1 / -1}}
.uns{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;border:1px solid var(--cardborder);border-left:4px solid var(--assure);border-radius:10px;padding:9px 11px;background:var(--white);cursor:pointer;font-family:inherit;color:var(--ink)}
.uns-h{display:flex;gap:6px;margin-bottom:2px}
.lane{border:1px solid var(--cardborder);border-radius:12px;background:var(--white);box-shadow:0 1px 2px rgba(0,25,35,.06);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.job{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--border);border-left:4px solid var(--assure);border-radius:9px;padding:7px 10px;background:var(--bg2);cursor:pointer;font-family:inherit;color:var(--ink)}
.job:hover{background:var(--hover)}
.job.t-change{border-left-color:var(--amber)}
.job.t-decom{border-left-color:var(--slate)}
.job.t-welfare{border-left-color:var(--green)}
.mapwrap{width:100%;line-height:0;border-bottom:1px solid var(--border)}
.mapwrap svg{display:block;width:100%;height:auto}
.rcell{cursor:pointer;min-width:78px}
.rcell.r-admin{background:rgba(124,77,187,.12)}
.rcell.r-admin .rc-l{color:#5e3a96}
html.is-dark .rcell.r-admin .rc-l{color:#c4abf7}
.rkey.r-admin{background:rgba(124,77,187,.12);color:#5e3a96}
.sf-row{padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
/* active page = Scheduling (this module) – parent stays active across all module screens */

  .side a.navmod{background:rgba(0,118,137,.12);color:var(--ink);font-weight:600;position:relative}
.side a.navmod::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 999px 999px 0;background:var(--assure)}
.side a.navmod .fi{color:var(--assure)}
body:has(#planning:target) .side .subnav a[href="18-scheduling-wireframes.html#planning"],
  body:has(#planning :target) .side .subnav a[href="18-scheduling-wireframes.html#planning"],
  body:has(#roster:target) .side .subnav a[href="18-scheduling-wireframes.html#roster"],
  body:has(#roster :target) .side .subnav a[href="18-scheduling-wireframes.html#roster"]{color:var(--assure);font-weight:700}
.reqsearch input{width:100%;padding:7px 12px 7px 40px;border:1px solid var(--border);border-radius:10px;font-size:12.5px;font-family:inherit;background:var(--white);color:var(--ink)}
.views > section#bookings{display:block}
/* ===== Live Service (file 20) page-specific additions ===== */
/* ====== LIVE SERVICE – page-specific components (source for splice) ====== */
  .ls-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.ls-title h2{margin:0 0 2px;font-size:20px}
.ls-title .sub{color:var(--slate);font-size:12.5px}
.ls-statchips{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.statchip{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:7px 14px;text-align:center;min-width:78px}
.statchip b{display:block;font-size:20px;line-height:1.1}
.statchip span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700}
.statchip.red b{color:var(--red)}
.statchip.amber b{color:var(--amber)}
.statchip.green b{color:var(--green)}
.esc-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.esc{display:flex;align-items:flex-start;gap:10px;border-radius:10px;padding:9px 13px;font-size:13px;border:1px solid}
.esc .lbl{font-weight:700}
.esc.red{background:var(--red-bg);border-color:rgba(179,38,30,.3);color:var(--red)}
.esc.amber{background:var(--amber-bg);border-color:rgba(178,106,0,.3);color:var(--amber)}
.esc.green{background:var(--green-bg);border-color:rgba(27,125,79,.3);color:var(--green)}
.esc .det{color:var(--ink);font-weight:400}
.esc .dot{width:10px;height:10px;border-radius:50%;margin-top:4px;flex:none}
.esc.red .dot{background:var(--red)}
.esc.amber .dot{background:var(--amber)}
.esc.green .dot{background:var(--green)}
.ls-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.seg{display:inline-flex;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:4px}
.seg button{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--slate);padding:7px 14px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg button.on{background:var(--pri);color:#fff}
.chips{display:inline-flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 13px;border:1px solid var(--border);border-radius:999px;font-size:12px;font-weight:600;color:var(--slate);cursor:pointer;background:var(--white);user-select:none;display:inline-flex;align-items:center;gap:6px}
.chip .sw{width:10px;height:10px;border-radius:3px;flex:none}
.chip.on{background:var(--pri);border-color:var(--pri);color:#fff}
.chip.on .sw{outline:2px solid rgba(255,255,255,.6)}
.ls-split{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
@media (max-width:1150px){.ls-split{grid-template-columns:1fr}}
#map{height:560px;border-radius:10px;border:1px solid var(--border);z-index:1}
.mapnote{font-size:11.5px;color:var(--slate);margin-top:6px}
.leaflet-popup-content{margin:10px 12px;font-size:12.5px}
.leaflet-popup-content b{font-size:13px}
/* Dark-mode map – CodePen invert technique: standard OSM tiles, inverted only on the basemap layer + zoom controls (markers/routes unaffected) */
  html.is-dark #map .leaflet-layer,
  html.is-dark #map .leaflet-control-zoom-in,
  html.is-dark #map .leaflet-control-zoom-out{filter:invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)}
html.is-dark #map .leaflet-control-attribution{background:rgba(20,28,33,.75);color:var(--slate)}
.panel-card{background:var(--white);border:1px solid var(--border);border-radius:10px;margin-bottom:14px}
.panel-card h4{margin:0;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);display:flex;align-items:center;gap:8px}
.panel-card .pc-b{padding:12px 14px}
.legrow{display:flex;align-items:center;gap:9px;font-size:12.5px;margin:6px 0}
.legrow .mk{width:18px;height:18px;border-radius:50%;flex:none;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.route-row{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--border);cursor:pointer}
.route-row:last-child{border-bottom:none}
.route-row input{width:auto;margin:0}
.route-row .rl{width:20px;height:4px;border-radius:2px;flex:none}
.route-row .who{font-weight:600}
.route-row .meta{color:var(--slate);font-size:11px}
.route-head{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-bottom:6px}
.sec-t{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);font-weight:700;margin:18px 0 8px;display:flex;align-items:center;gap:8px}
.sec-t:first-child{margin-top:0}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--border)}
.kv .k{color:var(--slate)}
.tasklist{counter-reset:stp;list-style:none;margin:0;padding:0}
.tasklist li{position:relative;padding:8px 8px 8px 34px;border:1px solid var(--border);border-radius:9px;margin-bottom:7px;font-size:12.5px;background:var(--bg2)}
.tasklist li::before{counter-increment:stp;content:counter(stp);position:absolute;left:8px;top:8px;width:20px;height:20px;border-radius:50%;background:var(--assure);color:#fff;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center}
.tasklist li b{display:block}
.tasklist li .tmeta{color:var(--slate);font-size:11.5px}
.invtbl td,.invtbl th{padding:6px 8px;font-size:12px}
.avail-dot{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.avail-dot .d{width:9px;height:9px;border-radius:50%}
.a-online .d{background:var(--green)}
.a-busy .d{background:var(--amber)}
.a-off .d{background:var(--slate)}
.a-online{color:var(--green)}
.a-busy{color:var(--amber)}
.a-off{color:var(--slate)}
.ls-view{display:none}
.ls-view.on{display:block}
.seam{background:var(--amber-bg);border:1px dashed rgba(178,106,0,.5);border-radius:8px;padding:8px 11px;font-size:11.5px;color:var(--amber);margin-top:8px}
.modal-h .nm{font-size:16px;font-weight:700;color:#fff}
.modal-h .rl2{font-size:12px;color:#bcd2d9;margin-top:2px}
#cp-body .kv:first-child{padding-top:0}
body.demo-empty #staffRows{display:none}

/* ==========================================================================
   SOURCE: 21-my-work-wireframes.html  (169 unique statements)
   ========================================================================== */

body.demo-empty #mw-today>:not(.card-h):not(.wf-empty){display:none}
#mywork .mainc{max-width:none}
#mywork .mw-tiles{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}
#mywork .mw-tile{flex:1 1 150px;background:var(--white);border:1px solid var(--cardborder);border-radius:12px;padding:14px 16px}
#mywork .mw-tile .n{font-size:26px;font-weight:800;line-height:1;color:var(--ink)}
#mywork .mw-tile .l{font-size:12.5px;color:var(--slate);margin-top:4px}
#mywork .mw-tile.warn .n{color:#b3261e}
#mywork .mw-tile.soon .n{color:#7a4d00}
#mywork table{width:100%;border-collapse:collapse}
#mywork th{text-align:left;font-size:12px;color:var(--slate);font-weight:600;padding:9px 14px;border-bottom:1px solid var(--cardborder)}
#mywork td{padding:10px 14px;border-bottom:1px solid var(--cardborder);font-size:13.5px;vertical-align:middle}
#mywork tr:last-child td{border-bottom:none}
#mywork .bdg{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:700}
#mywork .b-urg{background:#fde7e7;color:#b3261e}
#mywork .b-rou{background:#eef1f3;color:var(--slate)}
#mywork .b-prog{background:#e6f0fb;color:#1c4f86}
#mywork .b-sch{background:#eef6f0;color:#1b7d4f}
#mywork .b-hold{background:#f3eaf8;color:#7a3ea3}
html.is-dark #mywork .b-urg{background:rgba(179,38,30,.26);color:#ef938c}
html.is-dark #mywork .b-rou{background:#283139;color:var(--slate)}
html.is-dark #mywork .b-prog{background:rgba(99,148,233,.20);color:#9dbdf5}
html.is-dark #mywork .b-sch{background:rgba(27,125,79,.28);color:#7dd39e}
html.is-dark #mywork .b-hold{background:rgba(151,113,224,.24);color:#c4abf7}
#mywork .due-over{color:#b3261e;font-weight:700}
#mywork .due-soon{color:#7a4d00;font-weight:700}
#mywork .daygrp{display:flex;align-items:center;gap:10px;margin:18px 0 2px;padding:0 2px}
#mywork .daygrp h4{margin:0;font-size:13.5px;color:var(--ink)}
#mywork .daygrp .ln{flex:1;height:1px;background:var(--cardborder)}
#mywork .daygrp .ct{font-size:12px;color:var(--slate)}
#mywork .mw-act{display:inline-flex;gap:6px}
#mywork a.rowlink{color:var(--assure);text-decoration:none;font-weight:600}
#mywork a.rowlink:hover{text-decoration:underline}
/* item 5.3: planned-for-today list */
  .mw-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mw-plan li{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--border)}
.mw-plan li:last-child{border-bottom:none}
.mw-time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);width:48px;flex:none}
.mw-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--slate)}
.mw-dot.t-install{background:#0089a3}
.mw-dot.t-change{background:#ea7c0c}
.mw-dot.t-decom{background:#4E5861}
.mw-dot.t-assess{background:#7c4dbb}
.mw-dot.t-welfare{background:#15803d}
.mw-pmain{flex:1;min-width:0}
.mw-pmain b{display:block;font-size:13.5px}
.mw-pmain small{color:var(--slate)}
/* item 5: calendar + map views for Planned for today */
  .mw-viewseg{flex:none}
/* Assigned-to-me calendar restyled to sit natively in the page like Planned for today – FullCalendar's own variables mapped to our theme tokens, so it follows light & dark automatically (items 3.1/3.2) */
  #mw-fc{min-height:460px;
    --fc-border-color:var(--border);
    --fc-page-bg-color:var(--white);
    --fc-neutral-bg-color:var(--bg2);
    --fc-today-bg-color:var(--assure-10);
    --fc-now-indicator-color:#e0533f;
    --fc-event-border-color:transparent;
    color:var(--ink)}
#mw-fc .fc-toolbar-title{font-size:15px;font-weight:700;color:var(--ink)}
#mw-fc .fc-col-header-cell-cushion,#mw-fc .fc-timegrid-axis-cushion,#mw-fc .fc-timegrid-slot-label-cushion,#mw-fc .fc-daygrid-day-number,#mw-fc .fc-list-day-text,#mw-fc .fc-list-day-side-text{color:var(--ink);text-decoration:none}
#mw-fc .fc-list-event-title,#mw-fc .fc-list-event-time,#mw-fc a{color:var(--ink)}
#mw-fc .fc-event{font-size:11.5px;font-weight:600;border-radius:6px;padding:1px 3px}
#mw-fc .fc-list-event:hover td{background:var(--hover)}
/* item: kill the global data-table hover tint leaking into the calendar grid */
  #mw-fc tbody tr:hover td{background:none;cursor:default}
#mw-fc .fc-button{font-size:12px;font-weight:600;text-transform:none;font-family:inherit;box-shadow:none}
#mw-fc .fc-button-primary{background:var(--white);border-color:var(--border);color:var(--ink);padding:5px 11px}
#mw-fc .fc-button-primary:hover{background:var(--hover);border-color:var(--border);color:var(--ink)}
#mw-fc .fc-button-primary:not(:disabled).fc-button-active{background:var(--assure-10);border-color:var(--assure);color:var(--assure)}
#mw-fc .fc-button-primary:focus,#mw-fc .fc-button-primary:focus-visible{box-shadow:0 0 0 2px var(--assure-15);outline:none}
#mw-fc .fc-button-primary:disabled{background:var(--white);border-color:var(--border);color:var(--slate);opacity:.55}
.mw-map{width:100%;height:420px;border-radius:10px;overflow:hidden;border:1px solid var(--cardborder);z-index:0}
.mw-map .leaflet-pane img,.mw-map .leaflet-tile{max-width:none!important}
/* Dark-mode map – CodePen invert technique: standard OSM tiles, inverted only on the basemap layer + zoom controls (markers/routes unaffected) */
  html.is-dark .mw-map .leaflet-layer,
  html.is-dark .mw-map .leaflet-control-zoom-in,
  html.is-dark .mw-map .leaflet-control-zoom-out{filter:invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)}
.mw-map .leaflet-control-attribution{font-size:8.5px;padding:0 4px;background:rgba(255,255,255,.7)}
.mw-maplegend{display:flex;gap:14px;flex-wrap:wrap;padding:10px 2px 0;font-size:11.5px;color:var(--slate)}
.mw-maplegend span{display:inline-flex;align-items:center;gap:6px}
.mw-lg{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
/* item 4.1.1: split list + map */
  .mw-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:16px;align-items:start}
.mw-split-map{position:relative;isolation:isolate;z-index:0}
/* Leaflet's internal z-indexes stay inside – the expand button no longer floats over the header */
  .mw-mapexp{position:absolute;top:8px;right:8px;z-index:5;width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--white);color:var(--slate);cursor:pointer;display:flex;align-items:center;justify-content:center}
.mw-mapexp:hover{color:var(--assure);border-color:var(--assure)}
#mwmapscrim{display:none;position:fixed;inset:0;background:rgba(0,25,35,.5);z-index:199}
.mw-maphd{display:none}
.mw-split-map.mw-map-full{position:fixed;inset:3vh 3vw;z-index:200;margin:0;background:var(--white);border-radius:14px;box-shadow:0 30px 90px rgba(0,25,35,.5);overflow:hidden;display:flex;flex-direction:column}
.mw-split-map.mw-map-full .mw-maphd{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--border);flex:none}
.mw-split-map.mw-map-full .mw-maphd h3{margin:0;font-size:14px}
.mw-split-map.mw-map-full .mw-mapexp{display:none}
.mw-split-map.mw-map-full #mw-map{flex:1;height:auto!important;min-height:0;border-radius:0}
@media(max-width:900px){.mw-split{grid-template-columns:1fr}}
.mw-split .mw-map{height:360px}
/* item 4.3: clickable planned item */
  .mw-pli{cursor:pointer}
.mw-pli:hover{background:var(--hover)}
/* item 4.2.1: Request-style SLA colour-coding on the Assigned table */
  #mywork tr.breached td{background:var(--red-bg)}
#mywork tr.breached:hover td{background:rgba(179,38,30,.16)}
#mywork tr.duesoon td{background:rgba(180,120,10,.10)}
#mywork tr.duesoon:hover td{background:rgba(180,120,10,.16)}
#mywork tr.onhold td{background:rgba(120,128,136,.10)}
#mywork tr.rowlink-row{cursor:pointer}
/* task detail modal */
  .mwt-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--border);font-size:13.5px}
.mwt-row .k{color:var(--slate);display:inline-flex;align-items:center;gap:7px}
.mwt-dot{width:10px;height:10px;border-radius:50%;flex:none}
/* inline task key + clickable task name */
  .tkey{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:11px;color:var(--slate)}
#mywork a.mw-tasklink{cursor:pointer}
/* Daily-Planning-style task boxes for Planned for today (item 3.3) */
  #mw-planlist{display:flex;flex-direction:column;gap:8px}
.mw-uns{display:flex;flex-direction:column;gap:2px;border:1px solid var(--cardborder);border-left:4px solid var(--slate);border-radius:10px;padding:9px 11px;background:var(--white);cursor:pointer}
.mw-uns:hover,.mw-uns.hl{background:var(--hover);border-color:var(--assure);box-shadow:0 0 0 2px var(--assure-15)}
.mw-uns .uns-h{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:1px}
.mw-uns b{font-size:13px}
.mw-uns small{font-size:11.5px;color:var(--slate);display:block;line-height:1.35}
.mw-chip{font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 9px}
.pooljob{flex:1 1 250px;min-width:0;border:1.5px solid var(--cardborder);border-left:4px solid var(--assure);border-radius:10px;padding:10px 12px;background:var(--white);display:flex;flex-direction:column;gap:5px}
.wait{font-size:11px;font-weight:700;color:var(--amber);background:rgba(180,120,10,.12);border-radius:999px;padding:1px 8px}
.rec-tag{display:inline-flex;align-items:center;color:var(--assure);background:var(--assure-10);border:1px solid rgba(0,118,137,.25);border-radius:4px;padding:1px 4px}
.btn-ok{background:#176b44;border-color:#176b44;color:#fff}
/* aligned columns across day-grouped tables (item 3.8) */
  #mywork table.mw-fixed{table-layout:fixed}
#mywork table.mw-fixed td,#mywork table.mw-fixed th{overflow:hidden;text-overflow:ellipsis}
/* ===== Planned for today – Daily-Planning "Responders' day" lane style ===== */
  .mw-lane{border:1.5px solid var(--cardborder);border-radius:12px;background:var(--white);box-shadow:0 1px 2px rgba(0,25,35,.06)}
.mw-lane .lane-h{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.mw-lane .lane-h b{font-size:14px}
.mw-lane .lane-stat{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--slate);white-space:nowrap}
.mw-lane .lane-stat.over{color:var(--red)}
.mw-lane .lane-body{padding:10px 14px;display:flex;flex-direction:column;gap:4px}
.mw-lane .job{display:flex;align-items:stretch;width:100%;border:1px solid var(--border);border-left:4px solid var(--assure);border-radius:9px;background:var(--bg2);cursor:pointer;font-family:inherit;color:var(--ink);overflow:hidden}
.mw-lane .job-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;color:inherit;padding:7px 10px}
.mw-lane .job-nav{flex:none;width:34px;display:flex;align-items:center;justify-content:center;color:var(--slate);text-decoration:none;border-left:1px solid var(--border)}
.mw-lane .job-nav:hover{color:var(--assure);background:var(--assure-10)}
.mw-lane .job:hover,.mw-lane .job.hl{border-color:var(--assure);box-shadow:0 0 0 2px var(--assure-15)}
.mw-lane .job.t-install{border-left-color:#0089a3}
.mw-lane .job.t-change{border-left-color:var(--amber)}
.mw-lane .job.t-decom{border-left-color:var(--slate)}
.mw-lane .job.t-assess{border-left-color:#7c4dbb}
.mw-lane .job.t-welfare{border-left-color:var(--green)}
.mw-lane .job.t-other{border-left-color:#2c56a8}
.mw-lane .job-t{font-weight:700;font-variant-numeric:tabular-nums;font-size:12.5px;flex:none;width:42px}
.mw-lane .job-b{flex:1;min-width:0}
.mw-lane .job-b b{font-size:13px;display:block}
.mw-lane .job-b small{font-size:11px;color:var(--slate);display:block;line-height:1.35}
/* near-route cards look like the Scheduling board's Unscheduled cards */
  #mw-nearbody{display:flex;flex-direction:column;gap:8px}
.uns{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;border:1px solid var(--cardborder);border-left:4px solid var(--assure);border-radius:10px;padding:9px 11px;background:var(--white);font-family:inherit;color:var(--ink)}
.uns.t-change{border-left-color:var(--amber,#b45309)}
.insert-slot{display:flex;align-items:center;justify-content:center;width:100%;height:20px;margin:1px 0;border:1px dashed var(--assure);background:var(--assure-10,rgba(0,118,137,.08));color:var(--assure);border-radius:7px;cursor:pointer;font-family:inherit;font-size:11px}
.insert-slot:hover{background:rgba(0,118,137,.15)}
.insert-slot.far{border-color:var(--border);color:var(--slate);background:var(--bg2);opacity:.65}
/* greyed = far off route, but still clickable */
  .mw-nearoff{font-size:11px;font-weight:800;color:#92400e;background:rgba(224,165,0,.13);border:1px solid rgba(224,165,0,.5);border-radius:999px;padding:2px 9px;white-space:nowrap}
.mw-trav{font-size:11px;color:var(--slate);padding:1px 0 1px 46px;display:flex;align-items:center;gap:6px}
.mw-trav.end{padding-left:46px;font-style:italic}
/* task-type pills + size badge + tags – consistent with Scheduling / Responders' day */
  .mw-lane .grp-chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 9px}
.pill.t-install{background:var(--assure-15);color:#00657a}
.pill.t-change{background:var(--amber-bg);color:var(--amber)}
.pill.t-decom{background:var(--safe);color:var(--slate)}
.pill.t-assess{background:rgba(124,77,187,.16);color:#5e3a96}
.pill.t-welfare{background:var(--green-bg);color:var(--green)}
.pill.t-other{background:rgba(59,111,212,.14);color:#2c56a8}
html.is-dark .pill.t-assess{color:#c4abf7}
html.is-dark .pill.t-install{color:#5cc6d8}
.mw-lane .lane-stats{font-size:10.5px;font-weight:600;color:var(--slate);white-space:nowrap}
.mw-lane .lane-stats .fi{font-size:10px;color:var(--pri-ink);margin:0 1px}
/* per-type tinted job-row backgrounds – match Scheduling Responders' day */
  .mw-lane .job.t-install{background-color:rgba(0,137,163,.10)}
.mw-lane .job.t-change{background-color:rgba(234,124,12,.11)}
.mw-lane .job.t-decom{background-color:rgba(78,88,97,.10)}
.mw-lane .job.t-assess{background-color:rgba(124,77,187,.11)}
.mw-lane .job.t-welfare{background-color:rgba(21,128,61,.11)}
.mw-lane .job.t-other{background-color:rgba(44,86,168,.10)}
html.is-dark .mw-lane .job.t-install{background-color:rgba(0,170,200,.17)}
html.is-dark .mw-lane .job.t-change{background-color:rgba(234,140,40,.18)}
html.is-dark .mw-lane .job.t-decom{background-color:rgba(150,160,170,.16)}
html.is-dark .mw-lane .job.t-assess{background-color:rgba(160,110,230,.20)}
html.is-dark .mw-lane .job.t-welfare{background-color:rgba(40,170,90,.18)}
html.is-dark .mw-lane .job.t-other{background-color:rgba(90,130,220,.18)}
/* ===== task detail side panel – mirrors the Service-User profile (file 03) ===== */
  #mwtask .idrow{display:flex;align-items:flex-start;gap:10px;margin:10px 0;font-size:13px}
#mwtask .idrow .k{flex:none;width:120px;color:var(--slate);font-size:12px;display:inline-flex;align-items:center;gap:7px}
#mwtask label{display:block;font-size:12px;color:var(--slate);margin:14px 0 4px}
.phonerow input{flex:1;padding:7px 10px;border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--white)}
/* completed-section date labels (item 1.8) – always visible */
  .mw-dlabel{font-size:12px;color:var(--slate)}
/* task-row action buttons (item 1.7) */
  #mywork td .mw-act{display:inline-flex;gap:3px;flex-wrap:nowrap}
/* task action icons – same style as the Requests page .qa icons (ghost: transparent until hover) */
  .tqa{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;background:none;color:var(--slate);border-radius:8px;cursor:pointer;font-size:12.5px;padding:0;font-family:inherit;text-decoration:none}
.tqa:hover{background:var(--hover);border-color:var(--border);color:var(--assure)}
.tqa.tqa-dan:hover{color:var(--red)}
#mywork table.mw-fixed td.actcol{overflow:visible;text-align:right}
/* dark-mode map: tiles come from a dark basemap (see mwTiles) */
  html.is-dark .mw-map .leaflet-control-attribution{background:rgba(20,28,33,.7);color:var(--slate)}

/* ==========================================================================
   SOURCE: 23-inventory-wireframes-v2.html  (197 unique statements)
   ========================================================================== */

/* tables fill the full width of their card (Ivan, 08 Jul) */
.twshade>table:not(.fc *){width:100%}
/* ===== Inventory v2 module styles (iv-) ===== */
.content>section{display:none}
.content>section:target,.content>section:has(:target){display:block}
.content:not(:has(:target))>#overview{display:block}
/* tables fill the full width of their container (Ivan, 08 Jul) */
.twshade>table:not(.nosxroll),.shp-b>table,.card-b>table{width:100%}
/* expandable catalogue rows (kits + versions) */
.xchev{background:none;border:none;cursor:pointer;color:var(--slate);padding:2px 7px;font-size:12px}
.xchev i{transition:transform .15s}
tr.xopen .xchev i{transform:rotate(90deg)}
tr.catchild>td{background:var(--hover)}
tr.catchild>td:first-child{padding-left:12px}
/* version / kit-content rows: indented to sit under the parent's icon, with their own icon */
.catchild-name{display:flex;align-items:flex-start;gap:8px;padding-left:32px}
.ver-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:var(--bg2);color:var(--slate);flex:none;font-size:11px;margin-top:1px}
.kit-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--assure-10);color:var(--assure);flex:none;position:relative}
.kit-ic::after{content:'';position:absolute;inset:-3px auto auto -3px;width:28px;height:28px;border:1.5px solid var(--assure);border-radius:8px;opacity:.45}
/* store type badges */
.sb{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.sb-pri{background:var(--pri);color:#fff}
.sb-van{background:var(--assure-15);color:var(--assure)}
.sb-qua{background:var(--amber-bg);color:var(--amber)}
.sb-scr{background:var(--red-bg);color:var(--red)}
.sb-mnt{background:rgba(124,58,237,.12);color:#6d28d9}
html[data-theme="dark"] .sb-mnt{color:#c4b5fd}
/* store network – scalable list: search + type filter + collapsible warehouse
   groups with compact rows (Ivan, 10 Jul 2026 – supports 100+ stores) */
.iv-netbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.iv-net{display:flex;flex-direction:column;gap:10px}
.iv-grp{border:1px solid var(--cardborder);border-radius:12px;background:var(--white);overflow:hidden}
.iv-grp-h{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;user-select:none;flex-wrap:wrap}
.iv-grp-h:hover{background:var(--hover)}
.iv-grp-h .chev{font-size:11px;color:var(--slate);transition:transform .15s;flex:none}
.iv-grp.open .iv-grp-h .chev{transform:rotate(90deg)}
.iv-grp-h .nm{font-weight:700;font-size:14.5px;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--ink);padding:0}
.iv-grp-h .nm:hover{color:var(--assure);text-decoration:underline}
.iv-grp-h .meta{color:var(--slate);font-size:12.5px;margin-left:auto}
.iv-grp-b{display:none;border-top:1px solid var(--border)}
.iv-grp.open .iv-grp-b{display:block}
.iv-srow{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 34px;border-bottom:1px solid var(--border);cursor:pointer;background:none;width:100%;text-align:left;font-family:inherit;font-size:12.5px;color:var(--ink);border-left:none;border-right:none;border-top:none}
.iv-srow:last-child{border-bottom:none}
.iv-srow:hover{background:var(--hover)}
.iv-srow .fi,.iv-srow .fa-solid{width:16px;text-align:center;color:var(--slate);flex:none}
.iv-srow .snm{font-weight:600;min-width:150px}
.iv-srow .seng{color:var(--slate)}
.iv-srow .sqty{margin-left:auto;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.iv-srow .sgo{color:var(--slate);opacity:0;font-size:11px}
.iv-srow:hover .sgo{opacity:1;color:var(--assure)}
.iv-prim{border:1px solid var(--cardborder);border-radius:12px;background:var(--white);overflow:hidden}
.iv-prim-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1.5px solid var(--cardborder);flex-wrap:wrap}
.iv-prim-h .nm{font-weight:700;font-size:15px}
.iv-prim-h .meta{color:var(--slate);font-size:12.5px;margin-left:auto}
.iv-kids{padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px}
.iv-kid{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:6px 12px;background:var(--white);cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--ink);transition:.12s}
.iv-kid:hover{background:var(--hover);border-color:var(--cardborder)}
.iv-kid .qty{color:var(--slate);font-size:11.5px}
.iv-kid .fi{font-size:12px;color:var(--slate)}
/* attention list */
.iv-att{list-style:none;margin:0;padding:0}
.iv-att li{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px}
.iv-att li:last-child{border-bottom:none}
.iv-att .fi{width:18px;text-align:center}
.iv-att .go{margin-left:auto;white-space:nowrap}
/* two-column layouts with basket rail */
.iv-cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.iv-rail{position:sticky;top:62px}
.iv-basket{max-height:340px;overflow:auto}
.iv-bitem{display:flex;align-items:center;gap:9px;padding:8px 14px;border-bottom:1px solid var(--border);font-size:12.5px}
.iv-bitem:last-child{border-bottom:none}
.iv-bitem .sn{color:var(--slate);font-size:11.5px}
.iv-bitem .rm{margin-left:auto;background:none;border:none;color:var(--red);cursor:pointer;font-size:13px;padding:4px}
.iv-bfoot{padding:12px 14px;border-top:1.5px solid var(--cardborder);display:flex;align-items:center;gap:10px}
.iv-bfoot .btn-pri{margin-left:auto}
.iv-bcount{font-weight:700}
/* scan-action toggle in the basket header – governs what a barcode scan does */
.iv-scanmode{display:inline-flex;gap:3px;padding:3px;background:var(--hover,#eef2f4);border:1px solid var(--border,#dfe3e6);border-radius:999px}
.iv-scanmode button{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-size:12px;font-weight:700;color:var(--slate);padding:5px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;line-height:1;transition:background .12s,color .12s,box-shadow .12s}
.iv-scanmode button:hover{color:var(--ink)}
.iv-scanmode button[aria-pressed="true"]{background:var(--white,#fff);box-shadow:0 1px 3px rgba(0,25,35,.28)}
.iv-scanmode button#gi-mode-add[aria-pressed="true"],.iv-scanmode button#tr-mode-add[aria-pressed="true"]{color:var(--assure,#007689)}
.iv-scanmode button#gi-mode-rem[aria-pressed="true"],.iv-scanmode button#tr-mode-rem[aria-pressed="true"]{color:var(--red,#b3261e)}
.iv-scanmode button:focus-visible{outline:2px solid var(--assure);outline-offset:1px}
/* scan hero */
.iv-scanhero{border:2px dashed var(--cardborder);border-radius:12px;padding:26px 20px;text-align:center;background:var(--bg2)}
.iv-scanhero .big{font-size:34px;color:var(--slate)}
.iv-scanhero h3{margin:8px 0 4px;font-size:16px}
.iv-scanhero p{margin:0 0 12px;color:var(--slate);font-size:12.5px}
/* product catalogue */
.iv-prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.iv-prod{border:1px solid var(--cardborder);border-radius:12px;background:var(--white);padding:13px 14px;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink);display:flex;flex-direction:column;gap:8px;transition:.12s;box-shadow:0 1px 2px rgba(0,25,35,.06)}
.iv-prod:hover{box-shadow:0 4px 14px rgba(0,25,35,.12);transform:translateY(-1px)}
.iv-prod .pic{width:40px;height:40px;border-radius:10px;background:var(--assure-10);color:var(--assure);display:flex;align-items:center;justify-content:center;font-size:17px}
.iv-prod .nm{font-weight:700;font-size:13.5px;line-height:1.25}
.iv-prod .mf{color:var(--slate);font-size:12px}
.iv-parts{display:flex;flex-wrap:wrap;gap:4px}
.iv-part{font-size:10.5px;border:1px solid var(--border);border-radius:6px;padding:1px 6px;color:var(--slate);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.iv-stockbar{height:6px;border-radius:4px;background:var(--bg2);overflow:hidden}
.iv-stockbar i{display:block;height:100%;border-radius:4px}
.iv-lvl{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--slate)}
/* pipeline */
.iv-pipe{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:6px 2px}
.iv-stage{flex:1;min-width:128px;border:1px solid var(--cardborder);border-radius:12px;background:var(--white);padding:12px;text-align:center;position:relative}
.iv-stage .ic{font-size:17px;color:var(--slate)}
.iv-stage .nm{font-weight:700;font-size:12.5px;margin-top:5px}
.iv-stage .ct{font-size:20px;font-weight:700;margin-top:2px}
.iv-stage .d{font-size:11px;color:var(--slate);margin-top:2px}
.iv-arrow{align-self:center;padding:0 7px;color:var(--slate);font-size:15px;flex:none}
.iv-stage.split{border-style:dashed}
/* quarantine work cards */
.iv-qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.iv-qcard{border:1px solid var(--cardborder);border-radius:12px;background:var(--white);padding:13px 15px}
.iv-qcard .top{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap}
.iv-qcard .nm{font-weight:700;font-size:13.5px}
.iv-qcard .sn{color:var(--slate);font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.iv-tasks{margin:10px 0 12px;display:flex;flex-direction:column;gap:7px}
.iv-tasks label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);margin:0;cursor:pointer}
.iv-qfoot{display:flex;gap:8px;align-items:center}
/* stepper (stock take) */
.iv-steps{display:flex;gap:0;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.iv-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--slate);font-weight:600}
.iv-step .n{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;background:var(--white)}
.iv-step.on{color:var(--ink)}
.iv-step.on .n{border-color:var(--pri);background:var(--pri);color:#fff}
.iv-step.done .n{border-color:var(--green);background:var(--green-bg);color:var(--green)}
.iv-sbar{flex:none;width:38px;height:2px;background:var(--border);margin:0 10px}
/* stock take report tiles */
.iv-rep{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.iv-rtile{border:1px solid var(--cardborder);border-radius:12px;background:var(--white);padding:14px 16px}
.iv-rtile .v{font-size:24px;font-weight:700}
.iv-rtile .l{font-size:12px;color:var(--slate);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.iv-rtile.ok .v{color:var(--green)}
.iv-rtile.miss .v{color:var(--red)}
.iv-rtile.over .v{color:var(--amber)}
/* value tiles (scrap) */
.iv-vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
/* misc */
.iv-formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.iv-in,select.iv-in,textarea.iv-in{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;background:var(--white);color:var(--ink);box-sizing:border-box}
/* form field labels – match the New Request form (bold, slate, 12px) */
.iv-formgrid label,.modal-b label,.tk-rephead label,.iv-block>div>label{font-size:12px;color:var(--slate);font-weight:700;display:block;margin:0 0 4px}
/* section-header count badges – styled like the menu open-requests count */
.card-h .badge{margin:0;font-size:10px;background:var(--assure-15);color:#00657a;border-radius:999px;padding:1px 7px;font-weight:700;display:inline-flex;align-items:center;line-height:1.6}
/* full-width tables with evenly-justified columns */
table.tbl-even{table-layout:fixed}
table.tbl-even td{word-break:break-word}
.iv-block{padding:14px 16px}
.iv-note{font-size:12.5px;color:var(--slate)}
.iv-rulewarn{display:none;background:var(--amber-bg);color:var(--amber);border-radius:9px;padding:9px 12px;font-size:12.5px;margin-top:10px}
.iv-rulewarn.show{display:block}
.iv-sugg{position:relative}
.shp-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--border)}
.card.go-form{overflow:visible}
/* the Add-items suggestion dropdown must not be clipped by the card (Ivan, 10 Jul 2026) */
.iv-sugg .drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--white);border:1px solid var(--cardborder);border-radius:10px;box-shadow:0 12px 30px rgba(0,25,35,.18);z-index:30;display:none;max-height:230px;overflow:auto}
.iv-sugg .drop.open{display:block}
.iv-sugg .it{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;font-size:12.5px;cursor:pointer}
.iv-sugg .it:hover{background:var(--hover)}
.iv-sugg .it .sn{color:var(--slate);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.iv-empty{padding:22px;text-align:center;color:var(--slate);font-size:13px}
/* store detail tabs (CSS-only radios) */
.iv-tabs{display:flex;gap:6px;border-bottom:1.5px solid var(--cardborder);padding:0 16px;flex-wrap:wrap}
.iv-tab{padding:9px 13px;font-size:13px;font-weight:600;color:var(--slate);cursor:pointer;border-bottom:3px solid transparent;margin:0}
#st-t1:checked~.card .iv-tab[for="st-t1"],#st-t2:checked~.card .iv-tab[for="st-t2"],#st-t3:checked~.card .iv-tab[for="st-t3"]{color:var(--pri-ink);border-bottom-color:var(--pri)}
.iv-tabpanel{display:none}
#st-t1:checked~.card #st-p1,#st-t2:checked~.card #st-p2,#st-t3:checked~.card #st-p3{display:block}
/* scan modal */
.iv-cam{border:2px dashed var(--cardborder);border-radius:12px;background:var(--bg2);height:120px;display:flex;align-items:center;justify-content:center;color:var(--slate);font-size:30px;margin-bottom:12px;position:relative;overflow:hidden}
.iv-cam .line{position:absolute;left:8%;right:8%;height:2px;background:var(--red);opacity:.65;animation:ivscan 1.8s ease-in-out infinite}
@keyframes ivscan{0%,100%{top:18%}50%{top:78%}}
@media (prefers-reduced-motion:reduce){.iv-cam .line{animation:none;top:48%}}
.iv-map{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:10px}
.iv-map table{font-size:12.5px}
.iv-raw{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--bg2);border-radius:8px;padding:8px 10px;word-break:break-all}
/* wider basket column on Goods In */
.iv-cols.gi{grid-template-columns:minmax(0,1fr) 430px}
.iv-basket.tall{max-height:560px}
.iv-bitem .sn{display:block}
/* incoming / outgoing shipment groups (expandable) */
.shp{border:1px solid var(--cardborder);border-left:4px solid var(--border);border-radius:12px;margin:0 16px 12px;overflow:hidden;background:var(--white)}
.shp-h{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;flex-wrap:wrap}
.shp-h:hover{background:var(--hover)}
.shp-h .ref{}
.shp-h .chev{transition:transform .15s;color:var(--slate);flex:none}
.shp.open .chev{transform:rotate(90deg)}
.shp-h .id{font-weight:700;font-size:13.5px}
.shp-h .meta{color:var(--slate);font-size:12.5px}
.shp-b{display:none;border-top:1px solid var(--border)}
.shp.open .shp-b{display:block}
.shp.ext{border-left:4px solid var(--assure)}
.shp-ext-badge{background:var(--assure);color:#fff;border-radius:999px;padding:2px 10px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}
.shp-int-badge{background:var(--bg2);color:var(--slate);border-radius:999px;padding:2px 10px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
/* goods-out layout: form -> basket -> outgoing on narrow screens */
.iv-cols.go{grid-template-areas:"form rail" "out rail"}
.iv-cols.go .go-form{grid-area:form}
.iv-cols.go .go-out{grid-area:out}
.iv-cols.go .go-rail{grid-area:rail}
@media (max-width:1100px){.iv-cols.go{grid-template-areas:"form" "rail" "out";grid-template-columns:1fr}}
/* visually disabled buttons */
.content .btn[disabled],.content .btn:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.6)}
/* returned-from-manufacturer basket line */
.iv-bitem.ret{background:var(--green-bg);border-radius:8px}
/* RMA item states */
.rma-back td{background:var(--green-bg)}
/* stock-take live list states */
#tk-list tr.dim td{color:var(--slate);opacity:.6}
#tk-list tr.okrow{background:var(--green-bg)}
#tk-list tr.okrow td:first-child i{color:var(--green)}
#tk-list tr.badrow{background:var(--amber-bg)}
#tk-repbody tr.missrow{background:var(--red-bg)}
#tk-repbody tr.overrow{background:var(--amber-bg)}
.tk-rephead{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.tk-rephead label{margin:0 0 2px}
.tk-rephead .v{font-size:15px;font-weight:700}
/* quarantine progress steps */
.qu-steps{display:inline-flex;gap:6px;align-items:center}
.qu-step{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;border:1.5px solid var(--border);color:var(--slate);background:var(--white)}
.qu-step.done{border-color:var(--green);background:var(--green-bg);color:var(--green)}
@media (max-width:1100px){.iv-cols{grid-template-columns:1fr}.iv-rail{position:static}}
@media (max-width:900px){.iv-net{grid-template-columns:1fr}.iv-rep{grid-template-columns:1fr}}
#rma-printnote{display:none}
@media print{
  body>*{display:none!important}
  #rma-printnote{display:block!important;font-family:Roboto,Arial,sans-serif;color:#111;padding:10mm}
  #rma-printnote .pn-head{display:flex;justify-content:space-between;border-bottom:2px solid #111;padding-bottom:6px;margin-bottom:12px;font-size:13px}
  #rma-printnote h1{font-size:22px;margin:0 0 10px}
  #rma-printnote p{font-size:12px;margin:6px 0}
  #rma-printnote table{width:100%;border-collapse:collapse;margin:10px 0}
  #rma-printnote th,#rma-printnote td{border:1px solid #333;padding:5px 8px;font-size:11px;text-align:left}
  #rma-printnote .pn-sign{margin-top:26px;font-size:12px}
}
.rb-pager{display:flex;gap:6px;align-items:center;padding:10px 2px 0}
.inst-row{cursor:pointer}
.inst-row:hover td{background:var(--hover)}
.inst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 14px;margin-bottom:10px}
.inst-grid label{display:block;font-size:11px;color:var(--slate);font-weight:700;margin-bottom:2px}
.inst-acts{width:100%;background:var(--white);border:1px solid var(--border);border-radius:8px}
.inst-acts th,.inst-acts td{font-size:12px;padding:6px 10px}

/* ==========================================================================
   SOURCE: 24-reports-wireframes.html  (265 unique statements)
   ========================================================================== */

/* active page = Home (this module) */
  .side a[href="#reports"]{background:rgba(0,118,137,.12);color:var(--ink);font-weight:600;position:relative}
.side a[href="#reports"]::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 999px 999px 0;background:var(--assure)}
.side a[href="#reports"] .fi{color:var(--assure)}
/* item 1 (Ivan, 14 Jul 2026): the Reports Columns buttons are icon-only, matching every other
     table in the platform. Square, no label; the styled tooltip carries the name. */
  .refreshbtn.rp-iconbtn{gap:0;padding:0;width:34px;height:34px;justify-content:center;flex:none}
/* ===== Reports module (24) ===== */
  .rsec{display:none}
.rsec:target,.rsec:has(:target){display:block}
.mainc:not(:has(:target)) #catalogue{display:block}
/* catalogue */
  .rp-group{margin:0 0 18px}
.rp-group>h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#8a949b;margin:0 0 10px;font-weight:700}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.rp-card{background:var(--white);border:1.5px solid var(--cardborder);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.rp-card .rp-top{display:flex;align-items:center;gap:10px}
.rp-card .rp-ic{width:34px;height:34px;border-radius:9px;background:var(--assure-10);color:var(--assure);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.rp-card h3{margin:0;font-size:14.5px;color:var(--ink);flex:1}
.rp-card p{margin:0;font-size:12.5px;line-height:1.5;color:var(--slate)}
.rp-card .rp-old{font-size:11px;color:#8a949b;line-height:1.45}
.rp-card .rp-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.rp-card
  /* viewer */
  .rp-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:6px 0 14px;padding-top:4px}
/* the gap under the title matches .greetbar on every other module page (14px);
   the toolbar carries the same value as a collapse-safe backup */
.rsec .rp-toolbar{margin-top:14px}
.rp-head h1{font-size:22px;font-weight:700;margin:0;letter-spacing:-.01em}
.rp-head .rp-sub{margin:3px 0 0;font-size:12.5px;color:var(--slate)}
.rp-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.rp-expmenu{position:absolute;z-index:140;min-width:170px;background:var(--white);border:1px solid var(--cardborder);border-radius:10px;box-shadow:0 18px 40px rgba(0,25,35,.22);padding:6px;display:flex;flex-direction:column;gap:2px}
.rp-expmenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;border-radius:7px;padding:8px 10px;font-size:13px;font-family:inherit;color:var(--ink);cursor:pointer}
.rp-expmenu button:hover{background:var(--hover)}
.rp-toolbar{background:var(--white);border:1.5px solid var(--cardborder);border-radius:12px;padding:12px 14px;display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.rp-f{display:flex;flex-direction:column;gap:4px;min-width:120px}
.rp-f>label{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#8a949b;font-weight:700}
.rp-f select,.rp-f input{border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:12.5px;font-family:inherit;background:var(--white);color:var(--ink);min-height:33px}
.rp-f input[type=date]{min-width:130px}
.rp-f.rp-search{flex:1;min-width:170px}
.rp-asof{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);padding-bottom:7px}
.rp-asof input[type=date]{border:1px solid var(--border);border-radius:8px;padding:5px 8px;font-size:12.5px;font-family:inherit;background:var(--white);color:var(--ink)}
.rp-scopechip{display:inline-flex;align-items:center;gap:6px;background:var(--assure-10);color:var(--assure);border-radius:999px;padding:3px 11px;font-size:11.5px;font-weight:600}
.rp-asofband{display:none;background:#fdeccd;border:1px solid #f0d49a;color:#5b3d00;border-radius:10px;padding:8px 13px;margin:0 0 12px;font-size:12.5px}
.rp-asofband.on{display:block}
/* referral funnel tiles = the standard KPI cards, clickable (10 Jul 2026) */
  .rp-tilebtn{cursor:pointer;font-family:inherit;text-align:left;appearance:none}
.rp-tilebtn:hover{border-color:var(--assure)}
.rp-tilebtn.on{border-color:var(--assure);box-shadow:inset 0 0 0 1.5px var(--assure),0 1px 2px rgba(0,25,35,.06)}
.rp-tablecard{background:var(--white);border:1.5px solid var(--cardborder);border-radius:12px;overflow:hidden}
.rp-tablecard table{width:100%;border-collapse:collapse;font-size:12.5px}
.rp-tablecard th{text-align:left;padding:var(--pad-row,9px 12px);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#8a949b;border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none}
.rp-tablecard th .sa{font-size:9px;margin-left:3px;opacity:.7}
.rp-tablecard td{padding:var(--pad-row,8px 12px);border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink)}
.rp-tablecard tr:last-child td{border-bottom:none}
.rp-tablecard tbody tr:hover{background:var(--hover)}
.rp-foot{display:flex;align-items:center;gap:14px;padding:9px 14px;border-top:1px solid var(--border);font-size:12px;color:var(--slate);flex-wrap:wrap}
.rp-foot b{color:var(--ink)}
/* report tables scroll horizontally on narrow screens, like every other page */
  .rp-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rp-tscroll>table{min-width:680px}
/* sortable-column indicator */
  .rp-tablecard th.rp-th{cursor:pointer}
.rp-tablecard th .rp-sortic{margin-left:6px;font-size:10px;opacity:.4;display:inline-block}
.rp-tablecard th.rp-th:hover .rp-sortic{opacity:.85;color:var(--assure)}
.rp-tablecard th.rp-th-on{color:var(--assure)}
.rp-tablecard th.rp-th-on .rp-sortic{opacity:1;color:var(--assure)}
.rp-tablecard th.rp-th:focus-visible{outline:2px solid var(--assure);outline-offset:-2px}
/* monospace request key, matching the other pages */
  .rp-tablecard .rid{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:400;color:var(--slate);white-space:nowrap}
/* feature-rich pager */
  .rp-pager{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.rp-pgpp,.rp-pgjump,.rp-pgtot{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--slate)}
.rp-pgpp select,.rp-pgjump input{font:inherit;font-size:12px;border:1px solid var(--border);border-radius:7px;padding:3px 6px;background:var(--white);color:var(--ink)}
.rp-pgjump input{width:58px}
.rp-pgnav{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
.rp-pgb{border:1px solid var(--border);background:var(--white);border-radius:8px;min-width:30px;height:30px;padding:0 8px;font-size:12px;cursor:pointer;color:var(--ink);font-family:inherit;display:inline-flex;align-items:center;justify-content:center}
.rp-pgb:hover:not(:disabled){border-color:var(--assure);color:var(--assure)}
.rp-pgb:disabled{opacity:.4;cursor:default}
.rp-pgb.on{background:var(--assure-10);border-color:var(--assure);color:var(--assure);font-weight:700}
.rp-pgell{padding:0 1px;color:var(--slate)}
.rp-pgtot b{color:var(--ink)}
@media (max-width:820px){.rp-pgtot{width:100%;order:6;margin-top:2px}}
.rp-empty{padding:26px;text-align:center;color:var(--slate);font-size:13px}
.rag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}
.rag-r{background:#f6d5d3;color:#8f1d16}
.rag-a{background:#fdeccd;color:#5b3d00}
.rag-g{background:#d3e8dc;color:#155236}
html[data-theme="dark"] .rag-r{background:#5a2320;color:#f5b8b3}
html[data-theme="dark"] .rag-a{background:#54401a;color:#f4d79a}
html[data-theme="dark"] .rag-g{background:#1d4030;color:#a4dbbc}
.rp-batbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--white);color:var(--pri-ink);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.rp-batbtn:hover{border-color:var(--pri-ink);background:var(--hover)}
.rp-subq{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;width:100%}
.rp-subq .sq{display:inline-flex;gap:6px;align-items:center;border:1px dashed var(--border);border-radius:999px;padding:4px 6px 4px 12px;font-size:12px;background:var(--bg2,var(--safe))}
.rp-subq .sq select{border:none;background:transparent;font-size:12px;font-family:inherit;color:var(--assure);font-weight:600}
.rp-reorder{margin-top:14px}
.rp-note{font-size:11.5px;color:#8a949b;margin:8px 2px}
.rp-schtbl .off{opacity:.55}
.togl{position:relative;display:inline-block;width:30px;height:17px;background:#b9c2c6;border-radius:999px;cursor:pointer;border:none;padding:0}
.togl::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left .15s}
.togl.on{background:var(--assure)}
.togl.on::after{left:15px}
@media (max-width:900px){.rp-actions{margin-left:0}}
/* ===== Reports: Data / Charts tabs, KPI cards, chart grid, copy-image ===== */
.rp-tabs{display:inline-flex;gap:4px;background:var(--white);border:1.5px solid var(--cardborder);border-radius:11px;padding:4px;margin:2px 0 12px}
.rp-tab{appearance:none;border:none;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--slate);padding:7px 16px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .12s,color .12s}
.rp-tab .fi{font-size:12px}
.rp-tab.on{background:var(--assure);color:#fff}
.rp-tab:not(.on):hover{background:var(--assure-10);color:var(--assure)}
.rp-tab:focus-visible{outline:2px solid var(--assure);outline-offset:2px}
.rp-tabpanel[hidden]{display:none}
/* KPI cards */
.rp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.rp-kpi{position:relative;background:var(--white);border:1px solid var(--cardborder);border-radius:12px;padding:15px 16px 14px;box-shadow:0 1px 2px rgba(0,25,35,.06);display:flex;flex-direction:column;gap:9px;overflow:hidden}
.rp-kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--slate);opacity:.5}
.rp-kpi.brand::before{background:var(--assure);opacity:1}
.rp-kpi.good::before{background:#1b7d4f;opacity:1}
.rp-kpi.warn::before{background:#b06a00;opacity:1}
.rp-kpi.bad::before{background:#b3261e;opacity:1}
.rp-kpi-l{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;color:var(--slate);line-height:1.25}
.rp-kpi-v{font-size:32px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rp-kpi-s{font-size:11.5px;color:var(--slate)}
/* chart grid + cards */
.rp-chartgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
/* the lead chart of every report is the time series – give it the full row */
.rp-chartgrid .rp-chart:first-child{grid-column:1/-1}
.rp-chartgrid .rp-chart:first-child .rp-chart-canvaswrap{height:280px}
.rp-chart{margin:0;background:var(--white);border:1.5px solid var(--cardborder);border-radius:12px;padding:12px 14px 14px;display:flex;flex-direction:column;min-width:0}
.rp-chart-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rp-chart-h span{font-size:13.5px;font-weight:800;color:var(--ink)}
.rp-copybtn{margin-left:auto;flex:none;appearance:none;border:1px solid var(--border);background:var(--white);color:var(--slate);border-radius:8px;font:inherit;font-size:11.5px;font-weight:600;padding:5px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:border-color .12s,color .12s,background .12s}
.rp-copybtn:hover{border-color:var(--assure);color:var(--assure)}
.rp-copybtn.done{border-color:#1b7d4f;color:#1b7d4f;background:rgba(27,125,79,.08)}
/* item 1 (Ivan, 13 Jul 2026): whole-dashboard copy – one image of every card + chart */
.rp-dashbar{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.rp-dash-t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);display:inline-flex;align-items:center;gap:7px}
.rp-dash-t .fi{color:var(--assure)}
.rp-copybtn.rp-copyall{margin-left:auto;padding:6px 12px;font-size:12px;border-color:var(--assure);color:var(--assure);background:var(--assure-10)}
.rp-copybtn.rp-copyall:hover{background:var(--assure);color:#fff;border-color:var(--assure)}
.rp-copybtn.rp-copyall.done{border-color:#1b7d4f;color:#1b7d4f;background:rgba(27,125,79,.10)}
.rp-copybtn.rp-copyall[disabled]{opacity:.6;cursor:progress}
.rp-chart-canvaswrap{position:relative;height:268px}
.rp-chart-canvaswrap canvas{max-width:100%}
.rp-chart-note{margin:8px 0 0;font-size:11.5px;color:var(--slate)}
@media (max-width:520px){.rp-chart-canvaswrap{height:220px}.rp-chartgrid{grid-template-columns:1fr}}
/* ===== Run-gated reports: run button, loading card, pre-run placeholder (10 Jul 2026) ===== */
.rp-runwrap{margin-left:auto}
.rp-runbtn{white-space:nowrap}
.rp-runbtn:disabled{opacity:.45;cursor:default;pointer-events:none}
.rp-btnspin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;display:inline-block;animation:rpspin .7s linear infinite;vertical-align:-2px;margin-right:2px}
.rp-loading{display:none;align-items:center;gap:14px;justify-content:center;padding:46px 20px;background:var(--white);border:1.5px dashed var(--cardborder);border-radius:12px;margin-bottom:14px;color:var(--slate)}
.rp-prerun{display:none;flex-direction:column;align-items:center;gap:18px;justify-content:center;padding:38px 20px 34px;background:var(--white);border:1.5px dashed var(--cardborder);border-radius:12px;margin-bottom:14px;color:var(--slate)}
.rp-prerun-txt{text-align:center}
.rp-loading b,.rp-prerun b{display:block;font-size:14px;color:var(--ink)}
.rp-loading small,.rp-prerun small{font-size:12px}
.rp-loading.on{display:flex;border-style:solid}
.rsec.rp-notrun .rp-prerun{display:flex}
.rsec.rp-notrun .rp-tabs,.rsec.rp-notrun .rp-tabpanel{display:none!important}
.rsec.rp-loading-on .rp-prerun{display:none}
.rsec.rp-loading-on .rp-tabs,.rsec.rp-loading-on .rp-tabpanel{display:none!important}
.rp-spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--hover,#eef2f4);border-top-color:var(--assure,#007689);animation:rpspin .7s linear infinite;flex:none}
@keyframes rpspin{to{transform:rotate(360deg)}}
/* Columns / Export live in the table card header (10 Jul 2026) */
.rp-tcard-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--border)}
.rp-tcard-t{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;color:var(--slate)}
.rp-tcard-tools{display:flex;gap:8px}
/* catalogue cards are the links now (Run buttons removed, 10 Jul 2026) */
.rp-card{cursor:pointer}
.rp-card:hover{border-color:var(--assure)}
.rp-card:focus-visible{outline:2px solid var(--assure);outline-offset:2px}
/* sticky table headers: the pinned row keeps the card's rounded top border,
   with a page-background gap above it matching the side spacing (22px) */
.rp-tscroll table{border-collapse:separate;border-spacing:0}
/* sticky header v2 (Ivan, 10 Jul 2026): the pinned header is a CLONE rendered
   inside a fixed frame – the real thead never transforms, so no table or card
   border can ever paint across it. The frame carries the card top: white
   background, 1.5px border, rounded corners, shadow. */
#rp-stickyband{position:fixed;display:none;background:var(--bg);z-index:39;pointer-events:none}
#rp-stickyhdr{position:fixed;display:none;background:var(--white);border:1.5px solid var(--cardborder);border-bottom:1px solid var(--border);border-radius:12px 12px 0 0;box-shadow:0 6px 12px -8px rgba(0,25,35,.45);z-index:38;overflow:hidden}
#rp-stickyhdr .rp-sthclip{overflow:hidden;width:100%;height:100%}
#rp-stickyhdr table{border-collapse:separate;border-spacing:0;table-layout:fixed;margin:0}
#rp-stickyhdr th{text-align:left;padding:9px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#8a949b;white-space:nowrap;cursor:pointer;user-select:none;background:var(--white);border:0}
#rp-stickyhdr th .rp-sortic{margin-left:6px;font-size:10px;opacity:.4;display:inline-block}
#rp-stickyhdr th:hover .rp-sortic{opacity:.85;color:var(--assure)}
/* prerun animation: a living SPREADSHEET filling itself in row by row - playful,
   corporate, sized to fill the dashed placeholder (Ivan, 10 Jul 2026). The first
   view after Run is a data table, so the animation previews exactly that. */
.rp-anim{position:relative;display:flex;flex-direction:column;gap:7px;width:min(440px,86%);padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--white);box-shadow:0 1px 2px rgba(0,25,35,.06);overflow:hidden}
.rp-sh-row{display:flex;gap:8px;align-items:center}
.rp-sh-row .c{height:11px;border-radius:4px;background:var(--hover,#eef2f4);position:relative;overflow:hidden}
.rp-sh-row .c::after{content:'';position:absolute;inset:0;border-radius:4px;background:rgba(0,118,137,.5);transform:scaleX(0);transform-origin:left;animation:rpcell 4.2s ease-in-out infinite}
.rp-sh-row .c1{flex:0 0 22%}
.rp-sh-row .c2{flex:1}
.rp-sh-row .c3{flex:0 0 15%}
.rp-sh-row .c4{flex:0 0 12%}
.rp-sh-row .c5{flex:0 0 17%}
.rp-sh-row.rh .c{height:13px;background:rgba(51,74,84,.14)}
.rp-sh-row.rh .c::after{background:var(--pri,#334a54);animation-delay:0s}
.rp-sh-row.rh{padding-bottom:7px;border-bottom:2px solid var(--border)}
.rp-sh-row.r1 .c::after{animation-delay:.35s}
.rp-sh-row.r2 .c::after{animation-delay:.7s}
.rp-sh-row.r3 .c::after{animation-delay:1.05s}
.rp-sh-row.r4 .c::after{animation-delay:1.4s}
.rp-sh-row.r5 .c::after{animation-delay:1.75s}
.rp-sh-row .c2::after{animation-name:rpcell2}
.rp-sh-row .c4::after{background:rgba(27,125,79,.55)}
.rp-sh-row.rh .c4::after{background:var(--pri,#334a54)}
.rp-sh-row .c5::after{background:rgba(58,166,184,.55)}
.rp-sh-row.rh .c5::after{background:var(--pri,#334a54)}
@keyframes rpcell{0%{transform:scaleX(0)}18%,72%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
@keyframes rpcell2{0%{transform:scaleX(0)}18%,72%{transform:scaleX(.72)}92%,100%{transform:scaleX(0)}}
.rp-anim-sheen{position:absolute;top:0;bottom:0;left:-30%;width:70px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:rpsheen 4.2s ease-in-out infinite;pointer-events:none}
@keyframes rpsheen{0%{left:-30%}60%,100%{left:110%}}
@media (prefers-reduced-motion:reduce){.rp-sh-row .c::after{animation:none;transform:scaleX(.8)}.rp-anim-sheen{animation:none}}
/* row drill-down panel */
.rp-row{cursor:pointer}
.rp-row:hover td{background:var(--hover)}
#rp-drill{position:fixed;top:48px;right:0;bottom:0;width:min(400px,94vw);background:var(--white);border-left:1px solid var(--border);box-shadow:-18px 0 44px rgba(0,25,35,.18);z-index:80;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .18s ease}
#rp-drill.open{transform:none}
#rp-drill .rpd-agtbl{width:100%;border-collapse:collapse;font-size:12.5px;margin:4px 0 2px}
#rp-drill .rpd-agtbl th{text-align:left;font-weight:700;color:var(--slate);border-bottom:1px solid var(--border);padding:5px 6px}
#rp-drill .rpd-agtbl td{border-bottom:1px solid var(--border);padding:5px 6px}
#rp-drill .rpd-ags{margin-bottom:6px}
#rp-drill .rpd-tl-order{font-size:11px;font-weight:600;color:var(--assure);margin-left:6px;white-space:nowrap}
#rp-drill .rpd-evlink{display:block;color:var(--ink);text-decoration:none;border-radius:6px;padding:2px 4px;margin:-2px -4px}
#rp-drill .rpd-evlink:hover{background:var(--assure-10)}
#rp-drill .rpd-evlink .fi{color:var(--assure);font-size:11px}
/* request-report response-timeline hover popover (item 1.3, 15 Jul 2026) */
.rp-tlhost{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:help}
.rp-tl-hint{font-size:11px;color:var(--slate)}
.rp-tlpop{position:absolute;bottom:calc(100% + 8px);left:0;z-index:90;display:none;width:min(560px,80vw);background:var(--white);border:1px solid var(--cardborder);border-radius:12px;box-shadow:0 18px 40px rgba(0,25,35,.28);padding:12px 14px 6px;font-size:12px;white-space:normal}
.timeline li{flex:1;min-width:96px;position:relative;padding:0 6px 8px 0}
.timeline li.miss .tl-dot{background:var(--red);border-color:var(--red)}
.rp-tlhost:hover .rp-tlpop,.rp-tlhost:focus .rp-tlpop,.rp-tlhost:focus-within .rp-tlpop{display:block}
.rp-tlpop-h{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin-bottom:6px}
.rp-tlrow{display:flex;justify-content:space-between;gap:16px;padding:2px 0}
.rp-tlrow .rp-tll{color:var(--slate)}
.rp-tlrow .rp-tlv small{color:var(--slate)}
/* stock report – nested store multi-select (item 4, 15 Jul 2026) */
.rp-storef{position:relative}
.rp-storebtn{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--border);border-radius:8px;padding:6px 11px;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;min-width:170px;justify-content:space-between}
.rp-storebtn:hover{border-color:var(--assure)}
.rp-storebtn .fi{color:var(--slate);font-size:11px}
/* compact density pass (Ivan, 16 Jul 2026): tight rows, no wasted blank space - more
   of the tree is visible without scrolling. Shared by the Stores and Postcode-area popups. */
.rp-storepop{position:absolute;top:calc(100% + 5px);left:0;z-index:95;display:none;width:400px;max-width:92vw;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 44px rgba(0,25,35,.22);padding:8px}
.rp-storepop.open{display:block}
#dg-areapop{width:320px}
/* district names are short - no need for the full store width */
.rp-storesearch{position:relative;margin-bottom:5px}
.rp-storesearch i{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--slate);font-size:11px}
.rp-storesearch input{width:100%;padding:5px 8px 5px 26px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:12px;background:rgb(247,250,251)}
.rp-storesearch input:focus{background:var(--white);border-color:var(--assure);outline:none}
.rp-storelist{max-height:min(62vh,500px);overflow-y:auto;margin:0 -4px;padding:0 4px}
.rp-storerow{display:flex;align-items:center;gap:2px;border-radius:6px}
.rp-storerow:hover{background:var(--assure-10)}
.rp-storerow label{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;flex:1;min-width:0;padding:2px 5px;line-height:1.5}
.rp-storerow input[type=checkbox]{flex:none;width:14px;height:14px;accent-color:var(--assure);margin:0}
.rp-storep{font-weight:600;margin-top:1px}
.rp-storec .rp-storecname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* secondary stores sit clearly under their primary (Ivan, 16 Jul 2026) */
.rp-storec{margin-left:32px}
.rp-storecar{border:none;background:none;color:var(--slate);cursor:pointer;width:18px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none;border-radius:5px}
.rp-storecar:hover{background:rgba(0,25,35,.08);color:var(--assure)}
.rp-storecar .fi{transition:transform .15s;font-size:10px}
.rp-storecar.on .fi{transform:rotate(90deg)}
.rp-storecar-sp{width:18px;display:inline-block;flex:none}
/* compact P / S indicators instead of the wordy "primary" / "secondary" tags (Ivan, 16 Jul 2026) */
.rp-storeprimtag,.rp-storesectag{width:14px;height:14px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;flex:none;cursor:help}
.rp-storeprimtag{color:#00657a;background:var(--assure-15);border:1px solid rgba(0,118,137,.35)}
.rp-storesectag{color:var(--slate);background:var(--hover);border:1px solid var(--border)}
.rp-storecount{margin-left:auto;font-size:10px;font-weight:700;color:var(--slate);background:var(--hover);border-radius:999px;padding:1px 7px;flex:none}
.rp-storeacts{display:flex;align-items:center;gap:12px;margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.rp-storeacts button:not(.btn){background:none;border:none;color:var(--assure);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0}
.rp-storeacts button:not(.btn):hover{text-decoration:underline}
.rp-storeempty{padding:10px;color:var(--slate);font-size:12.5px;text-align:center}
/* demographics postcode-area autosuggest (item 4) */
.dg-ac{position:relative}
.dg-ac>input{width:190px;max-width:100%;padding:6px 24px 6px 10px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:12.5px;background:var(--white);color:var(--ink)}
.dg-ac-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--slate);cursor:pointer;font-size:16px;line-height:1;padding:0}
.dg-acpop{width:240px}
.dg-acpop button{display:block;width:100%;text-align:left;background:none;border:none;padding:7px 10px;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;border-radius:6px}
.dg-acpop button:hover{background:var(--assure-10)}
.dg-ac-sub{color:var(--slate);font-size:11px}
/* audit change cell (item 7) */
.rp-arrow{color:var(--assure);font-weight:700}
.rp-was{color:var(--slate);text-decoration:line-through;text-decoration-color:var(--border)}
.rp-now{color:var(--ink);font-weight:600}
.rpd-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--pri,#334a54);color:#fff;font-size:14px}
.rpd-x{appearance:none;border:0;background:rgba(255,255,255,.14);color:#fff;width:26px;height:26px;border-radius:8px;cursor:pointer}
.rpd-x:hover{background:rgba(255,255,255,.26)}
.rpd-b{flex:1;overflow-y:auto;padding:8px 16px}
.rpd-row{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--border,#e5e9eb);font-size:13px}
.rpd-k{flex:none;width:132px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate)}
.rpd-v{text-align:right;min-width:0;overflow-wrap:anywhere}
.rpd-f{padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
/* item timeline in the drill panel */
.rpd-tlh{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;color:var(--slate);margin:16px 0 8px;display:flex;gap:7px;align-items:center}
.rpd-tl{position:relative;padding-left:4px}
.rpd-ev{position:relative;display:flex;gap:10px;padding:0 0 14px 8px}
.rpd-ev::before{content:'';position:absolute;left:11px;top:14px;bottom:-2px;width:2px;background:var(--border,#e5e9eb)}
.rpd-ev:last-child::before{display:none}
.rpd-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--assure,#007689);margin-top:5px;box-shadow:0 0 0 3px rgba(0,118,137,.15);position:relative;z-index:1}
.rpd-ev b{font-size:13px}
.rpd-ev small{color:var(--slate);font-size:11.5px}
.rpd-evd{font-size:12px;color:var(--slate);margin-top:2px}

/* ==========================================================================
   SOURCE: 25-ux-review-wireframes.html  (43 unique statements)
   ========================================================================== */

:root{--ink:#001923;--slate:#4E5861;--assure:#007689;--pri:#334a54;--safe:#E6E8E8;--white:#fff;--border:#c6ccd0;--red:#b3261e;--amber:#8a5a00;--green:#1b7d4f;--orange:#e8762d;--font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI Variable","Segoe UI",Arial,sans-serif}
body{margin:0;background:var(--safe);color:var(--ink);font:16px/1.55 var(--font)}
.wrap{max-width:1060px;margin:0 auto;padding:28px 20px 80px}
header.doc{background:var(--ink);color:#fff;border-radius:12px;padding:26px 28px;margin-bottom:22px}
header.doc h1{margin:0 0 6px;font-size:24px}
header.doc p{margin:4px 0;color:#c8d4d9;font-size:14px}
.strip{margin-top:12px;font-size:13px}
.strip a{color:#7fd0dd;text-decoration:none;margin-right:14px}
.strip a:hover{text-decoration:underline}
.card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,25,35,.05)}
h2{font-size:19px;margin:0 0 10px}
h3{font-size:16px;margin:0}
table.sum{width:100%;border-collapse:collapse;font-size:13.5px}
table.sum th{ text-align:left;color:var(--slate);font-weight:600;border-bottom:2px solid var(--border);padding:7px 8px;white-space:nowrap}
table.sum td{border-bottom:1px solid #e3e7e9;padding:7px 8px;vertical-align:top}
table.sum tr:hover td{background:#f2f6f7}
table.sum a{text-decoration:none}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.i-hi{background:#f6dedc;color:var(--red)}
.i-me{background:#f4e8d0;color:var(--amber)}
.i-lo{background:#e2e6e8;color:var(--slate)}
.c-s{background:#dcefe6;color:var(--green)}
.c-m{background:#f4e8d0;color:var(--amber)}
.c-l{background:#f6dedc;color:var(--red)}
.k-fix{background:#e0eef1;color:var(--assure)}
.k-imp{background:#e6e2f0;color:#5b4a8a}
.k-idea{background:#fdeadd;color:#a4520f}
.item{border-left:5px solid var(--border);scroll-margin-top:12px}
.item.hi{border-left-color:var(--red)}
.item.me{border-left-color:#d99a00}
.item.lo{border-left-color:var(--slate)}
.item:target{outline:2px solid var(--assure);outline-offset:2px}
.ihead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.rank{font-size:13px;font-weight:700;color:var(--slate)}
.meta{font-size:12.5px;color:var(--slate);margin:2px 0 10px}
.meta b{color:var(--ink)}
.item p{margin:8px 0;font-size:14.5px}
.impact{font-size:14px;background:#f2f6f7;border:1px solid #dfe5e8;border-radius:8px;padding:8px 12px;margin:10px 0}
.prompt{position:relative;background:#0f2530;color:#dce8ec;border-radius:8px;padding:12px 14px;font:13px/1.5 ui-monospace,Consolas,monospace;white-space:pre-wrap;margin-top:10px}
.prompt::before{content:"PROMPT";position:absolute;top:-9px;left:12px;background:var(--orange);color:#fff;font:700 10px/1 var(--font);letter-spacing:.08em;border-radius:4px;padding:3px 7px}
.lede p{font-size:15px;margin:8px 0}
.good li{margin:4px 0;font-size:14.5px}
@media print{body{background:#fff}.prompt{border:1px solid #999;background:#fff;color:#000}}

/* ==========================================================================
   SOURCE: 28-administration-wireframes-v2.html  (66 unique statements)
   ========================================================================== */

/* assessment template builder (Ivan, 16 Jul 2026) */
.tb-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:9px;padding:6px 10px;margin:4px 0;background:var(--white);flex-wrap:wrap}
.tb-row.locked{background:var(--amber-bg);border-color:rgba(178,106,0,.35)}
.tb-grip{color:var(--slate);cursor:grab;flex:none;font-size:12px}
.tb-lbl{flex:1;min-width:180px;font-size:12.5px}
.tb-row.locked .tb-lbl{font-weight:700}
.tb-lbl input{width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:7px;font:inherit;font-size:12.5px;background:var(--white);color:var(--ink)}
.tb-type select{padding:5px 8px;border:1px solid var(--border);border-radius:7px;font:inherit;font-size:12px;background:var(--white);color:var(--ink)}
.tb-flag{font-size:11.5px;color:var(--slate);display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.tb-del{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;background:none;color:var(--slate);border-radius:8px;cursor:pointer;font-size:12.5px;padding:0;font-family:inherit;flex:none}
.tb-del:hover{background:var(--hover);border-color:var(--border);color:var(--red)}
/* item 2/4 (Ivan, 15 Jul 2026): admin filter row + modal form grid + user-status danger box */
  #admin .reqsearch{position:relative;display:inline-flex;align-items:center}
#admin .reqsearch input{width:100%;padding:7px 10px 7px 32px;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:13px;background:var(--white)}
#admin .reqsearch-ic{position:absolute;left:11px;color:var(--slate);font-size:12px;pointer-events:none}
#admin .reqsel{padding:7px 10px;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:13px;background:var(--white);color:var(--ink)}
.admgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.admgrid > div{min-width:0}
.admgrid label{display:block;font-size:12px;font-weight:700;color:var(--slate);margin-bottom:4px}
.admgrid input,.admgrid select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:10px;font:inherit}
.ue-danger{margin-top:14px;border:1px solid rgba(179,38,30,.35);background:rgba(179,38,30,.05);border-radius:10px;padding:11px 13px}
.ue-danger-row{display:flex;gap:12px;align-items:center;font-size:12.5px}
.ue-danger-row > div{flex:1}
.ue-danger-row select{padding:7px 10px;border:1px solid var(--border);border-radius:9px;font:inherit;background:var(--white)}
.sp-list{display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.sp-list label{display:flex;gap:9px;align-items:center}
.sp-list .sp-num{gap:7px}
/* item 5: role editor + privilege reference */
  .re-perms-h{display:flex;align-items:center;font-size:12px;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 8px}
.re-perms{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.re-perms .re-mod{display:flex;flex-direction:column;gap:3px}
.re-perms .re-mod label{font-size:12px;font-weight:600;color:var(--ink)}
.re-perms .re-mod select{padding:6px 9px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:12.5px;background:var(--white)}
.priv-tbl{width:100%;border-collapse:collapse;font-size:13px}
.priv-tbl th,.priv-tbl td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--border);vertical-align:top}
.priv-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate)}
.priv-tbl td:first-child{white-space:nowrap}
/* item 3/4: task-type SLA grid + working-hours field */
  .tt-sla-h,.re-perms-h{margin:16px 0 8px}
.tt-sla{width:100%;border-collapse:collapse;font-size:13px}
.tt-sla th,.tt-sla td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border)}
.tt-sla th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate)}
.tt-wh{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate)}
.tt-wh input{width:66px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;font:inherit}
.tt-clsbox{margin-top:14px;border:1px solid var(--border);border-radius:10px;padding:11px 13px;background:var(--bg2)}
.tt-clsbox label{font-size:12.5px}
/* item 1: 2-step invite + read-only MFA */
  .ui-methods{display:flex;flex-direction:column;gap:10px}
.ui-method{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:11px 13px;cursor:pointer;font-size:13px}
.ui-method:hover{border-color:var(--assure)}
.ui-method input{margin-top:3px}
.ui-sugg-wrap,.ui-grp-wrap{position:relative}
.ui-sugg-wrap input,.ui-grp-wrap input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:10px;font:inherit}
.ui-sugg{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;background:var(--white);border:1px solid var(--border);border-radius:10px;box-shadow:0 18px 40px rgba(0,25,35,.18);overflow:hidden;max-height:220px;overflow-y:auto}
.ui-sugg.open{display:block}
/* item 9.1 (Ivan, 15 Jul 2026): the User groups autosuggest is the last field, so opening it
     downward was clipped by the modal's lower border. Open it UPWARD and give the modal body a
     little more bottom room so the chips + control sit comfortably. */
  /* item (Ivan, 16 Jul 2026): the group suggestions are an IN-FLOW listbox under the input – they
     push the popup's buttons down instead of floating, so nothing is ever clipped by the modal
     border or laid over the other fields (the old floating list covered the whole popup). */
  #userinvite .ui-grp-wrap .ui-sugg{position:static;top:auto;bottom:auto;margin-top:6px;max-height:180px;box-shadow:none}
#userinvite .modal-b select{width:100%}
#userinvite .modal-b{padding-bottom:22px}
#userinvite .ui-grp-wrap{margin-top:6px}
.ui-sugg button{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--bg2);padding:8px 12px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.ui-sugg button:hover{background:var(--assure-10)}
.ui-sugg-none{padding:10px 12px;font-size:12.5px;color:var(--slate);font-style:italic}
.ui-picked{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 11px;border:1px solid var(--assure);background:var(--assure-10);border-radius:10px;font-size:13px;font-weight:600}
.ui-picked > .fi{color:var(--assure)}
.ui-grp-chips{display:flex;flex-wrap:wrap;gap:6px}
.ui-grp-chips:not(:empty){margin-bottom:6px}
.ui-grp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;background:var(--assure-10);border:1px solid rgba(0,118,137,.3);color:var(--assure);border-radius:999px;padding:2px 4px 2px 10px}
.ui-grp-chip button{border:none;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 4px}
.ue-mfa-view{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);font-size:13px;font-weight:600;color:#15803d}
.ue-mfa-view.off{color:var(--slate)}
.ue-mfa-view .fi{font-size:12px}

/* ==========================================================================
   SOURCE: 29-assessments-wireframes.html  (66 unique statements)
   ========================================================================== */

body.demo-empty #as-mine>:not(.card-h):not(.wf-empty){display:none}
#assessments .mainc{max-width:none}
#assessments table{width:100%;border-collapse:collapse}
#assessments th{text-align:left;font-size:12px;color:var(--slate);font-weight:600;padding:9px 14px;border-bottom:1px solid var(--cardborder)}
#assessments td{padding:10px 14px;border-bottom:1px solid var(--cardborder);font-size:13.5px;vertical-align:middle}
#assessments tr:last-child td{border-bottom:none}
#assessments a.rowlink,#astask a.rowlink{color:var(--assure);text-decoration:none;font-weight:600}
#assessments a.rowlink:hover{text-decoration:underline}
#assessments .daygrp{display:flex;align-items:center;gap:10px;margin:18px 0 2px;padding:0 2px}
#assessments .daygrp h4{margin:0;font-size:13.5px;color:var(--ink)}
#assessments .daygrp .ln{flex:1;height:1px;background:var(--cardborder)}
#assessments .daygrp .ct{font-size:12px;color:var(--slate)}
#assessments table.mw-fixed{table-layout:fixed}
#assessments table.mw-fixed td,#assessments table.mw-fixed th{overflow:hidden;text-overflow:ellipsis}
#assessments .due-over{color:#b3261e;font-weight:700}
#assessments tr.rowlink-row{cursor:pointer}
/* kind pills – Scheduled (fixed booking) vs Upcoming (movable, unassigned review) */
  .as-kind{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700;white-space:nowrap}
.as-kind .fi{font-size:9.5px;width:auto}
.as-kind.k-sched{background:rgba(124,77,187,.16);color:#5e3a96}
.as-kind.k-up{background:var(--assure-15);color:#00657a}
html.is-dark .as-kind.k-sched{color:#c4abf7}
html.is-dark .as-kind.k-up{color:#5cc6d8}
/* ===== calendar ===== */
  .as-calwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.as-cal{min-width:880px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.as-dow{font-size:11px;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;position:sticky;top:48px;background:var(--bg);z-index:3}
.as-msep{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:10px 0 2px;font-size:13.5px;font-weight:700;color:var(--pri-ink)}
.as-msep::after{content:'';flex:1;height:1px;background:var(--cardborder)}
.as-day{min-height:96px;border:1px solid var(--cardborder);border-radius:10px;background:var(--white);padding:6px 7px;display:flex;flex-direction:column;gap:4px}
.as-day.wkd{background:var(--bg2)}
.as-day.past .dh .dn{color:var(--slate);opacity:.75}
.as-day.today{border-color:var(--assure);box-shadow:0 0 0 2px var(--assure-15)}
.as-day .dh{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;margin-bottom:1px}
.as-day .dh .dn{color:var(--ink)}
.as-day .dh .cnt{margin-left:auto;font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 7px;background:var(--safe);color:var(--slate)}
.as-day .dh .cnt.load-hi{background:var(--amber-bg);color:var(--amber)}
.as-day .dh .cnt.load-over{background:var(--red-bg);color:var(--red)}
/* one row per rostered assessor (from the Roster) - combined workload bar across ALL task types */
  .arow{display:flex;align-items:center;gap:5px;min-height:17px;border-radius:6px;padding:0 2px}
.arow.rowbtn{cursor:pointer}
.arow.rowbtn:hover{background:var(--assure-10)}
.arow .who{flex:none;width:22px;height:16px;border-radius:5px;border:1px solid var(--border);background:var(--bg2);color:var(--slate);font-size:8.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.02em}
.arow.me .who{border-color:var(--assure);background:var(--assure-10);color:var(--assure)}
.abar{flex:1;height:8px;border-radius:4px;background:var(--hover);overflow:hidden;display:flex;min-width:24px}
.abar .sg-a{background:#7c4dbb;height:100%}
.abar .sg-o{background:var(--slate);opacity:.5;height:100%}
.arow .ah{font-size:9.5px;font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums;flex:none;min-width:26px;text-align:right}
.arow .free{font-size:9.5px;color:var(--slate);opacity:.6;font-style:italic;flex:1}
/* reassessments-due bar - the "peak" indicator */
  .duebar{display:flex;align-items:center;gap:6px;border:1px dashed rgba(0,118,137,.45);background:var(--assure-10);border-radius:7px;padding:2px 7px;font-size:10px;font-weight:800;color:#00657a;cursor:pointer;width:100%;font-family:inherit;text-align:left}
.duebar:hover{filter:brightness(1.05);box-shadow:0 0 0 2px var(--assure-15)}
.duebar .db{height:7px;background:#0089a3;border-radius:4px;flex:none}
.duebar.warm{border-color:rgba(178,106,0,.5);background:var(--amber-bg);color:var(--amber)}
.duebar.warm .db{background:var(--amber)}
.duebar.hot{border-color:rgba(179,38,30,.5);background:var(--red-bg);color:var(--red)}
.duebar.hot .db{background:var(--red)}
.duebar .fi{font-size:8.5px;width:auto}
/* legend */
  .as-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:10px 2px 2px;font-size:11.5px;color:var(--slate)}
.as-legend span{display:inline-flex;align-items:center;gap:6px}
.as-legend .who{width:22px;height:16px;border-radius:5px;border:1px solid var(--border);background:var(--bg2);color:var(--slate);font-size:8.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.as-legend .lg-a{width:14px;height:8px;border-radius:4px;background:#7c4dbb;display:inline-block}
.as-legend .lg-o{width:14px;height:8px;border-radius:4px;background:var(--slate);opacity:.5;display:inline-block}
.as-legend .lg-d{width:14px;height:8px;border-radius:4px;background:#0089a3;display:inline-block}
/* detail panel rows */
  #astask .idrow{display:flex;align-items:flex-start;gap:10px;margin:10px 0;font-size:13px}
#astask .idrow .k{flex:none;width:128px;color:var(--slate);font-size:12px;display:inline-flex;align-items:center;gap:7px}
#astask label{display:block;font-size:12px;color:var(--slate);margin:14px 0 4px}
#astask select{padding:7px 10px;border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--white)}
#astask .due-over{color:#b3261e;font-weight:700}
@media (max-width:640px){ .as-cal{min-width:760px} }


/* ---- build note: 100 selectors defined differently on more than one page (later page wins):
   #cal-unlist .uns,
   #cal-unlist .uns.sel,
   .booked,
   .btn,
   .btn-ok,
   .card,
   .card-h,
   .card-h .right,
   .card-h h3,
   .cardfoot,
   .content,
   .gsd-hole,
   .idrow,
   .idrow .k,
   .idrow .v,
   .insert-slot,
   .insert-slot:hover,
   .iv-bitem .sn,
   .job,
   .job.t-change,
   .job.t-decom,
   .job.t-welfare,
   .job:hover,
   .lane,
   .listctl,
   .listctl .reqsearch,
   .listctl .seg,
   .mapwrap,
   .modal-h,
   .mw-lane .job.t-assess,
   .mw-lane .job.t-change,
   .mw-lane .job.t-decom,
   .mw-lane .job.t-install,
   .mw-lane .job.t-other,
   .mw-lane .job.t-welfare,
   .notif-ic,
   .notif-pop,
   .opt-blk,
   .pager,
   .pager button,
   .pager button:disabled,
   .pill,
   .plan-grid,
   .pooljob,
   .qa,
   .rcell,
   .rcell.r-admin,
   .rcell.r-admin .rc-l,
   .rcell.r-shift,
   .rcell.r-train,
   .rcell.r-train .rc-l,
   .rec-tag,
   .reqsearch,
   .reqsel,
   .rid,
   .rkey.r-admin,
   .rkey.r-train,
   .rosterctl .right,
   .rp-card,
   .sd-empty,
   .searchwrap .searchwrap-ic,
   .searchwrap input,
   .seg,
   .seg button,
   .seg button.on,
   .sf-row,
   .sla,
   .slabox,
   .slabox .sla-h,
   .slot,
   .slot.busy,
   .slot:hover,
   .stat,
   .stat .s-clear,
   .stat .s-lbl,
   .stat .s-sub,
   .stat .s-val,
   .stat.active .s-clear,
   .statband,
   .sugglink button,
   .timeline li,
   .tipwrap,
   .tkey,
   .toolbar,
   .tqa,
   .twshade>table:not(.fc *),
   .uns,
   .uns-h,
   .uns.t-change,
   .w3wmap-box,
   .wait,
   .wf-note,
   :root,
   a.rowlink,
   body,
   html.is-dark .rcell.r-admin .rc-l,
   html.is-dark .uns.t-install,html.is-dark .job.t-install,html.is-dark .calchip.t-install,
   html[data-theme="dark"],
   tbody tr:hover td,
   th
---- */

/* ===== PROD BUILD (presentation version) =====================================
   The wireframe drawer, its WIREFRAME tab and the "Spec refs & annotations"
   toggle are removed from these pages. The spec chips and annotation lines are
   therefore hidden permanently here. A card footer that held nothing but an
   annotation is hidden with it; footers carrying real controls (buttons,
   inputs, counts) stay.
   ========================================================================== */
.ref,.anno,.bref{display:none!important}
.cardfoot:not(:has(> :not(.anno):not(.ref):not(.bref))){display:none!important}
.drawer{display:none!important}