/* ── Production-matched design system (slate + white + orange) ──── */
.preload *{transition:none!important;animation:none!important}
/* Reserve the main content height before JS fills it, so F5 doesn't show
   a 0-height view that suddenly grows to fill the screen. */
#view{min-height:calc(100vh - 60px - 60px);content-visibility:auto}
.preload #view::before{content:'';display:block;height:60vh}
/* ═══ ACCESSIBILITY ═══
   Keyboard users get a clear focus ring everywhere; mouse users don't see it
   on click thanks to :focus-visible. Skip-link is offscreen until focused. */
.skip-link{position:absolute;top:-9999px;left:8px;background:#1b2330;color:#fff;padding:10px 14px;border-radius:0 0 8px 8px;font-weight:600;font-size:13px;text-decoration:none;z-index:9999}
.skip-link:focus,.skip-link:focus-visible{top:0;outline:3px solid #d4a945;outline-offset:2px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:none}
*:focus-visible{outline:2.5px solid #2563eb;outline-offset:2px;border-radius:3px}
#view:focus,#view:focus-visible{outline:none}
.ibtn:focus-visible,.hamb:focus-visible,.user-pill:focus-visible{outline:2px solid #fff;outline-offset:2px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
:root{
  /* ═══ UNIFIED BRAND PALETTE ═══
   * One brand hue (slate-navy) with controlled degrees, one amber accent for
   * highlights/CTA, and dedicated semantic colors (success/warning/danger/info)
   * with matching tint+ink pairs for badges/banners. Use --brand-* for anything
   * brand-shaped; reserve coloured variables for genuine status meaning only.
   * The legacy aliases below this block keep older selectors working until
   * everything is migrated. */
  --brand-50:#eef0f3;  --brand-100:#dde1e7;
  --brand-200:#c2c8d2; --brand-400:#5b6675;
  --brand-600:#374151; --brand-700:#2a313c;
  --brand-800:#1f2937; --brand-900:#0f1b2d;

  --accent-50:#fff4ec;  --accent-100:#ffe2cc;
  --accent-500:#f58442; --accent-600:#e07330;
  --accent-700:#a85a25;

  --success-50:#dcfce7; --success:#16a34a; --success-700:#15803d;
  --warning-50:#fef3c7; --warning:#d97706; --warning-700:#a15c07;
  --danger-50:#fee2e2;  --danger:#dc2626;  --danger-700:#b91c1c;
  --info-50:#dbeafe;    --info:#2563eb;    --info-700:#1d4ed8;

  --ink:#1b2330;--muted:#5b6675;--line:#e5e9f0;--line-2:#d7dde7;
  --bg:#f6f8fb;--surface:#ffffff;

  /* Legacy aliases — every existing rule that reads these still works. */
  --primary:var(--brand-600);--primary-700:var(--brand-700);--primary-50:var(--brand-50);
  --orange:var(--accent-500);--orange-d:var(--accent-600);--red:#c41313;
  --rad:10px;--rad-sm:8px;--rad-card:6px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:0 8px 24px rgba(16,24,40,.12);
  --sw:248px;--swc:74px;
  /* legacy aliases so existing rules inherit the new look */
  --navy:var(--primary);--navy-l:var(--primary-700);--navy-d:var(--primary);
  --gold:var(--orange);--gold-l:var(--orange-d);--gold-dim:rgba(245,132,66,.12);
  --ivory:var(--bg);--text:var(--ink);--bdr:var(--line);--bdr2:var(--line-2);
  --card:var(--surface);--card2:#f7f9fc;--green:var(--success);--amber:var(--warning);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:'Segoe UI',system-ui,-apple-system,sans-serif}

/* ── LOGIN — centered card, dashboard-matched ───────────────────── */
#lv{
  /* Login accents follow the navbar/sidebar brand palette (deep navy). */
  --wf-accent:var(--brand-900,#0f1b2d);
  --wf-accent-d:var(--brand-700,#2a313c);
  display:none;min-height:100vh;min-height:100dvh;
  align-items:center;justify-content:center;padding:44px 24px;
  color:var(--ink,#1b2330);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:radial-gradient(920px 500px at 50% -12%, rgba(245,132,63,.08), transparent 70%), var(--bg,#f4f6f9);
}
#lv.on{display:flex}

.lcard{width:100%;max-width:444px;background:var(--surface,#fff);
  border:1px solid #edf0f4;border-radius:20px;
  box-shadow:0 1px 3px rgba(16,24,40,.05), 0 24px 48px -14px rgba(16,24,40,.14);
  padding:40px;animation:lcardIn .5s ease both}

.lhead{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.lhead-mark{width:44px;height:44px;border-radius:13px;background:#fdecdf;
  display:flex;align-items:center;justify-content:center;color:var(--wf-accent);font-weight:700;font-size:19px;flex:none}
.lhead-txt{display:flex;flex-direction:column;line-height:1.25}
.lhead-name{font-size:16px;font-weight:700;color:var(--ink,#1b2330);letter-spacing:-.2px}
.lhead-sub{font-size:11px;color:#8a93a0;letter-spacing:.3px}
.lstatus{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#e9f7ee}
.lstatus i{width:7px;height:7px;border-radius:50%;background:#1faa5a}
.lstatus span{font-size:11px;color:#2f8f55;font-weight:600}

.lgreet{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--wf-accent);font-weight:700;margin-bottom:8px}
.lh1{font-size:25px;font-weight:700;letter-spacing:-.5px;margin:0 0 7px;color:var(--ink,#1b2330)}
.lintro{font-size:14px;color:var(--muted,#6b7480);margin:0 0 26px;line-height:1.5}

.lmaint,.lerr{display:flex;gap:10px;padding:12px 14px;border-radius:12px;margin-bottom:18px}
.lmaint{background:#fff5e6;border:1px solid #f6dca6}
.lerr{background:#fdecec;border:1px solid #f4c2c2}
.lmaint i,.lerr i{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}
.lmaint i{background:var(--warning,#d97706)}
.lerr i{background:var(--danger,#dc2626)}
.lmaint span{font-size:13px;color:#8a5a08;line-height:1.45}
.lerr span{font-size:13px;color:#b42121;line-height:1.45}

.lfield-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink,#1b2330);margin-bottom:7px}
#lform input{width:100%;height:48px;padding:0 14px;font-size:15px;color:var(--ink,#1b2330);
  background:#fff;border:1px solid #e3e8ef;border-radius:10px;outline:none;font-family:inherit}
#lu{margin-bottom:18px}
#lform input:focus{border-color:var(--wf-accent);box-shadow:0 0 0 3px rgba(15,27,45,.18)}
.lp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.lp-toggle{background:none;border:none;padding:0;cursor:pointer;font-size:11px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--wf-accent);font-weight:700;font-family:inherit}
.lp-wrap{position:relative}
.lcaps{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:.6px;
  text-transform:uppercase;color:#a9791a;background:#fbeccb;padding:3px 7px;border-radius:6px;font-weight:700}

#lbtn{width:100%;height:50px;margin-top:24px;background:var(--wf-accent);color:#fff;border:none;
  border-radius:10px;font-size:15px;font-weight:600;letter-spacing:.2px;cursor:pointer;font-family:inherit;
  box-shadow:0 8px 18px -6px rgba(245,132,63,.5);transition:transform .15s ease, background .2s ease}
#lbtn:hover{background:var(--wf-accent-d);transform:translateY(-1px)}
#lbtn:disabled{opacity:.7;cursor:default;transform:none}

.lhelp{font-size:13px;color:var(--muted,#6b7480);margin:18px 0 0;line-height:1.5}
.lhelp b{color:var(--wf-accent);font-weight:600}
.wf-foot-login{margin-top:28px;padding-top:20px;border-top:1px solid #eef1f5;text-align:center;
  font-size:11px;color:#9aa3b0;letter-spacing:.3px;position:static;background:transparent}

@keyframes lcardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lcard{animation:none!important}}
@media (max-width:520px){#lv{padding:20px}.lcard{padding:30px 22px}}

/* ── APP SHELL ──────────────────────────────────────────────────── */
#sh{display:none;min-height:100vh}
#sh.on{display:flex}
/* Pre-paint panel placement — set by the early classifier script above; prevents
   the topbar/sidebar from jumping into place after the 3700-line script parses. */
html.has-session #sh{display:flex}
html.has-session #lv{display:none}
html.no-session #lv{display:flex}
html.no-session #sh{display:none}

/* ── SIDEBAR (white) ────────────────────────────────────────────── */
#sb{width:var(--sw);height:100vh;height:100dvh;background:var(--surface);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;border-right:1px solid var(--line)}
.sbrand{padding:0 16px;height:60px;box-sizing:border-box;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;flex-shrink:0}
.sbicon{width:44px;height:44px;background:var(--brand-50,#eef0f3);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sbicon svg{width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:2}
.sbname{font-size:22px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.5px}
.sbname .fl{color:var(--orange)}
.sbsub{font-size:9px;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;margin-top:2px}
#sb-mid{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;padding:8px 0}
#sb-mid::-webkit-scrollbar{width:5px}
#sb-mid::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.ssec{padding:6px 0 2px}
.rec-clr{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;padding:0 6px;line-height:1;border-radius:4px}
.rec-clr:hover{color:var(--ink);background:var(--bg)}
.sslbl{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;padding:7px 18px 4px;display:block;opacity:.7}
.sslbl-t{display:flex;align-items:center;justify-content:space-between;padding-right:14px;cursor:pointer;user-select:none}
.sslbl-t svg{width:11px;height:11px;stroke:var(--muted);fill:none;stroke-width:2.5;transition:transform .2s}
.sslbl-t.closed svg{transform:rotate(-90deg)}
.slink{display:flex;align-items:center;gap:11px;margin:2px 10px;padding:9px 12px;color:var(--ink);font-size:13.5px;font-weight:500;border-radius:10px;transition:background .12s,color .12s;cursor:pointer;user-select:none}
.slink:hover{background:var(--primary-50);color:var(--primary-700)}
.slink.on{background:var(--brand-50,#eef0f3);color:var(--brand-900,#0f1b2d);font-weight:600}
.slink svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0;color:var(--primary)}
.slink:hover svg{color:var(--primary-700)}
.slink.on svg{color:var(--brand-900,#0f1b2d)}
.slink.sm{font-size:12.8px;margin-left:20px;padding:7px 12px}
.slink.sm svg{width:15px;height:15px}
.sbadge{background:var(--orange);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;margin-left:auto;min-width:18px;text-align:center;flex-shrink:0}
.slink.on .sbadge{background:var(--accent-600,#e07330);color:#fff}
.sb-fi-w{padding:6px 14px 8px}
.sb-search{width:100%;display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13px;color:var(--muted);outline:none;font-family:inherit;cursor:pointer;text-align:left;transition:border-color .15s,background .15s,color .15s}
.sb-search:hover{border-color:var(--primary);background:var(--surface);color:var(--ink)}
.sb-search:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px rgba(55,65,81,.12)}
.sb-search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sb-search span{flex:1}
.sb-search-kbd{font-family:var(--font-mono,monospace);font-size:10.5px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--muted)}
.suser{padding:11px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0}
.savatar{width:34px;height:34px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0}
.suname{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.suinfo{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.logbtn{background:none;border:none;padding:6px;cursor:pointer;color:var(--muted);border-radius:6px;transition:all .15s;margin-left:auto;flex-shrink:0}
.logbtn:hover{background:var(--primary-50);color:var(--red)}
.logbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ── MAIN ───────────────────────────────────────────────────────── */
#ma{margin-left:var(--sw);flex:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
/* Collapsed (icons-only) sidebar that expands on hover — desktop only */
@media(min-width:1025px){
  #sb{width:var(--swc);transition:width .18s var(--ease)}
  #ma{margin-left:var(--swc)}
  #sb:hover{width:var(--sw);box-shadow:var(--shadow-lg);z-index:300}
  /* collapsed: icons only, labels hidden cleanly via font-size:0 (icons keep their fixed size) */
  #sb:not(:hover) .slink{justify-content:center;gap:0;font-size:0;width:44px;height:44px;margin:4px auto;padding:0;border-radius:10px}
  #sb:not(:hover) .slink i{font-size:20px;width:100%;text-align:center}
  #sb:not(:hover) .sgrp{margin:0}
  #sb:not(:hover) .sgrp-chev,#sb:not(:hover) .sbadge{display:none}
  #sb:not(:hover) .sslbl,#sb:not(:hover) .sb-fi-w{display:none}
  #sb:not(:hover) .sbrand{justify-content:center;padding-left:0;padding-right:0}
  #sb:not(:hover) .sbname,#sb:not(:hover) .sbsub{display:none}
}
#tb{height:60px;background:var(--primary);display:flex;align-items:center;padding:0 22px;position:sticky;top:0;z-index:100;gap:10px;box-shadow:var(--shadow)}
.tbt{font-size:15px;font-weight:700;color:#fff;flex:1 1 0;min-width:0;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbsub{font-size:11.5px;color:rgba(255,255,255,.6);margin-left:8px;font-weight:400}
.ibtn{width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:all .15s;position:relative}
.ibtn:hover{background:rgba(245,132,63,.18);color:var(--accent-500)}
.tb-pop.open .ibtn{background:rgba(245,132,63,.22);color:var(--accent-500)}
.ibtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.ndot{position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--orange);border-radius:50%;border:2px solid var(--primary);display:none}
#view{flex:1;padding:22px}

/* ── CARDS ──────────────────────────────────────────────────────── */
.wc{background:var(--surface);border-radius:var(--rad-card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.wch{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wch h2{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:19px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:-.3px;line-height:1.2}
.wcb{padding:16px 18px}

/* ── STATUS PILLS (production) ──────────────────────────────────── */
.sbg{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;letter-spacing:.3px;text-transform:uppercase}
/* Activity-log action badges (semantic colors) */
.lgb{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px 3px 7px;border-radius:999px;white-space:nowrap;letter-spacing:.2px;border:1px solid transparent}
.lgb .lgi{font-size:11px;line-height:1}
.lgb.lg-green{background:var(--success-50,#eaf6ee);color:var(--success-700,#1f5b35);border-color:#bfe2cb}
.lgb.lg-blue{background:#eaf1fb;color:#1e3a5f;border-color:#bcd3ee}
.lgb.lg-red{background:#fdecea;color:#a02216;border-color:#f3c0ba}
.lgb.lg-amber{background:#fdf3e0;color:#8a5a12;border-color:#f0d8a8}
.lgb.lg-grey{background:#eef1f4;color:#516072;border-color:#dde3ea}
/* Category filter chips */
.lgfilt{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.lgchip{font-size:12px;font-weight:600;padding:5px 13px;border-radius:999px;border:1px solid var(--line-2,#d6dbe1);background:#fff;color:var(--ink,#1f2733);cursor:pointer;transition:all .12s}
.lgchip:hover{border-color:var(--primary,#374151)}
.lgchip.on{background:var(--ink,#1f2733);color:#fff;border-color:var(--ink,#1f2733)}
.lgsearch{margin-left:auto;min-width:230px;padding:6px 12px;border:1px solid var(--line-2,#d6dbe1);border-radius:999px;font-size:12.5px;background:#fff;color:var(--ink)}
.lgsearch:focus{outline:none;border-color:var(--primary,#374151);box-shadow:0 0 0 3px rgba(55,65,81,.1)}
/* Activity dashboard stat strip */
.lst-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) repeat(3,minmax(0,1.4fr));gap:12px;margin:0 0 14px}
@media(max-width:1100px){.lst-grid{grid-template-columns:repeat(2,1fr)}.lst-wide{grid-column:span 2}}
.lst-card{background:#fff;border:1px solid var(--line-2,#e3e7ec);border-radius:12px;padding:13px 15px;min-height:84px}
.lst-card.lst-alert{border-color:#f3c0ba;background:#fdf3f2}
.lst-k{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted,#7a8594);margin-bottom:6px}
.lst-v{font-size:28px;font-weight:800;line-height:1;color:var(--ink,#1f2733)}
.lst-card.lst-alert .lst-v{color:#a02216}
.lst-sub{font-size:11.5px;color:var(--muted,#7a8594);margin-top:5px}
.lst-bars{display:flex;align-items:flex-end;gap:6px;height:56px;margin-top:4px}
.lst-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;justify-content:flex-end}
.lst-barfill{width:100%;background:linear-gradient(180deg,#3a4660,#1e3a5f);border-radius:3px 3px 0 0;min-height:3px}
.lst-barlbl{font-size:10px;color:var(--muted,#7a8594)}
.lst-catrow{display:flex;align-items:center;gap:8px;font-size:12px;margin:5px 0}
.lst-dot{width:9px;height:9px;border-radius:50%;flex:none}
.lst-catn{width:62px;flex:none;color:var(--ink)}
.lst-bartrack{flex:1;height:6px;background:var(--line,#eef1f4);border-radius:3px;overflow:hidden}
.lst-bartrackf{display:block;height:100%;border-radius:3px}
.lst-catc{width:34px;text-align:right;font-family:var(--font-mono,monospace);font-size:11.5px;color:var(--ink)}
.lst-urow{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12.5px}
.lst-uav{width:22px;height:22px;border-radius:50%;background:var(--ink,#1f2733);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.lst-un{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lst-uc{font-family:var(--font-mono,monospace);font-size:11.5px;color:var(--muted)}
.lgb .lgx{margin-left:5px;font-size:9.5px;opacity:.8;font-weight:800}
.pend{background:var(--warning-50);color:#713f0a}
.appr{background:var(--success-50);color:var(--success-700)}
.rejd{background:var(--danger-50);color:var(--danger-700)}
.asbg{background:#DBEAFE;color:#1E40AF;border-radius:999px;font-size:10.5px;font-weight:700;padding:3px 10px}

/* ── MODULE GRID ─────────────────────────────────────────────────── */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:17px 16px;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease),border-color .15s;position:relative;overflow:hidden}
.mcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange);transform:scaleX(0);transition:transform .2s var(--ease);transform-origin:left}
.mcard:hover{border-color:var(--primary-700);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.mcard:hover::before{transform:scaleX(1)}
.mci{width:40px;height:40px;background:var(--primary-50);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.mci svg{width:19px;height:19px;stroke:var(--primary);fill:none;stroke-width:1.8}
.mct{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35}

/* ── TABLES ──────────────────────────────────────────────────────── */
.wtbl{width:100%;border-collapse:collapse}
.wtbl thead th{font-size:12.5px;font-weight:700;color:var(--muted);padding:9px 14px;background:var(--bg);white-space:nowrap;text-align:left;letter-spacing:0;border-bottom:1px solid var(--line-2)}
.wtbl thead th.wsort{cursor:pointer;user-select:none}
.wtbl thead th.wsort:hover{background:var(--brand-100);color:var(--ink)}
.sarr{font-size:11px;font-weight:700}
.wtbl thead .sarr{color:var(--primary);font-size:12px;padding:0 2px;margin-left:2px;display:inline}
.lgtbl{counter-reset:lgn}
.lgtbl tbody tr{counter-increment:lgn}
.lgtbl tbody .lgn::before{content:counter(lgn)}
.lgtbl .lgn-h,.lgtbl .lgn{width:38px;text-align:center;color:var(--muted)}
.wtbl tbody tr{cursor:pointer;transition:background .1s}
.wtbl tbody tr:not(.noc):hover{background:var(--primary-50)}
.wtbl tbody td{padding:8px 14px;font-size:13.5px;line-height:1.45;letter-spacing:-.1px;border-bottom:1px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.wtbl tbody tr:last-child td{border-bottom:none}
/* de-gridded: no vertical cell separators — modern dense-list look (was a spreadsheet grid) */
.tid{font-family:'SF Mono','Fira Mono',monospace;font-size:11.5px;color:var(--primary);font-weight:700}
.dl-sub{font-family:var(--font-sans,inherit);font-size:11.5px;font-weight:500;color:var(--ink);margin-top:2px;white-space:normal}
.dl-sub .tm{font-weight:600}
.nil-badge{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--slate-100,#f1f5f9);color:var(--slate-500,#64748b);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.wtbl tbody td.tid{font-family:inherit;font-size:13.5px;font-weight:400;color:var(--ink)}

/* ── FILTER TABS ─────────────────────────────────────────────────── */
.ftabs{display:flex;gap:3px;background:var(--surface);padding:3px;border-radius:9px;width:fit-content;margin-bottom:16px;border:1px solid var(--line)}
.ftab{padding:5px 15px;border:none;background:none;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s;font-family:inherit}
.ftab.on{background:var(--primary);color:#fff;font-weight:600}
.ftab:hover:not(.on){color:var(--ink)}

/* ── PAGINATION ──────────────────────────────────────────────────── */
.pagbar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.bg{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-weight:600;font-size:12.5px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.badd{background:var(--surface);color:var(--primary);border:1px solid var(--line-2);border-radius:8px;padding:8px 16px;font-weight:600;font-size:12.5px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:7px;font-family:inherit}
.badd:hover{border-color:var(--primary);background:var(--primary-50)}
.bg:hover{background:var(--primary-700)}.bg:disabled{opacity:.5;cursor:default}
.bn{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:8px;padding:8px 16px;font-weight:600;font-size:12.5px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.bn:hover{background:var(--primary-50);border-color:var(--primary)}
.bn:disabled{opacity:.5;cursor:default}
.bgs{background:var(--success);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-weight:600;font-size:12.5px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.bgs:hover{background:var(--success-700)}.bgs:disabled{opacity:.5;cursor:default}
.bod{background:none;color:var(--danger);border:1px solid var(--danger-50);border-radius:8px;padding:7px 14px;font-weight:600;font-size:12.5px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;font-family:inherit}
.bod:hover{background:var(--danger-50);border-color:var(--danger)}
.bow{background:none;color:var(--orange-d);border:1px solid #fcd0b0;border-radius:8px;padding:7px 14px;font-weight:600;font-size:12.5px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;font-family:inherit}
.bow:hover{background:var(--warning-50);border-color:var(--orange)}
.bgh{background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;font-family:inherit}
.bgh:hover{border-color:var(--primary);color:var(--ink)}
.blink{background:none;border:none;color:var(--primary);font-size:12px;font-weight:700;cursor:pointer;padding:0;font-family:inherit;transition:opacity .15s}
.blink:hover{color:var(--orange)}
.bdel{background:none;border:none;color:var(--danger);font-size:12px;font-weight:600;cursor:pointer;padding:0;font-family:inherit;transition:opacity .15s}
.bdel:hover{opacity:.7}
.bbk{background:none;border:none;padding:4px 0;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .15s;margin-bottom:14px;font-family:inherit}
.bbk:hover{color:var(--primary)}
.bbk svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .15s}
.bbk:hover svg{transform:translateX(-2px)}

/* ── PAGE HEADER ─────────────────────────────────────────────────── */
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:12px}
.ph-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.ph-l h1{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:21px;font-weight:600!important;color:var(--ink);letter-spacing:-.3px;line-height:1.1;margin:0;white-space:nowrap}
.ph-l p{display:none}
.ph-acts{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* ── FIELD GRID (form detail) ──────────────────────────────────────── */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--line)}
.fi{background:var(--surface);padding:13px 16px}
.fl{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.fv{font-size:13.5px;color:var(--ink);font-weight:500;word-break:break-word;line-height:1.45}
.form-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;padding:10px 16px;background:var(--surface);border-radius:8px;border:1px solid var(--line)}
.form-meta-tag{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:4px}
.form-meta-tag svg{width:12px;height:12px;stroke:currentColor;fill:none}

/* ── FORMS ───────────────────────────────────────────────────────── */
.wfg{margin-bottom:15px}
.wfl{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px;display:block}
.wfl.req::before{content:'* ';color:var(--red)}
.wfi{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:9px 12px;font-size:13.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s;background:var(--surface);font-family:inherit}
.wfi[readonly]{background:var(--surface)}
.wfi::placeholder,.ssel-search::placeholder,.sinpw input::placeholder{color:var(--muted);opacity:1}
.wfi:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(55,65,81,.1);outline:none}
.wfi:hover:not(:focus){border-color:var(--primary)}
select.wfi{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6675' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
.wfrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wfchk{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);cursor:pointer;user-select:none;padding:6px 0}
.wfchk input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary)}

/* ── APPROVAL LADDER (legacy stcard, kept for any usage) ─────────── */
.stcard{background:var(--primary);border-radius:10px;padding:18px 20px;margin-bottom:16px}
.stcl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.5);margin-bottom:14px}
.lsteps{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding-bottom:4px;position:relative}
.lstep{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:60px;flex:1}
.sdot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;border:2px solid rgba(255,255,255,.18);color:rgba(255,255,255,.3);flex-shrink:0;background:rgba(255,255,255,.05)}
.lstep.done .sdot{background:var(--wf-accent);border-color:var(--wf-accent);color:#fff}
.lstep.cur .sdot{border-color:#fff;color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.lstep-l{font-size:9px;color:rgba(255,255,255,.4);text-align:center;line-height:1.3;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lstep.done .lstep-l,.lstep.cur .lstep-l{color:rgba(255,255,255,.75)}
.sarr{color:rgba(255,255,255,.2);font-size:14px;padding:0 2px;padding-bottom:20px}
.lstat{font-size:11.5px;font-weight:700;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.lstat.ok{color:var(--orange)}.lstat.rej{color:var(--danger-50)}
.step-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line)}
.step-row:last-child{border-bottom:none}
.step-num{width:28px;height:28px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}

/* ── INBOX ───────────────────────────────────────────────────────── */
.irow{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s}
.irow:last-child{border-bottom:none}.irow:hover{background:var(--primary-50)}
.iico{width:38px;height:38px;background:var(--primary-50);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.iico svg{width:17px;height:17px;stroke:var(--primary);fill:none;stroke-width:1.8}
.irank{font-size:10.5px;color:#fff;background:var(--primary);border-radius:5px;padding:2px 7px;margin-left:6px;font-weight:600}

/* ── NOTIFICATIONS ───────────────────────────────────────────────── */
.nitem{padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s}
.nitem:last-child{border-bottom:none}.nitem:hover{background:var(--primary-50)}
.nitem.unr{background:var(--warning-50)}
.nh{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px;display:flex;align-items:center;gap:7px}
.nunr-dot{width:6px;height:6px;background:var(--orange);border-radius:50%;flex-shrink:0}
.nm{font-size:12.5px;color:var(--muted);line-height:1.45}
.nt{font-size:10.5px;color:var(--muted);opacity:.7;margin-top:5px}

/* ── SEARCH ──────────────────────────────────────────────────────── */
.sinpw{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:0 14px;margin-bottom:18px;transition:border-color .15s,box-shadow .15s}
.sinpw:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(55,65,81,.1)}
.sinpw svg{width:17px;height:17px;stroke:var(--muted);fill:none;flex-shrink:0}
.sinpw input{border:none;padding:12px 0;font-size:14.5px;flex:1;background:none;outline:none;color:var(--ink);font-family:inherit}
.sres{padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s;display:flex;align-items:center;gap:14px}
.sres:last-child{border-bottom:none}.sres:hover{background:var(--primary-50)}
.snip{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* ── EMPTY / SPINNER / SKELETON ──────────────────────────────────── */
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty svg{width:42px;height:42px;stroke:currentColor;fill:none;opacity:.25;margin:0 auto 13px;display:block}
.empty h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.empty p{font-size:12.5px;line-height:1.5}
.spin{width:30px;height:30px;border:3px solid var(--primary-50);border-top-color:var(--primary);border-radius:50%;animation:sp .7s linear infinite;margin:36px auto}
.sk{background:linear-gradient(90deg,#eef0f3 25%,#e2e6ee 50%,#eef0f3 75%);background-size:300% 100%;animation:skw 1.5s infinite;border-radius:5px;display:block}

/* ── TOASTS ──────────────────────────────────────────────────────── */
#tc{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;min-width:300px;max-width:380px;pointer-events:none}
.ti{background:var(--surface);border-radius:10px;padding:13px 15px;display:flex;align-items:flex-start;gap:11px;box-shadow:var(--shadow-lg);animation:tin .22s var(--ease);pointer-events:auto;border:1px solid var(--line)}
.ti.out{animation:tout .22s var(--ease) forwards}
.tic svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.tim{flex:1;font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.45}
.tsuc{border-left:3px solid var(--success)}.tsuc .tic svg{stroke:var(--success)}
.terr{border-left:3px solid var(--danger)}.terr .tic svg{stroke:var(--danger)}
.tinf{border-left:3px solid var(--primary)}.tinf .tic svg{stroke:var(--primary)}

/* ── MODALS ──────────────────────────────────────────────────────── */
#mo{display:none;position:fixed;inset:0;background:rgba(27,35,48,.5);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
#mo.on{display:flex}
.mbox{background:var(--surface);border-radius:12px;padding:24px;width:100%;max-width:430px;margin:14px;box-shadow:var(--shadow-lg);animation:moin .18s var(--ease)}
.mbox h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:13px}
.mbox textarea{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:10px 12px;font-size:13.5px;resize:vertical;min-height:84px;font-family:inherit;color:var(--ink);background:var(--surface)}
.mbox textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(55,65,81,.1)}
.macts{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}
#cm{display:none;position:fixed;inset:0;background:rgba(27,35,48,.5);z-index:600;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
#cm.on{display:flex}
.cmbox{background:var(--surface);border-radius:12px;padding:24px;width:100%;max-width:380px;margin:14px;box-shadow:var(--shadow-lg);animation:moin .18s var(--ease)}
.cmbox h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
.cmbox p{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.55}
.cmacts{display:flex;justify-content:flex-end;gap:9px}

/* ── MISC ────────────────────────────────────────────────────────── */
.tm{color:var(--muted);font-size:12px}
.pm{accent-color:var(--primary);width:15px;height:15px;cursor:pointer}
.section-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:10px 0 5px;display:block;border-bottom:1px solid var(--line);margin-bottom:12px}
.noc td{cursor:default}.noc td:hover{background:inherit}

/* ── FORM LIST — breadcrumb / KPIs / filters ─────────────────────── */
.bcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:12px}
.bcrumb span:not(.bcur){cursor:pointer;transition:color .15s}
.bcrumb span:not(.bcur):hover{color:var(--primary)}
.bcrumb .bcur{color:var(--ink);font-weight:600}
.bcrumb svg{width:13px;height:13px;stroke:var(--line-2);fill:none;stroke-width:2}
.dl-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.kpis{display:flex;gap:9px;flex-wrap:wrap}
.kpi{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 15px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer;transition:all .15s var(--ease);min-width:86px;font-family:inherit}
.kpi b{font-size:18px;font-weight:800;line-height:1.05}
.kpi span{font-size:10.5px;color:var(--muted);font-weight:600}
.kpi:hover{border-color:var(--primary);background:var(--primary-50)}
.k-all b{color:var(--ink)}.k-all.on{border-color:var(--primary);background:var(--primary);}.k-all.on b,.k-all.on span{color:#fff}
.k-pend b{color:var(--warning-700)}.k-pend.on{border-color:var(--warning);background:var(--warning-50)}
.k-appr b{color:var(--success-700)}.k-appr.on{border-color:var(--success);background:var(--success-50)}
.k-rej b{color:var(--danger-700)}.k-rej.on{border-color:var(--danger);background:var(--danger-50)}
.fbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:640px){.fbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.fbar{grid-template-columns:1fr}}
.fb-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.fb-f label{font-size:12px;font-weight:600;color:var(--ink)}
.fb-btns{flex-direction:row;align-items:flex-end}
.fb-btns .bn{flex:1;justify-content:center;background:var(--primary);color:#fff;border-color:var(--primary)}
.fb-btns .bn:hover{background:var(--primary-700)}
.ms{position:relative}
.ms-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line-2);border-radius:8px;padding:8.5px 12px;font-size:13px;color:var(--ink);background:var(--surface);cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.ms-btn:hover{border-color:var(--primary)}
.ms.open .ms-btn{border-color:var(--primary);box-shadow:0 0 0 3px rgba(55,65,81,.1)}
.ms-btn svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2.2;flex-shrink:0;transition:transform .2s}
.ms.open .ms-btn svg{transform:rotate(180deg)}
.ms-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-panel{display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:50;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden;min-width:210px}
.ms.open .ms-panel{display:block;animation:fade-up .15s var(--ease)}
.ms-search{padding:8px;border-bottom:1px solid var(--line)}
.ms-search input{width:100%;border:1px solid var(--line-2);border-radius:6px;padding:6px 10px;font-size:12.5px;outline:none;font-family:inherit;background:var(--surface);color:var(--ink)}
.ms-search input:focus{border-color:var(--primary)}
.ms-list{max-height:230px;overflow-y:auto;padding:4px}
.ms-opt{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--ink);transition:background .1s}
.ms-opt:hover{background:var(--primary-50)}
.ms-opt input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.ms-empty{padding:16px;text-align:center;font-size:12px;color:var(--muted)}
.dl-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.dl-tools-l,.dl-tools-r{display:flex;align-items:center;gap:6px}
.dl-tools .bn{padding:4px 9px;font-size:11px;gap:5px}
.dl-tools .bn svg{width:12px;height:12px}
.dl-tools .bgh{padding:4px 7px}
.dl-tools .bgh svg{width:13px;height:13px}
.dl-tools .dl-pp,.dl-tools .bn,.dl-tools .sinpw{height:34px;box-sizing:border-box}
.dl-tools .bn{display:inline-flex;align-items:center;justify-content:center}
.dl-tools .sinpw{border-radius:8px}
.exp-wrap{position:relative;display:inline-flex;align-items:center}
.exp-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:70;background:var(--surface);border:1px solid var(--line-2);border-radius:9px;box-shadow:0 10px 28px rgba(16,24,40,.15);min-width:132px;padding:5px;display:none}
.exp-wrap.open .exp-menu{display:block}
.exp-menu a{display:flex;align-items:center;gap:9px;padding:8px 11px;font-size:12.5px;color:var(--ink);cursor:pointer;border-radius:6px;text-decoration:none}
.exp-menu a:hover{background:var(--primary-50)}
.exp-menu a svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;flex-shrink:0}
select.dl-pp{width:auto;min-width:46px;padding:4px 22px 4px 8px;font-size:11.5px;cursor:pointer;background-position:right 6px center;background-size:11px;color:var(--ink);background-color:var(--surface);border-color:var(--line-2)}
.dl-kv{margin-right:14px}.dl-kv .tm{margin-right:3px}

/* ── Signature-On cell (list) ──────────────────────────────────── */
.sig-on{font-size:11px;line-height:1.35}
.sig-on-l{font-weight:700;display:flex;align-items:center;gap:3px;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px}
.sig-on-r{color:var(--ink);font-weight:600;margin-top:1px}
.sig-on-d{color:var(--muted);font-weight:400;font-size:10px}
.sig-on.ok .sig-on-l{color:var(--success)}
.sig-on.rej .sig-on-l{color:var(--danger)}
.sig-on.wait .sig-on-l{color:#eab308}
.dl-det{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-stack{max-width:280px}.dl-stack .dl-kv{display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45}.dl-stack .dl-kv .tm{margin-right:4px;font-weight:600}
/* ── Users admin: flat, table-aligned with the rest of the app ────── */
.uc-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.uc-toolbar .uc-search{flex:1;min-width:220px;position:relative}
.uc-toolbar .uc-search input{width:100%;padding:8px 12px 8px 32px;border:1px solid var(--line);font-size:13.5px;background:#fff}
.uc-toolbar .uc-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted)}
.uc-toolbar select{padding:8px 10px;border:1px solid var(--line);font-size:13.5px;background:#fff;min-width:170px}
.uc-mono{width:28px;height:28px;background:var(--primary-50);color:var(--primary);font-weight:600;font-size:11px;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.4px;flex-shrink:0}
.uc-main-cell{display:flex;align-items:center;gap:10px}
.uc-name-stack{min-width:0}
.uc-name-stack .uc-name{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-name-stack .uc-un{color:var(--muted);font-size:12px}
.uc-pill{font-size:10.5px;font-weight:700;padding:3px 10px;letter-spacing:.3px;display:inline-flex;align-items:center;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.uc-pill.act{background:var(--success-50);color:var(--success-700)}
.uc-pill.dis{background:var(--danger-50);color:var(--danger-700)}
.uc-pill.adm{background:var(--warning-50);color:#7a3502}
.uc-pill.std{background:var(--brand-50);color:var(--brand-600)}
.uc-act-cell{white-space:nowrap}
.uc-act-cell button{border:none;background:transparent;width:28px;height:28px;cursor:pointer;color:var(--muted);vertical-align:middle}
.uc-act-cell button:hover{background:var(--primary-50);color:var(--primary)}
.uc-act-cell button.uc-del:hover{background:var(--danger-50);color:var(--danger-700)}
.uc-empty{padding:32px;text-align:center;color:var(--muted);font-size:13.5px}
/* Sign types master-detail rows */
.st-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.st-row:hover{background:var(--primary-50)}
.st-row.act{background:var(--primary-50);border-left:3px solid var(--primary);padding-left:11px}
.st-row.act .tm{color:var(--primary-700)}
@media(max-width:880px){.formhdr+div[style*="grid-template-columns:340px"]{grid-template-columns:1fr!important}}
/* User edit — tabs */
.uf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px 0 18px}
.uf-tab{padding:10px 18px;font-size:13.5px;font-weight:600;color:var(--muted);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:7px;margin-bottom:-1px;transition:color .12s,border-color .12s}
.uf-tab:hover{color:var(--ink)}
.uf-tab.act{color:var(--primary);border-bottom-color:var(--primary)}
.uf-tab svg{width:15px;height:15px;stroke-width:1.8}
.uf-pane{display:none}
.uf-pane.act{display:block}
/* Profile vertical label-left rows */
.uf-row{display:flex;align-items:center;gap:14px;padding:7px 0}
.uf-row .uf-l{flex:0 0 130px;text-align:right;font-size:13px;color:var(--primary);font-weight:500}
.uf-row .uf-r{flex:1;min-width:0}
.uf-row .uf-r .wfi,.uf-row .uf-r select{width:100%}
.uf-row .uf-l .req-star{color:var(--danger);margin-left:2px}
/* Hotel Roles table */
.uf-ht{width:100%;border-collapse:collapse}
.uf-ht th{background:var(--primary);color:#fff;font-weight:600;font-size:12.5px;padding:10px 14px;text-align:left}
.uf-ht td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.uf-ht td:first-child{font-weight:600;color:var(--ink)}
.uf-ht td.hr-empty{text-align:center;color:var(--muted);padding:24px}
.uf-ht select{width:100%}
/* Permission matrix */
.uf-pm{width:100%;border-collapse:collapse;font-size:13px}
.uf-pm th{background:var(--primary);color:#fff;font-weight:600;padding:10px 12px;text-align:center;font-size:12px;line-height:1.4;border-right:1px solid rgba(255,255,255,.15);white-space:nowrap}
.uf-pm th:first-child{text-align:left}
.uf-pm th:last-child{border-right:none}
.uf-pm th .pm-ca{display:block;font-weight:400;font-size:10.5px;color:rgba(255,255,255,.85);margin-top:1px;cursor:pointer;text-decoration:underline}
.uf-pm td{padding:8px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center}
.uf-pm td:first-child{text-align:left;font-weight:600;color:var(--ink)}
.uf-pm td:last-child{border-right:none}
.uf-pm td.pm-act a{font-size:11.5px;color:var(--orange);cursor:pointer}
/* Pack chips + cell tri-states */
.uf-ppchip{background:#E6F1FB;color:#0C447C;border:0.5px solid #B5D4F4;padding:5px 10px 5px 11px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.uf-ppchip .x{opacity:.6;cursor:pointer;font-size:14px;font-weight:700}
.uf-ppchip .x:hover{opacity:1;color:#a32d2d}
.uf-cell{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:3px;font-weight:700;font-size:11px;line-height:1}
.uf-cell-off{background:#f5f5f5;color:#888;border:0.5px solid #ddd}
.uf-cell-pack{background:#E6F1FB;color:#185FA5;border:0.5px solid #B5D4F4}
.uf-cell-grant{background:#E1F5EE;color:#085041;border:1.5px solid #1D9E75}
.uf-cell-deny{background:#FCEBEB;color:#791F1F;border:1.5px solid #E24B4A}
.uf-pm td.uf-pm-cell{cursor:pointer;text-align:center;padding:7px 4px}
.uf-pm td.uf-pm-cell:hover .uf-cell{filter:brightness(.96)}
.rtl{direction:rtl;text-align:right}

/* ── FORM FORM — grid + line items ──────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px}
.hform{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 18px;align-items:start}
.hform.hform-col2{grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.hform.hform-col3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hform-col4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hform .hfg-wide{grid-column:1/-1}
/* halfPair — true 50/50 sub-row inside a 3-col grid: a full-width cell that nests its own 2-col grid. */
.hform .hfg-halfpair{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;align-items:start}
.hform .hfg-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:16px 18px;align-items:start}
@media(max-width:768px){.hform .hfg-halfpair,.hform .hfg-row{grid-template-columns:1fr}}
.hform-col3 .hfg-wide2{grid-column:span 2}
/* Legal Case — bilingual grouped detail view (English header bar · Arabic label · value) */
.legal-secs{display:flex;flex-direction:column;gap:14px;margin:0}
.legal-sec{width:100%;border-collapse:collapse;table-layout:fixed}
.legal-sec th{background:var(--primary);color:#fff;font-weight:700;text-align:left;padding:9px 15px 5px;font-size:13px;border:1px solid var(--brand-700);border-bottom:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.legal-sec td{padding:9px 15px;border:1px solid var(--line);font-size:13.5px;vertical-align:top;word-break:break-word;line-height:1.55}
.legal-sec .legal-ar td{background:var(--primary);color:#fff;font-weight:600;border-color:var(--brand-700);border-top:1px solid rgba(255,255,255,.22);padding-top:6px;text-align:left;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.legal-sec .legal-val td{background:var(--surface);color:var(--ink)}
.uniform-tc{display:flex;align-items:baseline;flex-wrap:nowrap;gap:10px;margin-top:10px;padding:11px 18px;background:var(--brand-50);border:1px solid var(--line);border-radius:8px;font-weight:700}
.uniform-tc-l{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px;white-space:nowrap;flex:0 0 auto}
.uniform-tc-v{color:var(--primary);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Uniform Order: the calculated Item Total cell reads as plain text — no background box, no border —
   just a bold right-aligned number. */
.items-tbl input[data-if="item_total"]{text-align:right;font-weight:700;color:var(--ink);background:transparent;border:none;box-shadow:none;font-variant-numeric:tabular-nums}
.items-tbl input[data-if="item_total"].wfi-lock{border:none;background:transparent;color:var(--ink);box-shadow:none}
.items-tbl input[data-if="item_total"]:read-only{background:transparent}
.items-tbl input[data-if="item_total"]::placeholder{color:transparent}
.dp-suba{margin-top:2px;font-size:14px;font-weight:600;color:var(--primary)}
@media(max-width:860px){.hform.hform-col3{grid-template-columns:1fr}}
.hfg-spacer{visibility:hidden}
@media(max-width:900px){.hform.hform-col2{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.hform.hform-col2 .hfg-spacer{display:none}}
.hfg{display:flex;flex-direction:column;gap:6px}
.hfl{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.hfl.req::before{content:'* ';color:var(--red)}
.hfc{min-width:0}
.items-sec{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.items-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:8px}
.items-toolbar .ib{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:5px 13px;border-radius:999px;cursor:pointer;border:1px solid var(--line-2);background:#fff;color:var(--muted);font-family:inherit;transition:color .15s,border-color .15s,background .15s}
.items-toolbar .ib:hover.ib-ghost{color:var(--danger-700);border-color:var(--danger-700);background:#fef3f1}
.items-toolbar .ib svg{flex-shrink:0}
tr.if-empty td{padding:0!important;text-align:center;background:#fafbfc}
.if-empty-cell{padding:8px 0;background:transparent;border:none;text-align:center}
.if-empty-inner{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;width:100%;box-sizing:border-box;padding:22px 24px;font-weight:700;color:var(--primary);background:linear-gradient(90deg,#e8f0fb 0%,#eef4fb 50%,#e8f0fb 100%);border:2px dashed var(--primary);border-radius:8px;letter-spacing:.14em;font-size:16px;text-transform:uppercase}
.if-empty-inner::before,.if-empty-inner::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:.45;max-width:none}
.if-empty-x{position:absolute;right:14px;top:50%;transform:translateY(-50%);flex:0 0 auto;width:30px;height:30px;line-height:1;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:7px;background:var(--danger-50);color:var(--danger);font-size:18px;font-weight:700;cursor:pointer;padding:0;transition:background .15s}
.if-empty-x:hover{background:var(--danger-50)}
/* Detail-view nil bar — self-contained block (not a table-cell), so the dashed frame is clean & continuous across the wide table. */
.det-nil{display:flex;align-items:center;justify-content:center;gap:14px;font-weight:700;color:var(--primary);background:linear-gradient(90deg,#e8f0fb 0%,#eef4fb 50%,#e8f0fb 100%);border:2px dashed var(--primary);border-radius:8px;padding:22px 24px;letter-spacing:.14em;font-size:16px;text-transform:uppercase}
.det-nil::before,.det-nil::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:.45}
@media(max-width:480px){.det-nil{gap:8px;padding:14px 12px;font-size:12.5px;letter-spacing:.06em;flex-wrap:wrap}.det-nil::before,.det-nil::after{display:none}}
/* L4: keep empty-state messages legible on narrow phones (<480px) — the decorative
   side rules + wide letter-spacing can otherwise squeeze the text out of view. */
@media(max-width:480px){.if-empty-cell{font-size:13px;letter-spacing:.06em}.if-empty-inner{gap:8px;padding:16px 12px;flex-wrap:wrap}.if-empty-inner::before,.if-empty-inner::after{display:none}.empty{padding:32px 14px}.empty p{font-size:12px}}
.sec-head{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:12px}
.items-tbl textarea.wfi{min-width:180px;resize:vertical;line-height:1.35;font-family:inherit}
.wfi-lock{background:#dce1e8;color:#2f3947;cursor:not-allowed;border:1px dashed #aab4c2;caret-color:transparent;user-select:none;-webkit-user-select:none}
.wfi-lock::selection{background:transparent}
.items-tbl .sec-dt{width:350px;min-width:350px;max-width:350px}
.items-tbl th.sec-dth{width:360px}
.dptime{display:flex;align-items:center;gap:10px;padding:10px 2px 2px;margin-top:8px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.dptime input[type=time]{flex:1;padding:7px 10px;border:1px solid var(--line);border-radius:7px;font-size:15px;color:var(--ink)}
.items-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.items-title{font-size:13px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.6px}
.items-add{padding:6px 13px;font-size:12px}
.items-tbl{width:100%;border-collapse:collapse;counter-reset:itrow}
.items-tbl.gift-mode th[data-k="date_found"],.items-tbl.gift-mode th[data-k="location_found"],.items-tbl.gift-mode td:has(input[data-if="date_found"]),.items-tbl.gift-mode td:has(input[data-if="location_found"]){display:none}
.items-tbl.uni-linen th[data-k="department"],.items-tbl.uni-linen th[data-k="position"],.items-tbl.uni-linen th[data-k="gender"],.items-tbl.uni-linen td:has(input[data-if="department"]),.items-tbl.uni-linen td:has(input[data-if="position"]),.items-tbl.uni-linen td:has(input[data-if="gender"]){display:none}
/* Type=Linen: clothing sizes (38–60, S–XXXL) don't apply to linen — hide every sz_* column, keep Linen + Others. */
.items-tbl.uni-linen th[data-k^="sz_"],.items-tbl.uni-linen td:has(input[data-if^="sz_"]){display:none}
.items-tbl.lost-mode th[data-k="room_no"],.items-tbl.lost-mode td:has(input[data-if="room_no"]){display:none}
.items-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--rad-card);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.items-tbl tbody tr{counter-increment:itrow}
.items-tbl .if-n{width:34px;text-align:center}
.items-tbl tbody .if-n{color:var(--muted);font-size:12px}
.items-tbl tbody .if-n::before{content:counter(itrow)}
.items-tbl thead th{font-size:12.5px;font-weight:600;color:#fff;padding:10px 12px;text-align:left;background:var(--primary);white-space:nowrap;vertical-align:middle;line-height:1.3;height:42px}
.items-tbl tbody td{padding:8px 14px;vertical-align:middle;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink)}
.items-tbl tbody tr:last-child td{border-bottom:none}
.items-tbl input[type="number"].wfi{width:120px}
/* Uniform Order: the size / linen / others cells are small quantity counts — make them compact (was 120px
   each → ~2160px of size columns). Narrow centred inputs so the whole table fits far better. */
.items-tbl input[data-if^="sz_"].wfi,.items-tbl input[data-if="linen"].wfi,.items-tbl input[data-if="others"].wfi{width:46px;min-width:46px;padding:7px 3px;text-align:center}
.items-tbl th[data-k^="sz_"],.items-tbl th[data-k="linen"],.items-tbl th[data-k="others"]{text-align:center}
.items-tbl .wfi{padding:7px 10px;font-size:12.5px}
.items-tbl .if-x{width:44px;text-align:center}
.if-addrow{background:#fff;border:none;cursor:pointer;color:var(--primary);padding:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px}
.if-addrow:hover{background:#eef0f3}
.if-addrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:3}
.items-tbl .if-att{min-width:210px}
.if-file{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;font-size:12px;background:var(--surface);color:var(--ink);font-family:inherit}
.if-file::-webkit-file-upload-button{margin-right:9px;border:1px solid var(--line-2);background:var(--bg);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--ink)}
.if-file-chip{margin-top:0}
.if-file-row{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 6px 5px 5px;border:1px solid var(--primary);background:var(--primary-50,#eef2ff);border-radius:8px;font-size:12.5px;color:var(--ink)}
.if-file-thumb{width:30px;height:30px;object-fit:cover;border-radius:5px;border:1px solid var(--line-2);background:var(--bg);flex:0 0 30px}
.if-file-icon{width:22px;height:22px;flex:0 0 22px;stroke:var(--primary);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.if-file-name{font-weight:600;color:var(--primary-700,var(--primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.if-file-x{border:0;background:transparent;color:var(--danger,#dc2626);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;border-radius:4px}
.if-file-x:hover{background:rgba(220,38,38,.08)}
.iv-att-files-edit{margin-bottom:6px}
.row-trash{width:30px;height:30px;border:none;background:var(--danger-50);color:var(--danger);border-radius:7px;cursor:pointer;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.row-trash:hover{background:var(--danger-50)}
.save-bar{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.formpaper{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);box-shadow:var(--shadow);padding:20px 24px;margin-bottom:14px}
.dp-grid{display:grid;grid-template-columns:0.9fr 1.5fr auto;gap:22px;align-items:center}
.dp-main{text-align:left}
.dp-brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left}
.dp-emblem{width:46px;height:46px;stroke:var(--primary);fill:none;stroke-width:1.6;opacity:.85;display:none}
.dp-logo{max-height:170px;max-width:400px;width:auto;height:auto;object-fit:contain}
.dp-mono{display:none;flex-direction:column;align-items:center;gap:7px}
.dp-mono-b{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#3a4554);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:21px;letter-spacing:1px;box-shadow:0 6px 16px -7px rgba(16,24,40,.45)}
.dp-mono-n{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.4px;text-align:center;max-width:150px}
.dp-hotel{font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:700;color:var(--ink);line-height:1.25}
.dp-title{font-size:23px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:13px;margin-bottom:14px;flex-wrap:wrap;letter-spacing:-.3px}
.dp-title .sbg{font-size:11px;padding:4px 11px}
.dp-meta{font-size:13px;line-height:1.4}
.dp-meta>div{display:flex;flex-wrap:nowrap;gap:6px;align-items:baseline;padding:4px 0}
.dp-l{color:var(--muted);font-weight:600;white-space:nowrap;flex-shrink:0}
.dfield .dp-l,.dp-meta .dp-l{font-size:13px}
.dp-v{color:var(--ink);font-weight:600;min-width:0;word-break:break-word}
.dfield .dp-v,.dp-meta .dp-v{font-size:14px}
.dp-qr img{display:block;width:92px;height:92px;margin:0 auto}
.dp-qr-box{display:inline-block}
.dp-qr-cap{margin-top:5px;font-size:11px;font-weight:600;color:var(--muted);text-align:center;letter-spacing:.02em;white-space:nowrap}
.dfields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.dfield{display:flex;flex-wrap:nowrap;gap:6px;font-size:13.5px;min-width:0;align-items:baseline;padding:9px 2px;border-bottom:1px solid var(--line)}
.dfields-wrap{padding:14px 18px;position:relative}
/* complaint detail — grouped sections */
.cd-sec{margin:0 0 20px}
.cd-sec:last-child{margin-bottom:0}
.cd-sh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--primary);padding:7px 12px;margin-bottom:12px;background:var(--brand-50,#eef0f3);border-left:3px solid var(--primary);border-radius:0 6px 6px 0}
.cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 28px}
.cd-f{display:flex;flex-direction:column;gap:3px;min-width:0;padding:7px 10px;background:#fafbfc;border:1px solid var(--line);border-radius:7px}
.cd-fl{font-size:12px;font-weight:600;color:var(--muted,#6b7280)}
.cd-fv{font-size:14px;color:var(--ink);font-weight:500;word-break:break-word}
.cd-block{margin-top:12px}
.cd-grid .cd-block{margin-top:0}
.cd-block .cd-fl{margin-bottom:5px}
.cd-bv{font-size:14px;line-height:1.6;color:var(--ink);white-space:pre-wrap;word-break:break-word;background:#fafbfc;border:1px solid var(--line);border-radius:8px;padding:11px 13px;min-height:38px}
/* Incident Report VIEW reuses the SAME chrome as the create/edit form — the global
   .form-section-banner (solid --primary bar, white centred title) renders the section headers, so the
   view and creation pages share one visual language. Only the field grid + inline file badges below
   are detail-specific. */
/* Attachments in the detail view render as clean file CHIPS: a 34px thumbnail/colored-type icon on
   the left + the filename, in a bordered pill. One consistent shape for images, video and PDFs. */
.ir-dossier .dfield-att{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.ir-att-chip{display:inline-flex;align-items:center;gap:9px;max-width:260px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:9px;background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .12s,box-shadow .12s,transform .12s}
.ir-att-chip:hover{border-color:var(--brand-400);box-shadow:var(--shadow);transform:translateY(-1px)}
.ir-att-chip .ir-chip-thumb{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:0 0 auto;display:block;background:var(--bg)}
.ir-att-chip .ir-chip-ico{width:34px;height:34px;border-radius:6px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;letter-spacing:.3px;font-family:var(--font-mono,monospace)}
.ir-att-chip .ir-chip-play{font-size:14px;line-height:1}
.ir-att-chip .ir-chip-name{font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Long labels (e.g. "Compensation Provided to Guest (In-House)…") were squeezing the value to ~1ch
   wide, breaking it one letter per line. Allow the value to wrap to its own line as a block. */
.ir-dossier .dfield{flex-wrap:wrap;align-items:baseline}
.ir-dossier .dp-l{flex:0 1 auto}
.ir-dossier .dp-v{flex:1 1 auto;min-width:40%;word-break:normal;overflow-wrap:anywhere}
/* Attachment fields (CCTV / Section-4 docs) have short Yes/No/In-Progress values — keep them on the
   SAME line as the label (the value below is the icon). Don't apply the long-value wrap here. */
.ir-dossier .dfield-att-host .dfield-line{flex-wrap:wrap;align-items:baseline}
.ir-dossier .dfield-att-host .dfield-line .dp-l{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.ir-dossier .dfield-att-host .dfield-line .dp-v{flex:0 0 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
/* incident_report detail: 3-column field grid + inline file-type icon badges under attachment fields. */
.dfields-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
.dfield-att-host{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
.dfield-att-host .dfield-line{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.dfield-att{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.dfield-att:empty{display:none;margin:0}
/* Orphan-attachment catch-all group: collapse entirely unless at least one of its slots has files. */
.ir-orphan-grp:not(:has(.dfield-att:not(:empty))){display:none}
.dfield-att .ftb{max-width:46px}
.dfield-att .ftb-name{display:none}
.dfi{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:5px;border:1px solid var(--line);overflow:hidden;cursor:pointer;text-decoration:none;background:var(--bg);transition:border-color .12s,transform .12s}
.dfi:hover{border-color:var(--primary);transform:translateY(-1px)}
.dfi-img img{width:100%;height:100%;object-fit:cover;display:block}
.dfi-vid{flex-direction:column;gap:1px;background:#1f2937;color:#fff;border-color:#1f2937}
.dfi-vid .dfi-play{font-size:13px;line-height:1}
.dfi-vid .dfi-ext{font-size:8px;font-weight:700;color:rgba(255,255,255,.85)}
@media(max-width:760px){.dfields-3{grid-template-columns:1fr}}
.df-bar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.wf-foot{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:12px;color:var(--muted,#64748b);text-align:center;padding:16px 16px 20px;line-height:1.6;border-top:1px solid var(--line,#e5e7eb);margin-top:24px;background:transparent;letter-spacing:.2px}
.wf-foot-brand{font-weight:600;color:var(--ink,#1f2937)}
.wf-foot a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.wf-foot a:hover{color:var(--primary,var(--ink))}
.wf-foot-login{position:absolute;left:0;right:0;bottom:0;border-top:0;padding:18px 16px;color:#64748b;background:transparent}
.wf-foot-login a{color:inherit}
.wf-foot-login a:hover{color:#0f4c5c}
@media print{.wf-foot{display:none}}
.dl-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;border-radius:18px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .12s,border-color .12s}
.dl-chip:hover{background:var(--info-50);border-color:#93c5fd}
.dl-chip svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-chip.appr{background:var(--success-50);color:var(--success-700);border-color:var(--success-50)}
.dl-chip.appr:hover{background:var(--success-50)}
.dl-chip.rejd{background:var(--danger-50);color:#7f1d1d;border-color:var(--danger-50)}
.dl-chip.rejd:hover{background:var(--danger-50)}
.dl-chip.pend{background:var(--warning-50);color:#713f0a;border-color:#fde68a}
.dl-chip.pend:hover{background:#fde68a}
.dl-action-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:background .15s,box-shadow .15s,transform .05s}
.dl-action-btn:hover{background:#0f1b2d;box-shadow:0 4px 10px rgba(0,0,0,.22)}
.dl-action-btn:active{transform:translateY(1px)}
.dl-action-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media print{.dl-action-btn,.df-bar{display:none!important}}
.dlm-modal{max-width:900px}
.dlp-modal{max-width:520px}
.dlp-list{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.dlp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .12s,background .12s}
.dlp-row:hover{border-color:var(--primary);background:#f8fafc}
.dlp-l{display:flex;align-items:center;gap:12px;min-width:0}
.dlp-l svg{width:20px;height:20px;stroke:var(--primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dlp-ref{font-weight:700;color:var(--ink);font-size:13.5px;letter-spacing:.4px}
.dlp-dt{font-size:11.5px;font-family:var(--font-mono,monospace);margin-top:2px}
.dlp-foot{display:flex;justify-content:space-between;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.dlm-modal .act-body{flex:1 1 auto;min-height:0}
.dlm-hint{margin:0 2px 12px}
.dlm-scroll{overflow:auto}
.dlm-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:580px;font-family:inherit}
.dlm-tbl th{text-align:left;font-weight:600;color:#fff;font-size:12.5px;letter-spacing:normal;text-transform:none;padding:10px 14px;background:var(--primary);white-space:nowrap;border-right:1px solid rgba(255,255,255,.15)}
.dlm-tbl th:last-child{border-right:none}
.dlm-tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px;color:var(--ink)}
.dlm-tbl tbody tr:last-child td{border-bottom:0}
.dlm-tbl tr.off td{opacity:.45}
.dlm-ck-c{width:34px;text-align:center}
.dlm-ck,.dlm-all{width:16px;height:16px;cursor:pointer;accent-color:var(--primary)}
.dlm-desc{min-width:160px}
.dlm-qty{white-space:nowrap;color:var(--muted)}
.dlm-tbl .wfi{padding:6px 8px;font-size:13px;width:100%}
.dlm-tbl td:nth-child(4){width:108px}
.dlm-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.dlm-sub{color:var(--muted);font-size:11px;font-weight:400}
.iv-recv-full,.iv-recv-part,.iv-recv-none{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:15px;font-weight:600;letter-spacing:.2px;font-variant-numeric:tabular-nums}
.iv-recv-full{color:var(--success-700);font-weight:700}
.iv-recv-part{color:var(--ink)}
.iv-recv-none{color:var(--ink)}
.iv-recv-full .tm,.iv-recv-part .tm,.iv-recv-none .tm{font-family:inherit;font-size:15px;font-weight:500;color:var(--muted);opacity:.85;margin:0 2px}
.iv-recv-tick{color:var(--success-700);font-weight:700;font-size:16px;margin-left:4px}
.formhdr{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.formhdr-l{display:flex;align-items:center;gap:2px;min-width:0}
.formhdr-t{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:21px;font-weight:600;color:var(--ink);margin:0;white-space:nowrap;letter-spacing:-.3px;line-height:1.1;display:flex;align-items:center}
.formmenu-wrap{position:relative}
.dots{background:none;border:none;cursor:pointer;color:var(--muted);padding:4px 6px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.dots:hover{background:var(--primary-50);color:var(--ink)}
.dots svg{width:22px;height:22px;display:block}
.formmenu{position:absolute;top:calc(100% + 5px);left:0;z-index:70;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 10px 28px rgba(16,24,40,.15);min-width:194px;padding:5px;display:none;transform-origin:top left}
.formmenu-wrap.open .formmenu{display:block;animation:dmIn .13s var(--ease)}
@keyframes dmIn{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
.dm-i{display:flex;align-items:center;gap:9px;padding:7px 10px;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;border-radius:7px;white-space:nowrap;text-decoration:none;transition:background .12s,color .12s}
.dm-i:hover{background:var(--primary-50);color:var(--primary-700)}
.dm-i:hover svg{stroke:var(--orange)}
.dm-i svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.9;flex-shrink:0;transition:stroke .12s}
.dm-reopen:hover{background:var(--warning-50)}
.dm-reopen:hover svg{stroke:var(--orange)}
.dm-sep{height:1px;background:var(--line);margin:4px 8px}
.crumb{font-size:12.5px;color:var(--muted);white-space:nowrap}
.crumb a{color:var(--orange);cursor:pointer;text-decoration:none;transition:color .12s}
.crumb a:hover{color:var(--orange);text-decoration:none}
.act-ov{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:56px 16px;overflow:auto}
.act-modal{background:var(--surface);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:840px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
.act-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.act-head h3{font-size:15px;font-weight:800;color:var(--ink);margin:0}
.act-x{background:none;border:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.act-x:hover{color:var(--ink)}
.act-body{overflow:auto;padding:8px}
@media print{.formhdr,.act-ov{display:none!important}}
@media(max-width:760px){.dp-grid{grid-template-columns:1fr;text-align:center}.dp-meta span{min-width:0}.dfields{grid-template-columns:1fr}}

/* ── FORM DETAIL — hero + signers + items ──────────────────────── */
.dhero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);padding:18px 20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.03);border-top:3px solid var(--primary)}
.dhero-eyebrow{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.dhero h1{font-size:22px;font-weight:800;color:var(--ink);margin:4px 0 9px;letter-spacing:-.3px}
.dhero-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--ink)}
.dhero-meta b{color:var(--muted);font-weight:600}
.sgwrap{padding:2px 0}
.sgrow{display:flex;align-items:center;gap:13px;padding:12px 18px;border-bottom:1px solid var(--line)}
.sgrow:last-child{border-bottom:none}
.sgdot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;border:2px solid var(--line-2);color:var(--muted);background:var(--bg)}
.sgrow.done .sgdot{background:var(--success);border-color:var(--success);color:#fff}
.sgrow.rej .sgdot{background:var(--danger);border-color:var(--danger);color:#fff}
.sgrow.cur .sgdot{border-color:var(--orange);color:var(--orange);background:var(--warning-50);box-shadow:0 0 0 3px rgba(245,132,66,.15)}
.sginfo{flex:1;min-width:0}
.sgrole{font-weight:700;color:var(--ink);font-size:13.5px}
.sgmeta{font-size:12px;color:var(--muted);margin-top:1px}
.sgstamp{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 10px;border-radius:999px;flex-shrink:0}
.sgstamp.ok{background:var(--success-50);color:var(--success-700)}
.sgstamp.rej{background:var(--danger-50);color:var(--danger-700)}
.sgstamp.pend{background:var(--primary-50);color:var(--muted)}
.sgstamp.cur{background:var(--warning-50);color:var(--orange)}
.sgcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:12px;padding:16px}
.sg-actions{display:flex;gap:9px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.sgcard{border:1px solid var(--line-2);border-radius:10px;padding:11px 12px;background:var(--surface);display:flex;flex-direction:column;gap:9px}
.sgcard.done{border-color:var(--success-50);background:#f6fef9}
.sgcard.rej{border-color:var(--danger-50);background:#fef6f6}
.sgcard.cur{border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,132,66,.12)}
.sgcard-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sgcard-role{font-weight:700;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgcard-body{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);padding:10px 0}
.sgsig{width:38px;height:38px;border-radius:50%;background:var(--success);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800}
.sgsig.rej{background:var(--danger)}
.sgsigline{width:78%;border-bottom:1.5px solid var(--line-2);height:18px}
.sgsigner{font-size:12px;font-weight:600;color:var(--ink);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgsigner.muted{font-weight:500;color:var(--muted)}
.sgcard-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px}
.sgstep{display:flex;align-items:flex-start;padding:22px 14px 10px;overflow-x:auto;gap:0}
.stp{flex:1 0 0;min-width:118px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:0 4px}
.stp:not(:first-child)::before{content:'';position:absolute;top:19px;right:50%;width:100%;height:2px;background:var(--line-2);z-index:0}
.stp.done::before,.stp.cur::before,.stp.rej::before{background:var(--success)}
.stp.rej::before{background:var(--danger)}
.stp-dot{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;background:var(--surface);border:2px solid var(--line-2);color:var(--muted)}
.stp.done .stp-dot{background:var(--success);border-color:var(--success);color:#fff}
.stp.rej .stp-dot{background:var(--danger);border-color:var(--danger);color:#fff}
.stp.cur .stp-dot{background:var(--info);border-color:var(--info);color:#fff}
.stp-role{font-size:11.5px;font-weight:700;color:var(--ink);margin-top:8px;line-height:1.25}
.stp-name{font-size:11px;color:var(--muted);margin-top:2px}
.stp-date{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap}
.stp.cur .stp-date{color:var(--info);font-weight:700}
.stp.rej .stp-date{color:var(--danger)}
.sgcards2{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:13px;padding:6px 16px 18px}
.sgcard2{border:1px solid var(--line-2);border-radius:9px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.sgcard2.cur{border-color:var(--info);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.sgcard2-hd{background:var(--primary);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.2px;padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:37px;line-height:1.2}
.sgcard2-bd{padding:16px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:104px}
.stamp{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:20px;background:var(--success-700);color:#fff;font-weight:700;font-size:12px;letter-spacing:1.5px;font-family:inherit;text-transform:uppercase}
.stamp .bar{display:none}
.stamp svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.stamp.rej{background:var(--danger-700)}
.stamp.bk{background:var(--warning)}
.sgc-name{font-size:12.5px;font-weight:700;color:var(--ink);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sgc-name.muted{font-weight:500;color:var(--muted)}
.sgc-date{font-size:11px;color:var(--muted)}
.sgc-line{width:78%;border-bottom:1.5px dashed var(--line-2);height:14px}
.sgc-acts{display:flex;gap:10px}
.sgc-act{width:46px;height:46px;border:none;background:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s}
.sgc-act:hover{transform:scale(1.15)}
.sgc-act:active{transform:scale(1)}
.sgc-act svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sgc-act.ok{color:var(--success)}
.sgc-act.rej{color:var(--danger)}
.sgc-act.bk{color:var(--orange)}
.sgc-ic{background:none;border:none;color:rgba(255,255,255,.75);cursor:pointer;padding:0;display:flex}
.sgc-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.sgc-ic:hover{color:#fff}
@media print{.sgc-acts,.sgc-ic{display:none!important}}
.sgunsign{background:none;border:1px solid var(--line-2);color:var(--orange-d);border-radius:6px;padding:4px 9px;font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0;font-family:inherit;transition:all .15s}
.sgunsign:hover{background:var(--warning-50);border-color:var(--orange)}
.iv-wrap{border:1px solid var(--line);border-radius:10px;overflow:auto}
.iv-tbl{width:100%;border-collapse:collapse;font-size:15px}
.iv-cell-editable{background:#fff8e6}
/* Discrepancy Income Auditor pair (Housekeeping Report vs Front Office PMS) — the compare zone. */
.iv-tbl td[data-k="housekeeping_report"],.iv-tbl td[data-k="front_office_pms"]{background:#fff7e0;text-align:center}
.iv-tbl th[data-k="housekeeping_report"],.iv-tbl th[data-k="front_office_pms"]{text-align:center}
.items-tbl td:has(input[data-if="housekeeping_report"]),.items-tbl td:has(input[data-if="front_office_pms"]){background:#fff7e0}
.items-tbl input[data-if="housekeeping_report"],.items-tbl input[data-if="front_office_pms"]{text-align:center;font-weight:600;color:#7c5a14;border-color:#e0c878}
.items-tbl input[data-if="housekeeping_report"]:focus{border-color:#a37a17;box-shadow:0 0 0 3px rgba(163,122,23,.12)}
/* Room-change cell tints: Old (what they moved from) = soft red; New (PMS-filled, what they moved to) = soft green. */
.iv-tbl td[data-k="old_room"],.iv-tbl td[data-k="old_room_type"]{background:#fdebe9}
.iv-tbl td[data-k="new_room"],.iv-tbl td[data-k="current_room_type"]{background:var(--success-50)}
.items-tbl td:has(input[data-if="old_room"]),.items-tbl td:has([data-if="old_room_type"]){background:#fdebe9}
.items-tbl td:has(input[data-if="new_room"]),.items-tbl td:has(input[data-if="current_room_type"]){background:var(--success-50)}
.items-tbl input[data-if="old_room"],.items-tbl [data-if="old_room_type"] .ssel-btn{border-color:#e9a5a0;color:#7c2d22;font-weight:600}
.items-tbl input[data-if="old_room"]:focus,.items-tbl [data-if="old_room_type"] .ssel-btn:focus{border-color:var(--danger-700);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.items-tbl input[data-if="new_room"],.items-tbl input[data-if="current_room_type"]{border-color:var(--success);color:var(--success-700);font-weight:600}
.items-tbl input[data-if="new_room"]:focus,.items-tbl input[data-if="current_room_type"]:focus{border-color:var(--success-700);box-shadow:0 0 0 3px rgba(31,91,53,.12)}
.items-tbl input[data-if="new_room"].wfi-lock,.items-tbl input[data-if="current_room_type"].wfi-lock{color:var(--success-700);background:#f0f9f3}
/* Role-tinted cells: Front Office = blue, Housekeeping = green, PMS Actual = brown. */
.iv-tbl td[data-k="fo_check"],.iv-tbl td[data-k="fo_comment"]{background:#eef4fb}
.iv-tbl td[data-k="hk_check"],.iv-tbl td[data-k="hk_comment"]{background:var(--success-50)}
.iv-tbl th[data-k="fo_check"],.iv-tbl th[data-k="fo_comment"],.iv-tbl th[data-k="hk_check"],.iv-tbl th[data-k="hk_comment"]{color:#fff!important}
.iv-tbl td[data-k="fo_check"] .iv-cell-edit,.iv-tbl td[data-k="fo_comment"] .iv-cell-edit{background:#fff;color:#1e3a5f;border-color:#a3c4e3;font-weight:600}
.iv-tbl td[data-k="fo_check"] .iv-cell-edit:focus,.iv-tbl td[data-k="fo_comment"] .iv-cell-edit:focus{border-color:#1e3a5f;box-shadow:0 0 0 3px rgba(30,58,95,.12)}
.iv-tbl td[data-k="hk_check"] .iv-cell-edit,.iv-tbl td[data-k="hk_comment"] .iv-cell-edit{background:#fff;color:var(--success-700);border-color:var(--success);font-weight:600}
.iv-tbl td[data-k="hk_check"] .iv-cell-edit:focus,.iv-tbl td[data-k="hk_comment"] .iv-cell-edit:focus{border-color:var(--success-700);box-shadow:0 0 0 3px rgba(31,91,53,.12)}
.items-tbl input[data-if="fo_check"],.items-tbl input[data-if="fo_comment"]{color:#1e3a5f;border-color:#a3c4e3}
.items-tbl input[data-if="hk_check"],.items-tbl input[data-if="hk_comment"]{color:var(--success-700);border-color:var(--success)}
.pms-chip{display:block;width:100%;box-sizing:border-box;padding:7px 12px;border:1px solid var(--line-2,#d6dbe1);border-radius:6px;background:#fff;font-size:12.5px;line-height:1.4;text-align:center;font-weight:600;color:var(--primary)}
.pms-chip-empty{background:#fff;border-style:dashed;border-color:var(--line-2,#d6dbe1);min-height:32px}
/* Per-column center alignment. */
.iv-tbl th[data-k="no_pax"],.iv-tbl td[data-k="no_pax"],
.iv-tbl th[data-k="fo_check"],.iv-tbl td[data-k="fo_check"],
.iv-tbl th[data-k="hk_check"],.iv-tbl td[data-k="hk_check"]{text-align:center}
.items-tbl input[data-if="no_pax"],
.items-tbl input[data-if="fo_check"],
.items-tbl input[data-if="hk_check"]{text-align:center}
.iv-tbl td[data-k="fo_check"] .iv-cell-edit,
.iv-tbl td[data-k="hk_check"] .iv-cell-edit,
.iv-tbl td[data-k="no_pax"] .iv-cell-edit{text-align:center}
/* Grid lines on EVERY column (between cells), with thicker dividers at section boundaries. */
.iv-tbl th,.iv-tbl td,.items-tbl th,.items-tbl td{border-right:1px solid rgba(255,255,255,.18)}
.iv-tbl tbody td,.items-tbl tbody td{border-right:1px solid var(--line,#e9ecef)}
.iv-tbl tbody tr:last-child td,.iv-tbl thead tr:last-child th{border-right-width:1px}
.iv-tbl th:last-child,.iv-tbl td:last-child,.items-tbl th:last-child,.items-tbl td:last-child{border-right:0}
/* Section dividers: a vertical line at the START and END of each group column. */
.iv-tbl th.ig-cell-l,.iv-tbl td.ig-cell-l,
.items-tbl th.ig-cell-l,.items-tbl td.ig-cell-l{border-left:2px solid rgba(255,255,255,.35)}
.iv-tbl th.ig-cell-r,.iv-tbl td.ig-cell-r,
.items-tbl th.ig-cell-r,.items-tbl td.ig-cell-r{border-right:2px solid rgba(255,255,255,.35)}
.iv-tbl tbody td.ig-cell-l,.items-tbl tbody td.ig-cell-l{border-left:2px solid var(--line-2,#d6dbe1)}
.iv-tbl tbody td.ig-cell-r,.items-tbl tbody td.ig-cell-r{border-right:2px solid var(--line-2,#d6dbe1)}
/* Two-row table head: grouped cols get a centered banner above their sub-headers; ungrouped cols rowspan=2. */
.iv-tbl thead tr:first-child th.ig-banner,.items-tbl thead tr:first-child th.ig-banner{text-align:center;font-weight:800;letter-spacing:.3px;border-bottom:1px solid rgba(255,255,255,.25)}
.iv-tbl thead tr:nth-child(2) th,.items-tbl thead tr:nth-child(2) th{font-weight:600;font-size:12.5px;color:#fff}
.iv-cell-edit{width:100%;box-sizing:border-box;padding:7px 12px;font-size:12.5px;line-height:1.4;border:1px solid var(--line-2);border-radius:6px;background:#fff;font-family:inherit;color:var(--ink)}
.iv-cell-edit:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(55,65,81,.1)}
.iv-cell-edit::placeholder{color:var(--muted);font-weight:400;font-style:italic;opacity:.8}
.iv-empty{color:var(--line-2);user-select:none}
.iv-cell-edit.iv-cell-saved{border-color:#1d9e75;box-shadow:0 0 0 3px rgba(29,158,117,.15)}
.iv-tbl thead th{font-size:12.5px;font-weight:600;color:#fff;text-align:left;padding:10px 12px;background:var(--primary);white-space:nowrap;vertical-align:middle;line-height:1.3;height:42px;letter-spacing:.1px}
.iv-tbl thead th.iv-n{width:30px;text-align:center}
.iv-tbl thead th.iv-num{text-align:left}
.iv-tbl tbody td{padding:8px 12px;color:var(--ink);border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:13px;font-weight:500}
.iv-tbl th[data-k="booked_room_type"],.iv-tbl td[data-k="booked_room_type"],
.iv-tbl th[data-k="room_type"],.iv-tbl td[data-k="room_type"],
.iv-tbl th[data-k="current_room_type"],.iv-tbl td[data-k="current_room_type"],
.iv-tbl th[data-k="old_room_type"],.iv-tbl td[data-k="old_room_type"],
.iv-tbl th[data-k="new_room_type"],.iv-tbl td[data-k="new_room_type"]{min-width:180px}
.iv-tbl tbody tr:nth-child(even){background:var(--card2)}
.iv-tbl tbody tr:last-child td{border-bottom:none}
.iv-tbl tbody tr:hover{background:var(--primary-50)}
.iv-tbl td.iv-num{text-align:left;font-variant-numeric:tabular-nums}
.iv-tbl td.iv-n{text-align:center;color:var(--muted);width:30px}
.iv-yn{display:inline-block;padding:2px 10px;border-radius:11px;font-size:11px;font-weight:600;line-height:1.55}
.iv-yn.y{background:rgba(22,163,74,.13);color:var(--success)}
.iv-yn.n{background:var(--line);color:var(--muted)}
.iv-att-link{color:var(--primary);cursor:pointer;text-decoration:underline;font-size:12.5px;margin-right:8px}
/* File-type badge for non-image attachments — replaces the plain "View" link with a
   colored file-shape SVG, extension label, and truncated filename. */
.ftb{display:inline-flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;text-decoration:none;color:inherit;max-width:80px}
.ftb-ico{position:relative;width:38px;height:46px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;border-radius:4px;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;font-family:var(--font-mono,monospace);transition:transform .12s}
.ftb:hover .ftb-ico{transform:translateY(-1px)}
.ftb-ico::before{content:'';position:absolute;top:0;right:0;width:11px;height:11px;background:linear-gradient(225deg,rgba(255,255,255,.7) 50%,transparent 50%);border-bottom-left-radius:2px}
.ftb-name{font-size:10.5px;color:var(--ink);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.ftb-pdf{background:#dc2626}
.ftb-doc{background:#2563eb}
.ftb-xls{background:#16a34a}
.ftb-ppt{background:#ea580c}
.ftb-msg{background:#0d9488}
.ftb-zip{background:#7c3aed}
.ftb-txt{background:#64748b}
.ftb-gen{background:#475569}
/* Inline variants for the bottom Attachments list — compact, no filename under the icon. */
.att-thumb{width:34px;height:34px;flex:0 0 34px}
.att-ftb{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;margin-right:0}
.att-ftb .ftb-ico{width:28px;height:34px;font-size:8.5px;padding-bottom:4px}
.iv-att-c{vertical-align:middle}
.iv-att-stack{display:flex;flex-direction:column;align-items:center;gap:6px}
.iv-att-files{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.iv-att-w{position:relative;display:inline-block;line-height:0}
.iv-att-del{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:7px;border:1.5px solid #fff;background:var(--danger-50,#fef2f2);color:var(--danger,#dc2626);font-size:15px;line-height:1;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:1}
.iv-att-w:hover .iv-att-del,.iv-att-del:focus{opacity:1}
.iv-att-add{display:inline-flex;align-items:center;gap:4px;border:1px dashed var(--primary);background:transparent;color:var(--primary-700,var(--primary));font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;letter-spacing:.3px;line-height:1;transition:background .12s,color .12s,border-color .12s}
.iv-att-add:hover{background:var(--primary);color:#fff;border-style:solid;border-color:var(--primary)}
/* Supplier Approval — 3 doc cells: consistent width + solid-by-default Attach so all three look identical */
.items-tbl td:has(input.sup-doc-file){min-width:128px;padding:8px 10px}
.items-tbl td:has(input.sup-doc-file) .iv-att-stack{align-items:center;justify-content:center;min-height:34px}
.items-tbl td:has(input.sup-doc-file) .iv-att-add{min-width:96px;justify-content:center;padding:6px 12px}
.items-tbl td:has(input.sup-doc-file) .if-file-chip{max-width:140px}
.iv-att-add:disabled{opacity:.6;cursor:wait}
.iv-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--line-2);cursor:zoom-in;background:var(--bg);vertical-align:middle;display:inline-block;margin:2px 4px 2px 0}
.lbov{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}
.lbbox{position:relative;display:inline-block;cursor:default}
.lbimg{max-width:750px;max-height:563px;display:block;box-shadow:0 12px 40px rgba(0,0,0,.5);border-radius:6px;background:#fff}
.lbfloat{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:10000}
.lbfbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;border:1px solid var(--primary);cursor:pointer;text-decoration:none;transition:background .15s,transform .15s,opacity .15s}
.lbfbtn:hover{opacity:.85;transform:scale(1.05)}
.lbfbtn svg{stroke:currentColor}
.lbdl:hover{background:var(--primary);color:#fff}
.sgtl{position:relative;padding:2px 0}
.sgtl-row{display:flex;gap:14px;position:relative;padding-bottom:20px}
.sgtl-row:last-child{padding-bottom:0}
.sgtl-row:not(:last-child)::before{content:'';position:absolute;left:16px;top:36px;bottom:-2px;width:2px;background:var(--line)}
.sgtl-mark{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;z-index:1;border:2px solid var(--line);background:var(--surface);color:var(--muted)}
.sgtl-row.done .sgtl-mark{background:var(--success);border-color:var(--success);color:#fff}
.sgtl-row.rej .sgtl-mark{background:var(--danger);border-color:var(--danger);color:#fff}
.sgtl-row.cur .sgtl-mark{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 4px var(--primary-50)}
.sgtl-body{flex:1;min-width:0;padding-top:5px}
.sgtl-role{font-size:14px;font-weight:600;color:var(--ink)}
.sgtl-status{font-size:12.5px;color:var(--muted);margin-top:2px}
.sgtl-row.done .sgtl-status{color:var(--success)}
.sgtl-row.rej .sgtl-status{color:var(--danger)}
.sgtl-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sgb{border:none;border-radius:7px;padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.sgb.ok{background:var(--success);color:#fff}
.sgb.rej{background:var(--danger);color:#fff}
.sgb.bk{background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.sgb:hover{opacity:.9}
.dl-serial{color:var(--ink);font-weight:400}
.dl-acts{font-size:13px;margin-top:2px}
.dl-acts a{color:var(--primary);cursor:pointer}
.dl-acts a:hover{text-decoration:underline}
.iv-att-link:hover{color:var(--primary-700)}


/* ── ISO date picker ──────────────────────────────────────────── */
.wfdate{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235b6675' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:34px}
.dpop{position:absolute;z-index:700;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:13px;width:285px;animation:fade-up .12s var(--ease)}
.dphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.dphead span{font-weight:700;color:var(--ink);font-size:15.5px}
.dphead button{width:32px;height:32px;border:none;background:var(--primary-50);color:var(--primary);border-radius:7px;cursor:pointer;font-size:19px;line-height:1;font-family:inherit}
.dphead button:hover{background:var(--primary);color:#fff}
.dpdow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dpdow span{text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase}
.dpgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dpc{display:flex;align-items:center;justify-content:center;height:35px;border-radius:7px;cursor:pointer;color:var(--ink);font-size:14px;transition:background .1s}
.dpc:hover:not(.dpc-e){background:var(--brand-50)}
.dpc-e{cursor:default}
.dpc-today{font-weight:800;color:var(--ink);box-shadow:inset 0 0 0 1px var(--brand-200,var(--line-2))}
.dpc-sel{background:var(--brand-50);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--brand-200,var(--line-2))}
.dpc-sel:hover{background:var(--brand-100,var(--brand-50))}
.dpc:hover:not(.dpc-e):not(.dpc-sel){background:var(--brand-50)}
.dpfoot{display:flex;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.dpfoot button{background:none;border:none;color:var(--primary);font-size:13.5px;font-weight:600;cursor:pointer;padding:5px 10px;border-radius:6px;font-family:inherit}
.dpfoot button:hover{background:var(--primary-50)}
/* ── Meta multi-select checkboxes ─────────────────────────────── */
.metachk{display:flex;flex-wrap:wrap;gap:8px;padding:3px 0}
.metachk-o{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);cursor:pointer;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:7px 12px;transition:all .12s}
.metachk-o:hover{border-color:var(--primary)}
.metachk-o input{accent-color:var(--primary);cursor:pointer;width:15px;height:15px}
.ms-bar{display:flex;border-bottom:1px solid var(--line)}
.ms-btn{flex:1;background:var(--surface);border:none;border-right:1px solid var(--line);padding:8px;font-size:12px;font-weight:600;color:var(--primary);cursor:pointer;font-family:inherit}
.ms-btn:last-child{border-right:none}
.ms-btn:hover{background:var(--primary-50)}
.ms-opt{display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:13.5px;color:var(--ink);cursor:pointer;border-radius:6px}
.ms-opt:hover{background:var(--primary-50)}
.ms-opt.hide{display:none}
.ms-opt input{accent-color:var(--primary);width:15px;height:15px;cursor:pointer}
.mssel .ms-opt{justify-content:space-between}
.mssel .ms-cbx{display:none}
.mssel .ms-chk{display:none;width:16px;height:16px;stroke:var(--primary);fill:none;stroke-width:2.6;flex-shrink:0}
.mssel .ms-cbx:checked~.ms-chk{display:block}
.mssel .ms-opt .ms-lbl{flex:1;min-width:0}
.bsave{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}
.bsave:hover{background:var(--primary-700)!important;border-color:var(--primary-700)!important}
.dropwrap{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.dz-head{font-size:13px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.5px;margin-bottom:11px}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:2px dashed var(--line-2);border-radius:10px;padding:78px 16px;background:var(--bg);text-align:center;transition:all .15s}
.dropzone.drag{border-color:var(--orange);background:var(--warning-50)}
.dz-text{font-size:13.5px;color:var(--muted)}
.dz-browse{color:var(--orange);font-weight:700;cursor:pointer;text-decoration:underline}
.ssel,.mssel{position:relative}
.ssel-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}
.ssel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssel-val.ssel-ph{color:var(--muted)}
.ssel-chev{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2.2;flex-shrink:0;transition:transform .2s}
.ssel.open .ssel-chev{transform:rotate(180deg)}
.ssel.open .ssel-btn{border-color:var(--primary);box-shadow:0 0 0 3px rgba(55,65,81,.1)}
.ssel-pop{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--line-2);border-radius:9px;box-shadow:0 12px 32px rgba(0,0,0,.15)}
.ssel-sbox{padding:8px;border-bottom:1px solid var(--line)}
.ssel-search{width:100%;border:1px solid var(--line-2);border-radius:7px;padding:7px 10px;font-size:13px;font-family:inherit;outline:none;background:var(--surface);color:var(--ink)}
.ssel-search:focus{border-color:var(--primary)}
.ssel-opts{max-height:240px;overflow-y:auto;padding:4px}
.ssel-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;font-size:13.5px;border-radius:6px;cursor:pointer;color:var(--ink);white-space:nowrap;overflow:hidden}
.ssel-opt:hover{background:var(--primary-50)}
.ssel-opt.on{background:var(--primary-50);color:var(--ink);font-weight:600}
.ssel-opt.on::after{content:'✓';color:var(--primary);font-weight:700;flex-shrink:0}
.ssel-opt.hide{display:none}


/* ── Sidebar collapsible groups ────────────────────────────────── */
.sgrp{margin-bottom:1px}
.sgrp-h{cursor:pointer;user-select:none}
.sgrp-h>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgrp-chev{width:13px!important;height:13px!important;margin-left:auto;stroke:var(--muted)!important;fill:none;stroke-width:2.5;transition:transform .2s var(--ease);flex-shrink:0}
.sgrp-h.closed .sgrp-chev{transform:rotate(-90deg)}
.sgrp-body{padding-bottom:3px}
.sgrp-body .slink.sm>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ── User form: hotel access rows ──────────────────────────────── */
.ha-wrap{display:flex;flex-direction:column;gap:8px}
.ha-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card2)}
.ha-row .wfchk{margin:0}


/* ── DASHBOARD ─────────────────────────────────────────────────── */
.dtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px;margin-bottom:18px}
.dtile{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:16px 18px 15px;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.dtile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
.dtile.t-amber::before{background:var(--warning)}
.dtile.t-green::before{background:var(--success)}
.dtile.t-red::before{background:var(--danger)}
.dt-v{font-size:27px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.5px}
.dt-l{font-size:11px;color:var(--muted);font-weight:700;margin-top:6px;text-transform:uppercase;letter-spacing:.5px}
.dcallout{display:flex;align-items:center;gap:14px;background:var(--warning-50);border:1px solid #fcd0b0;border-left:3px solid var(--orange);border-radius:var(--rad);padding:14px 18px;margin-bottom:18px;cursor:pointer;transition:background .15s}
.dcallout:hover{background:#ffedd9}
.dcallout svg{width:26px;height:26px;stroke:var(--orange);fill:none;stroke-width:1.8;flex-shrink:0}
.dcallout b{display:block;font-size:14px;color:var(--ink)}
.dcallout span{font-size:12.5px;color:var(--orange-d);font-weight:600}
.drow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.dmoney-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.dmoney{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:13px 14px}
.dm-form{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.dm-total{font-size:20px;font-weight:800;color:var(--ink);margin:4px 0 1px;letter-spacing:-.3px}
.dm-cnt{font-size:11.5px;color:var(--muted)}
.dstat{padding:11px 0;border-bottom:1px solid var(--line)}
.dstat:last-child{border-bottom:none;padding-bottom:0}
.dstat:first-child{padding-top:0}
.ds-h{display:flex;align-items:center;justify-content:space-between}
.ds-form{font-weight:700;color:var(--ink);font-size:13px}
.ds-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--line);margin:7px 0 6px}
.ds-bar span{display:block;height:100%}
.ds-a{background:var(--success)}.ds-p{background:var(--warning)}.ds-r{background:var(--danger)}.ds-e{background:var(--line)}
.ds-leg{display:flex;gap:14px;font-size:11px;color:var(--muted)}
.ds-leg span{display:inline-flex;align-items:center;gap:5px}
.ds-d{width:8px;height:8px;border-radius:2px;display:inline-block}
@media(max-width:760px){.drow{grid-template-columns:1fr}}


/* ── Topbar actions + admin dropdown ───────────────────────────── */
.tb-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.ibadge{position:absolute;top:2px;right:2px;background:var(--orange);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--primary);line-height:1}
.tb-admin{position:relative}
.tb-dd{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);min-width:215px;padding:6px;z-index:300}
.tb-admin.open .tb-dd{display:block;animation:fade-up .14s var(--ease)}
.tb-dd-lbl{padding:6px 12px 5px;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.tb-dd-i{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--ink);cursor:pointer;transition:background .12s;white-space:nowrap;text-decoration:none}
.tb-dd-i:hover{background:var(--primary-50)}
.tb-dd-i svg{width:16px;height:16px;stroke:var(--primary);fill:none;stroke-width:1.8;flex-shrink:0}
.tb-dd-i svg.ic-orange{stroke:var(--warning)}
.tb-dd-logout{background:var(--danger-50);color:var(--danger);margin-top:4px}
.tb-dd-logout:hover{background:var(--danger-50)}
.tb-dd-logout svg{stroke:var(--danger)!important}
/* Floating password-change modal */
.pwm{display:none;position:fixed;inset:0;background:rgba(11,15,26,.5);z-index:500;align-items:center;justify-content:center;padding:16px;animation:moin .15s ease-out}
.pwm.on{display:flex}
.pwm-box{background:var(--surface);border-radius:12px;width:100%;max-width:420px;box-shadow:0 16px 50px rgba(0,0,0,.25);overflow:hidden}
.pwm-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.pwm-head h3{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.pwm-x{background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px;border-radius:6px}
.pwm-x:hover{color:var(--ink);background:var(--bg)}
.pwm form{padding:14px 18px 16px}
.pwm-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
/* My Profile redesign */
.pf-hero{display:flex;align-items:center;gap:18px;padding:22px 24px;background:linear-gradient(135deg,var(--primary) 0%,#1f2937 100%);color:#fff;border-radius:14px;margin-bottom:16px;flex-wrap:wrap;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.pf-av{width:72px;height:72px;border-radius:50%;background:var(--orange);color:#fff;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:32px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pf-id{flex:1;min-width:200px}
.pf-name{margin:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#fff}
.pf-sub{margin:4px 0 0;font-family:inherit;font-size:13px;color:rgba(255,255,255,.7)}
.pf-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.1px}
.pf-tag-admin{background:var(--orange);color:#fff}
.pf-tag-ok{background:rgba(34,197,94,.22);color:#86efac;border:1px solid rgba(134,239,172,.4)}
.pf-stats{display:flex;gap:10px;flex:none}
.pf-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 16px;text-align:center;min-width:96px}
.pf-stat-n{font-size:22px;font-weight:800;color:#fff;line-height:1}
.pf-stat-l{font-size:11.5px;letter-spacing:.1px;color:rgba(255,255,255,.7);margin-top:4px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
.pf-info{padding:6px 0}
.pf-row{display:flex;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line);gap:14px}
.pf-row:last-child{border-bottom:0}
.pf-lbl{font-size:12.5px;font-weight:600;letter-spacing:.1px;color:var(--muted);min-width:120px}
.pf-val{font-size:14px;color:var(--ink);flex:1;overflow-wrap:anywhere}
.pf-val code{font-family:var(--font-mono,monospace);background:var(--bg);padding:2px 7px;border-radius:4px;font-size:12.5px}
@media(max-width:640px){.pf-stats{width:100%}.pf-stat{flex:1}}


/* ── Topbar user pill ──────────────────────────────────────────── */
.tb-user{position:relative}
.user-pill{display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;padding:0;cursor:pointer;color:rgba(255,255,255,.85);font-family:inherit;transition:background .15s,color .15s}
.user-pill:hover{background:rgba(255,255,255,.1);color:#fff}
.user-pill svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.user-pill-name,.user-pill-chev{display:none}
.tb-user.open .user-pill-chev{transform:rotate(180deg)}
.user-dd{min-width:210px}
.user-dd-head{padding:9px 12px 11px;border-bottom:1px solid var(--line);margin-bottom:4px}
.user-dd-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.user-dd-head .suinfo{font-size:11.5px;color:var(--muted);margin-top:2px}
.tb-user.open .tb-dd{display:block;animation:fade-up .14s var(--ease)}


/* ── Sign-type advanced matching ───────────────────────────────── */
.sp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-bottom:8px}
.adv-sp{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:14px;background:var(--card2)}
.adv-sp>summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink);user-select:none}


/* ── Bolder, consistent section typography (owner request) ─────── */
.sslbl{font-weight:800 !important;opacity:1 !important;color:var(--muted)}
.wch h2{font-family:'Segoe UI',system-ui,-apple-system,sans-serif !important;font-weight:600 !important;letter-spacing:-.3px}
.section-label{font-weight:800 !important;color:var(--ink);opacity:.85}
.items-title,.dhero-eyebrow{font-weight:800 !important}
.dt-l,.kpi span,.fl,.dm-form{font-weight:800 !important}
.dhero h1{letter-spacing:-.2px}


/* ── Mobile sidebar drawer ─────────────────────────────────────── */
.hamb{display:none;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.85);align-items:center;justify-content:center;margin-right:4px;flex-shrink:0}
.hamb:hover{background:rgba(255,255,255,.12);color:#fff}
.hamb svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
#sbbd{display:block;position:fixed;inset:0;background:rgba(11,15,26,.5);z-index:199;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
#sbbd.on{opacity:1;pointer-events:auto}
@media(max-width:768px){.hamb{display:inline-flex}}


/* ── Comments ──────────────────────────────────────────────────── */
.cmt-compose{display:flex;flex-direction:column;gap:9px}
.cmt-compose textarea{resize:vertical;min-height:54px}
.cmt-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cmt{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.cmt:last-child{border-bottom:none}
.cmt-av{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.cmt-body{flex:1;min-width:0}
.cmt-h{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.cmt-acts{display:inline-flex;gap:4px;margin-left:8px;opacity:0;transition:opacity .12s;vertical-align:middle}
.cmt:hover .cmt-acts{opacity:1}
.cmt-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:1px solid var(--line);background:#fff;border-radius:5px;cursor:pointer;color:var(--muted);transition:all .12s;font-size:16px;line-height:1}
.cmt-iconbtn:hover{background:var(--brand-50);color:var(--brand-900);border-color:var(--brand-200)}
.cmt-iconbtn.cmt-del:hover{background:var(--danger-50,#fee2e2);color:var(--danger,#dc2626);border-color:var(--danger,#dc2626)}
.cmt-t{color:var(--muted);font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmt-t::before{content:'·';margin:0 6px 0 4px;color:var(--line-2);font-weight:400}
.cmt-m{font-size:13px;color:var(--ink);margin-top:3px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.cmt-priv-b{font-size:9px;font-weight:800;text-transform:uppercase;background:var(--warning-50);color:var(--warning-700);padding:2px 6px;border-radius:10px;letter-spacing:.3px}


/* ── Attachments ───────────────────────────────────────────────── */
.att-up{display:inline-block;cursor:pointer}
.att-up .bn{cursor:pointer}
.att-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.att-clickable{cursor:pointer;color:var(--brand-900);text-decoration:none;transition:color .12s}
.att-clickable:hover{color:var(--primary);text-decoration:underline}
.att-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;color:var(--muted);transition:all .12s;font-size:18px;line-height:1}
.att-iconbtn:hover{background:var(--brand-50);color:var(--brand-900);border-color:var(--brand-200)}
.att-iconbtn.att-del{color:#888}
.att-iconbtn.att-del:hover{background:var(--danger-50,#fee2e2);color:var(--danger,#dc2626);border-color:var(--danger,#dc2626)}
.att-actions{display:flex;gap:6px;align-items:center;order:2;flex:0 0 auto}
.att-meta{flex:1 1 auto;min-width:0;order:3}
.att-thumb,.att-ftb{order:1}
.att-row:last-child{border-bottom:none}
/* Multi-section header form — editorial banners with auto-numbered prefixes (01, 02, 03, 04).
   The hform parent resets the counter so each form starts at 01; each .form-section-banner
   increments it. No config changes needed — purely presentational. */
.form-section-banner{background:var(--primary);border-radius:8px;padding:13px 22px;margin:18px 0 8px;box-shadow:0 1px 3px rgba(15,27,45,.12);grid-column:1/-1;position:relative}
.form-section-banner:first-of-type{margin-top:4px}
.form-section-banner h3{margin:0;color:#fff;font-size:14px;font-weight:600;text-align:center;letter-spacing:.3px;text-transform:none;display:flex;align-items:baseline;justify-content:center;gap:14px}
.form-section-banner h3::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:36px;height:2px;background:rgba(255,255,255,.35);border-radius:1px}
/* ============ Editorial Tile (replaces .inline-slot / -beside / -section) ============
   Synthesis from the design workflow (winner: collapsible-vault structure + editorial-slate
   polish, both fatal flaws fixed). Uses existing _renderInlineSlot markup verbatim — zero JS
   changes; CREATE (#stg-dz-N) and EDIT (#inl-dz-N) selectors are untouched.
   Visual: brand-900 top-rule, serif "No." eyebrow + numeral, 11px tracked uppercase label,
   hairline rule below the header, dashed dropzone that tints brand-50 on hover, serif-italic
   filenames in the file list. Beside-variant keeps spatial anchor (cols 2-3 next to its field).
   Section catch-all = brand-50 tint + primary left rail + 'SECTION-WIDE' pill. */
.inline-slot{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--brand-900);border-radius:6px;padding:12px 14px 11px;display:flex !important;flex-direction:column;min-width:0;transition:border-color .14s,box-shadow .14s,transform .14s}
.inline-slot:hover{border-color:var(--brand-400);box-shadow:0 2px 6px rgba(15,27,45,.06)}
.inline-slot:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--brand-50)}
/* Beside-field variant — sits in cols 2-3 next to its yes/no answer, tighter padding. */
.inline-slot-beside{padding:10px 12px 9px}
.inline-slot-beside .inline-slot-dz{padding:14px 10px}
.inline-slot-beside .inline-slot-files{margin-top:4px}
/* Section catch-all — header-band card matching the Section-4 doc-cards: a primary title band
   across the top, then a horizontal cloud-upload dropzone beneath. padding:0 + overflow so the
   band bleeds to the edges. */
.inline-slot-section{background:var(--surface);border:1px solid var(--brand-100);border-top:1px solid var(--brand-100);border-radius:6px;margin:8px 0 10px;padding:0;overflow:hidden;position:relative}
.inline-slot-section:hover{border-color:var(--brand-200);box-shadow:0 2px 6px rgba(15,27,45,.06)}
.inline-slot-section:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--brand-100)}
/* Title band — the label row becomes the colored banner; the serif "No." numeral is hidden. */
.inline-slot-section .inline-slot-h{display:flex;align-items:center;gap:0;background:var(--primary);border:none;margin:0;padding:9px 14px;min-height:34px}
.inline-slot-section .inline-slot-n{display:none}
.inline-slot-section .inline-slot-l{font-size:11.5px;font-weight:600;letter-spacing:.01em;text-transform:none;color:#fff;line-height:1.35}
.inline-slot-section .inline-slot-l::after{content:"Section-wide";margin-left:10px;background:rgba(255,255,255,.18);color:#fff;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:none;padding:2px 8px;border-radius:10px;vertical-align:1px}
/* Body — pad the dropzone + file list away from the band. */
.inline-slot-section .inline-slot-files{margin:0 14px 12px}
/* Header row — serif numeral + tracked small-caps label, hairline rule beneath. */
.inline-slot-h{display:flex;align-items:baseline;gap:10px;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.inline-slot-n{flex:0 0 auto;width:auto;height:auto;background:none;color:var(--brand-900);font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:700;letter-spacing:.02em;border-radius:0;display:inline-block;line-height:1}
.inline-slot-n::before{content:"No. ";font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-family:inherit;font-weight:600;margin-right:2px;vertical-align:1px}
.inline-slot-l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);line-height:1.3;min-width:0}
.inline-slot-hint{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:0;text-transform:none;font-weight:400}
/* Dropzone — thin, brand-50 hover, focus-able. */
.inline-slot-dz{padding:18px 12px;background:var(--bg);border:1px dashed var(--line-2);border-radius:5px;text-align:center;color:var(--muted);font-size:12.5px;transition:background .14s,border-color .14s,color .14s;cursor:pointer}
.inline-slot-dz:hover,.inline-slot-dz.drag{background:var(--brand-50);border-color:var(--brand-400);color:var(--primary-700)}
.inline-slot-dz svg{stroke:var(--brand-600) !important;margin:0 auto 4px}
.inline-slot-dz .dz-browse{color:var(--brand-900);font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* Section dropzone — horizontal icon-left strip beneath the band, matching the doc-cards. */
.inline-slot-section .inline-slot-dz{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;margin:12px 14px;padding:12px;text-align:center;border:1px dashed var(--line-2);border-radius:8px;background:transparent}
.inline-slot-section .inline-slot-dz:hover,.inline-slot-section .inline-slot-dz.drag{background:var(--brand-50);border-color:var(--primary);color:var(--primary-700)}
.inline-slot-section .inline-slot-dz svg{margin:0 !important;width:22px;height:22px;flex:0 0 auto;stroke:var(--primary) !important}
.inline-slot-section .inline-slot-dz .dz-text{text-align:center;flex:0 1 auto}
/* File list — serif-italic filename, tracked-caps meta, hairline dividers. */
.inline-slot-files{margin-top:10px}
.inline-slot-files .att-row{padding:6px 0;font-size:12px;border-bottom:1px solid var(--line-2);display:flex;align-items:baseline;gap:8px}
.inline-slot-files .att-row:last-child{border-bottom:none}
.inline-slot-files .att-row .att-name,.inline-slot-files .att-row a{font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--brand-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.inline-slot-files .att-row .att-meta,.inline-slot-files .att-row .tm{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:0 0 auto;font-family:inherit;font-style:normal}
@media (max-width:780px){.inline-slot{padding:10px 12px}.inline-slot-dz{padding:14px 10px}.inline-slot-h{padding-bottom:6px;margin-bottom:8px}}

/* ============ Audit Checklist (Section 4 doc rows) ============
   When checklist:true is set on a slot, override the editorial-tile chrome with a thin
   single-row affordance: no big top-rule, no full dropzone, just a compact "drop or browse"
   action + the file list inline. Reads like an auditor's clipboard. */
.inline-slot-checklist{border:1px solid var(--line);border-top-width:1px;border-radius:6px;padding:6px 12px;display:flex !important;flex-direction:row;align-items:center;gap:14px;min-height:36px;background:var(--surface);transition:border-color .14s,background .14s}
.inline-slot-checklist:hover{background:var(--brand-50);border-color:var(--brand-400)}
.inline-slot-checklist:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px var(--brand-50)}
/* Hide the editorial header — too tall for a one-row checklist look. The doc name lives in the
   yes/no field's label to the left of the slot. */
.inline-slot-checklist .inline-slot-h{display:none}
/* Dropzone — icon on top, full "Drag & drop or browse — uploads on Save" text below.
   Vertical stack so the longer caption wraps gracefully in narrow doc-card columns. */
.inline-slot-checklist .inline-slot-dz{flex:0 0 auto;padding:8px 12px;background:transparent;border:none;border-radius:8px;font-size:11px;color:var(--brand-900);font-weight:500;text-align:center;cursor:pointer;display:inline-flex !important;flex-direction:column;align-items:center;gap:5px;line-height:1.35;max-width:100%}
.inline-slot-checklist .inline-slot-dz:hover,.inline-slot-checklist .inline-slot-dz.drag{background:var(--brand-50);color:var(--primary-700)}
.inline-slot-checklist .inline-slot-dz svg{display:inline-block !important;width:18px;height:18px;margin:0;stroke:currentColor !important;flex:0 0 auto;opacity:.85}
.inline-slot-checklist .inline-slot-dz .dz-text{font-size:11px;line-height:1.35;color:inherit;white-space:normal;letter-spacing:.01em;font-weight:500}
.inline-slot-checklist .inline-slot-dz .dz-browse{color:var(--brand-900);font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.inline-slot-checklist .inline-slot-dz:hover .dz-browse,.inline-slot-checklist .inline-slot-dz.drag .dz-browse{color:var(--primary-700)}
/* File list shrinks to inline horizontal chips — minimal visual weight. */
.inline-slot-checklist .inline-slot-files{flex:1;margin-top:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.inline-slot-checklist .inline-slot-files .att-row{padding:2px 8px;border:none;background:var(--brand-50);border-radius:12px;font-size:10.5px;display:inline-flex;flex-direction:row;gap:4px;align-items:baseline}
.inline-slot-checklist .inline-slot-files .att-row:last-child{border-bottom:none}
.inline-slot-checklist .inline-slot-files .att-row .att-name,.inline-slot-checklist .inline-slot-files .att-row a{font-family:inherit;font-style:normal;font-size:10.5px;color:var(--brand-900);max-width:140px}
.inline-slot-checklist .inline-slot-files .att-row .att-meta,.inline-slot-checklist .inline-slot-files .att-row .tm{display:none}
.inline-slot-checklist .inline-slot-files .att-row .att-actions{gap:4px;font-size:10px}
.inline-slot-checklist .inline-slot-files p.tm{margin:0;font-size:11px;color:var(--muted);font-style:italic}

/* ============ Section-4 Docs Grid — 3 columns of doc-cards ============
   Each .doc-card pairs a yes/no question with its checklist upload pill in a single tile.
   8 docs land as 3 + 3 + 2 rows in a 3-col grid. mountIncidentDocsGrid post-processes the
   buildForm DOM to nest field+slot pairs into .doc-card and wraps them in .docs-grid. */
/* Docs grid styled like the "Section Attached" cards — each doc-card is a brand-50 tinted tile
   with a primary left rail (same idea as .inline-slot-section). The Attach dropzone inside it is
   frameless so the card itself supplies the visual frame. */
/* View page — inline attachment block under its section/question (read-only). */
.dv-att{margin:8px 0 12px;border:1px solid var(--brand-100);border-left:3px solid var(--primary);border-radius:6px;background:var(--brand-50);padding:10px 12px 8px}
.dv-att-h{font-size:11.5px;font-weight:600;color:var(--primary-700);margin-bottom:8px}
.dv-att-files{display:flex;flex-direction:column;gap:6px}
/* View page — Evidence card (CCTV / Photographs / Guest Report / Witness): label + Yes/No chip + thumbnail strip. */
.dv-ev-card{margin:8px 0 12px;background:var(--surface);border:1px solid var(--brand-100);border-top:2px solid var(--primary);border-radius:7px;padding:11px 13px}
.dv-ev-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.dv-ev-l{font-size:11.5px;font-weight:600;color:var(--ink);min-width:0}
.dv-ev-strip{display:flex;flex-wrap:wrap;gap:8px;flex-direction:row}
.dv-tile{display:block;width:64px;height:64px;border-radius:6px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:var(--bg);flex:0 0 auto;transition:border-color .12s,transform .12s}
.dv-tile:hover{border-color:var(--primary);transform:translateY(-1px)}
.dv-tile img{width:100%;height:100%;object-fit:cover;display:block}
.dv-tile-doc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--brand-50);color:var(--brand-900);text-decoration:none}
.dv-tile-ic{font-size:20px;line-height:1;font-style:normal}
.dv-tile-ext{font-size:9.5px;font-weight:700;letter-spacing:.04em}
/* Video tile — dark with a play glyph; click opens the in-page player. */
.dv-tile-vid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:#1f2937;color:#fff;text-decoration:none}
.dv-tile-vid .dv-tile-play{font-size:17px;line-height:1}
.dv-tile-vid .dv-tile-ext{color:rgba(255,255,255,.8)}
/* Lightbox video element */
.lbvid{max-width:88vw;max-height:82vh;width:auto;height:auto;border-radius:8px;display:block;background:#000}
/* View page — Section 4 "Additional Documents" as a card grid (question + Yes/No + files). */
.dv-docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:8px 0 4px;align-items:start}
.dv-doc-card{background:var(--surface);border:1px solid var(--brand-100);border-top:2px solid var(--brand-900);border-radius:7px;padding:11px 13px;display:flex;flex-direction:column;gap:8px;min-width:0}
.dv-doc-h{font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:.01em;line-height:1.3}
.dv-doc-ans{font-size:11px;display:flex;align-items:center;gap:7px}
.dv-doc-ans .dp-l{color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:9.5px}
.ans-chip{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 9px;border-radius:11px;line-height:1.5}
.ans-yes{background:var(--success-50);color:var(--success-700)}
.ans-no{background:#fdeceb;color:#b42318}
.ans-prog{background:#fef4e2;color:#9a6a00}
.ans-na{background:var(--brand-50);color:var(--muted)}
/* Compact, single-line file rows inside a doc card */
.dv-doc-files{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);margin-top:1px}
.dv-doc-files .att-row{flex-wrap:nowrap;align-items:center;gap:9px;font-size:11px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.dv-doc-files .att-row:last-child{border-bottom:none}
.dv-doc-files .att-thumb,.dv-doc-files .att-ftb,.dv-doc-files .att-ftb>*{width:34px;height:34px;min-width:34px;flex:0 0 auto;border-radius:5px;object-fit:cover}
.dv-doc-files .att-meta{flex:1;min-width:0}
.dv-doc-files .att-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:500}
.dv-doc-files .att-sub{display:none}
.dv-doc-files .att-actions{flex:0 0 auto;display:flex;gap:9px;font-size:10.5px}
.dv-doc-files .att-actions .blink{white-space:nowrap}
.docs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0}
/* Header-band doc-card — a colored title bar across the top (like a mini section banner), then
   the yes/no dropdown, then a horizontal icon-left dropzone underneath. padding:0 + overflow so
   the band can bleed to the card edges. */
.doc-card{background:var(--surface);border:1px solid var(--brand-100);border-radius:6px;padding:0;display:flex;flex-direction:column;min-width:0;position:relative;transition:border-color .14s,box-shadow .14s}
.doc-card:hover{border-color:var(--brand-200);box-shadow:0 2px 6px rgba(15,27,45,.06)}
.doc-card:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--brand-100)}
/* Field cell becomes the title-band host: the label is the colored band, the select sits padded
   below it. */
.doc-card > .hfg{padding:0;margin:0;display:flex;flex-direction:column}
.doc-card > .hfg .hfl{order:-1;background:var(--primary);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.01em;text-transform:none;line-height:1.35;margin:0;padding:9px 12px 9px 14px;border-radius:5px 5px 0 0;display:flex;align-items:center;min-height:34px}
.doc-card > .hfg .hfc{margin:0;padding:12px 14px 0}
.doc-card > .hfg select,.doc-card > .hfg .ssel-btn{font-size:12px;padding:6px 10px;min-height:32px;width:100%}
/* When files have landed, flip the band to success so a "provided" card reads at a glance. */
.doc-card:has(.inline-slot-files .att-row){border-color:var(--success)}
.doc-card:has(.inline-slot-files .att-row) > .hfg .hfl{background:var(--success)}
/* Status badge — sits inside the title band, right-aligned. */
.doc-card::after{content:"Pending";position:absolute;top:10px;right:12px;font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.8);line-height:1.4;pointer-events:none;z-index:1}
.doc-card:has(.inline-slot-files .att-row)::after{content:"✓ Provided";color:#fff}
/* Slot — a horizontal icon-left dropzone strip beneath the select. */
.doc-card > .inline-slot-checklist{margin:0;border:none;padding:12px 14px 14px;background:transparent;min-height:auto;flex-direction:column;align-items:stretch;gap:8px}
.doc-card > .inline-slot-checklist:hover{background:transparent;border:none;box-shadow:none}
.doc-card > .inline-slot-checklist .inline-slot-dz{flex-direction:row !important;align-items:center;justify-content:center;gap:10px;padding:12px;border:1px dashed var(--line-2);border-radius:8px;text-align:center;width:100%;margin:0}
.doc-card > .inline-slot-checklist .inline-slot-dz:hover,.doc-card > .inline-slot-checklist .inline-slot-dz.drag{background:var(--brand-50);border-color:var(--primary)}
.doc-card > .inline-slot-checklist .inline-slot-dz svg{width:22px;height:22px;flex:0 0 auto;color:var(--primary)}
.doc-card > .inline-slot-checklist .inline-slot-dz .dz-text{text-align:center;flex:0 1 auto}
.doc-card > .inline-slot-checklist .inline-slot-files{margin-top:0;flex:0 0 auto;justify-content:flex-start}
/* Solo upload card — no paired field; the slot's OWN header becomes the title band. */
.doc-card-solo > .inline-slot-checklist{padding:0;gap:0}
.doc-card-solo .inline-slot-h{display:flex !important;background:var(--primary);margin:0;padding:9px 14px;border:none;border-radius:5px 5px 0 0;align-items:center;min-height:34px}
.doc-card-solo .inline-slot-n{display:none}
.doc-card-solo .inline-slot-l{color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.01em;text-transform:none;line-height:1.35}
.doc-card-solo .inline-slot-hint{color:rgba(255,255,255,.8);text-transform:none;letter-spacing:0;margin:0 0 0 8px}
.doc-card-solo > .inline-slot-checklist .inline-slot-dz{margin:12px 14px !important}
.doc-card-solo > .inline-slot-checklist .inline-slot-files{margin:0 14px 12px}
.doc-card-solo:has(.inline-slot-files .att-row) .inline-slot-h{background:var(--success)}
/* Mobile — collapse to 2 cols then 1 col. */
/* !important so these override the per-run inline grid-template-columns set by mountIncidentDocsGrid
   (an inline style otherwise outranks media-query rules, leaving 4-up cards overflowing on mobile). */
@media (max-width:1100px){.docs-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media (max-width:900px){.docs-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:600px){.docs-grid{grid-template-columns:1fr !important}}
.stg-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line-2);font-size:12.5px}
.stg-row:last-child{border-bottom:none}
.stg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.stg-del{margin-left:auto;border:none;background:transparent;color:var(--danger);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.stg-del:hover{color:#922b21}
/* Slot grid — N named upload areas in a 2-col grid (incident_report etc.). */
.fslots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:900px){.fslots{grid-template-columns:1fr}}
.fslot{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg)}
.fslot-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.fslot-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.fslot-meta{flex:1;min-width:0}
.fslot-l{font-size:13.5px;font-weight:600;color:var(--ink)}
.fslot-hint{font-size:11.5px;margin-top:2px;color:var(--muted)}
.fdz-slot{padding:18px 12px !important;gap:6px !important}
.fdz-slot .dz-text{font-size:12.5px}
.fslot-files{margin-top:8px}
.fslot-files .att-row{padding:7px 0;font-size:12px}
.fslot-files .att-name{font-size:12.5px}
.fslot-files .att-sub{font-size:10.5px}
.fslot-files .att-actions{gap:9px}
.att-actions{display:inline-flex;gap:14px;align-items:center;flex-shrink:0}
.att-actions .att-del{color:var(--danger-700)}
.att-actions .att-del:hover{color:#922b21}
.att-ic{width:28px;height:28px;color:var(--primary);flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6}
.att-meta{flex:1;min-width:0}
.att-name{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-sub{font-size:11.5px}

/* ── KEYFRAMES ───────────────────────────────────────────────────── */
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes skw{0%{background-position:300% 0}100%{background-position:-300% 0}}
@keyframes tin{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes tout{to{opacity:0;transform:translateX(28px)}}
@keyframes moin{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:768px){
  :root{--sw:0px}
  #sb{transform:translateX(-248px);width:248px;transition:transform .3s var(--ease)}
  #sb.open{transform:translateX(0)}
  #ma{margin-left:0}
  .wfrow,.form-grid{grid-template-columns:1fr}
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
  #view{padding:14px}
}
.print-head{display:none}
@page{size:A4;margin:14mm}
@media print{
  #sb,header,.hamb,.tb-actions,.bbk,.form-actions,.sgunsign,.save-bar,#dpop,.dhero,.tb-dd{display:none!important}
  #main{margin-left:0!important}
  #view{padding:0!important}
  body,#main{background:#fff!important}
  .wc{box-shadow:none!important;border:1px solid #cbd1d9!important;break-inside:avoid;margin-top:12px!important}
  .wch h2{font-size:13px}
  .print-head{display:block!important;text-align:center;border-bottom:2.5px solid var(--brand-600);padding-bottom:11px;margin-bottom:6px}
  .print-head .ph-hotel{font-size:20px;font-weight:800;letter-spacing:.5px;color:#111}
  .print-head .ph-title{font-size:14px;font-weight:700;margin-top:3px;text-transform:uppercase;letter-spacing:1.5px;color:var(--brand-600)}
  .print-head .ph-sub{font-size:10.5px;color:#444;margin-top:6px}
  .fgrid{display:grid!important;grid-template-columns:1fr 1fr;gap:0}
  .fi{border:1px solid #d1d5db;padding:6px 9px;break-inside:avoid}
  .iv-tbl thead th,.items-tbl thead th{background:var(--brand-600)!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sbg,.sgstamp,.sgsig,.sgcard.done,.sgcard.rej{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sgcards{grid-template-columns:repeat(3,1fr)}
  a[onclick]{text-decoration:none;color:inherit}
}

/* ═══════════ ENTERPRISE RESPONSIVE LAYER (mobile-first; appended = source-order overrides) ═══════════ */
/* 0 · Global overflow & sizing safety — never allow horizontal PAGE scroll */
html,body{max-width:100%;overflow-x:hidden}
#ma,#view,.wc,.wcb,.wch,.ph,.dhero,.formpaper,.hfc,.fb-f{min-width:0}
img,svg,video,canvas,table{max-width:100%}
#view>*{max-width:100%}
.fv,.dp-v,.cmt-m,.att-name,.suname,.ms-lbl{overflow-wrap:anywhere}

/* 1 · Universal data tables — scroll INSIDE their box (never the page) + sticky header on long lists */
.tbl-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{margin:0}
.wtbl thead th,.lgtbl thead th,.iv-tbl thead th,.items-tbl thead th{position:sticky;top:60px;z-index:3}
.tbl-scroll .wtbl thead th,.tbl-scroll .lgtbl thead th,.iv-wrap .iv-tbl thead th,.items-wrap .items-tbl thead th{top:0}
.iv-wrap,.items-wrap{max-height:72vh}

/* 2 · iOS Safari zooms when a focused input is <16px — force 16px on touch widths */
@media(max-width:768px){
  input,select,textarea,.wfi,.sb-fi,.ms-search input,.ssel-search,.dl-pp,.if-file,.lcard input{font-size:16px}
}

/* 3 · SIDEBAR — off-canvas drawer through tablet (≤1024); fixed + collapsible on desktop */
.hamb{display:inline-flex}
@media(max-width:1024px){
  :root{--sw:0px}
  #sb{transform:translateX(-100%);width:min(86vw,288px);transition:transform .28s var(--ease);box-shadow:var(--shadow-lg)}
  #sb.open{transform:translateX(0)}
  #ma{margin-left:0}
}
@media(min-width:1025px){
  #sb{transition:transform .25s var(--ease)}
  #ma{transition:margin-left .25s var(--ease)}
  #sh.collapsed #sb{transform:translateX(-100%)}
  #sh.collapsed #ma{margin-left:0}
  /* Pinned mode: keep sidebar at full width, no hover/rail behavior. */
  #sh.sb-pinned #sb{width:var(--sw);box-shadow:none;z-index:200}
  #sh.sb-pinned #ma{margin-left:var(--sw)}
  #sh.sb-pinned #sb .slink{justify-content:flex-start;gap:10px;font-size:13px;width:auto;margin:0;padding:8px 12px;border-radius:8px}
  #sh.sb-pinned #sb .slink i{font-size:14px;width:16px;text-align:center}
  #sh.sb-pinned #sb .sgrp{margin:initial}
  #sh.sb-pinned #sb .sgrp-chev,#sh.sb-pinned #sb .sbadge{display:inline-block}
  #sh.sb-pinned #sb .sslbl,#sh.sb-pinned #sb .sb-fi-w{display:block}
  #sh.sb-pinned #sb .sbrand{justify-content:flex-start;padding-left:14px;padding-right:14px}
  #sh.sb-pinned #sb .sbname,#sh.sb-pinned #sb .sbsub{display:block}
}

/* 4 · Z-index ladder so nothing overlaps: topbar100 · sidebar200 · dropdowns300 · modals400 · lightbox500 */
.act-ov{z-index:400}
.lbov{z-index:500}

/* 5 · Topbar compaction on small screens */
@media(max-width:560px){
  #tb{padding:0 12px;gap:6px}
  .tbsub{display:none}
  .user-pill-name{max-width:90px}
  .tb-actions{gap:2px}
  .ph-l h1{font-size:18px}
}
@media(max-width:380px){.user-pill-name{display:none}#view{padding:10px}}

/* 6 · Forms — single column + full-width controls on phones/tablets, no overflow */
@media(max-width:768px){
  .wfrow,.form-grid,.hform,.hform.hform-col2,.dp-grid,.sp-row,.fgrid,.dfields{grid-template-columns:1fr!important;grid-auto-flow:row!important}
  .hform.hform-col2 .hfg-spacer{display:none}
  .sp-row{gap:8px}
  .save-bar{flex-direction:column-reverse}
  .save-bar>*{width:100%;justify-content:center}
  .ph{flex-direction:column;align-items:stretch}
  .ph-acts{justify-content:flex-start}
  .items-tbl input[type="number"].wfi{width:100%}
  .dl-tools{gap:6px}
  .dl-tools-l,.dl-tools-r{flex-wrap:wrap}
}

/* 7 · Modals — full-height sheet on phones */
@media(max-width:640px){
  .act-ov{padding:0;align-items:stretch}
  .act-modal,.dlm-modal{max-width:100%;max-height:100%;height:100%;border-radius:0}
  .dlm-foot{flex-direction:column}
  .dlm-foot>*{width:100%}
  .dlm-tbl{min-width:520px}
}

/* 8 · Module grid fluidity */
@media(max-width:560px){.mgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
@media(max-width:400px){.mgrid{grid-template-columns:1fr 1fr}}

/* 9 · Ultra-wide — cap content width so tables/text stay readable */
@media(min-width:1921px){#view{max-width:1840px;margin-left:auto;margin-right:auto;width:100%}}

/* 10 · Touch ergonomics + reduced-motion */
@media(pointer:coarse),(any-pointer:coarse){.ibtn,.hamb,.dots,.act-x,.exp-wrap .bn{min-width:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ── Navbar quick-popovers: Inbox / Favourites / Notifications ── */
.tb-pop{position:relative}
.tb-pop>.tb-dd{display:none}
.tb-pop.open>.tb-dd{display:block;animation:fade-up .14s var(--ease)}
.tb-pop-dd{width:340px;max-width:92vw;padding:0;overflow:hidden}
.tb-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--ink)}
.tb-pop-link{font-size:11px;font-weight:700;color:var(--primary);cursor:pointer;text-transform:none;letter-spacing:0;white-space:nowrap}
.tb-pop-link:hover{color:var(--orange)}
.tb-pop-body{max-height:min(62vh,440px);overflow-y:auto}
.tb-pop-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s}
.tb-pop-row:last-child{border-bottom:none}
.tb-pop-row:hover{background:var(--primary-50)}
.tb-pop-ic{width:30px;height:30px;border-radius:8px;background:var(--primary-50);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--primary)}
.tb-pop-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.tb-pop-tl{flex:1;min-width:0}
.tb-pop-t1{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-pop-t2{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.tb-pop-row.unr{background:rgba(245,132,66,.06)}
.tb-pop-row.unr .tb-pop-t1::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:6px;vertical-align:middle}
.tb-pop-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:12.5px}
@media(max-width:480px){.tb-pop-dd{position:fixed;left:8px;right:8px;top:56px;width:auto;max-width:none}}

/* ═══════════ RESPONSIVE PATCH 2 — per-view sweep fixes (appended = source-order overrides) ═══════════ */
/* CRITICAL: let wrapped data tables size to CONTENT and scroll horizontally instead of crushing.
   (the layer's table{max-width:100%}+.wtbl{width:100%} had pinned them to the container width,
    so .tbl-scroll never scrolled and the 9-col list/items tables squashed on phones) */
.tbl-scroll>table,.items-wrap>table,.iv-wrap>table,.dlm-scroll>table{max-width:none;width:auto;min-width:100%}
.items-tbl .wfi{min-width:90px}
.items-tbl input[data-if="room_no"],.items-tbl input[data-if="nights"],.items-tbl input[data-if="no_pax"]{min-width:56px;width:74px}
.items-tbl input.wfdate{min-width:118px}

/* shell · login · toast */
@media(max-width:480px){#tc{left:10px;right:10px;min-width:0;max-width:none;width:auto}}
@media(max-width:480px){#lv{padding:16px}.lcard{padding:30px 22px;border-radius:12px}}
@media(max-width:1024px){#sb-mid{padding-bottom:calc(8px + env(safe-area-inset-bottom))}#sb{padding-left:env(safe-area-inset-left)}}

/* dashboard widgets */
.ds-leg{flex-wrap:wrap;row-gap:4px}
.ds-h{gap:8px}
.ds-h .ds-form{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-h .tm{flex-shrink:0}

/* form list */
@media(max-width:768px){.dl-det{max-width:200px}}
@media(max-width:480px){.dl-det{max-width:150px}}
@media(max-width:560px){.dl-tools{flex-direction:column;align-items:stretch}.dl-tools-l,.dl-tools-r{width:100%}.dl-tools-r .sinpw{width:100%!important}}
@media(max-width:768px){#view{padding-bottom:24px}}

/* form detail */
@media(max-width:768px){.dp-logo{max-height:84px;max-width:100%}.att-name{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}}
@media(max-width:760px){.dp-qr{display:flex;justify-content:center}.dp-brand{align-items:center}}
.sgcard2-hd{min-width:0;overflow-wrap:anywhere}.sgc-ic{flex-shrink:0}
@media(max-width:480px){.sgcards2{grid-template-columns:1fr}}

/* add / edit form */
@media(max-width:768px){.items-tbl input[type="number"].wfi{width:100px;min-width:100px}.items-tbl .if-att{min-width:150px}.if-file{font-size:13px;padding:5px 7px}.if-file::-webkit-file-upload-button{padding:3px 7px;margin-right:6px}}
@media(max-width:768px){.ssel-pop .ssel-opts{max-height:min(240px,42vh)}.dropzone{padding:34px 14px}}
@media(max-height:560px){.ssel-pop{max-height:88vh}.ssel-pop .ssel-opts{max-height:38vh}}
@media(max-width:480px){.dropzone{padding:26px 12px}.dz-text{font-size:12.5px}}
.att-row{gap:8px}.att-meta{flex:1 1 0;min-width:0;overflow:hidden}.att-row .row-trash{flex-shrink:0}

/* admin forms / matrices */
#st_hotel,#st_dep{min-width:0;flex:1 1 auto}
@media(max-width:768px){.sp-row .wfi{min-width:0;width:100%}.sp-row select[id$="_cond"]{max-width:100%!important}}
@media(max-width:480px){.ha-row .wfchk{min-width:0!important;width:100%}.ha-row .ha-r{max-width:100%!important;width:100%}}
@media(max-width:560px){.ph-acts .sinpw{width:100%!important;max-width:100%}}
#permtbl td:first-child,#permtbl th:first-child{min-width:150px}

/* overlays / pickers */
#mo,#cm{align-items:flex-start;overflow-y:auto;padding:24px 0}
.mbox,.cmbox{max-height:calc(100dvh - 48px);overflow-y:auto}
@media(max-width:480px){.mbox,.cmbox{margin:12px;max-height:calc(100dvh - 24px)}}
.act-body>table.wtbl{display:block;overflow:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.act-body>table.wtbl thead th{position:sticky;top:0;z-index:2}
@media(max-width:560px){.dpop{max-width:calc(100vw - 16px)}}
[dir=rtl] .dpop,.rtl .dpop{max-width:calc(100vw - 16px)}

/* large headings — clamp() so long titles / unbreakable numbers don't overflow narrow tiles */
@media(max-width:600px){.formhdr-t{white-space:normal;overflow-wrap:anywhere;font-size:clamp(15px,5vw,21px);line-height:1.2}}
@media(max-width:480px){.dt-v{font-size:clamp(19px,6.4vw,27px)}.dm-total{font-size:clamp(16px,5.4vw,20px)}.dp-title{font-size:clamp(17px,6vw,23px)}.dhero h1{font-size:clamp(17px,6vw,22px)}.dt-v,.dm-total{overflow-wrap:anywhere}}

/* ── NEW DASHBOARD ─────────────────────────────────────────────── */
.dhero{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:18px}
.dhero-h1{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:21px;font-weight:600;letter-spacing:-.3px;color:var(--ink);line-height:1.15}
.dhero-sub{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:12.5px;color:var(--muted);margin-top:4px;font-weight:500}
.dhero-r{display:flex;align-items:center;gap:9px}
.dchip{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.dk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.dk{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px -8px rgba(16,24,40,.1);transition:transform .15s,box-shadow .15s}
.dk-ac{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
.dk:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(16,24,40,.26)}
.dk-top{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.dk-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dk-ic svg{width:20px;height:20px;stroke-width:2;fill:none;stroke:currentColor}
.dk-v{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:26px;font-weight:600;letter-spacing:0;line-height:1;color:var(--ink)}
.dk-l{font-size:12.5px;color:var(--muted);margin-top:6px;font-weight:600}
.dk-d{font-size:11.5px;font-weight:700;margin-top:8px}
.dg2{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-bottom:14px}
.dg3{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px -8px rgba(16,24,40,.09);overflow:hidden}
.dcard-h{display:flex;align-items:center;justify-content:space-between;padding:14px 17px;border-bottom:1px solid var(--line)}
.dcard-t{font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink)}
.dcard-l{font-size:11.5px;font-weight:700;color:var(--orange);cursor:pointer}
.dcard-b{padding:16px 17px}
.dbars{display:flex;align-items:flex-end;gap:10px;height:128px;padding-top:6px}
.dbcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.dbar{width:100%;max-width:30px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#566173,var(--primary));min-height:3px}
.dbar.hi{background:linear-gradient(180deg,#f9a063,var(--orange))}
.dbx{font-size:10.5px;color:var(--muted);font-weight:600}
.ddonut{display:flex;align-items:center;gap:16px}
.ddw{position:relative;width:118px;height:118px;flex-shrink:0}
.ddc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ddn{font-size:23px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.ddl{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:0}
.dleg{display:flex;flex-direction:column;gap:9px;flex:1}
.dli{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink)}
.ddot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.dli .lv{margin-left:auto;font-weight:700;color:var(--muted)}
.drow2{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.drow2:last-child{border-bottom:none}
.drow2:hover{background:var(--primary-50);margin:0 -8px;padding:11px 8px;border-radius:8px;border-bottom-color:transparent}
.dr-ic{width:34px;height:34px;border-radius:9px;background:var(--primary-50);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--primary)}
.dr-ic svg{width:16px;height:16px;stroke-width:1.9;fill:none;stroke:currentColor}
.dr-t{flex:1;min-width:0}.dr-1{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}.dr-2{font-size:11.5px;color:var(--muted);margin-top:1px}
.dactr{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);align-items:flex-start}.dactr:last-child{border-bottom:none}
.dfav{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.dft{flex:1;min-width:0;font-size:12.5px;color:var(--ink)}.dft .tm2{font-size:11px;color:var(--muted);margin-top:1px}
.dempty{padding:24px 12px;text-align:center;color:var(--muted);font-size:12.5px}
.dsec{font-size:13px;font-weight:600;letter-spacing:0;color:var(--muted);margin:4px 0 11px}
.dmrow{padding:7px 0}
.dmrow+.dmrow{border-top:1px solid var(--line)}
.dmr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dmr-n{font-size:12.5px;font-weight:600;color:var(--ink)}
.dmr-c{font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.dmr-bar{display:flex;height:6px;border-radius:4px;overflow:hidden;background:var(--bg)}
.dmr-bar span{display:block;height:100%}
.dfin-grand{display:flex;justify-content:space-between;align-items:baseline;padding:0 0 12px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.dfin-gl{font-size:12.5px;color:var(--muted);font-weight:500}
.dfin-gv{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.dfinr{display:flex;justify-content:space-between;align-items:center;padding:7px 0}
.dfinr+.dfinr{border-top:1px solid var(--line)}
.dfin-n{font-size:12.5px;color:var(--ink);font-weight:500}
.dfin-meta{display:flex;align-items:center;gap:12px}
.dfin-cnt{font-size:11px;color:var(--muted);background:var(--bg);border-radius:20px;padding:2px 9px;font-weight:600}
.dfin-amt{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
@media(max-width:760px){.dk-grid{grid-template-columns:1fr 1fr}.dg2,.dg3{grid-template-columns:1fr}}
@media(max-width:440px){.dk-grid{grid-template-columns:1fr}}
.slink i{font-size:20px;width:24px;text-align:center;color:var(--primary);flex-shrink:0;line-height:1}.slink:hover i{color:var(--primary-700)}.slink.on i{color:var(--brand-900,#0f1b2d)}.slink.sm i{font-size:16px;width:22px}
.mm-split{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
.mm-aside{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);overflow:hidden;position:sticky;top:76px;max-height:calc(100vh - 96px);display:flex;flex-direction:column}
.mm-search-w{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--line);flex-shrink:0}
.mm-search-w svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;flex-shrink:0}
.mm-search-w input{border:none;outline:none;font-size:13px;width:100%;background:none;color:var(--ink);font-family:inherit}
#mm-list{overflow-y:auto;flex:1;padding:6px 0}
.mm-grp{margin-bottom:5px}
.mm-grp-h{display:flex;align-items:center;justify-content:space-between;padding:7px 13px 4px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.mm-grp-edit{background:none;border:none;cursor:pointer;color:var(--muted);padding:3px;border-radius:6px;display:inline-flex;opacity:.55}
.mm-grp-edit:hover{opacity:1;background:var(--primary-50);color:var(--primary)}
.mm-grp-edit svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.mm-li{display:flex;align-items:center;gap:10px;padding:8px 13px;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink);border-left:3px solid transparent}
.mm-li:hover{background:var(--primary-50)}
.mm-li.sel{background:var(--primary-50);border-left-color:var(--primary);font-weight:700}
.mm-li[draggable="true"]{cursor:grab}
.mm-li.mm-drop{box-shadow:inset 0 3px 0 -1px var(--primary)}
.mm-grip{display:inline-flex;color:var(--line-2);flex-shrink:0;margin-left:-4px}
.mm-grip svg{width:14px;height:14px;fill:currentColor;stroke:none}
.mm-li:hover .mm-grip{color:var(--muted)}
.mm-li-ic{width:22px;text-align:center;color:var(--primary);flex-shrink:0}
.mm-li-ic i{font-size:15px}
.mm-li-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-hid{color:var(--muted);flex-shrink:0;display:inline-flex}.mm-hid svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.mm-pane{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);padding:18px;min-height:320px}
.mm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;min-height:300px;color:var(--muted);text-align:center}
.mm-empty svg{width:42px;height:42px;stroke:var(--line-2);fill:none;stroke-width:1.5}
.mm-empty p{font-size:13px;margin:0;max-width:240px}
@media(max-width:820px){.mm-split{grid-template-columns:1fr}.mm-aside{position:static;max-height:320px}}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — final consolidated pass (≤900px / ≤640px / ≤420px)
   The earlier per-component @media blocks cover their own breakpoints; this
   block catches grids/widgets that were added after the original responsive
   work, plus tightens touch targets and table scrolling on phones.
   ════════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* Two-column form rows stack vertically on tablets/phones */
  .wfrow{grid-template-columns:1fr;gap:10px}
  /* Dashboard sub-row (donut + status table) stacks */
  .drow{grid-template-columns:1fr}
  /* Admin Monitor two-column grid stacks */
  #mon_grid{grid-template-columns:1fr!important}
  /* Form detail meta block (340px right column) collapses */
  .formhdr+div[style*="grid-template-columns:340px"]{grid-template-columns:1fr!important}
}

@media(max-width:640px){
  /* Hide the QR only on real phones (≤640px); desktop / laptop / tablet keep it visible */
  .dp-qr{display:none}
  /* User pill: hide the name, keep the avatar + caret */
  .user-pill-name{display:none}
  /* Page header: stack title + actions */
  .ph{flex-direction:column;align-items:stretch;gap:10px}
  .ph-acts{justify-content:flex-end;flex-wrap:wrap}
  /* Form detail card meta-block: stack the dp-brand and dp-main */
  .dp-meta{grid-template-columns:1fr!important}
  /* Make every wtbl scrollable horizontally inside its wrapper */
  .wc .wcb>table.wtbl, .wcb>.tbl-scroll, .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Admin Monitor KPI cards: 2 across instead of 5 */
  .kpis{grid-template-columns:repeat(2,1fr)!important}
  /* Smaller stamps on phones */
  .stamp{font-size:11px;padding:6px 10px}
  /* Approval funnel labels readable */
  #mon_funnel .wcb>div:last-child{font-size:11px}
}

@media(max-width:420px){
  /* KPI cards: full width on small phones */
  .kpis{grid-template-columns:1fr!important}
  /* Quick action buttons: full width so they're easy to tap */
  #mon_grid + div .bgh, .ph-acts button{flex:1}
  /* Footer text smaller */
  .wf-foot{font-size:10.5px;padding:12px 12px 16px}
  /* Login card padding */
  .lcard .lform, .lcard .lhero{padding:24px 20px}
  .lcard .lhero h1{font-size:24px;line-height:1.1}
  /* Form detail header title size */
  .formhdr-t{font-size:18px;white-space:normal}
}

/* ═══ COLLAPSED SIDEBAR ═══ */
.sbrand{position:relative}
.sb-collapse{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:1px solid transparent;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:background .12s,color .12s,border-color .12s}
.sb-collapse:hover{background:var(--bg);color:var(--ink);border-color:var(--line)}
.sb-collapse svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
/* keep #ma width transitions so pinned/rail toggle is smooth */
@media(min-width:1025px){#sb,#ma{transition:width .18s var(--ease),margin-left .18s var(--ease)}}
/* Boot flicker suppressors:
 *  - wf-pin-boot: localStorage said the user pinned the sidebar; widen straight to full so
 *    we don't animate from the default rail. The matching #sh.sb-pinned rules kick in
 *    moments later from JS without any visual change.
 *  - wf-noanim: blocks the width/margin transition on #sb/#ma during the very first paint,
 *    removed by JS once the layout has settled (next animation frame). */
@media(min-width:1025px){html.wf-pin-boot #sb{width:var(--sw)}html.wf-pin-boot #ma{margin-left:var(--sw)}}
.wf-noanim,.wf-noanim *{transition:none!important;animation:none!important}

/* ═══ BOLDER ACTIVE STATE ═══ */
.slink.active{background:var(--orange-d,#e07330)10;background:linear-gradient(90deg,rgba(245,132,66,.10),transparent);color:var(--ink);font-weight:600;position:relative}
.slink.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--orange);border-radius:0 3px 3px 0}
.slink.active i,.slink.active svg{color:var(--orange)}
.slink.sm.active{background:rgba(245,132,66,.07)}

/* Reports Generator — dropdown + filter row layout */
.wc:has(.rep-2col) .wch h2,.wc:has(.rep-flt) .wch h2{font-size:17px;font-weight:800;text-transform:none;letter-spacing:-.2px;color:var(--ink)}
.ph-crumb{font-size:12.5px;color:var(--muted)}
.ph-crumb a{color:var(--primary);cursor:pointer;text-decoration:none}
.ph-crumb a:hover{text-decoration:underline}
.rep-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.rep-row-bad td{color:var(--danger-700)}
.rep-late{color:var(--danger-700);font-weight:700}
.rep-ref{color:var(--accent-600);font-weight:inherit;font-size:inherit;text-decoration:none;cursor:pointer}
.rep-ref:hover{color:var(--accent-700);text-decoration:none}
.rep-pp-wrap{width:72px}
.rep-pp-wrap .ssel-btn{height:34px;padding:0 28px 0 10px;font-size:12.5px;font-weight:600}
.rep-dt-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.rep-dt-search{position:relative;flex:0 1 320px;min-width:220px}
.rep-dt-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.rep-dt-search input{width:100%;height:38px;padding:0 12px 0 36px;font-size:13px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);outline:none;font-family:inherit;transition:border-color .12s,box-shadow .12s}
.rep-dt-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(55,65,81,.10)}
.rep-dt-search input::placeholder{color:var(--muted)}
.rep-dt-acts{display:flex;gap:8px}
.rep-flt{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:14px}
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:12px}
.rep-field .wfl{display:block;margin-bottom:6px}
.rep-sec{margin-top:14px}
.rep-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.rep-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;background:var(--surface);cursor:pointer;user-select:none}
.rep-chip input{accent-color:var(--primary)}
.rep-chip:hover{border-color:var(--primary);color:var(--brand-900)}
.rep-chip.on{background:var(--brand-50);border-color:var(--primary);color:var(--brand-900)}
.rep-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;padding:14px 0}
.rep-kpi{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-align:center}
.rep-kpi-n{font-size:22px;font-weight:800;line-height:1;color:var(--ink)}
.rep-kpi-l{font-size:11px;color:var(--muted);margin-top:4px}

/* ═══ RECENT FORMS IN SIDEBAR ═══ */
#sb-recent .slink.sm{padding:6px 14px;font-size:12.5px}
#sb-recent .recent-ref{font-family:var(--font-mono,monospace);color:var(--muted);font-size:11px;margin-left:4px}

/* ═══ SEARCH PALETTE ═══
   Command-palette-style search; opens over the app, doesn't navigate. */
#spal{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:9000;display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;backdrop-filter:blur(4px)}
#spal.on{display:flex}
.spal-box{width:100%;max-width:640px;background:var(--surface);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.30),0 4px 12px rgba(0,0,0,.10);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.spal-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.spal-h svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.spal-h input{flex:1;border:0;outline:0;font-size:15px;color:var(--ink);background:transparent;font-family:inherit;min-height:0;padding:2px 0}
.spal-h input::placeholder{color:var(--muted)}
.spal-esc{font-family:var(--font-mono,monospace);font-size:10.5px;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--muted)}
.spal-b{flex:1;overflow-y:auto;padding:6px 0}
.spal-hint{padding:24px;text-align:center;color:var(--muted);font-size:13px}
.spal-r{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;border-left:3px solid transparent}
.spal-r:hover,.spal-r.act{background:var(--bg);border-left-color:var(--orange)}
.spal-r-ic{width:32px;height:32px;border-radius:8px;background:var(--primary-50);display:flex;align-items:center;justify-content:center;flex:none}
.spal-r-ic svg{width:16px;height:16px;stroke:var(--primary);fill:none;stroke-width:2}
.spal-r-t{flex:1;min-width:0}
.spal-r-t1{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.spal-r-t2{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spal-cat{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:10px 16px 4px}

/* Touch-friendly minimum sizes everywhere the user taps */
@media(pointer:coarse){
  button, .slink, .bg, .bgh, .bn, .bow, .bod, .bdel, .ibtn, .ti{min-height:40px}
  .wfi, input, select, textarea{min-height:42px;font-size:16px}
  /* iOS won't zoom on focus if input font ≥ 16px */
}

/* ════════════════════════════════════════════════════════════════════
   ADMIN CONTROL PANEL  ·  data-dense identity, scoped to #view.adm
   The router toggles `.adm` on the view container for every /admin/* route,
   so these rules restyle the admin section WITHOUT affecting the rest of the app.
   ════════════════════════════════════════════════════════════════════ */
/* Breadcrumbs read as muted slate links, not orange */
.adm .crumb a,.adm .ph-crumb a{color:var(--primary);font-weight:600}
.adm .crumb a:hover,.adm .ph-crumb a:hover{color:var(--ink);text-decoration:underline}
/* One compact header rhythm whether a view uses .ph or .formhdr */
.adm .ph,.adm .formhdr{margin-bottom:14px;padding-bottom:11px}
.adm .ph-l h1,.adm .formhdr-t{font-size:19px;letter-spacing:-.3px}
.adm .ph-l p{font-size:12px}
/* Cards sit tighter together in the control panel */
.adm .wc{border-radius:10px}
.adm .wc+.wc{margin-top:12px}
/* Denser rows than the app default — more records per screen */
.adm .wtbl thead th{padding:8px 13px}
.adm .wtbl tbody td{padding:7px 13px;font-size:13px}
/* Consistent per-row action cell (Edit / Delete ghost buttons) */
.adm .row-acts{display:inline-flex;gap:4px;justify-content:flex-end;white-space:nowrap}
.adm .row-acts button{display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:12px;font-weight:600;padding:4px 9px;border-radius:7px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.adm .row-acts button:hover{background:var(--brand-50);color:var(--ink);border-color:var(--line)}
.adm .row-acts button.del:hover{background:var(--danger-50);color:var(--danger-700);border-color:var(--danger-50)}
.adm .row-acts button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* ── Admin overview hub (vAdmHome) ─────────────────────────────────── */
.ah-wrap{display:flex;flex-direction:column;gap:18px}
.ah-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.ah-stat{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:13px 15px;display:flex;flex-direction:column;gap:3px;transition:border-color .12s,box-shadow .12s;cursor:pointer}
.ah-stat:hover{border-color:var(--line-2);box-shadow:0 2px 10px -6px rgba(16,24,40,.18)}
.ah-stat .n{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1}
.ah-stat .l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.ah-sec{display:flex;flex-direction:column;gap:9px}
.ah-sec-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);padding:0 2px}
.ah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}
.ah-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 14px;cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .04s}
.ah-card:hover{border-color:var(--primary);box-shadow:0 4px 16px -8px rgba(16,24,40,.25)}
.ah-card:active{transform:translateY(1px)}
.ah-ico{flex:0 0 auto;width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--primary)}
.ah-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.ah-tx{min-width:0}
.ah-card .t{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.2}
.ah-card .d{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.ah-card .ah-cnt{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:800;color:var(--muted);background:var(--brand-50);border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}
/* Per-user permission-pack assignment chips (user form → Permission tab) */
.adm .uf-packs{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.adm .upk{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.adm .upk:hover{border-color:var(--primary)}
.adm .upk.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.adm .upk-c{font-size:10px;font-weight:800;background:rgba(0,0,0,.07);border-radius:999px;padding:1px 6px}
.adm .upk.on .upk-c{background:rgba(255,255,255,.22)}
/* Inline required-field validation feedback (highlight + focus on submit) */
.wfi.invalid{border-color:var(--red,#dc2626)!important;box-shadow:0 0 0 3px rgba(220,38,38,.13)!important}
/* Config pages (PMS / Email) — status header card + toggle switch + hints */
.cfg-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;background:var(--bg);border:1px solid var(--line);border-radius:10px;margin-bottom:20px;flex-wrap:wrap}
.cfg-hd-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:5px}
.cfg-sw{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);user-select:none}
.cfg-sw input{position:absolute;opacity:0;width:0;height:0}
.cfg-sw-tr{width:42px;height:24px;border-radius:999px;background:var(--line-2);transition:background .15s;flex:0 0 auto;position:relative}
.cfg-sw-tr::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.cfg-sw input:checked+.cfg-sw-tr{background:var(--success,#16a34a)}
.cfg-sw input:checked+.cfg-sw-tr::after{transform:translateX(18px)}
.cfg-sw input:focus-visible+.cfg-sw-tr{box-shadow:0 0 0 3px rgba(55,65,81,.25)}
.cfg-hint{font-size:11.5px;color:var(--muted);margin:-2px 0 13px;line-height:1.5}

/* ════════════ Admin responsive hardening (mobile) ════════════ */
/* Sticky first (label) column on the wide permission matrices so the module
   name stays visible while the action columns scroll inside .tbl-scroll. */
.adm .uf-pm th:first-child,.adm .uf-pm td:first-child{position:sticky;left:0;z-index:1}
.adm .uf-pm td:first-child{background:var(--surface);border-right:1px solid var(--line)}
.adm .uf-pm th:first-child{background:var(--primary);z-index:2}
.adm #pkform .wtbl th:first-child,.adm #pkform .wtbl td:first-child{position:sticky;left:0;z-index:1}
.adm #pkform .wtbl td:first-child{background:var(--surface);border-right:1px solid var(--line)}
.adm #pkform .wtbl th:first-child{background:var(--bg);z-index:2}
/* User-form tabs: wrap instead of overflowing. */
.adm .uf-tabs{flex-wrap:wrap}
@media(max-width:560px){
  /* uf-row: label above field (was fixed 130px). */
  .adm .uf-row{flex-direction:column;align-items:flex-start;gap:6px;padding:6px 0}
  .adm .uf-row .uf-l{flex:0 0 auto;width:100%;text-align:left}
  .adm .uf-row .uf-r{width:100%}
  .adm .uf-tab{flex:1;padding:8px 10px;font-size:12.5px;text-align:center}
  /* Hotels-Roles table (.uf-ht, not in a tbl-scroll) → stacked cards. */
  .adm .uf-ht thead{display:none}
  .adm .uf-ht,.adm .uf-ht tbody,.adm .uf-ht tr,.adm .uf-ht td{display:block}
  .adm .uf-ht tr{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px}
  .adm .uf-ht td{border:none;padding:4px 0}
  .adm .uf-ht td:first-child{font-weight:700;color:var(--ink);margin-bottom:6px}
  .adm .uf-ht select,.adm .uf-ht .ssel{width:100%}
}
@media(max-width:480px){
  /* List/log toolbars: search + action buttons stack full-width. */
  .adm .uc-toolbar{flex-direction:column;align-items:stretch;gap:8px}
  .adm .uc-toolbar .uc-search,.adm .uc-toolbar .sinpw{min-width:0!important;width:100%!important}
  .adm .uc-toolbar select{min-width:0;width:100%}
  .adm .uc-toolbar .bg,.adm .uc-toolbar .bgh{width:100%;justify-content:center}
  .adm .lgfilt{flex-direction:column;align-items:stretch}
  .adm .lgfilt .lgsearch{min-width:0;width:100%;margin-left:0}
  .adm .lgfilt>button[onclick*="Export"]{margin-left:0!important;width:100%}
  /* Tighter cells so dense admin tables stay legible (incl. 11-col Activity Log). */
  .adm .wtbl thead th{padding:6px 9px;font-size:11.5px}
  .adm .wtbl tbody td{padding:6px 9px;font-size:12.5px}
  .adm .lgtbl thead th,.adm .lgtbl tbody td{padding:5px 7px;font-size:11px}
  .adm .lgtbl .lgn-h,.adm .lgtbl .lgn{width:24px}
  .adm .uf-pm th{padding:7px 6px;font-size:11px}
  .adm .uf-pm td{padding:7px 6px}
  .adm .uf-pm th .pm-ca{font-size:9.5px}
  .adm .uf-pm th:first-child,.adm .uf-pm td:first-child{min-width:96px}
  .adm #pkform .wtbl th:first-child,.adm #pkform .wtbl td:first-child{min-width:96px}
}

/* ════════════ Admin design-system polish (page-by-page review) ════════════ */
/* 1. Header unification: legacy .formhdr renders identically to .ph; subtitles stack */
.adm .formhdr,.adm .ph{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line)}
.adm .formhdr-l,.adm .ph-l{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.adm .formhdr-l h1,.adm .formhdr-t,.adm .ph-l h1{font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--ink);line-height:1.2;margin:0}
.adm .ph-l p,.adm .formhdr-l p{margin:3px 0 0;font-size:12px;color:var(--muted);line-height:1.4;white-space:normal}
.adm .crumb,.adm .ph-crumb{font-size:12px;color:var(--muted);font-weight:500;align-self:flex-end}
.adm .crumb a,.adm .ph-crumb a{color:var(--primary);font-weight:600}
.adm .crumb a:hover,.adm .ph-crumb a:hover{color:var(--ink);text-decoration:underline}
/* 2. Dark matrix headers → light .wtbl system */
.adm .uf-pm th,.adm .uf-ht th{background:var(--bg);color:var(--muted);font-weight:600;text-transform:none;border-bottom:1px solid var(--line)}
.adm .uf-pm th{border-right-color:var(--line-2)}
.adm .uf-pm th .pm-ca{color:var(--primary);font-weight:500;text-decoration:none}
.adm .uf-pm th:first-child,.adm #pkform .wtbl th:first-child{background:var(--bg)}
.adm .uf-pm td.pm-act a,.adm #pkform .pm-act a{color:var(--primary);font-weight:500;text-decoration:none}
.adm .uf-pm td.pm-act a:hover,.adm #pkform .pm-act a:hover{color:var(--ink);text-decoration:underline}
.adm .uf-ht td{font-size:13px;border-bottom-color:var(--line)}
.adm .uf-ht td:first-child{color:var(--ink)}
.adm .uf-pm tr.perm-grp td{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--primary);padding:8px 13px;background:var(--brand-50)}
/* 3. Form labels + pack group sublabel */
.adm .uf-row .uf-l{color:var(--muted);font-weight:600}
.adm .section-label{font-size:11px;padding:8px 0 4px;margin-bottom:10px}
.pk-mod-group{font-size:11px;color:var(--muted);margin-top:2px}
/* 4. Hub label typography + gap */
.ah-stat .l{font-weight:800;letter-spacing:.8px}
.ah-wrap{gap:16px}
/* 5. Empty-state rhythm */
.adm .empty{padding:28px 20px;text-align:center}
.adm .empty p{margin:0}
.adm .empty p+p{margin-top:4px}
/* 6. Shared form-wrap + save-bar */
.adm .uf-form-w{max-width:760px;margin:0 auto}
.adm .save-bar{margin-top:16px;display:flex;gap:9px;justify-content:flex-end;align-items:center}
.adm .bsave{padding:11px 32px;font-size:14px;letter-spacing:.3px}

/* ════════════ App-wide pagination — Style D (rows-per-page + numbered pages) ════════════ */
.pgr-rows{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.pgr-rows .ssel{width:auto;display:inline-block}
.pgr-rows .ssel-btn{height:32px;min-height:32px;padding:0 6px 0 8px;width:auto;min-width:0;max-width:none;font-size:12.5px;border-radius:7px;gap:4px}
.pgr-rows .ssel-val{padding-right:0;font-variant-numeric:tabular-nums}
.pgr-rows .ssel-chev{width:12px;height:12px;flex-shrink:0}
.pgr-rows .ssel.open .ssel-btn,.pgr-rows .ssel-btn:hover{background:var(--brand-50);border-color:var(--primary);color:var(--primary)}
.pgr-nav{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:center}
.pgr-b{min-width:30px;height:30px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);color:var(--ink);font-size:12.5px;cursor:pointer;font-variant-numeric:tabular-nums;transition:background .12s,border-color .12s,color .12s}
.pgr-b:hover:not(:disabled):not(.pgr-on){background:var(--brand-50);border-color:var(--primary)}
.pgr-b:disabled{opacity:.4;cursor:default}
.pgr-b.pgr-on{background:var(--brand-50);color:var(--primary);border-color:var(--primary);font-weight:600}
.pgr-b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.pgr-e{min-width:18px;text-align:center;color:var(--muted);font-size:12.5px}
.pgr-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pgr-left{display:inline-flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0}
.pagbar-top{border-top:none;border-bottom:1px solid var(--line)}
.pagbar.pagbar-inline{border:none;padding:0;background:transparent;width:auto}
.expmenu{background:var(--surface);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:3px;z-index:1000;display:flex;flex-direction:column;gap:0}
.expmenu-opt{display:flex;justify-content:flex-start;align-items:center;gap:8px;padding:6px 12px;border:0;background:transparent;border-radius:5px;cursor:pointer;font-size:12.5px;color:var(--ink);font-family:inherit;text-align:left;white-space:nowrap;line-height:1.4}
.expmenu-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}
.expmenu-ico svg{width:14px;height:14px;display:block}
.expmenu-opt:hover{background:var(--brand-50);color:var(--primary)}
.expmenu-lbl{font-weight:500}
.expmenu-sub{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.mail-tools .mt-sec{flex:1 1 0;min-width:0;display:flex;align-items:center}
.mail-tools .mt-left{justify-content:flex-start}
.mail-tools .mt-mid{justify-content:center}
.mail-tools .mt-right{justify-content:flex-end}
.mail-tools .mt-right .sinpw{width:100%}
.mail-tools .mt-left .pgr-rows .ssel-btn{width:100%;justify-content:space-between}
.mail-tools .sinpw,.mail-tools .bgh,.mail-tools .pgr-rows .ssel-btn{box-sizing:border-box}
@media(max-width:640px){.mail-tools{flex-wrap:wrap}.mail-tools .mt-sec{flex:1 1 100%;justify-content:flex-start}.mail-tools .mt-right .sinpw{max-width:100%!important;width:100%!important}}
.pagbar-bot{border-top:1px solid var(--line);justify-content:space-between;color:var(--muted);padding:8px 12px;gap:12px}
@media(max-width:560px){.pgr-count{display:none}.pagbar{gap:8px;flex-wrap:wrap}}

/* ===== Form-list page polish ===== */
.crumb{font-size:12.5px;font-weight:500;color:var(--muted);margin-top:8px;letter-spacing:0}
.crumb a{color:var(--muted);text-decoration:none;transition:color .15s}
.crumb a:hover{color:var(--primary)}

.fbar{gap:14px 20px;padding-top:14px;margin-top:14px}
.fb-f label{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:2px}

.wtbl thead th{font-size:12.5px;font-weight:600;color:var(--brand-900,#0f1b2d);text-transform:none;letter-spacing:.1px;padding:11px 14px;background:var(--brand-50,#eef0f3);border-bottom:1px solid var(--brand-200,#c2c8d2)}
.wtbl thead th.wsort:hover{background:var(--brand-100,#dde1e7);color:var(--brand-900,#0f1b2d)}
.wtbl tbody td{font-size:13.5px;line-height:1.55;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'cv11' 1,'ss01' 1}
.wtbl tbody tr:not(.noc):hover{background:var(--primary-50);box-shadow:inset 3px 0 0 var(--primary)}
.wtbl tbody tr{transition:background .12s,box-shadow .12s}
.wtbl tbody td.tid{font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums}

.badd{font-weight:600;letter-spacing:.2px}
.dl-top{margin-bottom:2px}

/* ─────────────────────────────────────────────────────────────────
   Post-restore patch — comment composer + dropzone polish
   (2026-06-24, additive only; matches morning aesthetic — slate
   primary + orange accent, no design-system overhaul).
   Styles ONLY classes views.js emits that were left un-styled after
   the morning restore. No JS changes, no markup changes.
   ───────────────────────────────────────────────────────────────── */

/* — Composer avatar circle (the "AD" initials) — */
.cmt-comp-av,
.cmt-av,
.cmt-comp-row > .cmt-comp-av{
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: var(--brand-50, #eef0f3);
  color: var(--primary, #374151);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center;
}

/* — Composer 2-col row: avatar + textarea — */
.cmt-comp-row{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: flex-start;
}
.cmt-comp-row textarea,
.cmt-compose textarea{
  width: 100%;
  min-height: 60px;
  padding: 9px 11px;
  border: 1px solid var(--line-2, #d6dbe1);
  border-radius: 8px;
  font: inherit; font-size: 13.5px; color: var(--ink, #1b2330);
  background: #fff; line-height: 1.5;
  resize: vertical; box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.cmt-comp-row textarea:focus,
.cmt-compose textarea:focus{
  outline: 0;
  border-color: var(--primary, #374151);
  box-shadow: 0 0 0 3px rgba(55, 65, 81, .10);
}

/* — Composer bottom row: privacy toggle + send button — */
.cmt-comp-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Privacy checkbox wrapper */
.cmt-privbox{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #6b7280);
  cursor: pointer;
  user-select: none;
}
.cmt-privbox input[type="checkbox"]{
  accent-color: var(--primary, #374151);
  width: 14px; height: 14px;
  margin: 0;
}
.cmt-tgl{ /* visual chip the JS pairs with the checkbox; we render it
            as the same checkbox-styled affordance for simplicity. */
  display: none;
}
.cmt-tlbl{font-weight: 600; color: var(--ink, #1b2330); font-size: 12px}
.cmt-thint{font-size: 11px; color: var(--muted, #6b7280); margin-left: 2px}

/* — Comment send button — */
.cmt-send{
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px;
  padding: 0 14px;
  background: var(--primary, #374151);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background-color .12s, box-shadow .12s;
  outline: 0;
}
.cmt-send:hover{background: var(--primary-700, #2a313c)}
.cmt-send:focus-visible{box-shadow: 0 0 0 3px rgba(55, 65, 81, .18)}

/* — Dropzone cloud-icon medallion (the morning rule renders a plain
     bordered box; the engine emits an inline svg that needs framing). */
.dropzone{
  position: relative;
  min-height: 140px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  text-align: center;
  cursor: pointer;
}
.dropzone > svg{
  width: 24px; height: 24px;
  stroke: var(--muted, #6b7280);
  fill: none;
  margin-bottom: 2px;
}
.dropzone .tm{
  font-size: 11.5px; color: var(--muted, #6b7280);
  margin: 0;
}
.dz-text{
  font-size: 13px; color: var(--ink, #1b2330);
  font-weight: 500; line-height: 1.5; margin: 0;
}
.dz-browse{
  color: var(--orange, #f58442);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dz-browse:hover{color: var(--orange-d, #db7333)}

/* — Empty-state under the dropzone (the "No attachments yet" icon row) — */
.att-empty,
[data-att-empty]{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px 4px;
  color: var(--muted, #6b7280);
  font-size: 12.5px;
}
.att-empty svg{
  width: 22px; height: 22px;
  stroke: var(--muted, #6b7280);
  fill: none; stroke-width: 1.6;
  flex: none; opacity: .7;
}
.att-empty-t{font-weight: 600; color: var(--ink, #1b2330); font-size: 13px}
.att-empty-s{font-size: 11.5px; color: var(--muted, #6b7280); margin-top: 1px}