/*! ═══════════════════════════════════════════════
   TRACS — CS Operations Dashboard
   Design System v3.0 · Light Mode · TV/Large Monitor
   Initial Architecture & UX Direction by Vickry
═══════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  /* ── Light Mode Backgrounds ── */
  --bg:      #eef1f5;
  --bg2:     #e5e9ef;
  --s1:      #ffffff;
  --s2:      #f7f8fa;
  --s3:      #eef0f3;
  --s4:      #e4e7eb;
  --s5:      #d9dde3;

  /* ── Borders ── */
  --bd1: #dde2e9;
  --bd2: #cfd5df;
  --bd3: #b8c0cc;
  --bd4: #9fa9b7;
  --border-color: var(--bd1);

  /* ── Text ── */
  --tx1: #242a33;
  --tx2: #535d6b;
  --tx3: #7f8896;
  --tx4: #aeb5bf;

  /* ── Brand — adjusted for light bg readability ── */
  --blue:      #2563eb;
  --blue-dk:   #1d4ed8;
  --blue-lt:   rgba(37,99,235,.07);
  --blue-bd:   rgba(37,99,235,.18);
  --blue-glow: rgba(37,99,235,.10);

  --tracs-calendar-accent: var(--blue);
  --tracs-calendar-accent-soft: var(--blue-lt);
  --tracs-calendar-accent-border: var(--blue-bd);
  --tracs-calendar-accent-hover: color-mix(in srgb, var(--blue-lt) 70%, var(--s4));

  --red:    #dc2626;
  --red-lt: rgba(220,38,38,.07);
  --red-bd: rgba(220,38,38,.18);

  --amber:    #d97706;
  --amber-lt: rgba(217,119,6,.07);
  --amber-bd: rgba(217,119,6,.18);

  --orange:    #ea580c;
  --orange-lt: rgba(234,88,12,.07);
  --orange-bd: rgba(234,88,12,.18);

  --green:    #16a34a;
  --green-lt: rgba(22,163,74,.07);
  --green-bd: rgba(22,163,74,.18);

  --purple:    #7c3aed;
  --purple-lt: rgba(124,58,237,.07);
  --purple-bd: rgba(124,58,237,.18);

  --cyan:    #0891b2;
  --cyan-lt: rgba(8,145,178,.07);
  --cyan-bd: rgba(8,145,178,.18);

  --logo-color: var(--blue);

  /* ── Typography ── */
  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --item-title-size: 12px;
  --item-title-weight: 600;
  --item-title-color: var(--tx1);
  --item-title-line: 1.35;
  --item-title-tracking: 0;

  /* ── Motion ── */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur:  120ms;

  /* ── Radii ── */
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --r:  var(--radius);
  --r2: 7px;
  --r3: var(--radius-lg);
  --r4: 10px;

  /* ── Spacing scale + semantic layout rhythm ── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Backward-compatible aliases used by older modules. */
  --sp-1: var(--space-1);
  --sp-2: var(--space-2);
  --sp-3: var(--space-3);
  --sp-4: var(--space-4);
  --sp-5: var(--space-5);
  --sp-6: var(--space-6);
  --sp-8: var(--space-8);

  --page-padding-inline: var(--space-4);
  --page-padding-block: var(--space-4);
  --page-section-gap: var(--space-5);
  --card-gap: var(--space-4);
  --card-padding: var(--space-4);
  --card-header-padding-y: 10px;
  --card-header-padding-x: var(--space-4);
  --card-body-padding: var(--space-4);
  --content-gap: var(--space-3);
  --toolbar-gap: var(--space-2);
  --toolbar-padding: var(--space-3);
  --form-group-gap: var(--space-2);
  --form-row-gap: var(--space-3);
  --table-cell-padding-y: 10px;
  --table-cell-padding-x: var(--space-3);
  --table-head-padding-y: 9px;
  --table-row-height: 44px;
  --modal-padding: var(--space-4);
  --modal-section-gap: var(--space-3);
  --empty-state-padding-y: var(--space-6);
  --empty-state-padding-x: var(--space-4);
  --control-height: 36px;

  /* ── Dashboard Scale ── */
  --panel-padding: var(--card-body-padding);
  --dashboard-widget-gap: var(--card-gap);
  --dashboard-column-gap: var(--card-gap);
  --dashboard-row-gap: var(--dashboard-widget-gap);
  --dashboard-widget-padding: 20px;
  --dashboard-widget-padding-compact: 18px;
  --dashboard-widget-padding-sm: 16px;
  --dashboard-inner-gap: var(--space-4);
  --dashboard-section-gap: var(--space-5);
  --dashboard-carousel-safe-area: 44px;
  --gap: var(--card-gap);
  --font-size: 13.5px;
  --shadow: 0 8px 24px rgba(17, 24, 39, .055), 0 1px 2px rgba(17, 24, 39, .035);
  --shadow-lg: 0 18px 44px rgba(17, 24, 39, .12), 0 3px 10px rgba(17, 24, 39, .08);

  /* ── Toolbar Controls ── */
  --toolbar-h: var(--control-height);
  --toolbar-px: 12px;
  --toolbar-fz: 12px;

  /* ── Scrollbars ── */
  --scrollbar-size: 7px;
  --scrollbar-size-horizontal: 9px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: color-mix(in srgb, var(--tx4) 58%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--tx3) 72%, transparent);
}

/* ── Dark Mode Token Overrides ── */
[data-theme="dark"] {
  --bg:      #0d1117;
  --bg2:     #111821;
  --s1:      #151a22;
  --s2:      #18202a;
  --s3:      #1d2632;
  --s4:      #253040;
  --s5:      #2d3a4b;

  --bd1: #253041;
  --bd2: #303b4d;
  --bd3: #3d4a5f;
  --bd4: #4c5a70;
  --border-color: var(--bd1);

  --tx1: #edf2f8;
  --tx2: #b3bdca;
  --tx3: #7d8899;
  --tx4: #5d6879;
  --shadow: 0 14px 34px rgba(0,0,0,.30);
  --shadow-lg: 0 24px 62px rgba(0,0,0,.52);

  --blue:      #3b82f6;
  --blue-dk:   #2563eb;
  --blue-lt:   rgba(59,130,246,.08);
  --blue-bd:   rgba(59,130,246,.2);
  --blue-glow: rgba(59,130,246,.15);

  --red:    #ef4444;
  --red-lt: rgba(239,68,68,.08);
  --red-bd: rgba(239,68,68,.2);

  --amber:    #f59e0b;
  --amber-lt: rgba(245,158,11,.08);
  --amber-bd: rgba(245,158,11,.2);

  --orange:    #fb923c;
  --orange-lt: rgba(251,146,60,.08);
  --orange-bd: rgba(251,146,60,.2);

  --green:    #22c55e;
  --green-lt: rgba(34,197,94,.08);
  --green-bd: rgba(34,197,94,.2);

  --purple:    #a855f7;
  --purple-lt: rgba(168,85,247,.08);
  --purple-bd: rgba(168,85,247,.2);

  --cyan:    #06b6d4;
  --cyan-lt: rgba(6,182,212,.08);
  --cyan-bd: rgba(6,182,212,.2);

  --amber-bd: rgba(245,158,11,.45);
  --red-bd: rgba(239,68,68,.45);
  --green-bd: rgba(34,197,94,.45);
  --blue-bd: rgba(59,130,246,.45);
  --purple-bd: rgba(168,85,247,.45);
  --cyan-bd: rgba(6,182,212,.45);

  --logo-color: var(--tx1);

}

/* Dark mode: keep toast surfaces filled and readable. */
[data-theme="dark"] .toast {
  --toast-surface: color-mix(in srgb, var(--s2) 94%, var(--toast-accent) 6%);
  --toast-border-color: color-mix(in srgb, var(--bd3) 88%, var(--toast-accent) 12%);
  --toast-title-color: #f8fafc;
  --toast-message-color: #cbd5e1;
  background: var(--toast-surface);
  border-color: var(--toast-border-color);
  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.035) inset;
}

/* Dark mode: restore modal overlay */
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.85) }

/* Dark mode: restore modal shadow */
[data-theme="dark"] .modal {
  border-color: var(--bd3);
  box-shadow: 0 32px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03) inset;
}

/* Dark mode: restore modal head */
[data-theme="dark"] .modal-head { background: var(--s1) }

/* Dark mode: balanced depth for monitor readability */
[data-theme="dark"] .panel { box-shadow: var(--shadow) }
[data-theme="dark"] .stat-card { box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.025) inset }
[data-theme="dark"] .stat-card:hover { box-shadow: 0 14px 32px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.035) inset; transform: translateY(-1px) }

[data-theme="dark"] .ops-warning {
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.55);
  color: #fbbf24; /* bright amber — readable on dark bg */
}

[data-theme="dark"] .ops-critical {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.55);
  color: #f87171; /* bright coral-red — readable on dark bg */
}

[data-theme="dark"] .ops-solved {
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.55);
  color: #4ade80; /* bright emerald — readable on dark bg */
}

[data-theme="dark"] .ops-info {
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.55);
  color: #60a5fa; /* bright sky blue — readable on dark bg */
}

/* Dark mode badge: lighter translucent tint so it doesn't muddy the status color */
[data-theme="dark"] .ops-badge {
  background: rgba(255,255,255,.07);
  border-color: currentColor;
  opacity: .9;
}

/* Dark mode: restore login card */
[data-theme="dark"] .login-card {
  border-color: var(--bd3);
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
}

/* Dark mode: form inputs use bg2 */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .search-input,
[data-theme="dark"] .compact-select {
  background: var(--s3);
  border-color: var(--bd2);
}
[data-theme="dark"] .form-input:hover,
[data-theme="dark"] .form-select:hover,
[data-theme="dark"] .form-textarea:hover,
[data-theme="dark"] .search-input:hover,
[data-theme="dark"] .compact-select:hover {
  background: var(--s4);
  border-color: var(--bd3);
}
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .filter-tab:hover,
[data-theme="dark"] .nav-item:hover {
  background: var(--s4);
  border-color: var(--bd3);
  color: var(--tx1);
}

/* ── Theme icon cross-fade (shared: sidebar profile menu + TV Mode) ── */
.ic-sun  { opacity: 1; transform: none }
.ic-moon { opacity: 0; transform: rotate(30deg) scale(.8) }
[data-theme="dark"] .ic-sun  { opacity: 0; transform: rotate(-30deg) scale(.8) }
[data-theme="dark"] .ic-moon { opacity: 1; transform: none }

/* ── Theme option rows (used inside the sidebar profile dropdown) ── */
.theme-option {
  width: 100%;
  min-height: 32px;
  display: grid;
  grid-template-columns: 16px 1fr 16px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--tx2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  transition: all var(--dur) var(--ease);
}
.theme-option:hover,
.theme-option:focus-visible {
  background: var(--s3);
  border-color: var(--bd2);
  color: var(--tx1);
  outline: none;
}
.theme-option svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}
.theme-option-check {
  color: var(--blue);
  opacity: 0;
}
.theme-option.is-active {
  background: var(--blue-lt);
  border-color: var(--blue-bd);
  color: var(--blue);
}
.theme-option.is-active .theme-option-check { opacity: 1 }
[data-theme="dark"] .theme-option:hover,
[data-theme="dark"] .theme-option:focus-visible {
  background: var(--s4);
  border-color: var(--bd3);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100%; overflow: hidden }
body {
  background: var(--bg);
  color: var(--tx1);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none }
button { font-family: inherit; cursor: pointer; border: none; background: none }
input, select, textarea { font-family: inherit }
::selection { background: rgba(59,130,246,.22); color: var(--tx1) }
::-webkit-scrollbar { width: 3px; height: 3px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--bd3); border-radius: 2px }

/* ══════════════════════════════════════
   SHELL / LAYOUT
══════════════════════════════════════ */

.shell      { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 100svh }
.body-row   { display: flex; flex: 1; overflow: hidden; position: relative }
.main       { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--bg) }
.main-inner { padding: 14px 16px; display: flex; flex-direction: column; gap: var(--page-section-gap) }

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */

.sidebar {
  --sb-w: 64px;
  --sb-w-open: 244px;
  --sb-dur: 130ms;
  /* Shared row geometry — keeps every item, submenu row, group label,
     avatar and theme toggle on one consistent rhythm. The icon glyph
     lands dead-centre of the 64px collapsed rail:
     gutter(8) + pad(16) + icon(16)/2 = 32 = 64/2. */
  --sb-gutter: 8px;
  --sb-pad: 16px;
  --sb-icon: 16px;
  --sb-gap: 10px;
  --sb-row-h: 36px;
  --sb-radius: var(--r3);
  width: var(--sb-w);
  flex-shrink: 0;
  position: relative;
}
.sidebar-flyout {
  position: absolute;
  inset: 0;
  width: var(--sb-w);
  background: var(--s1);
  border-right: 1px solid var(--bd1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  /* Above .ticker-bar's z-index:100 always, so the sidebar never renders
     underneath the ticker even at the shared edge/seam. */
  z-index: 150;
  transition: width var(--sb-dur) var(--ease), box-shadow var(--sb-dur) var(--ease);
}
/* .user-menu is position:fixed so it should escape this box's clip in
   theory, but backdrop-filter below makes .sidebar-flyout a containing
   block for fixed descendants too, so overflow:hidden clips it anyway --
   without this, opening the profile menu renders nothing. */
.sidebar-flyout:has(.user-menu-wrap[open]) {
  overflow: visible;
}
/* Subtle glass effect -- only where backdrop-filter is actually supported,
   so browsers without it keep the solid var(--s1) fallback above instead
   of a too-sheer, unblurred tint. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sidebar-flyout {
    background: color-mix(in srgb, var(--s1) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}
/* :not(:has(.user-menu-wrap[open])) on every expand trigger below: opening
   the profile menu should always collapse the rail back down first (see
   .user-menu-wrap[open] ~ .sidebar-nav etc.), even if the pointer is still
   hovering or the summary still has focus -- otherwise the full nav and
   the compact account menu would both be open/visible at once. */
.sidebar:focus-within:not(:has(.user-menu-wrap[open])) .sidebar-flyout {
  width: var(--sb-w-open);
  z-index: 500;
  box-shadow: 10px 0 32px rgba(15,23,42,.14), 1px 0 0 var(--bd1);
}
[data-theme="dark"] .sidebar:focus-within:not(:has(.user-menu-wrap[open])) .sidebar-flyout {
  box-shadow: 10px 0 32px rgba(0,0,0,.4), 1px 0 0 var(--bd1);
}
@media (hover: hover) and (pointer: fine) {
  .sidebar:hover:not(:has(.user-menu-wrap[open])) .sidebar-flyout {
    width: var(--sb-w-open);
    z-index: 500;
    box-shadow: 10px 0 32px rgba(15,23,42,.14), 1px 0 0 var(--bd1);
  }
  [data-theme="dark"] .sidebar:hover:not(:has(.user-menu-wrap[open])) .sidebar-flyout {
    box-shadow: 10px 0 32px rgba(0,0,0,.4), 1px 0 0 var(--bd1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-flyout,
  .nav-label,
  .nav-group-label span,
  .nav-pin,
  .nav-submenu,
  .nav-submenu-track,
  .nav-chevron,
  .user-menu { transition-duration: 1ms !important }
}
.sidebar-logo {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--bd1);
  flex-shrink: 0;
}
.logo-mark {
  width: 26px; height: 26px;
  background: var(--blue);
  border-radius: var(--r2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.logo-mark::before {
  content: '';
  position: absolute;
  top: -6px; left: -6px;
  width: 14px; height: 14px;
  background: rgba(255,255,255,.14);
  border-radius: 50%;
}
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Top padding tuned so the Dashboard icon's centre lines up with the
     TRACS wordmark in .page-logo-title on the dashboard page. */
  padding: 10px 0 6px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none }

/* ── Groups ──
   Collapsed: a short centred hairline separates groups.
   Expanded: the hairline fades out and an uppercase label fades in,
   left-aligned with the icon column. */
.nav-group { display: flex; flex-direction: column; align-items: stretch }
/* Minimal separator: a plain hairline between groups, no caps label. Group
   names live in aria-label on the .nav-group itself for screen readers. */
.nav-group-label {
  /* Half the row height (--sb-row-h:36px) -- proportional breathing room
     around the divider instead of a cramped 9px gap. */
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--sb-gutter) + var(--sb-pad));
}
.nav-group-label::before {
  content: '';
  width: 100%;
  height: 1px;
  background: var(--bd1);
}
/* The first *visible* group carries no leading hairline. Favorites is always
   in the DOM (just [hidden]), so the group after a hidden favorites is the
   effective top when no pins exist. */
.nav-group:first-child .nav-group-label,
.nav-favorites[hidden] + .nav-group .nav-group-label { display: none }
.nav-favorites[hidden] { display: none }
.nav-favorites-list { display: flex; flex-direction: column; align-items: stretch }

/* ── Nav items — inset rounded pills on a shared rhythm ── */
.nav-item-wrap { position: relative; width: 100%; flex-shrink: 0 }
.nav-item {
  width: auto;
  height: var(--sb-row-h);
  margin: 1px var(--sb-gutter);
  display: flex;
  align-items: center;
  gap: var(--sb-gap);
  padding: 0 10px 0 var(--sb-pad);
  color: var(--tx3);
  border: 1px solid transparent;
  border-radius: var(--sb-radius);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative;
}
.nav-item-button { text-align: left }
.nav-item:hover  { background: var(--s3); color: var(--tx2); border-color: var(--bd2) }
.nav-item.active { background: var(--blue-lt); color: var(--blue); border-color: var(--blue-bd) }
.nav-item svg { width: var(--sb-icon); height: var(--sb-icon); stroke-width: 1.8 }
.nav-icon {
  position: relative;
  width: var(--sb-icon); height: var(--sb-icon);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Decorative only -- doesn't affect layout/centering of anything above.
   .nav-item's active/hover background fills the row's own (auto) width,
   which is correct when expanded but reads as a stretched rectangle
   against the fixed row height once collapsed, since the row no longer
   spans the full nav width. Sized/centered independently of the row so
   it's always a true 36x36 square regardless of the row's width. */
.nav-icon::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: var(--sb-row-h); height: var(--sb-row-h);
  transform: translate(-50%, -50%);
  border-radius: var(--sb-radius);
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  z-index: -1;
}
/* Collapsed rail (including while forced-collapsed by the account menu
   being open, see .sidebar:has(.user-menu-wrap[open]) elsewhere): move
   the active/hover highlight off the row and onto the icon-centered
   square above, so it keeps a 1:1 ratio with equal padding on every side
   instead of matching the row's full (non-square) width. The icon
   itself is already exactly centered in the 64px rail by construction
   (gutter + pad + icon/2 == half the rail width, see .sidebar above), so
   this square is centered on it for free. Not applied on mobile, which
   already handles its own icon-only layout independently. */
@media (min-width: 641px) {
  .sidebar:is(:has(.user-menu-wrap[open]), :not(:hover):not(:focus-within)) .nav-item.active,
  .sidebar:is(:has(.user-menu-wrap[open]), :not(:hover):not(:focus-within)) .nav-item:hover {
    background: transparent;
    border-color: transparent;
  }
  .sidebar:is(:has(.user-menu-wrap[open]), :not(:hover):not(:focus-within)) .nav-item.active .nav-icon::before {
    background: var(--blue-lt);
    border-color: var(--blue-bd);
  }
  .sidebar:is(:has(.user-menu-wrap[open]), :not(:hover):not(:focus-within)) .nav-item:hover .nav-icon::before {
    background: var(--s3);
    border-color: var(--bd2);
  }
}
.nav-label {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--sb-dur) var(--ease);
}
.sidebar:hover:not(:has(.user-menu-wrap[open])) .nav-label,
.sidebar:focus-within:not(:has(.user-menu-wrap[open])) .nav-label { opacity: 1 }
.nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  width: 13px; height: 13px;
  opacity: 0;
  transition: opacity var(--sb-dur) var(--ease), transform var(--sb-dur) var(--ease);
}
.sidebar:hover:not(:has(.user-menu-wrap[open])) .nav-chevron,
.sidebar:focus-within:not(:has(.user-menu-wrap[open])) .nav-chevron { opacity: .55 }
.nav-menu-wrap[open] > summary .nav-chevron { transform: rotate(90deg) }

/* Badge sits neatly on the icon corner in both states. */
.nav-badge {
  position: absolute;
  top: -4px; right: -6px;
  min-width: 14px; height: 14px;
  border-radius: 7px;
  background: var(--red);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--s1);
}

/* ── Pin / favorite toggle ── */
.nav-pin {
  display: none;
  position: absolute;
  right: calc(var(--sb-gutter) + 4px); top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  color: var(--tx4);
  opacity: 0;
  transition: opacity .12s var(--ease), color .12s var(--ease), background .12s var(--ease);
  z-index: 1;
}
.sidebar:hover:not(:has(.user-menu-wrap[open])) .nav-pin,
.sidebar:focus-within:not(:has(.user-menu-wrap[open])) .nav-pin { display: flex }
.nav-item-wrap:hover .nav-pin,
.nav-pin:focus-visible,
.nav-pin.is-pinned { opacity: 1 }
.nav-pin:hover { background: var(--s4); color: var(--tx2) }
.nav-pin svg { width: 12px; height: 12px; stroke-width: 1.8 }
.nav-pin.is-pinned { color: var(--amber) }
.nav-pin.is-pinned svg { fill: currentColor }
.nav-favorites-list .nav-pin.is-pinned { opacity: 1 }

/* ── Submenu (inline accordion) — children indent under the parent label ── */
.nav-menu-wrap { width: 100% }
.nav-menu-wrap > summary {
  list-style: none;
  cursor: pointer;
}
.nav-menu-wrap > summary::-webkit-details-marker { display: none }
/* grid-template-rows 0fr->1fr grows to fit whatever the real content
   height is, unlike a max-height guess -- no mismatch between the
   transition's declared range and the visible motion, so it stays
   smooth for both a 2-item and a 6-item submenu instead of mostly
   "idling" then snapping. */
.nav-submenu-track {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sb-dur) var(--ease);
}
.nav-menu-wrap[open] > .nav-submenu-track {
  grid-template-rows: 1fr;
}
.nav-submenu {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  padding: 2px var(--sb-gutter) 4px calc(var(--sb-gutter) + var(--sb-pad) + var(--sb-icon));
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sb-dur) var(--ease), visibility 0s linear var(--sb-dur);
}
.nav-menu-wrap[open] .nav-submenu {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.nav-submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--tx2);
  text-decoration: none;
  font-size: 12.5px;
  white-space: nowrap;
}
.nav-submenu a:hover {
  background: var(--s3);
  border-color: var(--bd2);
}
.nav-submenu a.active {
  background: var(--blue-lt);
  border-color: var(--blue-bd);
  color: var(--blue);
}
.nav-submenu a svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Bottom: user + theme share the same row rhythm ── */
.sidebar-bottom {
  padding: 6px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  position: relative;
  flex-shrink: 0;
  border-top: 1px solid var(--bd1);
}
.user-menu-row {
  min-height: var(--sb-row-h);
  height: auto;
  margin: 1px var(--sb-gutter);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 9px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--sb-radius);
}
.user-menu-row:hover { background: var(--s3); border-color: var(--bd2) }
.user-avatar {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--um-avatar-bg, linear-gradient(135deg, var(--blue), var(--purple)));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border: 2px solid var(--bd2);
  overflow: hidden;
}
.tracs-avatar {
  position: relative;
  overflow: hidden;
}
.tracs-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.tracs-avatar > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.user-menu-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}
.user-menu-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-position {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--tx3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ══════════════════════════════════════
   TICKER BAR
══════════════════════════════════════ */

.ticker-bar {
  height: 26px;
  background: var(--s2);
  border-bottom: 1px solid var(--bd1);
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  z-index: 100;
  position: relative;
}
.ticker-track  { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; margin-left: 10px;
  /* Soften the right edge so scrolling items fade out instead of being cut
     flush against the boundary (which read as a broken/truncated glyph). */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
}
.ticker-scroll { display: inline-flex; min-width: max-content; white-space: nowrap; transform: translate3d(0,0,0); animation: tick 120s linear infinite; will-change: transform }
.ticker-scroll:hover { animation-play-state: paused }
@keyframes tick { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 20px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  transform: translateZ(0);
  white-space: nowrap;
}
.ticker-item::after { content: '·'; margin-left: 20px; color: var(--bd4); font-size: 14px }
.ticker-item.holiday {
  color: var(--green);
}
.ticker-item.holiday::before {
  display: none;
  animation: none;
  content: none;
}
.ticker-item.critical { color: var(--red); font-weight: 600 }
.ticker-item.urgent  { color: var(--amber) }
.ticker-item.info    { color: var(--cyan) }
.ticker-item.normal  { color: var(--tx3) }
[data-theme="light"] .ticker-item.normal { color: var(--tx2) }
.ticker-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-left: 1px solid var(--bd1);
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all var(--dur);
  flex-shrink: 0;
}
.ticker-btn:hover { color: var(--tx2); background: var(--s2) }
.ticker-btn svg  { width: 9px; height: 9px; stroke-width: 2 }

@keyframes holidaySoftPulse {
  0%, 100% {
    opacity: .18;
    transform: scale(.985);
  }
  50% {
    opacity: .38;
    transform: scale(1);
  }
}

/* ══════════════════════════════════════
   TOPBAR
══════════════════════════════════════ */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bd1);
  min-height: 36px;
}
.topbar-left { display: flex; flex-direction: column; flex-shrink: 0 }
.page-title  { font-size: 14px; font-weight: 600; letter-spacing: 0 }
.page-sub    { font-family: var(--mono); font-size: 10px; color: var(--tx3); margin-top: 1px; letter-spacing: .02em }
.topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0 }

.page-logo-title{
  display:flex;
  align-items:center;
  margin-bottom:4px;
  margin-top:8px;
}

.page-title-logo{
  height:14px;
  width:auto;
  display:block;
  /* Light mode: convert white SVG to dark */
  filter: brightness(0);
  transition: filter var(--dur) var(--ease);
}

[data-theme="dark"] .page-title-logo {
  filter: none;
}

/* ── OPS Marquee ── */
.ops-marquee {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ops-window {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: var(--r2);
  border: 1px solid var(--bd2);
  background: var(--s2);
}
.ops-track {
  display:flex;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.ops-item {
  min-width:100%;
  height:34px;

  display:flex;
  align-items:center;
  gap:8px;

  /* color is intentionally NOT set here — inherits from .ops-warning/critical/solved/info */

  padding:0 10px;

  border-radius:var(--r2);

  font-size:12px;
  font-weight:600;

  overflow:hidden;

  opacity: 0;
  transform:scale(.985);

  transition:
  opacity .22s ease,
  transform .22s ease;
}

/* .ops-item color is driven by .ops-warning/.ops-critical/.ops-solved/.ops-info in both themes */

/* .ops-badge inherits currentColor from its parent status class in dark mode */

.ops-item.active{
  opacity:1;
  transform:scale(1);
}
/* ── Light mode: darker/saturated status text for contrast on pale tint backgrounds ── */
.ops-warning {
  background: var(--amber-lt);
  border: 1px solid var(--amber-bd);
  color: #92400e; /* deep amber-brown — WCAG AA on amber-lt */
  font-weight: 600;
}

.ops-critical {
  background: var(--red-lt);
  border: 1px solid var(--red-bd);
  color: #991b1b; /* deep crimson — WCAG AA on red-lt */
  font-weight: 600;
}

.ops-solved {
  background: var(--green-lt);
  border: 1px solid var(--green-bd);
  color: #14532d; /* deep forest green — WCAG AA on green-lt */
  font-weight: 600;
}

.ops-info {
  background: var(--blue-lt);
  border: 1px solid var(--blue-bd);
  color: #1e3a8a; /* deep navy — WCAG AA on blue-lt */
  font-weight: 600;
}

.ops-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 5px;
  border-radius: var(--r);
  /* background tinted from same status color family */
  background: rgba(0,0,0,.06);
  border: 1px solid currentColor;
  font-family: var(--mono);
  /* inherits text color from parent .ops-* status class */
  color: inherit;
  opacity: .85;
}

.ops-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  /* inherits from parent .ops-* status class — must NOT override to tx1 */
  color: inherit;
}
.ops-arrow {
  width: 26px; height: 26px;
  border: none;
  border-radius: var(--r);
  color: var(--tx4);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur);
}
.ops-arrow:hover { background: var(--s4); color: var(--tx2); border-color: var(--bd3) }
.ops-edit-btn {
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: .18s ease;
  opacity: 0;
  pointer-events: none;
}
.ops-item:hover .ops-edit-btn,
.ops-item:focus-within .ops-edit-btn { opacity: 1; pointer-events: auto }
.ops-edit-btn:hover { background: rgba(255,255,255,.12) }
.ops-edit-btn svg { width: 12px; height: 12px; stroke: currentColor }

/* ══════════════════════════════════════
   STAT STRIP
══════════════════════════════════════ */

.stat-strip {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}
.dashboard-stat-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--dashboard-widget-gap);
  align-items: stretch;
}
.case-stat-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--page-section-gap);
}
.stat-group {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
}
.stat-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 0 2px;
}
.stat-group-head span {
  overflow: hidden;
  color: var(--tx2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.stat-group-head em {
  overflow: hidden;
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--page-section-gap);
}
.case-stat-strip .stat-group-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.stat-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  min-height: 98px;
  background:
    radial-gradient(circle at 22px 20px, color-mix(in srgb, var(--stat-accent) 9%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--s1) 94%, white 6%), var(--s1));
  border: 0;
  border-radius: var(--radius-xl);
  padding: 11px;
  position: relative;
  overflow: hidden;
  --stat-accent: var(--card-accent, var(--tx3));
  --stat-mask-size: 150px;
  --stat-mask-x: 50%;
  --stat-mask-y: 50%;
  transition: background var(--dur), box-shadow var(--dur), transform var(--dur);
  cursor: default;
  box-shadow: var(--shadow);
  flex: 1;
  min-width: 180px;
}
.dashboard-stat-strip .stat-card {
  min-width: 0;
  min-height: 126px;
  padding: 13px 14px;
}
.stat-group-grid .stat-card {
  min-width: 0;
}
.dashboard-stat-strip .stat-head {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
}
.dashboard-stat-strip .stat-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r2);
}
.dashboard-stat-strip .stat-icon svg {
  width: 15px;
  height: 15px;
}
.dashboard-stat-strip .stat-label {
  font-size: 9.5px;
  letter-spacing: .09em;
}
.dashboard-stat-strip .stat-main {
  align-items: center;
  margin-top: 10px;
}
.dashboard-stat-strip .stat-num {
  font-size: 27px;
}
.dashboard-stat-strip .stat-trend {
  min-height: 22px;
  padding: 0 7px;
  font-size: 10px;
}
.dashboard-stat-strip .stat-compare {
  margin-top: 8px;
  font-size: 9.5px;
  font-weight: 700;
}
.stat-card:hover {
  box-shadow: 0 12px 28px rgba(17,24,39,.085);
  transform: translateY(-1px);
}

/* Radar-sweep loading state while a screenshot is capturing (reuses the
   ticker/login-button radarSweep keyframes for visual consistency). */
.dashboard-stat-strip.is-scanning .stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 100%;
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--blue) 8%, transparent) 50%,
    color-mix(in srgb, var(--blue) 32%, transparent) 95%,
    var(--blue) 100%
  );
  border-right: 1px solid var(--blue);
  animation: radarSweep 2.35s cubic-bezier(.42, 0, .18, 1) infinite;
  pointer-events: none;
  z-index: 5;
}
.dashboard-stat-strip.is-scanning .stat-card:nth-child(2)::after { animation-delay: .12s }
.dashboard-stat-strip.is-scanning .stat-card:nth-child(3)::after { animation-delay: .24s }
.dashboard-stat-strip.is-scanning .stat-card:nth-child(4)::after { animation-delay: .36s }
.dashboard-stat-strip.is-scanning .stat-card:nth-child(5)::after { animation-delay: .48s }
@media (prefers-reduced-motion: reduce) {
  .dashboard-stat-strip.is-scanning .stat-card::after { animation: none; display: none }
}
[data-theme="dark"] .stat-card {
  background:
    radial-gradient(circle at 22px 20px, color-mix(in srgb, var(--stat-accent) 12%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--s1) 92%, white 4%), var(--s1));
}
.stat-card.red    { --stat-accent: var(--red) }
.stat-card.amber  { --stat-accent: var(--amber) }
.stat-card.purple { --stat-accent: var(--purple) }
.stat-card.blue   { --stat-accent: var(--blue) }
.stat-card.green  { --stat-accent: var(--green) }
.stat-card.cyan   { --stat-accent: var(--cyan) }
.stat-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transform: none;
  background: transparent;
  transition: opacity 190ms ease-out;
  pointer-events: none;
}
.stat-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--stat-accent) 68%, transparent) 1px, transparent 1.6px);
  background-size: 12px 12px;
  mask-image: radial-gradient(circle var(--stat-mask-size) at var(--stat-mask-x) var(--stat-mask-y), black 0 34%, rgba(0,0,0,.68) 56%, rgba(0,0,0,.24) 74%, transparent 100%);
  opacity: .62;
}
.stat-card.is-stat-hovering .stat-glow {
  opacity: .55;
}
.stat-card.is-stat-updated::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--stat-accent) 6%, transparent) 46%,
    color-mix(in srgb, var(--stat-accent) 30%, transparent) 92%,
    color-mix(in srgb, var(--stat-accent) 86%, transparent) 100%
  );
  border-right: 1px solid color-mix(in srgb, var(--stat-accent) 72%, transparent);
  pointer-events: none;
  z-index: 2;
  animation: statRadarSweep 1.15s linear both;
}
@keyframes statRadarSweep {
  0% { transform: translateX(-105%); opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: .9; }
  100% { transform: translateX(275%); opacity: 0; }
}
.stat-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}
.stat-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--stat-accent) 18%, var(--bd1));
  border-radius: var(--r2);
  background: color-mix(in srgb, var(--stat-accent) 5%, var(--s2));
  color: color-mix(in srgb, var(--stat-accent) 72%, var(--tx3));
}
.stat-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.9;
}
.stat-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-top: 10px;
}
.stat-num {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: var(--tx1);
}
.stat-label {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: var(--tx3);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}
.stat-card > .stat-num + .stat-label { margin-top: 7px }
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 7px;
  border-radius: var(--r);
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--tx3);
  white-space: nowrap;
}
.stat-trend.good { color: var(--green) }
.stat-trend.bad { color: var(--red) }
.stat-trend.warning { color: var(--amber) }
.stat-trend.neutral { color: var(--tx3) }
.stat-trend-arrow {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid currentColor;
}
.stat-trend.down .stat-trend-arrow {
  border-bottom: 0;
  border-top: 6px solid currentColor;
}
.stat-trend.flat .stat-trend-arrow {
  width: 8px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: currentColor;
}
.stat-trend.warn .stat-trend-arrow {
  width: 12px;
  height: 12px;
  border: 0;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 92%, 0 92%);
}
.stat-compare {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  margin-top: 10px;
  overflow: hidden;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════
   DASHBOARD MAIN GRID
══════════════════════════════════════ */

.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: var(--dashboard-row-gap);
  min-width: 0;
  --dashboard-primary-panel-height: clamp(430px, 48vh, 540px);
}

.dashboard-abuse-panel {
  display: grid;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.dashboard-abuse-panel:hover {
  border-color: color-mix(in srgb, var(--red) 24%, var(--bd1));
  box-shadow: var(--shadow);
}

.dashboard-abuse-panel.is-alert {
  border-color: color-mix(in srgb, var(--red) 28%, var(--bd1));
}

.dashboard-abuse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-abuse-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}

.dashboard-abuse-grid b {
  color: var(--tx1);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
}

.dashboard-abuse-grid em {
  overflow: hidden;
  color: var(--tx3);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-abuse-focus {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: color-mix(in srgb, var(--s2) 72%, transparent);
  color: var(--tx2);
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-abuse-focus svg {
  flex: 0 0 auto;
  color: var(--red);
}

.dashboard-abuse-focus span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboard-abuse-focus strong {
  color: var(--tx1);
  font-family: var(--mono);
  font-size: 11px;
}

.dash-grid {
  /* Row 1's height must be explicit, not auto/content-sized: .col-left now
     stacks Infrastructure Pulse + Cases, and an auto row takes the max
     natural (unstretched) height of every item in it — if Cases' own
     content were allowed to size that computation, an unbounded case count
     would inflate the row itself and defeat internal scrolling entirely
     (this exact bug shipped and was reported live). Fixing the row height
     to the .dashboard-workspace stack's genuinely bounded total (two
     clamp(430px,48vh,540px) task-monitoring-panel instances + the Dobby
     filler + two row-gaps) makes both columns' available height a known
     constant, so .col-left's children can correctly flex/clip within it
     regardless of how much content either side has. */
  --dashboard-row1-height: calc(var(--dashboard-primary-panel-height) * 2 + var(--dashboard-row-gap) * 2 + 44px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: var(--dashboard-row1-height);
  column-gap: var(--dashboard-column-gap);
  row-gap: var(--dashboard-row-gap);
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.col-left,
.col-dashboard-tabs,
.dashboard-workspace,
.col-productivity,
.col-center,
.col-right,
.col-activity {
  display: flex;
  flex-direction: column;
  gap: var(--dashboard-row-gap);
  min-width: 0;
  min-height: 0;
}

.dash-grid > *,
.col-left > *,
.col-dashboard-tabs > *,
.dashboard-workspace > *,
.col-productivity > *,
.col-center > *,
.col-right > *,
.col-activity > *,
.panel > * {
  min-width: 0;
}

.col-left {
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: stretch;
  overflow: hidden;
}

.col-left > .infra-dashboard-widget {
  flex: 0 0 auto;
}

.col-dashboard-tabs {
  grid-area: dashboard-tabs;
  align-self: stretch;
}

.dashboard-workspace {
  display: grid;
  grid-column: 4 / 7;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content max-content max-content;
  grid-template-areas:
    "productivity"
    "dashboard-tabs"
    "dobby";
  column-gap: 0;
  row-gap: var(--dashboard-row-gap);
  align-content: start;
  align-items: stretch;
  align-self: start;
}

/* Currency + Recent Activity share the bottom row; make both panels fill the
   row so their heights match (the taller one drives, the list scrolls). */
.col-right > .panel,
.col-activity > .panel {
  flex: 1 1 auto;
  min-height: 0;
}

.col-productivity {
  grid-area: productivity;
}

.col-center {
  grid-area: handover;
}

.col-right {
  grid-area: currency;
}

.col-activity {
  grid-area: activity;
}

/* Dobby easter egg — a quiet, playful filler in the leftover workspace space. */
.dobby-egg {
  grid-area: dobby;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--tx4);
  font-family: var(--mono);
  user-select: none;
  opacity: .55;
  transition: opacity var(--dur);
}
.dobby-egg:hover { opacity: 1 }
.dobby-egg-cat {
  display: inline-flex;
  animation: dobby-bob 2.4s ease-in-out infinite;
}
.dobby-egg:hover .dobby-egg-cat { animation-duration: .8s }
.dobby-egg-paw { display: inline-flex; opacity: .7 }
.dobby-egg-dots span {
  animation: dobby-blink 1.4s infinite both;
}
.dobby-egg-dots span:nth-child(2) { animation-delay: .2s }
.dobby-egg-dots span:nth-child(3) { animation-delay: .4s }
@keyframes dobby-blink {
  0%, 20% { opacity: 0 }
  50% { opacity: 1 }
  100% { opacity: 0 }
}
@keyframes dobby-bob {
  0%, 100% { transform: translateY(0) rotate(0) }
  50% { transform: translateY(-2px) rotate(-6deg) }
}
@media (prefers-reduced-motion: reduce) {
  .dobby-egg-cat,
  .dobby-egg-dots span { animation: none }
  .dobby-egg-dots span { opacity: 1 }
}

.col-left,
.col-right {
  justify-content: flex-start;
}

.dashboard-case-panel {
  /* .col-left's overall height is now externally fixed by .dash-grid's
     explicit row height (see --dashboard-row1-height), not by its own
     content — so this can safely flex to fill whatever space remains after
     the Infrastructure Pulse widget above it, and .dashboard-case-list's
     overflow-y:auto below correctly clips/scrolls regardless of case count. */
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  margin: var(--space-2) 0 0;
  overflow: hidden;
}

/* Cases sits directly under the Shift Summary / Infrastructure Pulse widgets
   in .col-left, so its title and row content must share their horizontal
   inset (--dashboard-widget-padding) instead of the tighter generic
   --card-header-padding-x, or the left/right edges visibly misalign between
   stacked widgets in the same column. Shift/Infra apply
   --dashboard-widget-padding on all sides of their own widget box (their
   __head has padding:0), so their titles sit --dashboard-widget-padding
   below the card's top edge; the generic .panel-head's hardcoded 10px top
   padding left Cases' title noticeably tighter against its own top edge, so
   pull the top inset up to the same token too.
*/
.dashboard-case-panel > .panel-head {
  flex: 0 0 auto;
  padding-inline: var(--dashboard-widget-padding);
  padding-block-start: var(--dashboard-widget-padding);
}

.dashboard-case-panel > .empty {
  flex: 1 1 auto;
}

.dashboard-case-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.dashboard-widget-tabs-panel {
  height: var(--dashboard-primary-panel-height);
  max-height: var(--dashboard-primary-panel-height);
}

.dashboard-widget-viewport {
  display: flex;
  min-height: 0;
}

.dashboard-widget-pane {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

.dashboard-widget-pane.is-active {
  display: flex;
}

.dashboard-tab-widget.panel {
  display: flex;
  width: 100%;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--bd1) 76%, transparent);
  border-radius: var(--r3);
  background: color-mix(in srgb, var(--s2) 54%, transparent);
  box-shadow: none;
}

[data-theme="dark"] .dashboard-tab-widget.panel {
  border-color: color-mix(in srgb, var(--bd2) 62%, transparent);
  background: rgba(255,255,255,.018);
}

.dashboard-tab-widget > .panel-head {
  flex: 0 0 auto;
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 72%, transparent);
}

.dashboard-tab-widget .dashboard-shift-scroll,
.dashboard-tab-widget .dashboard-activity-scroll {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.dashboard-tab-widget .screenshot-body,
.dashboard-tab-widget .currency-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.dashboard-tab-widget .empty {
  flex: 1 1 auto;
}

.dashboard-activity-panel {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.dashboard-activity-scroll {
  flex: 1 1 0;
  min-height: 0;
  /* Cap the intrinsic height so Currency drives the shared row; the list then
     flex-fills the matched height and scrolls the overflow. */
  max-height: 300px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.dashboard-reminder-scroll {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* ══════════════════════════════════════
   TASK MONITORING
══════════════════════════════════════ */

.task-monitoring-panel {
  display: flex;
  height: clamp(430px, 48vh, 540px);
  max-height: clamp(430px, 48vh, 540px);
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bd1) 74%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--s1) 96%, var(--blue-lt)), var(--s1));
}

[data-theme="dark"] .task-monitoring-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.006)),
    color-mix(in srgb, var(--s1) 94%, #020617);
  border-color: color-mix(in srgb, var(--bd2) 70%, transparent);
}

.task-monitoring-head {
  flex: 0 0 auto;
  flex-wrap: wrap;
  min-height: 42px;
  padding: 8px 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--s2) 92%, var(--blue-lt)), var(--s2));
}

.task-monitoring-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.task-monitoring-title .panel-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tx2);
  white-space: nowrap;
}

.task-monitoring-counters {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.task-monitoring-counters span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  max-width: 116px;
  padding: 0 7px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--s3) 72%, transparent);
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.task-monitoring-counters b {
  overflow: hidden;
  color: var(--tx2);
  font-weight: 800;
  text-overflow: ellipsis;
}

.task-monitoring-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: fit-content;
}

.task-monitoring-tabs {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 3px 14px 4px;
  margin-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 72%, transparent);
  background: color-mix(in srgb, var(--s1) 78%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
}

.task-monitoring-tabs::-webkit-scrollbar {
  display: none;
}

.task-monitoring-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--tx3);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.task-monitoring-tab:hover {
  background: var(--s3);
  color: var(--tx2);
}

.task-monitoring-tab.active,
.task-monitoring-tab[aria-selected="true"] {
  border-color: var(--blue-bd);
  background: var(--blue-lt);
  color: var(--blue);
}

.tm-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
}

.task-monitoring-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.task-monitoring-viewport {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 14px 14px;
}

.task-monitoring-pane {
  min-height: 0;
  height: 100%;
  animation: taskMonitorFade .18s var(--ease);
}

.task-monitoring-pane[hidden] {
  display: none;
}

@keyframes taskMonitorFade {
  from { opacity: .45; transform: translateY(3px) }
  to { opacity: 1; transform: translateY(0) }
}

.task-monitoring-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .9fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
}

.tm-checklist-grid {
  grid-template-columns: minmax(0, 13fr) minmax(260px, 7fr);
}

.tm-column {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bd1) 76%, transparent);
  border-radius: var(--r3);
  background: color-mix(in srgb, var(--s2) 54%, transparent);
}

[data-theme="dark"] .tm-column {
  background: rgba(255,255,255,.018);
  border-color: color-mix(in srgb, var(--bd2) 62%, transparent);
}

.tm-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 7px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 72%, transparent);
}

.tm-column-head > div {
  min-width: 0;
}

.tm-column-head span {
  display: block;
  overflow: hidden;
  color: var(--tx3);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tm-column-head strong {
  display: block;
  min-width: 0;
  margin-top: 1px;
  overflow: hidden;
  color: var(--tx2);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-column-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
}

.tm-column-head .panel-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  flex: 0 0 auto;
  overflow: visible;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.tm-column-head .tm-column-add {
  width: auto;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0 7px;
  flex: 0 0 auto;
  border-radius: var(--r);
}

.tm-column-add .icon-sm {
  flex: 0 0 auto;
}

.tm-column-add .btn-add-label {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.task-monitoring-panel.panel:hover .tm-column-add.btn-add-reveal {
  opacity: .5;
  filter: saturate(.72);
}

.task-monitoring-panel.panel .tm-column-add.btn-add-reveal:hover,
.task-monitoring-panel.panel .tm-column-add.btn-add-reveal:focus-visible {
  opacity: 1;
  filter: none;
}

.task-monitoring-panel.panel:hover .tm-column-add.btn-add-reveal .btn-add-label {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  transform: translateX(8px);
}

.task-monitoring-panel.panel .tm-column-add.btn-add-reveal:hover .btn-add-label,
.task-monitoring-panel.panel .tm-column-add.btn-add-reveal:focus-visible .btn-add-label {
  max-width: 12rem;
  margin-left: 4px;
  opacity: 1;
  transform: translateX(0);
}

.tm-progress {
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 64%, transparent);
}

.tm-progress .prog-info {
  margin-top: 5px;
}

.tm-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

.tm-scroll::-webkit-scrollbar {
  width: var(--scrollbar-size);
}

.tm-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.tm-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

.tm-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

.task-monitoring-panel .dashboard-checklist-scroll,
.task-monitoring-panel .dashboard-activity-scroll {
  overflow-y: auto;
  overflow-x: hidden;
}

.task-monitoring-panel .dashboard-checklist-scroll {
  flex: 0 1 auto;
  max-height: calc(230px + var(--space-2));
  padding: 2px 12px 6px 8px;
}

.task-monitoring-panel .dashboard-activity-scroll {
  max-height: 100%;
}

.task-monitoring-panel .task-row,
.task-monitoring-panel .rem-row,
.task-monitoring-panel .act-row,
.tm-feed-item {
  border-bottom-color: color-mix(in srgb, var(--bd1) 70%, transparent);
}

.task-monitoring-panel .task-row,
.task-monitoring-panel .rem-row,
.task-monitoring-panel .act-row {
  padding: 6px 8px;
}

.task-monitoring-panel .task-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 70%, transparent);
  border-radius: 0;
}

.task-monitoring-panel .task-row + .task-row {
  margin-top: 0;
}

.task-monitoring-panel .task-row .flex1 {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.task-monitoring-panel .task-title {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  font-size: var(--item-title-size);
  font-weight: var(--item-title-weight);
  line-height: var(--item-title-line);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
}

.task-monitoring-panel .task-sub,
.task-monitoring-panel .tracs-creator-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--tx3);
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-monitoring-panel .tracs-creator-meta {
  margin-top: 0;
}

.task-monitoring-panel .task-row .rem-check {
  margin-top: 0;
}

.task-monitoring-panel .task-row.is-completed {
  border-radius: var(--r);
  background: color-mix(in srgb, var(--green-lt) 18%, transparent);
}

.task-monitoring-panel .task-row.is-completed .task-title.done {
  color: var(--tx3);
}

.task-monitoring-panel .task-acts {
  gap: 2px;
}

.task-monitoring-panel .task-acts .btn-icon {
  width: 24px;
  height: 24px;
  min-height: 24px;
  border-radius: var(--r);
}

.task-monitoring-panel .task-acts .btn-icon svg {
  width: 12px;
  height: 12px;
}

.task-monitoring-panel .task-row:last-child,
.task-monitoring-panel .rem-row:last-child,
.task-monitoring-panel .act-row:last-child,
.tm-feed-item:last-child {
  border-bottom: none;
}

.tm-feed {
  display: flex;
  flex-direction: column;
}

.tm-feed-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.tm-feed-item:hover,
.tm-feed-item:focus-visible {
  background: var(--s3);
}

.tm-feed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: var(--r);
  background: var(--s3);
  color: var(--tx3);
}

.tm-feed-item.is-info .tm-feed-icon {
  background: var(--blue-lt);
  color: var(--blue);
}

.tm-feed-item.is-warning .tm-feed-icon {
  background: var(--amber-lt);
  color: var(--amber);
}

.tm-feed-item.is-critical .tm-feed-icon {
  background: var(--red-lt);
  color: var(--red);
}

.tm-feed-item.is-success .tm-feed-icon {
  background: var(--green-lt);
  color: var(--green);
}

.tm-feed-item.type-holiday,
.tm-reminder-list-item.type-holiday {
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
}

.tm-feed-item.type-holiday {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tm-reminder-list-item.type-holiday {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tm-feed-item.type-holiday::before,
.tm-reminder-list-item.type-holiday::before {
  display: none;
  animation: none;
  content: none;
}

.tm-feed-item.type-holiday > *,
.tm-reminder-list-item.type-holiday > * {
  position: relative;
  z-index: 1;
}

.tm-feed-item.type-holiday .tm-feed-icon,
.tm-reminder-list-item.type-holiday .tm-reminder-list-icon {
  display: none;
}

.tm-feed-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.tm-feed-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tm-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  max-width: 86px;
  padding: 0 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bd2) 76%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--s3) 78%, transparent);
  color: var(--tx2);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.type-shift-report .tm-type-badge {
  border-color: color-mix(in srgb, var(--blue) 32%, transparent);
  background: color-mix(in srgb, var(--blue-lt) 88%, var(--s2));
  color: var(--blue);
}

.type-meeting .tm-type-badge {
  border-color: color-mix(in srgb, var(--purple) 32%, transparent);
  background: color-mix(in srgb, var(--purple-lt) 88%, var(--s2));
  color: var(--purple);
}

.type-follow-up .tm-type-badge {
  border-color: color-mix(in srgb, var(--amber) 34%, transparent);
  background: color-mix(in srgb, var(--amber-lt) 88%, var(--s2));
  color: var(--amber);
}

.type-case-due .tm-type-badge {
  border-color: color-mix(in srgb, var(--red) 32%, transparent);
  background: color-mix(in srgb, var(--red-lt) 88%, var(--s2));
  color: var(--red);
}

.type-assignment .tm-type-badge {
  border-color: color-mix(in srgb, var(--green) 32%, transparent);
  background: color-mix(in srgb, var(--green-lt) 88%, var(--s2));
  color: var(--green);
}

.type-schedule .tm-type-badge {
  border-color: color-mix(in srgb, var(--cyan) 32%, transparent);
  background: color-mix(in srgb, var(--cyan-lt) 88%, var(--s2));
  color: var(--cyan);
}

.tm-feed-title,
.tm-feed-line .rem-title {
  min-width: 0;
  overflow: hidden;
  color: var(--item-title-color);
  font-size: var(--item-title-size);
  font-weight: var(--item-title-weight);
  line-height: var(--item-title-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-feed-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.2;
}

.tm-feed-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-feed-status {
  color: var(--tx4);
}

.tm-inline-time {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9.5px;
}

.tm-priority-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--tx4);
}

.tm-priority-dot.is-medium { background: var(--blue) }
.tm-priority-dot.is-high { background: var(--amber) }
.tm-priority-dot.is-critical { background: var(--red) }

.tm-reminder-row {
  min-height: 52px;
}

.tm-stack {
  gap: 0;
}

.tm-stack-section {
  display: flex;
  min-height: 0;
  flex: 1 1 0;
  flex-direction: column;
  overflow: hidden;
}

.tm-stack-section + .tm-stack-section {
  border-top: 1px solid color-mix(in srgb, var(--bd1) 70%, transparent);
}

.tm-stack-section .tm-column-head {
  flex: 0 0 auto;
}

.tm-reminder-list {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  padding: 7px 9px 9px;
}

.tm-reminder-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  padding: 7px 8px;
  border-bottom: 0;
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.tm-reminder-list-item + .tm-reminder-list-item {
  margin-top: 4px;
}

.tm-reminder-list-item:hover,
.tm-reminder-list-item:focus-visible {
  background: color-mix(in srgb, var(--s3) 80%, transparent);
}

.tm-reminder-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r);
  background: var(--blue-lt);
  color: var(--blue);
}

.tm-reminder-list-item.is-due-soon .tm-reminder-list-icon {
  background: var(--amber-lt);
  color: var(--amber);
}

.tm-reminder-list-item.is-overdue .tm-reminder-list-icon {
  background: var(--red-lt);
  color: var(--red);
}

.tm-reminder-list-item.is-done .tm-reminder-list-icon {
  background: var(--green-lt);
  color: var(--green);
}

.tm-reminder-list-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.tm-reminder-list-title {
  min-width: 0;
  overflow: hidden;
  color: var(--item-title-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-reminder-list-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tm-reminder-list-item.type-shift-report {
  min-height: 58px;
}

.tm-reminder-list-item.type-shift-report .tm-reminder-list-main {
  gap: 1px;
}

.tm-reminder-list-item.type-shift-report .tm-reminder-list-line {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.tm-reminder-list-item.type-shift-report .tm-reminder-list-title {
  width: 100%;
}

.tm-reminder-list-meta {
  margin-top: 1px;
  overflow: hidden;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-reminder-list-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tm-reminder-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue-lt);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.tm-reminder-status-pill.is-due-soon {
  background: var(--amber-lt);
  color: var(--amber);
}

.tm-reminder-status-pill.is-new,
.tm-reminder-status-pill.is-in-progress {
  background: var(--blue-lt);
  color: var(--blue);
}

.tm-reminder-status-pill.is-overdue {
  background: var(--red-lt);
  color: var(--red);
}

.tm-reminder-status-pill.is-done {
  background: color-mix(in srgb, var(--s3) 76%, transparent);
  color: var(--tx4);
}

.tm-reminder-empty {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 12px;
  color: var(--tx3);
}

.tm-reminder-empty.is-compact {
  min-height: 86px;
  padding: 14px 12px;
}

.tm-reminder-empty i {
  color: var(--blue);
  opacity: .82;
}

.tm-reminder-empty span {
  color: var(--tx2);
  font-size: 12px;
  font-weight: 800;
}

.tm-reminder-empty small {
  max-width: 220px;
  color: var(--tx4);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
}

.tm-reminder-column {
  justify-content: flex-start;
}

.tm-assignment-list {
  display: flex;
  flex-direction: column;
}

.tm-assignment-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 9px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 64%, transparent);
  color: inherit;
  text-decoration: none;
}

.tm-assignment-row:last-child {
  border-bottom: 0;
}

.tm-assignment-row:hover,
.tm-assignment-row:focus-visible {
  background: color-mix(in srgb, var(--s3) 80%, transparent);
}

.tm-assignment-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.tm-assignment-title {
  overflow: hidden;
  color: var(--item-title-color);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-assignment-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}

.tm-assignment-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-assignment-note {
  overflow: hidden;
  color: var(--tx4);
  font-size: 10.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-assignment-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tm-row-actions {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}

.tm-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 12px;
  color: var(--tx3);
  font-size: 12px;
  font-weight: 600;
}

/* ══════════════════════════════════════
   PANEL / CARD BASE
══════════════════════════════════════ */

.panel {
  background: var(--s1);
  border: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.panel:has(> .panel-head .report-export-menu[open]),
.panel:has(.row-action-menu[open]) {
  overflow: visible;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--panel-padding);
  background: var(--s2);
  gap: 10px;
  min-height: 40px;
}
.panel-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tx3);
}
.panel-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0 }
.panel-meta  { font-size: 10px; color: var(--tx3); font-family: var(--mono) }
.panel-counter {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r2);
  border: 0;
  background: var(--s3);
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.panel-counter.is-zero {
  background: color-mix(in srgb, var(--s3) 70%, transparent);
  color: var(--tx4);
}
.panel-counter.is-low {
  background: var(--blue-lt);
  color: var(--blue);
}
.panel-counter.is-warning {
  background: var(--amber-lt);
  color: var(--amber);
}
.panel-counter.is-critical {
  background: var(--red-lt);
  color: var(--red);
}

.tracs-creator-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 3px;
  color: var(--tx2);
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.25;
  vertical-align: middle;
  white-space: nowrap;
}
.tracs-creator-meta .icon-xs {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  stroke-width: 2;
  opacity: .72;
}
.tracs-creator-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-time .tracs-creator-meta,
.mom-meta .tracs-creator-meta,
.note-header .tracs-creator-meta,
.shift-activity-row .tracs-creator-meta {
  margin-top: 0;
}
.case-body > .tracs-creator-meta,
.shift-text .tracs-creator-meta {
  display: flex;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: var(--r);
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  font-family: var(--font);
  line-height: 1;
  cursor: pointer;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .52;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.btn:focus-visible,
.nav-item:focus-visible,
.ticker-btn:focus-visible,
.ops-arrow:focus-visible,
.ops-edit-btn:focus-visible,
.notif-bell-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* Universal fallback so any interactive element (custom rows, role="button"
   divs, anything with a tabindex) gets a visible focus ring even if it
   doesn't have a selector-specific rule above. */
:is([role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.btn svg{
  width:12px;
  height:12px;
  flex-shrink:0;
  stroke-width:2.2;
}

.btn-primary{

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--blue) 12%, transparent) 0%,
      color-mix(in srgb, var(--blue) 8%, transparent) 100%
    );

  color: var(--blue);

  border:1px solid color-mix(in srgb, var(--blue) 22%, transparent);

  box-shadow:
    0 1px 2px color-mix(in srgb, var(--blue) 8%, transparent);

  backdrop-filter:blur(10px);

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.btn-primary:hover{

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--blue) 18%, transparent) 0%,
      color-mix(in srgb, var(--blue) 13%, transparent) 100%
    );

  border-color:
    color-mix(in srgb, var(--blue) 35%, transparent);

  box-shadow:
    0 4px 12px color-mix(in srgb, var(--blue) 12%, transparent);

  transform:translateY(-1px);
}

.btn-primary:active{

  transform:translateY(0);

  box-shadow:
    0 2px 4px color-mix(in srgb, var(--blue) 8%, transparent);
}

/* DARK MODE — btn-primary */

[data-theme="dark"] .btn-primary{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--blue) 20%, transparent) 0%,
      color-mix(in srgb, var(--blue) 14%, transparent) 100%
    );
  color:#dbeafe;
  border:1px solid color-mix(in srgb, var(--blue) 45%, transparent);
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--blue) 18%, transparent);
}

[data-theme="dark"] .btn-primary:hover{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--blue) 26%, transparent) 0%,
      color-mix(in srgb, var(--blue) 18%, transparent) 100%
    );
  border-color:
    color-mix(in srgb, var(--blue) 60%, transparent);
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--blue) 24%, transparent);
}
.btn-ghost { background: transparent; color: var(--tx3); border-color: var(--bd2) }
.btn-ghost:hover { background: var(--s3); color: var(--tx2); border-color: var(--bd3) }
.btn-danger { background: transparent; color: var(--red); border-color: var(--red-bd) }
.btn-danger:hover { background: var(--red-lt) }
.btn-warning { background: var(--amber-lt); color: var(--amber); border-color: var(--amber-bd) }
.btn-warning:hover { background: color-mix(in srgb, var(--amber-lt) 78%, var(--amber) 22%) }
.btn-orange { background: var(--orange-lt); color: var(--orange); border-color: var(--orange-bd) }
.btn-orange:hover { background: color-mix(in srgb, var(--orange-lt) 78%, var(--orange) 22%) }
.btn-success { background: var(--green-lt); color: var(--green); border-color: var(--green-bd) }
.btn-icon { width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: var(--r) }
.btn-sm   { min-height: 28px; padding: 4px 9px; font-size: 10.5px }

.btn-add-reveal {
  gap: 0;
  overflow: hidden;
  opacity: .5;
  filter: saturate(.72);
  transform-origin: right center;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    filter .2s var(--ease),
    opacity .2s var(--ease),
    transform .18s ease;
}

.btn-add-reveal .btn-add-label {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(8px);
  transition:
    max-width .28s cubic-bezier(.2, .8, .2, 1),
    margin-left .28s cubic-bezier(.2, .8, .2, 1),
    opacity .16s ease,
    transform .28s cubic-bezier(.2, .8, .2, 1);
  white-space: nowrap;
}

.panel:hover .btn-add-reveal,
.btn-add-reveal:hover,
.btn-add-reveal:focus-visible {
  opacity: 1;
  filter: none;
}

.panel:hover .btn-add-reveal .btn-add-label,
.btn-add-reveal:hover .btn-add-label,
.btn-add-reveal:focus-visible .btn-add-label {
  max-width: 12rem;
  margin-left: 4px;
  opacity: 1;
  transform: translateX(0);
}

/* ══════════════════════════════════════
   BADGES
══════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: var(--r);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.badge-sm { padding: 1px 5px; font-size: 8px }
.badge-sm .badge-dot { width: 3px; height: 3px }
.badge-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0 }
.b-active   { background: var(--green-lt);  color: var(--green);  border: 1px solid var(--green-bd) }
.b-active .badge-dot { background: var(--green); animation: bpulse 2s ease infinite }
@keyframes bpulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.b-pending  { background: var(--amber-lt);  color: var(--amber);  border: 1px solid var(--amber-bd) }
.b-pending .badge-dot { background: var(--amber) }
.b-in_progress { background: var(--cyan-lt); color: var(--cyan); border: 1px solid var(--cyan-bd) }
.b-in_progress .badge-dot { background: var(--cyan); animation: bpulse 2s ease infinite }
.b-warning  { background: var(--amber-lt);  color: var(--amber);  border: 1px solid var(--amber-bd) }
.b-warning .badge-dot { background: var(--amber) }
.b-stuck    { background: var(--purple-lt); color: var(--purple); border: 1px solid var(--purple-bd) }
.b-stuck .badge-dot { background: var(--purple) }
.b-done     { background: rgba(60,65,80,.12); color: var(--tx3); border: 1px solid var(--bd2) }
.b-done .badge-dot { background: var(--tx3) }
.b-resolved { background: rgba(34,197,94,.10); color: #3f8f5b; border: 1px solid rgba(34,197,94,.20) }
.b-resolved .badge-dot { background: #3f8f5b }
.b-critical { background: var(--red-lt);  color: var(--red);  border: 1px solid var(--red-bd) }
.b-high     { background: var(--amber-lt); color: var(--amber); border: 1px solid var(--amber-bd) }
.b-medium   { background: rgba(100,163,250,.07); color: #6ba3fa; border: 1px solid rgba(100,163,250,.18) }
.b-low      { background: rgba(60,65,80,.08); color: var(--tx3); border: 1px solid var(--bd2) }
.b-expiring { background: var(--amber-lt); color: var(--amber); border: 1px solid var(--amber-bd) }
.b-expired  { background: var(--red-lt);  color: var(--red);  border: 1px solid var(--red-bd) }
.b-completed{ background: var(--green-lt); color: var(--green); border: 1px solid var(--green-bd) }
.b-failed   { background: var(--red-lt);  color: var(--red);  border: 1px solid var(--red-bd) }
.b-info     { background: var(--cyan-lt); color: var(--cyan); border: 1px solid var(--cyan-bd) }
.b-hold     { background: rgba(100,116,139,.10); color: var(--tx2); border: 1px solid var(--bd2) }
.badge[class*="b-"] { border-color: transparent }

/* ══════════════════════════════════════
   CASE ROWS (COMPACT FULL-INFO)
══════════════════════════════════════ */

.case-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(132px, .65fr) auto;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 70%, transparent);
  transition: background var(--dur);
  position: relative;
  min-height: 46px;
  cursor: pointer;
}
.case-row:last-child { border-bottom: none }
.case-row:hover { background: var(--s3) }
.case-row:focus-visible {
  outline: 2px solid var(--blue-bd);
  outline-offset: -2px;
  background: var(--blue-lt);
}

/* Body */
.case-body { padding: 8px 10px 8px var(--dashboard-widget-padding, var(--panel-padding)); min-width: 0; display: flex; flex-direction: column; justify-content: center }

/* Row 1: title + case-id */
.case-top-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; min-width: 0 }
.case-id { font-family: var(--mono); font-size: 9.5px; color: var(--tx2); flex-shrink: 0 }
.case-title {
  flex: 1;
  min-width: 0;
  font-size: var(--item-title-size);
  font-weight: var(--item-title-weight);
  line-height: var(--item-title-line);
  color: var(--item-title-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: var(--item-title-tracking);
}

/* Row 2: inline meta */
.case-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.case-time { font-family: var(--mono); font-size: 10px; color: var(--tx2) }
.case-time.ov { color: var(--red); font-weight: 600 }
.case-date-meta {
  display: flex;
  gap: 6px;
  margin-top: 3px;
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.25;
}

/* Right column: date + actions */
.case-status-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 6px;
}
.case-right {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: end;
  gap: 8px;
  min-width: 116px;
  padding: 8px var(--dashboard-widget-padding, var(--panel-padding)) 8px 0;
}
.case-when { text-align: right }
.case-day  { display: block; font-family: var(--mono); font-size: 10px; color: var(--tx2) }
.case-hr   { display: block; font-family: var(--mono); font-size: 9px; color: var(--tx2) }
.case-status-stack .case-time {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
}
.case-right > .case-row-menu {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  z-index: 4;
  flex: 0 0 auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.case-right > .case-row-menu[open] {
  z-index: 260;
}
.case-right > .case-row-menu .row-action-popover {
  min-width: 118px;
}
.case-right > .case-row-menu .row-action-popover .btn {
  width: 100%;
}
.case-row.is-done {
  opacity: .68;
}
.case-row.is-done .case-title {
  color: var(--tx3);
}
.case-more-link {
  flex: 0 0 auto;
  padding: 7px var(--dashboard-widget-padding, var(--panel-padding));
  border-top: 1px solid var(--bd1);
  text-align: center;
}

/* ══════════════════════════════════════
   REMINDER ROWS
══════════════════════════════════════ */

.rem-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px var(--panel-padding);
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 70%, transparent);
  transition: background var(--dur);
}
.rem-row:last-child { border-bottom: none }
.rem-row:hover { background: var(--s3) }
.rem-row:hover .rem-acts,
.rem-row:focus-within .rem-acts { opacity: 1; pointer-events: auto }
input[type="checkbox"]:not([data-native-checkbox]),
.tracs-checkbox,
.rem-check,
.agenda-check,
.action-check {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 1px solid var(--bd3);
  border-radius: 4px;
  background-color: var(--s1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  cursor: pointer;
  flex: 0 0 15px;
  margin-top: 2px;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx3) 18%, transparent);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
input[type="checkbox"]:not([data-native-checkbox]):hover,
.tracs-checkbox:hover,
.rem-check:hover,
.agenda-check:hover,
.action-check:hover { border-color: var(--bd4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tx3) 10%, transparent) }
input[type="checkbox"]:not([data-native-checkbox]):focus-visible,
.tracs-checkbox:focus-visible,
.rem-check:focus-visible,
.agenda-check:focus-visible,
.action-check:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }
input[type="checkbox"]:not([data-native-checkbox]):checked,
.tracs-checkbox:checked,
.rem-check:checked,
.agenda-check:checked,
.action-check:checked {
  background-color: var(--s4);
  border-color: var(--bd4);
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.2 6.6 11.3 12.8 4.7' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] input[type="checkbox"]:not([data-native-checkbox]),
[data-theme="dark"] .tracs-checkbox,
[data-theme="dark"] .rem-check,
[data-theme="dark"] .agenda-check,
[data-theme="dark"] .action-check {
  background-color: var(--s2);
  border-color: var(--bd3);
}
[data-theme="dark"] input[type="checkbox"]:not([data-native-checkbox]):checked,
[data-theme="dark"] .tracs-checkbox:checked,
[data-theme="dark"] .rem-check:checked,
[data-theme="dark"] .agenda-check:checked,
[data-theme="dark"] .action-check:checked {
  background-color: var(--s4);
  border-color: var(--bd4);
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.2 6.6 11.3 12.8 4.7' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tracs-checkbox:disabled,
input[type="checkbox"]:not([data-native-checkbox]):disabled,
.rem-check:disabled,
.agenda-check:disabled,
.action-check:disabled { cursor: not-allowed; opacity: .65 }
.checkable-row { transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease), transform .32s var(--ease) }
.checkable-row.is-updating { opacity: .72 }
.checkable-row.is-completed { background: color-mix(in srgb, var(--green-lt) 36%, transparent) }
.checkable-moving { transform: translateY(7px); background: var(--green-lt) !important }
.checkable-landed { transform: translateY(0) }
.rem-title {
  min-width: 0;
  font-size: var(--item-title-size);
  font-weight: var(--item-title-weight);
  line-height: var(--item-title-line);
  color: var(--item-title-color);
  letter-spacing: var(--item-title-tracking);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rem-title.done { text-decoration: none; color: var(--tx4) }
.rem-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; flex-wrap: wrap }
.rem-ov     { color: var(--red);   font-family: var(--mono); font-size: 10px; font-weight: 600 }
.rem-today  { color: var(--amber); font-family: var(--mono); font-size: 10px; font-weight: 600 }
.rem-future { color: var(--tx3);   font-family: var(--mono); font-size: 10px }
.rem-acts   { margin-left: auto; display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity var(--dur); flex-shrink: 0 }
.rem-done-btn {
  height: 24px;
  padding: 0 8px;
  font-size: 10px;
  gap: 4px;
}
.rem-done-btn[data-compact-action="1"] {
  color: var(--tx3);
}
.rem-done-btn[data-compact-action="1"]:hover {
  color: var(--green);
}
.rem-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* ══════════════════════════════════════
   TASK ROWS
══════════════════════════════════════ */

.task-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--panel-padding);
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 70%, transparent);
  transition: background var(--dur);
}

[data-theme="dark"] .task-row{
  border-bottom-color: var(--bd1);
}


.task-row:last-child { border-bottom: none }
.task-row:hover { background: var(--s3) }
.task-row:hover .task-acts,
.task-row:focus-within .task-acts { opacity: 1; pointer-events: auto }
.task-title {
  flex: 1;
  min-width: 0;
  font-size: var(--item-title-size);
  font-weight: var(--item-title-weight);
  line-height: var(--item-title-line);
  color: var(--item-title-color);
  letter-spacing: var(--item-title-tracking);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-title.done { text-decoration: none; color: var(--tx4) }
.task-sub { font-size: 10.5px; color: var(--tx3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.task-acts { display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity var(--dur); flex-shrink: 0 }

.dashboard-checklist-scroll {
  max-height: 289px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.checklist-panel,
.checklist-progress-panel,
.checklist-list-panel {
  border: 1px solid var(--bd1);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.checklist-panel .panel-head,
.checklist-progress-panel .panel-head,
.checklist-list-panel .panel-head {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--s2) 92%, var(--blue-lt)), var(--s2));
}

.checklist-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tx2);
}

.checklist-panel .prog-wrap,
.checklist-progress-panel .prog-wrap {
  padding-top: 12px;
  padding-bottom: 10px;
}

.checklist-panel .prog-track,
.checklist-progress-panel .prog-track {
  height: 5px;
  background: color-mix(in srgb, var(--s3) 86%, var(--blue-lt));
  border: 1px solid color-mix(in srgb, var(--bd2) 72%, var(--blue-bd));
}

.checklist-panel .prog-fill,
.checklist-progress-panel .prog-fill {
  background: linear-gradient(90deg, #334155, var(--blue));
  box-shadow: 0 0 10px rgba(37,99,235,.18);
}

.checklist-panel .task-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px var(--panel-padding);
  border-bottom: 1px solid var(--bd1);
  transition: background var(--dur);
}

.checklist-panel .task-row:last-child {
  border-bottom: none;
}

.checklist-panel .task-row:hover {
  background: var(--s3);
}

.checklist-panel .checkable-row.is-completed {
  background: var(--s2);
}

.checklist-panel .checkable-row.is-completed:hover {
  background: var(--s3);
}

.checklist-panel .rem-check {
  border-color: var(--tx3);
  background-color: var(--s1);
  box-shadow: inset 0 0 0 1px var(--bd3);
}

/* Also target the actual checklist page/panel classes used in markup */
.checklist-list-panel .rem-check,
.checklist-page .rem-check {
  border-color: var(--tx3);
  background-color: var(--s1);
  box-shadow: inset 0 0 0 1px var(--bd3);
}
/* Checklist specific checkbox inherits global brand blue styling */

.checklist-panel .task-title.done,
.checklist-page .task-title.done {
  color: var(--tx4);
  text-decoration: none;
}

/* ══════════════════════════════════════
   ACTIVITY LOG
══════════════════════════════════════ */

.act-row {
  display: flex;
  gap: 8px;
  padding: 8px var(--panel-padding);
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 70%, transparent);
  transition: background var(--dur);
}
.act-row:last-child { border-bottom: none }
.act-row:hover { background: var(--s3) }
.act-ic {
  width: 22px; height: 22px;
  border-radius: var(--r);
  background: var(--s3);
  border: 1px solid var(--bd2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 1px;
}
.act-text { font-size: var(--item-title-size); line-height: var(--item-title-line); color: var(--item-title-color); letter-spacing: var(--item-title-tracking) }
.act-text strong { font-weight: var(--item-title-weight) }
.act-text span   { color: var(--tx3); margin-left: 3px }
.act-desc { font-size: 10.5px; color: var(--tx2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.act-time { font-size: 10px; color: var(--tx2); margin-top: 2px; font-family: var(--mono) }

/* ══════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════ */

.prog-wrap  { padding: 8px var(--panel-padding) 2px }
.prog-track { height: 3px; background: var(--s3); border-radius: 999px; overflow: hidden }
.prog-fill  { height: 100%; background: linear-gradient(90deg, var(--blue), #60a5fa); border-radius: 999px; transition: width .4s var(--ease) }
.prog-info  { display: flex; justify-content: space-between; margin-top: 5px; font-size: 9.5px; color: var(--tx3); font-family: var(--mono) }

.checklist-progress-head {
  align-items: center;
}

.checklist-progress-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.checklist-progress-meta .panel-title {
  color: var(--tx3);
}

/* ══════════════════════════════════════
   CURRENCY PANEL
══════════════════════════════════════ */

.currency-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--panel-padding);
}
.currency-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* The native <select> is visually hidden (position:absolute) and the custom
   .tracs-select is inserted beside it; size the actual rendered controls so
   both currency pickers fill the row evenly regardless of enhancement state. */
.currency-row > .tracs-select,
.currency-row > .form-select {
  flex: 1 1 0;
  min-width: 0;
}
.currency-row > #swap-currency {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}
#convert-btn {
  width: 100%;
}
.currency-result {
  background: var(--s2);
  border: 0;
  border-radius: var(--r2);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--tx1);
  font-weight: 600;
  min-height: 36px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.currency-result small { font-size: 9.5px; color: var(--tx3); font-weight: 400 }
.currency-updated { font-size: 9.5px; color: var(--tx2); font-family: var(--mono) }

/* Realtime rate — compact single-line status pill in the panel-head's right
   side (.panel-right), like the Screenshot widget's region select — secondary
   contextual metadata beside the title, not a body card competing with the
   conversion form. Skeleton is a single short bar while the first fetch is
   in flight; the exact "Updated HH:MM" time lives in a title tooltip to stay
   within the header's single-row height. */
.currency-rate-card {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--tx3);
  font-family: var(--mono);
  white-space: nowrap;
}
.cri-pair { color: var(--tx2); font-weight: 600; }
.cri-rate { color: var(--tx3); }
.cri-refresh {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.cri-error { color: var(--tx3); }

/* Last-converted summary — populated after any manual conversion, or from
   history on load. Lighter weight than the conversion result above it; no
   rate text here (already shown by the realtime line). */
.currency-last-converted {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}
.clc-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tx4);
  font-family: var(--mono);
}
.clc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx2);
  font-family: var(--mono);
}
.clc-row i { color: var(--tx4); flex: 0 0 auto; }
.clc-time { font-size: 9.5px; color: var(--tx4); font-family: var(--mono); }

/* Compact recent-conversion list. */
.currency-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.currency-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r1);
  font-size: 11px;
  font-family: var(--mono);
}
.currency-history-row:nth-child(odd) { background: color-mix(in srgb, var(--s2) 60%, transparent); }
.chr-pair { color: var(--tx2); font-weight: 600; flex: 0 0 auto; }
.chr-amounts { color: var(--tx3); flex: 1 1 auto; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chr-time { color: var(--tx4); flex: 0 0 auto; }
.currency-history-empty {
  font-size: 11px;
  color: var(--tx4);
  padding: 4px 8px;
}
.currency-history-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--tx3);
  padding: 4px 8px;
}

/* ══════════════════════════════════════
   WEBSITE SCREENSHOT WIDGET
══════════════════════════════════════ */

.screenshot-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.screenshot-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  padding: var(--panel-padding);
  min-height: 0;
}
.screenshot-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.screenshot-input-row .form-input {
  flex: 1 1 auto;
  min-width: 0;
}
.screenshot-input-row .btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.screenshot-region-row .form-select {
  min-width: 180px;
  width: auto;
}
.screenshot-status {
  font-size: 12px;
  color: var(--tx3);
  font-family: var(--mono);
}
.screenshot-status.is-error {
  color: var(--tracs-status-critical, #d84c4c);
}

/* Result modal (reuses the .case-image-modal frame/backdrop for design consistency).
   Selector combines both classes so it reliably beats .case-image-frame's fixed
   height/rows regardless of source order — same specificity tier, single-class
   selectors were losing this override to whichever rule came later in the file. */
.case-image-frame.screenshot-result-frame {
  width: min(720px, 92vw);
  height: auto;
  max-height: min(620px, 88vh);
  grid-template-rows: auto minmax(0, 1fr);
}
.screenshot-result-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
  background: var(--s3);
}
.screenshot-result-body .screenshot-preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  background: var(--s2);
  overflow: hidden;
  cursor: zoom-in;
  line-height: 0;
}
.screenshot-result-body .screenshot-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46vh;
  object-fit: contain;
  object-position: top center;
  background: transparent;
}
.screenshot-result-body .screenshot-preview img[hidden] {
  display: none;
}

/* Radar-sweep while a preview is still loading (img not yet shown) — same
   sweep language as the dashboard-stat-strip scanning state, scoped to the
   card so it disappears the instant the real image is set. */
.screenshot-result-body .screenshot-preview:has(img[hidden]) {
  min-height: 120px;
  max-height: 150px;
}
.screenshot-result-body .screenshot-preview:has(img[hidden])::before {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 100%;
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--blue) 10%, transparent) 50%,
    color-mix(in srgb, var(--blue) 34%, transparent) 95%,
    var(--blue) 100%
  );
  border-right: 1px solid var(--blue);
  animation: radarSweep 1.6s cubic-bezier(.42, 0, .18, 1) infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .screenshot-result-body .screenshot-preview:has(img[hidden])::before { animation: none; display: none }
}
.screenshot-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.screenshot-meta {
  font-size: 11px;
  color: var(--tx3);
  font-family: var(--mono);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.screenshot-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.screenshot-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.screenshot-grid-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  background: var(--s1);
}
.screenshot-grid-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx2);
}
.screenshot-grid-item .screenshot-preview {
  min-height: 90px;
}
.screenshot-grid-item .screenshot-preview img {
  max-height: 320px;
}
.screenshot-grid-item .screenshot-status {
  margin: 0;
}

@media (max-width: 640px) {
  .screenshot-input-row {
    flex-direction: column;
  }
  .screenshot-input-row .btn {
    width: 100%;
    justify-content: center;
  }
  .screenshot-toolbar {
    align-items: flex-start;
  }
  .screenshot-actions {
    width: 100%;
  }
}

/* Generic shimmer placeholder for first-load skeleton states (history cards,
   realtime rate card) — distinct from the radar-sweep used for the
   in-progress "Capturing…" state, which is specific to that action. */
.skeleton-block {
  position: relative;
  overflow: hidden;
  border-radius: var(--r2);
  background: var(--s2);
}
.skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 30%,
    color-mix(in srgb, var(--tx1) 8%, transparent) 50%,
    transparent 70%
  );
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-block::after { animation: none; display: none; }
}
.screenshot-history-skeleton { height: 84px; }
.currency-rate-skeleton { height: 14px; width: 130px; }

/* Screenshot history — compact visual cards (thumbnail-first, minimal text).
   Whole card is a button that opens the full-detail preview modal; anything
   beyond thumbnail/status/region/time lives in that modal, not here. */
.screenshot-history {
  display: flex;
  flex-direction: column;
}
.screenshot-history[data-state="empty"] .empty {
  padding: 14px 10px;
}
.screenshot-history-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r2);
  background: var(--s2);
  font-size: 11.5px;
  color: var(--tx3);
}
.screenshot-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.screenshot-history-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--bd1) 76%, transparent);
  border-radius: var(--r2);
  background: var(--s2);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
.screenshot-history-card:hover,
.screenshot-history-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 45%, var(--bd1));
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--blue) 30%, transparent);
}
.screenshot-history-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .screenshot-history-card { transition: none; }
  .screenshot-history-card:hover, .screenshot-history-card:focus-visible { transform: none; }
}
.shc-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--s1);
  overflow: hidden;
}
.shc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.shc-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 10px;
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--tx3);
}
.shc-region { color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shc-time { margin-left: auto; color: var(--tx4); flex: 0 0 auto; }

/* Two-column preview modal (image left, capture metadata right) — reuses
   the .case-image-frame.screenshot-result-frame override already in place,
   widened via :has() when the single-capture layout is present. The
   multi-region grid keeps the original single-column body. */
.case-image-frame.screenshot-result-frame:has(.screenshot-result-image) {
  width: min(920px, 94vw);
}
.screenshot-result-body:has(.screenshot-result-image) {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: start;
}
.screenshot-result-image .screenshot-preview img {
  max-height: 60vh;
}
.screenshot-result-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.screenshot-result-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.screenshot-result-fields > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.screenshot-result-fields dt {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tx4);
  font-family: var(--mono);
}
.screenshot-result-fields dd {
  font-size: 12px;
  color: var(--tx1);
  margin: 0;
  overflow-wrap: break-word;
}
.screenshot-result-timing {
  font-size: 10.5px;
  color: var(--tx3);
  font-family: var(--mono);
}
.screenshot-result-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.screenshot-result-actions .screenshot-action {
  justify-content: flex-start;
}
@media (max-width: 720px) {
  .screenshot-result-body:has(.screenshot-result-image) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══════════════════════════════════════
   FORMS
══════════════════════════════════════ */

.form-group    { display: flex; flex-direction: column; gap: 4px }
.form-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.form-label    { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tx3); font-family: var(--mono) }
.form-hint     { font-size: 10px; color: var(--tx3); margin-top: 2px }
.form-input,
.form-select,
.form-textarea {
  background: var(--s2);
  border: 1px solid var(--bd2);
  border-radius: var(--r);
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--tx1);
  font-family: var(--font);
  outline: none;
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur);
  width: 100%;
  color-scheme: light dark;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--tx4) }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { background: var(--s1); border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-lt) }
.form-textarea { resize: vertical; min-height: 72px; line-height: 1.6 }
.form-select {
  cursor: pointer;
  appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24' stroke='%235c6270' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
}
.form-select[multiple] {
  appearance: auto;
  background-image: none;
  padding-right: 10px;
  min-height: 88px;
}
.form-select[multiple] option {
  padding: 4px 6px;
  border-radius: 4px;
}

/* ── TRACS Custom Dropdowns ──
   display:none is the primary hide — unambiguous regardless of layout
   context (flex/grid parents, multi-select default sizing, etc). The
   absolute/clip-path properties are kept as a harmless fallback for any
   code path that might toggle display back on. */
.tracs-native-select {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

.tracs-select {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--tx1);
  box-shadow: none !important;
}

.tracs-select.compact-select {
  height: auto;
}

.tracs-select-trigger {
  width: 100%;
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px 8px 10px;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  background: var(--s2);
  color: var(--tx1);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur), color var(--dur);
}

.tracs-select-trigger:hover {
  background: var(--s1);
  border-color: var(--bd3);
}

.tracs-select.is-open .tracs-select-trigger,
.tracs-select-trigger:focus-visible {
  background: var(--s1);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-lt);
}

.tracs-select.is-disabled .tracs-select-trigger,
.tracs-select-trigger:disabled {
  cursor: not-allowed;
  opacity: .58;
  background: var(--s3);
  color: var(--tx4);
}

.tracs-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracs-select-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--tx3);
  transition: transform var(--dur), color var(--dur);
}

.tracs-select-chevron::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 2px auto 0;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
}

.tracs-select.is-open .tracs-select-chevron {
  color: var(--blue);
  transform: rotate(180deg);
}

.tracs-select-menu {
  position: fixed;
  overflow: auto;
  padding: 5px;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  background: color-mix(in srgb, var(--s1) 96%, transparent);
  color: var(--tx1);
  box-shadow: 0 18px 44px rgba(17, 24, 39, .16), 0 2px 8px rgba(17, 24, 39, .08);
  backdrop-filter: blur(14px);
}
/* Opt-in searchable dropdown filter box */
.tracs-select-search {
  position: sticky;
  top: -5px;
  margin: -5px -5px 4px;
  padding: 6px;
  background: color-mix(in srgb, var(--s1) 96%, transparent);
  border-bottom: 1px solid var(--bd1);
  z-index: 1;
}
.tracs-select-search-input {
  width: 100%;
  height: 30px;
  padding: 0 9px;
  font-size: 12.5px;
  color: var(--tx1);
  background: var(--s2);
  border: 1px solid var(--bd2);
  border-radius: var(--r);
  outline: none;
}
.tracs-select-search-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-lt);
}
.tracs-select-empty {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--tx4);
}

.tracs-select-option {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tx2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.tracs-select-option:hover,
.tracs-select-option.is-active {
  background: var(--s3);
  color: var(--tx1);
}

.tracs-select-option.is-selected {
  background: var(--blue-lt);
  color: var(--blue-dk);
  font-weight: 700;
}

.tracs-select-option:disabled {
  cursor: not-allowed;
  color: var(--tx4);
  opacity: .65;
}

.tracs-select-option.is-placeholder {
  color: var(--tx3);
  font-weight: 500;
}

.tracs-select-check {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  position: relative;
}

.tracs-select-option.is-selected .tracs-select-check {
  border-color: var(--blue-bd);
  background: var(--blue);
}

.tracs-select-option.is-selected .tracs-select-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.tracs-select.is-compact .tracs-select-trigger,
.tracs-select.compact-select .tracs-select-trigger {
  min-height: var(--toolbar-h);
  height: var(--toolbar-h);
  padding: 0 8px;
  font-size: var(--toolbar-fz);
}

.tracs-select.is-inline .tracs-select-trigger {
  min-height: 32px;
  padding-block: 6px;
}

.tracs-select.is-multiple .tracs-select-trigger {
  min-height: 112px;
  align-items: flex-start;
  padding: 8px;
}

.tracs-select.is-multiple .tracs-select-value {
  white-space: normal;
  line-height: 1.35;
}

.tracs-select-menu.is-multiple .tracs-select-option {
  min-height: 32px;
}

.tracs-select.is-dt-move {
  width: auto;
  min-width: 110px;
}

.tracs-select.is-dt-move .tracs-select-trigger {
  min-height: 24px;
  height: 24px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
}

.tracs-select.is-dt-move.has-value .tracs-select-trigger {
  color: var(--cyan);
  border-color: var(--cyan-bd);
  background: var(--cyan-lt);
}

.dt-status-wrap .tracs-select.is-dt-status {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.tracs-select.is-dt-status .tracs-select-trigger {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.tracs-select.is-dt-status .tracs-select-value,
.tracs-select.is-dt-status .tracs-select-chevron {
  opacity: 0;
}

[data-theme="dark"] .tracs-select-trigger {
  background: var(--s3);
  border-color: var(--bd2);
}

[data-theme="dark"] .tracs-select-trigger:hover,
[data-theme="dark"] .tracs-select.is-open .tracs-select-trigger,
[data-theme="dark"] .tracs-select-trigger:focus-visible {
  background: var(--s4);
  border-color: var(--bd3);
}

[data-theme="dark"] .tracs-select-menu {
  background: color-mix(in srgb, var(--s2) 96%, transparent);
  border-color: var(--bd3);
  box-shadow: 0 24px 62px rgba(0,0,0,.52), 0 1px 0 rgba(255,255,255,.05) inset;
}

[data-theme="dark"] .tracs-select-option:hover,
[data-theme="dark"] .tracs-select-option.is-active {
  background: var(--s4);
}

[data-theme="dark"] .tracs-select-option.is-selected {
  background: color-mix(in srgb, var(--blue-lt) 72%, var(--s4));
  color: var(--tx1);
}

/* ── Date/Time Picker Enhancements ── */
.form-input[type="date"],
.form-input[type="datetime-local"],
.form-input[type="time"],
.flatpickr-input,
.flatpickr-alt-input {
  position: relative;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px !important;
}

.form-input[type="time"],
.flatpickr-alt-input.split-time,
.split-time + .flatpickr-alt-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

/* Dark Mode Icon Overrides */
[data-theme="dark"] .form-input[type="date"],
[data-theme="dark"] .flatpickr-alt-input:not(.split-time) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23565e72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

[data-theme="dark"] .form-input[type="time"],
[data-theme="dark"] .flatpickr-alt-input.split-time,
[data-theme="dark"] .split-time + .flatpickr-alt-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23565e72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

.flatpickr-alt-input {
  font-family: var(--font) !important;
  font-size: 12px;
  color: var(--tx1) !important;
}

/* ── Flatpickr Premium Theme Overrides ── */
.flatpickr-calendar {
  z-index: 12000 !important;
  background: var(--s1) !important;
  border: 1px solid var(--bd2) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
  font-family: var(--font) !important;
  width: min(322px, calc(100vw - 20px)) !important;
  padding-bottom: 6px !important;
  box-sizing: border-box !important;
}

.tracs-flatpickr-dark {
  background: var(--s2) !important;
  border-color: var(--bd3) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.4) !important;
}

/* Header Section */
.flatpickr-months {
  padding: 8px 6px 4px !important;
}
.flatpickr-month {
  height: 32px !important;
  color: var(--tx1) !important;
}
.flatpickr-current-month {
  font-size: 100% !important;
  font-weight: 600 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80% !important;
  left: 10% !important;
}
.flatpickr-monthDropdown-months {
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-right: 3px !important;
}
.numInputWrapper span { display: none !important; } /* Hide year arrows */
.cur-year { font-weight: 700 !important; font-size: 13px !important; }

.flatpickr-prev-month, .flatpickr-next-month {
  top: 10px !important;
  padding: 8px !important;
}
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--tracs-calendar-accent) !important; }

/* Day Grid */
.flatpickr-innerContainer {
  padding: 0 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.flatpickr-weekdays {
  width: 100% !important;
  height: 30px !important;
}
.flatpickr-weekday {
  display: flex !important;
  min-width: 0 !important;
  align-items: center;
  justify-content: center;
  color: var(--tx1) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

.flatpickr-rContainer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.flatpickr-days {
  background: #f9f9f9;
  border-radius: 8px;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 auto !important;
  overflow: hidden;
  display: block !important;
}

.flatpickr-weekdaycontainer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.flatpickr-days .dayContainer,
.flatpickr-dayContainer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 32px;
  justify-content: stretch !important;
}
.tracs-flatpickr-dark .flatpickr-days { background: var(--s3); }

.flatpickr-day {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex-basis: auto !important;
  height: 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  border: none !important;
  border-radius: 4px !important;
  margin: 0 !important;
  color: var(--tx1) !important;
  font-size: 11px !important;
  box-sizing: border-box !important;
}

/* Hide Adjacent Month Dates */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.prevMonthDay,
.nextMonthDay {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  color: transparent !important;
}

/* Today and Selected */
.flatpickr-day.today {
  color: var(--tracs-calendar-accent) !important;
  font-weight: 800 !important;
}
.flatpickr-day.today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--tracs-calendar-accent);
  border-radius: 50%;
}

.flatpickr-day.selected {
  background: var(--tracs-calendar-accent) !important;
  color: #fff !important;
  border-radius: 4px !important;
  opacity: 1 !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.past-day {
  opacity: 0.35 !important;
  font-weight: 400 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Time Picker Match */
.flatpickr-time {
  border-top: 1px solid var(--bd1) !important;
  background: var(--s1) !important;
  border-radius: 0 0 12px 12px !important;
}
.tracs-flatpickr-dark .flatpickr-time { background: var(--s2) !important; }

.flatpickr-time input {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.flatpickr-time .flatpickr-time-separator { font-weight: 700 !important; }

.split-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.split-input-group .form-input {
  font-family: var(--font) !important;
}

/* Hide native indicators as we use custom themed icon */
.form-input::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  position: absolute;
  right: 0;
  width: 32px;
  height: 100%;
  cursor: pointer;
}

.form-select option { background: var(--s3); color: var(--tx1) }
.form-check { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--tx2) }
.form-check input { cursor: pointer; width: 15px; height: 15px; margin: 0; flex: 0 0 15px }
.form-check:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r) }
.form-check:has(input:disabled) { cursor: not-allowed; opacity: .65 }

/* Search */
.search-wrap { position: relative }
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: var(--tx3); pointer-events: none; stroke-width: 2 }
.search-input {
  background: var(--s2);
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  padding: 6px 9px 6px 28px;
  font-size: 12.5px;
  color: var(--tx1);
  font-family: var(--font);
  outline: none;
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur);
  width: 100%;
}
.search-input:focus { background: var(--s1); border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-lt) }
.search-input::placeholder { color: var(--tx4) }

/* Filter tabs */
.filter-bar { display: flex; gap: 5px; flex-wrap: wrap }
.filter-tab {
  padding: 3px 9px;
  border-radius: var(--r2);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--bd2);
  background: transparent;
  color: var(--tx3);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  font-family: var(--font);
}
.filter-tab:hover  { background: var(--s3); color: var(--tx2); border-color: var(--bd3) }
.filter-tab.active { background: var(--blue-lt); color: var(--blue); border-color: var(--blue-bd) }

/* ══════════════════════════════════════
   MODALS
══════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,20,30,.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  animation: ov-in var(--dur) ease;
  padding: 16px;
  box-sizing: border-box;
}
.modal-overlay.hidden { display: none }
@keyframes ov-in { from{opacity:0} to{opacity:1} }
.modal {
  background: var(--s1);
  border: 0;
  border-radius: var(--r4);
  width: 480px;
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: m-in .2s var(--ease);
  box-shadow: 0 12px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
}
.modal-lg { width: 560px }
.modal-sm { width: 360px }
.modal-ticket { width: 680px }
@keyframes m-in { from{opacity:0;transform:scale(.93) translateY(14px)} to{opacity:1;transform:none} }
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 12px;
  position: relative;
  background: var(--s2);
  z-index: 10;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--bd1);
}
.modal-title { font-size: 13px; font-weight: 600; color: var(--tx1); letter-spacing: 0 }
.modal-sub   { font-size: 9.5px; color: var(--tx3); margin-top: 2px; font-family: var(--mono) }
.modal-close {
  width: 24px; height: 24px;
  background: var(--s3);
  border: 1px solid var(--bd2);
  border-radius: 4px;
  color: var(--tx3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--s4); color: var(--tx1); border-color: var(--bd3) }
.modal-close:focus-visible,
.modal-close-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.modal-close svg { width: 10px; height: 10px; stroke-width: 2.5 }
[data-tracs-success-pending="1"] .modal-close,
[data-tracs-success-pending="1"] .modal-close-btn,
[data-tracs-success-pending="1"] .modal-foot button,
[data-tracs-success-pending="1"] .dpc-modal-footer button,
[data-tracs-success-pending="1"] form button[type="submit"],
[data-tracs-success-pending="1"] [data-infra-manage-close],
[data-tracs-success-pending="1"] .infra-server-form__buttons button {
  pointer-events: none;
}
.modal-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.modal-icon-action {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd2);
  border-radius: 4px;
  background: transparent;
  color: var(--tx3);
  cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.modal-icon-action:hover {
  background: var(--blue-lt);
  color: var(--blue);
  border-color: var(--blue-bd);
}
.modal-icon-action svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.3;
}
.modal-body {
  min-height: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px 16px;
  background: var(--s2);
  border-radius: 0 0 var(--r4) var(--r4);
  border-top: 1px solid var(--bd1);
  flex: 0 0 auto;
  align-items: center;
}
.modal-foot .btn { min-height: 34px }

.modal [aria-invalid="true"],
.dpc-modal-content [aria-invalid="true"],
.infra-modal__panel [aria-invalid="true"],
.modal .is-invalid,
.dpc-modal-content .is-invalid,
.infra-modal__panel .is-invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-lt) !important;
}

.modal label:has(> input[type="checkbox"][aria-invalid="true"]),
.modal label:has(> input[type="radio"][aria-invalid="true"]) {
  color: var(--red);
  border-radius: var(--r);
  background: var(--red-lt);
}

.case-upload-group { gap: 7px }
.case-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.case-upload-drop {
  min-height: 96px;
  border: 1px dashed var(--bd3);
  border-radius: var(--r3);
  background: var(--s2);
  color: var(--tx2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur), color var(--dur), box-shadow var(--dur);
}
.case-upload-drop:hover,
.case-upload-drop.drag {
  background: var(--blue-lt);
  border-color: var(--blue-bd);
  color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-lt);
}
.case-upload-drop svg { width: 18px; height: 18px }
.case-upload-drop span { font-size: 12px; font-weight: 600 }
.case-upload-drop small { font-size: 10px; color: var(--tx3); font-family: var(--mono) }
.case-upload-status {
  min-height: 14px;
  font-size: 10px;
  color: var(--tx3);
  font-family: var(--mono);
}
.case-upload-status.error { color: var(--red) }
.case-upload-status.ok { color: var(--green) }
.case-upload-status.warn { color: var(--amber) }
.case-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 8px;
}
.case-attachment-tile {
  position: relative;
  min-width: 0;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  background: var(--s2);
  overflow: hidden;
}
.case-attachment-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  padding: 0;
  background: var(--s3);
  cursor: zoom-in;
  display: block;
}
.case-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-attachment-meta {
  min-width: 0;
  padding: 6px 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.case-attachment-meta span {
  color: var(--tx1);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-attachment-meta small {
  color: var(--tx3);
  font-size: 9px;
  font-family: var(--mono);
}
.case-attachment-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--bd2);
  border-radius: 4px;
  background: color-mix(in srgb, var(--s1) 88%, transparent);
  color: var(--tx3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.case-attachment-remove:hover {
  color: var(--red);
  border-color: var(--red-bd);
  background: var(--red-lt);
}
.case-attachment-count {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tx3);
  font-size: 10px;
  font-family: var(--mono);
}
.modal-ticket {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--blue-lt) 70%, transparent), transparent 35%),
    var(--s1);
}
.case-ticket-head {
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px 14px;
  background: color-mix(in srgb, var(--s2) 84%, var(--s1));
  border-bottom: 1px solid var(--bd1);
}
.case-ticket-titleblock {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.case-ticket-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.case-ticket-titleblock h2 {
  margin: 0;
  color: var(--tx1);
  font-size: 18px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: 0;
}
.case-ticket-ref {
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-ticket-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
  z-index: 12;
}
.case-ticket-more-menu {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.case-ticket-more-menu[hidden] {
  display: none !important;
}
.case-ticket-more-menu > .case-ticket-more {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--bd2);
  border-radius: 4px;
  color: var(--tx3);
  background: var(--s3);
}
.case-ticket-more-menu > .case-ticket-more svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.3;
}
.case-ticket-more-menu > .case-ticket-more:hover,
.case-ticket-more-menu.is-open > .case-ticket-more {
  color: var(--blue);
  background: var(--blue-lt);
  border-color: var(--blue-bd);
}
.case-ticket-menu-popover {
  display: grid;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 300;
  min-width: 132px;
  padding: 6px;
  gap: 4px;
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  box-shadow: 0 14px 28px rgba(0,0,0,.26);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}
.case-ticket-more-menu.is-open .case-ticket-menu-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 0s;
}
.case-ticket-menu-popover .btn {
  gap: 7px;
  justify-content: flex-start;
  width: 100%;
}
.case-ticket-menu-popover .btn-danger {
  color: var(--red);
  background: transparent;
  border-color: transparent;
}
.case-ticket-menu-popover .btn-danger:hover {
  background: var(--red-lt);
  border-color: var(--red-bd);
}
.case-ticket-body {
  gap: 12px;
  padding: 14px;
}
.case-ticket-statusline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.case-ticket-statusline:empty {
  display: none;
}
.case-ticket-statusline .badge {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 9px;
}
.case-ticket-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.case-ticket-summary > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: color-mix(in srgb, var(--s2) 86%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.case-ticket-summary span,
.case-ticket-section h3 {
  display: block;
  margin: 0 0 5px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-ticket-summary strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tx1);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.case-ticket-timeline {
  --timeline-progress: 25%;
  --timeline-pad: 20px;
  --timeline-y: 31px;
  --timeline-line: 1px;
  --timeline-motion: 1.18s;
  --timeline-blue: #3b82f6;
  --timeline-cyan: #22d3ee;
  position: relative;
  min-height: 82px;
  padding: 0;
  border: 1px solid var(--bd1);
  border-radius: var(--r3);
  background: color-mix(in srgb, var(--s2) 74%, transparent);
  overflow: hidden;
}
.case-ticket-track {
  position: absolute;
  top: calc(var(--timeline-y) - .5px);
  left: var(--timeline-pad);
  right: var(--timeline-pad);
  height: var(--timeline-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bd2) 72%, transparent);
  overflow: visible;
  pointer-events: none;
}
.case-ticket-track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--timeline-progress);
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--timeline-blue), var(--timeline-cyan));
  box-shadow:
    0 0 8px color-mix(in srgb, var(--timeline-blue) 78%, transparent),
    0 0 18px color-mix(in srgb, var(--timeline-cyan) 58%, transparent),
    0 0 28px color-mix(in srgb, var(--timeline-cyan) 28%, transparent);
  overflow: hidden;
}
.case-ticket-track-sweep {
  position: absolute;
  top: -9px;
  bottom: -9px;
  left: 0;
  width: 42%;
  border-right: 1px solid color-mix(in srgb, var(--timeline-cyan) 64%, white);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--timeline-blue) 28%, transparent) 30%, color-mix(in srgb, var(--timeline-cyan) 92%, transparent) 74%, rgba(255,255,255,.96));
  filter: blur(.1px) drop-shadow(0 0 12px color-mix(in srgb, var(--timeline-cyan) 82%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--timeline-blue) 42%, transparent));
  opacity: 0;
  transform: translate3d(-100%,0,0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: caseTimelineSweep var(--timeline-motion) cubic-bezier(.34, .02, .16, 1) infinite;
  pointer-events: none;
}
.case-ticket-timeline.is-resolved .case-ticket-track-sweep {
  animation: none;
  opacity: 0;
}
.case-ticket-step {
  position: absolute;
  top: calc(var(--timeline-y) - 7px);
  left: var(--step-left);
  width: min(94px, 22%);
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  transform: translateX(-50%);
  z-index: 1;
}
.case-ticket-step.is-first {
  justify-items: start;
  text-align: left;
  transform: none;
}
.case-ticket-step.is-last {
  justify-items: end;
  text-align: right;
  transform: translateX(-100%);
}
.case-ticket-dot {
  --dot-size: 7px;
  position: relative;
  z-index: 1;
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  margin-top: calc((14px - var(--dot-size)) / 2);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bd3) 76%, transparent);
  background: var(--s1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s2) 78%, transparent);
}
.case-ticket-dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.case-ticket-step.is-complete {
  color: var(--tx3);
}
.case-ticket-step.is-current {
  color: var(--tx1);
}
.case-ticket-step.is-complete .case-ticket-dot,
.case-ticket-step.is-current .case-ticket-dot {
  border-color: color-mix(in srgb, var(--timeline-blue) 76%, var(--timeline-cyan));
  background: linear-gradient(135deg, var(--timeline-blue), var(--timeline-cyan));
}
.case-ticket-step.is-complete .case-ticket-dot {
  --dot-size: 6px;
  opacity: .68;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--timeline-blue) 18%, transparent);
}
.case-ticket-step.is-upcoming .case-ticket-dot {
  opacity: .68;
}
.case-ticket-step.is-current .case-ticket-dot {
  --dot-size: 11px;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--timeline-blue) 34%, transparent),
    0 0 18px color-mix(in srgb, var(--timeline-blue) 78%, transparent),
    0 0 30px color-mix(in srgb, var(--timeline-cyan) 58%, transparent);
  animation: caseTimelineDotBreathe var(--timeline-motion) cubic-bezier(.42, 0, .18, 1) infinite;
}
.case-ticket-timeline.is-resolved .case-ticket-step.is-current .case-ticket-dot {
  animation: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--timeline-blue) 26%, transparent),
    0 0 14px color-mix(in srgb, var(--timeline-blue) 42%, transparent);
}
.case-ticket-step.is-current .case-ticket-dot::after {
  inset: -9px;
  background: radial-gradient(circle, color-mix(in srgb, var(--timeline-cyan) 78%, transparent) 0 18%, color-mix(in srgb, var(--timeline-blue) 58%, transparent) 38%, transparent 70%);
  animation: caseTimelineDotPulse var(--timeline-motion) cubic-bezier(.42, 0, .18, 1) infinite;
}
.case-ticket-timeline.is-resolved .case-ticket-step.is-current .case-ticket-dot::after {
  animation: none;
  opacity: 0;
}
@keyframes caseTimelineSweep {
  0% { transform: translate3d(-100%,0,0); opacity: 0; }
  12% { transform: translate3d(-97.62%,0,0); opacity: .42; }
  30% { transform: translate3d(-80.95%,0,0); opacity: .78; }
  48% { transform: translate3d(-42.86%,0,0); opacity: .96; }
  62% { transform: translate3d(38.10%,0,0); opacity: 1; }
  72% { transform: translate3d(138.10%,0,0); opacity: 1; }
  86% { transform: translate3d(223.81%,0,0); opacity: .58; }
  100% { transform: translate3d(238.10%,0,0); opacity: 0; }
}
@keyframes caseTimelineDotBreathe {
  0%, 64%, 100% { transform: scale(1); }
  72% { transform: scale(1.14); }
  84% { transform: scale(1.02); }
}
@keyframes caseTimelineDotPulse {
  0%, 62%, 100% { opacity: 0; transform: scale(.54); }
  72% { opacity: .92; transform: scale(1.04); }
  92% { opacity: 0; transform: scale(1.72); }
}
.case-ticket-content {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(230px, .85fr);
  gap: 10px;
}
.case-ticket-section {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--bd1);
  border-radius: var(--r3);
  background: color-mix(in srgb, var(--s2) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.case-ticket-section-main {
  min-height: 116px;
}
.case-ticket-section p,
.case-ticket-history,
.case-ticket-reference,
.case-ticket-empty {
  margin: 0;
  color: var(--tx2);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.case-ticket-history {
  display: grid;
  gap: 7px;
  white-space: normal;
}
.case-ticket-log-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  color: var(--tx3);
  font-size: 10.5px;
}
.case-ticket-log-dot {
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-lt);
}
.case-ticket-reference {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  white-space: normal;
}
.case-ticket-ref-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--bd2);
  border-radius: var(--r);
  background: var(--s3);
  color: var(--tx2);
  font-family: var(--mono);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-ticket-empty {
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 10px;
}
.case-ticket-attachments {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
.case-ticket-attachments:empty {
  display: none;
}
.case-ticket-actions {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--bd1);
}
.case-ticket-action-note {
  min-width: 0;
  max-width: 240px;
  align-self: center;
  color: color-mix(in srgb, var(--tx4) 76%, transparent);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-ticket-action-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}
.case-ticket-action-buttons .btn {
  min-height: 32px;
}
.case-ticket-action-buttons[hidden] {
  display: none;
}
.case-ticket-actions.is-note-only {
  grid-template-columns: 1fr;
}
.case-ticket-actions.is-note-only .case-ticket-action-note {
  max-width: none;
}
@media (max-width: 720px) {
  .case-ticket-summary,
  .case-ticket-content {
    grid-template-columns: 1fr 1fr;
  }
  .case-ticket-section-main {
    grid-column: 1 / -1;
  }
  .case-ticket-timeline {
    overflow: hidden;
  }
  .case-ticket-actions {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }
  .case-ticket-action-buttons {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Cases workflow board */
.main.case-main {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.case-page {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.case-page-head {
  gap: 14px;
}
.case-queue-health {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9.5px;
  white-space: nowrap;
}
.case-queue-health > span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-lt);
}
.case-queue-health > span.is-alert {
  background: var(--red);
  box-shadow: 0 0 0 3px var(--red-lt);
}
.case-queue-health strong {
  font-weight: 600;
}
.case-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.case-toolbar > .filter-bar {
  min-width: 0;
}
.case-toolbar .filter-tab {
  min-height: var(--toolbar-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--toolbar-px);
  font-size: var(--toolbar-fz);
}
.case-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}
.case-toolbar > .case-active-state {
  grid-column: 1 / -1;
  justify-self: start;
}
.case-search-form {
  width: min(330px, 30vw);
  min-width: 220px;
}
.case-search-form .search-input {
  height: var(--toolbar-h);
  min-height: var(--toolbar-h);
  font-size: var(--toolbar-fz);
}
.case-sort-form {
  display: grid;
  grid-template-columns: auto 138px;
  align-items: center;
  gap: 6px;
}
.case-sort-form > label {
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.case-sort-form .tracs-select {
  width: 138px;
}
.case-sort-form .tracs-select-trigger,
.case-sort-form .form-select {
  min-height: var(--toolbar-h);
  height: var(--toolbar-h);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--toolbar-fz);
}
.case-view-toggle {
  display: inline-flex;
  min-height: var(--toolbar-h);
  padding: 3px;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  background: var(--s2);
}
.case-view-toggle button {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 4px;
  color: var(--tx3);
  font-size: 10.5px;
  font-weight: 600;
}
.case-view-toggle button:hover {
  color: var(--tx1);
}
.case-view-toggle button.is-active {
  background: var(--s1);
  color: var(--blue);
  box-shadow: 0 1px 4px rgba(17, 24, 39, .09);
}
.case-view-toggle svg {
  width: 12px;
  height: 12px;
}
.case-board-view {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r4);
  background: var(--s1);
  box-shadow: var(--shadow);
}
.case-board-head {
  flex: 0 0 auto;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 13px;
  border-bottom: 1px solid var(--bd1);
}
.case-board-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.case-board-head > .case-board-title-block {
  display: grid;
  align-items: start;
  gap: 4px;
  min-width: 0;
}
.case-board-title-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.case-board-head strong {
  color: var(--tx1);
  font-size: 11.5px;
  font-weight: 700;
}
.case-board-head span {
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 9px;
}
.case-board-head > .case-board-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Workflow Board: Reorder menu ── */
.case-reorder-menu {
  position: relative;
  flex-shrink: 0;
}
.case-reorder-menu summary {
  list-style: none;
  cursor: pointer;
}
.case-reorder-menu summary::-webkit-details-marker { display: none; }
.case-reorder-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.case-reorder-trigger.is-custom {
  color: var(--blue);
  background: var(--blue-lt);
  border-color: var(--blue-bd);
}
.case-reorder-menu[open] .case-reorder-trigger {
  color: var(--blue-dk);
  background: var(--blue-lt);
  border-color: var(--blue-bd);
}
.case-reorder-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 236px;
  padding: 6px;
  display: grid;
  gap: 1px;
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: var(--r3);
  box-shadow: 0 14px 32px rgba(17,24,39,.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}
.case-reorder-menu[open] .case-reorder-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
[data-theme="dark"] .case-reorder-popover {
  background: var(--s2);
  border-color: var(--bd3);
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
}
.case-reorder-title {
  padding: 5px 8px 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--tx3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-reorder-popover button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  color: var(--tx2);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.case-reorder-popover button:hover {
  background: var(--s3);
  color: var(--tx1);
}
.case-reorder-popover button .lucide {
  color: var(--tx4);
  flex-shrink: 0;
}
.case-reorder-popover button.is-active {
  background: var(--blue-lt);
  color: var(--blue-dk);
}
.case-reorder-popover button.is-active .lucide { color: var(--blue); }
[data-theme="dark"] .case-reorder-popover button.is-active {
  color: #dbeafe;
  background: rgba(59,130,246,.16);
}
.case-reorder-divider {
  height: 1px;
  margin: 4px 4px;
  background: var(--bd1);
}
.case-active-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 8.5px;
}
.case-active-state[hidden] {
  display: none;
}
.case-active-state > span {
  color: var(--tx3);
}
.case-clear-filters {
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid var(--blue-bd);
  border-radius: 999px;
  background: var(--blue-lt);
  color: var(--blue);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.case-clear-filters:hover,
.case-clear-filters:focus-visible {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue-lt) 72%, var(--s1));
  outline: none;
}
.case-kanban {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(5, 282px);
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-gutter: stable;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}
.case-kanban::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size-horizontal);
}
.case-kanban::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.case-kanban::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}
.case-kanban::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
.case-kanban::-webkit-scrollbar-corner {
  background: transparent;
}
.case-kanban-column {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--bd1) 78%, transparent);
  border-radius: var(--r3);
  background: color-mix(in srgb, var(--s2) 88%, var(--bg));
  transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.case-kanban-column.is-drag-over {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue-lt) 60%, var(--s2));
  box-shadow: inset 0 0 0 2px var(--blue-lt);
}
.case-column-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 9px 8px 10px;
}
.case-column-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.case-column-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--s3);
  color: var(--tx3);
}
.column-attention .case-column-icon { color: var(--red); background: var(--red-lt); }
.column-in_progress .case-column-icon { color: var(--cyan); background: var(--cyan-lt); }
.column-waiting .case-column-icon { color: var(--purple); background: var(--purple-lt); }
.column-on_hold .case-column-icon { color: var(--amber); background: var(--amber-lt); }
.column-resolved .case-column-icon { color: var(--green); background: var(--green-lt); }
.case-column-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.case-column-heading strong {
  overflow: hidden;
  color: var(--tx1);
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-column-heading small {
  overflow: hidden;
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-column-tools {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.case-column-count,
.case-column-add {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
}
.case-column-count {
  width: auto;
  min-width: 24px;
  padding: 0 6px;
  background: var(--s3);
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
}
.case-column-add {
  border: 1px solid transparent;
  color: var(--tx3);
}
.case-column-add:hover {
  border-color: var(--bd2);
  background: var(--s3);
  color: var(--blue);
}
.case-column-add svg {
  width: 12px;
  height: 12px;
}
.case-column-list {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 7px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-gutter: stable;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}
.case-column-list::-webkit-scrollbar {
  width: var(--scrollbar-size);
}
.case-column-list::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.case-column-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}
.case-column-list::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
.case-column-empty {
  min-height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px dashed var(--bd2);
  border-radius: var(--r2);
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 9px;
}
.case-column-empty[hidden] {
  display: none;
}
.case-kanban-card {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--bd2) 72%, transparent);
  border-radius: var(--r2);
  background: var(--s1);
  box-shadow: 0 2px 7px rgba(17, 24, 39, .055);
  transition: border-color var(--dur), box-shadow var(--dur), opacity var(--dur);
}
.case-kanban-card.is-status-updating {
  opacity: .68;
  pointer-events: none;
}
.case-kanban-card.is-status-updating::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--blue-bd);
  border-top-color: var(--blue);
  border-radius: 50%;
  background: var(--s1);
  animation: caseStatusSpin .7s linear infinite;
  z-index: 3;
}
@keyframes caseStatusSpin {
  to { transform: rotate(360deg); }
}
.case-kanban-card:hover {
  border-color: var(--bd3);
  box-shadow: 0 7px 18px rgba(17, 24, 39, .1);
}
.case-kanban-card.is-dragging {
  opacity: .42;
}
.case-kanban-card.is-resolved {
  opacity: .78;
}

/* ── Workflow Board drag & drop (Trello-like) ── */
.case-card-grip {
  cursor: grab;
}
.case-kanban-card[data-case-draggable="true"] {
  touch-action: pan-y;   /* let the board own horizontal drags on touch */
}
/* Original card while its clone is being dragged: removed from flow so only the
   placeholder reserves space (no lingering gap at the origin during reorder). */
.case-kanban-card.is-dragging-source {
  display: none;
}
/* Prevent accidental text selection / native image drag mid-drag */
body.case-drag-active {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
body.case-drag-active .case-card-grip { cursor: grabbing; }
/* Drop-slot indicator that neighbours reflow around */
.case-drag-placeholder {
  border: 2px dashed var(--blue);
  border-radius: var(--r2);
  background: color-mix(in srgb, var(--blue-lt) 55%, transparent);
  margin: 0 0 8px 0;
  box-sizing: border-box;
  transition: height var(--dur);
}
/* Floating clone that follows the pointer with physics */
.case-drag-clone {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12000;
  margin: 0;
  pointer-events: none;
  will-change: transform;
  cursor: grabbing;
  box-shadow: 0 18px 40px rgba(17,24,39,.28), 0 6px 14px rgba(17,24,39,.18);
  border-color: var(--blue-bd);
  transform-origin: center center;
}
.case-drag-clone.is-dropping {
  transition: transform .16s cubic-bezier(.2,0,0,1);
}
.case-drag-clone .case-card-menu { display: none; }
[data-theme="dark"] .case-drag-clone {
  box-shadow: 0 20px 46px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.4);
}
@media (prefers-reduced-motion: reduce) {
  .case-drag-clone.is-dropping,
  .case-drag-placeholder { transition: none; }
}
.case-card-click {
  min-width: 0;
  padding: 9px 31px 9px 10px;
  cursor: pointer;
  outline: none;
}
.case-card-click:focus-visible {
  border-radius: var(--r2);
  box-shadow: 0 0 0 3px var(--blue-lt);
}
.case-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}
.case-card-number {
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
}
.case-card-topline {
  --case-topline-accent: var(--tx3);
  display: inline-flex;
  min-width: 0;
  min-height: 16px;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--case-topline-accent) 16%, var(--bd1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--case-topline-accent) 7%, var(--s2));
  color: color-mix(in srgb, var(--case-topline-accent) 78%, var(--tx2));
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
.case-card-topline-dot {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: var(--case-topline-accent);
}
.case-card-topline.is-critical {
  --case-topline-accent: var(--red);
}
.case-card-topline.is-high {
  --case-topline-accent: var(--amber);
}
.case-card-topline.is-medium {
  --case-topline-accent: var(--purple);
}
.case-card-topline.is-normal {
  --case-topline-accent: var(--tx3);
}
.case-card-topline.is-resolved {
  --case-topline-accent: var(--green);
}
.case-card-grip {
  width: 13px;
  height: 13px;
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--dur);
}
.case-kanban-card:hover .case-card-grip {
  opacity: .7;
}
.case-kanban-card h3 {
  margin: 3px 0 7px;
  color: var(--tx1);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.case-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.case-card-badges .badge {
  min-height: 18px;
  padding: 1px 5px;
  font-size: 8px;
}
.case-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  color: var(--tx3);
  font-size: 9px;
}
.case-card-meta span,
.case-card-signals span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.case-card-meta span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-card-meta svg,
.case-card-signals svg {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}
.case-card-due {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--bd1);
  font-size: 9px;
}
.case-card-due > span {
  color: var(--tx4);
}
.case-card-due > strong {
  overflow: hidden;
  color: var(--tx2);
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-card-due > em {
  grid-column: 1 / -1;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 600;
}
.case-card-due > em.is-overdue {
  color: var(--red);
}
.case-card-signals {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 8.5px;
}
.case-card-menu {
  position: absolute;
  top: 7px;
  right: 6px;
  z-index: 6;
}
.case-card-menu > summary {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--tx4);
  cursor: pointer;
  list-style: none;
}
.case-card-menu > summary::-webkit-details-marker {
  display: none;
}
.case-card-menu > summary:hover,
.case-card-menu[open] > summary {
  background: var(--s3);
  color: var(--tx1);
}
.case-card-menu > summary svg {
  width: 12px;
  height: 12px;
}
.case-card-popover {
  position: fixed;
  z-index: 12000;
  width: 190px;
  max-height: min(360px, calc(100vh - 24px));
  display: none;
  gap: 2px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  background: var(--s1);
  box-shadow: var(--shadow-lg);
}
.case-card-menu[open] .case-card-popover {
  display: grid;
}
.case-card-popover button {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 4px;
  color: var(--tx2);
  font-size: 10.5px;
  text-align: left;
}
.case-card-popover button:hover {
  background: var(--s3);
  color: var(--tx1);
}
.case-card-popover button.is-danger {
  color: var(--red);
}
.case-card-popover button.is-danger:hover {
  background: var(--red-lt);
}
.case-card-popover button svg {
  width: 12px;
  height: 12px;
}
.case-table-view[hidden],
.case-board-view[hidden] {
  display: none;
}
.case-table-view {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.case-table-view .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.case-table-empty {
  flex: 1 1 auto;
  min-height: 220px;
}
.case-table-empty[hidden] {
  display: none;
}
.case-table-title {
  max-width: 340px;
}
.case-table-title > strong {
  display: block;
  overflow: hidden;
  color: var(--tx1);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-table-date {
  color: var(--tx2);
  white-space: nowrap;
}
#caseTicketModal {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
#caseTicketModal .modal-ticket {
  width: min(720px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r4) 0 0 var(--r4);
  animation: caseDrawerIn .2s var(--ease);
}
#caseTicketModal .case-ticket-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#caseTicketModal .case-ticket-actions {
  flex: 0 0 auto;
  border-radius: 0;
}
.case-ticket-action-buttons {
  flex-wrap: wrap;
}
.case-ticket-status-btn {
  min-width: 0;
}
.case-ticket-log-item strong {
  color: var(--tx2);
  font-size: inherit;
}
@keyframes caseDrawerIn {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 1180px) {
  .case-toolbar {
    grid-template-columns: 1fr;
  }
  .case-toolbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .case-search-form {
    width: min(420px, 100%);
    flex: 1 1 280px;
  }
}
@media (max-width: 760px) {
  .case-page-head {
    align-items: flex-start;
  }
  .case-queue-health {
    display: none;
  }
  .case-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .case-search-form {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .case-sort-form {
    grid-template-columns: 120px;
  }
  .case-sort-form > label {
    display: none;
  }
  .case-sort-form .tracs-select {
    width: 120px;
  }
  .case-toolbar-actions .toolbar-add-btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .case-kanban {
    grid-template-columns: repeat(5, minmax(268px, 84vw));
    min-width: 0;
  }
  #caseTicketModal .modal-ticket {
    width: 100vw;
    border-radius: 0;
  }
  .case-ticket-action-buttons {
    justify-content: stretch;
  }
  .case-ticket-action-buttons .btn {
    flex: 1 1 120px;
  }
}
@media (max-width: 480px) {
  .case-view-toggle button {
    padding: 0 7px;
  }
  .case-view-toggle button span {
    display: none;
  }
}

/* Server Health & Logs */
.server-health-page {
  display: grid;
  gap: var(--sp-4);
}

.server-health-actions,
.server-log-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.server-health-actions {
  margin-left: auto;
}

.server-health-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
}

.server-health-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--bd1);
  border-radius: var(--r);
  background: var(--s1);
}

.server-health-card.warning { border-color: var(--amber-bd); }
.server-health-card.critical { border-color: var(--red-bd); }
.server-health-card-billing {
  grid-column: -2 / -1;
  grid-row: 1;
}

.server-health-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--tx2);
  font-size: 11px;
  font-weight: 700;
}
.server-health-card-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.server-health-card > strong {
  display: block;
  margin-top: 12px;
  color: var(--tx1);
  font-size: 20px;
  line-height: 1.1;
}

.server-health-card > small {
  display: block;
  margin-top: 5px;
  color: var(--tx3);
  font-size: 10.5px;
}

.server-health-progress {
  height: 6px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--s3);
}

.server-health-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.server-health-card.warning .server-health-progress > span { background: var(--amber); }
.server-health-card.critical .server-health-progress > span { background: var(--red); }

.server-detail-list {
  display: grid;
}

.server-detail-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 14px;
  border-top: 1px solid var(--bd1);
}

.server-detail-list > div:first-child { border-top: 0; }
.server-detail-list span { color: var(--tx3); font-size: 11px; }
.server-detail-list strong { color: var(--tx1); font-size: 11.5px; text-align: right; }

.server-recommendations {
  display: grid;
  gap: var(--sp-2);
  padding: 12px 14px;
}

.server-recommendation {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--amber-bd);
  border-radius: var(--r-sm);
  background: var(--amber-lt);
  color: var(--tx2);
  font-size: 11px;
}

.server-recommendation.critical {
  border-color: var(--red-bd);
  background: var(--red-lt);
}

.server-log-scroll {
  max-height: 420px;
  overflow-y: auto;
}

.server-log-summary {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 14px;
  border-top: 1px solid var(--bd1);
  background: var(--s1);
}
.server-log-summary button.badge {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  cursor: pointer;
  transition: box-shadow .15s ease;
}
.server-log-summary button.badge.is-active-filter {
  box-shadow: 0 0 0 2px var(--tx1);
}
.server-log-list { display: grid; }

.server-log-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  padding: 11px 14px;
  border-top: 1px solid var(--bd1);
}

.server-log-row strong {
  color: var(--tx3);
  font-size: 10px;
}

.server-log-row p {
  margin: 4px 0 0;
  color: var(--tx2);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.server-health-error {
  grid-column: 1 / -1;
  padding: 16px;
  color: var(--red);
}

.server-insights {
  display: grid;
  gap: var(--sp-3);
  padding: 12px 14px;
}

.server-insight-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--bd1);
  border-radius: var(--r);
  background: var(--s1);
}
.server-insight-section.warning {
  border-color: var(--amber-bd);
}
.server-insight-section.warning .server-insight-section-head > span:first-child i {
  color: var(--amber);
}
.server-insight-section.critical {
  border-color: var(--red-bd);
}
.server-insight-section.critical .server-insight-section-head > span:first-child i {
  color: var(--red);
}
.server-insight-section.reserved {
  border-style: dashed;
  opacity: .75;
}
.server-insight-section.reserved .server-insight-section-head {
  color: var(--tx3);
}

.server-insight-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 10px;
  color: var(--tx2);
  font-size: 11px;
  font-weight: 700;
}
.server-insight-section-head > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.server-insight-section .server-recommendations,
.server-insight-section .server-detail-list {
  padding: 0;
}

.server-insight-list { display: grid; gap: 6px; }
.server-insight-list p {
  margin: 0;
  color: var(--tx2);
  font-size: 11.5px;
  line-height: 1.4;
}

.server-insight-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--tx2);
  font-size: 11.5px;
}
.server-insight-empty i { color: var(--green); flex-shrink: 0; }

.server-insight-subgroup {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bd1);
}
.server-insight-subgroup-title {
  display: block;
  margin-bottom: 4px;
  color: var(--tx3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.server-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.server-insight-skeleton-line {
  height: 14px;
  margin-bottom: 8px;
  border-radius: var(--r-sm);
}
.server-insight-skeleton-line:last-child { margin-bottom: 0; width: 70%; }

@media (max-width: 1180px) {
  .server-health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .server-health-grid { grid-template-columns: 1fr; }
  .server-health-card-billing { grid-column: auto; grid-row: auto; }
  .server-health-actions { justify-content: flex-start; margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .modal-ticket {
    max-width: 96vw;
  }
  .case-ticket-head {
    padding: 14px;
  }
  .case-ticket-titleblock h2 {
    font-size: 15px;
  }
  .case-ticket-summary,
  .case-ticket-content {
    grid-template-columns: 1fr;
  }
  .case-ticket-section-main {
    min-height: 0;
  }
  .case-ticket-action-note {
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-scroll,
  .ticker-item.holiday::before,
  .tm-feed-item.type-holiday::before,
  .tm-reminder-list-item.type-holiday::before {
    animation: none;
  }

  .case-ticket-track-sweep,
  .case-ticket-step.is-current .case-ticket-dot,
  .case-ticket-step.is-current .case-ticket-dot::after {
    animation: none;
  }
}
.shift-group-list {
  display: grid;
  gap: 10px;
  padding: 10px;
}
.shift-report-group {
  overflow: hidden;
  border-radius: var(--r2);
  background: var(--s2);
}
.shift-report-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--bd1);
}
.shift-report-group-title {
  color: var(--tx1);
  font-size: 13px;
  font-weight: 800;
}
.shift-report-group-agents,
.shift-report-submit {
  margin-top: 2px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9.5px;
}
.shift-report-group-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.shift-report-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(126px, auto) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 72%, transparent);
}
.shift-report-item:last-child { border-bottom: 0 }
.shift-report-item:hover { background: var(--s3) }
.shift-report-item-main { min-width: 0 }
.shift-report-item-title {
  overflow: hidden;
  color: var(--tx1);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shift-report-item[data-status="resolved"] .shift-report-item-title {
  color: var(--tx3);
}
.shift-report-item[data-status="resolved"] {
  opacity: .82;
}
.shift-report-item-main p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--tx3);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shift-resolution-line {
  color: #3f8f5b !important;
}
.shift-report-item-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.shift-report-submit {
  flex-basis: 100%;
  text-align: right;
}
.shift-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.shift-photo-thumb {
  width: 72px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--s1);
}
.shift-photo-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.shift-summary-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--page-section-gap);
  margin-bottom: 0;
}
.shift-summary-status-card.is-muted {
  background: color-mix(in srgb, var(--s2) 78%, var(--green-lt));
}
.shift-summary-status-list {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
}
.shift-summary-status-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.shift-status-lane {
  padding: 4px 0;
}
.shift-status-lane-title {
  padding: 4px 12px 2px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.shift-status-lane.is-resolved .shift-item {
  opacity: .82;
}
.shift-item.on-hold .shift-text {
  color: var(--tx2);
}
.case-image-modal {
  z-index: 13000;
  padding: 18px;
}
.case-image-frame {
  width: min(1100px, 96vw);
  height: min(760px, 92vh);
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: var(--r4);
  box-shadow: 0 18px 60px rgba(0,0,0,.24);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.case-image-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bd1);
  background: var(--s2);
}
.case-image-title {
  min-width: 0;
  color: var(--tx1);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-image-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.case-image-frame img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: var(--s3);
}
.btn.is-loading,
.btn-login.is-loading {
  position: relative;
  cursor: wait;
  opacity: .76;
}
.btn.is-loading::after,
.btn-login.is-loading::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  margin-left: 2px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tracs-button-spin .7s linear infinite;
}
.btn-login.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.btn[aria-busy="true"],
.btn-login[aria-busy="true"] {
  pointer-events: none;
}
.btn-icon.is-loading-icon > * {
  opacity: 0;
}
.btn-icon.is-loading-icon::after {
  position: absolute;
  margin: 0;
}
@keyframes tracs-button-spin {
  to { transform: rotate(360deg) }
}

/* ══════════════════════════════════════
   TOASTS
══════════════════════════════════════ */

.toast-dock {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 30000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  pointer-events: none;
}
.toast-dock--top-center,
.toast-dock--center {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.toast-dock--center {
  top: 50%;
  transform: translate(-50%, -50%);
}
.toast-dock--bottom-right {
  top: auto;
  bottom: 16px;
}
.toast-dock--modal {
  z-index: 13000;
}
.toast-dock--modal-center {
  position: absolute;
  top: var(--toast-modal-top, 12px);
  right: auto;
  left: var(--toast-modal-left, 50%);
  width: min(var(--toast-modal-max-width, 380px), calc(100% - 28px));
  max-width: var(--toast-modal-max-width, 380px);
  max-height: min(42vh, 360px);
  transform: translate(-50%, -100%);
  overflow: visible;
}
.toast-dock--modal-center.is-inside-modal {
  transform: translateX(-50%);
}
.toast-dock--modal-top-right {
  position: absolute;
  top: var(--toast-modal-top, 12px);
  right: var(--toast-modal-right, 12px);
  left: auto;
  width: min(var(--toast-modal-max-width, 380px), calc(100% - 28px));
  max-width: var(--toast-modal-max-width, 380px);
  max-height: min(42vh, 360px);
  transform: translateY(-100%);
  overflow: visible;
}
.toast-dock--modal-top-right.is-inside-modal {
  transform: none;
}
.toast-inline-host {
  position: relative;
}
.toast-dock--inline {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 120;
  width: min(360px, calc(100% - 24px));
  max-height: calc(100% - 24px);
}
.toast {
  --toast-accent: var(--blue);
  --toast-accent-lt: var(--blue-lt);
  --toast-accent-bd: var(--blue-bd);
  --toast-surface: color-mix(in srgb, var(--s1) 96%, var(--toast-accent) 4%);
  --toast-border-color: color-mix(in srgb, var(--bd2) 88%, var(--toast-accent) 12%);
  --toast-title-color: #172033;
  --toast-message-color: #334155;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 248px;
  min-height: 44px;
  width: 100%;
  max-width: min(368px, calc(100vw - 32px));
  padding: 9px 10px;
  border: 1px solid var(--toast-border-color);
  border-left-width: 1px;
  border-radius: 7px;
  background: var(--toast-surface);
  font-size: 12px;
  pointer-events: all;
  box-shadow:
    0 12px 30px rgba(15,23,42,.16),
    0 1px 2px rgba(15,23,42,.08),
    0 1px 0 rgba(255,255,255,.42) inset;
  animation: toast-in-right .28s var(--ease) both;
  overflow: hidden;
  will-change: transform, opacity;
}
.toast::before {
  content: none !important;
}
.toast--modal,
.toast-container--modal .toast {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.toast.is-critical {
  --toast-surface: color-mix(in srgb, var(--s1) 93%, var(--toast-accent) 7%);
  border-color: color-mix(in srgb, var(--toast-accent) 34%, var(--bd2));
  box-shadow:
    0 14px 34px rgba(15,23,42,.2),
    0 1px 2px rgba(15,23,42,.1);
}

[data-theme="dark"] .toast.is-critical {
  --toast-surface: color-mix(in srgb, var(--s2) 91%, var(--toast-accent) 9%);
  border-color: color-mix(in srgb, var(--toast-accent) 32%, var(--bd3));
}

.toast.success { --toast-accent: var(--green); --toast-accent-lt: var(--green-lt); --toast-accent-bd: var(--green-bd) }
.toast.error { --toast-accent: var(--red); --toast-accent-lt: var(--red-lt); --toast-accent-bd: var(--red-bd) }
.toast.info { --toast-accent: var(--blue); --toast-accent-lt: var(--blue-lt); --toast-accent-bd: var(--blue-bd) }
.toast.warning { --toast-accent: var(--amber); --toast-accent-lt: var(--amber-lt); --toast-accent-bd: var(--amber-bd) }

.toast.is-leaving {
  pointer-events: none;
  animation: toast-fade-right .34s cubic-bezier(.4, 0, .2, 1) both;
}

.toast-radar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  color: var(--toast-accent);
  border: 1px solid color-mix(in srgb, var(--toast-accent) 24%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--toast-accent) 10%, transparent);
}

.toast-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.toast-title {
  color: var(--toast-title-color);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
}

.toast-icon {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.toast-msg {
  color: var(--toast-message-color);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.toast-close {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--toast-message-color);
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}

.toast-close:hover,
.toast-close:focus-visible {
  background: var(--s3);
  border-color: var(--bd2);
  color: var(--toast-title-color);
  outline: none;
}

@keyframes toast-in-right {
  from { opacity: 0; transform: translateX(16px) }
  to { opacity: 1; transform: translateX(0) }
}

@keyframes toast-fade-right {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(88px) scale(.98);
  }
}

.toast-dock--top-center .toast,
.toast-dock--center .toast,
.toast-dock--modal-center .toast {
  animation-name: toast-in-center;
}
.toast-dock--modal-top-right .toast {
  animation-name: toast-in-right;
}
.toast-dock--top-center .toast.is-leaving,
.toast-dock--center .toast.is-leaving,
.toast-dock--modal-center .toast.is-leaving {
  animation-name: toast-fade-center;
}
.toast-dock--modal-top-right .toast.is-leaving {
  animation-name: toast-fade-right;
}
@keyframes toast-in-center {
  from { opacity: 0; transform: translateY(-12px) scale(.98) }
  to { opacity: 1; transform: translateY(0) scale(1) }
}
@keyframes toast-fade-center {
  from { opacity: 1; transform: translateY(0) scale(1) }
  to { opacity: 0; transform: translateY(-10px) scale(.98) }
}
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-leaving,
  .toast-dock--top-center .toast,
  .toast-dock--center .toast,
  .toast-dock--modal-center .toast {
    animation: none;
  }
  .toast-radar { animation: none }
}

.is-lazy-pending,
.is-lazy-loading {
  position: relative;
  min-height: 84px;
  overflow: hidden;
}
.is-lazy-pending::after,
.is-lazy-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.36) 42%, transparent 64%),
    color-mix(in srgb, var(--s2) 78%, transparent);
  background-size: 220% 100%, 100% 100%;
  animation: tracs-skeleton-sweep 1.35s ease-in-out infinite;
  pointer-events: none;
}
[data-theme="dark"] .is-lazy-pending::after,
[data-theme="dark"] .is-lazy-loading::after {
  background:
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 42%, transparent 64%),
    color-mix(in srgb, var(--s2) 76%, transparent);
  background-size: 220% 100%, 100% 100%;
}
@keyframes tracs-skeleton-sweep {
  from { background-position: 120% 0, 0 0 }
  to { background-position: -120% 0, 0 0 }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after,
  .btn-login.is-loading::after,
  .is-lazy-pending::after,
  .is-lazy-loading::after {
    animation-duration: 2.4s;
  }
}

.tracs-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15,20,30,.54);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: ov-in var(--dur) ease;
}

[data-theme="dark"] .tracs-dialog-overlay {
  background: rgba(0,0,0,.74);
}

.tracs-dialog-overlay.hidden {
  display: none;
}

.tracs-dialog {
  width: min(420px, 100%);
  max-height: min(92vh, 620px);
  overflow: hidden;
  border: 1px solid var(--bd2);
  border-radius: var(--r4);
  background: var(--s1);
  box-shadow: var(--shadow-lg), 0 0 48px rgba(59,130,246,.08);
  animation: m-in .2s var(--ease);
}

.tracs-dialog-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--bd1);
  background: var(--s2);
}

.tracs-dialog-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--blue-bd);
  border-radius: 8px;
  background: var(--blue-lt);
  color: var(--blue);
}

.tracs-dialog[data-type="success"] .tracs-dialog-icon {
  border-color: var(--green-bd);
  background: var(--green-lt);
  color: var(--green);
}

.tracs-dialog[data-type="error"] .tracs-dialog-icon {
  border-color: var(--red-bd);
  background: var(--red-lt);
  color: var(--red);
}

.tracs-dialog[data-type="warning"] .tracs-dialog-icon {
  border-color: var(--amber-bd);
  background: var(--amber-lt);
  color: var(--amber);
}

.tracs-dialog-heading {
  min-width: 0;
}

.tracs-dialog-title {
  color: var(--tx1);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.tracs-dialog-sub {
  margin-top: 2px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.35;
}

.tracs-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.tracs-dialog-message {
  margin: 0;
  color: var(--tx2);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.tracs-dialog-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tracs-dialog-field[hidden] {
  display: none;
}

.tracs-dialog-field .form-textarea {
  min-height: 86px;
}

.tracs-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--bd1);
  background: var(--s2);
}

@media (max-width: 560px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 10px;
  }

  .modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
  }

  .modal-head,
  .modal-body {
    padding-inline: 14px;
  }

  .modal-foot {
    flex-wrap: wrap;
    padding: 10px 14px;
  }

  .modal-foot .btn {
    flex: 1 1 120px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .toast-dock {
    right: 10px;
    left: 10px;
    top: 10px;
    width: auto;
  }

  .toast-dock--top-center {
    transform: none;
  }

  .toast-dock--center {
    top: 50%;
    transform: translateY(-50%);
  }

  .toast-dock--modal-center {
    right: auto;
    left: var(--toast-modal-left, 50%);
    top: var(--toast-modal-top, 12px);
    width: min(var(--toast-modal-max-width, 360px), calc(100% - 20px));
    max-width: var(--toast-modal-max-width, 360px);
    transform: translate(-50%, -100%);
  }

  .toast-dock--modal-center.is-inside-modal {
    transform: translateX(-50%);
  }

  .toast-dock--modal-top-right {
    right: max(10px, var(--toast-modal-right, 10px));
    left: auto;
    top: var(--toast-modal-top, 12px);
    width: min(var(--toast-modal-max-width, 360px), calc(100% - 20px));
    max-width: var(--toast-modal-max-width, 360px);
    transform: translateY(-100%);
  }

  .toast-dock--modal-top-right.is-inside-modal {
    transform: none;
  }

  .toast-dock--bottom-right {
    top: auto;
    bottom: 10px;
  }

  .toast {
    width: 100%;
    min-width: 0;
  }

  .tracs-dialog-overlay {
    align-items: flex-end;
    padding: 12px;
  }

  .tracs-dialog {
    width: 100%;
  }
}

/* ══════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════ */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 14px;
  text-align: center;
  min-width: 0;
}
.empty-ic { font-size: 20px; opacity: .2 }
.empty-t  { width: 100%; font-size: 11.5px; font-weight: 500; color: var(--tx3); text-align: center; overflow-wrap: break-word }
.empty-s  { width: 100%; font-size: 10.5px; color: var(--tx4); text-align: center; overflow-wrap: break-word }

.shift-handover-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.shift-handover-panel > .panel-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

.shift-handover-panel > .panel-head .panel-title {
  flex: 1 1 150px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.shift-handover-panel > .panel-head .panel-right {
  flex: 1 1 100%;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.shift-handover-panel > .panel-head .panel-meta {
  flex: 1 1 160px;
  min-width: 0;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.shift-handover-empty {
  flex: 1 1 auto;
  min-height: 120px;
}

/* ══════════════════════════════════════
   MISC / SHARED UTILITY
══════════════════════════════════════ */

.scroll-y { overflow-y: auto }
.hidden   { display: none !important }
.mono     { font-family: var(--mono) }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.flex1    { flex: 1; min-width: 0 }
.divider  { height: 1px; background: var(--bd1) }
@keyframes fadein { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.fadein { animation: fadein .2s var(--ease) }

/* Domain/Finance/Ticker-manager rows (other pages, unchanged) */
.domain-row { display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--bd1);transition:background var(--dur) }
.domain-row:last-child { border-bottom:none }
.domain-row:hover { background:var(--s3) }
.domain-row:hover .dom-acts { opacity:1 }
.dom-name { font-family:var(--mono);font-size:12px;font-weight:600;color:var(--tx1) }
.dom-reg  { font-size:10.5px;color:var(--tx3);margin-top:2px }
.dom-exp  { font-family:var(--mono);font-size:10.5px }
.dom-exp.active   { color:var(--green) }
.dom-exp.expiring { color:var(--amber) }
.dom-exp.expired  { color:var(--red) }
.dom-days { font-size:9.5px;color:var(--tx3);font-family:var(--mono);margin-top:2px }
.dom-acts { display:flex;gap:4px;opacity:0;transition:opacity var(--dur);flex-shrink:0 }
.pill        { font-size:8.5px;font-weight:700;padding:2px 5px;border-radius:var(--r);font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em }
.pill-green  { background:var(--green-lt);color:var(--green);border:1px solid var(--green-bd) }
.pill-red    { background:var(--red-lt);color:var(--red);border:1px solid var(--red-bd) }
.pill-blue   { background:var(--blue-lt);color:var(--blue);border:1px solid var(--blue-bd) }
.pill-amber  { background:var(--amber-lt);color:var(--amber);border:1px solid var(--amber-bd) }
.txn-row     { display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--bd1);transition:background var(--dur) }
.txn-row:last-child { border-bottom:none }
.txn-row:hover { background:var(--s3) }
.txn-row:hover .txn-acts { opacity:1 }
.txn-ic      { width:30px;height:30px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0 }
.txn-ic.in   { background:var(--green-lt) }
.txn-ic.out  { background:var(--red-lt) }
.txn-note    { font-size:12px;font-weight:500;color:var(--tx1) }
.txn-route   { font-size:9.5px;color:var(--tx3);margin-top:2px;font-family:var(--mono) }
.txn-amt     { font-family:var(--mono);font-size:12.5px;font-weight:700;text-align:right }
.txn-amt.in  { color:var(--green) }
.txn-amt.out { color:var(--red) }
.txn-date    { font-size:9.5px;color:var(--tx3);font-family:var(--mono);margin-top:2px;text-align:right }
.txn-acts    { display:flex;gap:4px;opacity:0;transition:opacity var(--dur);flex-shrink:0 }
.tmgr-row    { display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--bd1);transition:background var(--dur) }
.tmgr-row:last-child { border-bottom:none }
.tmgr-row:hover { background:var(--s3) }
.tmgr-text   { flex:1;font-size:10.5px;font-family:var(--mono);color:var(--tx2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.tmgr-type   { font-size:8px;font-weight:700;padding:2px 5px;border-radius:3px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0 }
.tmgr-type.critical { background:var(--red-lt);color:var(--red);border:1px solid var(--red-bd) }
.tmgr-type.urgent   { background:var(--amber-lt);color:var(--amber);border:1px solid var(--amber-bd) }
.tmgr-type.info     { background:var(--cyan-lt);color:var(--cyan);border:1px solid var(--cyan-bd) }
.tmgr-type.normal   { background:var(--s3);color:var(--tx3);border:1px solid var(--bd2) }

/* ── Login ── */
.login-shell { min-height:100vh;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);position:relative; padding: 24px 16px;}
.login-grid  { position:absolute;inset:0;background-image:linear-gradient(var(--bd1) 1px,transparent 1px),linear-gradient(90deg,var(--bd1) 1px,transparent 1px);background-size:40px 40px;opacity:.35;mask-image:radial-gradient(ellipse at center,black 20%,transparent 72%) }
.login-card  { position:relative;z-index:1;width:440px;max-width: 92vw; background:var(--s1);border:0;border-radius:var(--r4);overflow:hidden }
.login-accent { height:2px;background:linear-gradient(90deg,var(--blue),var(--purple)) }
.login-top   { padding: 28px 36px 18px;border-bottom:1px solid var(--bd1); text-align: center;}
/* ── Login Logo ───────────────────── */

.login-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:6px 0;
  text-align:center;
  margin-bottom:16px;
}

.login-logo img{
  height:22px;
  width: min(196px, 100%);
  display:block;
  object-fit: contain;
  object-position: center;
  opacity:.9;
  /* Light mode: convert white SVG to dark */
  filter: brightness(0);
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Dark mode: keep original white SVG */
[data-theme="dark"] .login-logo img{
  filter: none;
  opacity:.82;
}


.login-name  { font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em }
.login-tagline { font-size:9.5px;color:var(--tx3);font-family:var(--mono) }
.login-h     { font-size:16px;font-weight:600;letter-spacing:0 }
.login-p     { font-size:11px;color:var(--tx3);margin-top:3px }
.login-body  { padding:22px 36px 26px;display:flex;flex-direction:column;gap:16px }
.login-foot  { padding:14px 26px;border-top:1px solid var(--bd1);background:var(--s2);display:flex;align-items:center;justify-content:center;gap:5px }
.status-online { display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px;color:var(--tx3) }
.status-dot {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.status-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.4;
  animation: pulse-radar 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse-radar {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(3.5); opacity: 0; }
}
.err-box     { width:min(100%, 320px);align-self:center;background:var(--red-lt);border:1px solid var(--red-bd);border-radius:8px;padding:9px 12px;font-size:11.5px;line-height:1.35;color:var(--red);text-align:center;margin:0 auto 4px;box-shadow:0 8px 22px rgba(220,38,38,.08);display:flex;align-items:center;gap:6px;justify-content:center }
.err-box-icon{ flex:0 0 auto }
.success-box { width:min(100%, 320px);align-self:center;background:var(--green-lt);border:1px solid var(--green-bd);border-radius:8px;padding:9px 12px;font-size:11.5px;line-height:1.35;color:var(--green);text-align:center;margin:0 auto 4px;box-shadow:0 8px 22px rgba(22,163,74,.08) }
.login-help  { width:min(100%, 330px);align-self:center;color:var(--tx3);font-size:11px;line-height:1.45;text-align:center }
.login-captcha { border:1px solid var(--bd2);background:var(--s2);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:9px }
.login-captcha-title { font-size:11px;font-weight:700;color:var(--tx2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em }
.login-captcha .cf-turnstile { max-width:100%;overflow:hidden }
.login-shell > .toast-dock--login {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 2;
  width: min(440px, 92vw);
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transform: none;
  transition: max-height .36s cubic-bezier(.4,0,.2,1), opacity .26s ease, margin .36s cubic-bezier(.4,0,.2,1);
}
.login-shell > .toast-dock--login:has(.toast) {
  max-height: min(35vh, 240px);
  margin: 0 0 12px;
  opacity: 1;
}
.login-shell > .toast-dock--login .toast {
  min-width: 0;
  max-width: 100%;
}
.user-menu-logout { margin:0 }
.user-menu-logout button {
  appearance:none;
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.btn-login {
  width: 100%;
  padding: 13px;
  margin-top: 6px;

  background: var(--blue-lt);
  color: var(--blue-dk);

  border: 1px solid var(--blue-bd);
  border-radius: var(--r);

  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);

  cursor: pointer;

  opacity: 1;
  filter: saturate(1);

  box-shadow: 0 1px 2px rgba(37, 99, 235, .08);

  transition:
    background 160ms var(--ease),
    color 160ms var(--ease),
    border-color 160ms var(--ease),
    opacity 160ms var(--ease),
    transform 160ms var(--ease);
}
.btn-login:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--blue-lt) 82%, var(--s1));
  border-color: color-mix(in srgb, var(--blue-bd) 72%, var(--blue));
  transform: translateY(-1px);
}
.btn-login:disabled { opacity:.72;cursor:wait;transform:none }

.two-factor-shell { align-items:center }
.two-factor-card { width:500px }
.two-factor-card-compact { width:440px }
.two-factor-body { gap:18px }
.two-factor-verify-body { gap:14px;padding-bottom:24px }
.two-factor-alert { margin-bottom:0 }
.two-factor-copy { display:flex;flex-direction:column;gap:7px;text-align:center }
.two-factor-title { font-size:16px;font-weight:700;color:var(--tx1) }
.two-factor-copy p { margin:0;color:var(--tx3);font-size:12px;line-height:1.55 }
.two-factor-qr-wrap { display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:center;border:1px solid var(--bd2);border-radius:12px;background:var(--s2);padding:14px }
.two-factor-qr { display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--bd2);border-radius:10px;padding:10px;min-height:170px }
.two-factor-qr svg { width:148px;height:148px;display:block }
.two-factor-key { min-width:0;display:flex;flex-direction:column;gap:8px }
.two-factor-key span { font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tx3) }
.two-factor-key code { display:block;overflow-wrap:anywhere;line-height:1.55;color:var(--tx1);background:var(--s1);border:1px solid var(--bd2);border-radius:8px;padding:10px;font-family:var(--mono);font-size:12px }
.two-factor-form { display:flex;flex-direction:column;gap:14px }
.two-factor-verify-body .two-factor-form { gap:12px }
.two-factor-verify-body .btn-login { margin-top:0 }
.two-factor-code { text-align:center;font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:0;min-height:52px }
.two-factor-expiry { font-size:10.5px }

@media (max-width:620px) {
  .two-factor-card { width:min(500px, 94vw) }
  .two-factor-qr-wrap { grid-template-columns:1fr }
  .two-factor-qr { min-height:auto }
}

[data-theme="dark"] .btn-login {
  background: rgba(37, 99, 235, .1);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, .34);
  box-shadow: none;
}

[data-theme="dark"] .btn-login:hover {
  background: rgba(37, 99, 235, .16);
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, .45);
}

.btn-login.is-active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue-bd);

  opacity: 1;
  cursor: pointer;
  pointer-events: auto;

  position: relative;
  overflow: hidden;

  box-shadow: 0 6px 18px rgba(59,130,246,.18);

  transition:
    background 180ms var(--ease),
    box-shadow 180ms var(--ease),
    transform 180ms var(--ease);
}

[data-theme="light"] .btn-login.is-active {
  background: color-mix(in srgb, var(--blue-lt) 84%, var(--s1));
  color: var(--blue-dk);
  border-color: color-mix(in srgb, var(--blue-bd) 76%, var(--blue));
  box-shadow: 0 4px 14px rgba(37, 99, 235, .12);
}

[data-theme="dark"] .btn-login.is-active {
  background: #0f172a;
  color: #93c5fd;
  border-color: rgba(96, 165, 250, .42);
}


/* MILITARY RADAR SWEEP */
.btn-login.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  
  background: linear-gradient(to right, 
    transparent, 
    rgba(37, 99, 235, 0.05) 50%, 
    rgba(37, 99, 235, 0.3) 95%,
    var(--blue) 100%
  );
  
  border-right: 1px solid var(--blue);
  animation: radarSweep 2.35s cubic-bezier(.42, 0, .18, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes radarSweep {
  0% { left: -35%; }
  100% { left: 100%; }
}

/* loginGlow keyframes — see below (deduplicated) */

.btn-login-label {
  position: relative;
  z-index: 3;
}

/* BLUE RADAR DOTS (SYNCHRONIZED WITH SWEEP EDGE) */
.radar-dot {
  position: absolute;
  top: var(--dot-y);
  left: var(--dot-x);
  width: 3px;
  height: 3px;
  color: var(--blue);
  background: var(--blue);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
  box-shadow:
    0 0 3px currentColor,
    0 0 8px rgba(4, 206, 247, .86),
    0 0 14px rgba(37, 99, 235, .42);
  pointer-events: none;
  z-index: 2;
}

.dot-1 { --dot-x: 14%; --dot-y: 34%; --dot-delay: .438s; }
.dot-2 { --dot-x: 30%; --dot-y: 30%; --dot-delay: .585s; }
.dot-3 { --dot-x: 48%; --dot-y: 66%; --dot-delay: .701s; }
.dot-4 { --dot-x: 66%; --dot-y: 42%; --dot-delay: .813s; }
.dot-5 { --dot-x: 86%; --dot-y: 25%; --dot-delay: .962s; }

.btn-login.is-active .radar-dot {
  animation: radarDotPing 2.35s linear infinite;
  animation-delay: var(--dot-delay);
}

@keyframes radarDotPing {
  0% {
    opacity: .96;
    transform: translate(-50%, -50%) scale(.88);
    box-shadow:
      0 0 6px currentColor,
      0 0 12px rgba(4, 206, 247, .92),
      0 0 18px rgba(37, 99, 235, .56);
  }
  12% {
    opacity: .62;
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
      0 0 5px currentColor,
      0 0 11px rgba(4, 206, 247, .68),
      0 0 16px rgba(37, 99, 235, .4);
  }
  28% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.62);
    box-shadow: 0 0 3px currentColor;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.62);
    box-shadow: 0 0 3px currentColor;
  }
}

.btn-login.is-active:hover {
  transform: translateY(-1px);
}

.form-group {
  width: 100%;
  max-width: 100%;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width: 1024px) {
  :root {
    --dashboard-widget-gap: var(--gap);
    --dashboard-column-gap: var(--gap);
    --dashboard-widget-padding: var(--dashboard-widget-padding-compact);
  }
}

@media (max-width: 1400px) {
  .dash-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .dashboard-stat-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .dash-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .dashboard-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .case-stat-strip .stat-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .dash-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .dashboard-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .dashboard-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .col-left {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    overflow: visible;
  }
  .col-dashboard-tabs {
    grid-area: dashboard-tabs;
  }
  .dashboard-case-panel {
    flex: 0 0 auto;
  }
  .dashboard-case-list {
    flex: 0 1 auto;
    max-height: none;
    overflow: visible;
  }
  .dashboard-workspace {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr;
    grid-template-areas:
      "productivity"
      "dashboard-tabs"
      "dobby";
  }
  .task-monitoring-grid {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .84fr);
    height: 354px;
  }
  .tm-checklist-grid {
    grid-template-columns: minmax(0, 13fr) minmax(240px, 7fr);
  }
}

@media (max-width: 820px) {
  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .topbar-right {
    margin-left: auto;
  }
  .ops-marquee {
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-workspace {
    grid-template-columns: 1fr;
    grid-template-areas:
      "productivity"
      "dashboard-tabs"
      "dobby";
  }
  .col-right .panel {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .task-monitoring-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .82fr);
    grid-auto-rows: auto;
    height: 100%;
  }
  .tm-checklist-grid {
    grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
  }
  .tm-column {
    min-height: 0;
  }
  .tm-scroll {
    max-height: none;
  }
  .dashboard-activity-scroll {
    flex: 0 1 auto;
    max-height: 300px;
  }
}

@media (max-width: 700px) {
  .dashboard-case-panel,
  .dashboard-widget-tabs-panel {
    height: auto;
    max-height: none;
  }
  .dashboard-case-list {
    max-height: none;
    overflow: visible;
  }
  .task-monitoring-panel {
    height: auto;
    max-height: none;
  }
  .task-monitoring-viewport {
    overflow: visible;
  }
  .task-monitoring-pane {
    height: auto;
  }
  .task-monitoring-grid,
  .tm-checklist-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    height: auto;
  }
  .task-monitoring-panel .dashboard-checklist-scroll {
    max-height: 236px;
  }
  .tm-reminder-list {
    max-height: 190px;
  }
}

@media (max-width: 640px) {
  html, body { overflow: auto }
  .main { overflow: visible }
  .shell { height: auto; min-height: 100vh; min-height: 100svh }
  .body-row { flex-direction: column }
  .sidebar { width: 100%; height: 46px }
  /* position:relative (not static): keeps the same in-flow horizontal-bar
     layout, but static would make z-index inapplicable, dropping this
     whole subtree (including .user-menu's z-index:6000) to the "auto"
     paint tier -- where position:relative page content later in DOM order
     (e.g. .notif-bell-btn's badge) wins ties and paints over the profile
     dropdown. */
  .sidebar-flyout { position: relative; width: 100% !important; height: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid var(--bd1); box-shadow: none !important }
  .sidebar-logo { width: 46px; height: 100%; border-bottom: none; border-right: 1px solid var(--bd1) }
  /* flex-shrink stays default (1) with min-width:0 so this is the one that
     yields space and scrolls internally -- .sidebar-bottom below is
     flex-shrink:0 so the avatar/profile menu is never pushed off-screen. */
  .sidebar-nav { flex: 1; min-width: 0; flex-direction: row; align-items: center; padding: 0 var(--sp-2); overflow-x: auto; overflow-y: visible }
  .sidebar-nav::-webkit-scrollbar { display: none }
  .nav-group { flex-direction: row; align-items: center; flex-shrink: 0 }
  .nav-group-label, .nav-favorites, .nav-pin, .nav-chevron { display: none !important }
  .nav-item-wrap { width: auto; flex-shrink: 0 }
  .nav-item, .user-menu-row { width: 36px; height: 36px; margin: 0 2px; padding: 0; gap: 0; justify-content: center; border-radius: var(--r); flex-shrink: 0 }
  .nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    width: auto; height: 2px;
    background: var(--blue);
    border-radius: 0;
  }
  .nav-label { display: none }
  .nav-submenu { padding-left: 10px }
  .sidebar-bottom { width: auto; flex-direction: row; flex-shrink: 0; align-items: center; border-top: none; border-left: 1px solid var(--bd1); padding: 0 var(--sp-2) }
  .dashboard-stat-strip { grid-template-columns: 1fr }
  .stat-group-grid,
  .case-stat-strip .stat-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-grid { grid-template-columns: 1fr }
  .dashboard-workspace {
    grid-template-columns: 1fr;
    grid-template-areas:
      "productivity"
      "dashboard-tabs"
      "dobby";
  }
  .col-right { flex-direction: column }
  .task-monitoring-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .task-monitoring-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .task-monitoring-title {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .task-monitoring-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .task-monitoring-counters {
    width: 100%;
    overflow-x: auto;
  }
  .task-monitoring-tab {
    flex: 0 0 auto;
  }
}

@media (max-width: 420px) {
  .stat-group-grid,
  .case-stat-strip .stat-group-grid {
    grid-template-columns: 1fr;
  }
  .stat-card {
    min-height: 98px;
    padding: 10px;
  }
  .stat-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
  }
  .stat-num {
    font-size: 24px;
  }
  .stat-trend {
    min-height: 22px;
  }
}

@media (hover: none), (pointer: coarse) {
  .btn-add-reveal {
    opacity: 1;
    filter: none;
  }
  .btn-add-reveal .btn-add-label {
    max-width: 12rem;
    margin-left: 4px;
    opacity: 1;
    transform: translateX(0);
  }
  .task-acts,
  .rem-acts,
  .ops-edit-btn {
    opacity: 1;
    pointer-events: auto;
  }
  .btn-icon {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }
  .btn-sm {
    min-height: 34px;
  }
  .rem-check,
  .agenda-check,
  .action-check {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    background-size: 12px 12px;
  }
  .notif-bell-btn {
    width: 40px;
    height: 40px;
  }
  .notif-permission-callout {
    align-items: flex-start;
    flex-direction: column;
  }
}

.quick-time-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}

.quick-time-btn{
  height:26px;
  padding:0 9px;
  border-radius:6px;
  border:1px solid var(--bd2);
  background:var(--s2);
  color:var(--tx2);
  font-size:10.5px;
  font-weight:600;
  cursor:pointer;
  transition:.15s ease;
}

.quick-time-btn:hover{
  background:var(--blue-lt);
  border-color:var(--blue-bd);
  color:var(--blue);
}

/* ═══════════════════════════════════════════════
   SHARED DATA TABLE SYSTEM
   Finance + Domain unified table base
═══════════════════════════════════════════════ */

.tracs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  width: 100%;
}
.tracs-table-wrap:has(.row-action-menu[open]) {
  overflow: visible;
}
/* .table-wrap is used by shift-reports.php, mom.php, and other pages.
   display:block + width:100% prevents the div from shrink-wrapping to the
   table's computed width, which under border-collapse can be sub-pixel
   narrower than the panel — causing the last td's border-bottom to appear
   as a stub line instead of a full-width row divider. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  width: 100%;
}

.table-wrap:has(.row-action-menu[open]) {
  overflow: visible;
}

.tracs-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

/* Actions column: position:relative + padding-right set below alongside bt-table/dt-table */
.tracs-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx3);
  font-family: var(--mono);
  background: var(--s2);
  border-bottom: 0;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tracs-table th:first-child { padding-left: 14px; border-radius: var(--r) 0 0 0 }
.tracs-table th:last-child  { border-radius: 0 var(--r) 0 0 }
.tracs-table td {
  padding: 10px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--bd1) 62%, transparent);
  vertical-align: middle;
  color: var(--tx2);
}
.tracs-table td:first-child { padding-left: 14px }
.tracs-table tr:last-child td { border-bottom: none }
.tracs-table tbody tr { transition: background var(--dur) var(--ease) }
.tracs-table tbody tr:hover { background: var(--s3) }
.tracs-row-live-updated {
  animation: tracs-row-live-updated 1.25s var(--ease);
}
.tracs-row-removing {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
@keyframes tracs-row-live-updated {
  0% { background: color-mix(in srgb, var(--green-lt) 82%, var(--s1)); }
  100% { background: transparent; }
}
.tracs-table tbody tr.case-click-row {
  cursor: pointer;
}
.tracs-table tbody tr.case-click-row:focus-visible {
  outline: 2px solid var(--blue-bd);
  outline-offset: -2px;
  background: var(--blue-lt);
}
.tracs-table tbody tr:has(.row-action-menu[open]),
.bt-table tbody tr:has(.row-action-menu[open]),
.dt-table tbody tr:has(.row-action-menu[open]) {
  position: relative;
  z-index: 180;
}
.tracs-table tbody tr:hover .tracs-acts { opacity: 1 }

.tracs-table tbody tr:focus-within .tracs-acts,
.bt-table tbody tr:focus-within .bt-acts,
.dt-table tbody tr:focus-within .dt-acts {
  opacity: 1;
}

.tracs-acts, .bt-acts, .dt-acts {
  position: relative;
}

/* Anchor the action trigger to the far-right inside the last visible cell.
   We position the menu absolutely so it visually sits at the row edge
   without adding a dedicated actions column. Add a small right padding
   to the last cell to avoid overlap with content but keep it minimal. */
.bt-table td:last-child,
.dt-table td:last-child,
.tracs-table td:last-child {
  position: relative;
  padding-right: calc(var(--sp-3) + 36px);
}

/* ── Non-MOM row action menus ─────────────────────────────────────────
   Rules scoped to bt-table / dt-table / tracs-table, explicitly
   EXCLUDING .mom-history-panel so MOM table is never affected.
   ─────────────────────────────────────────────────────────────────── */

.row-action-menu {
  position: absolute;
  top: 50%;
  right: var(--panel-padding);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 40;
  /* Trigger is always visible — no hover-hide */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.row-action-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
  isolation: isolate;
}

.row-action-group .row-action-menu {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  z-index: 1;
}

.row-action-menu[open] {
  z-index: 220;
}

/* MOM overrides its own row-action-menu via mom-styles.css — don't touch it here */

.row-action-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
}

.row-action-menu summary::-webkit-details-marker {
  display: none;
}

.row-action-menu summary.btn {
  color: var(--tx3);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.row-action-menu summary.btn:hover,
.row-action-menu[open] summary.btn {
  color: var(--blue-dk);
  background: var(--blue-lt);
  border-color: var(--blue-bd);
  opacity: 1;
}

/* Scoped hide rules only for non-MOM tables that use absolute-positioned menus */
:not(.mom-history-panel) .bt-table tbody tr td:last-child > .row-action-menu,
:not(.mom-history-panel) .dt-table tbody tr td:last-child > .row-action-menu,
:not(.mom-history-panel) .tracs-table tbody tr td:last-child > .row-action-menu {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.row-action-popover {
  display: grid;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 260;
  min-width: 150px;
  padding: 6px;
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  box-shadow: 0 14px 28px rgba(17,24,39,.12);
  gap: 4px;
  /* Hidden until [open] — use opacity + visibility so transition works */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

.row-action-group .row-action-popover {
  right: 0;
}

.row-action-menu[open] .row-action-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 0s;
}
.row-action-menu:not([open]) .row-action-popover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Popover items must never be hidden, absolute, or transformed */
.row-action-popover .btn,
.row-action-popover button,
.row-action-popover a {
  position: static;
  width: 100%;
  justify-content: flex-start;
  padding-left: 10px;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Aliases for backward compatibility */
.bt-table-wrap, .dt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
.bt-table, .dt-table { width: 100%; border-collapse: collapse; font-size: 12px }
.bt-table th, .dt-table th {
  padding: 8px 10px; text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tx3);
  font-family: var(--mono); background: var(--s2); border-bottom: 1px solid var(--bd2);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.bt-table th:first-child, .dt-table th:first-child { padding-left: 14px; border-radius: var(--r) 0 0 0 }
.bt-table th:last-child,  .dt-table th:last-child  { border-radius: 0 var(--r) 0 0 }
.bt-table td, .dt-table td {
  padding: 10px 10px; border-bottom: 1px solid var(--bd1);
  vertical-align: middle; color: var(--tx2);
}
.bt-table td:first-child, .dt-table td:first-child { padding-left: 14px }
.bt-table tr:last-child td, .dt-table tr:last-child td { border-bottom: none }
.bt-table tbody tr, .dt-table tbody tr { transition: background var(--dur) var(--ease) }
.bt-table tbody tr:hover, .dt-table tbody tr:hover { background: var(--s3) }
.bt-table tbody tr:hover .bt-acts, .dt-table tbody tr:hover .dt-acts { opacity: 1 }

/* Shared row number */
.tracs-rownum, .bt-rownum, .dt-rownum { font-family: var(--mono); font-size: 10px; color: var(--tx4) }

/* Shared actions column — white-space:nowrap prevents buttons from wrapping
   inside the cell, which would make the cell taller than its border-bottom
   position and cause the border to appear as a floating stub line */
.tracs-acts, .bt-acts, .dt-acts { display: flex; gap: 4px; opacity: 0; transition: opacity var(--dur); white-space: nowrap; flex-wrap: nowrap }

/* ═══════════════════════════════════════════════
   SHARED INLINE ENTRY FORM
   (Quick-add forms in table panels)
═══════════════════════════════════════════════ */

.tracs-inline-form, .bt-inline-form, .dt-inline-form, .fb-inline-form {
  border-bottom: 1px solid var(--bd2);
  background: var(--s2);
  padding: 10px 14px 12px;
}
.tracs-inline-label, .bt-inline-label, .dt-inline-label, .fb-inline-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx3);
  font-family: var(--mono);
  margin-bottom: 8px;
}
.tracs-inline-grid, .fb-inline-grid {
  display: grid;
  gap: 6px;
  align-items: end;
}
.bt-inline-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 8px;
  align-items: end;
}
.bt-field-email { grid-column: span 4 }
.bt-field-uid { grid-column: span 4 }
.bt-field-type { grid-column: span 4 }
.bt-field-amount { grid-column: span 2 }
.bt-field-status { grid-column: span 2 }
.bt-field-ticket { grid-column: span 3 }
.bt-field-datetime { grid-column: span 3 }
.bt-inline-action { grid-column: span 2 }
.bt-datetime-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(84px, .85fr);
  gap: 6px;
}

.dt-inline-grid {
  display: grid;
  grid-template-columns: 2fr 1.6fr 1fr 1fr 1.6fr 1fr;
  gap: 6px;
  align-items: end;
}
.fb-inline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 12px;
  align-items: start;
}
.fb-inline-grid-row-2 {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 6px;
  margin-top: 8px;
  align-items: end;
}

.tracs-inline-group, .bt-inline-group, .dt-inline-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tracs-inline-lbl, .bt-inline-lbl, .dt-inline-lbl, .fb-inline-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--tx3);
  font-family: var(--mono);
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tracs-inline-input, .bt-inline-input, .dt-inline-input, .fb-inline-input {
  height: 30px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}
.tracs-inline-action, .bt-inline-action, .dt-inline-action, .fb-inline-action { flex-shrink: 0 }

.fb-field-reference { grid-column: 1; grid-row: 1; }
.fb-field-email { grid-column: 2; grid-row: 1; }
.fb-field-resolution { grid-column: 3; grid-row: 1; align-self: start; }
.fb-field-service { grid-column: 1; grid-row: 2; }
.fb-field-reason { grid-column: 2; grid-row: 2; }
.fb-field-details { grid-column: 3; grid-row: 2; align-self: start; }
.fb-inline-action { grid-column: 3; grid-row: 2; align-self: end; }
.fb-field-resolution,
.fb-field-details,
.fb-field-resolution .form-select,
.fb-field-resolution .tracs-select,
.fb-field-resolution .tracs-select-trigger,
.fb-field-details .fb-details-input {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
.fb-save-btn {
  height: 30px;
  width: 100%;
  padding: 0 12px;
  justify-content: center;
  font-size: 11px;
  white-space: nowrap;
}

/* ── Auto-Save Status Badge ──────────────────────────────────────────────── */
.cf-autosave-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .03em;
  padding: 2px 8px 2px 6px;
  border-radius: 20px;
  margin-left: 8px;
  vertical-align: middle;
  transition: opacity .25s ease, background .2s;
  user-select: none;
  pointer-events: none;
  min-width: 0;
}
.cf-autosave-status.cf-as-idle {
  opacity: 0;
  pointer-events: none;
}
.cf-autosave-status.cf-as-saving {
  opacity: 1;
  background: color-mix(in srgb, var(--yellow, #f5a623) 15%, transparent);
  color: color-mix(in srgb, var(--yellow, #f5a623) 90%, var(--tx1));
  animation: cf-as-pulse 1.2s ease-in-out infinite;
}
.cf-autosave-status.cf-as-saved {
  opacity: 1;
  background: color-mix(in srgb, var(--green, #22c55e) 12%, transparent);
  color: color-mix(in srgb, var(--green, #22c55e) 90%, var(--tx1));
}
.cf-autosave-status.cf-as-failed {
  opacity: 1;
  background: color-mix(in srgb, var(--red, #ef4444) 12%, transparent);
  color: color-mix(in srgb, var(--red, #ef4444) 90%, var(--tx1));
  pointer-events: all;
}
.cf-as-retry-btn {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cf-as-retry-btn:hover { opacity: .8; }

@keyframes cf-as-pulse {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1;  }
}

/* Modal auto-save badge — appears inline with the modal subtitle */
#feedbackModal .cf-autosave-status {
  margin-left: 6px;
  font-size: 9.5px;
}

.tracs-save-btn, .bt-save-btn, .dt-save-btn {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 0 12px;
  white-space: nowrap;
  width: 100%;
  justify-content: center;
}
.tracs-save-btn svg, .bt-save-btn svg, .dt-save-btn svg { width: 11px; height: 11px }

.req-star { color: var(--red); margin-left: 1px }

/* ═══════════════════════════════════════════════
   SHARED PAGINATION
═══════════════════════════════════════════════ */

.tracs-pagination, .bt-pagination, .dt-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--bd1);
  background: var(--s2);
  border-radius: 0 0 var(--r3) var(--r3);
  font-size: 11px;
  color: var(--tx3);
  font-family: var(--mono);
}
.tracs-pages, .bt-pages, .dt-pages { display: flex; gap: 4px; align-items: center }
.tracs-page-btn, .bt-page-btn, .dt-page-btn {
  height: 26px; min-width: 26px; padding: 0 6px;
  border-radius: var(--r);
  border: 1px solid var(--bd2);
  background: var(--s1);
  color: var(--tx2);
  font-size: 10.5px;
  font-family: var(--mono);
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
}
.tracs-page-btn:hover:not(.disabled), .bt-page-btn:hover:not(.disabled), .dt-page-btn:hover:not(.disabled) { background: var(--s3); border-color: var(--bd3) }
.tracs-page-btn.active, .bt-page-btn.active, .dt-page-btn.active { background: var(--blue); border-color: var(--blue); color: #fff }
.tracs-page-btn.disabled, .bt-page-btn.disabled, .dt-page-btn.disabled { opacity: .35; cursor: not-allowed; pointer-events: none }

/* ═══════════════════════════════════════════════
   SHARED MONTH FILTER
═══════════════════════════════════════════════ */

.month-select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.month-select-wrap label {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--tx3);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   FINANCE PAGE — Balance Transfer Specific
═══════════════════════════════════════════════ */

/* Account cell */
.bt-acct-email {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--tx1);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bt-acct-uid {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--tx4);
  margin-top: 2px;
}

/* Amount */
.bt-amount {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--tx1);
  white-space: nowrap;
  text-align: right;
}
.bt-amount-cur {
  font-size: 9px;
  font-weight: 500;
  color: var(--tx3);
  margin-right: 2px;
}

/* Type badges */
.bt-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid;
}
.type-ca { background: var(--blue-lt);   color: var(--blue);   border-color: var(--blue-bd) }
.type-bc { background: var(--purple-lt); color: var(--purple); border-color: var(--purple-bd) }
.type-ba { background: var(--cyan-lt);   color: var(--cyan);   border-color: var(--cyan-bd) }

/* Status badges */
.bt-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .04em;
  border: 1px solid;
  white-space: nowrap;
}
.bt-status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bt-status.done    { background: var(--green-lt); color: var(--green); border-color: var(--green-bd) }
.bt-status.done::before { background: var(--green) }
.bt-status.pending { background: var(--amber-lt); color: var(--amber); border-color: var(--amber-bd) }
.bt-status.pending::before { background: var(--amber); animation: tdot 1.6s ease infinite }

/* Ticket ID */
.bt-ticket {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cyan);
  background: var(--cyan-lt);
  border: 1px solid var(--cyan-bd);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.bt-ticket-none { color: var(--tx4); font-family: var(--mono); font-size: 10px }

/* Date cell */
.bt-date-main { font-family: var(--mono); font-size: 10.5px; color: var(--tx2) }
.bt-date-time { font-family: var(--mono); font-size: 9.5px;  color: var(--tx4); margin-top: 1px }

/* Transfer direction arrow */
.bt-dir-arrow {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--s3);
  flex-shrink: 0;
}
.bt-dir-arrow svg { width: 10px; height: 10px; stroke: var(--tx3); stroke-width: 2.5 }

/* Stat card amount — keep Rp values readable without breaking compact cards */
.finance-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 74px;
}
.finance-stat-card .stat-num {
  width: 100%;
}
.finance-stat-card .stat-label {
  width: 100%;
}
.stat-card .stat-num.rp {
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty state (finance) */
.bt-empty { padding: 48px 20px; text-align: center }
.bt-empty-ic { font-size: 32px; margin-bottom: 8px }
.bt-empty-t  { font-size: 13px; font-weight: 600; color: var(--tx2); margin-bottom: 4px }
.bt-empty-s  { font-size: 11px; color: var(--tx4) }

/* Finance responsive */
@media (max-width: 1200px) {
  .bt-inline-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) }
  .bt-field-email,
  .bt-field-uid,
  .bt-field-type { grid-column: span 4 }
  .bt-field-amount,
  .bt-field-status { grid-column: span 2 }
  .bt-field-ticket,
  .bt-field-datetime { grid-column: span 3 }
  .bt-inline-action { grid-column: span 2 }
}
@media (max-width: 800px) {
  .bt-inline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .bt-field-email,
  .bt-field-uid,
  .bt-field-type,
  .bt-field-ticket,
  .bt-field-datetime { grid-column: span 2 }
  .bt-field-amount,
  .bt-field-status,
  .bt-inline-action { grid-column: span 1 }
}
@media (max-width: 520px) {
  .bt-field-amount,
  .bt-field-status,
  .bt-inline-action { grid-column: span 2 }
}

/* ═══════════════════════════════════════════════
   DOMAIN TRANSFER PAGE — Specific Styles
═══════════════════════════════════════════════ */

/* Domain name cell */
.dt-domain-name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--tx1);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dt-domain-sub {
  font-size: 9.5px;
  color: var(--tx4);
  font-family: var(--mono);
  margin-top: 2px;
}

/* Date cells */
.dt-date { font-family: var(--mono); font-size: 10.5px; color: var(--tx2); white-space: nowrap }
.dt-date-none { color: var(--tx4); font-family: var(--mono); font-size: 10px }

/* Webnic reseller */
.dt-webnic {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--cyan);
  background: var(--cyan-lt);
  border: 1px solid var(--cyan-bd);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-webnic-none { color: var(--tx4); font-family: var(--mono); font-size: 10px }

/* Notes */
.dt-notes {
  font-size: 11px;
  color: var(--tx3);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dt-notes-none { color: var(--tx4); font-size: 10px; font-family: var(--mono) }

/* ── Domain Status Badges ──────────────────────── */
.dt-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .04em;
  border: 1px solid;
  white-space: nowrap;
}
.dt-status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* pending transfer — blue pulsing */
.dt-status-pending {
  background: var(--blue-lt); color: var(--blue); border-color: var(--blue-bd);
}
.dt-status-pending::before { background: var(--blue); animation: tdot 1.6s ease infinite }

/* pending (awaiting action) — purple */
.dt-status-awaiting {
  background: var(--purple-lt); color: var(--purple); border-color: var(--purple-bd);
}
.dt-status-awaiting::before { background: var(--purple) }

/* locked — amber */
.dt-status-locked {
  background: var(--amber-lt); color: var(--amber); border-color: var(--amber-bd);
}
.dt-status-locked::before { background: var(--amber) }

/* error epp code — red */
.dt-status-error {
  background: var(--red-lt); color: var(--red); border-color: var(--red-bd);
}
.dt-status-error::before { background: var(--red); animation: tdot 1s ease infinite }

/* move domain — purple */
.dt-status-move {
  background: var(--purple-lt); color: var(--purple); border-color: var(--purple-bd);
}
.dt-status-move::before { background: var(--purple) }

/* done — green */
.dt-status-done {
  background: var(--green-lt); color: var(--green); border-color: var(--green-bd);
}
.dt-status-done::before { background: var(--green) }

/* cancelled — muted */
.dt-status-cancelled {
  background: var(--s3); color: var(--tx3); border-color: var(--bd2);
}
.dt-status-cancelled::before { background: var(--tx4) }

/* retransferred — cyan */
.dt-status-retransferred {
  background: var(--cyan-lt); color: var(--cyan); border-color: var(--cyan-bd);
}
.dt-status-retransferred::before { background: var(--cyan) }

/* transferred away — red-ish */
.dt-status-away {
  background: rgba(220,38,38,.06); color: #b91c1c; border-color: rgba(220,38,38,.2);
}
.dt-status-away::before { background: #b91c1c }

/* pending verification — purple-blue */
.dt-status-verify {
  background: rgba(124,58,237,.07); color: #6d28d9; border-color: rgba(124,58,237,.2);
}
.dt-status-verify::before { background: #6d28d9; animation: tdot 1.6s ease infinite }

/* renew period — teal/cyan variant */
.dt-status-renew {
  background: rgba(6,182,212,.07); color: #0891b2; border-color: rgba(6,182,212,.2);
}
.dt-status-renew::before { background: #0891b2 }

/* ── Inline status select (row-level) ──────────── */
.dt-status-wrap { position: relative; display: inline-block }
.dt-status-select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 11px;
  border: none;
  background: transparent;
  z-index: 2;
}
/* Chevron overlay hint on hover */
.dt-status-wrap::after {
  content: '▾';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--tx4);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur);
}
.dt-table tbody tr:hover .dt-status-wrap::after { opacity: 1 }

/* ── Inline move-domain select ──────────────────── */
.dt-move-select {
  height: 24px;
  padding: 0 6px;
  font-size: 10.5px;
  font-family: var(--mono);
  font-weight: 600;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  background: var(--s1);
  color: var(--tx2);
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur);
  min-width: 110px;
}
.dt-move-select:hover { border-color: var(--bd3); background: var(--s2) }
.dt-move-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-lt) }
.dt-move-select.has-value { color: var(--cyan); border-color: var(--cyan-bd); background: var(--cyan-lt) }

/* ── Inline end-date input (row-level) ─────────── */
.dt-date-input {
  height: 24px;
  padding: 0 6px;
  font-size: 10.5px;
  font-family: var(--mono);
  font-weight: 500;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  background: var(--s1);
  color: var(--tx3);
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
  width: 118px;
}
.dt-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 2px;
  opacity: 0.3;
  transition: opacity var(--dur);
}
[data-theme="dark"] .dt-date-input::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(185deg);
}
[data-theme="light"] .dt-date-input::-webkit-calendar-picker-indicator {
  filter: sepia(1) saturate(5) hue-rotate(190deg) brightness(0.6);
}

.dt-date-input:hover {
  border-color: var(--bd3);
  background: var(--s2);
  color: var(--tx2);
}
.dt-date-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-lt);
  color: var(--tx1);
}
.dt-date-input.has-value {
  color: var(--tx2);
  border-color: var(--bd2);
}
.dt-date-input.saving {
  opacity: .5;
  pointer-events: none;
}

/* Empty state (domains) */
.dt-empty { padding: 48px 20px; text-align: center }
.dt-empty-ic { font-size: 32px; margin-bottom: 8px }
.dt-empty-t  { font-size: 13px; font-weight: 600; color: var(--tx2); margin-bottom: 4px }
.dt-empty-s  { font-size: 11px; color: var(--tx4) }

/* Domain responsive */
@media (max-width: 1200px) {
  .dt-inline-grid { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 800px) {
  .dt-inline-grid { grid-template-columns: repeat(2, 1fr) }
}

/* ═══════════════════════════════════════════════
   UTILITY CLASSES
   (Replacing repeated inline style="" patterns)
═══════════════════════════════════════════════ */

/* Filter + search row layout */
.filter-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-search-row-mt { margin-top: 0 }

.filter-search-row .filter-bar,
.filter-search-row .filter-group-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-search-row .filter-bar {
  gap: 6px;
}

/* Search form wrapper */
.search-form-wrap { 
  position: relative;
  flex: 1; 
  min-width: 200px;
  display: flex;
  align-items: center;
}

.search-ic {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: var(--tx3);
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}

.search-form-wrap .form-input,
.search-form-wrap .search-input {
  padding-left: 32px !important;
}

.filter-search-row .search-input,
.filter-search-row .form-input,
.filter-search-row .form-select,
.filter-search-row .compact-select {
  height: var(--toolbar-h);
  min-height: var(--toolbar-h);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--toolbar-fz);
  line-height: 1;
  border-radius: var(--r2);
}

.filter-search-row .form-select,
.filter-search-row select.compact-select {
  padding-right: 26px;
}

.filter-search-row .btn {
  height: var(--toolbar-h);
  min-height: var(--toolbar-h);
  padding: 0 var(--toolbar-px);
  font-size: var(--toolbar-fz);
  line-height: 1;
  border-radius: var(--r2);
  align-self: center;
}

.filter-search-row .btn svg,
.filter-search-row .btn .icon-sm,
.filter-search-row .btn .icon-xs {
  width: 14px;
  height: 14px;
}

.filter-search-row .filter-tab {
  min-height: var(--toolbar-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--toolbar-px);
  font-size: var(--toolbar-fz);
  line-height: 1;
  border-radius: var(--r2);
}

.filter-search-row .month-select-wrap {
  min-height: var(--toolbar-h);
}

.report-export-menu {
  position: relative;
  flex-shrink: 0;
}

.report-export-menu summary {
  list-style: none;
}

.report-export-menu summary::-webkit-details-marker {
  display: none;
}

.report-export-trigger {
  position: relative;
  color: var(--blue);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.report-export-trigger:hover,
.report-export-menu[open] .report-export-trigger {
  color: var(--blue-dk);
  background: var(--blue-lt);
  border-color: var(--blue-bd);
  transform: none;
  box-shadow: none;
}

[data-theme="dark"] .report-export-trigger {
  color: #93c5fd;
}

[data-theme="dark"] .report-export-trigger:hover,
[data-theme="dark"] .report-export-menu[open] .report-export-trigger {
  color: #dbeafe;
  background: rgba(59,130,246,.14);
  border-color: rgba(96,165,250,.22);
}

.report-export-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  padding: 5px 8px;
  border-radius: var(--r2);
  background: var(--tx1);
  color: var(--s1);
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
  z-index: 70;
}

.report-export-trigger:hover::after,
.report-export-trigger:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.report-export-menu[open] .report-export-trigger::after {
  display: none;
}

.report-export-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 250px;
  padding: 10px;
  display: grid;
  gap: 9px;
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: var(--r3);
  box-shadow: 0 14px 32px rgba(17,24,39,.16);
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

.report-export-menu[open] .report-export-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
  animation: reportExportFadeIn 120ms ease-out both;
}

@keyframes reportExportFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.report-export-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--tx2);
  letter-spacing: .08em;
  text-transform: uppercase;
}

[data-theme="dark"] .report-export-popover {
  background: var(--s2);
  border-color: var(--bd3);
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
}

.report-export-popover label {
  display: grid;
  gap: 5px;
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tx3);
  text-transform: uppercase;
}

.report-export-popover .form-input {
  height: 32px;
  min-height: 32px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.report-export-popover .btn {
  width: 100%;
  height: 32px;
  min-height: 32px;
}

@media (max-width: 720px) {
  .shift-summary-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .case-row,
  .shift-report-item {
    grid-template-columns: minmax(0, 1fr);
  }
  .case-status-stack,
  .case-right,
  .shift-report-item-status,
  .shift-row-controls {
    justify-content: flex-start;
    padding-left: var(--dashboard-widget-padding, var(--panel-padding));
  }
  .case-right {
    grid-template-columns: auto auto;
    padding-top: 0;
  }
  .shift-report-group-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .shift-report-submit {
    text-align: left;
  }
  .report-export-popover {
    right: 0;
    width: min(250px, calc(100vw - 34px));
  }
}

/* Shift Reports intelligence + compact toolbar */
.shift-intel-panel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s1);
  box-shadow: 0 2px 8px rgba(17,24,39,.035);
}

.feedback-summary-panel {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  grid-template-areas:
    "head lists"
    "summary lists";
  align-items: start;
}

.feedback-summary-panel .shift-intel-summary {
  grid-area: summary;
  max-width: none;
}

.feedback-summary-panel .shift-intel-head {
  grid-area: head;
}

.feedback-summary-panel .shift-intel-lists {
  grid-area: lists;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--bd1);
  border-radius: var(--r);
  background: var(--s2);
}

.feedback-summary-panel .shift-intel-list {
  padding-top: 0;
  border-top: 0;
}

.feedback-summary-panel .shift-intel-list + .shift-intel-list {
  padding-top: 8px;
  border-top: 1px solid var(--bd1);
}

.shift-intel-main,
.shift-summary-side {
  min-width: 0;
}

.shift-intel-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shift-summary-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--bd1);
  border-radius: var(--r);
  background: var(--s2);
}

.shift-intel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.shift-intel-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx3);
}

.shift-intel-title {
  font-size: 11px;
  color: var(--tx3);
}

.shift-intel-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--red-bd);
  border-radius: var(--r);
  background: var(--red-lt);
  color: var(--red);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.shift-intel-summary {
  max-width: 980px;
  margin: 0;
  color: var(--tx1);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.summary-bullets {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 17px;
}

.summary-bullets li {
  padding-left: 2px;
}

.summary-highlight {
  display: inline;
  padding: 0 2px;
  border-radius: 4px;
  color: var(--tx1);
  background:
    linear-gradient(90deg, rgba(250, 204, 21, .42) 50%, transparent 50%)
    100% 100% / 200% 72% no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: summary-highlight-sweep .9s var(--ease) .2s forwards;
}

@keyframes summary-highlight-sweep {
  to { background-position: 0 100%; }
}

.shift-intel-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shift-intel-list {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--bd1);
}

.shift-intel-list-title {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  color: var(--tx2);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.shift-intel-list ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 16px;
  color: var(--tx2);
  font-size: 11.5px;
  line-height: 1.45;
}

.filter-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--s3);
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.filter-tab.active .filter-tab-count {
  background: var(--blue);
  color: white;
}

.shift-toolbar-panel {
  padding: 8px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s1);
  box-shadow: 0 2px 8px rgba(17,24,39,.03);
}

.shift-handover-grid {
  display: grid;
  grid-template-columns: minmax(280px, 35fr) minmax(0, 65fr);
  gap: var(--page-section-gap);
  align-items: stretch;
}

.shift-handover-summary {
  grid-column: auto;
}

.shift-handover-card,
.shift-handover-summary {
  min-width: 0;
}

.shift-summary-text {
  padding: 0;
  color: var(--tx1);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.shift-window-note {
  margin: 0;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.shift-summary-side-meta {
  color: var(--tx2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.shift-activity-list {
  display: grid;
  gap: 0;
  max-height: 210px;
  overflow: auto;
}

.shift-focus-card .shift-activity-list {
  max-height: 260px;
}

.shift-activity-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-top: 1px solid var(--bd1);
}

.shift-activity-row:first-child {
  border-top: 0;
}

.shift-activity-title {
  color: var(--tx1);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}

.shift-activity-desc {
  margin-top: 3px;
  color: var(--tx3);
  font-size: 10.5px;
  line-height: 1.35;
}

.shift-activity-row time {
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
}

.shift-empty-line {
  padding: 10px 12px;
  color: var(--tx3);
  font-size: 11.5px;
  line-height: 1.45;
}

.shift-handover-grid .panel-head {
  min-height: 38px;
  padding: 8px 10px;
}

.shift-handover-grid .panel-title {
  gap: 6px;
  font-size: 10.5px;
}

@media (max-width: 720px) {
  .shift-intel-panel {
    grid-template-columns: 1fr;
  }

  .feedback-summary-panel {
    grid-template-areas:
      "head"
      "summary"
      "lists";
  }

  .shift-intel-head {
    flex-direction: column;
    gap: 8px;
  }

  .shift-intel-lists {
    grid-template-columns: 1fr;
  }

  .shift-handover-grid {
    grid-template-columns: 1fr;
  }
}

.search-form-flex {
  flex: 1;
  min-width: 200px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.toolbar-add-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Compact select for filter areas */
.compact-select {
  height: var(--toolbar-h);
  padding: 0 8px;
  font-size: var(--toolbar-fz);
}

.input-with-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.input-with-label label {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tx4);
  letter-spacing: .05em;
  font-family: var(--mono);
  margin-left: 2px;
}

/* Form section (bordered group inside modals) */
.form-section {
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.form-section-title {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx3);
  font-family: var(--mono);
  margin-bottom: 8px;
}

/* Login-specific body override */
.login-shell { overflow: auto }

/* Reminder description inline */
.rem-desc-inline {
  font-size: 11px;
  color: var(--tx3);
  margin-top: 2px;
}

/* Reminder date display */
.rem-date-display {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
}

/* Overdue count badge in filter tab */
.filter-count-badge {
  background: var(--red);
  color: #fff;
  border-radius: 10px;
  padding: 0 5px;
  font-size: 9px;
  margin-left: 3px;
}

/* Task date cell */
.task-date-cell {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx4);
  margin-right: 6px;
  flex-shrink: 0;
}

/* Optional label hint */
.form-label-hint { color: var(--tx4) }

/* Panel margin-top utility */
.panel-mt { margin-top: 0 }

/* Reset filter button */
.btn-reset {
  height: var(--toolbar-h);
  padding: 0 var(--toolbar-px);
  font-size: var(--toolbar-fz);
  white-space: nowrap;
}

/* ── Cancellation Feedback Specific ── */
.row-critical { background: rgba(239, 68, 68, 0.03); }
.text-critical { color: var(--red); font-weight: 600; }
.user-cell { display: flex; align-items: center; gap: 8px; }
.avatar { 
    width: 24px; height: 24px; border-radius: 50%; 
    background: var(--s3); color: var(--tx3); 
    display: flex; align-items: center; justify-content: center; 
    font-size: 9px; font-weight: 700; border: 1px solid var(--bd2);
}
.user-name { font-size: 11.5px; font-weight: 500; color: var(--tx1); }
.badge-service { background: var(--s3); color: var(--tx2); border: 1px solid var(--bd2); }
.cf-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.cf-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--s3);
    color: var(--tx2);
    border: 1px solid var(--bd2);
    font-size: 9.5px;
    line-height: 1.45;
    font-family: var(--mono);
    overflow-wrap: anywhere;
}
.cf-chip-service { background: var(--s3); }
.cf-chip-critical { background: var(--red-lt); color: var(--red); border-color: var(--red-bd); font-weight: 700; }
.cf-multi-select {
    height: 112px !important;
    min-height: 112px;
    padding: 6px 8px !important;
    line-height: 1.35;
    overflow-y: auto;
    color: var(--tx1);
}
.cf-multi-select option {
    margin-bottom: 2px;
}
.cf-multi-select option:checked {
    background: var(--blue-lt);
    color: var(--blue-dk);
}
.cf-choice-box {
    height: 190px;
    padding: 7px;
    overflow-y: auto;
    background: var(--s2);
    border: 1px solid var(--bd2);
    border-radius: var(--r2);
    color: var(--tx1);
    transition: background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.fb-details-input {
    height: 148px !important;
    min-height: 148px !important;
    padding: 8px 10px !important;
    resize: vertical;
    line-height: 1.45;
}
.cf-choice-box:focus-within {
    background: var(--s1);
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-lt);
}
.cf-choice-option {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    padding: 3px 7px 3px 5px;
    border-radius: 5px;
    color: var(--tx2);
    font-size: 11px;
    line-height: 1.35;
    cursor: pointer;
    transition: background var(--dur), color var(--dur);
}
.cf-choice-option:hover {
    background: var(--s3);
    color: var(--tx1);
}
.cf-choice-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cf-choice-mark {
    position: relative;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 1px solid var(--bd3);
    border-radius: 4px;
    background-color: var(--s1);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    color: var(--tx4);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx3) 18%, transparent);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cf-choice-mark::before,
.cf-choice-mark::after {
    content: none;
}
.cf-choice-mark::after {
    content: none;
}
.cf-choice-option input:checked + .cf-choice-mark {
    background-color: var(--s4);
    border-color: var(--bd4);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.2 6.6 11.3 12.8 4.7' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    box-shadow: none;
}
.cf-choice-option input:checked + .cf-choice-mark::before {
    content: none;
}
.cf-choice-option input:checked + .cf-choice-mark::after {
    content: none;
}
.cf-choice-option input:checked ~ .cf-choice-text {
    color: var(--tx1);
    font-weight: 600;
}
[data-theme="dark"] .cf-choice-option input:checked ~ .cf-choice-text {
    color: var(--tx1);
}
[data-theme="dark"] .cf-choice-option input:checked + .cf-choice-mark {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.2 6.6 11.3 12.8 4.7' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.feedback-actions-head {
    width: 72px;
    text-align: right !important;
}
.feedback-actions-cell {
    width: 72px;
    padding-right: 14px !important;
    text-align: right;
    white-space: nowrap;
}
.cf-row-actions {
    width: 100%;
    gap: 2px;
}
.cf-row-actions .btn-icon {
    flex: 0 0 auto;
    color: var(--tx3);
}
.cf-row-actions .btn-icon:hover {
    color: var(--blue);
    background: var(--blue-lt);
    border-color: var(--blue-bd);
}
.cf-row-actions .cf-delete-action:hover {
    color: var(--red);
    background: var(--red-lt);
    border-color: var(--red-bd);
}
.truncate-details { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--tx3); }
.ref-wrap { display: flex; align-items: center; gap: 6px; }
.btn-copy { 
    background: none; border: none; padding: 2px; cursor: pointer; 
    color: var(--tx4); transition: color 0.2s; 
}
.btn-copy:hover { color: var(--blue); }
.btn-copy svg { width: 12px; height: 12px; }
.email-link { color: var(--tx2); text-decoration: none; font-size: 11px; }
.email-link:hover { text-decoration: underline; color: var(--blue); }
.resolution-text { font-size: 11px; color: var(--tx2); font-weight: 500; }
.sticky-head { position: relative; max-height: 70vh; overflow-y: auto; }
.sticky-head thead th { position: sticky; top: 0; background: var(--s2); z-index: 5; }
.feedback-search-wrap {
    flex: 0 1 210px;
    min-width: 180px;
    max-width: 230px;
}

/* ═══════════════════════════════════════════════
   USER MANAGEMENT + PROFILE
════════════════════════════════════════════════ */

.user-menu-wrap {
  position: relative;
}
.user-menu-wrap summary {
  cursor: pointer;
  list-style: none;
}
.user-menu-wrap summary::-webkit-details-marker { display: none }
.user-menu {
  /* Fixed (not absolute): .sidebar-flyout has overflow:hidden for the
     collapsed-rail clip animation, which would otherwise clip this panel
     since it renders outside the flyout's own box. Positioned relative to
     the viewport instead. Anchored past the *collapsed* rail edge (not
     the expanded one) because opening this menu forces the rail closed
     (see the :not(:has(.user-menu-wrap[open])) expand-trigger guards
     above) -- the nav no longer stays expanded once this is open.
     Escaping to the viewport still isn't enough on its own -- see the
     .sidebar-flyout:has(.user-menu-wrap[open]) rule above. */
  position: fixed;
  left: calc(var(--sb-w) + 10px);
  bottom: 12px;
  z-index: 6000;
  width: 218px;
  display: grid;
  gap: 4px;
  padding: 7px;
  border-radius: var(--r3);
  border: 1px solid var(--bd2);
  background: var(--s1);
  box-shadow: 0 20px 42px rgba(17,24,39,.16);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity var(--dur), transform var(--dur), visibility 0s linear var(--dur);
}
.user-menu-wrap[open] .user-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.user-menu-wrap:not([open]) .user-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 640px) {
  /* Below 640px the sidebar itself becomes a horizontal top bar (see the
     sidebar mobile block above), so the profile dropdown drops down from
     the avatar instead of flying out to the right of a rail that no
     longer exists in that position. */
  .user-menu { left: auto; right: 8px; top: 54px; bottom: auto }
}
.user-menu-head {
  display: grid;
  gap: 2px;
  padding: 8px 9px 9px;
  border-bottom: 1px solid var(--bd1);
  margin-bottom: 2px;
}
.user-menu-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--tx1);
}
.user-menu-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--tx3);
}
.user-menu a,
.user-menu-logout button {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r);
  color: var(--tx2);
  font-size: 11.5px;
  text-decoration: none;
}
.user-menu a:hover,
.user-menu-logout button:hover {
  background: var(--s3);
  color: var(--tx1);
}
.user-menu a.danger:hover,
.user-menu-logout button.danger:hover {
  background: var(--red-lt);
  color: var(--red);
}
.user-menu-divider { height: 1px; background: var(--bd1); margin: 2px 2px }
.user-menu-section-label {
  padding: 4px 8px 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx4);
}
[data-theme="dark"] .user-menu {
  background: var(--s2);
  border-color: var(--bd3);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

.user-management-page,
.profile-page {
  display: flex;
  flex-direction: column;
  gap: var(--page-section-gap);
}
.um-topbar,
.profile-topbar {
  justify-content: space-between;
}
.um-tabs,
.profile-tabs {
  align-items: center;
}
.um-tabs .filter-tab,
.profile-tabs .filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.um-migration-panel,
.um-once-panel,
.um-panel,
.profile-section-panel {
  overflow: visible;
}
.um-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--page-section-gap);
}
.um-overview-card {
  min-height: 74px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  align-items: center;
  box-shadow: none;
}
.um-overview-card i {
  color: var(--blue);
}
.um-overview-card span {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.um-overview-card strong {
  grid-column: 1 / -1;
  color: var(--tx1);
  font-size: 22px;
  line-height: 1;
}
.um-user-table .row-action-popover {
  min-width: 190px;
  max-height: min(360px, calc(100vh - 90px));
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.um-user-table .row-action-popover form {
  display: contents;
}
.um-user-table th:last-child,
.um-user-table td:last-child {
  width: 132px;
  min-width: 132px;
  text-align: right;
  padding-right: 14px !important;
}
.um-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
  width: 100%;
}
.um-row-actions .row-action-menu {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
}
.um-row-actions .btn-icon {
  color: var(--tx3);
}
.um-row-actions .btn-icon:hover {
  color: var(--blue);
  background: var(--blue-lt);
  border-color: var(--blue-bd);
}
.um-empty-state {
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 34px 16px;
  text-align: center;
  color: var(--tx3);
}
.um-empty-state .empty-sub {
  max-width: 520px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
}
.um-empty-state code {
  color: var(--blue);
  background: var(--blue-lt);
  border: 1px solid var(--blue-bd);
  border-radius: 6px;
  padding: 2px 5px;
}
.um-once-copy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}
.um-once-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--tx1);
}
.um-copy-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) auto;
  gap: 6px;
  align-items: center;
}
.um-filter-row {
  align-items: stretch;
}
.um-user-filter {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(470px, 1.3fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r3);
  background: color-mix(in srgb, var(--s2) 92%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.um-control-overview {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr minmax(220px, .8fr);
  gap: 0;
  overflow: hidden;
  box-shadow: none;
}
.um-overview-section {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 13px 14px;
  border-right: 1px solid var(--bd1);
}
.um-overview-section:last-child {
  border-right: 0;
}
.um-overview-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  color: var(--tx1);
  font-size: 12px;
  font-weight: 700;
}
.um-overview-title i {
  color: var(--blue);
}
.um-overview-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 7px;
  border-top: 1px solid var(--bd1);
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
}
.um-overview-line strong {
  color: var(--tx1);
  font-size: 12px;
}
.um-intern-preview .btn {
  justify-self: start;
  margin-top: 4px;
}
.um-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
  gap: var(--page-section-gap);
  align-items: start;
}
.um-side-panel {
  position: sticky;
  top: 42px;
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
  box-shadow: none;
}
.um-side-actions,
.um-side-summary {
  display: grid;
  gap: 8px;
  padding: 0 12px;
}
.um-side-summary div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bd1);
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
}
.um-side-summary strong {
  color: var(--tx1);
}
.um-side-note {
  margin: 0 12px;
  padding: 10px;
  border: 1px dashed var(--bd2);
  border-radius: var(--r2);
  color: var(--tx3);
  font-size: 11px;
  line-height: 1.5;
}
.um-notes-add-row {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.um-notes-list {
  display: grid;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
}
.um-note-item {
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  padding: 10px;
  background: var(--bg2);
}
.um-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10px;
  color: var(--tx3);
  font-family: var(--mono);
  margin-bottom: 6px;
}
.um-note-category {
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ac1, var(--tx2));
}
.um-note-content {
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.um-note-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.btn-xs {
  padding: 3px 8px;
  font-size: 10.5px;
}
.um-note-actions .is-danger {
  color: var(--danger, #dc2626);
}

.tracs-build-panel {
  display: grid;
  gap: 14px;
}
.tracs-build-copy {
  max-width: 680px;
  color: var(--tx2);
  font-size: 12px;
  line-height: 1.6;
}
.tracs-build-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tracs-build-grid.compact {
  grid-template-columns: 1fr;
}
.tracs-build-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}
.tracs-build-grid span {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tracs-build-grid strong {
  min-width: 0;
  color: var(--tx1);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.tracs-build-modal .form-hint {
  line-height: 1.5;
}
@media (max-width: 680px) {
  .tracs-build-grid {
    grid-template-columns: 1fr;
  }
}
.um-filter-search,
.um-filter-group,
.um-filter-actions {
  min-width: 0;
}
.um-filter-search {
  display: grid;
  gap: 6px;
}
.um-filter-label,
.um-filter-group legend {
  padding: 0;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.um-user-filter .search-form-wrap {
  width: 100%;
  height: var(--toolbar-h);
  min-height: var(--toolbar-h);
}
.um-user-filter .search-input {
  min-width: 0;
  height: var(--toolbar-h);
  min-height: var(--toolbar-h);
  padding-top: 0;
  padding-bottom: 0;
}
.um-filter-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}
.um-filter-group legend {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  float: none;
  line-height: 1.4;
}
.um-filter-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 7px;
}
.um-filter-actions .btn {
  height: var(--toolbar-h);
  min-height: var(--toolbar-h);
  padding-top: 0;
  padding-bottom: 0;
}
.um-user-filter .tracs-select-trigger,
.um-user-filter .form-select,
.um-user-filter .form-input {
  height: var(--toolbar-h);
  min-height: var(--toolbar-h);
  min-width: 110px;
  padding-top: 0;
  padding-bottom: 0;
}
.um-user-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.um-avatar,
.profile-avatar,
.um-drawer-avatar {
  --um-avatar-bg: linear-gradient(135deg, color-mix(in srgb, var(--blue) 86%, var(--s1)), color-mix(in srgb, var(--purple) 82%, var(--s1)));
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd2);
  background: var(--um-avatar-bg);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.um-avatar-editor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}
.um-avatar-editor-preview {
  --um-avatar-bg: linear-gradient(135deg, color-mix(in srgb, var(--blue) 86%, var(--s1)), color-mix(in srgb, var(--purple) 82%, var(--s1)));
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd2);
  background: var(--um-avatar-bg);
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
}
.um-avatar-editor-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.um-avatar-editor-title {
  color: var(--tx1);
  font-size: 12px;
  font-weight: 700;
}
.um-avatar-editor-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.um-user-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.um-user-name {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tx1);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.um-user-name:hover { color: var(--blue) }
.um-user-meta,
.um-mono {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
}
.um-user-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.um-filebook {
  display: grid;
  gap: var(--page-section-gap);
}
.um-folder-section {
  --um-accent: var(--blue);
  overflow: visible;
  border-color: color-mix(in srgb, var(--um-accent) 34%, var(--bd1));
  box-shadow: none;
}
.um-folder-section::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--um-accent);
  border-radius: var(--r3) var(--r3) 0 0;
}
.um-folder-tab {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--um-accent) 8%, var(--s2));
  border-bottom: 1px solid var(--bd1);
}
.um-folder-tab > div:first-child {
  min-width: 0;
}
.um-folder-title {
  min-width: 0;
  color: var(--tx1);
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.um-folder-meta {
  min-width: 0;
  margin-top: 2px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.um-folder-facts,
.um-folder-actions,
.um-user-card-badges,
.um-user-card-actions,
.um-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.um-folder-facts {
  min-width: 0;
  justify-content: flex-end;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
}
.um-folder-facts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}
.um-folder-actions {
  justify-content: flex-end;
}
.um-folder-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.um-user-card-grid {
  display: grid;
  gap: var(--page-section-gap);
}
.um-user-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, auto) max-content;
  gap: 10px 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s1);
}
.um-user-card-intern {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--bd1));
  background: color-mix(in srgb, var(--amber-lt) 34%, var(--s1));
}
.um-user-card-intern.intern-ending_soon,
.um-user-card-intern.intern-end_passed {
  border-color: var(--amber-bd);
}
.um-user-card-intern.intern-terminated {
  border-color: var(--red-bd);
  background: color-mix(in srgb, var(--red-lt) 32%, var(--s1));
}
.um-user-card-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.um-user-card-badges {
  min-width: 0;
  max-width: min(38vw, 390px);
  align-self: center;
}
.um-user-card-badges .badge {
  min-height: 21px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.um-user-card-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-self: center;
  min-width: max-content;
}
.um-user-card-actions .btn-icon,
.um-user-card-actions .row-action-menu summary.btn {
  width: 30px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 30px;
}
.um-intern-card-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9.5px;
}
.um-intern-card-meta span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
}
.um-intern-card-meta span::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--amber);
}
.um-user-card-actions .row-action-menu {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  z-index: 3;
}
.um-user-card-actions .row-action-menu[open] {
  z-index: 320;
}
.um-user-card-actions .row-action-menu summary.btn {
  margin: 0;
  border: 1px solid var(--bd2);
  background: transparent;
  color: var(--tx3);
}
.um-user-card-actions .row-action-menu summary.btn:hover,
.um-user-card-actions .row-action-menu[open] summary.btn {
  color: var(--blue-dk);
  background: var(--blue-lt);
  border-color: var(--blue-bd);
}
.um-user-card-actions .row-action-popover {
  min-width: 190px;
  max-height: min(360px, calc(100vh - 90px));
  overflow-y: auto;
  top: calc(100% + 7px);
  right: 0;
}
.um-user-card-actions .row-action-popover form {
  display: contents;
}
.um-empty-compact {
  min-height: 72px;
  padding: 18px 12px;
}
.um-unassigned-section {
  border-style: dashed;
}
.um-form-section {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r3);
  background: var(--s2);
}
.um-intern-form-section[hidden],
.um-drawer-intern[hidden] {
  display: none !important;
}
.um-form-section-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.um-division-grid,
.um-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--page-section-gap);
}
.um-division-body,
.um-role-body {
  display: grid;
  gap: 10px;
  padding: 13px;
}
.um-division-title,
.um-role-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx1);
}
.um-division-desc {
  min-height: 34px;
  color: var(--tx3);
  font-size: 11.5px;
  line-height: 1.5;
}
.um-division-meta,
.um-role-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
}
.um-division-meta span,
.um-role-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.um-capacity {
  display: grid;
  gap: 5px;
}
.um-capacity-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--tx3);
}
.um-capacity-top span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.um-capacity-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--s3);
  border: 1px solid var(--bd1);
}
.um-capacity-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}
.um-capacity.ideal .um-capacity-track span { background: var(--green) }
.um-capacity.overloaded .um-capacity-track span { background: var(--red) }
.um-member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 26px;
}
.um-member-chip,
.um-member-empty {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--bd2);
  background: var(--s2);
  color: var(--tx2);
  font-size: 10.5px;
  white-space: nowrap;
}
.um-member-empty {
  color: var(--tx4);
}
.um-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.um-permission-panel .panel-head {
  align-items: center;
}
.um-sensitive-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--amber);
  font-family: var(--mono);
  font-size: 9.5px;
}
.um-matrix-wrap {
  max-height: min(64vh, 620px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.um-permission-table {
  min-width: 920px;
}
.um-permission-panel .um-permission-table thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--s2);
  box-shadow: inset 0 -1px 0 var(--bd2);
}
.um-permission-group td {
  background: var(--s3);
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.um-permission-name {
  color: var(--tx1);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}
.um-permission-desc {
  margin-top: 2px;
  color: var(--tx3);
  font-size: 10.5px;
}
.um-permission-cell {
  text-align: center;
  vertical-align: middle;
}
.um-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.um-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.um-check span {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--bd3);
  background: var(--s2);
  display: block;
  position: relative;
}
.um-check input:checked + span {
  background: var(--blue-lt);
  border-color: var(--blue-bd);
}
.um-check input:checked + span::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--blue);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.um-check input:disabled + span {
  opacity: .42;
  cursor: not-allowed;
}
.um-timeline {
  display: grid;
}
.um-log-row {
  display: flex;
  gap: 10px;
  padding: 11px var(--panel-padding);
  border-bottom: 1px solid var(--bd1);
}
.um-log-row:last-child { border-bottom: 0 }
.um-drawer {
  position: fixed;
  top: 26px;
  right: 0;
  bottom: 0;
  z-index: 4200;
  width: min(430px, 92vw);
  background: var(--s1);
  border-left: 1px solid var(--bd2);
  box-shadow: -24px 0 48px rgba(17,24,39,.18);
  transform: translateX(105%);
  transition: transform .22s var(--ease);
  display: flex;
  flex-direction: column;
}
.um-permission-drawer form {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.um-drawer.is-open { transform: translateX(0) }
.um-drawer-scrim {
  position: fixed;
  inset: 26px 0 0 0;
  z-index: 4100;
  background: rgba(15,20,30,.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur), visibility 0s linear var(--dur);
}
.um-drawer-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.um-drawer-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--bd1);
  background: var(--s2);
}
.um-drawer-title {
  color: var(--tx1);
  font-size: 15px;
  font-weight: 700;
}
.um-drawer-sub {
  margin-top: 2px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.um-drawer-body {
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
}
.um-drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--bd1);
  background: var(--s2);
}
.um-permission-note {
  display: flex;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--blue-bd);
  border-radius: var(--r2);
  background: var(--blue-lt);
  color: var(--tx2);
  font-size: 11px;
  line-height: 1.5;
}
.um-permission-note.warning {
  border-color: var(--amber-bd);
  background: var(--amber-lt);
  color: var(--tx2);
}
.um-permission-groups {
  display: grid;
  gap: 10px;
}
.um-permission-module {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}
.um-permission-module-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--tx1);
  font-weight: 700;
  font-size: 12px;
}
.um-module-select {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  cursor: pointer;
}
.um-permission-toggle {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--bd1);
  border-radius: var(--r);
  background: var(--s1);
  cursor: pointer;
}
.um-permission-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.um-permission-toggle > span {
  grid-row: span 2;
  width: 15px;
  height: 15px;
  align-self: start;
  margin-top: 2px;
  border-radius: 4px;
  border: 1px solid var(--bd3);
  background-color: var(--s1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  position: relative;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx3) 18%, transparent);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.um-permission-toggle input:checked + span {
  border-color: var(--bd4);
  background-color: var(--s4);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.2 6.6 11.3 12.8 4.7' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: none;
}
.um-permission-toggle:hover > span {
  border-color: var(--bd4);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tx3) 10%, transparent);
}
.um-permission-toggle input:focus-visible + span {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.um-permission-toggle input:disabled + span {
  cursor: not-allowed;
  opacity: .65;
}
[data-theme="dark"] .um-permission-toggle input:checked + span {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.2 6.6 11.3 12.8 4.7' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.um-permission-toggle strong {
  min-width: 0;
  color: var(--tx1);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.um-permission-toggle em {
  min-width: 0;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  overflow-wrap: anywhere;
}
.um-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.um-detail-grid,
.profile-readonly-grid,
.profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.um-detail-grid div,
.profile-readonly-grid div,
.profile-facts div,
.um-summary-list div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}
.um-detail-grid span,
.profile-readonly-grid span,
.profile-facts span,
.um-summary-list span {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.um-detail-grid strong,
.profile-readonly-grid strong,
.profile-facts strong,
.um-summary-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tx1);
  font-size: 11.5px;
}
.um-drawer-panel {
  box-shadow: none;
}
.um-drawer-intern {
  display: grid;
  gap: 10px;
  padding-bottom: 10px;
}
.um-drawer-intern .um-detail-grid {
  padding: 10px;
}
.um-intern-notes,
.um-intern-monitor,
.um-intern-placeholder {
  margin: 0 10px;
}
.um-intern-notes {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}
.um-intern-notes span,
.um-intern-placeholder span {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.um-intern-notes strong,
.um-intern-placeholder strong {
  color: var(--tx1);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.um-intern-monitor {
  display: grid;
  gap: 6px;
}
.um-intern-warning {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid var(--amber-bd);
  border-radius: var(--r2);
  background: var(--amber-lt);
  color: var(--amber);
  font-size: 11px;
}
.um-intern-placeholder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.um-intern-placeholder div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px dashed var(--bd2);
  border-radius: var(--r2);
  background: var(--s2);
}
.um-summary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}
.um-empty-mini {
  grid-column: 1 / -1;
  color: var(--tx3);
  font-size: 11px;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--page-section-gap);
  align-items: start;
}
.profile-card {
  padding: 16px;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.profile-avatar-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
  position: relative;
}
.profile-avatar {
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  font-size: 20px;
  cursor: default;
}
.profile-avatar-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  opacity: .98;
}
.profile-name {
  color: var(--tx1);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}
.avatar-crop-modal {
  width: min(720px, calc(100vw - 24px));
}
.avatar-crop-body {
  gap: 14px;
}
.avatar-crop-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 160px;
  gap: 16px;
  align-items: center;
}
.avatar-crop-stage {
  display: grid;
  place-items: center;
  min-width: 0;
}
#avatarCropCanvas {
  width: min(420px, 100%);
  aspect-ratio: 1;
  height: auto;
  border-radius: var(--r2);
  border: 1px solid var(--bd2);
  background: var(--s3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  cursor: grab;
  touch-action: none;
}
#avatarCropCanvas:active {
  cursor: grabbing;
}
.avatar-crop-side {
  display: grid;
  justify-items: center;
  gap: 10px;
}
#avatarPreviewCanvas {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 1px solid var(--bd2);
  background: var(--s2);
}
.avatar-zoom-range {
  width: 100%;
  accent-color: var(--blue);
}
.avatar-crop-actions {
  display: inline-flex;
  gap: 6px;
}
.profile-email {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
  text-align: center;
}
.profile-badges {
  justify-content: center;
}
.profile-facts {
  width: 100%;
  grid-template-columns: 1fr;
  margin-top: 4px;
}
.profile-main {
  display: grid;
  gap: var(--page-section-gap);
}
.profile-form-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.profile-password-field {
  position: relative;
}
.profile-password-field .form-input {
  padding-right: 40px;
}
.profile-password-field button {
  position: absolute;
  right: 5px;
  bottom: 0;
  height: var(--toolbar-h, 36px);
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--tx3);
  cursor: pointer;
  transition: color var(--dur), background var(--dur);
}
.profile-password-field button:hover {
  color: var(--blue);
  background: var(--blue-lt);
}
.profile-password-field button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.profile-strength {
  display: grid;
  gap: 5px;
  color: var(--tx3);
  font-size: 10.5px;
}
.profile-strength-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--bd1);
  background: var(--s3);
}
.profile-strength-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--green));
  transition: width var(--dur);
}

@media (max-width: 960px) {
  .um-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .um-user-filter {
    grid-template-columns: 1fr;
  }
  .um-control-overview {
    grid-template-columns: 1fr 1fr;
  }
  .um-overview-section:nth-child(2n) {
    border-right: 0;
  }
  .um-split-layout {
    grid-template-columns: minmax(0, 6fr) minmax(240px, 4fr);
  }
  .um-filter-actions { justify-content: flex-start; }
  .um-folder-tab,
  .um-user-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .um-folder-facts,
  .um-folder-actions,
  .um-user-card-badges,
  .um-user-card-actions {
    justify-content: flex-start;
  }
  .um-user-card-badges {
    max-width: none;
  }
  .um-user-card-actions {
    flex-wrap: wrap;
    min-width: 0;
  }
  .profile-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .um-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .um-topbar,
  .profile-topbar,
  .um-once-copy {
    align-items: stretch;
    flex-direction: column;
  }
  .um-copy-row,
  .um-user-filter {
    grid-template-columns: 1fr;
  }
  .um-control-overview,
  .um-split-layout {
    grid-template-columns: 1fr;
  }
  .um-overview-section {
    border-right: 0;
    border-bottom: 1px solid var(--bd1);
  }
  .um-side-panel {
    position: static;
  }
  .um-folder-tab {
    padding: 11px;
  }
  .um-folder-body {
    padding: 10px;
  }
  .um-user-card-main {
    align-items: flex-start;
  }
  .um-user-meta,
  .um-folder-title,
  .um-folder-meta,
  .um-capacity-top span {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .um-user-card-actions .row-action-popover {
    left: 0;
    right: auto;
  }
  .um-user-table thead {
    display: none;
  }
  .um-user-table,
  .um-user-table tbody,
  .um-user-table tr,
  .um-user-table td {
    display: block;
    width: 100%;
  }
  .um-user-table tr {
    border-bottom: 1px solid var(--bd1);
    padding: 8px 0;
  }
  .um-user-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 0;
    padding: 7px 12px;
  }
  .um-user-table td::before {
    content: attr(data-label);
    flex: 0 0 94px;
    color: var(--tx3);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .um-user-table td:first-child::before {
    display: none;
  }
  .um-user-table td:first-child {
    justify-content: flex-start;
  }
  .um-detail-grid,
  .profile-readonly-grid,
  .um-summary-list {
    grid-template-columns: 1fr;
  }
}

/* Intern Management */
.im-page {
  display: grid;
  gap: var(--page-section-gap);
}
.im-topbar {
  justify-content: space-between;
}
.im-overview {
  padding: 0;
  box-shadow: none;
}
.im-overview-row {
  display: grid;
  grid-template-columns: repeat(4, auto 1fr);
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
}
.im-overview-row strong {
  color: var(--tx1);
  font-size: 15px;
}
.im-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  padding: 10px;
  box-shadow: none;
}
.im-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
  gap: var(--page-section-gap);
  align-items: start;
}
.im-list-panel,
.im-detail-panel {
  overflow: visible;
  box-shadow: none;
}
.im-detail-panel {
  position: sticky;
  top: 42px;
}
.im-list {
  display: grid;
}
.im-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--bd1);
  text-decoration: none;
  color: inherit;
}
.im-row:hover,
.im-row.is-selected {
  background: var(--s3);
}
.im-row strong,
.im-profile strong {
  display: block;
  color: var(--tx1);
  font-size: 12px;
}
.im-row span,
.im-profile span {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
}
.im-row-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.im-profile {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.im-profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.im-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.im-detail-grid div,
.im-notes {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}
.im-notes strong {
  line-height: 1.5;
  white-space: pre-wrap;
}

@media (max-width: 960px) {
  .im-split {
    grid-template-columns: minmax(0, 6fr) minmax(260px, 4fr);
  }
  .im-filter {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .im-topbar {
    align-items: stretch;
    flex-direction: column;
  }
  .im-overview-row,
  .im-filter,
  .im-split {
    grid-template-columns: 1fr;
  }
  .im-detail-panel {
    position: static;
  }
  .im-row {
    grid-template-columns: 1fr;
  }
}
.feedback-toolbar-row {
    display: flex;
    align-items: stretch;
    gap: var(--page-section-gap);
    flex-wrap: wrap;
}
.feedback-toolbar-panel {
    flex: 0 1 auto;
}
.feedback-toolbar-panel .filter-group-wrap {
    flex: 0 1 auto;
    gap: 6px;
}

/* Task Management + Monitoring */
.tm-page {
  display: grid;
  gap: var(--page-section-gap);
}
.tm-topbar {
  justify-content: space-between;
}
.tm-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--page-section-gap);
}
.tm-metrics-strip,
.tm-rate-strip {
  display: grid;
  gap: 0;
  padding: 0;
  box-shadow: none;
  overflow: hidden;
}
.tm-metrics-strip {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.tm-rate-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.tm-metrics-strip div,
.tm-rate-strip div {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-right: 1px solid var(--bd1);
}
.tm-metrics-strip div:last-child,
.tm-rate-strip div:last-child {
  border-right: 0;
}
.tm-metrics-strip span,
.tm-rate-strip span {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tm-metrics-strip strong,
.tm-rate-strip strong {
  color: var(--tx1);
  font-size: 16px;
}
.tm-summary-card {
  min-height: 76px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  box-shadow: none;
}
.tm-summary-card i { color: var(--blue); }
.tm-summary-card span,
.tm-table td span,
.tm-user-snapshot span,
.tm-intern-card span {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
}
.tm-summary-card strong {
  grid-column: 1 / -1;
  color: var(--tx1);
  font-size: 24px;
  line-height: 1;
}
.tm-tabs .filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.tm-filter {
  display: grid;
  gap: 10px;
  padding: 10px;
  box-shadow: none;
  /* .panel clips overflow by default; the More-filters dropdown below is an
     absolutely-positioned popover that must be allowed to escape the panel
     bounds instead of being clipped at its bottom edge. */
  overflow: visible;
}
/* Single-row filter bar: primary fields, the More-filters trigger, and Apply
   all sit inline. The trigger only expands a floating dropdown (position:
   absolute below), so opening it never pushes this row to a second line. */
.tm-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tm-filter-row .form-select,
.tm-filter-row .form-input {
  flex: 1 1 132px;
  min-width: 110px;
}
.tm-filter-row .btn {
  flex: 0 0 auto;
  margin-left: auto;
}
.tm-filter .btn {
  min-height: 36px;
}
/* Progressive disclosure: low-frequency filters tuck behind a floating drawer
   anchored to the trigger, so it never affects the row's height. */
.tm-more-filters {
  position: relative;
  flex: 0 0 auto;
}
.tm-more-filters > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  height: 36px;
  padding: 5px 9px;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  color: var(--tx2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.tm-more-filters > summary::-webkit-details-marker { display: none; }
.tm-more-filters > summary:hover { background: var(--s3); border-color: var(--bd3); }
.tm-more-filters[open] > summary {
  color: var(--blue-dk);
  background: var(--blue-lt);
  border-color: var(--blue-bd);
}
.tm-more-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
}
.tm-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 8px;
  align-items: center;
  position: absolute;
  top: calc(100% + 6px);
  /* Right-anchored: the trigger sits near the right edge of the filter row
     (right before Apply), so a left:0 popover expanded rightward off-screen.
     Anchoring to the trigger's right edge and growing leftward keeps it
     inside the panel/viewport instead. */
  right: 0;
  left: auto;
  z-index: 60;
  width: max-content;
  max-width: min(420px, 90vw);
  padding: 10px;
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  box-shadow: 0 14px 28px rgba(17,24,39,.12);
}
.tm-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px 3px 9px;
  border: 1px solid var(--bd2);
  border-radius: 999px;
  background: var(--s2);
  color: var(--tx2);
  font-size: 10.5px;
  text-decoration: none;
}
.tm-chip:hover { border-color: var(--red-bd); color: var(--red); }
.tm-chip .lucide { width: 12px; height: 12px; opacity: .7; }
.tm-chip-clear {
  padding: 3px 10px;
  color: var(--tx3);
  font-weight: 600;
}
.tm-chip-clear:hover { color: var(--tx1); border-color: var(--bd3); }
.tm-check {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tx2);
  font-size: 11px;
}
.tm-check input { margin: 0; }
.tm-panel {
  overflow: visible;
  border-radius: var(--radius-xl);
}
.tm-panel > .panel-head:first-child,
.tm-detail-panel > .panel-head:first-child {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.tm-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
  gap: var(--page-section-gap);
  align-items: start;
}
.tm-detail-panel {
  /* Was position:sticky; top:42px — disabled defensively. Sticky items inside
     a CSS grid row with align-items:start have documented cross-browser
     quirks around containing-block/width resolution; ruling it out entirely
     while the header-overlap report is investigated further. */
  position: static;
  overflow: visible;
  border-radius: var(--radius-xl);
  box-shadow: none;
  /* Clear the sticky topbar/ticker when "View details" jumps to #tmDetail. */
  scroll-margin-top: 76px;
}
/* Briefly highlight the detail panel when reached via the View-details anchor,
   so the update is obvious even when it sits beside/below the table. */
.tm-detail-panel:target {
  animation: tmDetailFlash 1.4s ease;
}
@keyframes tmDetailFlash {
  0%, 100% { box-shadow: none; }
  20%, 40% { box-shadow: 0 0 0 2px var(--blue), 0 8px 24px rgba(59,130,246,.18); }
}
.tm-table td {
  vertical-align: top;
  white-space: normal;
}
/* Base .tracs-table th forces white-space:nowrap sitewide, which combined
   with table-layout:fixed's narrow % columns made long headers ("Time Left /
   Overdue", "Last Update") and long cell values (full date/time strings)
   overflow their column and visually collide with the neighboring column.
   Let both wrap onto a second line instead; the Actions column (icon
   buttons only) stays nowrap via the more specific nth-child(8) rule below. */
.tm-table th {
  white-space: normal;
}
.tm-sort-btn {
  display: grid;
  width: 100%;
  min-height: 22px;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 6px;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.tm-sort-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-sort-icon {
  justify-self: end;
  width: 12px;
  height: 12px;
  color: var(--tx3);
  opacity: .62;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.tm-sort-btn:hover,
.tm-sort-btn:focus-visible {
  color: var(--blue);
  outline: none;
}
.tm-sort-btn:hover .tm-sort-icon,
.tm-sort-btn:focus-visible .tm-sort-icon,
.tm-table th[aria-sort="ascending"] .tm-sort-icon,
.tm-table th[aria-sort="descending"] .tm-sort-icon {
  color: var(--blue);
  opacity: 1;
}
.tm-table td strong,
.tm-user-snapshot strong,
.tm-intern-card strong {
  display: block;
  color: var(--tx1);
  font-size: 12px;
  font-weight: 700;
}
/* Task title doubles as the "view details" action (kebab dropped its own
   entry for this — click the title instead, same pattern as .um-user-name). */
.tm-task-title-link {
  display: block;
  color: var(--tx1);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.tm-task-title-link:hover { color: var(--blue); text-decoration: underline; }
.tm-table td span {
  display: block;
  margin-top: 3px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-clickable-row {
  cursor: pointer;
}
.tm-clickable-row:hover .tm-task-title-link,
.tm-clickable-row:focus-visible .tm-task-title-link {
  color: var(--blue);
}
.tm-clickable-row:focus {
  outline: none;
}
.tm-clickable-row:focus-visible td {
  background: var(--blue-lt);
  box-shadow: inset 0 1px 0 var(--blue-bd), inset 0 -1px 0 var(--blue-bd);
}
.tm-clickable-row td:last-child,
.tm-clickable-row td:last-child * {
  cursor: default;
}
/* Fixed layout with explicit column widths so the table fits the panel
   without a horizontal scrollbar, instead of growing to fit long content. */
.tm-table {
  table-layout: fixed;
}
/* .tm-panel has overflow:visible (no scroll container of its own), so the
   generic .tracs-table th sticky-header rule escapes to the page's own
   scroll — on shorter viewports the header then "sticks" to the browser
   viewport top while the panel's own head ("N shown") is still in normal
   flow nearby, visually overlapping it. This table doesn't need a frozen
   header, so opt back out to normal, non-sticky flow. */
.tm-table th {
  position: static;
  top: auto;
  z-index: auto;
}
/* 7 columns after merging Status + Time Left/Overdue into one Status & SLA cell. */
.tm-table th:nth-child(1), .tm-table td:nth-child(1) { width: 24%; }
.tm-table th:nth-child(2), .tm-table td:nth-child(2) { width: 17%; }
.tm-table th:nth-child(3), .tm-table td:nth-child(3) { width: 8%; }
.tm-table th:nth-child(4), .tm-table td:nth-child(4) { width: 14%; }
.tm-table th:nth-child(5), .tm-table td:nth-child(5) { width: 15%; }
.tm-table th:nth-child(6), .tm-table td:nth-child(6) { width: 16%; }
.tm-table th:nth-child(7), .tm-table td:nth-child(7) { width: 6%; text-align: right; white-space: nowrap; }
/* Merged Status & SLA cell: status pill with subordinate overdue/time-left caption. */
.tm-status-cell { white-space: normal; }
.tm-status-cell .tm-sla {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  white-space: nowrap;
}
/* .tm-table uses inline .tm-row-actions buttons, not the absolute
   .row-action-menu trigger, so it doesn't need the ~48px of reserved
   right padding the generic .tracs-table td:last-child sets aside for that
   trigger. Reclaim it (and trim side padding) so the three 28px icon
   buttons fit without being squeezed or clipped even on a narrow
   ~1280px (default macOS) viewport. */
.tm-table td:last-child { padding-left: 8px; padding-right: 8px; }
.tm-table td:nth-child(1) strong,
.tm-table td:nth-child(1) span,
.tm-table td:nth-child(2) span {
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: clip;
}
.tm-performance-grid,
.tm-intern-grid {
  display: grid;
  gap: var(--page-section-gap);
  padding: 10px;
}
.tm-performance-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tm-intern-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tm-user-snapshot,
.tm-intern-card {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}
.tm-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--page-section-gap);
}
.tm-breakdown-panel {
  overflow: hidden;
  box-shadow: none;
}
.tm-breakdown-list {
  display: grid;
}
.tm-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--bd1);
}
.tm-breakdown-row:last-child {
  border-bottom: 0;
}
.tm-breakdown-row strong {
  min-width: 0;
  color: var(--tx1);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-breakdown-row span {
  grid-column: 1 / -1;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9.5px;
}
.tm-breakdown-row em {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
}
.tm-snap-stats,
.tm-intern-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tm-snap-stats span,
.tm-intern-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--bd1);
  border-radius: 999px;
  background: var(--s1);
}
.tm-form {
  display: grid;
  gap: 14px;
}
.tm-form-section {
  display: grid;
  gap: 12px;
}
.tm-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx3);
}
.tm-req { color: var(--tracs-status-critical, #d84c4c); font-weight: 700; }
/* "Assign to" grouping — a plain section separated by a divider, not a heavy
   tinted box. */
.tm-assign-section {
  padding-top: 14px;
  border-top: 1px solid var(--bd1);
}
/* Compact the enhanced multiselects here. The control only renders "N selected"
   text (no inline chips), so the global .is-multiple 112px chip-area min-height
   is dead vertical space in this modal — collapse it to a single-line control. */
.tm-assign-section .tracs-select.is-multiple .tracs-select-trigger {
  min-height: 38px;
  align-items: center;
  padding: 8px 10px;
}
.tm-assign-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tx3);
}
.tm-assign-hint .lucide { flex-shrink: 0; margin-top: 1px; color: var(--blue); }
.tm-assign-section .form-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tm-assign-section .form-label .lucide { color: var(--tx4); }
.tm-field-hint {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--tx4);
  line-height: 1.5;
}
/* Cadence toggle (one-time vs recurring) — segmented control, not a checkbox,
   so it reads as "answer this question" rather than "pick from a checklist". */
.tm-cadence-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  width: fit-content;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s1);
}
.tm-cadence-btn {
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: calc(var(--r2) - 2px);
  background: transparent;
  color: var(--tx3);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tm-cadence-btn:hover { color: var(--tx1); }
.tm-cadence-btn.active { background: var(--blue-lt); color: var(--blue); border-color: var(--blue-bd); }
.tm-recur-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}
.tm-recur-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tm-recur-chip {
  padding: 5px 12px;
  border: 1px solid var(--bd1);
  border-radius: 999px;
  background: var(--s1);
  color: var(--tx2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.tm-recur-chip:hover { border-color: var(--blue-bd); color: var(--blue); }
.tm-recur-chip.active { background: var(--blue-lt); color: var(--blue); border-color: var(--blue-bd); }
.tm-recur-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-recur-custom .form-input { max-width: 90px; }
.tm-recur-custom span { color: var(--tx3); font-size: 11px; }
.tm-due-hint {
  margin: 4px 0 0;
  font-size: 10.5px;
  color: var(--tx4);
  line-height: 1.5;
}
.tm-detail-body {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.tm-detail-title strong {
  display: block;
  color: var(--tx1);
  font-size: 13px;
}
.tm-detail-title span,
.tm-detail-grid span {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 10px;
}
.tm-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bd1);
}
.tm-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tm-row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
}
.tm-detail-grid div {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}
.tm-detail-notes {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s2);
}
.tm-detail-notes span,
.tm-history-title {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tm-detail-notes strong {
  color: var(--tx1);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.tm-history {
  display: grid;
  gap: 7px;
}
.tm-history-row,
.tm-history-empty {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-top: 1px solid var(--bd1);
}
.tm-history-row strong {
  color: var(--tx1);
  font-size: 11px;
}
.tm-history-row span,
.tm-history-row em,
.tm-history-empty {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9.5px;
  font-style: normal;
  line-height: 1.45;
}
.tm-detail-grid strong {
  color: var(--tx1);
  font-size: 11.5px;
}
.tm-ok { color: var(--green) !important; }
.tm-danger { color: var(--red) !important; }
.tm-flash {
  padding: 10px 12px;
  color: var(--tx2);
  box-shadow: none;
}
.tm-flash-success { border-color: var(--green-bd); background: var(--green-lt); }
.tm-flash-error { border-color: var(--red-bd); background: var(--red-lt); }

/* Topbar: persistent overdue counter, always visible (not in the scrolling ticker). */
.tm-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tm-overdue-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--red-bd);
  border-radius: 999px;
  background: var(--red-lt);
  color: var(--red);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tm-overdue-pill strong { font-size: 13px; font-weight: 800; }
.tm-overdue-pill:hover { border-color: var(--red); }
.tm-overdue-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 60%, transparent);
  animation: tmPulse 1.8s ease-out infinite;
}
@keyframes tmPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 0%, transparent); }
}

/* KPI clusters: Workload / Risk / Performance, each labeled; Risk is emphasized. */
.tm-kpi-clusters {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 6fr);
  gap: var(--page-section-gap);
  align-items: stretch;
}
.tm-cluster {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--bd1);
  border-radius: var(--r2);
  background: var(--s1);
  overflow: hidden;
}
.tm-cluster-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--bd1);
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tm-cluster-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}
.tm-kpi {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 11px 12px;
  border-right: 1px solid var(--bd1);
  border-top: 1px solid var(--bd1);
}
.tm-cluster-body .tm-kpi:nth-child(-n+3) { border-top: 0; }
.tm-kpi span {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tm-kpi strong { color: var(--tx1); font-size: 16px; line-height: 1.1; }
.tm-kpi-note {
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 8.5px;
  font-style: normal;
}
.tm-kpi-muted strong { color: var(--tx4); }
/* Risk cluster: the actionable one — red accent + larger numbers. */
.tm-cluster-risk.is-active {
  border-color: var(--red-bd);
  background: var(--red-lt);
}
.tm-cluster-risk.is-active .tm-cluster-head {
  border-bottom-color: var(--red-bd);
  color: var(--red);
}
.tm-cluster-risk.is-active .tm-kpi { border-color: var(--red-bd); }
.tm-cluster-risk .tm-kpi strong { font-size: 22px; }
.tm-cluster-risk.is-active .tm-kpi strong { color: var(--red); }

/* Detail panel: collapsible sections (progressive disclosure). */
.tm-detail-section > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--bd1);
  color: var(--tx2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.tm-detail-section > summary::-webkit-details-marker { display: none; }
.tm-detail-section .tm-caret { transition: transform .15s ease; color: var(--tx3); }
.tm-detail-section[open] > summary .tm-caret { transform: rotate(90deg); }
.tm-detail-section .tm-detail-grid,
.tm-detail-section .tm-history { padding-top: 4px; padding-bottom: 8px; }

@media (max-width: 1100px) {
  .tm-kpi-clusters { grid-template-columns: 1fr 1fr; }
  .tm-kpi-clusters .tm-cluster:last-child { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .tm-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tm-metrics-strip,
  .tm-rate-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tm-split-layout {
    grid-template-columns: minmax(0, 6fr) minmax(260px, 4fr);
  }
  .tm-topbar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .tm-summary-grid,
  .tm-metrics-strip,
  .tm-rate-strip,
  .tm-split-layout {
    grid-template-columns: 1fr;
  }
  .tm-kpi-clusters {
    grid-template-columns: 1fr;
  }
  .tm-kpi-clusters .tm-cluster:last-child {
    grid-column: auto;
  }
  .tm-detail-panel {
    position: static;
  }
  .tm-table {
    min-width: 880px;
  }
}
.feedback-toolbar-panel .month-select-wrap {
    flex: 0 0 auto;
}
.feedback-toolbar-panel .month-select-wrap:nth-child(1) .compact-select { width: 150px; }
.feedback-toolbar-panel .month-select-wrap:nth-child(2) .compact-select { width: 150px; }
.feedback-toolbar-panel .month-select-wrap:nth-child(3) .compact-select { width: 145px; }
.feedback-toolbar-panel .month-select-wrap:nth-child(4) .compact-select,
.feedback-toolbar-panel .month-select-wrap:nth-child(5) .compact-select { width: 118px !important; }
.feedback-toolbar-panel .btn-reset {
    padding-left: 8px;
    padding-right: 8px;
}
.feedback-search-panel {
    flex: 1 1 280px;
    min-width: 260px;
    max-width: 420px;
    padding: 8px;
}
.feedback-search-panel .search-input {
    width: 100%;
    height: var(--toolbar-h);
    min-height: var(--toolbar-h);
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--toolbar-fz);
    line-height: 1;
    border-radius: var(--r2);
}
@media (max-width: 860px) {
    .feedback-toolbar-row {
        align-items: stretch;
        flex-direction: column;
    }
    .feedback-toolbar-panel,
    .feedback-search-panel {
        width: 100%;
        max-width: none;
    }
}
.cf-detail-modal { width: 680px; }
.cf-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cf-detail-section {
    min-width: 0;
    padding: 10px;
    background: var(--s2);
    border: 1px solid var(--bd1);
    border-radius: var(--r2);
}
.cf-detail-wide { grid-column: 1 / -1; }
.cf-detail-label {
    margin-bottom: 5px;
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tx3);
    text-transform: uppercase;
}
.cf-detail-value {
    min-height: 18px;
    color: var(--tx1);
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.cf-detail-value .cf-chip-row { max-width: none; }
.cf-detail-mono { font-family: var(--mono); font-size: 11px; }
.cf-detail-notes {
    white-space: pre-wrap;
    color: var(--tx2);
}
@media (max-width: 720px) {
    .cf-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    .fb-field-reference,
    .fb-field-email,
    .fb-field-resolution { grid-column: span 1; grid-row: auto; }
    .fb-field-service,
    .fb-field-reason { grid-column: span 1; grid-row: auto; }
    .fb-field-details { grid-column: span 1; grid-row: auto; }
    .fb-inline-action { grid-column: span 1; grid-row: auto; }
}
@media (max-width: 760px) {
    .fb-inline-grid { grid-template-columns: 1fr; }
    .fb-field-reference,
    .fb-field-email,
    .fb-field-resolution,
    .fb-field-service,
    .fb-field-reason,
    .fb-field-details,
    .fb-inline-action { grid-column: auto; }
}

/* Dashboard Card Enhancements */
.stat-ic { 
    position: absolute; top: 12px; right: 12px; 
    opacity: 0.1; color: var(--tx1); 
}
.stat-ic i { width: 24px; height: 24px; stroke-width: 1.5; }
.stat-meta { font-size: 9.5px; color: var(--tx4); margin-top: 4px; font-family: var(--mono); }


.shift-group {
  margin-bottom: 12px;
}
.shift-group:last-child {
  margin-bottom: 0;
}
.shift-group-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0 12px 6px;
  border-bottom: 1px solid var(--bd1);
  margin-bottom: 6px;
}
.shift-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: var(--r2);
  transition: background .15s;
}
.shift-item:hover {
  background: var(--s3);
}
.shift-item.resolved .shift-text {
  text-decoration: line-through;
  color: var(--tx3);
}
.shift-priority {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.shift-priority.critical { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,.4); }
.shift-priority.high     { background: var(--amber); }
.shift-priority.medium   { background: #6ba3fa; }
.shift-priority.low      { background: var(--bd3); }
.shift-text {
  flex: 1;
  min-width: 0;
  font-size: var(--item-title-size);
  font-weight: var(--item-title-weight);
  line-height: var(--item-title-line);
  color: var(--item-title-color);
  letter-spacing: var(--item-title-tracking);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Centralized Icon System ─────────────────────────
   Standard: 1.8 for 14-20px UI icons (this default), 2.2 for
   <=12px inline/metadata icons (.btn svg overrides below). */
.lucide {
  stroke-width: 1.8px;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
}

.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

.empty-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tx3);
  margin-bottom: 12px;
}
.empty-ic .lucide {
  width: 32px;
  height: 32px;
  stroke-width: 1.5px;
}

/* ── Topbar Enhancements ───────────────────────────────────────── */
.topbar-divider {
  width: 1px;
  height: 24px;
  background: var(--bd1);
  margin: 0 5px;
}

.shift-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  height: 36px;
  background: var(--s2);
  border: 1px solid var(--bd1);
  border-radius: var(--r);
  justify-content: center;
}
.shift-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
  flex-shrink: 0;
  animation: pulse-glow 1.2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  0% { opacity: 0.6; box-shadow: 0 0 4px currentColor; }
  100% { opacity: 1; box-shadow: 0 0 14px currentColor; }
}

.shift-dot.indigo { color: var(--blue); background: var(--blue); }
.shift-dot.amber  { color: var(--amber); background: var(--amber); }
.shift-dot.blue   { color: var(--cyan); background: var(--cyan); }

.shift-info {
  display: flex;
  flex-direction: column;
  height: 34px; /* Matches internal height of parent (36 - 2px borders) */
  overflow: hidden;
  position: relative;
  min-width: 60px;
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.shift-slider {
  display: flex;
  flex-direction: column;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
  height: 68px; /* 34 * 2 */
}
.shift-slider.show-greeting {
  transform: translateY(-34px);
}
.shift-slide {
  height: 34px;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--tx1);
  font-family: var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
}
.greeting-slide {
  color: var(--tx3);
  font-weight: 500;
}

.notif-bell-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  color: var(--tx3);
  position: relative;
  transition: all var(--dur);
  cursor: pointer;
}
.notif-bell-btn.is-open {
  background: var(--s3);
  color: var(--tx2);
}
.notif-bell-btn.is-open .notif-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: -10px;
  width: 320px;
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s var(--ease);
  overflow: hidden;
}


.notif-drop-head {
  padding: 12px 14px;
  background: var(--s2);
  border-bottom: 1px solid var(--bd1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-drop-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-family: var(--mono);
}
.notif-drop-link {
  font-size: 10px;
  color: var(--blue);
  font-weight: 600;
}
.notif-drop-link:hover { text-decoration: underline; }

.notif-drop-body {
  max-height: 350px;
  overflow-y: auto;
}
.notif-drop-empty {
  padding: 30px 20px;
  text-align: center;
  font-size: 11px;
  color: var(--tx4);
}
.notif-drop-empty.is-compact {
  padding: 14px;
}
.notif-permission-callout {
  margin: 10px;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--blue-bd);
  border-radius: var(--r2);
  background: var(--blue-lt);
  color: var(--tx2);
}
.notif-permission-callout strong,
.notif-permission-callout span {
  display: block;
  min-width: 0;
}
.notif-permission-callout strong {
  color: var(--tx1);
  font-size: 11px;
  font-weight: 800;
}
.notif-permission-callout span {
  margin-top: 2px;
  color: var(--tx3);
  font-size: 10.5px;
  line-height: 1.35;
}
.notif-permission-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.profile-notification-callout {
  margin: 0;
}
.notif-section-label {
  padding: 9px 14px 6px;
  border-bottom: 1px solid var(--bd1);
  background: color-mix(in srgb, var(--s2) 82%, transparent);
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.notif-drop-item {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--bd1);
  transition: background var(--dur);
  cursor: pointer;
  text-decoration: none;
}
.notif-drop-item:last-child { border-bottom: none; }
.notif-drop-item:hover { background: var(--s2); }
.notif-system-item.is-unread .notif-drop-text {
  color: var(--tx1);
}
.notif-system-item.is-unread .notif-drop-label::after {
  content: ' NEW';
  color: var(--blue);
}

.notif-drop-status {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.notif-drop-status.status-overdue { background: var(--red); box-shadow: 0 0 6px var(--red); }
.notif-drop-status.status-today { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.notif-drop-status.status-upcoming { background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.notif-drop-status.status-now { background: var(--red); box-shadow: 0 0 6px var(--red); }
.notif-drop-status.status-soon { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.notif-drop-status.status-cases { background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.notif-drop-status.status-abuse { background: var(--red); box-shadow: 0 0 6px var(--red); }
.notif-drop-status.status-checklist { background: var(--green); box-shadow: 0 0 6px var(--green); }
.notif-drop-status.status-meeting { background: var(--purple); box-shadow: 0 0 6px var(--purple); }
.notif-drop-status.status-mom { background: var(--purple); box-shadow: 0 0 6px var(--purple); }
.notif-drop-status.status-tasks { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.notif-drop-status.status-shift { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.notif-drop-status.status-meeting-live { background: var(--green); box-shadow: 0 0 6px var(--green); }
.notif-drop-status.status-meeting-soon { background: var(--purple); box-shadow: 0 0 6px var(--purple); }
.notif-drop-status.status-reminders { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.notif-drop-status.status-pending { background: var(--tx3); box-shadow: 0 0 6px var(--tx3); }

.notif-drop-info { flex: 1; min-width: 0; }
.notif-drop-label {
  margin-bottom: 1px;
  color: var(--tx4);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.notif-drop-text {
  font-size: var(--item-title-size);
  font-weight: var(--item-title-weight);
  color: var(--item-title-color);
  line-height: var(--item-title-line);
  letter-spacing: var(--item-title-tracking);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-drop-meta {
  font-size: 10px;
  color: var(--tx3);
  margin-top: 2px;
  font-family: var(--mono);
}

.bell-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 2px solid var(--s1);
  font-family: var(--mono);
}

/* ── Flatpickr Custom TRACS Theme ──────────────────────────── */
.flatpickr-calendar {
  background: var(--s1) !important;
  border: 1px solid var(--bd2) !important;
  border-radius: var(--r3) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font) !important;
  padding: 8px !important;
}
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none !important; }

.flatpickr-day {
  border-radius: var(--r) !important;
  color: var(--tx2) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}
.flatpickr-day:hover { background: var(--s3) !important; }
.flatpickr-day.today { border-color: var(--tracs-calendar-accent) !important; color: var(--tracs-calendar-accent) !important; font-weight: 700 !important; }
.flatpickr-day.selected { background: var(--tracs-calendar-accent) !important; color: #fff !important; border-color: var(--tracs-calendar-accent) !important; }

.flatpickr-months { background: var(--s2) !important; border-radius: var(--r) var(--r) 0 0 !important; margin: -8px -8px 8px -8px !important; padding: 10px 0 !important; border-bottom: 1px solid var(--bd1) !important; }
.flatpickr-month { color: var(--tx1) !important; }
.flatpickr-current-month { font-size: 12px !important; font-weight: 600 !important; }
.flatpickr-weekday { color: var(--tx3) !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; }

.flatpickr-days {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: block !important;
  overflow: hidden !important;
}

.flatpickr-days .dayContainer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 32px;
}

.flatpickr-calendar.tracs-flatpickr-dark { background: #1a1b1e !important; border-color: #2c2e33 !important; }
.flatpickr-calendar.tracs-flatpickr-dark .flatpickr-day { color: #ced4da !important; }
.flatpickr-calendar.tracs-flatpickr-dark .flatpickr-months { background: #25262b !important; border-color: #2c2e33 !important; }
.flatpickr-calendar.tracs-flatpickr-dark .flatpickr-month { color: #fff !important; }
.flatpickr-calendar.tracs-flatpickr-dark .flatpickr-weekday { color: #868e96 !important; }

/* Shift row action controls */

.shift-row-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  white-space: nowrap;
  margin-left: var(--sp-2);
  vertical-align: middle;
}

.shift-report-table th:nth-child(5) {
  width: 260px;
  text-align: left;
  padding-right: 92px;
}

.tracs-table td.shift-actions-cell {
  width: 260px;
  min-width: 260px;
  padding-right: 92px;
  text-align: left;
  white-space: nowrap;
}

.shift-actions-cell > .badge {
  vertical-align: middle;
}

.shift-row-controls .row-action-menu {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
}

.shift-resolve-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    background 140ms ease,
    color 140ms ease,
    border-color 140ms ease;
}

/* Green hover state for resolve button */
.shift-resolve-btn:hover,
.shift-resolve-btn:focus-visible {
  background: var(--green-lt);
  color: var(--green);
  border-color: var(--green-bd);
}

/* Ensure three-dot menu stays visible (do not hide) */
.row-action-menu {
  display: inline-block;
}

.row-action-menu summary {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.tracs-table td.shift-actions-cell .shift-row-controls {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  margin-left: 0;
}

@media (max-width: 720px) {
  .um-avatar-editor {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .um-avatar-editor-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .avatar-crop-grid {
    grid-template-columns: 1fr;
  }
  .avatar-crop-side {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
  }
  #avatarPreviewCanvas {
    width: 82px;
    height: 82px;
    grid-row: span 2;
  }
  .avatar-crop-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .main.case-main {
    flex: 0 0 auto;
    width: 100%;
    height: calc(100dvh - 72px);
    min-height: 0;
    overflow: hidden;
  }
  .case-page {
    height: 100%;
    padding: 10px;
  }
  .case-toolbar > .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .case-toolbar .filter-tab {
    flex: 0 0 auto;
  }
}
/* Reusable unsaved-changes protection */
.tracs-unsaved-bar {
  position: sticky;
  top: 0;
  z-index: 34;
  display: flex;
  width: 100%;
  min-height: 44px;
  margin-bottom: 10px;
  padding: 7px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--amber-bd);
  border-radius: var(--r);
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--amber-lt) 92%, var(--s1)) 0 12px,
      color-mix(in srgb, var(--amber-lt) 72%, var(--s1)) 12px 24px
    );
  color: var(--tx1);
  box-shadow: var(--shadow-lg);
}

/* Glassy, iOS/macOS-style frosted fill -- only where backdrop-filter is
   actually supported, so browsers without it keep the solid striped
   background above instead of a too-sheer, unblurred tint. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .tracs-unsaved-bar {
    background: color-mix(in srgb, var(--amber-lt) 55%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
  }
}

.tracs-unsaved-bar[hidden] {
  display: none !important;
}

/* The guard hides "Save now" via the hidden attribute when the dirty scope
   has no save handler (e.g. a real-time-saved control outside any <form>),
   but .btn's own `display` rule outranks the bare [hidden] UA default —
   without this it stayed visible and did nothing when clicked. */
.tracs-unsaved-bar__actions .btn[hidden] {
  display: none !important;
}

.tracs-unsaved-bar__message,
.tracs-unsaved-bar__actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tracs-unsaved-bar__message > svg {
  flex: 0 0 auto;
  color: var(--amber);
}

.tracs-unsaved-bar__message strong,
.tracs-unsaved-bar__message small {
  display: block;
}

.tracs-unsaved-bar__message strong {
  font-size: 12px;
}

.tracs-unsaved-bar__message small {
  margin-top: 1px;
  color: var(--tx2);
  font-size: 10px;
}

.tracs-unsaved-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgb(5 12 25 / .74);
  backdrop-filter: blur(10px) saturate(130%);
}

.tracs-unsaved-dialog-overlay.hidden {
  display: none;
}

.tracs-unsaved-dialog {
  display: grid;
  width: min(520px, 100%);
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  background: var(--s1);
  box-shadow: 0 24px 70px rgb(0 0 0 / .28);
}

.tracs-unsaved-dialog__icon {
  display: grid;
  width: 42px;
  height: 42px;
  border: 1px solid var(--bd2);
  border-radius: var(--r2);
  place-items: center;
  color: var(--blue);
  background: var(--s2);
}

.tracs-unsaved-dialog h2 {
  margin: 0;
  color: var(--tx1);
  font-size: 17px;
}

.tracs-unsaved-dialog p {
  margin: 5px 0 0;
  color: var(--tx2);
  font-size: 12px;
  line-height: 1.5;
}

.tracs-unsaved-dialog__actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 620px) {
  .tracs-unsaved-bar {
    position: relative;
    align-items: flex-start;
    flex-direction: column;
  }

  .tracs-unsaved-bar__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .tracs-unsaved-dialog__actions .btn {
    flex: 1 1 100%;
  }
}

/* ── Shift handover: multi-item modal ─────────────────────── */
/* .modal-body is display:flex;flex-direction:column;gap:12px, so every direct
   child (form-row, form-group, shift-items-head, shift-items-container, the
   add-item button) already gets a uniform 12px rhythm for free. Nothing in
   this block should add its own margin on top of that — that was the source
   of uneven spacing (a double gap above "Handover Items"). */
.shift-items-head { display: flex; align-items: center; justify-content: space-between; }
.shift-items-count { font-size: 10px; color: var(--tx3); font-family: var(--mono); }
.shift-items-container:empty { display: none; }
.shift-items-container { display: flex; flex-direction: column; gap: 10px; }
.shift-item-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--bd1); border-radius: var(--r2);
  padding: 12px; background: var(--s2);
}
.shift-item-card-head { display: flex; align-items: center; gap: 8px; }
.shift-item-card-head .shift-i-title { flex: 1; min-width: 0; }
.shift-item-idx {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--s3); color: var(--tx2); font-size: 11px; font-weight: 700;
  font-family: var(--mono); display: flex; align-items: center; justify-content: center;
}
.shift-item-remove { flex-shrink: 0; }

/* Minimalist per-item screenshot uploader: a small pill button + tiny chips,
   not a full dashed dropzone (that's reserved for the shared shift summary). */
.shift-item-photos {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.shift-item-photo-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shift-item-photo-chip {
  position: relative; width: 30px; height: 30px; border-radius: 5px;
  overflow: hidden; border: 1px solid var(--bd2); flex-shrink: 0;
}
.shift-item-photo-chip button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.shift-item-photo-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shift-item-photo-remove {
  position: absolute; top: -4px; right: -4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--s1); border: 1px solid var(--bd2);
  color: var(--tx2); display: flex; align-items: center; justify-content: center;
}
.shift-item-photo-remove svg { width: 8px; height: 8px; }
.shift-item-photo-add {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--tx3); cursor: pointer;
  border: 1px dashed var(--bd2); border-radius: var(--r2);
  padding: 4px 8px; flex-shrink: 0;
}
.shift-item-photo-add:hover { color: var(--blue); border-color: var(--blue-bd); }
.shift-item-photo-add svg { width: 12px; height: 12px; }

/* ── Shift handover: dashboard widget agent blocks ────────── */
.shift-handover-block {
  padding-top: 6px; margin-top: 6px; border-top: 1px dashed var(--bd1);
}
.shift-handover-block:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.shift-handover-agent {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 2px 12px 4px;
}
.shift-agent-name {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--tx2);
}
.shift-agent-name svg { width: 12px; height: 12px; }
.shift-agent-counts { display: inline-flex; gap: 4px; flex-shrink: 0; }
.shift-handover-summary {
  padding: 0 12px 4px; font-size: 11px; color: var(--tx2); line-height: 1.5;
}

/* ── Shift handover: reports page agent blocks ────────────── */
.shift-report-agent-block { border-top: 1px solid var(--bd1); }
.shift-report-agent-block:first-child { border-top: 0; }
.shift-report-agent-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 14px 2px;
}
.shift-report-agent-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--tx1);
}
.shift-report-agent-name svg { width: 13px; height: 13px; }
.shift-report-agent-time { color: var(--tx3); font-weight: 500; }
.shift-report-agent-count { font-size: 10px; color: var(--tx3); font-family: var(--mono); flex-shrink: 0; }
.shift-report-agent-summary {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 2px 14px 8px; font-size: 12px; color: var(--tx2); line-height: 1.5;
}
.shift-report-agent-summary .search-text { flex: 1; min-width: 0; }
.shift-report-agent-summary.is-empty { padding-top: 0; }
.shift-summary-edit {
  background: none; border: 0; color: var(--tx3); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 0;
  flex-shrink: 0;
}
.shift-summary-edit:hover { color: var(--blue); }
.shift-summary-edit svg { width: 12px; height: 12px; }
.shift-handover-photo-grid { padding: 0 14px 8px; margin-top: 0; }

/* ── View All Checklist popup: comprehensive active + history tabs. */
.checklist-all-modal { width: 560px; }
.checklist-all-body { padding-top: 12px; }
.checklist-all-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 2px;
}
.checklist-all-pane { display: none; }
.checklist-all-pane.is-active {
  display: block;
  height: min(420px, 58vh);
  min-height: 260px;
}
.checklist-all-list {
  height: 100%;
  max-height: none;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-gutter: stable;
}
#checklistAllActiveList.checklist-all-list {
  display: flex;
  flex-direction: column;
}
.checklist-all-list .tm-history-row:first-child { border-top: 0; padding-top: 0; }