/* =====================================================================
   IT Ticketing Portal & KPI — Production Theme
   ===================================================================== */
.req{color:#dc2626;font-weight:700}
/* Ticket view: keep the title + action buttons pinned while scrolling. */
html{scroll-behavior:smooth}
.tv-head{position:sticky;top:var(--header-h);z-index:30;background:var(--bg);
  padding:14px clamp(16px,3vw,40px);margin:-28px clamp(-40px,-3vw,-16px) 18px;
  border-bottom:1px solid var(--border);align-items:center}
.tv-head .gap-wrap{align-items:center}
/* Back-button arrow icon aligns with its label (desktop) and centers on mobile. */
.tv-back-ic{display:inline-flex;align-items:center;vertical-align:middle}
@media (max-width:1024px){.tv-head{top:var(--header-h)}}
/* Pin the page header / period filter on KPI & report pages while scrolling. */
.page-head.sticky-head{position:sticky;top:var(--header-h);z-index:30;background:var(--bg);
  padding:14px clamp(16px,3vw,40px);margin:-28px clamp(-40px,-3vw,-16px) 18px;
  border-bottom:1px solid var(--border)}
/* Reports: lock the title + period filter together as one pinned block. */
.sticky-stack{position:sticky;top:var(--header-h);z-index:30;background:var(--bg);
  padding:14px clamp(16px,3vw,40px) 16px;margin:-28px clamp(-40px,-3vw,-16px) 18px;
  border-bottom:1px solid var(--border)}
.sticky-stack .page-head{margin:0 0 12px}
.sticky-stack .count-bar{margin:0 0 12px}
.sticky-stack > form.card,
.sticky-stack > details.card{box-shadow:none;border:1px solid var(--border);margin-bottom:0!important}
/* Collapsible Search & Filters panel (tickets list) */
.filter-card{padding:0;overflow:hidden}
.filter-card > summary.filter-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;cursor:pointer;list-style:none;font-weight:600;color:var(--text);user-select:none}
.filter-card > summary.filter-summary::-webkit-details-marker{display:none}
.filter-card > summary.filter-summary::marker{content:""}
.filter-card .fs-left{display:inline-flex;align-items:center;gap:8px}
.filter-card .fs-badge{font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;
  background:var(--primary-soft);color:var(--primary)}
.filter-card .fs-chev{transition:transform .18s ease;color:var(--muted)}
.filter-card[open] > summary .fs-chev{transform:rotate(180deg)}
.filter-card[open] > summary.filter-summary{border-bottom:1px solid var(--border)}
/* Field-label icons: only surfaced on the compact phone filter (below). */
.filter-grid label .flbl-ic{display:none}
/* Search & Filters form: roomy 5-up row on desktop, then a clean stack on
   smaller screens so nothing spills off the edge on a phone. */
.filter-grid{grid-template-columns:2fr 1fr 1fr 1fr auto;align-items:end;gap:12px}
.filter-grid label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:5px}
@media (max-width:820px){
  .filter-grid{grid-template-columns:1fr 1fr;gap:12px}
  .filter-grid > div:first-child{grid-column:1 / -1}   /* Search spans full width */
  .filter-grid > div:last-child .btn{width:100%}
}
@media (max-width:480px){
  /* Compact 2-column filter on phones (mirrors the Purchases layout): Search spans
     the full width, then Status|Priority and Category|Filter pair up so the panel
     fits the screen instead of a tall single-column stack. Search-full + button
     width:100% cascade from the max-width:820px block above.
     NB: uses .grid.filter-grid so the tight gap beats the base `.grid{gap:18px}`. */
  .grid.filter-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
  .filter-grid label{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;margin-bottom:2px}
  .filter-grid label .flbl-ic{display:inline-block;width:13px;height:13px;color:var(--primary);flex:0 0 auto}
  .filter-grid select,.filter-grid input{font-size:.82rem;padding-top:6px;padding-bottom:6px}
  .filter-grid > div:last-child .btn{width:100%;justify-content:center;padding-top:9px;padding-bottom:9px}
  /* Tighten the form padding — scoped to the Tickets filter (the one holding
     .filter-grid) so the Purchases filter is untouched. */
  .filter-card form:has(.filter-grid){padding:2px 12px 12px!important}
}
/* "Ticket Views" collapsible card wrapping the quick-filter count tiles. */
.views-body{padding:12px 14px 14px}
.views-card .count-bar{margin-bottom:0}
/* Views + Filters bars: stacked on desktop, side-by-side on phones. Opening
   either one expands it to the full width (the other wraps below). */
.tk-bars{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.tk-bars > details{margin-bottom:0}
/* DESKTOP ONLY: put Ticket Views / Search & Filters side-by-side on ONE line
   (each half width) and slim them down — they read as too tall/wide stacked on
   wide screens. Opening either expands it to full width (the other wraps below).
   The mobile layout keeps its own side-by-side rules further down. */
@media (min-width:641px){
  /* .filter-card{padding:0} (up top) is silently outranked by the later
     .card{padding:24px …}; the summary/body/form already supply their own
     padding, so strip the wrapper's — that stray ~48px was the loose spacing. */
  .card.filter-card{padding:0}
  .tk-bars{flex-direction:row;flex-wrap:wrap;gap:10px;margin-bottom:12px}
  .tk-bars > details{flex:1 1 calc(50% - 5px);min-width:0}
  .tk-bars > details[open]{flex:1 1 100%}
  .tk-bars > details > summary.filter-summary{padding:6px 14px;line-height:1.2}
  /* Slim the Ticket Views tiles down — the stat card reads far too tall on
     desktop. Trim the body padding + the tile height/padding + icon size. */
  .views-card .views-body{padding:6px 12px 8px}
  .views-card .count-chip{min-height:0;padding:7px 11px;gap:9px}
  .views-card .count-chip .cc-ic{width:26px;height:26px}
  .views-card .count-chip .cc-n{font-size:1.1rem}
  /* Same treatment for the expanded Search & Filters form — the fields sat far
     too far apart. Tighter form padding, label gap and field height so the whole
     panel is compact. Desktop only; mobile keeps its own rules below. */
  .filter-card form:has(.filter-grid){padding:6px 14px 10px!important}
  .grid.filter-grid{gap:10px}
  .filter-grid label{margin-bottom:2px;font-size:.72rem}
  .filter-grid input,
  .filter-grid select,
  .filter-grid .cbox-btn{padding-top:7px!important;padding-bottom:7px!important;font-size:.86rem}
}
/* Bar labels: full on desktop, shortened only on phones. */
.filter-summary .lbl-short{display:none}
@media (max-width:640px){
  .filter-summary .lbl-full{display:none}
  .filter-summary .lbl-short{display:inline}
}
/* Mobile compact bulk-assign bar (below Views/Filters, shown once a ticket is
   ticked). Desktop keeps the full bar in the list footer instead. */
.mbulk{display:none}
@media (max-width:640px){
  .mbulk:not([hidden]){display:flex;flex-direction:column;gap:8px;margin-bottom:8px;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow-sm)}
  .mbulk-row{display:flex;align-items:center;gap:8px;width:100%}
  .mbulk-count{flex:0 0 auto;font-size:.76rem;color:var(--muted);white-space:nowrap}
  .mbulk-count b{color:var(--text);font-weight:800}
  .mbulk-sel{flex:1 1 auto;min-width:0;width:auto;font-size:.86rem;padding:9px 11px;
    border:1px solid var(--border-strong);border-radius:9px;background-color:var(--card);color:var(--text)}
  /* When Assign / With-selected are upgraded to custom dropdowns (cbox), the
     visible element is the mirror — make it fill the row like the select did. */
  .mbulk-row .cbox--auto{flex:1 1 auto!important;min-width:0!important;width:auto!important;max-width:none!important}
  /* Match the OK button's height to the dropdown beside it (native select /
     cbox mirror are ~34px). Higher specificity than the base .btn padding. */
  .mbulk-row .mbulk-ok{flex:0 0 auto;min-width:48px;height:34px;padding:0 14px;justify-content:center;align-items:center}
}
@media (max-width:640px){
  .tk-bars{flex-direction:row;flex-wrap:wrap;gap:10px;margin-bottom:8px}
  .tk-bars > details{flex:1 1 calc(50% - 5px);min-width:0}
  .tk-bars > details[open]{flex:1 1 100%}
  /* Thinner Views/Filters bars. */
  .tk-bars > details > summary.filter-summary{padding:5px 12px;font-size:.86rem;line-height:1.1}
  .tk-bars > details > summary.filter-summary .ic-sm{width:14px;height:14px}
  /* Hide the "active" badge on phones — the bars are narrow side-by-side. */
  .tk-bars .fs-badge{display:none}
  /* Tighten the sticky header's bottom so the ticket list / assign bar sit
     close under Views & Filters instead of leaving a big gap. Drop the
     separator line too — up close it read as a stray "cut" line above the card. */
  .sticky-stack-tk{padding-bottom:4px;margin-bottom:8px}
  /* Drop the sticky-header separator line on phones (works via style.css alone,
     no class needed) — up close it read as a stray "cut" line above the card. */
  .sticky-stack{border-bottom:none}
  /* The sticky page-head's -16px+ side margins overshot main's 14px padding,
     bleeding a few px past the viewport → a stray page-wide horizontal scrollbar.
     Match the margins to main's padding so it full-bleeds without overflowing. */
  .page-head.sticky-head,.sticky-stack{margin-left:-14px;margin-right:-14px}
}
@media print{.page-head.sticky-head,.sticky-stack{position:static;margin:0 0 8px;padding:0;border:none}
  .sticky-stack .page-head{margin:0 0 8px}}
#updateBox:target{box-shadow:0 0 0 3px rgba(99,102,241,.5);transition:box-shadow .2s}
.auth-aside .kb-link{display:flex;align-items:center;gap:13px;margin-top:18px;padding:13px 16px;border-radius:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;text-decoration:none;transition:.16s}
.auth-aside .kb-link:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.32)}
.auth-aside .kb-link .fi{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.16)}
.auth-aside .kb-link b{display:block;font-size:.92rem}
.auth-aside .kb-link span{display:block;font-size:.78rem;opacity:.82;margin-top:2px}
.auth-aside .kb-link .go{margin-left:auto;flex:0 0 auto;opacity:.7;transform:rotate(-90deg)}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* surfaces */
  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --surface-3:#eef2f8;
  --card:#ffffff;
  --input:#ffffff;
  --topbar-bg:rgba(255,255,255,.85);
  --border:#e6eaf2;
  --border-strong:#d6dce8;

  /* text */
  --text:#111827;
  --text-2:#374151;
  --muted:#6b7280;
  --muted-2:#9aa3b2;

  /* brand */
  --primary:#4f46e5;
  --primary-600:#4338ca;
  --primary-700:#3730a3;
  --primary-soft:#eef0fe;
  --primary-soft-2:#e0e3fd;
  /* accent aliases — follow the active theme so icon chips blend in every mode */
  --accent:var(--primary);
  --accent-soft:var(--primary-soft);

  /* sidebar (dark) */
  --side:#0f172a;
  --side-2:#162033;
  --side-hover:#1e293b;
  --side-text:#9aa6bd;
  --side-active:#ffffff;

  /* status accents */
  --green:#10b981; --green-soft:#d1fae5;
  --amber:#f59e0b; --amber-soft:#fef3c7;
  --red:#ef4444;   --red-soft:#fee2e2;
  --sky:#0ea5e9;   --sky-soft:#e0f2fe;

  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.06),0 6px 20px -6px rgba(16,24,40,.10);
  --shadow-lg:0 10px 40px -10px rgba(16,24,40,.22);
  --radius:16px;
  --radius-sm:10px;
  --sidebar-w:260px;
  --header-h:64px;
}

/* ============ BACKGROUND THEMES (CMYK + Dark) ============ */
html[data-theme="cyan"]{
  --bg:#eafaff;
  --primary:#0891b2;--primary-600:#0e7490;--primary-700:#155e75;
  --primary-soft:#dff5fb;--primary-soft-2:#c3ecf5;
}
html[data-theme="magenta"]{
  --bg:#fdeefb;
  --primary:#c026d3;--primary-600:#a21caf;--primary-700:#86198f;
  --primary-soft:#fbe4fd;--primary-soft-2:#f4d2fb;
}
html[data-theme="yellow"]{
  --bg:#fefbe6;
  --primary:#ca8a04;--primary-600:#a16207;--primary-700:#854d0e;
  --primary-soft:#fdf3cf;--primary-soft-2:#fceaab;
}
html[data-theme="dark"]{
  --bg:#0b1120;
  --surface:#121a2b;--surface-2:#172033;--surface-3:#1e293b;
  --card:#121a2b;--input:#0f1726;
  --topbar-bg:rgba(15,23,42,.88);
  --border:#26324a;--border-strong:#36456180;
  --text:#e6eaf2;--text-2:#cbd3e1;--muted:#94a3b8;--muted-2:#64748b;
  --primary:#6366f1;--primary-600:#818cf8;--primary-700:#a5b4fc;
  --primary-soft:#1d2440;--primary-soft-2:#262f57;
  --green-soft:#0e3a2c;--amber-soft:#3a2f10;--red-soft:#3a1717;--sky-soft:#0b2c41;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow:0 1px 3px rgba(0,0,0,.5),0 6px 20px -6px rgba(0,0,0,.6);
  --shadow-lg:0 10px 40px -10px rgba(0,0,0,.7);
}
/* Dark-mode patches for components with hard-coded light surfaces */
html[data-theme="dark"] .topbar .search input,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background-color:var(--input);color:var(--text)}
html[data-theme="dark"] .topbar .search input:focus{background:var(--surface-2)}
/* Header action buttons sit on the dark page background, so lift them with a
   lighter surface + solid border to stop them blending in (keeps primary as-is). */
html[data-theme="dark"] .tv-head .btn:not(.btn-primary),
html[data-theme="dark"] .page-head .btn:not(.btn-primary){background:var(--surface-2);border-color:var(--border)}
html[data-theme="dark"] .tv-head .btn:not(.btn-primary):hover,
html[data-theme="dark"] .page-head .btn:not(.btn-primary):hover{background:var(--surface-3);border-color:var(--muted-2)}
/* SVG charts (KPI / review) — recolor hard-coded light fills for dark mode */
html[data-theme="dark"] svg line[stroke="#e7eaf1"]{stroke:#26324a}
html[data-theme="dark"] svg text[fill="#9aa3b2"]{fill:#7c889c}
html[data-theme="dark"] svg rect[fill="#f1f3f8"]{fill:#1b2336}
html[data-theme="dark"] svg text[fill="#1f2733"]{fill:#cbd3e1}
/* misc hard-coded white surfaces */
html[data-theme="dark"] .userchip .av{color:#fff}
/* Native date-picker: tint its accent (Today/Clear links, nav arrows, selected
   day) with the active theme's primary so the popup matches every theme. */
input[type="date"],
input[type="month"],
input[type="datetime-local"],
input[type="time"]{accent-color:var(--primary)}
/* Dark theme: also opt the control into the OS dark UA, so the calendar popup +
   spinners render dark and the icon auto-lightens (no manual invert). */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"]{color-scheme:dark}
/* KPI rating pills use inline mid-tone hex colors; lift them in dark mode so they blend & stay legible */
html[data-theme="dark"] .pill.rating-tag{filter:brightness(1.45) saturate(1.05)}

/* When printing the Dark theme, fall back to the light/default palette so
   pages come out on white paper (saves ink + stays readable). Other themes
   print fine as-is. */
@media print{
  html[data-theme="dark"]{
    --bg:#f4f6fb;
    --surface:#ffffff;--surface-2:#f7f9fc;--surface-3:#eef2f8;
    --card:#ffffff;--input:#ffffff;
    --topbar-bg:rgba(255,255,255,.85);
    --border:#e6eaf2;--border-strong:#d6dce8;
    --text:#111827;--text-2:#374151;--muted:#6b7280;--muted-2:#9aa3b2;
    --primary:#4f46e5;--primary-600:#4338ca;--primary-700:#3730a3;
    --primary-soft:#eef0fe;--primary-soft-2:#e0e3fd;
    --green-soft:#d1fae5;--amber-soft:#fef3c7;--red-soft:#fee2e2;--sky-soft:#e0f2fe;
  }
  html[data-theme="dark"] input,
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea{background-color:#ffffff;color:#111827;color-scheme:light}
  html[data-theme="dark"] svg line[stroke="#e7eaf1"]{stroke:#e7eaf1}
  html[data-theme="dark"] svg text[fill="#9aa3b2"]{fill:#9aa3b2}
  html[data-theme="dark"] svg rect[fill="#f1f3f8"]{fill:#f1f3f8}
  html[data-theme="dark"] svg text[fill="#1f2733"]{fill:#1f2733}
  html[data-theme="dark"] .pill.rating-tag{filter:none}
}

/* ============================================================================
   Custom themed date picker (assets/datepicker.js) — replaces the native
   <input type="date"> popup so the calendar fully follows var(--primary).
   ========================================================================== */
.dp-wrap{position:relative;display:block}
.dp-input{cursor:pointer}
.dp-wrap .dp-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted);pointer-events:auto;cursor:pointer;display:flex}
.dp-wrap .dp-icon svg{width:18px;height:18px}
.dp-wrap .dp-input{padding-right:34px}
.dp-pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:248px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 30px rgba(15,23,42,.18);padding:10px;font-size:.82rem;
  -webkit-user-select:none;user-select:none}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-title{font-weight:700;color:var(--text)}
.dp-title-btn{border:0;background:transparent;font:inherit;font-weight:700;color:var(--text);
  cursor:pointer;padding:2px 8px;border-radius:7px}
.dp-title-btn:hover{background:var(--primary-soft);color:var(--primary)}
.dp-nav{display:flex;gap:4px}
.dp-arrow{width:26px;height:26px;border:1px solid var(--border);border-radius:7px;
  background:var(--surface);color:var(--primary);font-size:1.05rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.dp-arrow:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dows{margin-bottom:2px}
.dp-dow{text-align:center;color:var(--muted);font-size:.7rem;font-weight:700;padding:2px 0}
.dp-day{aspect-ratio:1/1;border:0;background:transparent;border-radius:7px;color:var(--text);
  font:inherit;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dp-day:hover{background:var(--primary-soft);color:var(--primary)}
.dp-day.dp-out{color:var(--muted-2);opacity:.6}
.dp-day.dp-today{box-shadow:inset 0 0 0 1.5px var(--primary);font-weight:700}
.dp-day.dp-sel{background:var(--primary);color:#fff;font-weight:700}
.dp-day.dp-sel:hover{background:var(--primary);color:#fff}
.dp-years{grid-template-columns:repeat(3,1fr);gap:4px}
.dp-year{border:0;background:transparent;border-radius:7px;color:var(--text);font:inherit;
  font-size:.8rem;cursor:pointer;padding:10px 0;display:flex;align-items:center;justify-content:center}
.dp-year:hover{background:var(--primary-soft);color:var(--primary)}
.dp-year.dp-today{box-shadow:inset 0 0 0 1.5px var(--primary);font-weight:700}
.dp-year.dp-sel{background:var(--primary);color:#fff;font-weight:700}
.dp-year.dp-sel:hover{background:var(--primary);color:#fff}
.dp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--border)}
.dp-link{background:transparent;border:0;color:var(--primary);font:inherit;font-size:.8rem;
  font-weight:600;cursor:pointer;padding:2px 4px;border-radius:6px}
.dp-link:hover{background:var(--primary-soft)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:700;color:var(--text)}
svg.ic{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
svg.ic-sm{width:16px;height:16px}

/* ====================== AUTH ====================== */
.auth-wrap{
  height:100vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;
}
.auth-aside{
  position:relative;overflow-x:hidden;overflow-y:auto;color:#fff;padding:34px 46px;
  background:radial-gradient(900px 500px at 20% 10%,var(--primary),transparent),
             radial-gradient(700px 500px at 90% 90%,var(--primary-600),transparent),
             linear-gradient(135deg,#0f172a,#1e1b4b);
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
}
.auth-aside .logo-lg{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.15rem}
.auth-aside .logo-lg .mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.auth-aside h2{font-size:1.75rem;line-height:1.22;margin:0 0 12px;color:#fff;max-width:440px}
.auth-aside p{color:#c7d2fe;max-width:420px;margin:0}
.auth-aside .feats{display:grid;gap:13px;margin-top:22px}
.auth-aside .feat{display:flex;gap:12px;align-items:center;color:#e0e7ff;font-size:.95rem}
.auth-aside .feat .fi{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;place-items:center;border:1px solid rgba(255,255,255,.16)}
.auth-aside .copyr{color:#8b95b8;font-size:.8rem}
.auth-main{display:grid;place-items:center;padding:40px;background:var(--surface);overflow-y:auto}
.auth-card{width:100%;max-width:440px;margin:0}
.auth-card .auth-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.auth-card .auth-head>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.auth-card .logo{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;
  background:linear-gradient(135deg,var(--primary),#818cf8);box-shadow:0 8px 22px -6px rgba(79,70,229,.6)}
.auth-card .logo svg{display:block}
.auth-card h1{margin:0;font-size:1.5rem;line-height:1.2}
.auth-card p.sub{margin:0;color:var(--muted);font-size:.92rem;line-height:1.35}
.auth-card label{margin:11px 0 5px}
.auth-card input,.auth-card select{padding:9px 12px;font-size:.9rem}
/* Stop long <select> option text (e.g. store names) from forcing the 2-col
   grids wider than the card on mobile — which caused horizontal scroll. */
.auth-card .grid{min-width:0}
.auth-card .grid>div{min-width:0}
.auth-card input,.auth-card select{max-width:100%}
/* Dropdowns match the text inputs exactly (same height); keep room for chevron. */
.auth-card select{padding-top:9px;padding-bottom:9px;padding-right:34px;background-position:right 12px center}
/* The visible dropdown is the cbox button (not the hidden native select), so
   size IT to match the auth-card text inputs: same padding/font/radius/border.
   Force the cbox wrapper to fill its column (overrides the fixed inline width
   the cbox JS measures at load) so the dropdown is as wide as a text input. */
.auth-card .cbox--auto{display:block!important;width:100%!important;max-width:100%!important}
.auth-card .cbox-btn{width:100%;padding:9px 12px;font-size:.9rem;line-height:1.5;border-radius:10px;border:1px solid var(--border-strong)}
/* Keep the register form a compact one-pager on phones (no scroll), with the
   2-col rows (Store/Department, Password/Confirm) staying side by side. */
@media (max-width:560px){
  .auth-main{padding:20px 18px}
  .auth-card .auth-head{margin-bottom:14px}
  .auth-card label{margin:9px 0 4px}
  .auth-card .grid{gap:10px!important}
  .auth-card .grid label{font-size:.82rem;white-space:nowrap}
  .auth-card .demo-hint{margin-top:12px;padding:10px 12px;line-height:1.5}
  .auth-card .btn-primary{margin-top:14px!important}
}
.auth-card .remember-row{display:flex;align-items:center;gap:9px;margin:14px 0 0;cursor:pointer;
  font-size:.85rem;color:var(--text-2);font-weight:500;user-select:none}
.auth-card .remember-row input{width:16px;height:16px;padding:0;margin:0;flex:0 0 auto;accent-color:var(--primary);cursor:pointer}
.demo-hint{margin-top:20px;font-size:.8rem;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;line-height:1.8;text-align:center}
.avatar-edit{display:flex;align-items:center;gap:18px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.avatar-lg{width:96px;height:96px;border-radius:50%;flex:0 0 96px;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:var(--accent);color:#fff;font-weight:700;font-size:1.4rem}
.avatar-lg img{width:100%;height:100%;object-fit:cover}
.signup-cta{margin-top:16px;text-align:center;font-size:.9rem;color:var(--muted)}
.signup-cta a{color:var(--accent);font-weight:600;text-decoration:none}
.signup-cta a:hover{text-decoration:underline}

/* ---------------- Styled confirm modal ---------------- */
.ui-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
.ui-modal.open{display:flex;animation:uiFade .15s ease}
@keyframes uiFade{from{opacity:0}to{opacity:1}}
.ui-modal-card{width:100%;max-width:400px;background:var(--surface,#fff);color:var(--text);border:1px solid var(--border);
  border-radius:16px;padding:26px 24px 20px;box-shadow:0 24px 60px -12px rgba(15,23,42,.45);
  text-align:center;animation:uiPop .18s cubic-bezier(.16,1,.3,1)}
@keyframes uiPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.ui-modal-icon{width:50px;height:50px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--accent-soft,var(--primary-soft,#eef0fe));color:var(--accent,var(--primary,#4f46e5))}
.ui-modal-card.danger .ui-modal-icon{background:var(--red-soft,#fee2e2);color:var(--red,#dc2626)}
.ui-modal-title{margin:0 0 6px;font-size:1.12rem;font-weight:700}
.ui-modal-msg{margin:0 0 20px;color:var(--muted);font-size:.92rem;line-height:1.5;white-space:pre-line}
.ui-modal-actions{display:flex;gap:10px;justify-content:center}
.ui-modal-actions .btn{min-width:104px;justify-content:center}
/* Dark theme: force the confirm modal to the dark palette (explicit values so
   it never falls back to white regardless of variable resolution). */
html[data-theme="dark"] .ui-modal-card{background:#121a2b;color:#e6eaf2;border-color:#26324a}
html[data-theme="dark"] .ui-modal-title{color:#e6eaf2}
html[data-theme="dark"] .ui-modal-msg{color:#94a3b8}
html[data-theme="dark"] .ui-modal-cancel{background:#172033;border-color:#26324a;color:#e6eaf2}
html[data-theme="dark"] .ui-modal-cancel:hover{background:#1e293b}
html[data-theme="dark"] .ui-modal-card.danger .ui-modal-icon{background:#3a1717;color:#f87171}

/* ---------------- Custom file input ---------------- */
.file-field{position:relative;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.file-field .file-trigger{position:relative;flex:0 0 auto;display:inline-flex}
.file-field input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file-field .file-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border);font-weight:600;font-size:.88rem;color:var(--text);
  cursor:pointer;transition:border-color .15s,background .15s;white-space:nowrap}
.file-field .file-trigger:hover .file-btn{border-color:var(--accent);background:var(--card,#fff)}
.file-field .file-name{flex:1 1 220px;min-width:0;font-size:.85rem;color:var(--muted);line-height:1.5;
  align-self:center;word-break:break-word}
@media (max-width:880px){ .auth-wrap{grid-template-columns:1fr} .auth-aside{display:none} }

/* ---- Ticket details meta grid ---- */
.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);background:var(--card,#fff);
  border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:18px}
.meta-item{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--card,#fff);
  border-top:1px solid var(--border);border-left:1px solid var(--border)}
.meta-item:nth-child(-n+2){border-top:0}
.meta-item:nth-child(odd){border-left:0}
/* When the last cell is alone on its row (odd count), span full width so the
   grid has no empty, border-less gap (e.g. the row with Closed/Active Time). */
.meta-item:last-child:nth-child(odd){grid-column:1 / -1}
.meta-item .ml{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.meta-item .ml .ic{color:var(--muted)}
.meta-item b{font-size:.92rem;color:var(--text);word-break:break-word}
.meta-item.meta-danger{background:var(--red-soft,#fef2f2)}
.meta-item.meta-danger .ml,.meta-item.meta-danger .ml .ic{color:var(--red,#dc2626)}
@media (max-width:560px){
  .meta-grid{grid-template-columns:1fr}
  .meta-item{border-left:0}
  .meta-item:nth-child(-n+2){border-top:1px solid var(--border)}
  .meta-item:first-child{border-top:0}
}

/* ---- Mini toast (transient client-side hint) ---- */
.mini-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);z-index:9999;
  max-width:min(92vw,420px);padding:12px 18px;border-radius:12px;font-size:.9rem;font-weight:600;
  color:#fff;background:#0f172a;box-shadow:0 10px 30px rgba(0,0,0,.22);opacity:0;
  transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.mini-toast.show{opacity:1;transform:translate(-50%,0)}
.mini-toast.info{background:#1e293b}
.mini-toast.error{background:#b91c1c}
.mini-toast.success{background:#15803d}
/* MOBILE: force the toast to use most of the screen width (it wasn't expanding to
   its max-width), with a slightly smaller font, so a long message reads in ~3
   lines instead of a tall narrow column. */
@media (max-width:640px){
  .mini-toast{width:min(94vw,440px);max-width:min(94vw,440px);padding:11px 16px;font-size:.82rem;line-height:1.4;text-align:center}
}

/* ---- Note / reply attachments ---- */
.note-att-img{display:inline-block;margin-top:10px}
.note-att-img img{max-width:240px;max-height:200px;border-radius:10px;border:1px solid var(--border);display:block}
.note-att-file{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border);font-size:.85rem;font-weight:600;color:var(--text);
  text-decoration:none;max-width:100%;transition:border-color .15s,background .15s}
.note-att-file:hover{border-color:var(--accent)}
.note-att-file .ic{color:var(--muted);flex:none}
.note-att-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Reply to IT card ---- */
.reply-card{border-top:3px solid var(--accent)}
.reply-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.reply-ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft,#eef2ff);color:var(--accent)}
.reply-flag{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;padding:7px 12px;border-radius:9px;
  background:var(--amber-soft,#fffbeb);color:var(--amber,#b45309);font-size:.82rem;font-weight:600;
  border:1px solid var(--amber-border,#fde68a)}
.reply-flag .ic{flex:none}

/* ---- Image lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;
  background:rgba(15,23,42,.82);backdrop-filter:blur(2px);padding:56px 20px 20px}
.lightbox.open{display:flex;animation:uiFade .15s ease}
.lightbox .lb-img{max-width:94vw;max-height:88vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  background:#fff}
.lb-bar{position:absolute;top:0;left:0;right:0;height:48px;display:flex;align-items:center;gap:10px;
  padding:0 14px;color:#fff}
.lb-bar .lb-name{flex:1;font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:.95}
.lb-btn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.14);border:none;color:#fff;text-decoration:none;font-size:1.5rem;line-height:1;
  transition:background .15s}
.lb-btn:hover{background:rgba(255,255,255,.28)}
.lb-btn .ic{color:#fff}
.lb-close{font-size:1.7rem}
.lb-count{font-size:.82rem;font-weight:600;color:#fff;opacity:.8;letter-spacing:.02em;white-space:nowrap}
/* Prev/Next gallery arrows inside the viewer */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;
  border:1.5px solid rgba(255,255,255,.55);transition:background .18s,border-color .18s,transform .18s;z-index:2}
.lb-nav:hover{background:#fff;border-color:#fff;transform:translateY(-50%) scale(1.06)}
.lb-nav:hover .ic{color:#111}
.lb-nav .ic{width:22px;height:22px;color:#fff;transition:color .18s}
.lb-prev{left:18px}
.lb-prev .ic{transform:rotate(90deg)}
.lb-next{right:18px}
.lb-next .ic{transform:rotate(-90deg)}
/* Dot pagination (adapted from carousel design) */
.lb-dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:11px;z-index:2}
.lb-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.35);transition:background .18s,transform .18s}
.lb-dot:hover{background:rgba(255,255,255,.6)}
.lb-dot.active{background:#fff;transform:scale(1.25)}
@media(max-width:600px){.lb-nav{width:42px;height:42px}.lb-prev{left:8px}.lb-next{right:8px}.lb-dots{bottom:14px}}

/* ---- Inline image carousel (Details card) ---- */
.img-carousel{position:relative;margin:0 0 14px;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface-2)}
.ic-track{display:flex;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ic-slide{flex:0 0 100%;display:block;cursor:zoom-in;min-width:0}
.ic-slide img{display:block;width:100%;max-height:340px;object-fit:contain;background:var(--surface-3)}
.ic-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:1.5px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.4);color:#fff;z-index:2;transition:background .18s,border-color .18s}
.ic-nav:hover{background:#fff;border-color:#fff}
.ic-nav:hover .ic{color:#111}
.ic-nav .ic{width:18px;height:18px;color:#fff;transition:color .18s}
.ic-prev{left:10px}
.ic-prev .ic{transform:rotate(90deg)}
.ic-next{right:10px}
.ic-next .ic{transform:rotate(-90deg)}
.ic-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
.ic-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .18s,transform .18s}
.ic-dot:hover{background:rgba(255,255,255,.7)}
.ic-dot.active{background:#fff;transform:scale(1.2)}

/* ---- Admin Tools page ---- */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.tool-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding-bottom:14px;
  border-bottom:1px solid var(--border)}
.tool-ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft,#eef2ff);color:var(--accent)}
.tool-ic .ic{color:var(--accent)}
.tool-links{display:flex;flex-direction:column;gap:8px}
.tool-link{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);text-decoration:none;
  font-weight:600;font-size:.9rem;transition:border-color .15s,background .15s}
.tool-link:hover{border-color:var(--accent);background:var(--card,#fff)}
.tool-link span{flex:1}
.tool-link .ic{color:var(--muted)}
button.tool-link{width:100%;text-align:left;cursor:pointer;font-family:inherit}
.cfg-table input,.cfg-table select{margin:0;width:100%}
.cfg-table td,.cfg-table th{vertical-align:middle}
.cfg-table td .btn-sm{padding:4px 9px}

/* ---- Sortable table headers (server links + client-side) ---- */
th.th-sort{padding:0}
th.th-sort > a,th.th-sort > .sh{display:flex;align-items:center;gap:6px;padding:12px 14px;color:inherit;
  text-decoration:none;cursor:pointer;white-space:nowrap;user-select:none}
th.th-sort > a:hover,th.th-sort.sort-js:hover > .sh{color:var(--accent)}
.sort-ind{display:inline-flex;flex-direction:column;line-height:.7;font-size:.55rem;opacity:.55}
.sort-ind i{font-style:normal;transition:color .12s,opacity .12s}
.sort-ind i.up,.sort-ind i.dn{color:var(--muted)}
th.th-sort.sorted .sort-ind{opacity:1}
th.th-sort.sorted.asc .sort-ind i.up{color:var(--accent)}
th.th-sort.sorted.desc .sort-ind i.dn{color:var(--accent)}

/* ====================== APP SHELL ====================== */
header.topbar{
  position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--header-h);z-index:50;
  background:var(--topbar-bg);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 22px;
}
.topbar .brand-m{display:none;align-items:center;gap:10px;font-weight:800}
.topbar .spacer{flex:1}
.topbar .search{position:relative;max-width:380px;flex:1}
.topbar .search input{width:100%;padding:9px 12px 9px 38px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);font-size:.9rem}
.topbar .search input:focus{background:#fff}
.topbar .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.topbar .tb-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  display:grid;place-items:center;color:var(--muted);cursor:pointer;position:relative}
.topbar .tb-btn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--red);border:2px solid #fff;animation:dotpulse 1.8s ease-out infinite}
@keyframes dotpulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 7px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.userchip{display:flex;align-items:center;gap:11px}
.userchip .av{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--primary),#818cf8);font-size:.9rem;overflow:hidden}
.userchip .av img{width:100%;height:100%;object-fit:cover}
.userchip .meta b{display:block;font-size:.88rem;line-height:1.2}
.userchip .meta span{color:var(--muted);font-size:.74rem;text-transform:capitalize}
.hamburger{display:none;border:1px solid var(--border);background:var(--surface);border-radius:10px;width:40px;height:40px;cursor:pointer;color:var(--text);align-items:center;justify-content:center}

.layout{display:flex;padding-top:var(--header-h)}

/* ---- Sidebar (dark) ---- */
nav.sidebar{
  position:fixed;top:0;bottom:0;left:0;width:var(--sidebar-w);z-index:60;
  background:radial-gradient(700px 480px at 18% -5%,color-mix(in srgb,var(--primary) 60%,transparent),transparent 70%),
            radial-gradient(640px 560px at 110% 105%,color-mix(in srgb,var(--primary-600) 45%,transparent),transparent 72%),
            linear-gradient(165deg,#0f172a 0%,#161a3a 55%,#1e1b4b 100%);
  color:var(--side-text);overflow-y:auto;overscroll-behavior:contain;
  padding:0 14px 30px;border-right:1px solid rgba(255,255,255,.05);
  scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.25) transparent;
}
nav.sidebar::-webkit-scrollbar{width:8px}
nav.sidebar::-webkit-scrollbar-track{background:transparent}
nav.sidebar::-webkit-scrollbar-thumb{background:rgba(148,163,184,.22);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
nav.sidebar:hover::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4);background-clip:padding-box}
nav.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.6);background-clip:padding-box}
nav.sidebar .side-brand{height:var(--header-h);display:flex;align-items:center;gap:12px;font-weight:800;color:#fff;
  padding:0 6px;margin-bottom:8px;position:sticky;top:0;z-index:1;
  background:transparent;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* Brand logo + name links to the Dashboard. display:contents means the link adds
   NO box of its own — the mark + text keep their EXACT original position in the
   .side-brand flex; the link only makes them clickable. */
nav.sidebar .side-brand .side-brand-link{display:contents;color:inherit;text-decoration:none}
nav.sidebar .side-brand .side-brand-link *{text-decoration:none}
nav.sidebar .side-brand .mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),#818cf8);box-shadow:0 6px 16px -4px rgba(79,70,229,.7)}
nav.sidebar .side-brand small{display:block;font-weight:500;color:var(--muted-2);font-size:.68rem;letter-spacing:.04em}
nav.sidebar .nav-title{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#5b6678;
  padding:16px 12px 7px;font-weight:700}
nav.sidebar a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--side-text);
  font-size:.92rem;font-weight:500;margin-bottom:3px;transition:.16s;position:relative}
nav.sidebar a:hover{background:color-mix(in srgb,var(--primary) 24%,var(--side-hover));color:#fff}
nav.sidebar a.active{background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 34%,transparent),color-mix(in srgb,var(--primary) 8%,transparent));color:#fff;font-weight:600}
nav.sidebar a.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
nav.sidebar a .ic{color:inherit}
/* Live count pill on a sidebar link (e.g. how many Follow-up nudges are waiting). */
nav.sidebar a .nav-badge{margin-left:auto;min-width:19px;height:19px;padding:0 5px;
  display:inline-grid;place-items:center;border-radius:999px;background:var(--primary);
  color:#fff;font-size:.66rem;font-weight:700;line-height:1;flex-shrink:0}
nav.sidebar a.active .nav-badge{background:#fff;color:var(--primary)}
/* Collapsed rail: no room for the label, so pin the count to the icon corner. */
.sb-collapsed nav.sidebar a .nav-badge{position:absolute;top:3px;right:3px;margin:0;
  min-width:15px;height:15px;padding:0 3px;font-size:.56rem}
nav.sidebar .side-foot{margin-top:18px;padding:14px;border-radius:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
nav.sidebar .side-foot b{color:#fff;font-size:.82rem}
nav.sidebar .side-foot p{margin:4px 0 0;font-size:.74rem;color:var(--muted-2)}

main{margin-left:var(--sidebar-w);flex:1;min-width:0;padding:28px clamp(16px,3vw,40px) 80px}

/* ---- Collapse Sidebar (icon-only rail) ---- */
:root{--sidebar-cw:76px}
nav.sidebar{transition:width .18s ease}
header.topbar{transition:left .18s ease}
main{transition:margin-left .18s ease}
.side-collapse{display:flex;align-items:center;justify-content:center;margin-left:auto;width:32px;height:32px;padding:0;border:none;border-radius:9px;
  background:transparent;color:var(--side-text);cursor:pointer;transition:.16s;position:relative;flex:0 0 auto}
.side-collapse:hover{background:color-mix(in srgb,var(--primary) 24%,var(--side-hover));color:#fff}
.side-collapse .ic{flex:0 0 auto}
@media (min-width:1025px){
  /* Scrollable rail so tall nav lists never get cut off; native title= gives tooltips. */
  .sb-collapsed nav.sidebar{width:var(--sidebar-cw);padding-left:10px;padding-right:10px;overflow-y:auto;overflow-x:hidden}
  .sb-collapsed header.topbar{left:var(--sidebar-cw)}
  .sb-collapsed main{margin-left:var(--sidebar-cw)}
  .sb-collapsed nav.sidebar a{justify-content:center;gap:0;padding:9px}
  .sb-collapsed nav.sidebar a span{display:none}
  .sb-collapsed nav.sidebar a.active::before{display:none}
  /* Hide the whole logo (mark + text) when collapsed; keep only the toggle. */
  .sb-collapsed nav.sidebar .side-brand{justify-content:center;padding:0;gap:0}
  .sb-collapsed nav.sidebar .side-brand .side-brand-link{display:none}
  .sb-collapsed nav.sidebar .nav-title{font-size:0;line-height:0;padding:8px 0 0;margin:8px 8px 0;border-top:1px solid rgba(255,255,255,.06)}
  .sb-collapsed nav.sidebar .side-foot{display:none}
  .sb-collapsed .side-collapse{margin-left:0}
}
/* Floating rail tooltip (JS-positioned on <body> so the scrollable rail never clips it) */
.rail-tip{position:fixed;z-index:200;background:#0f172a;color:#fff;font-size:.78rem;font-weight:500;
  padding:6px 10px;border-radius:8px;box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateY(-50%) translateX(-4px);transition:opacity .12s,transform .12s}
.rail-tip.show{opacity:1;transform:translateY(-50%) translateX(0)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.page-head h1{margin:0;font-size:1.55rem}
.page-head .sub{color:var(--muted);margin:4px 0 0;font-size:.92rem}
/* Module page title icon — inline, primary-coloured, scales with the h1 size.
   Sits just before the title text; kept inline (not flex) so long titles still
   wrap naturally. */
h1 svg.ic.h1-ic{width:.9em;height:.9em;margin-right:9px;vertical-align:-.12em;color:var(--primary);stroke:currentColor;flex:0 0 auto}
/* Tickets header: title + action buttons stay on ONE line. The title shrinks
   (its count wraps inside) instead of pushing the buttons onto a new row. */
.page-head-tk{flex-wrap:nowrap}
.page-head .ph-title{min-width:0;flex:1 1 auto}
.page-head .ph-actions{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.page-head .ph-refresh{padding:10px;flex:0 0 auto}
@media (max-width:640px){
  /* Mobile: the Team dropdown + refresh + New Ticket no longer fit beside the
     title, so let the header wrap and drop the actions onto their own full-width
     row BELOW the heading (desktop stays nowrap / single line). */
  .page-head-tk{flex-wrap:wrap;align-items:flex-start}
  .page-head-tk .ph-title{flex:1 1 100%}
  .page-head-tk .ph-actions{flex:1 1 100%;justify-content:flex-end;flex-wrap:wrap;gap:6px}
  .page-head-tk .ph-actions .tk-team-sel{flex:1 1 auto;min-width:0}
  .page-head-tk .ph-actions .btn-primary{padding:9px 12px;font-size:.84rem}
  .page-head-tk .ph-refresh{padding:8px}
}
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--muted);margin-bottom:6px}
.breadcrumb a{color:var(--muted)}

/* Ticket count / quick-filter bar */
.count-bar{display:flex;gap:10px;flex-wrap:nowrap;margin-bottom:12px}
.count-chip{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:11px 13px;min-height:52px;border-radius:12px;border:1px solid var(--border);background:var(--card);min-width:0;flex:1 1 0;transition:.15s}
.count-chip .cc-l{white-space:nowrap}
/* .cc-top wraps the icon+number; transparent on desktop so the chip stays a
   single inline row [icon][number][label]. On mobile it becomes the top line. */
.count-chip .cc-top{display:contents}
@media(max-width:760px){.count-bar{flex-wrap:wrap}.count-chip{flex:1 1 140px}}
.emp-res-tag{display:inline-block;margin-top:3px;font-size:.66rem;font-weight:700;color:var(--accent)}
[data-theme="dark"] .emp-res-tag{color:#34d399}
.emp-survey-tag{display:inline-block;margin-top:3px;font-size:.66rem;font-weight:700;color:#d97706;white-space:nowrap}
[data-theme="dark"] .emp-survey-tag{color:#fbbf24}
button.count-chip{font:inherit;color:inherit;text-align:left;cursor:pointer}
a.count-chip{text-decoration:none;color:inherit;cursor:pointer}
.emp-controls .flex{flex-wrap:nowrap}
.emp-controls .btn{white-space:nowrap;flex:0 0 auto}
.emp-controls .rep-seg,.emp-controls #empAssignee{flex:0 0 auto}
@media(max-width:900px){.emp-controls{flex-wrap:wrap!important}}
.count-chip:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(79,70,229,.08)}
.count-chip.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.count-chip .cc-ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:rgba(2,132,199,.12);color:#0284c7}
.count-chip .cc-n{font-size:1.25rem;font-weight:700;line-height:1}
.count-chip .cc-l{font-size:.78rem;color:var(--muted)}
.count-chip.amber .cc-ic{background:rgba(217,119,6,.13);color:#d97706}
.count-chip.violet .cc-ic{background:rgba(124,58,237,.13);color:#7c3aed}
.count-chip.red .cc-ic{background:rgba(220,38,38,.12);color:#dc2626}
.count-chip.red .cc-n{color:#dc2626}
html[data-theme="dark"] #empCards .count-chip .cc-n,
html[data-theme="dark"] #empCards .count-chip .cc-l{color:#fff}
html[data-theme="dark"] #empCards .count-chip.red .cc-n{color:#f87171}
/* Dark theme — brighten the pipeline chip icons (IT / Accounting / Ops / Finance
   etc.). The light-theme colours (#0284c7, #d97706, #4f46e5…) are too dark to see
   on the dark cards, so swap in lighter tints + stronger icon backgrounds. */
html[data-theme="dark"] .count-chip .cc-ic{background:rgba(56,189,248,.20);color:#38bdf8}
html[data-theme="dark"] .count-chip.amber .cc-ic{background:rgba(251,191,36,.20);color:#fbbf24}
html[data-theme="dark"] .count-chip.violet .cc-ic,
html[data-theme="dark"] .rq-chips .count-chip.violet .cc-ic{background:rgba(167,139,250,.22);color:#c4b5fd}
html[data-theme="dark"] .count-chip.indigo .cc-ic,
html[data-theme="dark"] .rq-chips .count-chip.indigo .cc-ic{background:rgba(129,140,248,.22);color:#a5b4fc}
html[data-theme="dark"] .count-chip.green .cc-ic,
html[data-theme="dark"] .rq-chips .count-chip.green .cc-ic{background:rgba(74,222,128,.20);color:#4ade80}
html[data-theme="dark"] .count-chip.teal .cc-ic,
html[data-theme="dark"] .rq-chips .count-chip.teal .cc-ic{background:rgba(45,212,191,.20);color:#2dd4bf}
html[data-theme="dark"] .count-chip.red .cc-ic{background:rgba(248,113,113,.20);color:#f87171}

/* ====================== COMPONENTS ====================== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px clamp(16px,2.2vw,26px);box-shadow:var(--shadow-sm)}
.card:hover{box-shadow:var(--shadow)}
.card h2,.card h3{margin-top:0}
.card h3{font-size:1.05rem;display:flex;align-items:center;gap:9px}
.section-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin:0 0 12px}
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}

/* list footer: bulk actions + pager */
.list-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px}
.list-foot .pager{flex:0 0 auto}
@media (max-width:820px){.list-foot{flex-wrap:wrap}}
.bulk-bar{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px 12px;box-shadow:var(--shadow-sm)}
.bulk-grp{display:inline-flex;align-items:center;gap:10px}
.pager-nav{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 100%;margin-top:4px}
.bulk-select{max-width:100%}
.bulk-count{font-size:.84rem;color:var(--muted)}
.bulk-count b{color:var(--text);font-size:.95rem}
.bulk-sep{width:1px;height:22px;background:var(--border)}
.bulk-select{min-width:200px;padding:8px 34px 8px 12px;font-size:.86rem;border:1px solid var(--border);border-radius:9px;background-color:var(--surface)}
.pager{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;white-space:nowrap}
.pager-info{font-size:.82rem;color:var(--muted)}
.pager-page{font-size:.82rem;color:var(--muted);min-width:74px;text-align:center}
.pager .btn{min-width:38px;text-align:center}
select.pager-pp{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;font-size:.82rem;line-height:1.2;cursor:pointer;padding:7px 34px 7px 12px;width:auto;min-width:132px;flex:0 0 auto;text-overflow:clip;border:1px solid var(--border-strong);border-radius:8px;background-color:var(--card);color:var(--text);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 9px center;background-size:15px}
select.pager-pp::-ms-expand{display:none}
select.pager-pp:hover{border-color:var(--primary)}
select.pager-pp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
select.pager-pp option{background:var(--surface);color:var(--text)}
[data-theme="dark"] select.pager-pp{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
/* desktop: keep the bulk controls (Assign / Execute …) and the pager on ONE row.
   The selects are upgraded to custom .cbox dropdowns that grow to their option
   text — cap them (labels truncate) and compress the pager so both fit. */
@media (min-width:641px){
  .list-foot--bulk{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
  .list-foot--bulk .bulk-bar{gap:8px;padding:7px 10px}
  .list-foot--bulk .bulk-grp{gap:8px}
  .list-foot--bulk .bulk-bar .cbox--auto{min-width:0!important;max-width:120px!important}
  .list-foot--bulk .bulk-bar .cbox-btn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* The "Master ticket…" dropdown only matters while merging; its cbox wrapper
     kept showing (the JS only hides the inner <select>). Collapse it when idle so
     the pager fits beside Assign / Execute. It reappears when Merge is picked. */
  .list-foot--bulk .bulk-bar .cbox--auto:has(#mergeMaster[style*="none"]){display:none}
  .list-foot--bulk .pager{flex:0 0 auto;flex-wrap:nowrap;gap:5px;margin-left:auto}
  .list-foot--bulk .pager-info{font-size:.78rem}
  .list-foot--bulk .pager-nav{flex:0 0 auto;margin-top:0;gap:4px}
  .list-foot--bulk .pager .cbox--auto{min-width:104px!important;max-width:112px!important}
  .list-foot--bulk .pager-page{min-width:44px}
  .list-foot--bulk .pager .btn{min-width:30px}
}

/* stat tiles */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;transition:.18s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat .si{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px}
.stat .big{font-size:1.85rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.stat .lbl{color:var(--text-2);font-size:.86rem;margin-top:5px;font-weight:600}
.stat .hint{color:var(--muted);font-size:.74rem;margin-top:2px;font-weight:500}
.stat .trend{position:absolute;top:20px;right:20px;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:999px}
/* dashboard: force the overview tiles onto a single row */
.stat-grid.stat-6{grid-template-columns:repeat(6,1fr)}
.stat-grid.stat-7{grid-template-columns:repeat(7,1fr)}
.stat-grid.stat-6 .stat,.stat-grid.stat-7 .stat{padding:16px 14px}
.stat-grid.stat-6 .stat .si,.stat-grid.stat-7 .stat .si{width:38px;height:38px;margin-bottom:10px}
.stat-grid.stat-7 .stat .si{width:34px;height:34px}
.stat-grid.stat-6 .stat .big{font-size:1.6rem}
.stat-grid.stat-7 .stat .big{font-size:1.5rem}
@media (max-width:1100px){ .stat-grid.stat-6{grid-template-columns:repeat(3,1fr)} .stat-grid.stat-7{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){ .stat-grid.stat-6{grid-template-columns:repeat(2,1fr)} .stat-grid.stat-7{grid-template-columns:repeat(2,1fr)} }

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);
  padding:10px 16px;border-radius:10px;font-weight:600;font-size:.9rem;cursor:pointer;transition:.15s;font-family:inherit;line-height:1}
.btn:hover{background:var(--surface-2);border-color:var(--muted-2)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 6px 14px -6px rgba(79,70,229,.6)}
.btn-primary:hover{background:var(--primary-600);border-color:var(--primary-600)}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-sm{padding:7px 12px;font-size:.82rem}
.btn-block{width:100%;justify-content:center}
.btn-icon{padding:7px;gap:0}
.btn-icon .ic{display:block}
/* Neutral icon button that blends in every theme (surface bg), with a coloured
   icon hint and a full colour fill on hover. Used for row trash/toggle actions. */
.btn-icon.tone-red{color:var(--accent,var(--primary))}
.btn-icon.tone-red:hover{background:var(--accent,var(--primary));border-color:var(--accent,var(--primary));color:#fff}
.btn-icon.tone-green{color:var(--green)}
.btn-icon.tone-green:hover{background:var(--green);border-color:var(--green);color:#fff}
.btn-danger-soft{color:var(--red);border-color:var(--red-soft);background:var(--red-soft)}
.btn-danger-soft:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-ok-soft{color:var(--green);border-color:var(--green-soft);background:var(--green-soft)}
.btn-ok-soft:hover{background:var(--green);border-color:var(--green);color:#fff}

/* forms */
label{display:block;font-weight:600;font-size:.85rem;margin:16px 0 7px;color:var(--text-2)}
input,select,textarea{width:100%;max-width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--border-strong);border-radius:10px;font-size:.94rem;
  font-family:inherit;background:#fff;color:var(--text);transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
textarea{resize:vertical;min-height:110px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-hint{font-size:.78rem;color:var(--muted);margin-top:5px}

/* tables */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--surface)}
/* Slim, theme-aware horizontal scrollbar for table overflow */
.table-wrap{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.table-wrap::-webkit-scrollbar{height:9px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:8px;border:2px solid var(--surface)}
.table-wrap:hover::-webkit-scrollbar-thumb{background:rgba(148,163,184,.7)}
.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--primary)}

/* Slim, theme-aware scrollbars for dropdown panels, menus & scroll regions.
   The floating thumb (transparent padding-box border) reads cleanly on both
   the light surfaces and the dark theme's deep-navy panels. */
.cmp-ms-panel,.cbox-list,.pop,.pop-list,.rq-bell-menu,.cmp-scroll,.cmp-body-scroll,
.pur-grid-scroll,.rq-grid-scroll,.rq-body,.modal .m-body,dialog .m-body{
  scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.45) transparent;
}
.cmp-ms-panel::-webkit-scrollbar,.cbox-list::-webkit-scrollbar,.pop::-webkit-scrollbar,
.pop-list::-webkit-scrollbar,.rq-bell-menu::-webkit-scrollbar,.cmp-scroll::-webkit-scrollbar,
.cmp-body-scroll::-webkit-scrollbar,.pur-grid-scroll::-webkit-scrollbar,
.rq-grid-scroll::-webkit-scrollbar,.rq-body::-webkit-scrollbar,
.modal .m-body::-webkit-scrollbar,dialog .m-body::-webkit-scrollbar{width:9px;height:9px}
.cmp-ms-panel::-webkit-scrollbar-track,.cbox-list::-webkit-scrollbar-track,.pop::-webkit-scrollbar-track,
.pop-list::-webkit-scrollbar-track,.rq-bell-menu::-webkit-scrollbar-track,.cmp-scroll::-webkit-scrollbar-track,
.cmp-body-scroll::-webkit-scrollbar-track,.pur-grid-scroll::-webkit-scrollbar-track,
.rq-grid-scroll::-webkit-scrollbar-track,.rq-body::-webkit-scrollbar-track,
.modal .m-body::-webkit-scrollbar-track,dialog .m-body::-webkit-scrollbar-track{background:transparent}
.cmp-ms-panel::-webkit-scrollbar-thumb,.cbox-list::-webkit-scrollbar-thumb,.pop::-webkit-scrollbar-thumb,
.pop-list::-webkit-scrollbar-thumb,.rq-bell-menu::-webkit-scrollbar-thumb,.cmp-scroll::-webkit-scrollbar-thumb,
.cmp-body-scroll::-webkit-scrollbar-thumb,.pur-grid-scroll::-webkit-scrollbar-thumb,
.rq-grid-scroll::-webkit-scrollbar-thumb,.rq-body::-webkit-scrollbar-thumb,
.modal .m-body::-webkit-scrollbar-thumb,dialog .m-body::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.4);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.cmp-ms-panel::-webkit-scrollbar-thumb:hover,.cbox-list::-webkit-scrollbar-thumb:hover,
.pop::-webkit-scrollbar-thumb:hover,.pop-list::-webkit-scrollbar-thumb:hover,
.rq-bell-menu::-webkit-scrollbar-thumb:hover,.cmp-scroll::-webkit-scrollbar-thumb:hover,
.cmp-body-scroll::-webkit-scrollbar-thumb:hover,.pur-grid-scroll::-webkit-scrollbar-thumb:hover,
.rq-grid-scroll::-webkit-scrollbar-thumb:hover,.rq-body::-webkit-scrollbar-thumb:hover,
.modal .m-body::-webkit-scrollbar-thumb:hover,dialog .m-body::-webkit-scrollbar-thumb:hover{
  background:rgba(148,163,184,.7);background-clip:padding-box}
html[data-theme="dark"] .cmp-ms-panel,html[data-theme="dark"] .cbox-list,html[data-theme="dark"] .pop,
html[data-theme="dark"] .pop-list,html[data-theme="dark"] .rq-bell-menu,html[data-theme="dark"] .cmp-scroll,
html[data-theme="dark"] .cmp-body-scroll,html[data-theme="dark"] .pur-grid-scroll,
html[data-theme="dark"] .rq-grid-scroll,html[data-theme="dark"] .rq-body,
html[data-theme="dark"] .modal .m-body,html[data-theme="dark"] dialog .m-body{
  scrollbar-color:rgba(148,163,184,.5) transparent}
html[data-theme="dark"] .cmp-ms-panel::-webkit-scrollbar-thumb,html[data-theme="dark"] .cbox-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] .pop::-webkit-scrollbar-thumb,html[data-theme="dark"] .pop-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] .rq-bell-menu::-webkit-scrollbar-thumb,html[data-theme="dark"] .cmp-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .cmp-body-scroll::-webkit-scrollbar-thumb,html[data-theme="dark"] .pur-grid-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .rq-grid-scroll::-webkit-scrollbar-thumb,html[data-theme="dark"] .rq-body::-webkit-scrollbar-thumb,
html[data-theme="dark"] .modal .m-body::-webkit-scrollbar-thumb,html[data-theme="dark"] dialog .m-body::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.5);background-clip:padding-box}
html[data-theme="dark"] .cmp-ms-panel::-webkit-scrollbar-thumb:hover,html[data-theme="dark"] .cbox-list::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .pop::-webkit-scrollbar-thumb:hover,html[data-theme="dark"] .pop-list::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .rq-bell-menu::-webkit-scrollbar-thumb:hover,html[data-theme="dark"] .cmp-scroll::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .cmp-body-scroll::-webkit-scrollbar-thumb:hover,html[data-theme="dark"] .pur-grid-scroll::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .rq-grid-scroll::-webkit-scrollbar-thumb:hover,html[data-theme="dark"] .rq-body::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .modal .m-body::-webkit-scrollbar-thumb:hover,html[data-theme="dark"] dialog .m-body::-webkit-scrollbar-thumb:hover{
  background:rgba(148,163,184,.75);background-clip:padding-box}
/* Tools > Configuration Areas list — theme-aware slim scrollbar (was default light bar in dark mode) */
.cfg-card .tool-links{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.45) transparent}
.cfg-card .tool-links::-webkit-scrollbar{width:9px;height:9px}
.cfg-card .tool-links::-webkit-scrollbar-track{background:transparent}
.cfg-card .tool-links::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.cfg-card .tool-links::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.7);background-clip:padding-box}
html[data-theme="dark"] .cfg-card .tool-links{scrollbar-color:rgba(148,163,184,.5) transparent}
html[data-theme="dark"] .cfg-card .tool-links::-webkit-scrollbar-thumb{background:rgba(148,163,184,.5);background-clip:padding-box}
html[data-theme="dark"] .cfg-card .tool-links::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.75);background-clip:padding-box}
table{width:100%;border-collapse:collapse;min-width:560px}
thead th{background:var(--primary-soft);text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--primary-700);padding:13px 18px;border-bottom:1px solid var(--primary-soft-2);white-space:nowrap;font-weight:700}
tbody td{padding:14px 18px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);font-size:.9rem;vertical-align:middle}
/* Keep the last row's bottom border so the grid always closes cleanly. Under
   fit-lock the .table-wrap can be TALLER than a short table (few rows), leaving
   empty space below the last row; without this border the table looked cut/open
   ("putol"). When the table fills the wrap, the 1px overlaps the wrap's own bottom
   edge in the same colour, so it stays invisible. Mobile card layouts reset this
   via their own `border:none` td rules. */
tbody tr:last-child td{border-bottom:1px solid var(--border)}
/* Vertical gridlines on body cells (header stays clean). Last column drops its
   right border so it doesn't double up with the .table-wrap outer border — the
   table is always full-width, so the right edge is already flush with the wrap.
   Mobile card layouts reset this via their own `border:none` td rules. */
tbody td:last-child{border-right:none}
tbody tr{transition:.12s}
tbody tr:hover{background:var(--surface-2)}
/* Tickets list: compact, wrappable headers so 12 columns fit without horizontal scroll */
.ttbl{min-width:0;table-layout:auto}
.ttbl thead th{padding:9px 8px;white-space:normal;line-height:1.2;font-size:.68rem}
.ttbl tbody td{padding:10px 8px;font-size:.83rem}
/* Subject: wrap long text instead of forcing horizontal scroll */
.ttbl .c-subj{max-width:200px}
.ttbl .c-subj span{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
/* Date columns: allow wrapping (date / time on two lines) to save width */
.ttbl .c-dt{white-space:normal;font-size:.78rem;color:var(--muted);min-width:74px}
a.tno{font-weight:700;color:var(--primary);text-decoration:none;letter-spacing:.01em}
/* Let the ticket number wrap so it never forces horizontal scroll */
.ttbl .c-tno{max-width:96px;padding-right:10px}
.ttbl .c-tno a.tno{display:inline-block;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
a.tno:hover{text-decoration:underline}
/* Dashboard Recent Tickets: give the ticket column a fixed-ish width so the
   number wraps to ~2 lines (TGC-26- / GLGTRG), like the Tickets tab. */
.js-sortable th:first-child{min-width:92px}
.js-sortable td:first-child{min-width:92px;max-width:104px;padding-right:10px;white-space:normal}
.js-sortable td:first-child a.tno{display:inline-block;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
a.flup-link{color:var(--primary);text-decoration:none}
a.flup-link:hover{text-decoration:underline}
.tbl-search{height:38px;width:240px;max-width:48vw;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:.88rem;color:var(--text)}
.tbl-search:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.sticky-head-tbl thead th{position:sticky;top:0;z-index:3}

/* pills */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:.74rem;font-weight:700;white-space:nowrap;line-height:1.3}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9;flex:0 0 auto}
.pill-wrap{white-space:normal;align-items:flex-start}
.prio-tbl{min-width:0}
.prio-tbl th:first-child,.prio-tbl td:first-child{width:1%;white-space:nowrap}
.prio-eye{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;color:var(--primary);cursor:pointer;padding:0}
.prio-eye:hover{border-color:var(--primary)}
.prio-eye:active{transform:scale(.95)}
.prio-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px}
.prio-dl dt{font-weight:700;color:var(--muted);font-size:.82rem}
.prio-dl dd{margin:0}
/* Ticket-push modal: align each label with its (often pill) value and give the
   rows a little breathing room. */
.push-dl{align-items:center;row-gap:14px}
.push-dl dt{align-self:start;padding-top:2px}
/* Status table: Details eye column is desktop-hidden; on mobile the two text
   columns collapse into the eye-modal so only Status + Details show. */
.st-eye-col{display:none}
.st-sec{margin-bottom:14px}
.st-sec:last-child{margin-bottom:0}
.st-sec h4{margin:0 0 5px;font-size:.9rem}
.st-sec>div{color:var(--muted);font-size:.9rem;line-height:1.55}
/* Email-template view modal: put the "Type" label and the Edit/Delete actions on
   one line (label left, buttons right); the type value sits on the line below. */
.ev-type-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ev-type-row h4{margin:0}
.ev-type-row .gap-wrap{flex:0 0 auto}
@media (max-width:640px){
  .status-tbl{min-width:0}
  .status-tbl th:first-child,.status-tbl td:first-child{width:1%;white-space:nowrap}
  .status-tbl th:nth-child(2),.status-tbl th:nth-child(3),.status-tbl td:nth-child(2),.status-tbl td:nth-child(3){display:none}
  .st-eye-col{display:table-cell}
}
/* Employee guide status table: Status + meaning on desktop; on mobile the meaning
   column collapses into the eye-modal so only Status + Details(eye) show. */
.emp-status-tbl{min-width:0}
.emp-status-tbl th:first-child,.emp-status-tbl td:first-child{width:1%;white-space:nowrap}
@media (max-width:640px){
  .emp-status-tbl th:nth-child(2),.emp-status-tbl td:nth-child(2){display:none}
  .emp-status-tbl .st-eye-col{display:table-cell}
}
/* Email Templates table (Settings → Email Templates modal): on mobile collapse
   to Template name + Details eye; Subject/Trigger/Type/Actions move into the
   eye-modal. Desktop shows the full table (eye col stays hidden). */
@media (max-width:640px){
  .etpl-tbl{min-width:0}
  .etpl-tbl th:nth-child(2),.etpl-tbl td:nth-child(2),
  .etpl-tbl th:nth-child(3),.etpl-tbl td:nth-child(3),
  .etpl-tbl th:nth-child(4),.etpl-tbl td:nth-child(4),
  .etpl-tbl th:nth-child(5),.etpl-tbl td:nth-child(5){display:none}
  /* Keep each email-template modal's footer actions (Cancel / Save Template) on
     ONE line — shrink the font & padding just enough so they never wrap. */
  #etplEdit .gap-wrap,#etplAdd .gap-wrap,#etplView #evActions{flex-wrap:nowrap}
  #etplEdit .gap-wrap .btn,#etplAdd .gap-wrap .btn,#etplView #evActions .btn{
    font-size:.82rem;padding:8px 12px;white-space:nowrap;flex:0 0 auto}
}
/* Ticket Pushes table (Chat Follow-ups): on mobile collapse to Ticket No. +
   Details eye; everything else moves into the eye-modal. Desktop unchanged. */
@media (max-width:640px){
  .push-tbl{min-width:0}
  .push-tbl th:nth-child(1),.push-tbl td:nth-child(1),
  .push-tbl th:nth-child(3),.push-tbl td:nth-child(3),
  .push-tbl th:nth-child(4),.push-tbl td:nth-child(4),
  .push-tbl th:nth-child(5),.push-tbl td:nth-child(5),
  .push-tbl th:nth-child(6),.push-tbl td:nth-child(6),
  .push-tbl th:nth-child(7),.push-tbl td:nth-child(7),
  .push-tbl th:nth-child(8),.push-tbl td:nth-child(8){display:none}
  .push-tbl th:nth-child(2),.push-tbl td:nth-child(2){width:auto;white-space:nowrap}
  /* smaller header + description on phones so the card eats less space */
  .push-card > .flex h2{font-size:.9rem!important}
  .push-card > .flex h2 .ic-sm{width:15px;height:15px}
  .push-card .pill{font-size:.72rem;padding:4px 9px}
  .push-card > .sub{font-size:.76rem;line-height:1.32}
  /* Keep the page static: only the ticket list scrolls inside a fixed-height box.
     The header row (Ticket No. / Details) stays pinned; the pager below stays put. */
  .push-card .table-wrap{max-height:46vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .push-card .push-tbl thead th{position:sticky;top:0;z-index:2;background:var(--surface-2)}
}
.rating-pill{background:#fde047;color:#854d0e;font-weight:800;font-size:.92rem;padding:6px 14px;border:1px solid #facc15}
.rating-pill::before{display:none}
.rating-pill span{color:#a16207;font-size:1.05rem}
.p-crit{background:var(--red-soft);color:#b91c1c}.p-high{background:#ffedd5;color:#c2410c}
.p-med{background:var(--amber-soft);color:#a16207}.p-low{background:var(--green-soft);color:#047857}
.s-new{background:#e0e7ff;color:#3730a3}.s-asg{background:var(--sky-soft);color:#0369a1}
.s-prog{background:#dbeafe;color:#1d4ed8}.s-pend{background:var(--amber-soft);color:#b45309}
.s-res{background:var(--green-soft);color:#047857}.s-closed{background:#e5e7eb;color:#374151}
.s-merged{background:#ede9fe;color:#6d28d9}.s-hold{background:#fee2e2;color:#9f1239}
.req-pill{background:var(--primary-soft);color:var(--primary-700)}

/* modal dialog (admin setup editors) */
dialog.modal{border:none;border-radius:var(--radius);padding:0;width:min(560px,94vw);max-height:90vh;overflow:hidden;color:var(--text);background:var(--surface);box-shadow:var(--shadow-lg)}
dialog.modal[open]{display:flex;flex-direction:column}
dialog.modal.modal-wide{width:min(880px,96vw)}
dialog.modal.modal-embed{width:min(1080px,96vw)}
dialog.modal.modal-embed .embed-frame{display:block;width:100%;height:74vh;border:none;border-radius:0 0 var(--radius) var(--radius)}
dialog.modal::backdrop{background:rgba(15,23,42,.45)}
/* Themed header — same navy+primary gradient as the sidebar, so every modal
   follows the active theme (primary colour glow shifts with data-theme). */
dialog.modal .m-head{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:16px 22px;color:#fff;border-radius:var(--radius) var(--radius) 0 0;
  background:radial-gradient(700px 480px at 18% -5%,color-mix(in srgb,var(--primary) 60%,transparent),transparent 70%),
    radial-gradient(640px 560px at 110% 105%,color-mix(in srgb,var(--primary-600) 45%,transparent),transparent 72%),
    linear-gradient(165deg,#0f172a 0%,#161a3a 55%,#1e1b4b 100%)}
dialog.modal .m-head h3{margin:0;color:#fff}
dialog.modal .m-head h3 .muted,dialog.modal .m-head .muted{color:rgba(255,255,255,.72)}
dialog.modal .m-head h3 svg,dialog.modal .m-head h3 .ic{stroke:#fff}
/* Icon + title/subtitle layout (matches the requisition modal head). */
dialog.modal .m-head-l{display:flex;align-items:center;gap:12px;min-width:0}
dialog.modal .m-head-ic{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:0 0 auto}
dialog.modal .m-head-ic svg,dialog.modal .m-head-ic .ic{width:20px;height:20px;stroke:#fff}
dialog.modal .m-head-tx{min-width:0}
dialog.modal .m-head-sub{display:block;font-size:.7rem;font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.72);margin-top:2px}
/* Mobile: modal header titles are oversized on phones — scale the title, icon &
   padding down so a long title wraps to 1–2 lines instead of ballooning. */
@media (max-width:640px){
  dialog.modal .m-head{padding:13px 16px}
  dialog.modal .m-head h3,dialog.modal .m-head .m-title{font-size:1rem;line-height:1.3}
  dialog.modal .m-head-ic{width:30px;height:30px;border-radius:8px}
  dialog.modal .m-head-ic svg,dialog.modal .m-head-ic .ic{width:16px;height:16px}
  dialog.modal .m-head-sub{font-size:.66rem}
}
dialog.modal .m-body{flex:1 1 auto;overflow-y:auto;padding:20px 22px}
dialog.modal .m-x{border:none;background:none;font-size:1.4rem;cursor:pointer;color:rgba(255,255,255,.75);line-height:1;padding:0 4px}
dialog.modal .m-x:hover{color:#fff}
/* When printing a modal, drop the dark gradient so white title text stays readable on paper. */
@media print{
  dialog.modal .m-head{background:none!important;color:inherit!important}
  dialog.modal .m-head h3,dialog.modal .m-head h3 .muted,dialog.modal .m-head .muted,dialog.modal .m-head-sub{color:inherit!important}
  dialog.modal .m-head h3 svg,dialog.modal .m-head h3 .ic,dialog.modal .m-head-ic svg,dialog.modal .m-head-ic .ic{stroke:currentColor!important}
  dialog.modal .m-head-ic{background:rgba(0,0,0,.06)!important}
}
body.printing-modal dialog.modal .m-head{background:none!important;color:inherit!important}
body.printing-modal dialog.modal .m-head h3,body.printing-modal dialog.modal .m-head .muted,body.printing-modal dialog.modal .m-head-sub{color:inherit!important}
body.printing-modal dialog.modal .m-head h3 svg,body.printing-modal dialog.modal .m-head h3 .ic,body.printing-modal dialog.modal .m-head-ic svg,body.printing-modal dialog.modal .m-head-ic .ic{stroke:currentColor!important}
body.printing-modal dialog.modal .m-head-ic{background:rgba(0,0,0,.06)!important}
/* Tighten modal form spacing so it fits without an inner scrollbar */
dialog.modal .m-body label{margin:12px 0 5px}
dialog.modal .m-body form > label:first-of-type{margin-top:0}
dialog.modal .m-body .form-row{gap:12px}
dialog.modal .m-body .rte-area{min-height:84px!important}
/* Sticky action footer inside a scrollable modal body — keeps Cancel/Save
   pinned to the bottom instead of scrolling into the content behind. */
dialog.modal .m-body .m-actions{position:sticky;bottom:calc(-1 * 20px);z-index:2;justify-content:flex-end;margin:16px -22px -20px;padding:14px 22px;background:var(--surface);border-top:1px solid var(--border)}
.row-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:nowrap;white-space:nowrap}
.row-actions form{margin:0;display:inline-flex}

/* Compact, self-fitting user-management table (avoids horizontal scroll in embedded modal) */
.utbl{min-width:0}
.utbl thead th,.utbl tbody td{padding:9px 10px}
.utbl td:nth-child(4){white-space:normal;word-break:break-word;min-width:120px}
.utbl .row-actions{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}
.utbl .row-actions .btn{padding:5px 9px;font-size:.8rem}
.utbl .u-cell{display:flex;align-items:center;gap:10px}
.utbl .uav{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;color:#fff;background:linear-gradient(135deg,var(--primary),#818cf8);font-size:.82rem;overflow:hidden}
.utbl .uav img{width:100%;height:100%;object-fit:cover}

/* friendly empty-state inside table cells */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 18px;text-align:center;color:var(--muted)}
.empty-state .ic{width:30px;height:30px;opacity:.45}
.empty-state p{margin:0;font-size:.92rem}
.empty-state .btn{margin-top:2px}

/* sidebar link lists (previous / linked tickets) */
.link-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.link-list li{display:flex;align-items:center;gap:8px;font-size:.85rem;line-height:1.3}
.link-list .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:currentColor}
.link-list .ll-sub{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.link-list .ll-unlink{margin:0;flex:0 0 auto}
.link-list .ll-unlink button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1;padding:2px 4px;border-radius:6px}
.link-list .ll-unlink button:hover{background:var(--red-soft);color:var(--red)}
.pill.plain::before{display:none}

/* alerts */
.alert{border-radius:12px;padding:13px 16px;font-size:.9rem;margin-bottom:18px;border:1px solid transparent;display:flex;gap:10px;align-items:center}
.flash-alert{transition:opacity .38s ease,transform .38s ease}
.flash-alert.flash-hide{opacity:0;transform:translateY(-8px)}
.alert-info{background:var(--primary-soft);color:var(--primary-700);border-color:var(--primary-soft-2)}
.alert-success{background:var(--primary-soft);color:var(--primary-700);border-color:var(--primary-soft-2)}
.alert-error{background:var(--red-soft);color:#b91c1c;border-color:#fecaca}

.muted{color:var(--muted)}
.right{text-align:right}
.flex{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gap-wrap{display:flex;flex-wrap:wrap;gap:8px}
/* Locked action button (e.g. Edit/Update on a ticket that isn't yours) —
   greyed out and non-interactive. Shows a lock glyph instead of its icon. */
.btn.tv-locked{opacity:.45;cursor:not-allowed;pointer-events:none;filter:grayscale(1)}
/* Locked but still tappable — shows a validation message on tap instead of acting. */
.btn.tv-lockbtn{opacity:.5;cursor:not-allowed;filter:grayscale(1)}
.divider{height:1px;background:var(--border);margin:20px 0;border:none}
.tag-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}

/* timeline */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 20px 28px;border-left:2px solid var(--border)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;
  background:var(--primary);border:2px solid #fff;box-shadow:0 0 0 3px var(--primary-soft)}
.timeline .when{font-size:.76rem;color:var(--muted)}
.timeline .who{font-weight:700;font-size:.9rem}
.tl-foot{display:flex;align-items:center;gap:7px;margin-top:5px}
.tl-action{font-size:.85rem}
.tl-del{margin:0;display:inline-flex}
.tl-del-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid #fecaca;border-radius:6px;background:#fef2f2;color:#dc2626;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.tl-del-btn .ic{width:14px;height:14px}
.tl-del-btn:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.tl-edit-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid #c7d2fe;border-radius:6px;background:#eef2ff;color:#4f46e5;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.tl-edit-btn .ic{width:14px;height:14px}
.tl-edit-btn:hover{background:#4f46e5;border-color:#4f46e5;color:#fff}

/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kpi-grid{grid-template-columns:1fr}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:12px;transition:.18s}
.kpi:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.kpi .k{font-size:.95rem;font-weight:800;color:var(--primary);letter-spacing:.01em}
.kpi h4{margin:0;font-size:1.02rem}
.kpi h4.kpi-desc{font-size:.72rem;font-weight:500;color:var(--muted);line-height:1.3}
.kpi .val{font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.trend-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.trend-seg-btn{border:none;background:transparent;color:var(--muted);font-size:.78rem;font-weight:600;padding:5px 13px;border-radius:7px;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block}
.trend-seg-btn:hover{color:var(--text)}
.trend-seg-btn.on{background:var(--card);color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.kpi .meta-row{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--muted)}
.kpi .weight{background:var(--primary-soft);color:var(--primary-700);font-weight:700;font-size:.72rem;padding:4px 10px;border-radius:999px}
.kpi .formula{background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:9px;padding:8px 11px;
  font-size:.8rem;color:var(--text-2);font-family:'Cascadia Code',Consolas,monospace}
.bar{height:8px;border-radius:8px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--primary),#818cf8);transition:width .6s ease}
.bar.green i{background:linear-gradient(90deg,#10b981,#34d399)}
.bar.amber i{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.bar.red i{background:linear-gradient(90deg,#ef4444,#f87171)}

.scorebox{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.score-ring{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:2rem;
  box-shadow:var(--shadow);position:relative}

/* feature/category cards */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);
  border-top:3px solid var(--c,var(--primary));transition:.18s}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.feature .fh{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.feature .fh .fi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--c,var(--primary))}
.feature h3{margin:0;font-size:1.06rem}
.feature .tag{font-size:.68rem;font-weight:800;color:#fff;background:var(--c,var(--primary));padding:2px 8px;border-radius:6px}
.feature p{color:var(--muted);font-size:.9rem;margin:.2rem 0 12px}
.feature .ex{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:7px}

ul.clean{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.clean.cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
ul.clean li{display:flex;align-items:flex-start;gap:9px;color:var(--text-2);font-size:.92rem}
ul.clean li::before{content:"";width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--primary);flex:0 0 auto}
ul.check{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
ul.check li{position:relative;padding-left:26px;color:var(--text-2);font-size:.92rem;line-height:1.5}
ul.check li svg{position:absolute;left:0;top:.18em;color:var(--green)}

/* process steps */
.proc{display:grid;gap:16px}
/* Mobile: stack the handling-process cards into one readable column
   (overrides the inline 2-col grid used on desktop) and shrink the right-pane
   details to the compact density of the Scope card. */
@media (max-width:640px){
  .proc{grid-template-columns:1fr!important}
  .proc-step{gap:12px;padding:14px 16px}
  .proc-step .idx{width:34px;height:34px;border-radius:10px;font-size:.9rem}
  .proc-step h4{font-size:.95rem;margin-bottom:5px}
  .proc-step p{font-size:.82rem}
  .proc-step ul.clean li,.proc-step ul.check li{font-size:.84rem}
  /* Align the bullet dots with the left edge of the numbered square
     (pull the list back by the square width + flex gap = 34 + 12). */
  .proc-step ul.clean,.proc-step ul.check{margin-left:-46px}
}
.proc-step{display:flex;gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm)}
.proc-step .idx{width:42px;height:42px;flex:0 0 auto;border-radius:12px;background:linear-gradient(135deg,var(--primary),#818cf8);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 6px 14px -6px rgba(79,70,229,.6)}
.proc-step h4{margin:0 0 7px;font-size:1.05rem}

/* lifecycle flow */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px}
.flow-node{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);position:relative}
.flow-node .dot{width:32px;height:32px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:800;margin-bottom:10px}
.flow-node h4{margin:0 0 3px;font-size:1rem}
.flow-node p{margin:0;color:var(--muted);font-size:.84rem}
/* Merged is desktop-hidden (kept in the paragraph below); shown as card #8 on mobile only. */
.flow-merged{display:none}
@media (max-width:640px){
  .flow{grid-template-columns:repeat(2,1fr);gap:12px}
  .flow-node{padding:14px}
  .flow-merged{display:block}
}

/* rating scale */
.rating{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:14px}
.rate{border-radius:var(--radius);padding:18px;color:#fff;box-shadow:var(--shadow-sm)}
.rate .score{font-size:1.5rem;font-weight:800}
.rate .name{font-size:.9rem;opacity:.96;font-weight:600;margin-top:2px}

/* report grid */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:14px}
.rep{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow-sm);font-weight:600;transition:.16s;cursor:pointer}
.rep:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow)}
.rep .ri{width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.rep small{display:block;font-weight:500;color:var(--muted);font-size:.76rem}

/* custom select with chevron */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;cursor:pointer;
}
select::-ms-expand{display:none}
select:focus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
/* Dark theme: lighter chevron so it reads on the dark input background */
html[data-theme="dark"] select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
.input-sm{padding:8px 12px;font-size:.86rem}
select.input-sm{padding-right:34px;background-position:right 10px center}

/* ====================== POPOVERS / DROPDOWNS ====================== */
.has-pop{position:relative}
.pop{
  position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:calc(100vw - 28px);
  background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
  z-index:80;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;overflow:hidden
}
.pop.open{opacity:1;visibility:visible;transform:translateY(0)}
.pop.theme-pop{width:288px}
.pop-head .pop-sub{display:block;font-size:.72rem;color:var(--muted);font-weight:500;margin-top:2px}
.theme-grid{padding:8px;display:flex;flex-direction:column;gap:2px}
.theme-opt{display:flex;align-items:center;gap:12px;width:100%;border:1px solid transparent;background:none;
  padding:9px 11px;border-radius:11px;cursor:pointer;text-align:left;transition:.14s;color:var(--text)}
.theme-opt:hover{background:var(--surface-2)}
.theme-opt.on{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));background:var(--primary-soft)}
.theme-opt .sw{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);flex:0 0 auto;
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.theme-opt .sw i{position:absolute;right:5px;bottom:5px;width:12px;height:12px;border-radius:50%;display:block;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.theme-opt .tmeta{display:flex;flex-direction:column;line-height:1.25;flex:1 1 auto;min-width:0}
.theme-opt .tl{font-size:.88rem;font-weight:600}
.theme-opt .tsub{font-size:.72rem;color:var(--muted);font-weight:500}
.theme-opt.on .tl{color:var(--primary-700)}
.theme-opt .tcheck{flex:0 0 auto;color:var(--primary);opacity:0;transform:scale(.6);transition:.14s}
.theme-opt.on .tcheck{opacity:1;transform:scale(1)}

/* ============ Custom month picker (production) ============ */
/* Year picker (appraisal): leading icon + native select */
.year-pick{position:relative;display:inline-flex;align-items:center}
.year-pick>.ic{position:absolute;left:11px;z-index:3;color:var(--primary);pointer-events:none}
.year-pick select{padding:9px 13px 9px 34px;border:1px solid var(--border);border-radius:11px;
  background:var(--surface);color:var(--text);font-weight:600;font-size:.9rem;cursor:pointer;transition:.15s;min-width:120px}
.year-pick select:hover{border-color:var(--primary)}
.year-pick select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.staff-pick select{min-width:190px}
.mpick{position:relative}
.mpick-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--border);
  border-radius:11px;background:var(--surface);color:var(--text);font-weight:600;font-size:.9rem;cursor:pointer;transition:.15s;min-width:160px}
.mpick-btn:hover{border-color:var(--primary)}
.mpick-btn>span{flex:1;text-align:left}
.mpick-btn .caret{color:var(--muted-2);transition:transform .16s}
.mpick.open .mpick-btn{border-color:var(--primary)}
.mpick.open .mpick-btn .caret{transform:rotate(180deg)}
.mpick-pop{position:absolute;top:calc(100% + 8px);right:0;width:276px;max-width:calc(100vw - 28px);background:var(--surface);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);z-index:80;padding:12px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.15s}
.mpick.open .mpick-pop{opacity:1;visibility:visible;transform:translateY(0)}
.mpick-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mpick-head span{font-weight:800;font-size:.98rem}
.mpick-nav{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);cursor:pointer;font-size:1.15rem;line-height:1;display:grid;place-items:center;transition:.14s}
.mpick-nav:hover{border-color:var(--primary);color:var(--primary)}
.mpick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mpick-m{padding:10px 0;border-radius:9px;border:1px solid transparent;background:var(--surface-2);
  color:var(--text);font-size:.82rem;font-weight:600;cursor:pointer;transition:.14s}
.mpick-m:hover{background:var(--primary-soft);color:var(--primary-700)}
.mpick-m.now{border-color:var(--primary)}
.mpick-m.sel{background:var(--primary);color:#fff;border-color:var(--primary)}
.mpick-foot{display:flex;justify-content:flex-end;margin-top:10px}
.mpick-link{border:none;background:none;color:var(--primary);font-weight:700;font-size:.8rem;cursor:pointer;padding:2px 4px}
.mpick-link:hover{text-decoration:underline}
.pop-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.pop-head b{font-size:.92rem}
.pop-head .count{background:var(--primary-soft);color:var(--primary-700);font-size:.68rem;font-weight:800;padding:2px 9px;border-radius:999px}
.pop-head-r{display:flex;align-items:center;gap:8px}
.pop-head .count.hide{display:none}
.noti-read{border:none;background:none;color:var(--primary);font-size:.72rem;font-weight:700;cursor:pointer;padding:2px 4px}
.noti-read:hover{text-decoration:underline}
.noti-read.hide{display:none}
.pop-list{max-height:380px;overflow-y:auto}
.noti.is-new{background:linear-gradient(90deg,var(--primary-soft),transparent 70%)}
.noti.is-new::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--primary);transform:translateY(-50%)}
.noti{position:relative}
.noti{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);transition:.12s}
.noti:last-child{border-bottom:none}
.noti:hover{background:var(--surface-2)}
.noti .ni{width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center}
.noti .nt{font-size:.86rem;font-weight:600;color:var(--text);line-height:1.35}
.noti .nm{font-size:.76rem;color:var(--muted);margin-top:2px}
.noti.red .ni{background:var(--red-soft);color:#b91c1c}
.noti.amber .ni{background:var(--amber-soft);color:#a16207}
.noti.sky .ni{background:var(--primary-soft);color:var(--primary)}
.noti.green .ni{background:var(--green-soft);color:#047857}
.pop-empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:.86rem}
.pop-empty svg{color:var(--green);margin-bottom:8px}
.pop-foot{padding:11px 16px;border-top:1px solid var(--border);text-align:center}
.pop-foot a{font-size:.82rem;font-weight:600}
.tb-btn .dot.hide{display:none}

/* user menu dropdown */
.userchip{cursor:pointer;user-select:none;border-radius:11px;padding:4px 6px;transition:.14s}
.userchip:hover{background:var(--surface-2)}
.userchip .caret{color:var(--muted-2);transition:transform .16s}
.userchip.open .caret{transform:rotate(180deg)}
.menu{width:230px}
.menu .mu-head{padding:14px 16px;border-bottom:1px solid var(--border)}
.menu .mu-head b{display:block;font-size:.9rem}
.menu .mu-head span{font-size:.76rem;color:var(--muted);text-transform:lowercase}
.menu a{display:flex;align-items:center;gap:11px;padding:10px 16px;color:var(--text-2);font-size:.88rem;font-weight:500;transition:.12s}
.menu a:hover{background:color-mix(in srgb,var(--primary) 14%,var(--surface-2));color:var(--primary-700)}
.menu a:hover svg{color:var(--primary)}
.menu a svg{color:var(--muted)}
.menu a.danger{color:var(--text-2)}.menu a.danger svg{color:var(--muted)}
.menu a.danger:hover{background:color-mix(in srgb,var(--primary) 14%,var(--surface-2));color:var(--primary-700)}
.menu a.danger:hover svg{color:var(--primary)}
.menu .mu-sep{height:1px;background:var(--border);margin:4px 0}

/* settings tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:22px;flex-wrap:wrap}
.tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:11px 16px;font-size:.9rem;font-weight:600;
  color:var(--muted);cursor:pointer;font-family:inherit;margin-bottom:-1px;display:flex;align-items:center;gap:8px;transition:.14s}
.tabs button:hover{color:var(--text)}
.tabs button.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-pane{display:none}
.tab-pane.active{display:block}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.toggle-row:last-child{border-bottom:none}
.toggle-row .tl b{display:block;font-size:.92rem}
.toggle-row .tl span{font-size:.8rem;color:var(--muted)}
.radio-stack{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.send-events{display:flex;flex-direction:column;gap:8px;margin:4px 0 4px}
.send-events .radio-row{padding:9px 12px}
.radio-row{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}
.radio-row:hover{border-color:var(--border-strong)}
.radio-row input{width:auto;margin:3px 0 0;flex:0 0 auto;align-self:flex-start}
.radio-row > span{flex:1;min-width:0}
.radio-row:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.radio-row b{font-size:.9rem}
.smtp-box legend .ic{vertical-align:-2px;margin-right:4px}
.smtp-box{transition:opacity .15s}
.email-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
.email-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.email-col .card{margin:0}
.tpl-block textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.5}
@media(max-width:980px){.email-grid{grid-template-columns:1fr}}
.tpl-pick{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.tpl-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:.82rem;transition:border-color .15s,background .15s,color .15s}
.tpl-chip:hover{border-color:var(--border-strong)}
.tpl-chip input{width:auto;margin:0;flex:0 0 auto}
.tpl-chip:has(input:checked){border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:600}
.switch{position:relative;width:44px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--border-strong);border-radius:999px;transition:.2s;cursor:pointer}
.switch .sl::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:var(--shadow-sm)}
.switch input:checked + .sl{background:var(--primary)}
.switch input:checked + .sl::before{transform:translateX(20px)}
.info-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border);font-size:.9rem}
.info-row:last-child{border-bottom:none}
/* Label stays intact on the left; a long value (e.g. the Server software string)
   wraps and stays right-aligned instead of colliding with the label. */
.info-row span{color:var(--muted);flex:0 0 auto}
.info-row b{color:var(--text);min-width:0;text-align:right;word-break:break-word}

/* ====================== RESPONSIVE ====================== */
.overlay{display:none}
@media (max-width:1024px){
  :root{--sidebar-w:0px}
  .hamburger{display:flex}
  .topbar .brand-m{display:flex}
  nav.sidebar{transform:translateX(-100%);width:270px;transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  nav.sidebar.open{transform:translateX(0)}
  header.topbar{left:0}
  main{margin-left:0}
  .cols-2,.cols-3{grid-template-columns:1fr}
  .overlay.show{display:block;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:55;backdrop-filter:blur(2px)}
  .topbar .search{display:none}
  /* Page-head action groups must wrap instead of overflowing the viewport. */
  .page-head .flex{flex-wrap:wrap}
}
@media (max-width:560px){
  /* Stack the 2-up field grid; kill the grid row-gap so the stacked fields keep the
     same 16px label-margin rhythm as the inputs above/below (no doubled gap).
     minmax(0,1fr) (not plain 1fr) stops a long <option> — e.g. a store named
     "Bravo Uno Auto Parts & Surplus" — from widening the track past the card, which
     would make the dropdown bulge wider than the text inputs. */
  .form-row{grid-template-columns:minmax(0,1fr);row-gap:0}
  .form-row > div{min-width:0}
  /* Hard-cap the store/department dropdown to its cell and ellipsize a long value
     so it can NEVER grow wider than the Email/Contact inputs beside it. */
  .form-row .cbox--auto,
  .form-row .cbox-btn{max-width:100%!important}
  .form-row .cbox-btn .cbox-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Settings/section tabs: keep them on ONE line on phones — shrink the type a
     touch and don't wrap. If they still don't fit (admins have more tabs), the
     row scrolls sideways instead of stacking into 2 lines. */
  .tabs{flex-wrap:nowrap;overflow-x:auto;gap:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{padding:9px 8px;font-size:.78rem;white-space:nowrap;flex:0 0 auto;gap:5px}
  /* Keep the tab icons but shrink them a touch so the labels still fit one line. */
  .tabs button svg,.tabs button .ic{width:15px;height:15px;flex:0 0 auto}
  /* Admin login has 6 tabs — too many for one phone line. Wrap them onto exactly
     2 rows of 3 (no sideways scroll) so every tab is visible without swiping.
     Tighter padding/gap keeps "Department Metrics + System + Email" on one line. */
  .tabs.tabs-admin{flex-wrap:wrap;overflow-x:visible;row-gap:6px;column-gap:3px;border-bottom:none}
  .tabs.tabs-admin button{flex:0 1 auto;padding:9px 5px;gap:3px;font-size:.72rem}
  .tabs.tabs-admin button svg,.tabs.tabs-admin button .ic{width:14px;height:14px}
  /* Dropdown variant (opt-in via .tabs-dd, e.g. User Management): render the tabs
     as a full-width dropdown — same UX as the Reports sub-tabs. Collapsed shows
     only the active tab as the header; tapping it reveals the full list.
     Overrides the horizontal-scroll .tabs rules above. */
  .tabs.tabs-dd{display:block!important;flex-wrap:nowrap;gap:0;padding:0;overflow:hidden;margin-bottom:14px;
    border:1px solid var(--border);border-radius:10px;background:var(--surface)}
  .tabs.tabs-dd button{display:none;width:100%;justify-content:flex-start;font-size:.9rem;
    padding:12px 14px;border-radius:0;border-bottom:1px solid var(--border)}
  .tabs.tabs-dd button:last-child{border-bottom:0}
  .tabs.tabs-dd:not(.open) button.active{display:inline-flex;border-bottom:0}
  .tabs.tabs-dd:not(.open) button:not(.active){display:none}
  .tabs.tabs-dd.open button{display:inline-flex}
  .tabs.tabs-dd button.active{color:var(--primary);font-weight:600;border-bottom-color:var(--border)}
  .tabs.tabs-dd button.active::after{content:"";margin-left:auto;width:8px;height:8px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);opacity:.7;transition:transform .18s}
  .tabs.tabs-dd.open button.active::after{transform:rotate(-135deg)}
  .userchip .meta{display:none}
  .page-head h1{font-size:1.12rem}
  main{padding:20px 14px 70px}
  /* Tighten the topbar so the hamburger, brand and action buttons fit a phone. */
  header.topbar{gap:8px;padding:0 12px}
  .topbar .spacer{flex:0 1 auto}
  /* Let the header title + controls stack full-width and wrap cleanly. */
  .page-head{gap:12px}
  .page-head > .flex{width:100%}
  .page-head .flex{gap:8px;row-gap:8px}
  /* Keep themed pickers/dropdowns usable and inside the screen. */
  .mpick,.mpick-btn,.year-pick,.year-pick select,.has-pop .mpick-btn{max-width:100%}
  .mpick-pop{width:min(276px,calc(100vw - 28px))}
  /* Any table wider than the screen scrolls inside its wrapper (never the page). */
  .table-wrap{max-width:100%}
}
/* Very narrow phones: drop the topbar brand label, keep just the mark. */
@media (max-width:400px){
  .topbar .brand-m span,.topbar .brand-m{font-size:.9rem}
  header.topbar{gap:6px;padding:0 10px}
}
/* ======================================================================
   MOBILE HARDENING — static, no-zoom, overflow-proof layout
   Consolidated guards so no page ever scrolls sideways or "zooms out"
   on a phone, and card/table spacing stays intact on small screens.
   ====================================================================== */
/* NOTE: NO overflow on <html> — putting an overflow value on the root turns it
   into the scroll container and breaks position:sticky in Android WebViews
   (headers scroll away). Sideways drift is instead clipped on <body> (mobile
   only, below) using `clip` — never `hidden`, since hidden would force
   overflow-y to auto and make <body> a scroll container, breaking sticky too. */
html{overscroll-behavior:none}
/* Kill the browser pull-to-refresh so a downward drag/tap near the top never
   reloads the page on mobile. */
body{max-width:100%;overscroll-behavior:none}
/* Scrollable dropdown/modal panels must not chain their overscroll to the page
   (reaching the end of the list would otherwise fire the pull-to-refresh). */
.cbox-list,.cbox-pop,.tv-modal-body,.pop,.pop-list,.modal .m-body,dialog .m-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Media & wide atoms can't spill past their container. */
img,svg,video,canvas,iframe{max-width:100%}
/* Cards/tiles/heads may shrink below their content's natural width so a
   long token inside never forces the whole row wider than the screen. */
.card,.stat,.page-head,.table-wrap{min-width:0}

@media (max-width:640px){
  /* Lock the page to vertical-only: clip any sideways overflow on <body> so the
     page can't be panned/dragged left-right (feels "static"). `clip` (not
     hidden) keeps <body> a NON-scroll container, so position:sticky headers
     still pin to the viewport. Root <html> stays overflow:visible on purpose. */
  body{overflow-x:clip}
  /* Even, comfortable gutters everywhere. */
  main{padding:18px 14px 84px}
  /* Pin EVERY module's page header under the topbar while scrolling (MOBILE
     ONLY — desktop keeps its existing non-sticky headers untouched). This
     locks pages that never had the .sticky-head class (Requisition, Tools,
     Canned, Categories, etc.) so their title/action row stops scrolling away.
     Full-bleed background flush to the topbar; z-index stays under the topbar
     (50) and modals (200+). */
  .page-head{
    position:sticky;top:var(--header-h);z-index:30;background:var(--bg);
    margin:-18px -14px 14px;padding:8px 14px;border-bottom:1px solid var(--border)}
  /* Purchases: tighten the gap between the title block and the Purchase Totals
     card so the whole header reads more compact on phones. */
  .pur-head{gap:8px!important}
  .pur-head .pur-head-title h1{margin:0}
  .pur-head .pur-head-title .sub{margin:2px 0 0}
  /* Tickets already pins its header via the .sticky-stack wrapper — don't
     double-stick (or re-pad) the inner page-head there. */
  .sticky-stack .page-head{position:static;margin:0 0 12px;padding:0;border-bottom:0}
  .card{padding:16px 14px;border-radius:14px}
  .page-head{margin-bottom:14px}
  /* Page/section titles are oversized on phones — scale every module's title
     header down (covers all phones ≤640px, not just ≤560px). Mobile-only. */
  .page-head h1{font-size:1.12rem}
  .page-head .sub{font-size:.76rem}
  /* Shrink the CSAT rating badge on phones so it tucks up onto the same line as
     the ticket no. + status pill instead of wrapping to its own second line. */
  .rating-pill{font-size:.72rem;padding:3px 9px;vertical-align:middle}
  .rating-pill span{font-size:.82rem}
  /* Ticket header actions fit one line: Print & Back collapse to icon-only. */
  .tv-hact .tv-hlbl{display:none}
  /* Staff (admin / supervisor / technician) also see Edit + Update — collapse
     THOSE to icon-only too (same 46×40 size) so the whole action row stays on
     ONE line on phones. */
  .tv-head-compact .tv-hbtn .tv-hlbl{display:none}
  .tv-head-compact .tv-hbtn{padding:0;gap:0;justify-content:center;align-items:center;min-width:46px;height:40px;box-sizing:border-box}
  /* Update button stays icon-only on phones even when there's a pending change
     (.tv-updlive) — it's already the violet primary button so it stands out
     without growing and pushing the row onto a second line. */
  .tv-head-compact #updateBtn.tv-updlive{min-width:46px;width:auto;padding:0;gap:0}
  .tv-head-compact #updateBtn.tv-updlive .tv-hlbl{display:none}
  /* Print & Back are the SAME fixed size (pantay). A fixed height keeps the Back
     button from growing just because its arrow icon is larger. */
  .tv-hact{padding:0;gap:0;justify-content:center;align-items:center;min-width:46px;height:40px;box-sizing:border-box}
  /* Only the arrow ICON is enlarged — not the button. */
  .tv-hact .tv-back-ic{display:inline-flex;align-items:center;justify-content:center;line-height:0}
  .tv-hact .tv-back-ic svg{width:22px;height:22px;display:block}
  /* Refresh (btn-icon) matches the other header buttons' 46×40 size on phones. */
  .tv-head .gap-wrap > .btn-icon{min-width:46px;height:40px;padding:0;box-sizing:border-box;justify-content:center;align-items:center}
  /* Push the Print + Back icon buttons to the right edge of the header row. */
  .tv-hpush{margin-left:auto!important}
  /* Helper hint labels are centered on phones. */
  .tv-note{text-align:center}
  /* Attach file: keep the button its natural size with the file name beside it
     (side-by-side), not full-width. */
  .file-field{align-items:center}
  .file-field .file-btn{flex:0 0 auto}
  .file-field .file-name{flex:1 1 auto;min-width:0}
  /* ...EXCEPT the Add Note attach (.file-field-full), which is full-width (buo) —
     a distinct look from the Thread reply's side-by-side button. */
  .file-field.file-field-full{align-items:stretch}
  .file-field.file-field-full .file-btn{flex:1 1 100%;justify-content:center}
  /* "Set to Awaiting User Reply" is redundant on mobile — the Update Status card
     already offers it — so hide the checkbox here. */
  .tv-waituser{display:none}
  /* Slimmer Details status pills so they wrap to ~2 lines instead of 3. */
  /* Details tags → 2-up grid that fills the row edge-to-edge (aligned like the
     stat cards), instead of hugging the left. Each tag stretches to its column. */
  .tv-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  /* Smaller font + nowrap so each tag stays on ONE line inside its column. */
  .tv-pills .pill{font-size:.62rem;padding:4px 8px;gap:4px;justify-content:flex-start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;width:auto}
  /* Drop the pill's inline icon (e.g. the Requisition clipboard) on mobile — it
     frees the width the long "Requisition · Closed" tag needs to stay on one line.
     The coloured ::before dot stays. */
  .tv-pills .pill svg{display:none}
  /* Thread reply subtitle on one line, with a little room from the right edge. */
  .tv-sub1{font-size:.64rem!important;white-space:nowrap}
  /* Stat tiles: two clean columns, tighter but never cramped. */
  .stat-grid,.stat-grid.stat-6,.stat-grid.stat-7{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  /* Dashboard greeting: trim the avatar + New Ticket button so the chips and
     Recent Tickets clear the fold on a phone. Desktop keeps the inline 52px. */
  .hi-av{width:44px!important;height:44px!important;flex-basis:44px!important;font-size:.92rem!important}
  .page-head.sticky-head .btn-primary{padding-top:9px;padding-bottom:9px}
  /* Chips: put the number BESIDE the icon on the top row (2-col grid), then the
     label + hint stack full-width underneath. Compact height so all 6 fit on one
     screen. Mobile-only — desktop keeps its original vertical stack. .trend stays
     position:absolute, unaffected. */
  .stat,.stat-grid.stat-6 .stat,.stat-grid.stat-7 .stat{padding:7px 11px;border-radius:12px;
    display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px}
  .stat .si,.stat-grid.stat-6 .stat .si,.stat-grid.stat-7 .stat .si{width:26px;height:26px;border-radius:8px;margin-bottom:0}
  .stat .big,.stat-grid.stat-6 .stat .big,.stat-grid.stat-7 .stat .big{font-size:1.25rem;align-self:center}
  .stat .lbl{grid-column:1 / -1;font-size:.76rem;margin-top:3px;line-height:1.12}
  .stat .hint{grid-column:1 / -1;font-size:.67rem;margin-top:1px;line-height:1.12}
  /* Recent Tickets card: tighter so the whole dashboard fits one screen.
     Overrides the inline margin/padding on mobile only (desktop keeps 20px/14px). */
  .recent-card{margin-top:8px!important;padding:11px 12px}
  .recent-card > .rc-head{margin-bottom:9px!important}
  .recent-card > .rc-head h3{font-size:1rem}
  /* Empty state ("No tickets yet…") — smaller text on phones. */
  .recent-card .rc-empty{font-size:.82rem;line-height:1.35;margin:0}
  /* Recent Tickets = one-at-a-time fading carousel on phones. When there are 2+
     tickets AND the ≤640px query matches, JS adds .rt-carousel to the table +
     .rt-on to the tbody. The whole card is lifted OUT of table layout here: a
     display:block tbody inside a display:table gets shrink-wrapped in an
     anonymous cell (that's what pinned the eye to the left), so the header and
     the single visible row become flex rows instead — the eye lands hard-right,
     tapat sa "DETAILS". Rows stack absolutely and cross-fade (.rt-show = visible).
     A single ticket keeps the normal list-card flow. Desktop is never touched. */
  .recent-card table.tbl-cards.tbl-compact.rt-carousel{display:block}
  .recent-card table.tbl-cards.tbl-compact.rt-carousel thead{display:block;border-bottom:1px solid var(--border)}
  .recent-card table.tbl-cards.tbl-compact.rt-carousel thead tr{display:flex;align-items:center}
  .recent-card table.tbl-cards.tbl-compact.rt-carousel thead th[data-col=tno],
  .recent-card table.tbl-cards.tbl-compact.rt-carousel thead th.st-eye-col{display:block;flex:0 0 auto;
    background:transparent;border:none}
  .recent-card table.tbl-cards.tbl-compact.rt-carousel thead th.st-eye-col{margin-left:auto}
  .recent-card table.tbl-cards.tbl-compact.rt-carousel tbody{display:block;position:relative;width:100%}
  .recent-card table.tbl-cards.tbl-compact.rt-carousel tbody > tr{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;
    display:flex;align-items:center;gap:10px;padding:0 14px;border:none!important;
    opacity:0;pointer-events:none;transition:opacity .55s ease}
  .recent-card table.tbl-cards.tbl-compact.rt-carousel tbody > tr.rt-show{opacity:1;pointer-events:auto}
  .recent-card table.tbl-cards.tbl-compact.rt-carousel tbody > tr > td{display:none}
  .recent-card table.tbl-cards.tbl-compact.rt-carousel tbody > tr > td.c-tno{display:block;flex:1 1 auto;min-width:0;
    padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .recent-card table.tbl-cards.tbl-compact.rt-carousel tbody > tr > td.st-eye-col{display:flex;flex:0 0 auto;
    align-items:center;padding:0;margin-left:auto}
  /* Primary action in a page-head goes full width so it never overhangs. */
  .page-head > .btn,.page-head > .btn-primary{flex:1 1 auto;justify-content:center}
  /* Tables that stay tabular scroll smoothly inside their wrapper only. */
  .table-wrap{-webkit-overflow-scrolling:touch;max-width:100%}
  table{min-width:520px}
  thead th{padding:10px 12px}
  tbody td{padding:11px 12px}
  /* Quick-filter count tiles: clean 2-up grid, labels wrap instead of clipping
     ("Assigned to me", "Collaborating" no longer get cut off). */
  .count-bar{flex-wrap:wrap;gap:10px}
  /* Grid (not flex-wrap) so the content vertically centers inside a chip that got
     stretched to match a taller neighbour — align-content on wrapped flex lines
     was unreliable here. Mirrors the dashboard .stat tiles: [icon][number] on
     row 1, label spanning row 2, both row-tracks centered in the chip. */
  /* 1fr spacer rows above (row 1) and below (row 4) the content reliably center
     [icon][number]+label as a group when a chip gets stretched taller to match a
     2-line neighbour ("Assigned to me"). align-content:center was ignored here,
     but explicit 1fr tracks consume the free space equally top & bottom. */
  .count-chip{flex:1 1 calc(50% - 5px);min-width:0;padding:12px;
    display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto auto 1fr;align-items:center;column-gap:8px;row-gap:3px}
  .count-chip .cc-ic{grid-row:2}
  .count-chip .cc-n{grid-row:2;font-weight:800}
  /* Label drops to its own full-width line inside the chip so long words like
     "Collaborating"/"Unassigned" fit instead of clipping out of the box. */
  .count-chip .cc-l{grid-row:3;grid-column:1 / -1;white-space:normal;overflow-wrap:anywhere;line-height:1.2;font-size:.82rem}
  /* Ticket Views chips: flex COLUMN, vertically centered. Icon+number share the
     top line (.cc-top), label wraps below. flex justify-content:center centers the
     group reliably even when a chip is stretched to match a 2-line neighbour —
     grid align-content / 1fr rows were ignored on flex-stretched items. #empCards
     keeps the grid rule above (its chips have no .cc-top wrapper). */
  .views-card .count-chip{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding:8px 10px}
  .views-card .count-chip .cc-top{display:flex;align-items:center;gap:7px}
  /* Compact Views chips on phones — smaller icon/number/label so the whole Views
     card takes less vertical space. Scoped to .views-card (Tickets only). */
  .views-card .count-bar{gap:8px}
  .views-card .count-chip .cc-ic{width:24px;height:24px;border-radius:7px}
  .views-card .count-chip .cc-ic .ic{width:15px;height:15px}
  .views-card .count-chip .cc-n{font-size:1.05rem}
  .views-card .count-chip .cc-l{font-size:.72rem;line-height:1.15}
  /* Android dark-mode mobile-BROWSER repaint glitch: an expanded filter form can
     show torn/stale GPU tiles through its transparent gaps (streaks between the
     fields). Give the open form an opaque fill so it always paints over them.
     Covers the Tickets filter; the Purchases filter has its own equivalent rule. */
  html[data-theme="dark"] .filter-card[open] > form{background:var(--card)}
  /* Slimmer collapsible bars (Ticket Views / Search & Filters) — trim the
     padding and the inflated line-height so they're not so chunky. */
  .filter-card > summary.filter-summary{padding:9px 14px;line-height:1.2;font-size:.95rem}
  .filter-card .fs-left{gap:9px}
  /* Purchases filter bar → 2 lines on phones.
     Line 1: Search & Filter · badge · bell · refresh · chevron.
     Line 2: the 4 action buttons (Sticker / Compare / Excel / Print) side by side.
     fs-left flexes/shrinks so the bell+refresh+chevron always stay on line 1. */
  /* Mobile: the wrapper .card padding:0 override lives in a min-width:641px block
     (desktop only), so on phones this card inherits .card{padding:16px 14px} — that
     stray 16px top padding was the empty gap above the "Filters" row. Zero it here
     (scoped to #perf's Purchases filter so the Tickets filter is untouched). */
  .pur-filter.card{padding:0}
  /* Tighter gap below the Filters card (inline margin-bottom:16px → 8px on phones). */
  .pur-filter.card{margin-bottom:8px!important}
  .pur-filter > summary.filter-summary{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px;row-gap:4px;padding:6px 12px}
  .pur-filter .fs-left{flex:1 1 0;min-width:0;font-size:.82rem;white-space:nowrap;overflow:hidden}
  /* "N records" badge is redundant on phones — hide it. */
  .pur-filter .fs-badge{display:none}
  .pur-filter .pur-head-actions{flex:0 0 auto;margin-left:auto!important;gap:6px!important}
  /* Slimmer bell / refresh so the whole toolbar card is thinner. */
  .pur-filter .pur-head-actions .rq-bell{width:28px;height:28px}
  /* Download (Export Excel) relocated into the top row next to the bell — icon-only square. */
  .pur-filter .pur-head-actions #purExcelBtn.pur-excel-moved{flex:0 0 auto;width:28px;height:28px;
    padding:0;display:inline-flex;align-items:center;justify-content:center;gap:0}
  .pur-filter .pur-head-actions #purExcelBtn.pur-excel-moved .lbl-full,
  .pur-filter .pur-head-actions #purExcelBtn.pur-excel-moved .lbl-short{display:none}
  .pur-filter .pur-head-actions #purExcelBtn.pur-excel-moved .ic{width:15px;height:15px}
  /* Print / PDF (purple) relocated into the top row too — icon-only square next to download. */
  .pur-filter .pur-head-actions #purReportBtn.pur-report-moved{flex:0 0 auto;width:28px;height:28px;
    padding:0;display:inline-flex;align-items:center;justify-content:center;gap:0}
  .pur-filter .pur-head-actions #purReportBtn.pur-report-moved .lbl-full,
  .pur-filter .pur-head-actions #purReportBtn.pur-report-moved .lbl-short{display:none}
  .pur-filter .pur-head-actions #purReportBtn.pur-report-moved .ic{width:15px;height:15px}
  .pur-filter .fs-chev{flex:0 0 auto;margin-left:10px}
  /* Action buttons centered as a group (not stretched edge-to-edge). */
  .pur-filter .pur-btn-row{order:2;flex:0 0 100%;gap:6px;margin:0;justify-content:center}
  .pur-filter .pur-btn-row .btn{flex:0 1 auto;min-width:0;justify-content:center;gap:4px;
    padding:5px 11px;font-size:.72rem;white-space:nowrap}
  .pur-filter .pur-btn-row .btn .ic{flex:0 0 auto;width:14px;height:14px}
  /* Print / PDF and Excel are icon-only on phones — Sticker + Compare keep labels. */
  .pur-filter .pur-btn-row #purReportBtn,
  .pur-filter .pur-btn-row #purExcelBtn{flex:0 0 auto;padding:5px 9px}
  .pur-filter .pur-btn-row #purReportBtn .lbl-full,
  .pur-filter .pur-btn-row #purReportBtn .lbl-short,
  .pur-filter .pur-btn-row #purExcelBtn .lbl-full,
  .pur-filter .pur-btn-row #purExcelBtn .lbl-short{display:none}
  /* Sticker + Compare relocated into their own card below the filter (phones only).
     :not([hidden]) so it stays collapsed until JS un-hides it on mobile. */
  .pur-tools-card:not([hidden]){display:flex;gap:8px;align-items:center;padding:12px;margin-bottom:8px}
  .pur-tools-card .btn{flex:1 1 0;min-width:0;justify-content:center;gap:5px;padding:9px 10px;
    font-size:.8rem;white-space:nowrap}
  .pur-tools-card .btn .ic{flex:0 0 auto;width:15px;height:15px}
  .pur-tools-card .btn .lbl-short{display:inline}
  .pur-tools-card .btn .lbl-full{display:none}
  .views-body{padding:10px 12px 12px}
  /* Bulk-action bar hidden on phones — it needs row checkboxes and wide
     controls. Bulk actions stay available on desktop. */
  .bulk-bar{display:none}
  .list-foot{flex-direction:column;align-items:stretch;gap:12px}
  /* Top line: Showing … | 10/page  —  Page nav drops to its own line below. */
  .list-foot .pager{flex:1 1 100%;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px 10px;white-space:nowrap}
  .pager-info{flex:0 1 auto;font-size:.7rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .pager-nav{flex:0 0 100%;justify-content:center;gap:4px;margin-top:6px}
  .pager-page{font-size:.7rem;min-width:auto}
  select.pager-pp{flex:0 0 auto;width:auto;min-width:0;max-width:none;font-size:.72rem;padding:6px 26px 6px 9px;background-size:11px;background-position:right 8px center}
  /* The pager select is upgraded to a custom dropdown (cbox); make sure its
     mirror is wide enough to show the full "10 / page" label (no ellipsis). */
  .pager .cbox--auto{min-width:104px!important;max-width:none!important}
  .pager .cbox-btn{font-size:.72rem;padding:6px 9px}
  .pager .btn{min-width:30px;padding:6px 6px}
}

/* ---- Card-box tables on phones (opt-in via .tbl-cards) ----
   Each row becomes a bordered card; each cell shows its column label
   (injected as data-label by footer.php). Used where a horizontal scroll
   would be awkward, e.g. the dashboard's Recent Tickets list. */
@media (max-width:640px){
  /* In card mode the wrapper's own border/background reads as a stray "cut"
     line above the cards — strip it so only the row-cards show. */
  .tw-cards,#bulkForm .table-wrap{border:none!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;overflow:visible!important}
  /* display:block avoids table-layout artifacts (a stray anonymous-row line
     above the first card) — the whole thing is block/flex in card mode. */
  table.tbl-cards{display:block;min-width:0;width:100%;border-collapse:separate;border-spacing:0;border:0}
  table.tbl-cards thead{display:none}
  table.tbl-cards tbody{display:block}
  table.tbl-cards tbody tr{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;
    padding:4px 6px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  table.tbl-cards tbody tr:hover{background:var(--surface)}
  table.tbl-cards tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:10px 8px;border:none;border-bottom:1px solid var(--border);text-align:right;font-size:.88rem;white-space:normal}
  table.tbl-cards tbody tr td:last-child{border-bottom:none}
  table.tbl-cards tbody td::before{content:attr(data-label);text-align:left;color:var(--muted);
    font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex:0 0 auto}
  table.tbl-cards tbody td:empty{display:none}
  /* Keep the row-select checkbox in card mode with a clear "Select" label so
     bulk actions still work on a phone. */
  table.tbl-cards tbody td:has(> input[type=checkbox])::before{content:"Select"}
  /* Ticket number: the desktop column caps at 96px and breaks anywhere; in a
     card that squeezes it to one character per line. Let it use the full row. */
  table.tbl-cards tbody td.c-tno{max-width:none}
  table.tbl-cards tbody td.c-tno a.tno{overflow-wrap:normal;white-space:normal}
  table.tbl-cards tbody td.c-subj{max-width:none}
  /* Compact ticket tables (dashboard "Recent Tickets" + the Tickets list) render
     as ONE bordered "list card" on phones — same look as the chat-log Ticket
     Pushes table: a 2-column grid showing only Ticket No. + a Details eye that
     opens the full quick-view modal. Every other column is hidden and surfaced
     inside that modal. Only index.php + tickets.php use .tbl-compact, so this
     block is fully self-contained and desktop is untouched. */
  table.tbl-cards.tbl-compact{display:table;width:100%;border-collapse:collapse;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
  table.tbl-cards.tbl-compact thead{display:table-header-group}
  table.tbl-cards.tbl-compact thead tr{display:table-row;background:transparent;border:none;box-shadow:none;margin:0;padding:0}
  table.tbl-cards.tbl-compact thead th{display:none}
  table.tbl-cards.tbl-compact thead th[data-col=tno],
  table.tbl-cards.tbl-compact thead th.st-eye-col{display:table-cell;padding:6px 14px;
    font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
    background:var(--surface-2);border-bottom:1px solid var(--border)}
  table.tbl-cards.tbl-compact thead th[data-col=tno]{text-align:left}
  table.tbl-cards.tbl-compact thead th.st-eye-col{text-align:right}
  table.tbl-cards.tbl-compact thead th[data-col=tno] a{color:inherit;text-decoration:none}
  table.tbl-cards.tbl-compact thead th .sort-ind{display:none}
  /* Recent Tickets header row was tall because the sortable .sh span carries a
     12px vertical padding — strip it on phones so the header hugs its text. */
  .recent-card table.tbl-cards.tbl-compact thead th .sh{padding-top:0;padding-bottom:0}
  .recent-card table.tbl-cards.tbl-compact thead th[data-col=tno],
  .recent-card table.tbl-cards.tbl-compact thead th.st-eye-col{padding-top:4px;padding-bottom:4px}
  /* Row-select checkbox (Tickets list only — Recent Tickets has no bulk column).
     Bring the column back so selection works on phones too. */
  table.tbl-cards.tbl-compact thead th:has(input[type=checkbox]){display:table-cell;width:40px;padding:6px 4px 6px 12px;
    text-align:center;background:var(--surface-2);border-bottom:1px solid var(--border)}
  table.tbl-cards.tbl-compact tbody td:has(input[type=checkbox]){display:table-cell;width:40px;padding:10px 4px 10px 12px;
    text-align:center;vertical-align:middle}
  table.tbl-cards.tbl-compact tbody td:has(input[type=checkbox])::before{content:none;display:none}
  table.tbl-cards.tbl-compact tbody{display:table-row-group}
  table.tbl-cards.tbl-compact tbody tr{display:table-row;background:transparent;
    border:none!important;box-shadow:none;margin:0;padding:0;border-bottom:1px solid var(--border)!important}
  table.tbl-cards.tbl-compact tbody tr:last-child{border-bottom:none!important}
  /* Mobile lists every ticket in scope — same rows as desktop (Resolved/Closed
     included) so the "N ticket(s) found" count always matches what's shown. */
  table.tbl-cards.tbl-compact tbody td{display:none;border:none;padding:0;text-align:left}
  table.tbl-cards.tbl-compact tbody td::before{display:none}
  table.tbl-cards.tbl-compact tbody td.c-tno{display:table-cell;max-width:none;padding:13px 14px;vertical-align:middle;white-space:nowrap}
  table.tbl-cards.tbl-compact tbody td.c-tno a.tno{font-size:.95rem;white-space:nowrap}
  /* Previous Tickets list: keep each ticket no. on ONE line on phones (no
     mid-code wrap like "TGC-26-/TCBYZ8") — shrink a touch and don't wrap. */
  .link-list li{font-size:.8rem}
  .link-list .tno{white-space:nowrap;flex:0 0 auto;font-size:.82rem}
  table.tbl-cards.tbl-compact tbody td.st-eye-col{display:table-cell;padding:7px 14px;text-align:right;vertical-align:middle;white-space:nowrap}
  table.tbl-cards.tbl-compact tbody td[colspan]{display:table-cell;text-align:center;padding:24px 14px}
  table.tbl-cards.tbl-compact tbody .tv-eye{display:inline-flex;width:34px;height:34px;vertical-align:middle}
  /* Full-width message rows (e.g. "No tickets match…") stay centered, no label. */
  table.tbl-cards tbody td[colspan]{display:block;text-align:center;border-bottom:none}
  table.tbl-cards tbody td[colspan]::before{display:none}
  /* Trailing action cell spans the whole card as a full-width button row. */
  table.tbl-cards tbody td.right{justify-content:stretch}
  table.tbl-cards tbody td.right::before{display:none}
  table.tbl-cards tbody td.right .btn{width:100%;justify-content:center}
}

/* ---- Topbar fixes on phones: keep the brand on one line and keep every
   popover (theme, notifications, user menu) fully inside the screen. ---- */
@media (max-width:1024px){
  /* "IT Helpdesk" stays on a single line; clips gracefully if truly cramped
     instead of stacking into "IT" / "Helpdesk". */
  .topbar .brand-m{white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .topbar .brand-m svg{flex:0 0 auto}
}
@media (max-width:640px){
  /* Hide the topbar brand ("IT Help") on phones — the hamburger already
     identifies the app and this frees up room for the action buttons. */
  .topbar .brand-m{display:none}
  /* Keep the hamburger on the left edge and push theme/bell/user to the right
     edge (the spacer must grow again now that the brand no longer fills it). */
  .topbar .spacer{flex:1 1 auto}
  /* Anchor popovers to the topbar's right edge (not each button) so a wide
     panel can never spill off the left side of the screen. */
  header.topbar .has-pop{position:static}
  header.topbar .pop{left:auto;right:12px;width:min(340px,calc(100vw - 24px));max-width:calc(100vw - 24px)}
  header.topbar .pop.theme-pop{width:min(300px,calc(100vw - 24px))}
  header.topbar .pop.menu{width:min(264px,calc(100vw - 24px))}
}

/* ---- Mobile ticket "eye" button + quick-view modal ---- */
.tv-eye{display:none;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;
  border:1px solid var(--border);background:var(--surface-2);border-radius:9px;color:var(--primary);cursor:pointer;padding:0}
.tv-eye:active{transform:scale(.95)}
.tv-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.tv-modal.open{display:flex}
.tv-modal-bg{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
.tv-modal-card{position:relative;width:100%;max-width:480px;max-height:96vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.tv-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.tv-modal-title{font-size:1rem;color:var(--primary)}
.tv-modal-x{width:32px;height:32px;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;color:var(--muted);
  cursor:pointer;font-size:1rem;line-height:1;display:grid;place-items:center}
.tv-modal-body{padding:2px 16px;overflow-y:auto}
.tv-mrow{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border);text-align:right}
.tv-mrow:last-child{border-bottom:none}
.tv-mlabel{flex:0 0 auto;color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding-top:2px}
.tv-mval{font-size:.86rem;overflow-wrap:anywhere}
.tv-modal-foot{padding:10px 16px;border-top:1px solid var(--border)}
.tv-modal-foot .btn{width:100%;justify-content:center}
/* Quick-assign control inside the eye modal (replaces the "Assigned" row). */
.tv-assign{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--border)}
.tv-assign .tv-mlabel{flex:0 0 auto;padding-top:0}
.tv-assign-form{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;justify-content:flex-end}
.tv-assign-sel{flex:1 1 auto;min-width:0;max-width:200px}
.tv-assign-form .cbox--auto{flex:1 1 auto!important;min-width:0!important;max-width:200px!important;width:auto!important}
.tv-assign-form .btn{flex:0 0 auto}

@media print{
  @page{size:A4;margin:4mm 7mm 10mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  html,body,.layout,main{background:#fff!important;background-image:none!important}
  .breadcrumb{display:none!important}
  .page-head{margin-top:0!important;padding-top:0!important;margin-bottom:8px}
  .page-head h1{margin-top:0!important}
  nav.sidebar,header.topbar,.overlay,.btn,.hamburger,.no-print{display:none!important}
  .layout{display:block}
  main{margin:0;padding:0;max-width:none}
  .page-head{margin-bottom:12px}
  .page-head h1{font-size:1.25rem}
  .card{box-shadow:none;border-color:#ddd;break-inside:avoid;padding:12px 14px}
  .stat-grid{grid-template-columns:repeat(4,1fr)!important;gap:8px!important;margin-bottom:12px!important}
  .stat{padding:10px 12px;break-inside:avoid}
  .grid.cols-2{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .table-wrap{box-shadow:none;border-color:#ddd;break-inside:auto;overflow:visible!important}
  table{font-size:.74rem;width:100%;table-layout:auto}
  th,td{padding:4px 6px!important}
  tr{break-inside:avoid}
  table input{max-width:52px!important;padding:2px 4px!important;font-size:.7rem;border:1px solid #cbd2e0}
  h2{margin:14px 0 8px!important}
  .bar{border:1px solid #c7cdda;background:#eef1f7!important;height:9px}
  .bar i{background:#4f46e5!important}
  /* Ticket Pushes table: roomier than the dense KPI/report tables.
     Fixed layout + % widths so it always fits the page (never overflows). */
  .push-card{padding:12px 8px!important}
  .push-card .table-wrap{overflow:hidden!important}
  .push-card table{font-size:.78rem;table-layout:fixed!important;width:100%!important}
  .push-card th,.push-card td{padding:8px 6px!important;vertical-align:top;white-space:normal!important;word-break:break-word;overflow-wrap:anywhere}
  .push-card th{border-bottom:1px solid #d6dce8}
  .push-card td{border-bottom:1px solid #eef1f7}
  .push-card th:nth-child(1),.push-card td:nth-child(1){width:17%!important}
  .push-card th:nth-child(2),.push-card td:nth-child(2){width:13%!important}
  .push-card th:nth-child(3),.push-card td:nth-child(3){width:17%!important;padding-right:12px!important}
  .push-card th:nth-child(4),.push-card td:nth-child(4){width:14%!important}
  .push-card th:nth-child(5),.push-card td:nth-child(5){width:9%!important;text-align:center;white-space:nowrap!important}
  .push-card th:nth-child(6),.push-card td:nth-child(6){width:16%!important}
  .push-card th:nth-child(7),.push-card td:nth-child(7){width:14%!important;padding-right:2px!important}
}

/* =====================================================================
   Employee ticket follow-up chat widget (one-way auto-assistant)
   ===================================================================== */
#empChat{position:fixed;right:22px;bottom:22px;z-index:1200;font-size:.9rem}
.chat-fab{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--primary),#818cf8);color:#fff;font-weight:600;
  padding:12px 18px;border-radius:999px;box-shadow:var(--shadow-lg);transition:transform .15s,box-shadow .15s}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab .ic,.chat-fab svg{width:18px;height:18px}
.chat-fab-label{font-size:.9rem;white-space:nowrap;overflow:hidden;max-width:120px;transition:max-width .18s ease,opacity .18s ease,margin .18s ease}
#empChat.open .chat-fab{display:none}
/* While the mobile left sidebar (drawer) is open, tuck the floating "Follow up"
   button down to an icon-only pill on the right so it stops covering the menu.
   Closing the drawer restores the full labelled button. Mobile/tablet only. */
@media (max-width:1024px){
  body.drawer-open .chat-fab{gap:0;padding:12px;transform:translateX(30%)}
  body.drawer-open .chat-fab-label{max-width:0;opacity:0;margin:0}
}

.chat-panel[hidden]{display:none!important}
.chat-panel{position:absolute;right:0;bottom:0;width:360px;max-width:calc(100vw - 32px);
  height:520px;max-height:calc(100vh - 90px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow-lg);overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;background:linear-gradient(135deg,var(--primary),#818cf8);color:#fff}
.chat-head-t b{display:block;font-size:.98rem;line-height:1.2}
.chat-head-t span{font-size:.74rem;opacity:.85}
.chat-x{background:transparent;border:none;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;opacity:.85}
.chat-x:hover{opacity:1}

.chat-hotline{display:flex;align-items:flex-start;justify-content:center;gap:8px;padding:10px 12px;
  background:var(--surface);color:var(--text-2);font-size:.74rem;line-height:1.5;text-align:center;
  border-bottom:1px solid var(--border)}
.chat-hotline b{color:var(--text)}
.chat-hotline-text{white-space:nowrap}
.hot-br-m{display:none}
.chat-hotline .ic,.chat-hotline svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--muted)}
/* MOBILE: the chat panel is too narrow for the single-line hotline. Break it into
   3 lines (extra break after "…or") and allow wrapping as a safety net. Desktop
   keeps its 2-line nowrap layout. */
@media (max-width:640px){
  .chat-hotline-text{white-space:normal;text-align:center}
  .hot-br-m{display:inline}
}

.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface-2)}
.chat-msg{display:flex}
.chat-msg.user{justify-content:flex-end}
.chat-msg .bubble{max-width:80%;padding:9px 13px;border-radius:14px;line-height:1.5;font-size:.86rem;
  white-space:normal;word-wrap:break-word;box-shadow:var(--shadow-sm)}
.chat-msg.bot .bubble{background:var(--surface);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:4px}
.chat-msg.user .bubble{background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.chat-msg .bubble.typing{letter-spacing:3px;color:var(--muted);font-weight:700}

.chat-optswrap{background:var(--surface);border-top:1px solid var(--border)}
.chat-opts-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:transparent;border:none;cursor:pointer;padding:10px 14px 6px;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}
.chat-opts-toggle:hover{color:color-mix(in srgb,var(--primary) 75%,#000)}
.chat-opts-toggle .qo-label{display:inline-flex;align-items:center;gap:7px}
.chat-opts-toggle svg,.chat-opts-toggle .ic{width:15px;height:15px;transition:transform .2s;opacity:.7}
.chat-opts-toggle .qo-label .ic{opacity:1}
.chat-optswrap.collapsed .chat-opts-toggle{padding-bottom:10px}
.chat-optswrap.collapsed .chat-opts-toggle>svg,.chat-optswrap.collapsed .chat-opts-toggle>.ic{transform:rotate(-90deg)}
.chat-opts{display:flex;flex-direction:column;gap:6px;padding:2px 12px 12px}
.chat-optswrap.collapsed .chat-opts{display:none}
.chat-chip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-weight:600;font-size:.82rem;line-height:1.3;padding:10px 12px;border-radius:11px;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s,transform .06s}
.chat-chip::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--primary);opacity:.55;transition:opacity .15s}
.chat-chip::after{content:"";flex:none;margin-left:auto;width:6px;height:6px;
  border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);opacity:.35;transition:opacity .15s,transform .15s}
.chat-chip:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-700);box-shadow:var(--shadow-sm)}
.chat-chip:hover::before{opacity:1}
.chat-chip:hover::after{opacity:.8;transform:rotate(45deg) translate(1px,-1px)}
.chat-chip:active{transform:translateY(1px)}

.chat-input{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface)}
.chat-input input{flex:1;border:1px solid var(--border);border-radius:999px;padding:9px 14px;font-size:.86rem;
  background:var(--surface-2);color:var(--text)}
.chat-input input:focus{outline:none;border-color:var(--primary);background:var(--surface)}
.chat-send{flex:none;width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;
  background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.chat-send:hover{background:var(--primary-600)}
.chat-send .ic,.chat-send svg{width:18px;height:18px}

@media (max-width:520px){
  #empChat{right:14px;bottom:14px}
  .chat-panel{width:calc(100vw - 28px);height:calc(100vh - 80px)}
}
@media print{ #empChat{display:none!important} }
@media print{ .tl-edit-btn,.tl-del,.tl-del-btn{display:none!important} }
/* Keep the Employee Report status cards on a single row when printing */
@media print{
  .count-bar{flex-wrap:nowrap!important;gap:6px!important}
  .count-chip{flex:1 1 0!important;min-width:0;padding:6px 8px!important;gap:5px!important}
  .count-chip .cc-ic{width:22px;height:22px}
  .count-chip .cc-n{font-size:1rem}
  .count-chip .cc-l{font-size:.6rem;white-space:normal}
}

/* ===== Video tutorial (Knowledge Base) ===== */
.video-card{background:linear-gradient(135deg,var(--primary-soft),var(--surface) 60%);border:1px solid var(--border)}
.video-card h2 .ic{color:var(--primary)}
.video-wrap{position:relative;width:100%;max-width:860px;margin:0 auto;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;background:#0f172a;box-shadow:var(--shadow);border:1px solid var(--border)}
.video-wrap video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#0f172a}
.video-wrap video::cue{background:rgba(15,23,42,.78);color:#fff;font-size:.62em;line-height:1.3}
/* language / subtitle switcher */
.lang-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;max-width:860px;margin:0 auto 12px}
.lang-switch{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lang-switch-label{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--muted)}
.lang-switch-label .ic{width:16px;height:16px;color:var(--primary)}
.lang-btn{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1;gap:1px;
  padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);
  color:var(--text);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .15s}
.lang-btn small{font-weight:500;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.lang-btn .lg-ab{display:none}   /* abbreviation (TL/CEB/WAR/EN) — shown on mobile only */
.lang-btn:hover{border-color:var(--primary);color:var(--primary)}
.lang-btn.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.lang-btn.is-active small{opacity:.85}
.lang-switch.is-na{opacity:.4;pointer-events:none}
/* MOBILE: shrink the video-tour card (title, description, language pills) so the
   whole block fits comfortably on a phone. */
@media (max-width:640px){
  .video-card h2{font-size:1.15rem;gap:6px}
  .video-card h2 .ic{width:20px;height:20px}
  .video-card > p.muted{font-size:.82rem;line-height:1.4}
  .video-card .lang-bar{gap:8px 14px}
  .video-card .lang-switch{gap:6px}
  .video-card .lang-switch-label{font-size:.78rem}
  .video-card .lang-btn{padding:5px 11px;font-size:.78rem}
  .video-card .lang-note{font-size:.76rem!important}
  /* Subtitles: show short codes (TL/CEB/WAR/EN) and keep the whole row on one line. */
  .video-card .lang-btn .lg-full{display:none}
  .video-card .lang-btn .lg-ab{display:inline}
  .video-card .lang-switch[data-group="cc"]{flex-wrap:nowrap}
  /* Audio: short codes (EN/TL/CEB/WAR) like the Subtitles row, kept on one line. */
  .video-card .lang-switch[data-group="audio"]{flex-wrap:nowrap}
  .video-card .lang-switch[data-group="audio"] .lang-switch-label{flex:0 0 auto}
  /* Hide the breadcrumb on phones. */
  .breadcrumb{display:none}
}
/* MOBILE: normalise every font size across the Knowledge Base page to the same
   scale as the "Watch: … video tour" card, so the whole document reads consistently
   (headings step down cleanly, body copy is one size). Page title (.page-head h1)
   is left to its own rule. */
@media (max-width:640px){
  .guide-doc h2{font-size:1.15rem;line-height:1.25}
  .guide-doc h3{font-size:1.02rem}
  .guide-doc h4{font-size:.92rem}
  .guide-doc p,.guide-doc li,.guide-doc td,.guide-doc dd{font-size:.82rem;line-height:1.5}
  .guide-doc small{font-size:.78rem}
  /* Pull any inline-sized helper text down to the body scale too. */
  .guide-doc .muted[style*="font-size"],.guide-doc b[style*="font-size"]{font-size:.82rem!important}
}
/* MOBILE: bring the remaining div-based card texts (which the rule above can't
   reach because they aren't p/li/td/dd) down to the same "2 · Scope" body scale.
   Covers 11 · Rating Scale (.rate), 12 · Reports (.rep) and the Details modals
   (.st-sec) used by Priority/Status/Bulk-action tables. Desktop unaffected. */
@media (max-width:640px){
  .guide-doc .rate .score{font-size:1.25rem}
  .guide-doc .rate .name{font-size:.82rem}
  .guide-doc .rep{font-size:.82rem}
  .guide-doc .rep small{font-size:.76rem}
  .guide-doc .st-sec h4{font-size:.88rem}
  .guide-doc .st-sec>div{font-size:.82rem}
}
@media print{ .video-card{display:none!important} }

/* ===== Rich-text editor (RTE) ===== */
.rte{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.rte:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.rte-tb{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;padding:5px 6px;background:var(--surface-2);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
/* Hide the toolbar's horizontal scrollbar — it's swipeable, so the gray track
   just looked like a stray line under the buttons on first open. */
.rte-tb::-webkit-scrollbar{width:0;height:0;display:none}
.rte-b{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;min-width:28px;height:30px;padding:0 5px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-2);font-size:.9rem;line-height:1;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.rte-b:hover{background:var(--surface);border-color:var(--border);color:var(--text)}
.rte-b:active{background:var(--primary-soft);color:var(--primary-700)}
.rte-b b,.rte-b i,.rte-b u{font-size:.95rem;line-height:1;pointer-events:none}
.rte-sep{flex:0 0 auto;width:1px;height:20px;align-self:center;margin:0 2px;background:var(--border)}
.rte-sel{flex:0 1 auto;min-width:0;height:30px;box-sizing:border-box;vertical-align:middle;border:1px solid var(--border);border-radius:8px;background-color:var(--surface);color:var(--text-2);font-size:.78rem;line-height:28px;margin:0;padding:0 20px 0 8px;background-position:right 5px center;background-size:13px;cursor:pointer;max-width:108px}
.rte-sel.rte-sz{max-width:82px}
.rte-color{flex:0 0 auto;position:relative;display:inline-flex;align-items:center}
.rte-color-btn{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;min-width:28px;height:30px;padding:0 5px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-2);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.rte-color-btn:hover{background:var(--surface);border-color:var(--border);color:var(--text)}
.rte-color-btn span{position:relative;display:inline-flex;align-items:center;font-weight:700;font-size:.95rem;line-height:1;pointer-events:none}
.rte-color-btn span:after{content:"";position:absolute;left:-1px;right:-1px;bottom:-4px;height:3px;background:currentColor;border-radius:1px}
.rte-color-pop{position:fixed;z-index:1000;width:148px;box-sizing:border-box;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:9px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 22px rgba(15,23,42,.16)}
.rte-color-pop[hidden]{display:none}
.rte-sw{width:20px;height:20px;border:1px solid rgba(0,0,0,.16);border-radius:5px;cursor:pointer;padding:0;transition:transform .1s,box-shadow .1s}
.rte-sw:hover{transform:scale(1.14);box-shadow:0 0 0 2px var(--primary-soft)}
.rte-emoji{flex:0 0 auto;position:relative;display:inline-flex;align-items:center}
.rte-emoji-btn{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;min-width:28px;height:30px;padding:0 5px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-2);cursor:pointer;font-size:1.05rem;line-height:1;transition:background .12s,border-color .12s}
.rte-emoji-btn:hover{background:var(--surface);border-color:var(--border)}
.rte-emoji-pop{position:fixed;z-index:1000;width:268px;box-sizing:border-box;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:9px;max-height:208px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 22px rgba(15,23,42,.16)}
.rte-emoji-pop[hidden]{display:none}
.rte-em{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;cursor:pointer;font-size:1.15rem;line-height:1;padding:0;transition:transform .1s,background .1s}
.rte-em:hover{background:var(--primary-soft);transform:scale(1.18)}
.rte-area{position:relative;min-height:96px;max-height:460px;overflow-y:auto;padding:12px 14px;font-size:.92rem;line-height:1.55;color:var(--text);outline:none;word-break:break-word}
.rte-area:empty:before,.rte.rte-empty .rte-area:before{content:attr(data-placeholder);color:var(--muted-2);pointer-events:none}
.rte.rte-empty .rte-area:before{position:absolute}
.rte-area p{margin:0 0 8px}
.rte-area ul,.rte-area ol{margin:6px 0 8px;padding-left:24px}
.rte-area a{color:var(--primary-700)}
.rte-area:focus{outline:none}

/* Rendered rich content (read-only display of stored notes/descriptions) */
.rte-content{font-size:.92rem;line-height:1.55;word-break:break-word}
.rte-content p{margin:0 0 8px}
.rte-content p:last-child{margin-bottom:0}
.rte-content ul,.rte-content ol{margin:6px 0 8px;padding-left:24px}
.rte-content a{color:var(--primary-700)}
/* Dark theme: user-picked near-black text colours (foreColor writes an inline
   <font color> / style) become unreadable on the dark card. Lift only the darkest
   values to a readable tone — vivid hues + white already read fine on dark. */
html[data-theme="dark"] .rte-content font[color="#111827" i],
html[data-theme="dark"] .rte-content font[color="#1f2937" i],
html[data-theme="dark"] .rte-content font[color="#374151" i],
html[data-theme="dark"] .rte-content font[color="#0f172a" i],
html[data-theme="dark"] .rte-content font[color="#000000" i],
html[data-theme="dark"] .rte-content font[color="#000" i],
html[data-theme="dark"] .rte-content font[color="black" i],
html[data-theme="dark"] .rte-content [style*="color:#111827"],html[data-theme="dark"] .rte-content [style*="color: #111827"],
html[data-theme="dark"] .rte-content [style*="color:#1f2937"],html[data-theme="dark"] .rte-content [style*="color: #1f2937"],
html[data-theme="dark"] .rte-content [style*="color:#374151"],html[data-theme="dark"] .rte-content [style*="color: #374151"],
html[data-theme="dark"] .rte-content [style*="color:#0f172a"],html[data-theme="dark"] .rte-content [style*="color: #0f172a"],
html[data-theme="dark"] .rte-content [style*="color:#000000"],html[data-theme="dark"] .rte-content [style*="color: #000000"],
html[data-theme="dark"] .rte-content [style*="color:#000;"],html[data-theme="dark"] .rte-content [style*="color: #000;"],
html[data-theme="dark"] .rte-content [style*="rgb(0, 0, 0)"],html[data-theme="dark"] .rte-content [style*="rgb(0,0,0)"],
html[data-theme="dark"] .rte-content [style*="rgb(17, 24, 39)"],html[data-theme="dark"] .rte-content [style*="rgb(31, 41, 55)"],
html[data-theme="dark"] .rte-content [style*="rgb(55, 65, 81)"]{color:var(--text)!important}

@media (max-width:520px){ .rte-sel{max-width:92px} .rte-sel.rte-sz{max-width:74px} }

/* MOBILE: tighter vertical spacing between the New Ticket form fields so they don't
   sit so far apart (labels/rows compressed a little). */
@media (max-width:640px){
  .nt-form label{margin-top:10px;margin-bottom:5px}
  .nt-form .form-row{gap:10px}
  .nt-form small.muted{display:block;margin-top:3px}
  /* Swap Category & Priority order on phones — Priority shows first. */
  .nt-catpri > div:first-child{order:2}   /* Category → second */
  .nt-catpri > div:last-child{order:1}    /* Priority → first */
  /* Category sits under Priority now; drop its label's extra top margin so it isn't
     doubled up with the row gap (tightens the space above Category). */
  .nt-catpri > div:first-child > label{margin-top:0}
  /* Undo the desktop-only negative top margin on the Ticket Issue label — after the
     swap, Category sits directly above it, so -6px made them overlap. */
  .nt-ti{margin-top:10px!important}
}

/* MOBILE ONLY: the RTE toolbar's custom (cbox) dropdowns are too narrow on a phone
   to show their selected value, so they read blank. Show a fixed 2-letter code
   (FO/TS/AL) on the button instead — the full options still appear on open. */
@media (max-width:640px){
  .rte-tb .cbox--auto{min-width:0;width:auto!important;max-width:none!important;flex:0 0 auto}
  .rte-tb .cbox .cbox-btn{padding:0 5px;gap:2px;min-height:30px}
  .rte-tb .cbox .cbox-val{display:none}
  .rte-tb .cbox .cbox-chev{width:12px;height:12px;margin:0;flex:0 0 auto}
  .rte-tb .cbox .cbox-btn::before{font-weight:700;font-size:.72rem;letter-spacing:.02em;color:var(--text-2)}
  .rte-tb .cbox:has(select[data-cmd="fontName"]) .cbox-btn::before{content:"FO"}
  .rte-tb .cbox:has(select[data-cmd="fontSize"]) .cbox-btn::before{content:"TS"}
  .rte-tb .cbox:has(select[data-reset]) .cbox-btn::before{content:"AL"}
}

/* ============================================================
   Global custom dropdown (cbox) — upgrades native <select>s app-wide.
   Always opens DOWNWARD, searchable when long, optgroup-aware.
   The native <select> stays in the DOM (hidden) as source of truth.
   Opt out with data-no-cbox on the <select> or an ancestor.
   ============================================================ */
.cbox{position:relative}
.cbox-btn{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:9px 12px;text-align:left;
  background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:8px;cursor:pointer;font:inherit;line-height:1.3}
.cbox-btn .cbox-val{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbox-btn .cbox-val.is-ph{color:var(--muted)}
.cbox-btn .cbox-chev{flex:0 0 auto;stroke:var(--muted);transition:transform .15s}
.cbox.open .cbox-btn{border-color:var(--primary)}
.cbox.open .cbox-btn .cbox-chev{transform:rotate(180deg)}
.cbox-btn.pur-invalid,.cbox-btn.is-invalid{border-color:#ef4444}
.cbox-pop{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1200;background:var(--card);
  border:1px solid var(--border-strong);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:8px;
  display:flex;flex-direction:column;gap:6px;min-width:100%}
.cbox-pop[hidden]{display:none}
.cbox-srch{position:relative;flex:0 0 auto}
.cbox-srch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);stroke:var(--muted);pointer-events:none}
.cbox-srch input{width:100%;margin:0;padding:7px 10px 7px 32px;background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);border-radius:7px;font:inherit}
.cbox-list{max-height:260px;overflow-y:auto;display:block}
.cbox-optg{padding:8px 10px 3px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cbox-opt{display:block;flex:0 0 auto;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:.9rem;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbox-opt:hover,.cbox-opt.is-active{background:var(--primary-soft);color:var(--text)}
.cbox-opt.is-sel{background:var(--primary);color:#fff;font-weight:600}
.cbox-opt.is-sel:hover,.cbox-opt.is-sel.is-active{background:var(--primary-600);color:#fff}
.cbox-opt[hidden]{display:none}
.cbox-empty{padding:10px;text-align:center;color:var(--muted);font-size:.85rem}
.cbox-btn:disabled,.cbox-btn.is-disabled{opacity:.55;cursor:not-allowed}
select.cbox-native{display:none!important}
/* Auto-upgraded wrapper: mimic the original select's footprint, never overflow. */
.cbox--auto{display:inline-block;vertical-align:middle;max-width:100%}
.cbox--auto.cbox--fluid{display:block;width:100%}
/* A <select> upgraded to a cbox inside a form-row (2-column field grid) must fill
   its cell like the input beside it. The auto width-detection can't measure a
   select inside a closed <dialog>, so it may render narrow — force full width. */
.form-row .cbox--auto{display:block!important;width:100%!important;max-width:none!important}
/* Make the dropdown button match the native inputs beside it (same font/padding/
   radius/height) so it lines up cleanly and doesn't look like it bulges out. */
.form-row .cbox-btn{padding:11px 13px;border-radius:10px;font-size:.94rem}
/* Same for a <select>→cbox inside a config table cell (e.g. Edit Roles) — fill the
   cell so every dropdown lines up at the same width instead of hugging its text. */
.cfg-table td .cbox--auto{display:block!important;width:100%!important;max-width:none!important}
/* Recent Tickets — keep the Subject column to a single ellipsised line on desktop
   so a long subject doesn't wrap and stretch the row height. Full text on hover
   (title attr). Mobile card view keeps the full subject, so scope to desktop. */
@media (min-width:641px){
  .recent-card td.c-subj{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}