/* ── Reset & Base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
[hidden] {
  display: none !important;
}
:root {
  /* Brand / status colors */
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --blue-dark: #1d4ed8;
  --green: #059669;
  --green-light: #ecfdf5;
  --amber: #d97706;
  --amber-light: #fffbeb;
  --red: #dc2626;
  --red-light: #fef2f2;
  /* Gray scale */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #18181b;
  /* Radii / shadows */
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  /* Layout */
  --sidebar-w: 210px;
  --tech-col-w: 196px;
  --row-h: 72px;
  --ruler-h: 38px;
  --sidebar-bg: #f8fafc;
  /* Fixed dark brand rails (settings/profile sidebars, login backdrop). Pinned
     dark independently of the now-light main sidebar so their white nav text
     stays legible — see Task 1 sidebar recolor. */
  --rail-bg: #111111;
  /* ── Semantic surface / text / border tokens ──────────────────
     These are the main tokens used by dark-mode overrides.
     Light-mode values match existing hardcoded values exactly. */
  --surface-base: #ffffff;
  --surface-raised: #f8fafc;
  --surface-overlay: #ffffff;
  --surface-inset: #f1f5f9;
  --surface-header: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-faint: #94a3b8;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-text: #1e293b;
  --link-color: #2563eb;
}
html,
body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: var(--gray-800);
  background: var(--gray-100);
}

/* Task 7 — baseline interaction polish for component-scoped *-btn classes
   (~298: .cl-new-btn, .gh-icon-btn, .so-close-btn, .sidenav-btn, etc.). Declared
   here, BEFORE any component button, so each component's own cursor / transition
   (declared later) overrides these via the cascade — i.e. they apply "only if
   missing." Matches the "-btn" suffix only, so the core .btn-* variants are
   unaffected. */
[class*='-btn'] {
  cursor: pointer;
  transition: all 0.15s ease;
}

/* ── App Shell ── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
#app[hidden] {
  display: none !important;
}
#app-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Global Header ── */
.global-header {
  height: 48px;
  flex-shrink: 0;
  background: var(--surface-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: relative;
  z-index: 210; /* above settings-overlay (200) so shadow always shows */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.gh-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: visible;
}
.gh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}
.gh-brand-icon {
  color: var(--gray-700);
  flex-shrink: 0;
}
.gh-brand-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gh-brand-logo {
  max-height: 28px;
  width: auto;
  object-fit: contain;
  border-radius: 3px;
  display: block;
}
.gh-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.gh-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition:
    background 0.15s,
    color 0.15s;
}
.gh-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--gray-900);
}
.gh-icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ── Header Department Pill Dropdown ── */
.gh-dept-wrap {
  position: relative;
  flex-shrink: 0;
}
.gh-dept-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 12px;
  border: 1.5px solid var(--gray-300);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
  white-space: nowrap;
}
.gh-dept-pill:hover {
  background: var(--gray-50);
  border-color: #9ca3af;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.gh-dept-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
}
.gh-dept-pill-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}
.gh-dept-chevron {
  color: #9ca3af;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.gh-dept-wrap.dd-open .gh-dept-chevron {
  transform: rotate(180deg);
}
.gh-dept-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
  min-width: 190px;
  overflow: hidden;
  z-index: 300;
  animation: ghDropIn 0.12s ease;
}
.gh-dept-dropdown[hidden] {
  display: none;
}
.gh-dept-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  text-align: left;
  transition: background 0.1s;
}
.gh-dept-item:hover {
  background: var(--gray-50);
}
.gh-dept-item.active {
  color: var(--ct-1d4ed8, #1d4ed8);
}
.gh-dept-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.gh-dept-item-label {
  flex: 1;
}
.gh-dept-item-check {
  color: #3b82f6;
  display: flex;
  align-items: center;
  margin-left: auto;
}
.gh-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--cb-dc2626, #dc2626);
  color: white;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.gh-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: var(--cb-2563eb, #2563eb);
  flex-shrink: 0;
  pointer-events: none;
}
.gh-profile-btn {
  width: 34px;
  height: 34px;
}
.gh-action-wrap {
  position: relative;
}

/* ── Header Dropdowns ── */
.gh-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  min-width: 260px;
  animation: ghDropIn 0.12s ease;
}
@keyframes ghDropIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.gh-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--gray-100);
}
.gh-dropdown-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gh-dropdown-sep {
  height: 1px;
  background: var(--gray-100);
  margin: 4px 0;
}
.gh-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--gray-700);
  text-align: left;
  transition: background 0.12s;
}
.gh-dropdown-item:hover {
  background: var(--gray-50);
}
.gh-dropdown-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--gray-400);
}
.gh-signout-btn {
  color: var(--ct-dc2626, #dc2626) !important;
}
.gh-signout-btn svg {
  color: var(--ct-dc2626, #dc2626) !important;
}
.gh-notif-header-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gh-mark-read-btn {
  font-size: 11px;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.gh-mark-read-btn:hover {
  text-decoration: underline;
}
.gh-archive-all-btn {
  font-size: 11px;
  color: var(--gray-500);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.gh-archive-all-btn:hover {
  color: var(--gray-700);
  text-decoration: underline;
}

/* Archive All inline confirmation bar */
.gh-notif-archive-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 14px;
  background: var(--amber-light);
  border-bottom: 1px solid var(--cd-fde68a, #fde68a);
  font-size: 11px;
  color: var(--ct-78350f, #78350f);
}
.gh-notif-archive-confirm[hidden] {
  display: none;
}
.gh-notif-archive-confirm span {
  flex: 1;
}
.gh-archive-confirm-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}
.gh-archive-confirm-yes {
  background: var(--cb-d97706, #d97706);
  color: white;
  border-color: var(--cd-d97706, #d97706);
}
.gh-archive-confirm-yes:hover {
  background: var(--cb-b45309, #b45309);
}
.gh-archive-confirm-no {
  background: var(--surface-base);
  color: var(--gray-600);
  border-color: var(--gray-300);
}
.gh-archive-confirm-no:hover {
  background: var(--gray-50);
}

/* Notification dropdown */
.gh-notif-dropdown {
  min-width: 320px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
}
.gh-notif-list {
  overflow-y: auto;
  flex: 1;
}
.gh-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.12s;
}
.gh-notif-item:hover {
  background: var(--gray-50);
}
.gh-notif-item.unread {
  background: var(--blue-light);
}
.gh-notif-item.unread:hover {
  background: var(--cb-dbeafe, #dbeafe);
}
.gh-notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 5px;
}
.gh-notif-dot.read {
  background: transparent;
}
.gh-notif-body {
  flex: 1;
  min-width: 0;
}
.gh-notif-text {
  font-size: 12px;
  color: var(--gray-700);
  line-height: 1.4;
}
.gh-notif-text strong {
  color: var(--gray-900);
}
.gh-notif-time {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}
.gh-notif-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-400);
}

/* Per-row archive button */
.gh-notif-archive-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-300);
  transition:
    color 0.12s,
    background 0.12s;
  margin-left: 4px;
}
.gh-notif-archive-btn svg {
  width: 14px;
  height: 14px;
}
.gh-notif-item:hover .gh-notif-archive-btn {
  color: var(--gray-500);
}
.gh-notif-archive-btn:hover {
  background: var(--gray-100);
  color: var(--gray-700) !important;
}

/* Archived notifications view */
.gh-notif-archived-item {
  opacity: 0.7;
  cursor: default;
}
.gh-notif-archived-item:hover {
  background: var(--gray-50) !important;
  opacity: 0.85;
}
.gh-notif-unarchive-btn {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 6px;
}
.gh-notif-unarchive-btn:hover {
  background: var(--blue-light);
}

/* Footer — View Archived / Back link */
.gh-notif-footer {
  padding: 7px 14px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: center;
}
.gh-view-archived-btn {
  font-size: 11px;
  color: var(--gray-400);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.gh-view-archived-btn:hover {
  color: var(--blue);
  text-decoration: underline;
}

/* Profile dropdown */
.gh-profile-dropdown {
  min-width: 220px;
  padding-bottom: 4px;
}
.gh-profile-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
}
.gh-profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
  background: var(--cb-2563eb, #2563eb);
  flex-shrink: 0;
}
.gh-profile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
}
.gh-profile-role {
  font-size: 11px;
  color: var(--gray-400);
  text-transform: capitalize;
  margin-top: 1px;
}

/* ── Universal Search Modal ── */
.gh-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.55);
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.gh-search-overlay[hidden] {
  display: none !important;
}
.gh-search-box {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 620px;
  overflow: hidden;
}
.gh-search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.gh-search-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gray-400);
}
.gh-search-input-row input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--gray-900);
  background: transparent;
}
.gh-search-input-row input::placeholder {
  color: var(--gray-400);
}
.gh-search-esc {
  font-size: 11px;
  color: var(--gray-400);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 2px 5px;
  font-family: inherit;
  flex-shrink: 0;
}
.gh-search-results {
  max-height: 440px;
  overflow-y: auto;
}
.gh-search-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-400);
}
.gh-search-section-label {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gh-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.gh-search-result:hover {
  background: var(--gray-50);
}
.gh-search-result-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
}
.gh-search-result-icon svg {
  width: 14px;
  height: 14px;
  color: var(--gray-500);
}
.gh-search-result-main {
  flex: 1;
  min-width: 0;
}
.gh-search-result-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gh-search-result-sub {
  font-size: 11px;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow: visible; /* allows collapse button to protrude into main content */
  position: relative;
  z-index: 20;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.07);
  transition:
    width 0.22s ease,
    min-width 0.22s ease;
}
.sidebar.collapsed {
  width: 56px;
  min-width: 56px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.sidenav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-left: 3px solid transparent; /* reserved so the active accent bar adds no layout shift */
  border-radius: var(--radius);
  background: transparent;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.15s,
    color 0.15s;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.sidenav-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #6b7280;
}
.sidenav-btn:hover {
  background: #f1f5f9;
  color: #111827;
}
.sidenav-btn.active {
  background: #eff6ff;
  color: #1d4ed8;
  border-left-color: #2563eb;
}
/* Dark mode: the main sidebar rail is the neutral #18181b. Flip nav text to the
   slate palette — every state verified ≥4.5:1 on the dark rail. Mirrors the
   light-mode states above. */
[data-theme='dark'] .sidebar {
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05);
}
[data-theme='dark'] .sidenav-btn {
  color: #94a3b8;
}
[data-theme='dark'] .sidenav-btn svg {
  color: #64748b;
}
[data-theme='dark'] .sidenav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}
[data-theme='dark'] .sidenav-btn.active {
  background: #263548;
  color: #e2e8f0;
  border-left-color: #3b82f6;
}
.sidenav-label {
  transition: opacity 0.15s;
}
.sidebar.collapsed .sidebar-nav {
  padding: 10px 4px;
}
.sidebar.collapsed .sidenav-btn {
  justify-content: center;
  padding: 10px;
  gap: 0;
}
.sidebar.collapsed .sidenav-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* ── Sidebar edge toggle — hover-reveal chevron on the sidebar's right edge ──
   Hidden by default; fades in only while the sidebar (or collapsed rail) is
   hovered. Click toggles the collapsed rail. Uses the brand primary (var(--blue)). */
.sidebar-edge-toggle {
  position: absolute;
  top: 50%;
  right: -12px; /* straddles the sidebar/content boundary */
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--surface-base); /* ring so it reads against either side */
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 30;
  opacity: 0; /* not visible when not hovering */
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  transition:
    opacity 0.18s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.sidebar-edge-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}
/* Reveal while hovering the sidebar — works for both the full panel and the
   thin collapsed rail (the button is a sidebar descendant, so hovering it
   keeps the sidebar :hover state active — no flicker). */
.sidebar:hover .sidebar-edge-toggle {
  opacity: 1;
  pointer-events: auto;
}
.sidebar-edge-toggle:hover {
  background: color-mix(in srgb, var(--blue) 85%, #000);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.38);
}
.sidebar-edge-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* Collapsed rail: chevron flips to point right (reopen). */
.sidebar.collapsed .sidebar-edge-toggle svg {
  transform: rotate(180deg);
}

/* ── Sidebar footer (legacy — kept for compat) ── */
.sidebar-footer {
  display: none;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius);
  cursor: default;
  white-space: nowrap;
}
.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
}
.sidebar-user-info {
  flex: 1;
  min-width: 0;
  transition: opacity 0.15s;
}
.sidebar-user-name {
  font-size: 12px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: capitalize;
}
.sidebar-logout-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius);
  transition:
    color 0.15s,
    opacity 0.15s;
  flex-shrink: 0;
}
.sidebar-logout-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}
.sidebar-logout-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
.sidebar.collapsed .sidebar-footer {
  padding: 10px 4px 12px;
}
.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 8px 4px;
}
.sidebar.collapsed .sidebar-user-info {
  opacity: 0;
  width: 0;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-logout-btn {
  opacity: 0;
  width: 0;
  overflow: hidden;
  padding: 0;
}

/* ── Main Content ── */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  position: relative;
}

/* ── Views ── */
.view {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.view.active {
  display: flex;
}

/* ── View topbar ── */
.view-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.view-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-900);
}

/* ════════════════════════════════════════════════
   SERVICE TICKETS — List + Side Panel
════════════════════════════════════════════════ */

/* Top bar */
/* ── Two-row tickets toolbar ── */
.tl-actionbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-100);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
[data-theme='dark'] .tl-actionbar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tl-actionbar-search {
  flex: 1;
  min-width: 0;
  max-width: 440px;
}
.tl-actionbar-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex: 1;
}

.tl-filterbar {
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tl-filterbar::-webkit-scrollbar {
  display: none;
}
.tl-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 0;
}

/* Pill-style status tabs */
.tl-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 1.5px solid var(--gray-200);
  border-radius: 999px;
  background: transparent;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    border-color 0.12s,
    background 0.12s,
    color 0.12s;
}
.tl-tab:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
  color: var(--gray-700);
}
.tl-tab.active {
  font-weight: 600;
}
.tl-tab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.09);
  color: inherit;
  min-width: 18px;
  text-align: center;
}
.tl-tab-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--gray-200);
  border-radius: 1px;
  margin: 0 6px;
  flex-shrink: 0;
  align-self: center;
  opacity: 0.85;
}

.tl-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.tl-search-wrap input {
  padding: 0 10px 0 40px !important;
  width: 100%;
  height: 34px;
  font-size: 13px;
}
.tl-search-icon {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--gray-400);
  pointer-events: none;
  flex-shrink: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Body: list + panel side by side */
.tl-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* List wrap */
.tl-list-wrap {
  flex: 1;
  overflow: auto;
  min-width: 0;
}

/* Table */
.tl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 640px;
}
.tl-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.tl-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tl-th-label {
}
.tl-th-menu {
  width: 40px;
}

/* Column filter dropdown */
.tl-col-filter-dd {
  position: fixed;
  z-index: 2100;
  min-width: 220px;
  max-width: 280px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  font-size: 13px;
  overflow: hidden;
}
.tcfd-sort {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 6px 4px;
  border-bottom: 1px solid var(--gray-100);
}
.tcfd-sort-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: 12px;
  color: var(--gray-700);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.tcfd-sort-btn:hover {
  background: var(--gray-100);
}
.tcfd-sort-btn.is-active {
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 600;
}
.tcfd-sort-clear {
  color: var(--gray-400);
  font-size: 11px;
}
.tcfd-section {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100);
}
.tcfd-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  margin-bottom: 6px;
}
.tcfd-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 12px;
  color: var(--gray-700);
}
.tcfd-check-item:hover {
  color: var(--gray-900);
}
.tcfd-check-item input {
  flex-shrink: 0;
}
.tcfd-date-row {
  display: flex;
  gap: 6px;
}
.tcfd-date-row label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--gray-500);
}
.tcfd-date {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  width: 100%;
}
.tcfd-text {
  width: 100%;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-sizing: border-box;
}
.tcfd-text:focus {
  outline: none;
  border-color: var(--blue);
}
.tcfd-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
}
.tcfd-apply {
  padding: 5px 12px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.tcfd-apply:hover {
  background: var(--blue-dark);
}
.tcfd-clear {
  padding: 5px 10px;
  background: transparent;
  color: var(--gray-400);
  border: none;
  font-size: 12px;
  cursor: pointer;
}
.tcfd-clear:hover {
  color: var(--gray-700);
}

/* Table cells */
.tl-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
  color: var(--gray-800);
}

/* Alternating row shading */
.tl-table tbody tr:nth-child(even) td {
  background: var(--gray-50);
}

/* Row states (legacy table rows) */
.tl-row {
  cursor: pointer;
  transition: background 0.08s;
}
.tl-row:hover td {
  background: var(--cb-f0f7ff, #f0f7ff) !important;
}
.tl-row.tl-selected td {
  background: var(--blue-light) !important;
}
.tl-row.tl-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--blue);
}
.tl-row.tl-selected:hover td {
  background: var(--cb-e0edff, #e0edff) !important;
}

/* ── Column header grid strip ───────────────────────────── */
.tl-col-header {
  display: grid;
  grid-template-columns: var(--tl-cols, 36px 1fr 28px);
  align-items: center;
  margin: 0 17.5px;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.tl-colh-check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 2px 0 10px;
}
.tl-colh-menu {
  /* spacer */
}
#tl-check-all {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--blue);
}
.tl-colh-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  border-left: 1px solid var(--gray-200);
  height: 100%;
}
.tl-colh-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  transition: color 0.1s;
}
.tl-colh-label:hover {
  color: var(--gray-700);
}
.tl-colh-cell.is-active .tl-colh-label {
  color: var(--blue);
}

/* ── Grouped container design ───────────────────────────── */
.tl-groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  min-width: 0;
}

.tl-group-section {
  /* Borderless / shadowless — groups are separated by the 24px gap on .tl-groups,
     not a boxed container. Radius + overflow keep the row block's corners clean. */
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-base);
}

.tl-group-hdr {
  display: grid;
  grid-template-columns: var(--tl-cols, 36px 1fr 28px);
  width: max-content;
  min-width: 100%;
  background: var(--surface-base);
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
}
.tl-group-hdr-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  min-width: 0;
}
.tl-group-hdr-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
/* Collapsed groups still show the header (name + count) but hide their rows */
.tl-group-section.tl-group-collapsed .tl-group-col-hdr,
.tl-group-section.tl-group-collapsed .tl-group-rows {
  display: none;
}
/* Aligns the group select-all box under the per-row checkboxes (36px col,
   ~10px left padding) without shifting the header label. */
.tl-group-hdr-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
}
.tl-group-check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--blue);
}
/* 8px status dot — the only place the group's colour now appears. Reads the
   per-section --grp-color set inline in JS; works for any hue, in both themes. */
.tl-group-hdr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--grp-color, var(--blue));
}
.tl-group-hdr-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.tl-group-hdr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 700;
}
/* Dedicated collapse chevron (right edge). Visual only — the delegated
   .tl-group-hdr click handler toggles collapse from anywhere in the header. */
.tl-group-hdr-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto; /* pin to the far right of the header row */
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--gray-400);
  transition: color 0.12s;
}
.tl-group-hdr-chevron:hover {
  color: var(--gray-700);
}
.tl-group-hdr-chevron svg {
  display: block;
  transition: transform 0.15s ease;
}
.tl-group-section.tl-group-collapsed .tl-group-hdr-chevron svg {
  transform: rotate(-90deg);
}

.tl-group-rows {
  display: flex;
  flex-direction: column;
}

/* ── Per-group column header row (Monday.com style) ── */
.tl-group-col-hdr {
  display: grid;
  grid-template-columns: var(--tl-cols, 36px 1fr 28px);
  width: max-content;
  min-width: 100%;
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  align-items: center;
}
/* Floating-header labels — soft, lowercase, no borders. Intentionally muted
   (#9ca3af): ~2.5:1 on the white light surface, ~6.7:1 on the dark surface. */
.tl-group-col-hdr-cell {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.tl-group-col-hdr-cell:first-child {
  text-align: left;
}
/* Task 3 — single global sticky column header (one per board, rendered once
   above the first group). Reuses .tl-group-col-hdr-cell for its labels so the
   existing dark cell override applies; var(--gray-50) auto-flips to a dark
   surface in dark mode. */
.tl-board-col-hdr {
  display: grid;
  grid-template-columns: var(--tl-cols, 36px 1fr 28px);
  width: max-content;
  min-width: 100%;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-base);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* Deeper drop shadow so the floating header still reads on the dark canvas. */
[data-theme='dark'] .tl-board-col-hdr {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.tl-colh-check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-colh-menu {
  width: 28px;
}

/* ── Board column cells: centered text, no cut-off ── */
.tl-group-rows .tl-cell {
  justify-content: center;
  text-align: center;
  /* Task 4 — column separator: thin right divider (replaces the per-cell left
     border); the trailing actions cell keeps none (see :has rule). */
  border-left: none;
  border-right: 0.5px solid rgba(0, 0, 0, 0.06);
}
.tl-group-rows .tl-cell:has(+ .tl-cell-menu) {
  border-right: none;
}
[data-theme='dark'] .tl-group-rows .tl-cell {
  border-right-color: rgba(255, 255, 255, 0.05);
}
.tl-group-rows .tl-cell-name {
  justify-content: flex-start;
  text-align: left;
}
.tl-group-rows .tl-cell-text,
.tl-group-rows .tl-cell-date,
.tl-group-rows .tl-cell-num {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-align: center;
  width: 100%;
}
.tl-group-rows .tl-col-addr {
  max-width: none;
  overflow: visible;
  white-space: normal;
}
.tl-group-rows .tl-cell-techname {
  text-align: center;
  overflow: visible;
  white-space: normal;
}

/* Grid-based ticket rows */
.tl-group-rows .tl-row {
  display: grid;
  grid-template-columns: var(--tl-cols, 36px 1fr 28px);
  align-items: center;
  min-height: 44px;
  border-top: 1px solid var(--gray-100);
  background: var(--surface-base);
  position: relative;
  cursor: pointer;
  transition: background 0.08s;
}
.tl-group-rows .tl-row:first-child {
  border-top: none;
}
.tl-group-rows .tl-row:hover {
  background: rgba(37, 99, 235, 0.025);
}
.tl-group-rows .tl-row.tl-selected {
  background: var(--blue-light);
}
.tl-group-rows .tl-row.tl-selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--blue);
  border-radius: 0 2px 2px 0;
}
.tl-group-rows .tl-row.tl-selected:hover {
  background: var(--cb-e0edff, #e0edff);
}
.tl-group-rows .tl-row:hover .tl-row-menu-btn {
  color: var(--gray-400);
}

/* Checkbox cell */
.tl-cell-check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 2px 0 10px;
}
.tl-row-check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--blue);
}

/* Menu cell */
.tl-cell-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Data cells */
.tl-cell {
  display: flex;
  align-items: center;
  padding: 8px 8px;
  min-width: 0;
  overflow: hidden;
  height: 100%;
  border-left: 1px solid var(--gray-100);
}
.tl-cell-name {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
}
.tl-cell-namerow {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}
.tl-cell-nameval {
  font-weight: 500;
  font-size: 13px;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.tl-cell-sub {
  font-size: 11px;
  color: var(--gray-400);
  /* Summary must never be clipped — wrap to as many lines as needed. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Individual summary fields inside the name cell must also wrap rather than
   ellipsis-clip at a fixed width — the 200px cap only applies to the legacy
   single-line .tl-summary-line renderer. */
.tl-cell-sub .tl-summary-field {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
.tl-cell-text {
  font-size: 12.5px;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.tl-cell-num {
  font-size: 12.5px;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  justify-content: flex-end;
  width: 100%;
}
.tl-cell-date {
  font-size: 11.5px;
  color: var(--gray-500);
  white-space: nowrap;
}
.tl-cell-empty {
  font-size: 12px;
  color: var(--gray-300);
}
.tl-cell-tech {
  gap: 5px;
}
.tl-cell-techname {
  font-size: 12px;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-cell-bool {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.tl-cell-bool--yes {
  background: var(--cb-dcfce7, #dcfce7);
  color: var(--ct-166534, #166534);
}
.tl-cell-bool--no {
  color: var(--gray-300);
  font-weight: 400;
  font-size: 12px;
}
.tl-cell-bool--warn {
  background: var(--cb-fef9c3, #fef9c3);
  color: var(--ct-854d0e, #854d0e);
}

/* Ticket number — now in metadata row 2 */
.tsp-ticket-num {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-500);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Name cell — composite layout */
.tl-col-name {
  min-width: 200px;
}
.tl-row-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tl-row-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.tl-row-main {
  flex: 1;
  min-width: 0;
}
.tl-name-line {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: 13px;
  color: var(--gray-900);
  white-space: normal;
  line-height: 1.3;
}
/* Status indicator dot */
.tl-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Ticket number */
.tl-ticket-num {
  font-size: 10px;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Summary line */
.tl-summary-line {
  margin-top: 2px;
  font-size: 11px;
  color: var(--gray-400);
  display: flex;
  align-items: flex-start;
  gap: 3px;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 2.8em;
  line-height: 1.4;
}
.tl-summary-field {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.tl-summary-sep {
  color: var(--gray-300);
  flex-shrink: 0;
}
/* ASAP inline pill */
.tl-asap-pill {
  display: inline-flex;
  align-items: center;
  padding: 0px 5px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-dc2626, #dc2626);
  border: 1px solid var(--cd-fca5a5, #fca5a5);
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── Bulk Action Bar ──────────────────────────────────────── */
.tl-bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1d2433;
  color: #f1f5f9;
  border-radius: 12px;
  padding: 8px 8px 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 800;
  white-space: nowrap;
  animation: tl-bulk-in 0.14s ease;
}
.tl-bulk-bar[hidden] {
  display: none !important;
}
@keyframes tl-bulk-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.tl-bulk-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-bulk-deselect {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.1s,
    color 0.1s;
}
.tl-bulk-deselect:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #f1f5f9;
}
.tl-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
}
.tl-bulk-sep {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.tl-bulk-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}
.tl-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  transition:
    background 0.1s,
    color 0.1s;
  white-space: nowrap;
}
.tl-bulk-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}
.tl-bulk-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.tl-bulk-btn--danger:hover {
  background: rgba(239, 68, 68, 0.18);
  color: var(--ct-fca5a5, #fca5a5);
}
.tl-bulk-moveto-wrap {
  position: relative;
}
.tl-bulk-moveto-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
  min-width: 190px;
  padding: 4px 0;
  z-index: 801;
  animation: tfp-in 0.12s ease;
}
.tl-bulk-moveto-menu[hidden] {
  display: none !important;
}
.tl-bulk-moveto-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--gray-700);
  transition: background 0.1s;
}
.tl-bulk-moveto-item:hover {
  background: var(--gray-50);
}
.tl-bulk-moveto-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Tag pills on rows */
.tl-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.tl-tag-overflow {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-100);
  cursor: default;
  flex-shrink: 0;
}

/* Tech initials circle */
.tl-tech-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  letter-spacing: 0;
}
.tl-tech-initials--sm {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

/* 3-dot menu column */
.tl-col-menu {
  width: 36px;
  padding: 0 6px !important;
  text-align: center;
}

/* Assessment badges */
.tl-paid-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-065f46, #065f46);
  border: 1px solid var(--cd-6ee7b7, #6ee7b7);
}
.tl-goback-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fde68a, #fde68a);
}
.tl-warn-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-991b1b, #991b1b);
  border: 1px solid var(--cd-fca5a5, #fca5a5);
}

/* Number cells */
.tl-col-num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.tl-col-sow {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gray-600);
}

/* Empty state — thumbs-up */
.tl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}
.tl-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--gray-300);
}
.tl-empty-text {
  margin-top: 14px;
  font-size: 15px;
  color: var(--gray-400);
  font-weight: 400;
  text-align: center;
}

/* 3-dot row menu trigger */
.tl-row-menu-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  color: transparent; /* hidden until row hover */
  transition:
    background 0.12s,
    color 0.12s;
}
.tl-row-menu-btn:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}
.tl-row-menu-btn:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  color: var(--gray-600);
}
.tl-row:hover .tl-row-menu-btn {
  color: var(--gray-400);
}
.tl-row:hover .tl-row-menu-btn:hover {
  color: var(--gray-700);
}

/* Floating row-menu dropdown (appended to body) */
.tl-row-menu {
  position: fixed;
  z-index: 2000;
  min-width: 200px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 4px;
  font-size: 13px;
}
.tl-row-menu[hidden] {
  display: none;
}
.tl-row-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: 13px;
  color: var(--gray-800);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.tl-row-menu-item:hover {
  background: var(--gray-100);
}
.tl-row-menu-icon {
  width: 14px;
  height: 14px;
  color: var(--gray-500);
  flex-shrink: 0;
}
.tl-row-menu-item:hover .tl-row-menu-icon {
  color: var(--gray-700);
}
.tl-row-menu-danger {
  color: var(--ct-dc2626, #dc2626);
}
.tl-row-menu-danger:hover {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-b91c1c, #b91c1c);
}
.tl-row-menu-danger .tl-row-menu-icon {
  color: var(--ct-dc2626, #dc2626);
}
.tl-row-menu-sep {
  height: 1px;
  background: var(--gray-200);
  margin: 4px 6px;
}
.tl-row-menu-caret {
  margin-left: auto;
  color: var(--gray-400);
  font-size: 10px;
}

/* Submenu */
.tl-row-menu-parent {
  cursor: default;
}
.tl-row-menu-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -4px;
  min-width: 200px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 4px;
  margin-left: 2px;
  z-index: 2001;
}
.tl-row-menu-parent:hover > .tl-row-menu-submenu {
  display: block;
}
/* Flip to the left side when the submenu would overflow the viewport's right edge (row menu is anchored to the row's far-right 3-dot button) */
.tl-row-menu-submenu.tl-row-menu-submenu-flip {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 2px;
}
.tl-row-menu-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-row-menu-sub-item.is-current {
  background: var(--gray-50);
  font-weight: 600;
}
.tl-row-menu-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tl-row-menu-check {
  margin-left: auto;
  color: var(--blue);
  font-weight: 700;
}

/* Read-only status badge in side-panel header */
.tsp-status-display {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.tsp-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid;
  white-space: nowrap;
  color: white;
  letter-spacing: 0.2px;
  cursor: default;
}

.tl-col-addr {
  color: var(--gray-600);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-col-hours {
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}
.tl-col-phone {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Tel links (clickable phone numbers) ── */
.tel-link {
  color: var(--blue);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.tel-link:hover {
  text-decoration: underline;
  color: var(--blue-dark);
}
.tl-col-date {
  color: var(--gray-400);
  white-space: nowrap;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tl-none {
  color: var(--gray-300);
}

.tl-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
  letter-spacing: 0.1px;
  /* Task 5 — crisp inset hairline, universal regardless of the dynamic colour. */
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
[data-theme='dark'] .tl-status-badge {
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
/* tl-empty kept for backward compat but empty-state uses tl-empty-state above */
.tl-empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--gray-400);
  font-size: 14px;
}

/* ── Side Panel — global overlay within main-content ── */
.tl-side-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  min-width: 320px;
  z-index: 50;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.12);
  background: var(--surface-base);
  border-left: 2px solid var(--gray-300);
  border-radius: 10px 0 0 10px;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.13);
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.tsp-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px 0 0 10px;
}

/* When panel is open, shift the ticket list to prevent overlap */
.tl-body.tl-panel-open .tl-list-wrap {
  transition: margin-right 0.18s ease;
}
/* Docked panel narrows the board, which can push group columns past the
   visible width. .tl-group-section's overflow:hidden (needed to clip its
   rounded corners) was swallowing that overflow before it ever reached the
   scrollable .tl-list-wrap, so the rows looked wider than the board but
   couldn't be scrolled. Letting each section scroll its own x-axis (while
   keeping y clipped, so corners still round correctly) fixes that without
   touching the floating view or the board's column layout. */
.tl-body.tl-panel-open .tl-group-section {
  overflow-x: auto;
  overflow-y: hidden;
}
@keyframes tsp-slide-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.tl-side-panel:not([hidden]) {
  animation: tsp-slide-in 0.18s ease;
}
.tl-side-panel[hidden] {
  display: none !important;
}

/* Resize handle */
.tsp-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: ew-resize;
  z-index: 51;
  background: transparent;
  transition: background 0.15s;
}
.tsp-resize-handle:hover,
.tsp-resize-handle.dragging {
  background: rgba(37, 99, 235, 0.35);
}

/* Collapse/expand button */
.tsp-collapse-btn {
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 48px;
  background: var(--surface-base);
  border: 1px solid var(--gray-300);
  border-right: none;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 52;
  color: var(--gray-500);
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.07);
  transition:
    background 0.15s,
    color 0.15s;
  padding: 0;
}
.tsp-collapse-btn svg {
  width: 10px;
  height: 10px;
  transition: transform 0.2s;
}
.tsp-collapse-btn:hover {
  background: var(--gray-50);
  color: var(--gray-700);
}

/* Collapsed sliver state */
.tl-side-panel.tsp-collapsed {
  width: 40px !important;
  min-width: 40px !important;
}
.tl-side-panel.tsp-collapsed .tsp-inner {
  display: none;
}
.tl-side-panel.tsp-collapsed .tsp-resize-handle {
  display: none;
}
.tl-side-panel.tsp-collapsed .tsp-collapse-btn {
  left: 0;
  top: 0;
  transform: none;
  width: 100%;
  height: 100%;
  border-radius: 10px 0 0 10px;
  border: none;
  box-shadow: none;
  background: var(--gray-50);
}
.tl-side-panel.tsp-collapsed .tsp-collapse-btn:hover {
  background: var(--gray-100);
}
.tl-side-panel.tsp-collapsed .tsp-collapse-btn svg {
  transform: rotate(180deg);
}

/* ── Panel header — 4px top border + subtle status-color tint (both set by JS) ── */
.tsp-header {
  padding: 0;
  flex-shrink: 0;
  background: var(--surface-base); /* overridden by JS: ~6% tint of status color */
  border-radius: 10px 0 0 0;
  border-top: 4px solid #94a3b8; /* overridden by JS with status color */
}

/* Utility row: close / mode-selector / undo / autosave */
.tsp-header-util {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 5px 8px;
}

/* Customer info block — row-based layout */
.tsp-header-info {
  padding: 8px 12px 8px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.tsp-header-rows {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tsp-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tsp-header-info-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding-top: 3px;
}
.tsp-header-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--gray-900);
  white-space: nowrap;
  flex-shrink: 0;
}
.tsp-header-address {
  font-size: 11px;
  color: var(--gray-600);
  white-space: nowrap;
}
.tsp-header-meta-sep {
  font-size: 11px;
  color: var(--gray-300);
  flex-shrink: 0;
}
.tsp-header-meta-item {
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
}

/* Status-color hairline separator (height + background set by JS) */
.tsp-header-separator {
  height: 1.5px;
  margin-top: 8px;
  background: var(--gray-200); /* overridden by JS with ~15% tint of status color */
}

/* Ticket count tag ("Ticket #3") */
.tsp-header-count-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.07);
  color: var(--gray-700);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Tags within header rows — proper flex containers so the + Tag button is always accessible */
.tsp-header-rows .tsp-account-tags-display,
.tsp-header-rows .tsp-tags-display {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 0; /* flush-left: no extra left padding on the +Tag / pills row */
}
.tsp-header-rows .tsp-account-tags-label {
  display: none;
}
.tsp-header-rows .tsp-account-tags-row,
.tsp-header-rows .tsp-tags-row {
  display: contents;
}
.tsp-header-rows .tsp-tag-pill,
.tsp-header-rows .tsp-account-tag-pill {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  font-weight: 600;
  white-space: nowrap;
}
.tsp-header-rows .tsp-tag-add-btn {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--gray-600);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.tsp-header-rows .tsp-tag-add-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}
/* Prevent any ancestor from clipping tag content or the tag picker dropdown */
.tsp-header-info,
.tsp-header-rows {
  overflow: visible;
}

/* ── Ticket Header Row Config (Settings → Service Config) ── */
.thdr-config {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0 8px;
}
.thdr-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  min-height: 44px;
}
.thdr-row.thdr-row-over {
  border-color: var(--blue);
  background: var(--blue-50, #eff6ff);
}
.thdr-row-handle {
  color: var(--gray-300);
  cursor: grab;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.thdr-row-handle svg {
  width: 14px;
  height: 14px;
}
.thdr-row-handle:hover {
  color: var(--gray-500);
}
.thdr-row-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  min-width: 42px;
  flex-shrink: 0;
}
.thdr-row-fields {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-height: 26px;
}
.thdr-row-fields.thdr-fields-over {
  outline: 2px dashed var(--blue);
  border-radius: 4px;
  background: var(--gray-100);
}
.thdr-field-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
}
.thdr-field-pill.thdr-pill-locked {
  background: var(--gray-400);
  cursor: default;
}
.thdr-field-pill.thdr-pill-dragging {
  opacity: 0.3;
}
.thdr-field-pill .thdr-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: 0 0 0 3px;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.thdr-field-pill .thdr-remove:hover {
  color: #fff;
}
.thdr-add-field-btn {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 99px;
  background: none;
  border: 1.5px dashed var(--gray-300);
  color: var(--gray-400);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.thdr-add-field-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.thdr-row-del {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--gray-300);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thdr-row-del:hover {
  background: var(--red-50, #fef2f2);
  color: var(--ct-ef4444, #ef4444);
}
.thdr-add-row-btn {
  margin-top: 4px;
}
.thdr-picker {
  position: fixed;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
  padding: 5px 0;
  min-width: 150px;
}
.thdr-picker-item {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.thdr-picker-item:hover {
  background: var(--gray-50);
}
.thdr-picker-empty {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--gray-400);
}

.tsp-close-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.tsp-close-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

/* Undo button (in panel header) */
.tsp-undo-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.tsp-undo-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.tsp-undo-btn[hidden] {
  display: none;
}

/* Auto-save indicator */
.tsp-autosave-indicator {
  font-size: 11px;
  color: var(--gray-400);
  white-space: nowrap;
  pointer-events: none;
}
.tsp-autosave-indicator[hidden] {
  display: none;
}

/* Side panel tabs — sit on the tinted header bg; separator div above handles the line */
.tsp-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tsp-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.tsp-tab:hover {
  color: var(--gray-800);
}
/* Active tab indicator: color inherits --tsp-status-color set by JS on #tsp-header */
.tsp-tab.active {
  color: var(--tsp-status-color, var(--blue));
  border-bottom-color: var(--tsp-status-color, var(--blue));
}
.tsp-tab-pane {
  display: flex;
  flex-direction: column;
}

/* Next Tab navigation button at pane bottom */
.tsp-next-tab-wrap {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--gray-100);
  margin-top: auto;
}
.tsp-next-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.tsp-next-tab-btn:hover {
  background: var(--blue-light);
  color: var(--blue);
  border-color: var(--cd-bfdbfe, #bfdbfe);
}

/* Tab drag-to-reorder */
.tsp-tab[draggable] {
  cursor: grab;
}
.tsp-tab.tsp-tab-dragging {
  opacity: 0.4;
}
.tsp-tab.tsp-tab-drag-over {
  box-shadow: -2px 0 0 var(--blue);
}

.tsp-body {
  flex: 1;
  overflow-y: auto;
  background: var(--tsp-body-bg, #f4f6fa);
}

/* Each section is now an elevated card floating on the tinted body.
   (skin only — the 2-col grid + child-span rules below are unchanged) */
.tsp-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
  margin: 12px 14px;
  padding: 15px 16px 17px;
  background: var(--tsp-card-bg, #fff);
  border: 0.5px solid var(--tsp-card-border, rgba(0, 0, 0, 0.05));
  border-radius: 10px;
  box-shadow: var(--tsp-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04));
  align-items: start;
}

/* Card title spans both grid columns */
.tsp-section-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  color: var(--tsp-card-title, #374151);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.tsp-section-label svg {
  flex-shrink: 0;
  color: var(--tsp-label, #9ca3af);
}

/* Items that must span both columns */
.tsp-section > .tsp-grid-2col,
.tsp-section > .tsp-contact-row,
.tsp-section > .tsp-3col-compact,
.tsp-section > .tsp-add-note-form,
.tsp-section > .tsp-notes-search,
.tsp-section > .tsp-notes-timeline,
.tsp-section > .tsp-pc-pairs,
.tsp-section > .tsp-photo-grid,
.tsp-section > .tsp-photo-dropzone,
.tsp-section > .tsp-dropzone-notice,
.tsp-section > .tsp-paperwork-display,
.tsp-section > .doc-list-compact,
.tsp-section > .tsp-files-list,
.tsp-section > .tsp-qb-card,
.tsp-section > .tsp-materials-list,
.tsp-section > .tsp-materials-total,
.tsp-section > .tsp-auto-materials,
.tsp-section > .tsp-cure-toggle-row,
.tsp-section > .tsp-financial-nocost-banner,
.tsp-section > .tsp-payment-saved-info,
.tsp-section > button,
.tsp-section > p {
  grid-column: 1 / -1;
}

#tsp-scope-groups,
#tsp-sched-section,
#tsp-meta-section,
#tsp-materials-list,
#tsp-auto-materials,
#tsp-notes-timeline,
#tsp-add-note-form,
#tsp-multi-day-opts,
#tsp-payment-rows {
  grid-column: 1 / -1;
}

/* Standalone important fields that need full width */
.tsp-section > .field:has(#tsp-name),
.tsp-section > .field:has(#tsp-email) {
  grid-column: 1 / -1;
}

/* Fields with complex/wide widgets always span both columns */
.tsp-section > .field:has(textarea),
.tsp-section > .field:has(#tsp-address),
.tsp-section > .field:has(.tsp-tri-toggle),
.tsp-section > .field:has(.tsp-multi-pills),
.tsp-section > .field:has(.tsp-addr-lock-row),
.tsp-section > .field:has(.tsp-readonly-block),
.tsp-section > .field:has(.tsp-photo-grid),
.tsp-section > .field:has(.tsp-paperwork-display),
.tsp-section > .field:has(.hm-input-group),
.tsp-section > .field:has(.tsp-duration-row),
.tsp-section > .field:has(.tsp-sched-pref-display) {
  grid-column: 1 / -1;
}

/* Phone call button in side panel */
.tsp-phone-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tsp-phone-row input {
  flex: 1;
  min-width: 0;
}
.tsp-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  transition:
    background 0.15s,
    opacity 0.15s;
}
.tsp-call-btn:hover {
  background: var(--cb-047857, #047857);
}
.tsp-call-btn[hidden] {
  display: none;
}

.tsp-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  background: var(--gray-50);
  flex-shrink: 0;
}

/* Read-only display values in panel */
.tsp-ro-val {
  font-size: 13px;
  color: var(--gray-700);
  padding: 5px 0;
  display: block;
  font-variant-numeric: tabular-nums;
}
.tsp-ro-val.tsp-ro-empty {
  color: var(--gray-300);
  font-style: italic;
}

/* History rows */
.tsp-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}
.tsp-history-row:last-child {
  border-bottom: none;
}
.tsp-hist-date {
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
}
.tsp-hist-tech {
  color: var(--gray-600);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsp-hist-hrs {
  color: var(--gray-500);
  white-space: nowrap;
  font-size: 12px;
}

/* Updates tab */
.tsp-updates-feed {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
}
.tsp-update-entry {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.tsp-update-meta {
  font-size: 11px;
  color: var(--gray-400);
  margin-bottom: 4px;
  font-weight: 500;
}
.tsp-update-text {
  font-size: 13px;
  color: var(--gray-700);
  white-space: pre-wrap;
  word-break: break-word;
}
.tsp-update-empty {
  font-size: 13px;
  color: var(--gray-400);
  margin: 0;
  padding: 12px 16px;
}
.tsp-update-input {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.tsp-update-input textarea {
  width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
}
.tsp-update-input textarea:focus {
  outline: none;
  border-color: var(--blue);
}
.tsp-update-input .btn-primary {
  align-self: flex-end;
}
.tsp-docs-empty-msg {
  font-size: 13px;
  color: var(--gray-400);
  margin: 0;
}

/* ── Filter Split Button ── */
.tl-filter-wrap {
  position: relative;
}

.tl-filter-split {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
  height: 32px;
  transition: border-color 0.15s;
}
.tl-filter-split.tl-filter-active {
  background: var(--blue-light);
  border-color: var(--blue);
}

.tl-filter-main-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gray-700);
  white-space: nowrap;
}
.tl-filter-main-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.tl-filter-main-btn:hover {
  background: var(--gray-50);
}
.tl-filter-active .tl-filter-main-btn {
  color: var(--blue);
}

.tl-filter-adv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  border: none;
  border-left: 1px solid var(--gray-200);
  background: none;
  cursor: pointer;
  color: var(--gray-500);
  padding: 0;
  flex-shrink: 0;
}
.tl-filter-adv-btn svg {
  width: 12px;
  height: 12px;
}
.tl-filter-adv-btn:hover {
  background: var(--gray-50);
  color: var(--gray-700);
}
.tl-filter-active .tl-filter-adv-btn {
  border-left-color: var(--cd-93c5fd, #93c5fd);
  color: var(--blue);
}

.tl-filter-badge {
  font-size: 10px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--gray-200);
  color: var(--gray-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tl-filter-active .tl-filter-badge {
  background: var(--blue);
  color: white;
}

@keyframes tfp-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ── Quick Filters Panel ── */
.tl-quick-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  width: 290px;
  overflow: hidden;
  animation: tfp-in 0.14s ease;
}
.tl-quick-panel[hidden] {
  display: none !important;
}

.qfp-topbar {
  display: flex;
  align-items: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--gray-100);
  gap: 10px;
}
.qfp-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
}
.qfp-clear-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.qfp-clear-btn:hover {
  color: var(--gray-800);
  text-decoration: underline;
}

.qfp-cols {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.qfp-col {
  display: flex;
  flex-direction: column;
  padding: 9px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.qfp-col:last-child {
  border-bottom: none;
}
.qfp-col-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
  margin-bottom: 7px;
}
.qfp-col-active .qfp-col-header {
  color: var(--blue);
}
.qfp-col-body {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.qfp-val-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid var(--gray-200);
  background: none;
  cursor: pointer;
  color: var(--gray-600);
  white-space: nowrap;
  text-align: left;
  transition:
    background 0.1s,
    border-color 0.1s;
}
.qfp-val-pill:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}
.qfp-val-pill.qfp-active {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: var(--blue-light) !important;
}

.qfp-range-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.qfp-range-sep {
  color: var(--gray-400);
  font-size: 12px;
  flex-shrink: 0;
}
.qfp-num-in {
  width: 70px;
  height: 28px;
  font-size: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 0 6px;
}
.qfp-text-in {
  height: 28px;
  font-size: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 0 8px;
  width: 100%;
  box-sizing: border-box;
}
.qfp-num-in:focus,
.qfp-text-in:focus {
  outline: none;
  border-color: var(--blue);
}

.qfp-switch-bar {
  border-top: 1px solid var(--gray-200);
  padding: 7px 14px;
  background: var(--gray-50);
  border-radius: 0 0 10px 10px;
}
.qfp-switch-link {
  font-size: 12px;
  color: var(--gray-600);
  text-decoration: none;
  font-weight: 500;
}
.qfp-switch-link:hover {
  color: var(--gray-900);
  text-decoration: underline;
}

/* ── Advanced Filters Panel ── */
.tl-adv-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  min-width: 560px;
  max-width: min(720px, 92vw);
  overflow: hidden;
  animation: tfp-in 0.14s ease;
}
.tl-adv-panel[hidden] {
  display: none !important;
}

.afp-topbar {
  display: flex;
  align-items: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--gray-100);
  gap: 10px;
}
.afp-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
}
.afp-clear-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-500);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.afp-clear-btn:hover {
  color: var(--gray-800);
  text-decoration: underline;
}

.afp-rows {
  padding: 4px 0;
  max-height: 300px;
  overflow-y: auto;
}
.afp-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
}
.afp-where-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
}
/* Clickable And/Or toggle */
.afp-logic-btn {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-600);
  border: 1px solid var(--gray-300);
  background: var(--surface-base);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  min-width: 40px;
  text-align: center;
  flex-shrink: 0;
  height: 24px;
  line-height: 1;
}
.afp-logic-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}
.afp-logic-btn.afp-logic-or {
  color: var(--ct-c2410c, #c2410c);
  border-color: var(--cd-fca5a5, #fca5a5);
  background: var(--amber-light);
}
.afp-col-sel,
.afp-cond-sel {
  height: 30px;
  font-size: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 0 6px;
  background: var(--surface-base);
  cursor: pointer;
  flex-shrink: 0;
}
.afp-col-sel {
  min-width: 130px;
  max-width: 160px;
}
.afp-cond-sel {
  min-width: 130px;
  max-width: 160px;
}
.afp-col-sel:focus,
.afp-cond-sel:focus {
  outline: none;
  border-color: var(--blue);
}
.afp-val-in {
  flex: 1;
  height: 30px;
  font-size: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 0 8px;
  min-width: 60px;
}
.afp-val-in:focus {
  outline: none;
  border-color: var(--blue);
}
select.afp-val-in {
  background: var(--surface-base);
  cursor: pointer;
  padding: 0 6px;
}
.afp-val-empty {
  flex: 1;
}
.afp-del-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.afp-del-btn:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}
.afp-empty-msg {
  padding: 18px 14px;
  font-size: 13px;
  color: var(--gray-400);
  text-align: center;
}

/* Group container */
.afp-group {
  margin: 4px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 7px;
  overflow: hidden;
}
.afp-group-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
.afp-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  flex: 1;
}
.afp-group-body {
  padding: 2px 0;
}
.afp-group-row {
  padding-left: 8px !important;
}
.afp-group-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
}
.afp-group-add-row {
  border-top: 1px solid var(--gray-100);
  padding: 5px 10px;
}
.afp-add-in-group-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.afp-add-in-group-btn:hover {
  color: var(--gray-800);
  text-decoration: underline;
}

.afp-actions {
  display: flex;
  align-items: center;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--gray-100);
  gap: 10px;
}
.afp-add-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  background: var(--surface-base);
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}
.afp-add-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}
.afp-switch-bar {
  border-top: 1px solid var(--gray-200);
  padding: 7px 14px;
  background: var(--gray-50);
  border-radius: 0 0 10px 10px;
}
.afp-switch-link {
  font-size: 12px;
  color: var(--gray-600);
  text-decoration: none;
  font-weight: 500;
}
.afp-switch-link:hover {
  color: var(--gray-900);
  text-decoration: underline;
}

/* ── Summary Line Picker ── */
.tl-summary-wrap {
  position: relative;
}

.tl-summary-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 300;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 250px;
  max-height: 72vh;
  overflow-y: auto;
  animation: tfp-in 0.14s ease;
}
.tl-summary-panel:not([hidden]) {
  display: block;
}
.tl-summary-panel[hidden] {
  display: none !important;
}

.tl-sml-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--gray-100);
}
.tl-sml-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-900);
}

.tl-sml-search-wrap {
  padding: 6px 10px;
  border-bottom: 1px solid var(--gray-100);
}
.tl-sml-search {
  width: 100%;
  height: 28px;
  font-size: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 0 8px;
  box-sizing: border-box;
}
.tl-sml-search:focus {
  outline: none;
  border-color: var(--blue);
}

.tl-sml-list {
  padding: 4px 0;
}
.tl-sml-group {
}
.tl-sml-group-header {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
  padding: 8px 14px 3px;
}

.tl-sml-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  cursor: default;
  user-select: none;
  transition: background 0.1s;
}
.tl-sml-item:hover {
  background: var(--gray-50);
}
.tl-sml-item.tl-sml-dragging {
  opacity: 0.35;
}
.tl-sml-item.tl-sml-over {
  border-top: 2px solid var(--blue);
}

.tl-sml-drag {
  color: var(--gray-300);
  cursor: grab;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.tl-sml-drag.tl-sml-drag-hidden {
  visibility: hidden;
  pointer-events: none;
}
.tl-sml-drag svg {
  width: 13px;
  height: 13px;
}
.tl-sml-drag:hover {
  color: var(--gray-500);
}

.tl-sml-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  flex: 1;
}
.tl-sml-label input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  flex-shrink: 0;
}
.tl-sml-checked .tl-sml-label {
  font-weight: 500;
  color: var(--gray-900);
}

/* ── Customize Columns panel ── */
.tl-cols-wrap {
  position: relative;
}

.tl-cols-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 300;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 240px;
  max-height: 72vh;
  overflow-y: auto;
}
.tl-cols-panel:not([hidden]) {
  animation: tfp-in 0.14s ease;
}
.tl-cols-panel[hidden] {
  display: none !important;
}

.tl-cols-list {
  padding: 6px 0;
}
.tl-cols-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  cursor: default;
  user-select: none;
  transition: background 0.1s;
}
.tl-cols-item:hover {
  background: var(--gray-50);
}
.tl-cols-item.tl-cols-dragging {
  opacity: 0.35;
}
.tl-cols-item.tl-cols-over {
  border-top: 2px solid var(--blue);
}
.tl-cols-drag {
  color: var(--gray-300);
  cursor: grab;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.tl-cols-drag svg {
  width: 14px;
  height: 14px;
}
.tl-cols-drag:hover {
  color: var(--gray-500);
}
.tl-cols-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  flex: 1;
}
.tl-cols-label input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}
.tl-cols-drag-disabled {
  cursor: default;
  color: var(--gray-200) !important;
  pointer-events: none;
}
.tl-cols-required-badge {
  font-size: 10px;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--gray-200);
  margin-left: 2px;
}

/* ── Custom-field drag & hidden toggle in Settings ── */
.cf-card {
  display: flex;
  align-items: center;
  gap: 0;
}
.cf-drag-handle {
  display: flex;
  align-items: center;
  padding: 0 10px 0 4px;
  color: var(--gray-300);
  cursor: grab;
  flex-shrink: 0;
}
.cf-drag-handle svg {
  width: 16px;
  height: 16px;
}
.cf-drag-handle:hover {
  color: var(--gray-500);
}
.cf-card.cf-dragging {
  opacity: 0.35;
}
.cf-card.cf-card-over {
  border-top: 2px solid var(--blue);
}
.cf-card-info {
  flex: 1;
  min-width: 0;
}

.cf-hidden-toggle {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--gray-200);
  background: var(--surface-base);
  color: var(--gray-500);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.cf-hidden-toggle:hover {
  border-color: var(--gray-400);
  color: var(--gray-700);
}
.cf-hidden-toggle.cf-hidden-on {
  background: var(--amber-light);
  color: var(--amber);
  border-color: var(--cd-fde68a, #fde68a);
}

/* ── Hidden-fields disclosure in ticket panel/modal ── */
.cf-hidden-wrap {
  margin-top: 8px;
}
.cf-show-hidden-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.12s;
}
.cf-show-hidden-btn:hover {
  color: var(--blue);
}
.cf-show-hidden-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.cf-show-hidden-btn.open svg {
  transform: rotate(180deg);
}
.cf-hidden-fields {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--gray-200);
}

.tfp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  background: var(--surface-base);
  z-index: 2;
}
.tfp-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
}
.tfp-clear-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.tfp-clear-btn:hover {
  text-decoration: underline;
}

.tfp-section {
  padding: 11px 14px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tfp-section:last-child {
  border-bottom: none;
}
.tfp-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-400);
}
.tfp-checks {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tfp-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
}
.tfp-check-item input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}

.tfp-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tfp-range-field {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.tfp-range-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  white-space: nowrap;
}
.tfp-range-field input {
  flex: 1;
  min-width: 0;
  height: 30px;
  font-size: 12px;
}
.tfp-range-sep {
  color: var(--gray-300);
  font-size: 13px;
  flex-shrink: 0;
}

.tfp-section select {
  height: 32px;
  font-size: 13px;
}
.tfp-section input[type='text'].tfp-cf-in {
  height: 32px;
  font-size: 13px;
}

/* ────────────────────────────────────────────────
   SCHEDULING — sub-nav
──────────────────────────────────────────────── */
.scheduling-subnav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.subnav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.subnav-btn svg {
  width: 14px;
  height: 14px;
}
.subnav-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}
.subnav-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.sub-view {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.sub-view.active {
  display: flex;
}

/* ── Combined scheduling bar: loc pills | view tabs | action buttons in one row ── */
.sched-combined-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
/* Left slot: location pills (filled by JS) */
.scb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
/* Center slot: Calendar View / Dispatch Board / Route Optimization tab buttons */
.scb-center {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* Right slot: Add and Check Availability buttons (scheduling tab only) */
.scb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}
/* ── Board toolbar ── */
.board-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.week-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.week-nav h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  min-width: 160px;
  text-align: center;
}
.icon-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  font-size: 20px;
  line-height: 1;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.12s;
}
.icon-btn:hover {
  background: var(--gray-100);
}
.day-tabs {
  display: flex;
  gap: 3px;
}
.day-tab {
  padding: 3px 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  text-align: center;
  line-height: 1.3;
}
.day-tab .day-name {
  display: block;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.day-tab .day-num {
  display: block;
  font-size: 14px;
  font-weight: 700;
}
.day-tab:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}
.day-tab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.day-tab.today:not(.active) {
  border-color: var(--blue);
}
.day-tab.today:not(.active) .day-num {
  color: var(--blue);
}
/* Overbooked / fully-booked indicator dot below the date number */
.day-tab--full .day-num::after,
.day-tab--over .day-num::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin: 2px auto 0;
}
.day-tab--full:not(.active) .day-num::after {
  background: var(--cb-f59e0b, #f59e0b);
}
.day-tab--over:not(.active) .day-num::after {
  background: var(--cb-ef4444, #ef4444);
}
/* When active (selected), keep the dot visible but slightly translucent */
.day-tab--full.active .day-num::after {
  background: rgba(245, 158, 11, 0.8);
}
.day-tab--over.active .day-num::after {
  background: rgba(239, 68, 68, 0.85);
}

/* ── Route bar — now inline inside .board-toolbar ── */
.route-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 10px;
  min-width: 0;
}
.route-bar-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 6px;
}
.route-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.route-status-dot.unrouted {
  background: var(--amber);
}
.route-status-dot.suggested {
  background: var(--amber);
}
.route-status-dot.routed {
  background: var(--green);
}
.route-status-dot.routed-unnotified {
  background: var(--cb-f59e0b, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* Per-tech confirmed/notified indicator in the Gantt row label */
.tech-confirm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tech-confirm-dot.tech-confirm-notified {
  background: var(--green);
}
.tech-confirm-dot.tech-confirm-unnotified {
  background: transparent;
  border: 1.5px solid var(--green);
}
.route-bar-label {
  font-weight: 600;
  color: var(--gray-800);
}
.confirmed-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 9px;
  background: var(--green-light);
  color: var(--green);
  margin-left: 4px;
}
.job-block-confirmed {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(15, 23, 42, 0.18);
}
.jb-lock {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 10px;
  opacity: 0.85;
  pointer-events: none;
}

/* Multi-day job blocks — corner badge replaces the top border line */
.jb-multiday-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  min-width: 24px;
  text-align: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 4px 2px;
  border-radius: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  line-height: 1.4;
  text-transform: uppercase;
  pointer-events: none;
}
/* Push inner content right so it never overlaps the corner badge */
.job-block-multiday .job-block-inner {
  padding-left: 28px;
}
/* Full-day job blocks — corner badge, same style as multi-day D1/D2 */
.jb-fullday-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 4px 2px;
  border-radius: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
/* Push inner content right so it clears the "FULL DAY" corner badge */
.job-block-fullday .job-block-inner {
  padding-left: 52px;
}
/* Availability checker span badges */
.avail-span-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  border: 1px solid var(--cd-93c5fd, #93c5fd);
  vertical-align: middle;
  margin-left: 4px;
}
.avail-span-fullday {
  background: var(--cb-ede9fe, #ede9fe);
  color: var(--ct-6d28d9, #6d28d9);
  border-color: var(--cd-c4b5fd, #c4b5fd);
}
/* Calendar multi-day/full-day badges */
.cal-multiday-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--cb-1d4ed8, #1d4ed8);
  color: #fff;
  margin-left: 5px;
  vertical-align: middle;
}
.cal-fullday-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--cb-7c3aed, #7c3aed);
  color: #fff;
  margin-left: 5px;
  vertical-align: middle;
}
.cal-day-job-multiday {
  border-left: 3px solid var(--cd-1d4ed8, #1d4ed8);
}
.cal-day-job-fullday {
  border-left: 3px solid var(--cd-7c3aed, #7c3aed);
}
.job-block-inner {
  position: relative;
}

/* Scheduling preference badge on job blocks */
.jb-pref-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
  text-transform: uppercase;
  line-height: 1.3;
  align-self: flex-start;
}
.jb-pref-first {
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
}
.jb-pref-morning {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
}
.jb-pref-afternoon {
  background: var(--cb-fce7f3, #fce7f3);
  color: var(--ct-9d174d, #9d174d);
}
.jb-pref-last {
  background: #e0e7ff;
  color: #3730a3;
}
/* Time-constraint clock icon on Gantt blocks (Arrive After / Finish Before) */
.jb-time-constraint {
  position: absolute;
  bottom: 3px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  z-index: 3;
  pointer-events: auto;
}
.jb-time-constraint svg {
  width: 10px;
  height: 10px;
}
.jb-time-after {
  color: var(--ct-1d4ed8, #1d4ed8);
}
.jb-time-before {
  color: var(--ct-b91c1c, #b91c1c);
}
/* Route-bar warning chip (time-constraint failures for the day) */
.route-bar-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ct-92400e, #92400e);
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
  border-radius: 9px;
  padding: 2px 8px;
  margin-left: 8px;
  cursor: help;
  white-space: nowrap;
}
.route-bar-sub {
  color: var(--gray-500);
  font-size: 12px;
}
.route-bar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Route Strategy: conflict indicator + popover ──
   Passive amber badge shown all day when a non-Optimal strategy is active and Optimal
   would materially beat it. All colors use the dark-mode-aware token pattern. */
.strategy-conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ct-92400e, #92400e);
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
  border-radius: 9px;
  padding: 3px 9px;
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.strategy-conflict-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.strategy-conflict-badge:hover {
  background: var(--cb-fde68a, #fde68a);
}

.strategy-conflict-pop {
  position: fixed;
  z-index: 600;
  width: 290px;
  max-width: calc(100vw - 16px);
  background: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  font-size: 13px;
  color: var(--gray-700);
  animation: modal-in 0.14s ease;
}
.strategy-conflict-pop .scp-arrow {
  position: absolute;
  top: -6px;
  left: 18px;
  width: 11px;
  height: 11px;
  background: var(--surface-base);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.strategy-conflict-pop .scp-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 6px;
}
.strategy-conflict-pop .scp-lead {
  font-size: 12px;
  color: var(--gray-600);
  margin: 0 0 8px;
  line-height: 1.4;
}
.strategy-conflict-pop .scp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-top: 1px solid var(--border);
}
.strategy-conflict-pop .scp-tech {
  font-weight: 600;
  color: var(--gray-800);
  flex: 1 1 auto;
}
.strategy-conflict-pop .scp-save {
  font-size: 12px;
  font-weight: 700;
  color: var(--ct-92400e, #92400e);
  flex-shrink: 0;
}
/* Per-tech apply: a checkbox column appears when only some techs benefit from Optimal. */
.strategy-conflict-pop .scp-check {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  flex-shrink: 0;
}
.strategy-conflict-pop .scp-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--ct-92400e, #92400e);
}
.strategy-conflict-pop .scp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ── Route Override banner ──
   Persistent blue indicator while a day is in manual override mode. */
.route-override-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ct-1e40af, #1e40af);
  background: var(--cb-dbeafe, #dbeafe);
  border: 1px solid var(--cd-93c5fd, #93c5fd);
  border-radius: 9px;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.route-override-banner svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.route-override-banner-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Board content ──
   Flex-column wrapper so the inner .gantt-scroll can take the entire remaining height
   below the toolbar. We delegate ALL scrolling (both axes) to .gantt-scroll, so the
   horizontal scrollbar sits at the bottom of the visible board area — never below the
   fold. When the map pane is resized via the split handle, the board pane's flex sizing
   auto-recalculates and .gantt-scroll re-fits without any JS. */
.board-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--gray-100);
  display: flex;
  flex-direction: column;
}

/* ── Unrouted list ── */
.unrouted-view {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 580px;
}
.unrouted-tech-block {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.unrouted-tech-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.tech-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.tech-name-big {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}
.tech-hours-badge {
  margin-left: auto;
  font-size: 12px;
  color: var(--gray-500);
  background: var(--gray-200);
  padding: 2px 10px;
  border-radius: 99px;
}
.stop-table {
  width: 100%;
  border-collapse: collapse;
}
.stop-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  padding: 7px 14px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.stop-table td {
  padding: 9px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}
.stop-table tr:last-child td {
  border-bottom: none;
}
.stop-table tr[data-job-id] {
  cursor: pointer;
}
.stop-table tr[data-job-id]:hover td {
  background: var(--blue-light);
}
.stop-table tr:not([data-job-id]):hover td {
  background: var(--gray-50);
}
.stop-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
}
.stop-customer {
  font-weight: 600;
  color: var(--gray-900);
}
.stop-address {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 1px;
}
.stop-hours {
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}
.stop-del-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-400);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.stop-del-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-light);
}
.no-stops-row td {
  color: var(--gray-400);
  font-style: italic;
  text-align: center;
  padding: 18px;
}

/* ── Summary bar ── */
.summary-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 14px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  font-size: 12px;
}
.summary-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.summary-label {
  color: var(--gray-500);
}
.summary-value {
  font-weight: 700;
  color: var(--gray-800);
}
.summary-sep {
  color: var(--gray-300);
  font-size: 14px;
}
.summary-free.ok {
  color: var(--green);
  font-weight: 700;
}
.summary-free.tight {
  color: var(--amber);
  font-weight: 700;
}
.summary-free.over {
  color: var(--red);
  font-weight: 700;
}

/* ── Gantt ── */
.gantt-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  padding: 5px 14px 14px 0;
  background: var(--gray-100);
  /* Custom scrollbar for cleaner look */
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
.gantt-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.gantt-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.gantt-scroll::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 4px;
}
.gantt-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}
/* Gantt outer container — width driven by --timeline-w set in JS */
.gantt {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  display: inline-block;
  min-width: 100%;
}
.gantt-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--gray-200);
}
.gantt-row:last-child {
  border-bottom: none;
}
/* Overbooked tech row — red tint covering the full row (tech-col + entire timeline) */
/* Tech name column: replace gray-50 with a very light red */
.gantt-row--overbooked .tech-col {
  background: var(--red-light);
}
/* Timeline: ::before pseudo sits above the collective/non-work bands (z-index 0-1)
   but below job blocks (same z-index 2, later in DOM = paints on top) */
.gantt-row--overbooked .jobs-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, 0.09);
  z-index: 2;
  pointer-events: none;
}

/* Overbooked pill badge shown next to tech name in the Gantt left column */
.tech-overbooked-badge {
  display: inline-flex;
  align-items: center;
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-b91c1c, #b91c1c);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  border-radius: 99px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Sticky tech column — stays fixed while timeline scrolls */
.tech-col {
  width: var(--tech-col-w);
  min-width: var(--tech-col-w);
  flex-shrink: 0;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gray-50);
  border-right: 1px solid var(--gray-200);
  position: sticky;
  left: 0;
  z-index: 5;
}
.tech-col.ruler-spacer {
  height: var(--ruler-h);
  justify-content: center;
}
.tech-col-inner {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.tech-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.tech-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Orange warning triangle shown next to the tech name when the auto-router detected
   conflicting scheduling preferences (>1 First Stop or >1 Last Stop on the same day). */
.tech-pref-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ct-f59e0b, #f59e0b);
  font-size: 13px;
  cursor: help;
  line-height: 1;
  flex-shrink: 0;
}
.tech-pref-warn:hover {
  color: var(--ct-d97706, #d97706);
}
/* Timeline column — pixel width set by --timeline-w JS variable */
.timeline-col {
  flex: none;
  width: var(--timeline-w, 900px);
  position: relative;
  min-width: 0;
}
.time-ruler {
  height: var(--ruler-h);
  position: relative;
  background: var(--surface-base);
}
.ruler-mark {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
  top: 0;
}
.ruler-mark:first-child {
  transform: translateX(0);
}
.ruler-mark:last-child {
  transform: translateX(-100%);
}
.ruler-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-500);
  white-space: nowrap;
  margin-top: 8px;
}
.ruler-tick {
  width: 1px;
  height: 7px;
  background: var(--gray-300);
  margin-top: 3px;
}
/* Outside-work-hours zone (before earliest start / after latest end) stays gray */
.jobs-area {
  height: var(--row-h);
  position: relative;
  background: var(--gray-100);
}
.gantt-row:nth-child(odd) .jobs-area {
  background: #e8ecf0;
}
/* Collective band: white from earliest-tech-start to latest-tech-end */
.collective-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--surface-base);
  pointer-events: none;
  z-index: 0;
}
.gantt-row:nth-child(odd) .collective-band {
  background: var(--gray-50);
}
/* Non-work band: per-tech gray within the collective window but outside personal hours */
.non-work-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--gray-100);
  pointer-events: none;
  z-index: 1;
}
.gantt-row:nth-child(odd) .non-work-band {
  background: #e8ecf0;
}
.gantt-no-stops-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: var(--gray-400);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--gray-200);
  pointer-events: none;
  z-index: 1;
}

/* ── Gantt Layout Modes ── */
/* Compact — shorter rows, minimal job block info */
.gantt.layout-compact {
  --row-h: 50px;
}
.gantt.layout-compact .job-block {
  top: 5px;
  bottom: 5px;
}
.gantt.layout-compact .drive-gap,
.gantt.layout-compact .return-drive {
  top: 5px;
  bottom: 5px;
}
/* Expanded — taller rows, all info visible */
.gantt.layout-expanded {
  --row-h: 100px;
}
.gantt.layout-expanded .job-block {
  top: 6px;
  bottom: 6px;
}
.gantt.layout-expanded .drive-gap,
.gantt.layout-expanded .return-drive {
  top: 6px;
  bottom: 6px;
}
.gantt.layout-expanded .job-block-inner {
  gap: 3px;
}

/* Job blocks — height set by JS (_rowH) so all enabled fields fit without clipping */
.job-block {
  position: absolute;
  top: 7px;
  bottom: 7px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  overflow-y: visible;
  transition:
    filter 0.15s,
    box-shadow 0.15s;
  z-index: 2;
  min-width: 3px;
  container-type: inline-size;
}
.job-block:hover {
  filter: brightness(1.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  z-index: 10;
}
/* Default text color is white (colored block). When techColorBar=false the JS sets
   style="color:#1e293b" on this element, and all children use inherit so it cascades. */
.job-block-inner {
  padding: 4px 7px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  color: white;
  overflow: hidden;
}
.job-customer {
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  line-height: 1.25;
}
.job-timerange {
  font-size: 10px;
  color: inherit;
  opacity: 0.82;
}

/* ── Job-block text overflow contract ──────────────────────────────────────
   Root fix for text clipping in short-duration (narrow) blocks. The block
   WIDTH is fixed by duration and must not change — only the text adapts.

   Every text line inside a block is forced to a single line that truncates
   with an ellipsis. This eliminates BOTH historical clipping modes:
     • wrapping fields (customer/address) that used to spill past the fixed
       block height and get chopped mid-line by overflow:hidden, and
     • nowrap fields (time range / window) that used to clip mid-character
       because they never declared text-overflow on themselves.
   min-width:0 is required for ellipsis to engage on flex children (their
   default min-width:auto refuses to shrink below content size).
   Full job info is always available on hover via the title tooltip. */
.job-block-inner > * {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wide blocks (≥120px): show the full "Time Window:" label via ::before */
@container (min-width: 120px) {
  .jb-tw-label {
    font-size: 0;
  }
  .jb-tw-label::before {
    content: 'Time Window:';
    font-size: 9px;
    font-weight: 700;
  }
}

/* Progressive disclosure — as the block narrows, drop the lowest-priority
   details so higher-priority lines never have to share space and clip. The
   customer name is NEVER hidden; it ellipsis-truncates down to "…" if needed. */

/* The .job-block-inner ancestor prefix raises specificity to (0,2,0) so these
   hides always beat the single-class base rules (e.g. .jb-stop-num sets
   display:inline-flex later in this file), regardless of source order. */

/* ≤110px — drop verbose secondary fields (address, remaining, pref badge) */
@container (max-width: 110px) {
  .job-block-inner .jb-address,
  .job-block-inner .jb-remain,
  .job-block-inner .jb-pref-badge {
    display: none;
  }
}
/* ≤72px — drop labor meta, time window, and the time-constraint icon */
@container (max-width: 72px) {
  .job-block-inner .jb-meta,
  .job-block-inner .jb-time-window,
  .job-block-inner .jb-time-constraint {
    display: none;
  }
}
/* ≤46px — drop the arrival time range; keep customer + stop number */
@container (max-width: 46px) {
  .job-block-inner .job-timerange {
    display: none;
  }
}
/* ≤30px — keep only the customer name (ellipsis-truncated); tighten padding */
@container (max-width: 30px) {
  .job-block-inner .jb-stop-num {
    display: none;
  }
  .job-block-inner {
    padding: 3px 4px;
  }
}

/* Drive gap */
.drive-gap {
  position: absolute;
  top: 7px;
  bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
  min-width: 0;
}
.drive-gap-line {
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gray-300) 0 4px, transparent 4px 8px);
  transform: translateY(-50%);
}
.drive-gap-label {
  font-size: 10px;
  color: var(--gray-500);
  background: var(--surface-base);
  border: 1px solid var(--gray-300);
  padding: 1px 5px;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.gantt-row:nth-child(odd) .drive-gap-label {
  background: var(--gray-50);
}

/* Return drive arrow (shop return)
   Layout reads left-to-right: [last job ends][dotted purple line][purple label]
   — The container width equals the return drive duration (in px).
   — The dotted line spans the full container width (no padding).
   — The label is absolutely positioned just AFTER the container ends, so it
     never overlaps the dotted line.
   — z-index matches .job-block so the label and line sit above gridlines. */
.return-drive {
  position: absolute;
  top: 7px;
  bottom: 7px;
  z-index: 2;
  min-width: 10px;
  overflow: visible;
}
.return-drive-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--rti-color, #7c3aed) 0 4px,
    transparent 4px 8px
  );
  transform: translateY(-50%);
}
.return-drive-label {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 4px;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--rti-color, #7c3aed);
  background: var(--surface-base);
  border: 1px solid var(--rti-color, #ddd6fe);
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 3;
  white-space: nowrap;
}
.gantt-row:nth-child(odd) .return-drive-label {
  background: var(--gray-50);
}
.return-loc-warn {
  color: var(--ct-d97706, #d97706);
  font-weight: 600;
}
.emp-no-loc {
  color: var(--ct-d97706, #d97706) !important;
  font-size: 11px;
}

/* Full-width divider between technician sections — sits above each tech's stats row.
   Not rendered before the very first tech (empIdx > 0 check in JS). */
.gantt-tech-divider {
  height: 2px;
  background: var(--gray-300);
  width: 100%;
}

/* Per-tech stats — compact line inside the fixed left column, below the tech name */
.tech-col-stats {
  font-size: 10px;
  color: var(--gray-500);
  white-space: normal;
  margin-top: 2px;
  line-height: 1.4;
}

/* No-employees state */
.no-employees-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  text-align: center;
  color: var(--gray-500);
  flex: 1;
}

/* ── Availability Checker ── */
.avail-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.avail-form-panel {
  width: 300px;
  min-width: 260px;
  flex-shrink: 0;
  background: var(--surface-base);
  border-right: 1px solid var(--gray-200);
  padding: 20px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.avail-form-panel h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}
.panel-subtitle {
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
}
.avail-results-panel {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--gray-100);
}

/* ── Avail panel header (title + legend pills side by side) ── */
.avail-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.avail-panel-header h2 {
  margin: 0;
  white-space: nowrap;
}
.avail-legend-header-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0 0;
  justify-content: flex-end;
}

/* Avail results */
.avail-result-intro {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--gray-700);
  box-shadow: var(--shadow-sm);
}
.avail-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.avail-day-group {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.avail-day-header {
  padding: 8px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ── Drive-impact legend pills ── */
.avail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 10px;
}
.avail-legend-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.avail-legend-green {
  background: var(--cb-dcfce7, #dcfce7);
  color: var(--ct-166534, #166534);
}
.avail-legend-yellow {
  background: var(--cb-fef9c3, #fef9c3);
  color: var(--ct-854d0e, #854d0e);
}
.avail-legend-red {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-991b1b, #991b1b);
}

/* ── Combined controls row (tech filter + jump-to-date) ─── */
.avail-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 8px;
}
.avail-tech-filter-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.avail-jump-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.avail-tech-filter-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.15s;
}
.avail-tech-filter-sel {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  background: var(--surface-base);
  cursor: pointer;
  min-width: 160px;
}

/* ── Tech filter active state ────────────────────────────── */
/* Hide ALL tech rows when a specific tech is filtered */
.avail-tech-filtered .avail-tech-row {
  display: none !important;
}
/* Show only the selected tech's rows */
.avail-tech-filtered .avail-tech-row.avail-tech-row--shown {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}
/* Unavail rows shown for selected tech: full opacity, same red treatment */
.avail-tech-filtered .avail-tech-row--shown.avail-unavail-row {
  opacity: 1;
}
/* Reveal fully-booked day groups that contain the selected tech */
.avail-tech-filtered .avail-day-fully-booked.avail-day-has-tech {
  display: block !important;
}
/* Hide day groups that have no row for the selected tech */
.avail-day-no-tech {
  display: none !important;
}

/* ── Jump to Date control ── */
.avail-jump-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 10px;
  flex-wrap: wrap;
}
.avail-jump-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
}
.avail-jump-input {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  color: var(--gray-700);
  background: var(--surface-base);
  cursor: pointer;
}
.avail-jump-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.avail-jump-btn:hover {
  background: var(--cb-1d4ed8, #1d4ed8);
}
.avail-jump-btn:disabled {
  background: var(--gray-300);
  cursor: default;
}
.avail-jump-notice {
  font-size: 11px;
  color: var(--red);
  font-weight: 600;
}

/* ── Jumped-to day highlight ── */
.avail-day-jumped {
  border-left: 3px solid var(--blue) !important;
  background: var(--blue-light);
}
.avail-day-jumped .avail-day-header {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
}

/* ── Load More button ── */
.avail-load-more-row {
  display: flex;
  justify-content: center;
  padding: 16px 0 4px;
}
.avail-load-more-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  background: var(--surface-base);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  border-radius: 20px;
  padding: 7px 20px;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.avail-load-more-btn:hover:not(:disabled) {
  background: var(--blue-light);
  border-color: var(--blue);
}
.avail-load-more-btn:disabled {
  color: var(--gray-400);
  border-color: var(--gray-200);
  cursor: default;
}

/* ── Show Unavailable toggle ── */
.avail-toggle-row {
  display: flex;
  align-items: center;
  padding: 0 0 12px;
}
.avail-unavail-toggle {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-light);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  border-radius: 20px;
  padding: 4px 14px;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  white-space: nowrap;
}
.avail-unavail-toggle:hover:not(:disabled) {
  background: var(--cb-bfdbfe, #bfdbfe);
  color: var(--ct-1d4ed8, #1d4ed8);
}
.avail-unavail-toggle:disabled {
  color: var(--gray-400);
  background: var(--gray-100);
  border-color: var(--gray-200);
  cursor: default;
}
/* Technician-lock tag — shown beside the Show Unavailable toggle when a ticket is
   locked. Token-only colors so it renders correctly in dark mode. */
.avail-lock-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ct-92400e, #92400e);
  background: var(--amber-light, #fef3c7);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
}
.avail-lock-tag svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Unavailable tech rows — hidden by default, revealed by toggle ──
   Must use .avail-tech-row.avail-unavail-row (two-class selector, specificity 0,2,0)
   to beat the later .avail-tech-row { display:flex } rule (specificity 0,1,0). */
.avail-tech-row.avail-unavail-row {
  display: none;
}
.avail-show-unavail .avail-tech-row.avail-unavail-row {
  display: flex;
  flex-direction: column;
  opacity: 0.8;
}
.avail-badge-full {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-dc2626, #dc2626);
}

/* ── Fully-booked day groups — hidden by default, revealed by toggle ── */
.avail-day-fully-booked {
  display: none;
}
.avail-show-unavail .avail-day-fully-booked {
  display: block;
}
.avail-day-header-full {
  background: var(--cb-fee2e2, #fee2e2);
  border-bottom: 1px solid var(--cd-fecaca, #fecaca);
  color: var(--ct-991b1b, #991b1b);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.avail-day-full-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ct-dc2626, #dc2626);
}
.avail-result-intro {
  padding: 12px 16px 8px;
  font-size: 13px;
  color: var(--gray-600);
}
.avail-tech-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.avail-tech-row:last-child {
  border-bottom: none;
}
.avail-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.avail-row-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 11px;
  color: var(--gray-400);
  line-height: 1.4;
}
.avail-stats-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.avail-stats-divider {
  width: 1px;
  height: 11px;
  background: var(--gray-200);
  flex-shrink: 0;
  margin: 0 8px;
}
.avail-stat-sep {
  color: var(--gray-300);
  line-height: 1;
}
.avail-stat-overbook {
  color: var(--red);
  font-weight: 600;
}
.avail-tech-row-conflict {
  background: rgba(245, 158, 11, 0.04);
}
.avail-pref-conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px 2px 6px;
  line-height: 1.3;
  cursor: help;
  white-space: nowrap;
  flex-shrink: 0;
}
.avail-pref-conflict-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: var(--ct-d97706, #d97706);
}
/* Confirmed Route badge in availability checker — blue/teal, informational only */
.avail-confirmed-route-badge {
  display: inline-flex;
  align-items: center;
  background: var(--cb-e0f2fe, #e0f2fe);
  color: var(--ct-0369a1, #0369a1);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 99px;
  border: 1px solid var(--cd-bae6fd, #bae6fd);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Time-constraint warning badge (Arrive After / Finish Before) — soft conflict on availability row */
.avail-time-warn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px 2px 6px;
  line-height: 1.3;
  cursor: help;
  white-space: nowrap;
  flex-shrink: 0;
}
.avail-time-warn-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: var(--ct-d97706, #d97706);
}
.avail-time-warn-finishBefore {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-b91c1c, #b91c1c);
  border-color: var(--cd-fca5a5, #fca5a5);
}
.avail-time-warn-finishBefore svg {
  color: var(--ct-dc2626, #dc2626);
}
/* Refreshing indicator shown briefly during a live availability re-run.
   Lives in the modal header so it survives the body innerHTML replacement. */
.avail-refresh-indicator {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ct-1e40af, #1e40af);
  background: var(--cb-dbeafe, #dbeafe);
  border: 1px solid var(--cd-93c5fd, #93c5fd);
  border-radius: 99px;
  padding: 2px 10px;
  margin-left: 10px;
  pointer-events: none;
}
.avail-tech-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 13px;
  flex-wrap: wrap;
}
.avail-tech-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.avail-tech-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}
.avail-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.avail-badge.available {
  background: var(--green-light);
  color: var(--green);
}
.avail-badge.full {
  background: var(--red-light);
  color: var(--red);
}
.avail-badge.free-day {
  background: var(--blue-light);
  color: var(--blue);
}
.avail-badge.off-day {
  background: var(--gray-100);
  color: var(--gray-400);
}
.avail-green {
  background: var(--cb-dcfce7, #dcfce7);
  color: var(--ct-15803d, #15803d);
}
.avail-yellow {
  background: var(--cb-fef9c3, #fef9c3);
  color: var(--ct-854d0e, #854d0e);
}
.avail-red {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-b91c1c, #b91c1c);
}
.avail-amber {
  background: var(--amber-light);
  color: var(--ct-c2410c, #c2410c);
}
/* .btn-schedule variants defined in Scheduling Logic section below */

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  min-height: 280px;
  text-align: center;
  color: var(--gray-500);
}
.empty-state svg {
  width: 60px;
  height: 60px;
  opacity: 0.5;
}
.empty-state p {
  font-size: 14px;
  line-height: 1.6;
}

/* ── Settings Page ── */
.settings-page {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.settings-sidebar {
  width: 216px;
  min-width: 216px;
  flex-shrink: 0;
  background: var(--surface-base);
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.settings-sidebar-header {
  padding: 18px 16px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--gray-400);
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}

.stab-nav {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.stab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--gray-600);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.1s,
    color 0.1s;
  text-align: left;
  white-space: nowrap;
  box-shadow: none;
}
.stab-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.1s;
}
.stab-btn:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}
.stab-btn:hover svg {
  opacity: 0.9;
}
.stab-btn.active {
  background: var(--blue-light);
  color: var(--blue-dark);
  font-weight: 600;
  border-right: 2px solid var(--blue);
}
.stab-btn.active svg {
  opacity: 1;
  color: var(--blue);
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
}

.stab-panel {
  display: none;
  flex-direction: column;
  gap: 20px;
}
.stab-panel.active {
  display: flex;
}
.stab-desc {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}

.settings-section-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 4px;
}
.settings-section-header h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.settings-section-header p {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0;
}

.settings-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════════════ */
.db-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  gap: 12px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.db-topbar.db-editing {
  background: var(--amber-light);
  border-bottom-color: var(--cd-fcd34d, #fcd34d);
}
.db-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.db-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-edit-hint {
  font-size: 12px;
  color: var(--amber);
  font-weight: 500;
}

.db-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--gray-50);
}
/* Free-flow layout (ported from the Metrics board): each widget carries its own
   px size; cards wrap in reading order and a .db-break forces a fresh row. */
.db-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 16px;
}
/* Forced row break: zero-height full-width flex item → the next card wraps. */
.db-break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

/* ── Widget shell ── */
.db-widget {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0;
  box-sizing: border-box;
  max-width: 100%;
  transition: box-shadow 0.15s;
}
.db-widget.db-edit {
  border: 2px dashed var(--gray-300);
}
.db-widget.db-edit:hover {
  border-color: var(--blue);
}
.db-widget.db-widget-resizing {
  box-shadow: var(--shadow);
  z-index: 10;
}

/* Live-shift reorder (ported from the Metrics board): the dragged card lifts into
   a floating ghost (JS sets position:fixed) while a same-size dashed placeholder
   holds the prospective slot and the other cards reflow around it in real time. */
.db-widget.db-card-dragging {
  opacity: 0.92;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.28);
  cursor: grabbing;
  transform: rotate(1deg);
  transition: none;
  z-index: 2000;
}
.db-widget.db-placeholder {
  border: 2px dashed var(--blue);
  background: var(--blue-light, #dbeafe);
  border-radius: var(--radius-lg);
  box-shadow: none;
  pointer-events: none;
  opacity: 0.8;
}

/* Drag handle in header */
.db-drag-handle {
  cursor: grab;
}
.db-drag-handle:active {
  cursor: grabbing;
}
.db-drag-dots {
  font-size: 14px;
  letter-spacing: -3px;
  color: var(--gray-300);
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  padding-right: 4px;
}

/* Edit-mode grid — subtle tint cue while arranging widgets */
.db-grid.db-grid-editing {
  background-color: var(--cb-dbeafe, #dbeafe);
  border-radius: var(--radius-lg);
}

/* Drag-to-move ghost (shows target drop position) */
.db-drag-ghost {
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 5;
  transition:
    background 0.08s,
    border-color 0.08s;
}
.db-drag-ghost-valid {
  background: rgba(37, 99, 235, 0.15);
  border: 2px dashed var(--blue);
}
.db-drag-ghost-invalid {
  background: rgba(220, 38, 38, 0.12);
  border: 2px dashed var(--red);
}

.db-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px;
  flex-shrink: 0;
}
.db-widget-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.db-widget-remove {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--gray-300);
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.12s;
  flex-shrink: 0;
}
.db-widget-remove:hover {
  color: var(--red);
}

.db-widget-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 10px;
  min-height: 0;
}

/* Resize handle — bottom-right corner */
.db-widget-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
}
.db-widget-resize::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gray-300);
  border-bottom: 2px solid var(--gray-300);
  border-radius: 1px;
}
.db-widget-resize:hover::after {
  border-color: var(--blue);
}

/* Empty state */
.db-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gray-400);
  padding: 80px 20px;
  text-align: center;
  width: 100%;
}
.db-empty svg {
  width: 52px;
  height: 52px;
  opacity: 0.35;
}
.db-empty p {
  font-size: 14px;
  line-height: 1.6;
}
.db-widget-na {
  font-size: 13px;
  color: var(--gray-400);
  padding: 8px 0;
  text-align: center;
}

/* ── KPI row (Today's Schedule) ── */
.db-kpi-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.db-kpi {
  flex: 1;
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.db-kpi-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.1;
}
.db-kpi-unit {
  font-size: 16px;
  font-weight: 600;
}
.db-kpi-label {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* ── Stat list rows (shared by schedule + by-tech) ── */
.db-stat-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.db-stat-row {
  display: grid;
  grid-template-columns: 8px 80px 1fr 32px;
  align-items: center;
  gap: 8px;
}
.db-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db-stat-name {
  font-size: 12px;
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-stat-bar-track {
  height: 5px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}
.db-stat-bar-fill {
  height: 100%;
  border-radius: 99px;
}
.db-stat-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-900);
  text-align: right;
}
.db-stat-secondary {
  font-size: 11px;
  color: var(--gray-400);
  text-align: right;
}

/* ── Status list (Tickets by Status) ── */
.db-status-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.db-status-row {
  display: grid;
  grid-template-columns: 8px 1fr 28px 72px;
  align-items: center;
  gap: 8px;
}
.db-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.db-status-label {
  font-size: 12px;
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-status-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-900);
  text-align: right;
}
.db-status-bar-track {
  height: 5px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}
.db-status-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s;
}

/* ── Activity list ── */
.db-activity-list {
  display: flex;
  flex-direction: column;
}
.db-activity-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}
.db-activity-row:last-child {
  border-bottom: none;
}
.db-activity-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.db-activity-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-activity-status {
  font-size: 11px;
  font-weight: 500;
}
.db-activity-date {
  font-size: 11px;
  color: var(--gray-400);
  flex-shrink: 0;
  padding-top: 1px;
}

/* ── Add Widget picker modal ── */
.db-picker-section {
  margin-bottom: 24px;
}
.db-picker-section:last-child {
  margin-bottom: 0;
}
.db-picker-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-400);
  margin-bottom: 10px;
}
.db-picker-empty {
  font-size: 13px;
  color: var(--gray-400);
  padding: 4px 0;
}
.db-picker-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  margin-bottom: 8px;
}
.db-picker-card:last-child {
  margin-bottom: 0;
}
.db-picker-added {
  opacity: 0.55;
}
.db-picker-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.db-picker-icon-chart {
  background: var(--cb-f0fdf4, #f0fdf4);
  color: var(--green);
}
.db-picker-icon svg {
  width: 18px;
  height: 18px;
}
.db-picker-info {
  flex: 1;
  min-width: 0;
}
.db-picker-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
}
.db-picker-desc {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
  line-height: 1.4;
}
.db-picker-badge {
  font-size: 11px;
  color: var(--gray-400);
  font-style: italic;
  flex-shrink: 0;
}

/* ── Tab Order drag list ── */
.tab-order-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 440px;
}
.tab-order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  cursor: grab;
  user-select: none;
  transition:
    box-shadow 0.12s,
    border-color 0.12s;
}
.tab-order-item:active {
  cursor: grabbing;
}
.tab-order-item.tab-order-dragging {
  opacity: 0.4;
}
.tab-order-item.tab-order-over {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px #bfdbfe;
}
.tab-order-handle {
  color: var(--gray-300);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.tab-order-handle svg {
  width: 16px;
  height: 16px;
}
.tab-order-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-800);
}
.tab-order-label-input {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-800);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 2px 6px;
  background: transparent;
  outline: none;
  cursor: text;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.tab-order-label-input:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}
.tab-order-label-input:focus {
  border-color: var(--blue);
  background: var(--surface-base);
  box-shadow: 0 0 0 2px #bfdbfe;
  cursor: text;
}
.tab-order-label-input[readonly] {
  cursor: default;
  pointer-events: none;
}

/* Employee list */
.employee-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.emp-card {
  display: flex;
  align-items: center;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  gap: 12px;
  padding-left: 14px;
}
.emp-color-strip {
  display: none;
}
.emp-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}
.emp-info {
  flex: 1;
  padding: 11px 12px;
}
.emp-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}
.emp-card-meta {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}
.emp-card-actions {
  display: flex;
  gap: 5px;
  padding: 0 10px;
}
.btn-emp-edit {
  padding: 4px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.btn-emp-edit:hover {
  background: var(--gray-100);
}
.btn-emp-del {
  width: 28px;
  height: 28px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-400);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.btn-emp-del:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-light);
}
.no-employees-card {
  background: var(--gray-50);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  color: var(--gray-500);
  font-size: 13px;
}

/* ── Delete Ticket Confirmation Modal ── */
.delete-ticket-modal {
  max-width: 480px;
}
.delete-ticket-header {
  background: var(--cb-dc2626, #dc2626);
  color: white;
  border-bottom: none;
}
.delete-ticket-header h3 {
  color: white;
  font-weight: 700;
}
.delete-ticket-header .modal-close {
  color: white;
  opacity: 0.9;
}
.delete-ticket-header .modal-close:hover {
  opacity: 1;
}

/* Unconfirm Route Modal — header swaps between red (notified) and orange (not notified).
   Body text turns red when notifications had been sent. */
.urm-header {
  border-bottom: none;
}
.urm-header h3 {
  color: white;
  font-weight: 700;
}
.urm-close {
  color: white;
  opacity: 0.9;
}
.urm-close:hover {
  opacity: 1;
}
.urm-header-red {
  background: var(--cb-dc2626, #dc2626);
  color: white;
}
.urm-header-orange {
  background: var(--cb-d97706, #d97706);
  color: white;
}
.urm-body-red {
  color: var(--ct-dc2626, #dc2626);
  font-weight: 600;
}
.delete-ticket-body {
  padding: 24px 22px;
  text-align: center;
}
.delete-ticket-customer {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 12px;
  word-break: break-word;
}
.delete-ticket-warning {
  font-size: 14px;
  color: var(--gray-700);
  margin: 0;
  line-height: 1.5;
}

/* ── Route Changes Required modal table ── */
.route-changes-wrap {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.route-changes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.route-changes-table thead th {
  position: sticky;
  top: 0;
  background: var(--gray-50);
  color: var(--gray-600);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-200);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.route-changes-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
}
.route-changes-table tbody tr:last-child td {
  border-bottom: none;
}
.route-changes-table td.rc-later {
  color: var(--ct-b45309, #b45309);
  font-weight: 600;
}
.route-changes-table td.rc-earlier {
  color: var(--green);
  font-weight: 600;
}

/* Time-window column in compare tables — amber when window changed vs before */
.rc-tw-changed {
  color: var(--ct-92400e, #92400e);
  font-weight: 700;
  background: var(--amber-light);
}
.rc-row-tw-changed {
  background: var(--amber-light);
}
.rc-row-locked.rc-row-tw-changed {
  background: var(--amber-light);
}

/* Settings cards */
.settings-card {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}
.settings-card > p {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}
.settings-card-danger {
  border-color: var(--cd-fecaca, #fecaca);
  background: var(--red-light);
}
.settings-card-danger h3 {
  color: var(--red);
}
.maps-status {
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}
.maps-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.maps-status.pending {
  background: var(--gray-100);
  color: var(--gray-500);
}
.maps-status.pending .maps-status-dot {
  background: var(--gray-400);
}
.maps-status.ok {
  background: var(--green-light);
  color: var(--green);
}
.maps-status.ok .maps-status-dot {
  background: var(--green);
}
.maps-status.error {
  background: var(--red-light);
  color: var(--red);
}
.maps-status.error .maps-status-dot {
  background: var(--red);
}
.save-confirm {
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
}
.autosave-badge {
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
  margin-left: 10px;
  animation: autosave-fade 1.8s ease forwards;
}
.autosave-badge[hidden] {
  display: none;
}
@keyframes autosave-fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Color swatches */
/* Employee photo upload */
.emp-photo-field {
  display: flex;
  align-items: center;
  gap: 14px;
}
.emp-photo-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gray-100);
  border: 2px solid var(--gray-200);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emp-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.emp-photo-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.emp-photo-upload-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.color-swatches {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition:
    transform 0.1s,
    border-color 0.1s;
}
.swatch:hover {
  transform: scale(1.15);
}
.swatch.selected {
  border-color: var(--gray-900);
  transform: scale(1.1);
}

/* Workday checkboxes */
.workday-checks {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.workday-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  transition: all 0.12s;
  user-select: none;
}
.workday-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.workday-label.checked {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}

/* ── Form Elements ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
input[type='text'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='password'],
input[type='tel'],
input[type='email'],
select,
textarea {
  padding: 0 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--gray-800);
  background: var(--surface-base);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  width: 100%;
  font-family: inherit;
}
input[type='text'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='password'],
input[type='tel'],
input[type='email'],
select {
  height: 36px;
}
textarea {
  padding: 8px 10px;
  resize: vertical;
  height: auto;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.field-row {
  display: flex;
  gap: 10px;
}
.field-row .field {
  flex: 1;
}
.inline-field {
  display: flex;
  gap: 7px;
  align-items: center;
}
.inline-field.short input {
  max-width: 90px;
}
.unit {
  font-size: 13px;
  color: var(--gray-500);
  white-space: nowrap;
}
.hint {
  font-size: 11px;
  color: var(--gray-400);
  line-height: 1.4;
}
.tech-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tech-filter-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
}
.tech-filter-item input[type='checkbox'] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--blue);
}
.tech-filter-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 7px;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow:
    0 1px 3px rgba(37, 99, 235, 0.35),
    0 1px 2px rgba(37, 99, 235, 0.2);
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-primary svg {
  width: 14px;
  height: 14px;
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow:
    0 2px 6px rgba(37, 99, 235, 0.4),
    0 1px 3px rgba(37, 99, 235, 0.24);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}
.btn-primary.btn-block {
  width: 100%;
}
.btn-primary.btn-sm {
  height: 30px;
  font-size: 12px;
  padding: 0 11px;
}
/* Task 7 — primary dark gradient: slightly lighter blues, softer blue shadow. */
[data-theme='dark'] .btn-primary {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  box-shadow:
    0 1px 3px rgba(59, 130, 246, 0.3),
    0 1px 2px rgba(59, 130, 246, 0.2);
}
[data-theme='dark'] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
}
/* Shared press feedback for the core solid button variants. */
.btn-primary:active:not(:disabled),
.btn-amber:active:not(:disabled),
.btn-warn:active:not(:disabled),
.btn-success:active:not(:disabled),
.btn-danger:active:not(:disabled) {
  box-shadow: none;
  transform: translateY(1px);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  padding: 0 16px;
  border: 0.5px solid var(--gray-300);
  border-radius: 7px;
  background: var(--surface-base);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-secondary svg {
  width: 14px;
  height: 14px;
}
.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}
/* Dark secondary: the base tokens (gray-300 border, gray-700 text) already flip
   to readable dark values, so dark mode only refines the hover lift.
   NOTE: the spec's literal dark "color: var(--gray-300)" is deliberately NOT
   applied — in this theme gray-300 flips to #3a3a42, giving ~1.3:1 (invisible)
   label text. The auto-flipped gray-700 (#d4d4d8) keeps it readable. */
[data-theme='dark'] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gray-400);
}
.btn-secondary.btn-sm {
  height: 30px;
  font-size: 12px;
  padding: 0 11px;
}
.btn-amber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 7px;
  background: var(--amber);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: all 0.15s ease;
}
.btn-amber:hover:not(:disabled) {
  background: color-mix(in srgb, var(--amber) 85%, #000);
}
.btn-amber:disabled {
  opacity: 0.6;
  cursor: default;
}
/* The solid-amber .btn-warn alias of .btn-amber was a duplicate — it was already
   shadowed by the soft-amber .btn-warn pill defined later in this file (used for
   Reschedule / Remove from Schedule). Consolidated: .btn-amber is the solid amber
   button; the single remaining .btn-warn (further down) is the soft pill. */
/* btn-success — green primary, used for the high-confidence action (e.g. Confirm and Send Notifications) */
.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 7px;
  background: var(--green);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: all 0.15s ease;
}
.btn-success:hover:not(:disabled) {
  background: color-mix(in srgb, var(--green) 85%, #000);
}
.btn-success:disabled {
  opacity: 0.6;
  cursor: default;
}
.btn-success.btn-sm {
  height: 30px;
  font-size: 12px;
  padding: 0 11px;
}

/* Backfill button — lives in the ruler-spacer cell on the left of the Gantt */
.gantt-backfill-btn {
  width: calc(100% - 16px);
  margin: 0 8px;
  font-size: 12px;
  border: 1.5px solid var(--cb-047857, #047857);
  gap: 5px;
}
/* The outline .btn-danger (white bg, soft-red border) was the FIRST of two
   definitions and was overridden by the solid-red .btn-danger further down.
   Removed the outline duplicate — the solid red fill below is the single
   source of truth. (.btn-danger.btn-sm sizing is kept.) */
.btn-danger.btn-sm {
  height: 30px;
  font-size: 12px;
  padding: 0 11px;
}
.notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 11px;
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.5;
}
.notice svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.notice-info {
  background: var(--blue-light);
  color: var(--ct-1e40af, #1e40af);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
}
.notice-warn {
  background: var(--amber-light);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
}
.notice-warn svg {
  color: var(--ct-d97706, #d97706);
}

/* Side-by-side before/after route compare tables */
.rc-compare-grid {
  display: flex;
  gap: 14px;
}
.rc-compare-col {
  flex: 1;
  min-width: 0;
}
.rc-compare-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  padding: 0 0 6px;
}
.rc-row-locked {
  background: var(--gray-50);
  color: var(--gray-500);
}
.rc-locked-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
  background: var(--gray-200);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .rc-compare-grid {
    flex-direction: column;
  }
}

/* ── Modals ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 220;
  padding: 16px;
}
.modal-backdrop[hidden] {
  display: none;
}
/* Scheduling confirmation dialogs must sit above the ticket side panel in ALL of its
   view modes — docked, floating (z-index 500), centre modal (500), and fullscreen (60) —
   so the Confirm Schedule button is always reachable and never hidden behind the panel. */
#schedule-confirm-modal,
#overbook-confirm-modal {
  z-index: 600;
}
/* Clickable customer name inside popups/modals — opens the service-ticket panel.
   Subtle by default (inherits surrounding text), with a hover/focus underline +
   colour shift so it reads as a link without an icon. */
.cust-ticket-link {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.12s ease,
    border-color 0.12s ease;
}
.cust-ticket-link:hover,
.cust-ticket-link:focus-visible {
  color: var(--link-color);
  border-bottom-color: currentColor;
  outline: none;
}
/* Ticket panel lifted above a coexist-friendly dim modal backdrop (e.g. the
   backfill modal) so both stay visible side by side. Backdrops sit at z-index
   220; this clears them in every panel mode. */
.tl-side-panel.tsp-coexist-elevated {
  z-index: 600 !important;
}

.modal {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 460px;
  overflow: hidden;
  animation: modal-in 0.16s ease;
}
.modal-box {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  overflow: hidden;
  animation: modal-in 0.16s ease;
}
.modal.modal-lg {
  max-width: 640px;
}
.modal.modal-xl {
  max-width: 780px;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-200);
}
.modal-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}
.modal-close {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 20px;
  color: var(--gray-400);
  cursor: pointer;
  border-radius: 4px;
  transition:
    background 0.12s,
    color 0.12s;
  line-height: 1;
}
.modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}
.btn-modal-map {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--gray-400);
  cursor: pointer;
  border-radius: 4px;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
  padding: 0;
}
.btn-modal-map:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}
.modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 70vh;
  overflow-y: auto;
}
.modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--gray-50);
  flex-wrap: wrap;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.detail-item.full {
  grid-column: 1 / -1;
}
.detail-item label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
}
.detail-item span {
  font-size: 13px;
  color: var(--gray-800);
  font-weight: 500;
}
.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
}
.tech-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.slot-summary-box {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.6;
}
.slot-summary-box strong {
  color: var(--gray-900);
}
.address-readonly {
  font-size: 13px;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 7px 9px;
  line-height: 1.4;
}

/* Ticket modal specific */
.ticket-modal-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.ticket-modal-title-row h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}
.status-select {
  height: 28px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius);
  padding: 0 6px;
  border: 1px solid var(--gray-300);
  cursor: pointer;
  flex-shrink: 0;
}
.ticket-modal-body {
  max-height: 75vh;
}
.ticket-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ticket-field-full {
  grid-column: 1 / -1;
}

/* ── Add Job Modal — tabs ─────────────────────────────────── */
.add-job-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 14px;
}
.add-job-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  margin-bottom: -1px;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.add-job-tab:hover {
  color: var(--gray-700);
}
.add-job-tab.active {
  color: var(--blue-600, #2563eb);
  border-bottom-color: var(--blue-600, #2563eb);
}
.add-job-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.add-job-form[hidden] {
  display: none;
}

/* ── Ticket search dropdown ───────────────────────────────── */
.ticket-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
}
.ticket-search-item {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.1s;
}
.ticket-search-item:last-child {
  border-bottom: none;
}
.ticket-search-item:hover {
  background: var(--gray-50);
}
.tsi-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
  display: block;
}
.tsi-meta {
  font-size: 11px;
  color: var(--gray-500);
  display: block;
  margin-top: 1px;
}
.tsi-empty {
  padding: 10px;
  font-size: 13px;
  color: var(--gray-400);
  text-align: center;
}

/* ── Selected ticket display ──────────────────────────────── */
.aj-sel-display {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aj-sel-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
}
.aj-sel-addr {
  font-size: 12px;
  color: var(--gray-600);
}
.aj-sel-hrs {
  font-size: 12px;
  color: var(--gray-500);
}

/* ── Placeholder badges (stop table & gantt) ──────────────── */
.ph-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid var(--cd-f59e0b, #f59e0b);
}
.placeholder-row td {
  background: var(--amber-light);
  color: var(--ct-92400e, #92400e);
  font-style: italic;
}
.placeholder-gantt-row {
  padding: 4px 10px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border-top: 1px solid var(--gray-100);
  background: var(--amber-light);
}
.ph-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ph-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-f59e0b, #f59e0b);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ct-92400e, #92400e);
}
.ph-chip-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ct-b45309, #b45309);
}

/* ── View Options dropdown ───────────────────────────────── */
.view-opts-wrap {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}
.view-opts-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.view-opts-dropdown {
  position: fixed;
  width: 250px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* [hidden] has lower specificity than .view-opts-dropdown — force it to hide */
.view-opts-dropdown[hidden] {
  display: none;
}
.view-opts-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-400);
  margin-top: 4px;
  margin-bottom: 2px;
}
.view-opts-section-label:first-child {
  margin-top: 0;
}
.view-opts-radio {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.12s;
}
.view-opts-radio:hover {
  background: var(--gray-50);
}
.view-opts-radio input[type='radio'] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--blue);
}
.view-opts-radio input[type='radio']:checked ~ .view-opts-radio-body .view-opts-radio-name {
  color: var(--blue);
  font-weight: 700;
}
.view-opts-radio-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.view-opts-radio-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
}
.view-opts-radio-desc {
  font-size: 11px;
  color: var(--gray-500);
}
.view-opts-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 6px 0;
}
.view-opts-zoom-row {
  display: flex;
  align-items: center;
}
.view-opts-zoom-current {
  font-weight: 700;
  color: var(--blue);
}
.view-opts-slider {
  width: 100%;
  accent-color: var(--blue);
  cursor: pointer;
}
.view-opts-zoom-labels {
  display: flex;
  font-size: 10px;
  color: var(--gray-400);
  margin-top: 2px;
}

/* ── Confirm Route primary button ───────────────────────────
   Slightly taller and wider than the Reroute btn-sm so it reads
   clearly as the primary action. Single-line, orange fill. */
.btn-confirm-route {
  padding: 0 18px;
  height: 34px;
  font-size: 13px;
  white-space: nowrap;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* ── Draggable floating availability panel ───────────────── */
/* Backdrop is invisible and non-blocking — click-through except on the panel itself */
.modal-float-backdrop {
  pointer-events: none;
  z-index: 500;
}
.modal-float-backdrop:not([hidden]) {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The panel itself is the only interactive surface */
.modal-float {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: all;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.25),
    0 4px 16px rgba(0, 0, 0, 0.12);
}
.modal-float .modal-body {
  overflow-y: auto;
  flex: 1;
}
/* Drag handle — cursor changes to move on the header bar */
.modal-drag-handle {
  cursor: move;
  user-select: none;
  justify-content: flex-start;
  gap: 8px;
}
.modal-drag-handle h3 {
  flex: 1;
}
.modal-drag-handle .modal-close {
  margin-left: auto;
  cursor: pointer;
}
.drag-grip-icon {
  font-size: 16px;
  color: var(--gray-400);
  flex-shrink: 0;
  letter-spacing: -2px;
  line-height: 1;
  cursor: move;
}

/* ── Schedule button in availability results ──────────────── */
.btn-schedule {
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid;
  background: var(--surface-base);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.btn-schedule-green {
  border-color: var(--cd-16a34a, #16a34a);
  color: var(--ct-15803d, #15803d);
}
.btn-schedule-green:hover {
  background: var(--cb-16a34a, #16a34a);
  color: white;
}
.btn-schedule-yellow {
  border-color: var(--cd-d97706, #d97706);
  color: var(--ct-b45309, #b45309);
}
.btn-schedule-yellow:hover {
  background: var(--cb-d97706, #d97706);
  color: white;
}
.btn-schedule-red {
  border-color: var(--cd-dc2626, #dc2626);
  color: var(--ct-dc2626, #dc2626);
}
.btn-schedule-red:hover {
  background: var(--cb-dc2626, #dc2626);
  color: white;
}
/* Time-constraint warning variant — amber fill so the dispatcher sees the soft conflict
   before scheduling. Overrides the drive-impact color when applied. */
.btn-schedule-warn {
  border-color: var(--cd-d97706, #d97706);
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
}
.btn-schedule-warn:hover {
  background: var(--cb-d97706, #d97706);
  border-color: var(--cd-d97706, #d97706);
  color: white;
}
/* Overbook variant — solid red fill to signal danger */
.btn-schedule-overbook {
  border-color: var(--cd-dc2626, #dc2626);
  background: var(--cb-dc2626, #dc2626);
  color: white;
}
.btn-schedule-overbook:hover {
  background: var(--cb-b91c1c, #b91c1c);
  border-color: var(--cd-b91c1c, #b91c1c);
  color: white;
}

/* Negative remaining badge shown on overbooked tech rows */
.avail-overbook-remaining {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-dc2626, #dc2626);
}

/* btn-danger — solid red fill (single source of truth after the outline
   duplicate was removed). Used by confirm modals, deletes, etc. */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 7px;
  background: var(--red);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: all 0.15s ease;
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--red) 85%, #000);
}

/* ── Drive-added tag in availability results ── */
.avail-drive-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.avail-drive-green {
  background: var(--cb-dcfce7, #dcfce7);
  color: var(--ct-15803d, #15803d);
}
.avail-drive-yellow {
  background: var(--cb-fef9c3, #fef9c3);
  color: var(--ct-b45309, #b45309);
}
.avail-drive-red {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-dc2626, #dc2626);
}

/* ── Scheduling Logic thresholds (Settings → Dispatch) ── */
.sched-thresh-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.sched-thresh-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.sched-thresh-row-info {
  opacity: 0.75;
}
.sched-thresh-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sched-thresh-label {
  flex: 1;
  font-size: 13px;
  color: var(--gray-700);
}

/* ── Schedule Confirmation Modal ── */
.sched-confirm-intro {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: 14px;
}
.sched-conflict-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--amber-light);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
  border-radius: var(--radius);
}
.sched-conflict-warn[hidden] {
  display: none !important;
}
.sched-conflict-icon {
  color: var(--ct-d97706, #d97706);
  flex-shrink: 0;
  padding-top: 1px;
}
.sched-conflict-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.sched-conflict-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ct-92400e, #92400e);
}
.sched-conflict-text strong {
  font-size: 13px;
  font-weight: 700;
}

.sched-confirm-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sched-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.sched-confirm-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.sched-confirm-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: right;
}

/* ── Multi-day confirmation: one row per scheduled day ───────── */
#scm-multiday[hidden] {
  display: none;
}
.scm-md-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.scm-md-list-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.scm-md-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.scm-md-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.scm-md-daynum {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}
.scm-md-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}
.scm-md-tech {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.scm-md-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Multi-day per-day pick header inside the availability checker ── */
.avail-mdpick-header {
  background: var(--blue-light);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  border-radius: var(--radius-lg);
  padding: 11px 14px;
  margin-bottom: 12px;
}
.avail-mdpick-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--gray-800);
}
.avail-mdpick-progress strong {
  color: var(--blue);
}
.avail-mdpick-restart {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.avail-mdpick-restart:hover {
  text-decoration: underline;
}
.avail-mdpick-chosen {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.avail-mdpick-chosen-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--gray-700);
}
.avail-mdpick-daynum {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #64748b;
  border-radius: 9px;
  padding: 1px 7px;
  white-space: nowrap;
}
.avail-mdpick-date {
  font-weight: 600;
  color: var(--gray-800);
}
.avail-mdpick-tech {
  color: var(--gray-500);
}
.avail-mdpick-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 8px;
}
.scm-md-tech-sep {
  color: var(--gray-400);
  font-weight: 600;
  margin: 0 2px;
}

/* ── Multi-tech combination lines in availability checker ── */
.avail-combo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.avail-combo-row:last-child {
  border-bottom: none;
}
.avail-combo-techs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.avail-combo-tech {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px 2px 3px;
  border-radius: 999px;
  border: 1px solid transparent;
}
/* Pinned techs render in normal text on a neutral chip. */
.avail-combo-pinned {
  color: var(--gray-800);
  background: var(--gray-50);
  border-color: var(--gray-200);
}
/* Any-slot matches are accented to show they were dynamically chosen. */
.avail-combo-any {
  color: var(--ct-1d4ed8, #1d4ed8);
  background: var(--blue-light);
  border-color: var(--cd-bfdbfe, #bfdbfe);
}
.avail-combo-any .avail-tech-avatar {
  box-shadow: 0 0 0 2px #bfdbfe;
}
.avail-combo-plus {
  color: var(--gray-400);
  font-weight: 700;
  font-size: 13px;
}
.avail-combo-more {
  font-size: 12px;
  color: var(--gray-500);
  padding: 8px 14px;
  font-style: italic;
}

/* ── Rain badges (availability checker, dispatch board, calendar) ── */
.wx-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--blue-light);
  color: var(--ct-1e40af, #1e40af);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  margin-left: 6px;
  vertical-align: middle;
}
.wx-badge-warn {
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border-color: var(--cd-fde68a, #fde68a);
}
/* Rain badge pinned to bottom-right of job block — positioned on the block itself
   (not inside .job-block-inner) so overflow:hidden on the inner never clips it */
.job-block .wx-badge {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9px;
  padding: 1px 4px;
  margin-left: 0;
  z-index: 5;
}
/* Job block flagged as weather-sensitive with rain over threshold */
.job-block.wx-day-warning {
  outline: 2px solid var(--cd-f59e0b, #f59e0b) !important;
  outline-offset: -2px;
}

/* Day-level weather warning indicator (dispatch day-tabs, calendar cells): ⚠ + job count.
   Shown only when one or more weather-sensitive jobs that day exceed the rain threshold. */
.wx-day-flag {
  display: inline-flex;
}
.wx-day-flag:empty {
  display: none;
}
.wx-flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  padding: 2px 5px;
  border-radius: 9px;
  margin-top: 2px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fde68a, #fde68a);
}
.day-tab .wx-flag-badge {
  margin-top: 3px;
}
.cal-day-cell-hdr .wx-flag-badge {
  margin-left: auto;
}
/* Day group: amber accent + tinted header when rain warning */
.wx-day-warning {
  border-left: 3px solid var(--cd-f59e0b, #f59e0b) !important;
}
.wx-day-warning .avail-day-header {
  background: var(--amber-light);
  color: var(--ct-78350f, #78350f);
  border-bottom-color: var(--cd-fde68a, #fde68a);
}

/* ── Weather Alerts section in Service Config settings ── */
.wx-settings-panel {
  padding: 4px 0 0;
}
.wx-sub {
  transition: opacity 0.15s;
}
.wx-sub-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.wx-check-group {
  margin-top: 16px;
}
.wx-check-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.wx-check-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin: 0 0 8px;
}
.wx-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.wx-check-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  white-space: nowrap;
}
.wx-check-label input[type='checkbox'] {
  cursor: pointer;
}
.wx-empty-hint {
  font-size: 12px;
  color: var(--gray-400);
  font-style: italic;
}

/* ── Per-installation-type weather-sensitive blocks ── */
.wx-type-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wx-type-block {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
  background: var(--surface-base, #fff);
}
.wx-type-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}
.wx-type-scopes {
  margin: 8px 0 0;
  padding: 8px 0 0 24px;
  border-top: 1px dashed var(--gray-200);
}
.wx-type-scopes.wx-hidden {
  display: none;
}
.wx-scope-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin: 0 0 6px;
}
.wx-scope-checkboxes {
  gap: 5px 16px;
}
.wx-scope-label {
  font-size: 12.5px;
  color: var(--gray-600);
}

/* ── Location weather zip field ── */
.loc-zip-hint {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 400;
  margin-left: 4px;
}
.loc-field-zip {
  flex: 1;
  min-width: 200px;
}

/* ── Google Maps autocomplete dropdown ───────────────────── */
.pac-container {
  z-index: 9999 !important;
}

/* ── Map link button in route bar ────────────────────────── */

/* ── Toast notification ──────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  background: #1e293b;
  color: #fff;
  padding: 11px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transform: translateY(16px);
  opacity: 0;
  transition:
    opacity 0.22s,
    transform 0.22s;
  pointer-events: none;
  max-width: 340px;
}
.toast.toast-show {
  opacity: 1;
  transform: translateY(0);
}
.toast-success {
  border-left: 3px solid var(--cd-16a34a, #16a34a);
}
.toast-error {
  border-left: 3px solid var(--red);
}

/* ══════════════════════════════════════════════════════════
   METRICS VIEW
══════════════════════════════════════════════════════════ */
.metrics-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-content: start;
  background: var(--gray-100);
}
.metrics-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--gray-400);
  font-size: 14px;
  padding: 60px 20px;
}
.metrics-empty strong {
  color: var(--gray-600);
}

/* Chart card */
.chart-card {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  min-width: 0;
}
.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  gap: 8px;
}
.chart-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart-card-body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 160px;
}
.chart-empty {
  text-align: center;
  color: var(--gray-400);
  font-size: 13px;
  padding: 20px 0;
}

/* Three-dot menu */
.chart-card-menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.chart-card-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s;
}
.chart-card-menu-btn:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}
.chart-card-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 140px;
  overflow: hidden;
  animation: dropIn 0.12s ease;
}
@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.chart-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--gray-700);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.chart-dd-item:hover {
  background: var(--gray-50);
}
.chart-dd-delete {
  color: var(--red);
}
.chart-dd-delete:hover {
  background: var(--red-light);
}

/* Resize handle */
.chart-resize-handle {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
}
.chart-resize-handle:hover {
  color: var(--blue);
  background: var(--blue-light);
}

/* Number card */
.number-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0 20px;
  gap: 6px;
}
.number-card-value {
  font-size: 52px;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
}
.number-card-label {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
}

/* Pie chart */
.pie-chart-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 120px;
}
.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-700);
}
.chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Chart Builder Modal ─────────────────────────────────── */
.modal-chart-builder {
  width: 92vw;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-chart-builder .modal-header {
  flex-shrink: 0;
}
.modal-chart-builder .modal-footer {
  flex-shrink: 0;
}

/* Two-column layout */
.cb-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Controls column */
.cb-controls {
  width: 340px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 16px 18px;
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cb-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}
.cb-section:last-child {
  border-bottom: none;
}
.cb-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.cb-sublabel {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 5px;
}
.cb-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}
.cb-input:focus {
  border-color: var(--blue);
}
.cb-select {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--surface-base);
  outline: none;
  transition: border-color 0.15s;
}
.cb-select:focus {
  border-color: var(--blue);
}

/* Chart type buttons */
.cb-type-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.cb-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface-base);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 10px;
  color: var(--gray-500);
  font-weight: 600;
}
.cb-type-btn svg {
  width: 22px;
  height: 22px;
}
.cb-type-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}
.cb-type-btn.active {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}

/* Granularity & sort radios */
.cb-radio-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cb-radio-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--gray-700);
  cursor: pointer;
}

/* Toggle row */
.cb-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
}

/* ColSpan buttons */
.cb-colspan-group {
  display: flex;
  gap: 6px;
}
.cb-colspan-btn {
  flex: 1;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 2px solid var(--gray-200);
  background: var(--surface-base);
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.cb-colspan-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.cb-colspan-btn.active {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}

/* Filter toggle (collapsible) */
.cb-filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: left;
}
.cb-filter-toggle svg {
  transition: transform 0.2s;
}
.cb-filter-toggle.open svg {
  transform: rotate(180deg);
}
.cb-filter-checks {
  margin-top: 8px;
}
.cb-filter-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--gray-700);
  padding: 3px 0;
  cursor: pointer;
}
.cb-filter-check input {
  cursor: pointer;
}
.status-dot-sm {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Preview column */
.cb-preview-col {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cb-preview-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.cb-preview-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
  min-height: 20px;
}
.cb-preview-chart {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.cb-preview-chart > svg,
.cb-preview-chart > div {
  width: 100%;
}

/* Data preview table */
.cb-data-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cb-data-preview-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}
.cb-data-preview {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  max-height: 280px;
  overflow-y: auto;
}
.cb-data-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cb-data-preview-table th,
.cb-data-preview-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--gray-100);
  text-align: left;
  color: var(--gray-800);
}
.cb-data-preview-table th {
  background: var(--gray-50);
  color: var(--gray-500);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.cb-data-preview-table tbody tr:nth-child(even) {
  background: var(--gray-50);
}
.cb-data-preview-table tbody tr:last-child td {
  border-bottom: none;
}

/* Number-card comparison (previous-period delta) */
.number-card-comparison {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  margin-top: 4px;
}
.number-card-comparison-up {
  background: var(--cb-dcfce7, #dcfce7);
  color: var(--ct-15803d, #15803d);
}
.number-card-comparison-down {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-b91c1c, #b91c1c);
}
.number-card-comparison-vs {
  font-size: 10px;
  font-weight: 500;
  color: var(--gray-500);
  margin-left: 4px;
}

/* Team tab — custom-chart divider below prebuilt SM dashboard */
.met-team-custom-divider {
  margin: 24px 0 12px;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-500);
  border-top: 1px solid var(--gray-200);
  padding-top: 18px;
}

/* Chart card 3-dot menu */
.met-chart-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.met-chart-menu-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.12s,
    color 0.12s;
}
.met-chart-menu-btn:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}
.met-chart-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 170px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 50;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.met-chart-menu-dropdown[hidden] {
  display: none;
}
.met-chart-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--gray-700);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
}
.met-chart-menu-item:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.met-chart-menu-item.met-chart-menu-delete {
  color: var(--ct-b91c1c, #b91c1c);
}
.met-chart-menu-item.met-chart-menu-delete:hover {
  background: var(--cb-fee2e2, #fee2e2);
}

/* ══════════════════════════════════════════════════════════
   CLIENTS VIEW
══════════════════════════════════════════════════════════ */
.clients-search-wrap {
  padding: 10px 16px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.clients-search-wrap input {
  max-width: 420px;
}
.clients-list {
  flex: 1;
  overflow-y: auto;
  background: var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  transition: background 0.12s;
}
.client-row:hover {
  background: var(--blue-light);
}
.client-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gray-700);
  color: white;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.client-info {
  flex: 1;
  min-width: 0;
}
.client-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}
.client-meta {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 1px;
}
.client-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.client-status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid transparent;
}

/* Client modal ticket cards */
.client-ticket-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.client-ticket-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.client-ticket-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid transparent;
}
.client-ticket-notes {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.5;
}
.client-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.client-job-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 13px;
}

.client-section-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  margin-bottom: 8px;
}

/* ── Client Coupons ── */
.client-coupon-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.client-coupon-card {
  border-radius: var(--radius);
  padding: 10px 12px;
  border: 1px solid;
}
.coupon-active {
  background: var(--cb-f0fdf4, #f0fdf4);
  border-color: var(--cd-86efac, #86efac);
}
.coupon-expired {
  background: var(--surface-inset);
  border-color: var(--border);
  opacity: 0.7;
}

.coupon-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.coupon-code {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.coupon-status-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 99px;
}
.badge-active {
  background: var(--cb-dcfce7, #dcfce7);
  color: var(--ct-15803d, #15803d);
}
.badge-expired {
  background: var(--gray-100);
  color: var(--gray-500);
}

.coupon-remove-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--text-faint);
  padding: 0 2px;
  transition: color 0.12s;
}
.coupon-remove-btn:hover {
  color: var(--red);
}

.coupon-card-details {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 3px;
}
.coupon-discount {
  font-weight: 600;
  color: var(--text-primary);
}
.coupon-expiry-str {
  font-size: 12px;
  color: var(--text-secondary);
}
.coupon-services-str {
  font-size: 12px;
  color: var(--text-secondary);
}
.coupon-notes-str {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 3px;
  font-style: italic;
}
.coupon-empty-msg {
  font-size: 13px;
  color: var(--text-faint);
  padding: 2px 0 8px;
}

/* Coupon add form */
.coupon-add-form {
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coupon-form-row {
  display: flex;
  gap: 10px;
}
.coupon-form-row.three-col > * {
  flex: 1;
  min-width: 0;
}
.coupon-form-row.two-col > * {
  flex: 1;
  min-width: 0;
}
.coupon-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.coupon-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.coupon-input {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 13px;
  width: 100%;
}
.coupon-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.coupon-noexpiry-label {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.coupon-svc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  max-height: 110px;
  overflow-y: auto;
  padding: 6px 8px;
  background: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.coupon-svc-option {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  white-space: nowrap;
}
.coupon-svc-option:hover {
  background: var(--gray-100);
}
.coupon-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.btn-coupon-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: 1.5px dashed var(--blue);
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.btn-coupon-add:hover {
  background: var(--blue-light);
}

/* Dark-mode overrides for coupon cards */
[data-theme='dark'] .coupon-active {
  background: #0a2e18;
  border-color: var(--cd-166534, #166534);
}
[data-theme='dark'] .badge-active {
  background: var(--cb-14532d, #14532d);
  color: var(--ct-4ade80, #4ade80);
}

/* ══════════════════════════════════════════════════════════
   CUSTOM FIELDS
══════════════════════════════════════════════════════════ */
.cf-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cf-card {
  display: flex;
  align-items: center;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  padding: 0 10px 0 0;
}
.cf-card-info {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cf-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
}
.cf-card-opts {
  font-size: 11px;
  color: var(--gray-400);
}

/* Type pills */
.cf-type-pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid transparent;
}
.cf-type-text {
  background: var(--blue-light);
  color: var(--ct-1d4ed8, #1d4ed8);
  border-color: var(--cd-bfdbfe, #bfdbfe);
}
.cf-type-textarea {
  background: var(--blue-light);
  color: var(--ct-1d4ed8, #1d4ed8);
  border-color: var(--cd-bfdbfe, #bfdbfe);
}
.cf-type-number {
  background: var(--green-light);
  color: var(--ct-065f46, #065f46);
  border-color: var(--cd-a7f3d0, #a7f3d0);
}
.cf-type-dropdown {
  background: var(--amber-light);
  color: var(--ct-92400e, #92400e);
  border-color: var(--cd-fed7aa, #fed7aa);
}
.cf-type-date {
  background: #f5f3ff;
  color: var(--ct-5b21b6, #5b21b6);
  border-color: var(--cd-ddd6fe, #ddd6fe);
}
.cf-type-checkbox {
  background: var(--red-light);
  color: var(--ct-be123c, #be123c);
  border-color: var(--cd-fecdd3, #fecdd3);
}
.cf-type-multiselect {
  background: var(--cb-f0fdf4, #f0fdf4);
  color: var(--ct-14532d, #14532d);
  border-color: var(--cd-bbf7d0, #bbf7d0);
}

/* Builder sections (grouped by display location) */
.cf-section {
  margin-bottom: 14px;
}
.cf-section-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-500);
  padding: 0 2px 6px;
}
.cf-section-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: 99px;
  padding: 1px 7px;
}
.cf-section .cf-card {
  margin-bottom: 7px;
}

/* Display-location pills */
.cf-loc-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cf-loc-ticket {
  background: var(--gray-100);
  color: var(--gray-600);
  border-color: var(--gray-200);
}
.cf-loc-both {
  background: #eef2ff;
  color: #4338ca;
  border-color: #c7d2fe;
}
.cf-loc-client {
  background: #ecfeff;
  color: #0e7490;
  border-color: #a5f3fc;
}
.cf-loc-analytics {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.cf-loc-archived {
  background: var(--gray-100);
  color: var(--gray-500);
  border-color: var(--gray-200);
}

/* Archive / restore toggle + archived card state */
.cf-archive-toggle {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-300);
  background: var(--surface-base);
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
}
.cf-archive-toggle:hover {
  border-color: var(--gray-400);
  color: var(--gray-800);
}
.cf-card-archived {
  opacity: 0.7;
}
.cf-card-archived .cf-card-name {
  color: var(--gray-500);
}

/* Per-tab custom-field container in the ticket side panel */
.tsp-cf-tab-container:empty {
  display: none;
}

/* Per-group ticket-panel visibility toggle (first row of a field group) */
.svcfg-vis-row {
  margin: 2px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-100);
}
.svcfg-vis-row .perm-toggle-label {
  font-size: 12px;
}

/* Custom field inputs inside ticket modal */
.cf-multiselect {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  cursor: default;
}
.cf-ms-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
}
.cf-ms-item input[type='checkbox'] {
  width: 13px;
  height: 13px;
  accent-color: var(--blue);
  cursor: pointer;
}
.cf-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
/* ══════════════════════════════════════════════════════════
   AUTH SCREENS
══════════════════════════════════════════════════════════ */
#auth-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--rail-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
#auth-wrap[hidden] {
  display: none !important;
}
/* Background photo overlay — sits between the solid color and the auth card */
#auth-bg-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s;
}
.auth-screen {
  position: relative;
  z-index: 1; /* above #auth-bg-photo */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-screen[hidden] {
  display: none;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 24px;
}
.auth-brand svg {
  width: 22px;
  height: 22px;
  color: var(--blue);
  flex-shrink: 0;
}
.auth-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 6px;
}
.auth-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: 20px;
}
.auth-pw-row {
  display: flex;
  gap: 8px;
}
.auth-pw-row input {
  flex: 1;
}
.auth-reveal-btn {
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-500);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.auth-reveal-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.auth-submit {
  width: 100%;
  padding: 11px;
  font-size: 15px;
  font-weight: 700;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.auth-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px;
  background: none;
  border: none;
  color: var(--blue);
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s;
}
.auth-link:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}
.auth-error {
  background: var(--red-light);
  border: 1px solid var(--cd-fecaca, #fecaca);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 13px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
/* 2FA status line */
.tfa-status-ok {
  background: var(--cb-f0fdf4, #f0fdf4);
  border: 1px solid var(--cd-bbf7d0, #bbf7d0);
  border-radius: var(--radius);
  color: var(--ct-15803d, #15803d);
  font-size: 13px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.tfa-status-sending {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  color: var(--gray-500);
  font-size: 13px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.auth-code-box {
  background: var(--gray-900);
  color: var(--ct-4ade80, #4ade80);
  font-family: 'Courier New', monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 8px;
  text-align: center;
  padding: 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.modal-sm {
  max-width: 380px;
}
.inactivity-countdown {
  font-size: 48px;
  font-weight: 800;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

/* ══════════════════════════════════════════════════════════
   USER MANAGEMENT
══════════════════════════════════════════════════════════ */
.users-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}
.user-row.user-inactive {
  opacity: 0.55;
}
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
}
.user-info {
  flex: 1;
  min-width: 0;
}
.user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
}
.user-email {
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-meta {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 1px;
}
.user-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.role-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 99px;
}
.role-admin {
  background: var(--cb-ede9fe, #ede9fe);
  color: var(--ct-5b21b6, #5b21b6);
}
.role-dispatcher {
  background: var(--blue-light);
  color: var(--blue-dark);
}
.role-technician {
  background: var(--green-light);
  color: var(--ct-065f46, #065f46);
}
.role-inactive {
  background: var(--gray-100);
  color: var(--gray-400);
}

/* ══════════════════════════════════════════════════════════
   TECHNICIAN — My Schedule View
══════════════════════════════════════════════════════════ */
.ms-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.ms-week-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ms-week-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
  min-width: 200px;
  text-align: center;
}
.ms-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ms-day-card {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0; /* don't let the flex column compress + clip the card — ms-body must scroll it */
}
.ms-day-header {
  padding: 10px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ms-day-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-700);
}
.ms-day-date {
  font-size: 12px;
  color: var(--gray-400);
}
.ms-stop-list {
  display: flex;
  flex-direction: column;
}
.ms-stop {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ms-stop:last-child {
  border-bottom: none;
}
.ms-stop-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ms-stop-info {
  flex: 1;
  min-width: 0;
}
.ms-stop-customer {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2px;
}
.ms-stop-address {
  font-size: 13px;
  color: var(--blue);
  margin-bottom: 4px;
}
.ms-stop-address a {
  color: inherit;
  text-decoration: none;
}
.ms-stop-address a:hover {
  text-decoration: underline;
}
.ms-stop-meta {
  font-size: 12px;
  color: var(--gray-400);
}
.ms-stop-notes {
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--gray-50);
  border-radius: var(--radius);
}
.ms-empty-day {
  padding: 28px 16px;
  text-align: center;
  color: var(--gray-400);
  font-size: 13px;
}
.ms-no-jobs {
  padding: 48px 20px;
  text-align: center;
  color: var(--gray-400);
}
.ms-no-jobs svg {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  display: block;
}

.cf-checkbox-label input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════
   INTEGRATIONS
══════════════════════════════════════════════════════════ */
.int-hint-banner {
  background: var(--blue-light);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.int-hint-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--blue-dark);
  margin-bottom: 8px;
}
.int-hint-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
  padding: 3px 0;
}
.int-hint-row strong {
  color: var(--gray-900);
  min-width: 130px;
}
.int-hint-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
}

.int-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.int-empty {
  font-size: 13px;
  color: var(--gray-400);
  padding: 8px 0;
}

.int-card {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.int-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.int-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
}
.int-card-key {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.int-card-key code {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: var(--gray-100);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--gray-700);
}
.int-card-notes {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 10px;
  line-height: 1.5;
}
.int-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Test status */
.int-card-status {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}
.int-status-testing {
  background: var(--amber-light);
  color: var(--amber);
}
.int-status-ok {
  background: var(--green-light);
  color: var(--green);
}
.int-status-error {
  background: var(--red-light);
  color: var(--red);
}
.int-status-neutral {
  background: var(--gray-100);
  color: var(--gray-500);
}

.int-create-btn {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.int-create-btn svg {
  width: 16px;
  height: 16px;
}

/* Integration modal helpers */
.int-secret-row {
  display: flex;
  gap: 8px;
}
.int-secret-input {
  flex: 1;
}
.int-optional-toggle {
  margin-top: 4px;
}
.int-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
}
.int-check-label input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  cursor: pointer;
}
/* Dedicated named-slot integration fields */
.int-slot-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════
   FORMS — Management Screen
══════════════════════════════════════════════════════════ */
.forms-sub {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.forms-sub[hidden] {
  display: none;
}

/* ── Warranty Form View ── */
.wf-selector-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.wf-selector-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}
.wf-form-select {
  height: 32px;
  font-size: 13px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--surface-base);
  cursor: pointer;
  min-width: 220px;
}
.wf-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.wf-container .pf-wrap {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}
.wf-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--gray-400);
  padding: 40px;
}
.wf-success {
  text-align: center;
  padding: 60px 20px;
}
.wf-success .btn-primary {
  margin-top: 20px;
}

.forms-list {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.forms-empty {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--gray-400);
}
.forms-empty svg {
  width: 60px;
  height: 60px;
}
.forms-empty p {
  font-size: 14px;
  text-align: center;
}

.form-card {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}
.form-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--gray-300);
}
.form-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.form-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
}
.form-card-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.4;
}
.form-card-meta {
  font-size: 12px;
  color: var(--gray-400);
}
.form-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.form-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 99px;
}
.form-badge-external {
  background: var(--green-light);
  color: var(--green);
}
.form-badge-internal {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* ══════════════════════════════════════════════════════════
   FORMS — Builder
══════════════════════════════════════════════════════════ */
.fb-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.fb-heading {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  color: var(--gray-900);
}
.fb-header-actions {
  display: flex;
  gap: 8px;
}
.fb-header-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fb-header-actions svg {
  width: 16px;
  height: 16px;
}

/* Tab bar */
.fb-tab-bar {
  display: flex;
  border-bottom: 2px solid var(--gray-200);
  background: var(--surface-base);
  flex-shrink: 0;
}
.fb-tab {
  flex: 1;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.fb-tab:hover {
  color: var(--gray-800);
}
.fb-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.fb-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left panel */
.fb-left {
  width: 380px;
  min-width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--gray-200);
  background: var(--gray-50);
}

/* ── Design tab controls ── */
.fbd-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.fbd-row:last-child {
  margin-bottom: 0;
}
.fbd-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
}
.fbd-color-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fbd-color-swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1.5px solid var(--gray-200);
  padding: 2px;
  cursor: pointer;
  background: transparent;
}
.fbd-color-hex {
  flex: 1;
  font-size: 12px;
  font-family: monospace;
  padding: 7px 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-900);
}
.fbd-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--gray-700);
}
.fbd-radio-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.fbd-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-900);
  font-family: inherit;
  box-sizing: border-box;
}
.fbd-textarea {
  resize: vertical;
  min-height: 60px;
}
.fbd-img-upload-wrap {
  display: flex;
  gap: 8px;
}
.fbd-img-preview {
  margin-top: 8px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 120px;
}
.fbd-img-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
}

/* Placement grid — 3×3 visual selector */
.fbd-placement-grid {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 36px);
  gap: 4px;
}
.fbd-placement-cell {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.fbd-placement-cell:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}
.fbd-placement-cell.active {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
}
.fb-section {
  padding: 16px;
  border-bottom: 1px solid var(--gray-200);
}
.fb-section:last-child {
  border-bottom: none;
}
.fb-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.fb-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
}
.fb-toggle-label input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
}

/* Field list */
.fb-fields-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fb-fields-empty {
  font-size: 13px;
  color: var(--gray-400);
  padding: 4px 0 8px;
  font-style: italic;
}
.fb-field-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: default;
  transition: box-shadow 0.1s;
}
.fb-field-item:hover {
  box-shadow: var(--shadow-sm);
}
.fb-field-item.fb-dragging {
  opacity: 0.4;
}
.fb-field-item.fb-drag-over {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px #2563eb33;
}
.fb-drag-handle {
  color: var(--gray-400);
  font-size: 16px;
  cursor: grab;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}
.fb-drag-handle:active {
  cursor: grabbing;
}
.fb-field-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fb-field-label {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
  padding: 0;
  outline: none;
  min-width: 0;
}
.fb-field-label:focus {
  background: var(--gray-50);
  border-radius: 3px;
  padding: 1px 4px;
}
.fb-field-type-tag {
  font-size: 10px;
  color: var(--gray-400);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: lowercase;
}
.fb-req-toggle {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  border: 1px solid var(--gray-300);
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.fb-req-toggle.fb-req-on {
  border-color: var(--cd-bfdbfe, #bfdbfe);
  background: var(--blue-light);
  color: var(--blue);
}
.fb-field-del {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--gray-400);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.1s,
    color 0.1s;
}
.fb-field-del:hover {
  background: var(--red-light);
  color: var(--red);
}

/* Field palette */
.fb-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fb-pal-sep {
  width: 100%;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  margin-top: 4px;
}
.fb-pal-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-700);
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s,
    color 0.12s;
}
.fb-pal-btn:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}
.fb-pal-custom {
  border-style: dashed;
}

/* Right panel: live preview */
.fb-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--gray-100);
  padding: 16px;
}
.fb-preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-400);
  margin-bottom: 12px;
  text-align: center;
}
.fb-preview-outer {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.fb-preview-phone {
  width: 390px;
  min-height: 500px;
  background: var(--surface-base);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: 0;
}
.fb-preview-inner {
  padding: 24px 20px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   DRAG-AND-DROP FORM BUILDER (library / canvas / properties)
   ══════════════════════════════════════════════════════════ */
#forms-builder {
  position: relative;
}

/* Left: field library */
.fb-library {
  width: 240px;
  min-width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--gray-200);
  background: var(--gray-50);
  padding: 14px;
}
.fb-lib-group {
  margin-bottom: 16px;
}
.fb-lib-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.fb-lib-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--gray-700);
  cursor: grab;
  user-select: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    background 0.12s,
    color 0.12s;
}
.fb-lib-card:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}
.fb-lib-card:active {
  cursor: grabbing;
}
.fb-lib-card-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--gray-400);
}
.fb-lib-card:hover .fb-lib-card-icon {
  color: var(--blue);
}
.fb-lib-card-icon svg {
  width: 18px;
  height: 18px;
}
.fb-lib-card-label {
  flex: 1;
}

/* Center: live canvas */
.fb-canvas-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--gray-100);
}
.fb-canvas-hint {
  font-size: 11px;
  color: var(--gray-500);
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.fb-canvas {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.fb-canvas-empty {
  margin: auto;
  text-align: center;
  color: var(--gray-400);
  font-size: 14px;
  line-height: 1.5;
  border: 2px dashed var(--gray-300);
  border-radius: 12px;
  padding: 48px 32px;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.5);
  transition:
    border-color 0.12s,
    background 0.12s,
    color 0.12s;
}
.fb-canvas-empty svg {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
}
.fb-canvas-empty.fb-canvas-empty-over {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}
.fb-canvas-form {
  width: 480px;
  max-width: 100%;
  background: var(--surface-base);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.fb-canvas-fields {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fbc-field {
  position: relative;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  padding: 8px;
  cursor: pointer;
  transition:
    border-color 0.1s,
    background 0.1s,
    box-shadow 0.1s;
}
.fbc-field:hover {
  border-color: var(--gray-200);
  background: var(--gray-50);
}
.fbc-field.fbc-selected {
  border-color: var(--blue);
  background: var(--blue-light);
}
.fbc-field.fbc-dragging {
  opacity: 0.4;
}
.fbc-field-preview {
  pointer-events: none;
}
.fbc-field-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  opacity: 0;
  transition: opacity 0.1s;
}
.fbc-field:hover .fbc-field-toolbar,
.fbc-field.fbc-selected .fbc-field-toolbar {
  opacity: 1;
}
.fbc-drag-handle {
  color: var(--gray-400);
  cursor: grab;
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.fbc-drag-handle:active {
  cursor: grabbing;
}
.fbc-map-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-light);
  padding: 1px 7px;
  border-radius: 99px;
  margin-left: auto;
}
.fbc-del {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--gray-400);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.fbc-field-toolbar .fbc-map-badge ~ .fbc-del {
  margin-left: 4px;
}
.fbc-field-toolbar > .fbc-del:not(.fbc-map-badge + .fbc-del) {
  margin-left: auto;
}
.fbc-del:hover {
  background: var(--red-light);
  color: var(--red);
}
.fbc-field.fbc-drop-before {
  box-shadow: inset 0 3px 0 var(--blue);
}
.fbc-field.fbc-drop-after {
  box-shadow: inset 0 -3px 0 var(--blue);
}

/* Right: properties */
.fb-props {
  width: 300px;
  min-width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  border-left: 1px solid var(--gray-200);
  background: var(--surface-base);
}
.fb-props-empty {
  padding: 24px 18px;
  font-size: 13px;
  color: var(--gray-400);
  font-style: italic;
  text-align: center;
}
.fb-props-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-200);
}
.fb-props-type {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
}
.fb-props-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--gray-400);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.fb-props-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}
.fb-props-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fb-prop {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fb-prop > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
}
.fb-prop input[type='text'],
.fb-prop input[type='number'],
.fb-prop textarea,
.fb-prop select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-900);
}
.fb-prop textarea {
  resize: vertical;
  min-height: 48px;
}
.fb-prop-toggle {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.fb-prop-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
}
.fb-prop-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin: -6px 0 0;
  font-style: italic;
}
.fbp-opt-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.fbp-opt-row input {
  flex: 1;
}
.fbp-opt-del {
  width: 28px;
  border: 1px solid var(--gray-200);
  background: var(--surface-base);
  border-radius: var(--radius);
  color: var(--gray-400);
  cursor: pointer;
  font-size: 15px;
}
.fbp-opt-del:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Per-form settings slide-over */
.fb-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 27, 0.35);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s;
}
.fb-settings-backdrop.show {
  opacity: 1;
  visibility: visible;
}
.fb-settings {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90%;
  background: var(--surface-base);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 41;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s;
}
.fb-settings.open {
  transform: translateX(0);
}
.fb-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--gray-200);
}
.fb-settings-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}
.fb-settings-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--gray-400);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.fb-settings-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}
.fb-settings-body {
  flex: 1;
  overflow-y: auto;
}

/* New public-form field types: yes/no toggle + section header/divider */
.pf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.pf-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pf-toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 99px;
  background: var(--gray-300);
  transition: background 0.15s;
  flex-shrink: 0;
}
.pf-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-base);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
.pf-toggle input:checked + .pf-toggle-track {
  background: var(--pf-btn-color, var(--blue));
}
.pf-toggle input:checked + .pf-toggle-track .pf-toggle-thumb {
  transform: translateX(20px);
}
.pf-toggle-text {
  font-size: 14px;
  color: var(--gray-700);
}
.pf-tt-yes {
  display: none;
}
.pf-toggle input:checked ~ .pf-toggle-text .pf-tt-yes {
  display: inline;
}
.pf-toggle input:checked ~ .pf-toggle-text .pf-tt-no {
  display: none;
}
.pf-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 12px 0 2px;
}
.pf-section-divider hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 6px 0;
}

/* ══════════════════════════════════════════════════════════
   PUBLIC FORM — Standalone Page
══════════════════════════════════════════════════════════ */
.pf-outer {
  min-height: 100vh;
  background: var(--gray-100);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 16px 60px;
}
.pf-container {
  width: 100%;
  max-width: 560px;
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
/* Public form wrapper that receives design CSS custom properties */
.pf-wrap {
  --pf-label-color: var(--gray-700);
  --pf-field-border: #d1d5db;
  --pf-field-radius: 4px;
  --pf-btn-color: #2563eb;
  --pf-btn-text: #ffffff;
  --pf-btn-radius: 4px;
}

.pf-header {
  background: var(--gray-900);
  padding: 28px 28px 22px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.pf-title {
  font-size: 22px;
  font-weight: 800;
  color: white;
  margin-bottom: 6px;
}
.pf-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

.pf-form {
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-label-color, var(--gray-700));
  white-space: normal;
  overflow: visible;
  line-height: 1.4;
  height: auto;
}
.pf-required {
  color: var(--red);
  margin-left: 2px;
}
.pf-field input,
.pf-field textarea,
.pf-field select {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1.5px solid var(--pf-field-border, var(--gray-300));
  border-radius: var(--pf-field-radius, var(--radius));
  background: var(--surface-base);
  color: var(--gray-900);
  transition: border-color 0.15s;
  font-family: inherit;
  /* Override the global height:36px set on bare `select` and `input` elements */
  height: auto;
  min-height: 46px;
  box-sizing: border-box;
}
.pf-field input:focus,
.pf-field textarea:focus,
.pf-field select:focus {
  border-color: var(--blue);
  outline: none;
}
.pf-field textarea {
  resize: vertical;
  min-height: 0;
}

.pf-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gray-700);
  cursor: pointer;
}
.pf-checkbox-label input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  cursor: pointer;
}
.pf-ms-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-ms-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gray-700);
  cursor: pointer;
}
.pf-ms-item input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  cursor: pointer;
}

.pf-submit-btn {
  margin-top: 6px;
  padding: 13px;
  font-size: 16px;
  font-weight: 700;
  background: var(--pf-btn-color, var(--blue));
  color: var(--pf-btn-text, white);
  border: none;
  border-radius: var(--pf-btn-radius, var(--radius));
  cursor: pointer;
  width: 100%;
  transition: filter 0.15s;
}
.pf-submit-btn:hover:not(:disabled) {
  filter: brightness(0.9);
}
.pf-submit-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.pf-preview-note {
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  margin-top: 4px;
}
.pf-file-validation-msg {
  font-size: 13px;
  color: var(--ct-dc2626, #dc2626);
  font-weight: 600;
  margin: 6px 0 0;
  padding: 8px 12px;
  background: var(--red-light);
  border: 1px solid var(--cd-fecaca, #fecaca);
  border-radius: 6px;
}

.pf-success {
  padding: 60px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.pf-success svg {
  width: 72px;
  height: 72px;
}
.pf-success h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
}
.pf-success p {
  font-size: 15px;
  color: var(--gray-500);
  line-height: 1.6;
  max-width: 320px;
}

.pf-not-found {
  padding: 60px 28px;
  text-align: center;
}
.pf-not-found h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 8px;
}
.pf-not-found p {
  font-size: 14px;
  color: var(--gray-400);
}

/* Form preview modal */
.fp-modal-body {
  padding: 0 !important;
}
.fp-modal-wrap {
  background: var(--gray-100);
  padding: 20px;
}

/* ── Account match popup ── */
.pf-match-popup {
  position: absolute;
  z-index: 9500;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.16),
    0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px;
  max-width: 360px;
  min-width: 280px;
  animation: pfPopupIn 0.18s ease;
}
@keyframes pfPopupIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.pf-match-popup-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 12px;
  line-height: 1.4;
}
.pf-match-popup-icon {
  width: 18px;
  height: 18px;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 1px;
}
.pf-match-popup-info {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-match-popup-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.pf-match-popup-key {
  width: 44px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
.pf-match-popup-val {
  color: var(--gray-800);
  font-weight: 500;
}
.pf-match-popup-actions {
  display: flex;
  gap: 8px;
}
.pf-match-popup-actions .btn-primary,
.pf-match-popup-actions .btn-secondary {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  border: none;
  text-align: center;
}
.pf-match-popup-actions .btn-primary {
  background: var(--blue);
  color: white;
}
.pf-match-popup-actions .btn-primary:hover {
  background: var(--blue-dark);
}
.pf-match-popup-actions .btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}
.pf-match-popup-actions .btn-secondary:hover {
  background: var(--gray-200);
}

/* Auto-fill highlight flash */
@keyframes pfAutofill {
  0% {
    background: var(--cb-dbeafe, #dbeafe);
  }
  100% {
    background: transparent;
  }
}
.pf-autofilled {
  animation: pfAutofill 2.5s ease forwards;
}

@media (max-width: 600px) {
  .pf-outer {
    padding: 0;
  }
  .pf-container {
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
  }
}

/* ── Automations View ── */

.auto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 0;
  flex-shrink: 0;
}
.auto-header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}
.auto-header-left .view-title {
  margin: 0;
}

.auto-tab-bar {
  display: flex;
  gap: 4px;
  background: var(--gray-200);
  border-radius: var(--radius);
  padding: 3px;
}
.auto-tab {
  border: none;
  background: transparent;
  padding: 5px 14px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.auto-tab.active {
  background: var(--surface-base);
  color: var(--gray-800);
  box-shadow: var(--shadow-sm);
}

.auto-sub {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 24px;
}
.auto-sub.active {
  display: flex;
  flex-direction: column;
}

.auto-groups-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.auto-create-bar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.auto-create-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auto-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-400);
  margin-bottom: 10px;
}

.auto-card {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 8px;
}
.auto-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 10px;
}
.auto-card-toggle {
  flex-shrink: 0;
  margin-top: 2px;
}
.auto-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
}
.auto-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.auto-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--gray-300);
  border-radius: 11px;
  transition: background 0.2s;
}
.auto-toggle input:checked + .auto-toggle-track {
  background: var(--green);
}
.auto-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--surface-base);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.auto-toggle input:checked ~ .auto-toggle-thumb {
  transform: translateX(18px);
}

.auto-card-main {
  flex: 1;
  min-width: 0;
}
.auto-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-800);
  margin-bottom: 4px;
}
.auto-card-sentence {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
}
.auto-card-sentence .auto-kw-inline {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  margin-right: 4px;
}
.auto-card-sentence .auto-chip-inline {
  display: inline;
  background: var(--blue-light);
  color: var(--blue);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 500;
}

.auto-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--gray-400);
  padding: 0 16px 12px 68px;
}
.auto-card-meta .auto-run-count {
  display: flex;
  align-items: center;
  gap: 4px;
}
.auto-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.auto-card-actions button {
  padding: 4px 10px;
}

.auto-card.auto-disabled {
  opacity: 0.65;
}
.auto-template-badge {
  display: inline-block;
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* ── Automation Log ── */
.auto-log-wrap {
  flex: 1;
  overflow-y: auto;
}
.auto-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.auto-log-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  background: var(--gray-50);
}
.auto-log-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: top;
}
.auto-log-table tr:last-child td {
  border-bottom: none;
}
.auto-log-success {
  color: var(--green);
  font-weight: 600;
}
.auto-log-fail {
  color: var(--red);
  font-weight: 600;
}
.auto-log-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--gray-400);
  font-size: 14px;
}

/* ── Staff Feedback Modal ── */
.feedback-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: auto-backdrop-in 0.15s ease;
}
.feedback-modal-backdrop[hidden] {
  display: none !important;
}
.feedback-modal-inner {
  background: var(--surface-base);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: auto-drawer-in 0.2s ease;
}
.feedback-modal-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--gray-200);
  position: relative;
  flex-shrink: 0;
}
.feedback-modal-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.feedback-modal-icon {
  width: 20px;
  height: 20px;
  color: var(--blue);
  flex-shrink: 0;
}
.feedback-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}
.feedback-modal-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
  line-height: 1.4;
  padding-right: 28px;
}
.feedback-modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--gray-400);
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition:
    background 0.1s,
    color 0.1s;
}
.feedback-modal-close-btn:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}
.feedback-modal-body {
  padding: 18px 20px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feedback-modal-row {
  display: flex;
  gap: 14px;
}
.feedback-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.input-readonly {
  background: var(--gray-50);
  color: var(--gray-600);
  cursor: default;
}
.field-required {
  color: var(--red);
  font-size: 11px;
}

/* ── Custom Fields Floating Panel ── */
.cf-float-panel {
  position: fixed;
  /* Default center position — overridden by drag */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Sit below standard modals (modal-backdrop z-index: 220) so any modal opened
     from inside this panel — Add/Edit Custom Field, confirm dialogs — renders on top.
     Must be above the full-page settings overlay (215) so it stays visible when
     opened from settings. */
  z-index: 218;
  background: var(--surface-base);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--gray-200);
  width: 520px;
  min-width: 520px;
  max-width: 96vw;
  min-height: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: auto-drawer-in 0.18s ease;
}

/* Add/Edit Custom Field modal — wider than the default modal so the form fits comfortably. */
#custom-field-modal .modal {
  min-width: 440px;
  min-height: 380px;
}

/* Address-changed warning badge on a job block.
   Set by saveTicketPanel when the customer's address changes after the job was routed.
   Cleared by autoRouteDay when the day is re-routed. */
.jb-addr-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  width: 14px;
  height: 14px;
  color: var(--ct-ffa000, #ffa000); /* orange exclamation */
  font-size: 13px;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
  vertical-align: middle;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35); /* visible on dark tech-color block backgrounds */
}
.job-block-addr-changed {
  /* Subtle amber outline so the block is identifiable even when the badge is clipped */
  box-shadow: inset 0 0 0 2px rgba(255, 160, 0, 0.65);
}

/* Address lock UI — shown in the ticket panel when the ticket has a scheduled job.
   The address input is read-only and visually muted; the lock-row sits directly
   underneath with the lock icon, status label, and Edit Address button. */
input#tsp-address.tsp-addr-locked {
  background: var(--gray-50);
  color: var(--gray-600);
  cursor: not-allowed;
  border-color: var(--gray-200);
}
.tsp-addr-lock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--amber-light); /* light amber — signals "needs attention to edit" */
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ct-92400e, #92400e);
}
.tsp-addr-lock-row[hidden] {
  display: none !important;
}
.tsp-addr-lock-icon {
  width: 14px;
  height: 14px;
  color: var(--ct-d97706, #d97706);
  flex-shrink: 0;
}
.tsp-addr-lock-label {
  flex: 1;
  font-weight: 600;
}
.tsp-addr-lock-row .btn-secondary {
  flex-shrink: 0;
  white-space: nowrap;
}
.cf-float-panel[hidden] {
  display: none !important;
}
/* Once dragged, transform is cleared by JS (left/top set explicitly) */
.cf-float-panel.cf-dragged {
  transform: none;
}
.cf-float-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 10px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  border-radius: 10px 10px 0 0;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}
.cf-float-header:active {
  cursor: grabbing;
}
.cf-float-grip {
  font-size: 16px;
  color: var(--gray-400);
  line-height: 1;
  flex-shrink: 0;
}
.cf-float-icon {
  width: 15px;
  height: 15px;
  color: var(--blue);
  flex-shrink: 0;
}
.cf-float-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
}
.cf-float-close {
  background: none;
  border: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  flex-shrink: 0;
  transition:
    background 0.1s,
    color 0.1s;
}
.cf-float-close:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}
.cf-float-close svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.cf-float-body {
  padding: 14px 16px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.cf-float-desc {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0 0 14px;
  line-height: 1.4;
}

/* ── Automations Drawer ── */
.auto-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.25);
  animation: auto-backdrop-in 0.2s ease;
}
@keyframes auto-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.auto-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  min-width: 320px;
  max-width: 900px;
  background: var(--surface-base);
  border-left: 1px solid var(--gray-200);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  z-index: 201;
  display: flex;
  flex-direction: column;
  animation: auto-drawer-in 0.2s ease;
}
.auto-drawer[hidden] {
  display: none !important;
}
@keyframes auto-drawer-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Left-edge resize handle */
.auto-drawer-resize {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: ew-resize;
  z-index: 202;
  background: transparent;
  transition: background 0.15s;
}
.auto-drawer-resize:hover,
.auto-drawer-resize.dragging {
  background: rgba(37, 99, 235, 0.35);
}

/* Drawer header */
.auto-drawer-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
  height: 52px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--gray-200);
  gap: 10px;
}
.auto-drawer-hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.auto-drawer-title-icon {
  width: 16px;
  height: 16px;
  color: var(--blue);
  flex-shrink: 0;
}
.auto-drawer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  white-space: nowrap;
  margin-right: 4px;
}
.auto-drawer-hdr-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* Close button inherits .gh-icon-btn but needs dark color inside the white drawer */
.auto-drawer-close {
  color: var(--gray-400) !important;
}
.auto-drawer-close:hover {
  background: var(--gray-100) !important;
  color: var(--gray-700) !important;
}

/* Drawer body — scrollable content area */
.auto-drawer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Override .auto-sub padding inside the drawer (less horizontal space) */
#auto-drawer .auto-sub {
  padding: 14px 16px 20px;
}

/* ── Automation Builder Modal ── */
/* overflow:visible overrides the base .modal overflow:hidden so that native <select>
   popup layers are never clipped by a composited layer (which can happen when
   overflow:hidden and the entry-animation transform coincide on the same element). */
.auto-modal {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
/* Re-apply corner clipping only to the footer whose gray background would otherwise
   protrude past the modal's border-radius at the bottom corners. */
.auto-modal .modal-footer {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
.auto-builder-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auto-sentence-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--blue-light);
  border: 1px solid var(--cd-dbeafe, #dbeafe);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 4px;
  font-size: 14px;
}
.auto-kw {
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--blue-dark);
}
.auto-chip {
  background: var(--blue-light);
  color: var(--blue-dark);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 500;
}
.auto-chip-empty {
  background: var(--gray-100);
  color: var(--gray-400);
  border-color: var(--gray-200);
  font-style: italic;
}

.auto-section {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--gray-200);
  padding: 20px 0;
}
.auto-section:first-of-type {
  border-top: none;
}
.auto-section-kw {
  width: 60px;
  flex-shrink: 0;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--blue-dark);
  padding-top: 30px;
}
.auto-section-content {
  flex: 1;
  min-width: 0;
}

.auto-select {
  width: 100%;
}

/* THEN section label, matching the field labels in WHEN/AND */
.auto-then-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 8px;
}

/* Before / After / Within + day-count row for date-based triggers */
.auto-date-trigger-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Plain-English live preview of the whole rule (below the builder) */
.auto-preview-card {
  margin-top: 8px;
  padding: 14px 18px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
}
.auto-preview-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.auto-preview-sentence {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-800);
}
.auto-preview-sentence.auto-preview-empty {
  color: var(--gray-400);
  font-style: italic;
}

/* Settings → Automations tab bar */
.auto-settings-tabbar {
  display: flex;
  gap: 4px;
  margin: 4px 0 16px;
  border-bottom: 1px solid var(--gray-200);
}
.auto-settings-tab {
  background: none;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auto-settings-tab:hover {
  color: var(--gray-700);
}
.auto-settings-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.auto-action-row {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 8px;
}
.auto-action-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.auto-action-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auto-action-header select {
  flex: 1;
}
.auto-action-header .btn-danger {
  flex-shrink: 0;
}

.merge-field-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 6px;
}
.merge-field-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}
.merge-field-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
}
.merge-field-item:hover {
  background: var(--gray-100);
}

/* ── Documents & E-Signature ── */
.doc-template-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.doc-tpl-card {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.doc-tpl-icon {
  color: var(--red);
  flex-shrink: 0;
}
.doc-tpl-info {
  flex: 1;
  min-width: 0;
}
.doc-tpl-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-800);
}
.doc-tpl-meta {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 2px;
}
.doc-tpl-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Template editor modal */
.doc-tpl-modal {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.doc-tpl-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-etabs {
  display: flex;
  gap: 4px;
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 3px;
  width: fit-content;
  margin-bottom: 4px;
}
.doc-etab {
  border: none;
  background: transparent;
  padding: 5px 14px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
}
.doc-etab.active {
  background: var(--surface-base);
  color: var(--gray-800);
  box-shadow: var(--shadow-sm);
}
.doc-etab-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-merge-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.doc-merge-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
  white-space: nowrap;
}
.doc-merge-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.doc-merge-btn {
  border: 1px solid var(--blue-light);
  background: var(--blue-light);
  color: var(--blue);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.doc-merge-btn:hover {
  background: var(--cb-dbeafe, #dbeafe);
}

.doc-toolbar {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.doc-tb-btn {
  border: none;
  background: transparent;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  color: var(--gray-700);
}
.doc-tb-btn:hover {
  background: var(--gray-200);
}

.doc-tpl-editor {
  min-height: 280px;
  border: 1px solid var(--gray-300);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-800);
  background: var(--surface-base);
  overflow-y: auto;
  outline: none;
  font-family: Georgia, 'Times New Roman', serif;
}
.doc-tpl-editor:focus {
  border-color: var(--blue);
}
.doc-tpl-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--gray-400);
  font-style: italic;
}

.doc-upload-zone {
  position: relative;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.doc-upload-zone:hover,
.doc-upload-zone.dragover {
  border-color: var(--blue);
  background: var(--blue-light);
}
.doc-upload-zone svg {
  width: 40px;
  height: 40px;
  color: var(--gray-400);
  margin-bottom: 10px;
}
.doc-upload-zone p {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 4px;
}
.doc-upload-zone small {
  color: var(--gray-400);
  font-size: 12px;
}
.doc-upload-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.doc-upload-fname {
  flex: 1;
  font-size: 13px;
  color: var(--gray-700);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Field Placement Editor (fullscreen) ── */
.fp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--surface-base);
}
.fp-backdrop[hidden] {
  display: none !important;
}
.fp-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.fp-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.fp-sidebar {
  width: 264px;
  flex-shrink: 0;
  border-right: 1px solid var(--gray-200);
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 10px;
  overflow-y: auto;
}
.fp-sidebar-hd {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}
.fp-sidebar-hint {
  font-size: 12px;
  color: var(--gray-400);
  line-height: 1.55;
  margin: 0;
}
.fp-placed-hd {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-400);
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}

/* Signers section in the placement editor */
.fp-signers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fp-signer-block {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  overflow: hidden;
}
.fp-signer-block.is-active {
  box-shadow: 0 0 0 2px var(--signer-color, var(--blue)) inset;
}
.fp-signer-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.fp-signer-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fp-signer-toggle {
  flex: 1;
  text-align: left;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
  cursor: pointer;
  padding: 0;
}
.fp-signer-palette {
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.fp-field-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--surface-base);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.fp-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
}
.fp-field-btn:hover {
  border-color: var(--signer-color);
  background: color-mix(in srgb, var(--signer-color) 8%, var(--surface-base));
}
.fp-field-btn.active {
  border-color: var(--signer-color);
  background: var(--signer-color);
  color: white;
}

/* Generic palette button (template editor signer rows etc.) */
.doc-palette-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}

/* Template-editor signers list */
.doc-signers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 540px;
}
.doc-signer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.doc-signer-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.doc-signer-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  outline: none;
}
.doc-signer-name:hover {
  border-color: var(--gray-200);
}
.doc-signer-name:focus {
  border-color: var(--blue);
  background: var(--surface-base);
}
.doc-signer-color-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--gray-300);
  cursor: pointer;
}
.doc-signer-del {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--gray-200);
  background: var(--surface-base);
  color: var(--gray-400);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.doc-signer-del:hover {
  color: var(--red);
  border-color: var(--red);
}

/* Properties panel (right side of placement editor) */
.fp-properties {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid var(--gray-200);
  background: var(--surface-base);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 12px;
  overflow-y: auto;
}
.fp-prop-hd {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}
.fp-prop-empty {
  font-size: 12px;
  color: var(--gray-400);
  font-style: italic;
  line-height: 1.55;
}
.fp-prop-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fp-prop-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fp-prop-row label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
}
.fp-prop-input {
  padding: 6px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 13px;
}
.fp-prop-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
  text-transform: none;
  letter-spacing: 0;
}
.fp-prop-toggle .fp-prop-em {
  width: 100%;
  font-size: 11px;
  color: var(--gray-400);
  font-style: italic;
  padding-left: 22px;
  margin-top: 2px;
}
.fp-prop-typetag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 9px;
  color: white;
  font-size: 11px;
  font-weight: 700;
}

.doc-placed-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doc-placed-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-600);
  padding: 5px 8px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
}
.doc-placed-item span {
  flex: 1;
}
.doc-placed-del {
  border: none;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.doc-placed-del:hover {
  color: var(--red);
}

.fp-doc-scroll {
  flex: 1;
  overflow: auto;
  background: #cbd5e1;
}
.fp-pages-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 48px 80px;
  gap: 0;
}
.fp-pages-wrap.crosshair {
  cursor: crosshair;
}

.fp-page-wrap {
  position: relative;
  background: var(--surface-base);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.fp-page-wrap canvas {
  display: block;
}
.fp-page-written {
  width: 816px;
  min-height: 1056px;
}
.fp-written-content {
  padding: 80px 96px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray-800);
  pointer-events: none;
}
.fp-page-label {
  font-size: 11px;
  color: var(--gray-500);
  text-align: center;
  margin-bottom: 6px;
  font-weight: 500;
}
.fp-page-sep {
  height: 24px;
  flex-shrink: 0;
}
.fp-loading {
  padding: 80px 40px;
  text-align: center;
  color: var(--gray-400);
  font-size: 15px;
}
.fp-error {
  padding: 60px 40px;
  text-align: center;
  color: var(--red);
  font-size: 14px;
  background: var(--red-light);
  border-radius: var(--radius-lg);
  margin: 40px;
}

.fp-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--gray-200);
  background: var(--surface-base);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  z-index: 10;
}
.fp-footer-info {
  flex: 1;
  font-size: 12px;
  color: var(--gray-400);
}

/* Placed fields — colored by the assigned signer role */
.doc-placed-field {
  position: absolute;
  border: 2px solid var(--signer-color, #2563eb);
  background: color-mix(in srgb, var(--signer-color, #2563eb) 12%, var(--surface-base));
  color: var(--signer-color, #2563eb);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: move;
  user-select: none;
  transition: box-shadow 0.12s;
  min-width: 60px;
  min-height: 24px;
  padding: 3px 6px;
  overflow: hidden;
}
.doc-placed-field:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}
.doc-placed-field.is-selected {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--signer-color, #2563eb) 35%, transparent),
    0 3px 10px rgba(0, 0, 0, 0.18);
}
.fp-pf-icon {
  flex-shrink: 0;
  font-size: 12px;
}
.fp-pf-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-pf-req {
  color: var(--red);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.fp-pf-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
  background: var(--signer-color, #2563eb);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.55;
}
.doc-placed-field:hover .fp-pf-resize {
  opacity: 1;
}
.doc-field-del {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  border: 2px solid white;
  cursor: pointer;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  display: none;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.doc-placed-field:hover .doc-field-del {
  display: block;
}

/* Placed-list (left panel) — dot reflects signer color */
.doc-placed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.doc-placed-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-placed-page {
  color: var(--gray-400);
  font-size: 11px;
}
.doc-placed-item {
  cursor: pointer;
}
.doc-placed-item:hover {
  background: var(--gray-50);
}

/* Send modal — per-signer rows */
.doc-send-signers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.doc-send-signer-row {
  display: grid;
  grid-template-columns: auto auto 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--signer-color);
  border-radius: var(--radius);
}
.doc-send-signer-tag {
  padding: 3px 8px;
  border-radius: 9px;
  color: white;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.doc-send-signer-meta {
  font-size: 11px;
  color: var(--gray-400);
  white-space: nowrap;
}
.doc-send-signer-name,
.doc-send-signer-email {
  padding: 6px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 12.5px;
}

/* Send modal */
.doc-preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  margin-bottom: 8px;
  margin-top: 4px;
}
.doc-send-preview {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 20px 24px;
  background: var(--surface-base);
  max-height: 300px;
  overflow-y: auto;
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-800);
}
.doc-platform-info {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
}
.doc-platform-ok {
  background: var(--green-light);
  color: var(--ct-065f46, #065f46);
  border: 1px solid var(--cd-a7f3d0, #a7f3d0);
}
.doc-platform-warn {
  background: var(--amber-light);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fde68a, #fde68a);
}

/* Document list (in ticket panel) */
.doc-list-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.doc-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 12px;
}
.doc-list-name {
  flex: 1;
  font-weight: 500;
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-list-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.doc-list-actions button {
  padding: 2px 7px;
  font-size: 11px;
}
.doc-status-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.doc-status-draft {
  background: var(--gray-100);
  color: var(--gray-500);
}
.doc-status-sent {
  background: var(--blue-light);
  color: var(--blue);
}
.doc-status-awaiting {
  background: var(--amber-light);
  color: var(--ct-92400e, #92400e);
}
.doc-status-signed {
  background: var(--green-light);
  color: var(--ct-065f46, #065f46);
}
.doc-status-voided {
  background: var(--red-light);
  color: var(--red);
}

/* Document view modal */
.doc-view-body {
  padding: 0 !important;
}
.doc-view-inner {
  padding: 40px 52px;
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray-800);
  max-height: 70vh;
  overflow-y: auto;
}
.doc-view-field-box {
  display: inline-block;
  min-width: 160px;
  border-bottom: 1px solid var(--gray-400);
  margin: 0 4px;
  padding: 0 4px;
  color: var(--gray-400);
  font-size: 11px;
  font-style: italic;
}
.doc-view-meta {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 12px 24px;
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--gray-500);
  align-items: center;
}

.auto-empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--gray-400);
}
.auto-empty-state svg {
  width: 64px;
  height: 64px;
  color: var(--gray-300);
  margin-bottom: 12px;
}
.auto-empty-state p {
  font-size: 14px;
}
.auto-empty-state strong {
  color: var(--gray-600);
}

/* ── CSV Import Wizard ── */

/* Backdrop: block layout so the modal can be absolutely positioned for clean resize */
#import-modal.modal-backdrop {
  display: block;
}

/* Modal: 75% wide by default, user-resizable in both dimensions */
#import-modal .modal.import-modal {
  position: absolute;
  left: 12.5%;
  top: 4vh;
  width: 75vw;
  min-width: 520px;
  height: 86vh;
  min-height: 380px;
  max-width: none;
  max-height: none;
  resize: both;
  overflow: hidden;
  /* Resize handle color hint */
  background-image: radial-gradient(circle at bottom right, #cbd5e1 3px, transparent 3px);
  background-size: 12px 12px;
  background-position: bottom right;
  background-repeat: no-repeat;
}

.import-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.import-modal-header {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 20px;
}
.import-modal .modal-footer {
  justify-content: space-between;
  align-items: center;
}
.import-modal-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 20px 24px;
  display: block;
  gap: 0;
  max-height: none;
}

/* Step indicator */
.import-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.import-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400);
  padding: 4px 10px;
  border-radius: 99px;
}
.import-step.active {
  background: var(--blue-light);
  color: var(--blue);
}
.import-step.done {
  color: var(--green);
}
.import-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.import-step.active .import-step-num {
  background: var(--blue);
  color: white;
}
.import-step.done .import-step-num {
  background: var(--green);
  color: white;
}
.import-step-arrow {
  color: var(--gray-300);
  font-size: 16px;
}

/* Step content */
.import-step-desc {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0 0 16px;
}

/* Step 1 – Upload */
.import-upload-area {
  padding: 24px;
}
.import-drop-zone {
  position: relative;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  background: var(--gray-50);
  transition:
    border-color 0.15s,
    background 0.15s;
  cursor: pointer;
}
.import-drop-zone:hover,
.import-drop-zone.dragover {
  border-color: var(--blue);
  background: var(--blue-light);
}
.import-drop-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-700);
  margin: 12px 0 4px;
}
.import-drop-sub {
  font-size: 13px;
  color: var(--gray-400);
  margin: 0;
}

.import-preview-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gray-200);
}
.import-fname {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-800);
  flex: 1;
}
.import-preview-count {
  font-size: 12px;
  color: var(--gray-400);
}
.import-preview-scroll {
  overflow-x: auto;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}

/* Shared table */
.import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.import-table th {
  background: var(--gray-50);
  padding: 7px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.import-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Step 2 – Spreadsheet column mapper */
.import-modal-body.import-s2-mode {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 10px;
}
.import-s2-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0;
}
.import-s2-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 10px;
  flex-shrink: 0;
}
.import-gear-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
}
.import-gear-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}
.import-advanced-popup {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 14px 16px;
  z-index: 20;
  min-width: 250px;
}
.import-adv-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.import-adv-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  margin-bottom: 8px;
  user-select: none;
}
.import-adv-row-wrap {
  padding: 4px 0 0 24px;
}
.import-adv-number {
  width: 58px;
  padding: 3px 6px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 12px;
  margin-left: 6px;
}
/* Table container */
.import-s2-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
/* Spreadsheet table */
.import-col-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
  table-layout: auto;
}
.import-col-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}
.import-rownum-th {
  position: sticky;
  left: 0;
  z-index: 6;
  background: var(--gray-100);
  width: 34px;
  min-width: 34px;
  border-right: 1px solid var(--gray-200);
  border-bottom: 2px solid var(--gray-200);
  padding: 0;
}
.import-col-th {
  min-width: 155px;
  max-width: 210px;
  padding: 6px 8px 8px;
  border-right: 1px solid var(--gray-200);
  border-bottom: 2px solid var(--gray-200);
  vertical-align: top;
  background: var(--surface-base);
}
.import-col-th.unmapped {
  background: var(--amber-light);
  border-bottom-color: var(--cd-f97316, #f97316);
}
.import-col-th.mapped {
  background: var(--surface-base);
  border-bottom-color: var(--gray-200);
}
.import-col-header-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 185px;
  margin-bottom: 5px;
  letter-spacing: 0.15px;
}
.import-col-th.unmapped .import-col-header-label {
  color: #9a3412;
}
.import-col-select {
  width: 100%;
  font-size: 11px;
  padding: 3px 4px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-700);
  max-width: 185px;
}
.import-col-th.unmapped .import-col-select {
  border-color: var(--cd-fdba74, #fdba74);
}

/* ── Searchable column-mapping dropdown ── */
.import-col-select-wrap {
  width: 100%;
  max-width: 185px;
}
.import-col-select-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-700);
  cursor: pointer;
  text-align: left;
}
.import-col-select-btn:hover {
  border-color: var(--gray-400);
}
.import-col-select-wrap.has-val .import-col-select-btn {
  border-color: var(--green);
  color: var(--gray-800);
  font-weight: 600;
}
.import-col-th.unmapped .import-col-select-btn {
  border-color: var(--cd-fdba74, #fdba74);
}
.import-col-select-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-col-select-caret {
  flex: 0 0 auto;
  color: var(--gray-400);
}

/* Duration unit selector — appears under the column-mapping dropdown only when the
   column is mapped to a duration/hours field. Declares the CSV's source format. */
.import-col-unit-wrap:empty {
  display: none;
}
.import-col-unit-select {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  max-width: 185px;
  font-size: 10px;
  color: var(--gray-500);
}
.import-col-unit-label {
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}
.import-col-unit-dd {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  padding: 3px 5px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-700);
  cursor: pointer;
}
.import-col-unit-dd:hover {
  border-color: var(--gray-400);
}

.import-col-select-menu {
  z-index: 4000;
  width: max-content;
  max-width: 280px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.import-col-select-search {
  flex: 0 0 auto;
  margin: 6px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-800);
}
.import-col-select-search:focus {
  outline: none;
  border-color: var(--brand, #6366f1);
}
.import-col-select-options {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 4px 6px;
}
.import-col-optgroup {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
  padding: 6px 6px 2px;
}
.import-col-opt {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: var(--radius);
  color: var(--gray-700);
  cursor: pointer;
}
.import-col-opt:hover {
  background: var(--gray-100);
}
.import-col-opt.sel {
  background: var(--brand-light, #eef2ff);
  color: var(--brand, #4f46e5);
  font-weight: 600;
}
/* Data rows */
.import-rownum-td {
  position: sticky;
  left: 0;
  background: var(--gray-50);
  z-index: 1;
  width: 34px;
  min-width: 34px;
  text-align: center;
  color: var(--gray-400);
  font-size: 11px;
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-100);
  padding: 4px 2px;
}
.import-col-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--gray-100);
  border-right: 1px solid var(--gray-100);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gray-700);
  vertical-align: middle;
}
.import-col-table tbody tr:hover td {
  background: var(--gray-50);
}
.import-col-table tbody tr:hover .import-rownum-td {
  background: var(--gray-100);
}
/* Sheet tabs */
.import-sheet-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 0 0;
  overflow-x: auto;
  flex-shrink: 0;
}
.import-sheet-tab {
  padding: 5px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--gray-50);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  color: var(--gray-600);
  transition: background 0.1s;
}
.import-sheet-tab:hover {
  background: var(--gray-100);
}
.import-sheet-tab.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
/* Footer save-mapping checkbox */
.import-save-mapping-chk {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--gray-500);
  cursor: pointer;
  user-select: none;
}
/* Step 2 — Clear Saved Mapping link-button */
.import-clear-mapping-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.import-clear-mapping-btn:hover {
  color: var(--blue-dark, #1d4ed8);
}

/* Step 1 — Import Source (required) field */
.import-source-field {
  margin: 4px 0 16px;
}
.import-source-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 5px;
}
.import-req-star {
  color: var(--red, #dc2626);
}
.import-source-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base, #fff);
  color: var(--gray-800);
}
.import-source-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}
.import-source-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin: 5px 0 0;
}
.import-status-select {
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}
/* Legacy classes kept for backward compat (steps 1/3/4) */
.import-map-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.import-map-table th {
  background: var(--gray-50);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
}
.import-map-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.import-map-table tr.import-mapped {
  background: var(--cb-f0fdf4, #f0fdf4);
}
.import-map-select,
.import-map-sel {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 12px;
  background: var(--surface-base);
}
.import-auto-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--cb-dcfce7, #dcfce7);
  color: var(--ct-15803d, #15803d);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

/* Step 3 – Validate */
.import-validate-summary {
  display: flex;
  gap: 12px;
  padding: 16px 0 12px;
}
.import-vs-card {
  flex: 1;
  text-align: center;
  padding: 16px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}
.import-vs-ok {
  background: var(--green-light);
  border-color: var(--cd-a7f3d0, #a7f3d0);
}
.import-vs-warn {
  background: var(--amber-light);
  border-color: var(--cd-fde68a, #fde68a);
}
.import-vs-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--gray-800);
  line-height: 1;
}
.import-vs-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}
.import-validate-table .import-row-invalid {
  background: var(--red-light);
}
.import-validate-table .import-row-ok {
  background: var(--surface-base);
}
.import-errors {
  white-space: nowrap;
}
.import-err-tag {
  display: inline-block;
  background: var(--red-light);
  color: var(--red);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  margin: 1px;
}
.import-ok-tag {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}

/* Step 4 – Progress */
.import-progress-wrap {
  padding: 32px 24px;
  text-align: center;
}
.import-progress-msg {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 16px;
}
.import-progress-bar-wrap {
  height: 8px;
  background: var(--gray-200);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 24px;
}
.import-progress-bar {
  height: 100%;
  background: var(--blue);
  border-radius: 99px;
  transition: width 0.2s ease;
}
.import-summary-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.import-skip-reasons {
  font-size: 12px;
  color: var(--gray-400);
  margin: 0;
}

/* Import log in settings */
.import-log-entry {
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  margin-bottom: 8px;
}
.import-log-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.import-log-fname {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-800);
}
.import-log-date {
  font-size: 12px;
  color: var(--gray-400);
}
.import-log-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
}
.import-log-ok {
  color: var(--green);
  font-weight: 600;
}
.import-log-skip {
  color: var(--amber);
  font-weight: 600;
}
.import-log-by {
  color: var(--gray-400);
}

/* Duplicate modal */
.import-dup-modal {
  padding: 24px;
}
.import-dup-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.import-dup-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.import-dup-opt:hover,
.import-dup-opt.selected {
  border-color: var(--blue);
  background: var(--blue-light);
}
.import-dup-opt-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-800);
}
.import-dup-opt-desc {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* Dynamic step content */
.import-step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 6px;
}
.import-preview-empty {
  font-size: 13px;
  color: var(--gray-400);
  text-align: center;
  padding: 20px 0 0;
}
.import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.import-preview-table th {
  background: var(--gray-50);
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.import-preview-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-dup-wrap {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.import-dup-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  display: block;
  margin-bottom: 8px;
}
.import-dup-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Step 3 — body flex layout */
.import-modal-body.import-s3-mode {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 10px;
}
.import-s3-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.import-s3-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  flex-shrink: 0;
}
.import-s3-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}
.import-s3-dot {
  color: var(--gray-300);
}
.import-s3-sm-btn {
  padding: 4px 10px;
  font-size: 12px;
}
.import-s3-dup-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--gray-600);
  white-space: nowrap;
}
.import-s3-dup-sel {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
}
/* Scrollable row list */
.import-validate-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Row card */
.import-validate-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  overflow: hidden;
  flex-shrink: 0;
}
.import-validate-card.has-error {
  border-color: var(--cd-fca5a5, #fca5a5);
}
.import-validate-card.excluded {
  opacity: 0.5;
}
.import-validate-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
.import-validate-card.has-error .import-validate-card-header {
  background: var(--cb-fee2e2, #fee2e2);
  border-bottom-color: var(--cd-fca5a5, #fca5a5);
}
.import-validate-card.excluded .import-validate-card-header {
  background: var(--gray-100);
}
/* Exclude toggle */
.imp-excl-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}
.imp-excl-pill {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  min-width: 42px;
}
.import-validate-card.excluded .imp-excl-pill {
  color: var(--ct-f97316, #f97316);
}
/* Row number & name */
.import-validate-row-num {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 600;
  flex-shrink: 0;
}
.ivcard-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Badge */
.import-validate-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}
.import-validate-badge.ok {
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-059669, #059669);
}
.import-validate-badge.error {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-dc2626, #dc2626);
}
/* Field-value grid inside card */
.import-validate-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 3px 14px;
  padding: 7px 12px 8px;
}
.imp-fv-pair {
  display: flex;
  gap: 5px;
  font-size: 12px;
  min-width: 0;
  align-items: baseline;
}
.imp-fv-label {
  color: var(--gray-400);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.imp-fv-label::after {
  content: ':';
}
.imp-fv-value {
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
/* Error list */
.import-validate-errors {
  margin: 0;
  padding: 5px 12px 6px 28px;
  background: var(--red-light);
  border-top: 1px solid var(--cd-fca5a5, #fca5a5);
  font-size: 12px;
  color: var(--ct-991b1b, #991b1b);
}
.import-validate-errors li {
  margin: 2px 0;
}
/* Pagination */
.import-s3-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 2px;
  font-size: 12px;
  color: var(--gray-500);
  flex-shrink: 0;
}
.import-validate-warn {
  padding: 8px 12px;
  background: var(--amber-light);
  border: 1px solid var(--cd-fde68a, #fde68a);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ct-92400e, #92400e);
  margin-bottom: 12px;
}

/* Summary grid (uses existing .import-vs-* classes) */
.import-summary {
  margin-top: 12px;
}

/* ── Scheduling section (ticket panel) ── */
/* #tsp-sched-section contains stacked fields; give them breathing room */
#tsp-sched-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tsp-sched-field {
  align-items: flex-start;
}
.tsp-sched-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 28px;
}
.tsp-sched-duration-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--amber);
  font-style: italic;
}

/* Unassigned mode: multi-tech block (techsNeeded > 1 with Assign Technician off). */
.tsp-sched-multitech-err {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--red);
}
.tsp-sched-multitech-err svg {
  flex: 0 0 auto;
  margin-top: 1px;
}
.tsp-sched-multitech-err strong {
  font-weight: 700;
}

/* Assigned/Unassigned: controls that are inert in Unassigned mode (Lock-to-Tech, the
   Techs Needed input, and the per-slot dropdowns) are dimmed and non-interactive. The
   per-slot <select>s also carry their own disabled state for locked techs, so we rely on
   pointer-events here rather than only the disabled attribute. */
.tsp-field-disabled {
  opacity: 0.5;
}
.tsp-field-disabled input,
.tsp-field-disabled select,
.tsp-field-disabled label {
  pointer-events: none;
}

/* ── Scheduling Preference + Assign Technician two-column row ── */
.tsp-sched-pref-toggle {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.tsp-sched-pref-col {
  flex: 1;
  min-width: 0;
}
.tsp-sched-pref-col > .field {
  margin-bottom: 0;
}
.tsp-sched-toggle-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.tsp-toggle-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.tsp-assign-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
}
.tsp-assign-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tsp-toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--gray-300);
  transition: background 0.15s;
  flex-shrink: 0;
}
.tsp-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.tsp-assign-toggle input:checked + .tsp-toggle-track {
  background: var(--blue);
}
.tsp-assign-toggle input:checked + .tsp-toggle-track .tsp-toggle-thumb {
  transform: translateX(16px);
}
.tsp-assign-toggle input:focus-visible + .tsp-toggle-track {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.tsp-assign-toggle-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}
.tsp-assign-toggle-mode {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.tsp-unassigned-date {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--text-primary);
  font-size: 13px;
}

/* Large prominent Schedule button */
.tsp-schedule-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius);
  background: var(--blue);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
  white-space: nowrap;
}
.tsp-schedule-cta:hover {
  background: var(--blue-dark);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
}
.tsp-schedule-cta:disabled {
  background: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
  box-shadow: none;
}
.tsp-sched-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 28px;
}
/* Conditional time-constraint picker shown below the preference dropdown */
.tsp-time-constraint {
  margin-top: 8px;
}
.tsp-time-constraint input[type='time'] {
  max-width: 160px;
}
/* Overview tab — Scheduling Preference display with optional constraint badge */
.tsp-sched-pref-display {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 28px;
  font-size: 13px;
}
.tsp-sched-pref-label {
  font-weight: 600;
  color: var(--gray-800);
}
.tsp-sched-constraint-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9px;
  white-space: nowrap;
}
.tsp-sched-constraint-after {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  border: 1px solid var(--cd-93c5fd, #93c5fd);
}
.tsp-sched-constraint-before {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-b91c1c, #b91c1c);
  border: 1px solid var(--cd-fca5a5, #fca5a5);
}
.tsp-sched-val {
  font-size: 13px;
  color: var(--gray-400);
  font-style: italic;
}
.tsp-sched-val.tsp-sched-val-set {
  color: var(--blue);
  font-style: normal;
  font-weight: 600;
}
.tsp-sched-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.tsp-sched-tech-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-600);
  white-space: nowrap;
}
.tsp-sched-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tsp-sched-btns {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.tsp-sched-day-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
.tsp-sched-day-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  min-width: 38px;
}
.tsp-sched-inline-multiday {
  align-items: flex-start;
}
.tsp-sched-inline-multiday .tsp-sched-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

/* ── Full Day / Multi-Day controls ── */
.tsp-duration-field {
  grid-column: 1 / -1;
}
.tsp-duration-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tsp-day-flags {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.tsp-day-flag-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--gray-600);
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  background: var(--gray-50);
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
  user-select: none;
}
.tsp-day-flag-label input {
  display: none;
}
.tsp-day-flag-label:hover {
  border-color: var(--gray-400);
}
.tsp-day-flag-label.active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
  font-weight: 600;
}
.hm-input-group.hm-input-disabled {
  opacity: 0.38;
  pointer-events: none;
}
.hm-input-group.hm-input-disabled input {
  background: var(--gray-100);
  color: var(--gray-400);
}
.tsp-multi-day-opts {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}
.tsp-multi-day-opts .tsp-grid-2col {
  gap: 10px;
}
/* Multi-Day "Full Day each day" sub-option sits below the day-count / tech row */
.tsp-md-subflag {
  display: inline-flex;
  margin-top: 10px;
}
.tsp-md-hours-wrap {
  margin-top: 10px;
}
.tsp-md-hours-wrap > label {
  display: block;
  font-size: 12px;
  color: var(--gray-600);
  margin-bottom: 4px;
}
.tsp-day-flag-label[hidden] {
  display: none !important;
}

/* ── Techs Needed control + per-slot pinning ── */
/* Compact inline number input (sized like the hours/minutes duration fields), not a full row. */
.tsp-techs-needed-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tsp-techs-needed-row label {
  white-space: nowrap;
}
/* Element+attribute selector to outrank the global `input[type="number"]{width:100%}`. */
input[type='number'].tsp-techs-needed-input {
  width: 58px;
  min-width: 0;
  text-align: center;
  -moz-appearance: textfield;
  flex: 0 0 auto;
}
.tsp-tech-slots {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tsp-tech-slots[hidden] {
  display: none !important;
}
/* Slot row: label · tech dropdown · [All Days + day dropdown]. The day-assignment group
   sits to the right and wraps below as a unit only when the panel is too narrow. */
.tsp-tech-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tsp-tech-slot-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  min-width: 46px;
  flex-shrink: 0;
}
.tsp-tech-slot-sel {
  flex: 1 1 130px;
  min-width: 110px;
}
.tsp-slot-dayassign {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.tsp-slot-alldays {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.tsp-slot-alldays input {
  margin: 0;
  flex-shrink: 0;
}
.tsp-tech-slot-day-sel {
  flex: 0 0 auto;
  width: auto;
  min-width: 84px;
}
.tsp-tech-slot-day-sel[hidden] {
  display: none !important;
}

/* ── Sq Ft / Coating details ── */
.tsp-sqft-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tsp-sqft-wrap input[type='number'] {
  flex: 1;
  min-width: 0;
}
.tsp-sqft-unit {
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
}
.tsp-cure-toggle-row {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.tsp-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tsp-link-btn:hover {
  color: var(--blue-dark, #1d4ed8);
}

/* ── Auto-calc materials ── */
.tsp-auto-materials {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.tsp-auto-mat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}
.tsp-mat-row-auto {
  background: transparent;
}
.tsp-mat-auto-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #0284c7;
  background: var(--cb-e0f2fe, #e0f2fe);
  border: 1px solid var(--cd-bae6fd, #bae6fd);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
}

/* ── Assessment → Add to Notes section ── */
#tsp-assess-note-text {
  resize: vertical;
}

/* ── Tech notes in Job & Scheduling tab ── */
.tsp-tech-note-entry {
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--amber-light);
  border: 1px solid var(--cd-fde68a, #fde68a);
  border-left: 3px solid var(--amber);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tsp-tech-note-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--gray-500);
}
.tsp-tech-note-author {
  font-weight: 600;
  color: var(--gray-700);
}
.tsp-tech-note-time {
  margin-left: auto;
}
.tsp-tech-note-body {
  font-size: 13px;
  color: var(--gray-800);
  white-space: pre-wrap;
  word-break: break-word;
}
#tsp-tech-notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: 1 / -1;
}

/* ════════════════════════════════════════════════════════
   JOB PHOTOS — grouped Before / During / After uploader
════════════════════════════════════════════════════════ */
.jp-groups-container {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jp-group {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.jp-group-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.jp-group-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  flex: 1;
}
.jp-group-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--gray-200);
  color: var(--gray-500);
}
.jp-group-count.jp-count-has {
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-065f46, #065f46);
}
.jp-group-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 99px;
  cursor: pointer;
  background: var(--blue-light);
  color: var(--blue);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  white-space: nowrap;
}
.jp-group-add:hover {
  background: var(--cb-dbeafe, #dbeafe);
}
.jp-group-body {
  padding: 10px 12px;
}
.jp-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jp-photo-thumb {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.jp-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jp-photo-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.jp-photo-thumb:hover .jp-photo-del {
  opacity: 1;
}
.jp-dropzone {
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
  font-size: 11.5px;
  color: var(--gray-400);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.jp-dropzone:hover,
.jp-dropzone.jp-dz-over {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}
/* ── CompanyCam flags ── */
/* Compact pill in ticket panel header */
.tsp-cc-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--red-light);
  color: var(--ct-dc2626, #dc2626);
  border: 1px solid var(--cd-fecaca, #fecaca);
  white-space: nowrap;
  cursor: default;
}
/* Warning block inside the review modal */
.jrm-cc-flag {
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--red-light);
  border: 1px solid var(--cd-fecaca, #fecaca);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jrm-cc-flag-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ct-dc2626, #dc2626);
}
.jrm-cc-flag-msg {
  font-size: 12px;
  color: var(--ct-991b1b, #991b1b);
  line-height: 1.5;
}
.jrm-cc-flag button {
  align-self: flex-start;
}

/* Missing-group flag inside panel header */
.jp-missing-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fde68a, #fde68a);
  white-space: nowrap;
}
/* Photo flag inside the review modal */
.jrm-photo-flag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-fde68a, #fde68a);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ct-92400e, #92400e);
}
.jrm-photo-flag svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.jrm-photo-flag-groups {
  font-weight: 700;
}
/* Grouped photos in review modal */
.jrm-jp-group {
  margin-bottom: 10px;
}
.jrm-jp-group-hdr {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jrm-jp-ok {
  color: var(--green);
}
.jrm-jp-miss {
  color: var(--amber);
}

/* My Schedule — persistent photo upload section */
.ms-photos-persistent {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding: 0 14px;
}
.ms-photos-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  text-align: left;
}
.ms-photos-toggle:hover {
  color: var(--gray-900);
}
.ms-photos-toggle-chevron {
  margin-left: auto;
  transition: transform 0.2s;
}
.ms-photos-toggle.open .ms-photos-toggle-chevron {
  transform: rotate(180deg);
}
.ms-photos-body {
  padding-bottom: 12px;
}
.ms-photos-body .jp-groups-container {
  gap: 8px;
}
.ms-photos-body .jp-group-body {
  padding: 8px 10px;
}
.ms-photos-body .jp-photo-thumb {
  width: 56px;
  height: 56px;
}

/* ── Files dropzone (Documents tab) ── */
.tsp-files-dropzone {
  grid-column: 1 / -1;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tsp-files-dropzone:hover,
.tsp-files-dropzone.tsp-files-dz-over {
  border-color: var(--blue);
  background: var(--blue-light);
}
.tsp-files-dz-text {
  font-size: 13px;
  color: var(--gray-600);
  margin: 0;
}
.tsp-files-dz-link {
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.tsp-files-dz-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin: 0;
}
.tsp-files-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tsp-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 12px;
}
.tsp-file-icon {
  flex-shrink: 0;
  color: var(--gray-400);
}
.tsp-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--gray-800);
}
.tsp-file-size {
  color: var(--gray-400);
  white-space: nowrap;
  flex-shrink: 0;
}
.tsp-file-download,
.tsp-file-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  border: none;
  background: transparent;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
  text-decoration: none;
}
.tsp-file-download:hover {
  color: var(--blue);
  background: var(--blue-light);
}
.tsp-file-remove:hover {
  color: var(--red);
  background: var(--red-light);
}

/* ── Remove from Schedule button ── */
.btn-warn {
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fde68a, #fde68a);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.btn-warn:hover {
  background: var(--cb-fde68a, #fde68a);
  border-color: var(--cd-f59e0b, #f59e0b);
}
.btn-warn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Status Groups Settings ── */
.sg-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.sg-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: box-shadow 0.12s;
}
.sg-card:not(.sg-built-in) {
  cursor: default;
}
.sg-card:not(.sg-built-in):hover {
  box-shadow: var(--shadow-sm);
}
.sg-card.sg-dragging {
  opacity: 0.35;
}
.sg-card.sg-card-over {
  border-top: 2px solid var(--blue);
}
.sg-drag-handle {
  display: flex;
  align-items: center;
  color: var(--gray-300);
  cursor: grab;
  flex-shrink: 0;
}
.sg-drag-handle.sg-drag-disabled {
  cursor: default;
}
.sg-drag-handle svg {
  width: 16px;
  height: 16px;
}
.sg-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0, 0, 0, 0.08);
}

/* Inline color picker on each status group row */
.sg-inline-color {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  cursor: pointer;
  padding: 1px;
  flex-shrink: 0;
  background: none;
}
.sg-inline-color::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 4px;
}
.sg-inline-color::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}
.sg-card-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  min-width: 0;
}
.sg-label-input {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px 6px;
  background: transparent;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.sg-label-input:hover {
  border-color: var(--gray-200);
  background: var(--gray-50);
}
.sg-label-input:focus {
  border-color: var(--blue);
  background: var(--surface-base);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.sg-badge-secondary {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--gray-100);
  color: var(--gray-500);
  flex-shrink: 0;
}
.sg-badge-builtin {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--blue-light);
  color: var(--blue);
  flex-shrink: 0;
}
.sg-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
}
.sg-separator span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  white-space: nowrap;
}
.sg-separator::before,
.sg-separator::after {
  content: '';
  flex: 1;
  border-top: 1px dashed var(--gray-200);
}

/* ── Status Group Modal Color Picker ── */
.sg-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.sg-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.1s,
    border-color 0.1s;
}
.sg-color-swatch:hover {
  transform: scale(1.15);
}
.sg-color-swatch.sg-color-active {
  border-color: var(--gray-800);
  box-shadow:
    0 0 0 2px white,
    0 0 0 4px var(--gray-800);
}

/* ═══════════════════════════════════════════════════════════
   CALENDAR VIEW
   ═══════════════════════════════════════════════════════════ */

/* Container */
.cal-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Header bar */
.cal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
/* Nav section: ← label → */
.cal-hdr-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* Tech filter pushed to far right */
.cal-hdr-right {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.cal-nav-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
  white-space: nowrap;
  min-width: 140px;
  text-align: center;
}
.cal-view-switcher {
  display: flex;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}
.cal-view-btn {
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-base);
  color: var(--gray-600);
  border: none;
  border-right: 1px solid var(--gray-200);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.cal-view-btn:last-child {
  border-right: none;
}
.cal-view-btn:hover {
  background: var(--gray-50);
}
.cal-view-btn.active {
  background: var(--blue);
  color: white;
}
.cal-tech-select {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-700);
  cursor: pointer;
}

/* Body */
.cal-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.cal-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--gray-400);
  font-size: 13px;
}

/* ── Month View ── */
.cal-month {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.cal-month-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 2;
}
.cal-month-dow {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  border-right: 1px solid var(--gray-200);
}
.cal-month-dow:last-child {
  border-right: none;
}
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  border-left: 1px solid var(--gray-200);
}
.cal-day-cell {
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 5px 6px;
  min-height: 110px;
  overflow: hidden;
  background: var(--surface-base);
  transition: background 0.1s;
}
.cal-day-cell.other-month {
  background: var(--gray-50);
}
.cal-day-cell.is-today {
  background: var(--blue-light);
}
/* Non-working days (no tech has that weekday enabled) — grayed out, no badge */
.cal-day-cell.non-working-day {
  background: var(--gray-100);
}
.cal-day-cell.non-working-day .cal-day-num {
  color: var(--gray-400);
}
.cal-day-cell-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.cal-day-cell-hdr .avail-badge {
  font-size: 9px;
  padding: 1px 4px;
}
.cal-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.cal-day-num.today-num {
  background: var(--blue);
  color: white;
  font-weight: 700;
}
.cal-job-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 5px;
  margin-bottom: 2px;
  border-radius: 4px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition:
    background 0.1s,
    box-shadow 0.1s;
  overflow: hidden;
}
.cal-job-chip:hover {
  box-shadow: var(--shadow-sm);
}
.cal-job-chip-name {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-job-chip-hrs {
  font-size: 10px;
  color: var(--gray-500);
  flex-shrink: 0;
}
.cal-chip-more {
  font-size: 10px;
  color: var(--blue);
  font-weight: 600;
  padding: 1px 5px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s;
}
.cal-chip-more:hover {
  background: var(--blue-light);
  text-decoration: underline;
}
/* Placeholder job chips — grayed, not clickable */
.cal-job-chip-ph {
  border-left: 3px solid var(--gray-300) !important;
  opacity: 0.65;
  cursor: default;
}
.cal-job-chip-ph:hover {
  background: var(--gray-50);
  box-shadow: none;
}
.cal-ph-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
}
/* Placeholder week/day job cards */
.cal-week-job-ph {
  opacity: 0.6;
  cursor: default;
}
.cal-week-job-ph:hover {
  box-shadow: none;
}
.cal-day-job-ph {
  opacity: 0.6;
  cursor: default;
}
.cal-day-job-ph:hover {
  box-shadow: none;
}

/* ── Week View ── */
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-height: 100%;
  border-left: 1px solid var(--gray-200);
}
.cal-week-col {
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cal-week-today {
  background: var(--blue-light);
}
.cal-week-col-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px 8px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 2;
}
.cal-week-today .cal-week-col-header {
  background: var(--cb-dbeafe, #dbeafe);
}
.cal-wk-dow {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cal-wk-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-700);
  line-height: 1.2;
}
.cal-wk-num-today {
  color: var(--blue);
}
.cal-wk-month {
  font-size: 10px;
  color: var(--gray-400);
}
.cal-week-col-body {
  flex: 1;
  padding: 8px 6px;
  overflow: auto;
}
.cal-week-job {
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: var(--radius);
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: box-shadow 0.1s;
}
.cal-week-job:hover {
  box-shadow: var(--shadow-sm);
}
.cal-wk-job-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-wk-job-meta {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}
.cal-week-empty {
  font-size: 12px;
  color: var(--gray-300);
  text-align: center;
  padding: 20px 0;
}

/* ── Day View ── */
.cal-day-view {
  display: flex;
  min-height: 100%;
  border-left: 1px solid var(--gray-200);
}
.cal-day-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  color: var(--gray-400);
  font-size: 13px;
}
.cal-day-tech-col {
  flex: 1;
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cal-day-tech-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
/* Overbooked tech header in day view */
.cal-day-tech-header--over {
  background: var(--red-light);
}
.cal-day-over-badge {
  display: inline-flex;
  align-items: center;
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-b91c1c, #b91c1c);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: 5px;
  vertical-align: middle;
}
/* Extra "Over" badge shown alongside green avail badge in calendar month view */
.cal-over-extra-badge {
  margin-left: 3px;
}
.cal-day-tech-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.cal-day-tech-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
}
.cal-day-tech-meta {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 1px;
}
.cal-day-tech-body {
  flex: 1;
  padding: 10px;
  overflow: auto;
}
.cal-day-job {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: box-shadow 0.1s;
}
.cal-day-job:hover {
  box-shadow: var(--shadow-sm);
}
.cal-day-job-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-day-stop-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--surface-base);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.cal-day-job-addr {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}
.cal-day-job-hrs {
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
  margin-top: 4px;
}
.cal-day-no-jobs {
  font-size: 12px;
  color: var(--gray-300);
  text-align: center;
  padding: 20px 0;
}

/* ── Hours / Minutes dual input ──────────────────────────── */
.hm-input-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}
.hm-input-group input[type='number'] {
  width: 58px;
  min-width: 0;
  text-align: center;
  -moz-appearance: textfield;
}
.hm-input-group input[type='number']::-webkit-inner-spin-button,
.hm-input-group input[type='number']::-webkit-outer-spin-button {
  opacity: 1;
}
.hm-sep {
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 600;
  user-select: none;
}

/* ── Permissions Settings ─────────────────────────────────── */
.perm-role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.perm-role-card {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.perm-role-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.perm-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
.perm-role-badge.admin {
  background: var(--blue-light);
  color: var(--ct-1d4ed8, #1d4ed8);
}
.perm-role-badge.dispatcher {
  background: var(--green-light);
  color: var(--ct-065f46, #065f46);
}
.perm-role-badge.technician {
  background: var(--amber-light);
  color: var(--ct-c2410c, #c2410c);
}
.perm-role-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}
.perm-role-desc {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}
.perm-role-summary {
  font-size: 12px;
  color: var(--gray-600);
  background: var(--gray-50);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.7;
  flex: 1;
}
.perm-role-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Permissions modal body */
.perm-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: 58vh;
}
.perm-section {
  margin-bottom: 22px;
}
.perm-section:last-child {
  margin-bottom: 0;
}
.perm-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-100);
}
.perm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-100);
  gap: 16px;
}
.perm-toggle-row:last-child {
  border-bottom: none;
}
.perm-toggle-label {
  font-size: 14px;
  color: var(--gray-700);
  flex: 1;
}
.perm-toggle-label small {
  display: block;
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 1px;
}

/* Scheduling Defaults controls */
.svcfg-sd-intro {
  font-size: 12px;
  color: var(--gray-500);
  margin: 0 0 6px;
}
.svcfg-sd-select {
  min-width: 180px;
  padding: 6px 9px;
  font-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-base);
  color: var(--text-primary);
}
.svcfg-sd-num {
  width: 56px;
}

/* iOS-style toggle */
.perm-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.perm-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.perm-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--gray-200);
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.18s;
}
.perm-toggle-slider::before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: var(--surface-base);
  border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.perm-toggle input:checked + .perm-toggle-slider {
  background: var(--blue);
}
.perm-toggle input:checked + .perm-toggle-slider::before {
  transform: translateX(18px);
}

/* Technician Schedule panel (Service Configuration) */
.svcfg-ts-panel {
  padding: 2px 0;
}
.svcfg-ts-time {
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--surface-base);
  color: var(--gray-800);
}
.svcfg-ts-time:disabled {
  background: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
}

/* Tab checkboxes grid */
.perm-tabs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.perm-tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--gray-50);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gray-700);
  user-select: none;
  border: 1px solid transparent;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.perm-tab-item:has(input:checked) {
  background: var(--blue-light);
  border-color: var(--cd-bfdbfe, #bfdbfe);
  color: var(--ct-1d4ed8, #1d4ed8);
}
.perm-tab-item input {
  margin: 0;
  accent-color: var(--blue);
}
.perm-tab-item.locked {
  opacity: 0.45;
  pointer-events: none;
}

/* Schedule view radios */
.perm-radio-group {
  display: flex;
  gap: 20px;
  margin-top: 6px;
}
.perm-radio-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
}
.perm-radio-opt input {
  accent-color: var(--blue);
  margin: 0;
}

/* Timeout input */
.perm-timeout-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.perm-timeout-row input[type='number'] {
  width: 72px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--gray-800);
}
.perm-timeout-row span {
  font-size: 13px;
  color: var(--gray-500);
}

/* ── Roles & Permissions redesign (department-driven collapsible cards) ── */
.rd-secnav-count {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--rd-label);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 9px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.rd-secnav-item.active .rd-secnav-count {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--rd-primary-ink);
}
.rd-perm-sq {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
/* Editable role name + description */
.perm-name-input {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-text);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 7px;
  margin: -3px 0;
  background: transparent;
  min-width: 0;
  flex: 1;
}
.perm-name-input:hover {
  border-color: var(--rd-border-faint);
}
.perm-name-input:focus {
  outline: none;
  border-color: var(--rd-primary);
  background: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 12%, transparent);
}
.perm-desc-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.5;
  color: var(--rd-muted);
  border: 1px solid var(--rd-border-faint);
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  resize: vertical;
}
.perm-desc-input:focus {
  outline: none;
  border-color: var(--rd-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 12%, transparent);
}
/* Chips: admin lock + system-role indicator */
.perm-lock-chip,
.perm-sys-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
}
.perm-lock-chip {
  color: var(--ct-92400e, #92400e);
  background: var(--cb-fef3c7, #fef3c7);
}
.perm-lock-chip svg {
  width: 11px;
  height: 11px;
}
.perm-sys-chip {
  color: var(--rd-label);
  background: rgba(0, 0, 0, 0.05);
}
.perm-lock-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ct-92400e, #92400e);
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-fde68a, #fde68a);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 14px;
}
.perm-lock-note svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
/* Department selector */
.perm-deptsel {
  margin-bottom: 16px;
}
.perm-deptsel-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 500;
  margin-bottom: 8px;
}
.perm-deptsel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.perm-deptchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--rd-text);
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 7px;
  padding: 7px 11px;
  cursor: pointer;
  user-select: none;
}
.perm-deptchip:has(input:checked) {
  border-color: var(--rd-primary);
  background: var(--rd-primary-tint);
  color: var(--rd-primary-ink);
}
.perm-deptchip input {
  accent-color: var(--blue);
  margin: 0;
}
.perm-deptchip-soon {
  cursor: default;
  color: var(--rd-label);
  background: #fafafa;
}
.perm-soon-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rd-label);
  background: rgba(0, 0, 0, 0.06);
  border-radius: 9px;
  padding: 2px 7px;
}
.perm-deptsel-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--rd-muted);
  line-height: 1.5;
}
/* Collapsible permission cards */
.perm-card {
  border: 1px solid var(--rd-border-faint);
  border-radius: 8px;
  margin-bottom: 10px;
  background: #fff;
  overflow: hidden;
}
.perm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-text);
  list-style: none;
  user-select: none;
}
.perm-card-head::-webkit-details-marker {
  display: none;
}
.perm-card-title {
  min-width: 0;
}
.perm-card-chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--rd-label);
  transition: transform 0.18s;
}
.perm-card[open] > .perm-card-head .perm-card-chev {
  transform: rotate(180deg);
}
.perm-card-body {
  padding: 2px 14px 10px;
  border-top: 1px solid var(--rd-border-faint);
}
.perm-card-body .perm-toggle-row:first-child {
  padding-top: 10px;
}
.perm-card-soon {
  opacity: 0.6;
  background: #fafafa;
}
.perm-card-soon .perm-card-head {
  cursor: default;
}
.perm-soon-text {
  margin: 8px 0;
  font-size: 12px;
  color: var(--rd-muted);
}
/* Config row (scope dropdown sits like a toggle row) */
.perm-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-100);
}
.perm-scope-select {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--rd-text);
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 6px 9px;
  background: var(--surface-base);
}
.perm-scope-select:disabled {
  background: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
}
/* Blue info block — technician scheduling explanation */
.perm-infoblock {
  margin: 10px 0 4px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ct-1d4ed8, #1d4ed8);
  background: var(--blue-light);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  border-radius: 7px;
}
/* Dark mode */
[data-theme='dark'] .perm-card,
[data-theme='dark'] .perm-deptchip {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border);
}
[data-theme='dark'] .perm-card-soon,
[data-theme='dark'] .perm-deptchip-soon {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .perm-desc-input,
[data-theme='dark'] .perm-name-input:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}
[data-theme='dark'] .perm-infoblock {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
  color: #93c5fd;
}
[data-theme='dark'] .perm-lock-note,
[data-theme='dark'] .perm-lock-chip {
  background: rgba(180, 83, 9, 0.18);
  border-color: rgba(180, 83, 9, 0.4);
  color: #fbbf24;
}
[data-theme='dark'] .rd-secnav-count,
[data-theme='dark'] .perm-soon-badge,
[data-theme='dark'] .perm-sys-chip {
  background: rgba(255, 255, 255, 0.08);
}

/* Custom field visibility */
.cf-vt-select {
  font-size: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 3px 6px;
  color: var(--gray-600);
  cursor: pointer;
  background: var(--surface-base);
}
.cf-vt-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.cf-vt-all {
  background: var(--cb-f0fdf4, #f0fdf4);
  color: var(--ct-166534, #166534);
}
.cf-vt-admin_dispatcher {
  background: var(--blue-light);
  color: var(--ct-1d4ed8, #1d4ed8);
}
.cf-vt-admin {
  background: var(--red-light);
  color: var(--ct-991b1b, #991b1b);
}

/* ── Branding Settings ────────────────────────────────────── */
.brand-section {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}
.brand-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Logo upload row */
.brand-logo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.brand-logo-preview {
  width: 180px;
  height: 56px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--sidebar-bg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14px;
  gap: 10px;
  flex-shrink: 0;
  overflow: hidden;
}
.brand-logo-preview img {
  max-height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}
.brand-logo-preview .blp-icon {
  color: white;
  opacity: 0.7;
}
.brand-logo-preview .blp-name {
  font-size: 11px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}
.brand-logo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brand-logo-upload-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 6px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  background: var(--surface-base);
  transition:
    background 0.15s,
    border-color 0.15s;
}
.brand-logo-upload-label:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}
.brand-hint {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 10px;
  line-height: 1.5;
}
/* App name input */
.brand-name-input {
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--gray-800);
}
.brand-name-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* Colors grid */
.brand-colors-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brand-color-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--gray-50);
  border-radius: 8px;
  border: 1px solid var(--gray-100);
}
.brand-color-label {
  flex: 1;
  font-size: 13px;
  color: var(--gray-700);
  font-weight: 500;
}
.brand-color-label small {
  display: block;
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 400;
  margin-top: 1px;
}
.brand-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
}
.brand-color-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}
.brand-color-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}
.brand-color-hex {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--gray-500);
  width: 72px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 4px 7px;
  cursor: text;
}
.brand-color-hex:focus {
  outline: none;
  border-color: var(--blue);
}
.brand-color-reset {
  font-size: 14px;
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  color: var(--gray-400);
  cursor: pointer;
  padding: 4px 8px;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.brand-color-reset:hover {
  color: var(--gray-700);
  border-color: var(--gray-400);
}
.brand-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

/* ── Login Background section ── */
.brand-login-photo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.brand-login-photo-thumb {
  width: 80px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.brand-login-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-login-photo-empty {
  font-size: 10px;
  color: var(--gray-400);
  text-align: center;
  line-height: 1.3;
}
.brand-login-photo-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brand-login-opacity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.brand-login-opacity-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
  min-width: 80px;
}
.brand-login-opacity-slider {
  flex: 1;
  max-width: 200px;
  accent-color: var(--blue);
}
.brand-login-opacity-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  min-width: 36px;
  text-align: right;
}

/* Auth brand logo */
.auth-brand-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* ── How It Works ─────────────────────────────────────────── */
.hiw-content {
  max-width: 720px;
}
.hiw-section {
  margin-bottom: 32px;
}
.hiw-section h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200);
}
.hiw-section p {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 8px;
}
.hiw-section ul {
  margin: 0 0 8px;
  padding-left: 20px;
}
.hiw-section li {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hiw-section code {
  font-family: monospace;
  font-size: 12px;
  background: var(--gray-100);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--gray-700);
}
.hiw-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
}

/* ── Dispatch Board Display — per-mode tabs ──────────────── */
.dd-mode-tabs {
  display: flex;
  gap: 2px;
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 3px;
  width: fit-content;
}
.dd-mode-tab {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  color: var(--gray-500);
  transition:
    background 0.12s,
    color 0.12s;
}
.dd-mode-tab:hover {
  color: var(--gray-800);
}
.dd-mode-tab.active {
  background: var(--surface-base);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.dd-mode-note {
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
  margin: 0 0 4px;
}

/* ── Dispatch Board Display toggles ──────────────────────── */
.dd-toggles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.dd-toggle-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--gray-700);
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
  user-select: none;
}
.dd-toggle-item:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}
.dd-toggle-item input[type='checkbox'] {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Job block display items ─────────────────────────────── */
.jb-stop-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.jb-meta {
  font-size: 10px;
  opacity: 0.85;
}
/* Single-line + ellipsis comes from the .job-block-inner > * contract; do not
   re-introduce wrapping here — it spills past the fixed block height and clips. */
.jb-address {
  font-size: 10px;
  opacity: 0.8;
}
.jb-remain {
  color: var(--ct-bbf7d0, #bbf7d0);
}

/* ── Full-screen modal variant ───────────────────────────── */
.modal-fullscreen {
  width: calc(100vw - 48px);
  max-width: 1200px;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}
.modal-fullscreen .modal-header {
  flex-shrink: 0;
}

/* ── Dispatch split-screen layout (Map + Gantt) ─────────── */
.dispatch-split {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  position: relative;
}

/* ── Dispatch board + unassigned tray layout ── */
.dispatch-with-tray {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  min-width: 0;
}
.dispatch-with-tray > .dispatch-split {
  flex: 1 1 auto;
  min-width: 0;
}

.unassigned-tray {
  order: -1; /* sit to the LEFT of the board, between nav and Gantt */
  flex: 0 0 290px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface-base);
  overflow: hidden;
}
.unassigned-tray.collapsed {
  flex-basis: 44px;
}
/* Drop-target highlight when a stop is dragged off the Gantt toward the tray */
.unassigned-tray.uat-drop-active {
  box-shadow: inset 0 0 0 2px var(--primary, #2563eb);
}

/* Collapsed rail */
.uat-rail {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border: none;
  cursor: pointer;
  background: var(--surface-raised);
  color: var(--text-secondary);
}
.uat-rail:hover {
  color: var(--text-primary);
}
.uat-rail-count {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 11px;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.uat-rail-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Expanded panel */
.uat-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.uat-header {
  flex-shrink: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
.uat-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uat-selall-wrap {
  display: flex;
  align-items: center;
  margin: 0;
}
.uat-title {
  flex: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.uat-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-left: 2px;
  border-radius: 10px;
  background: var(--gray-200);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.uat-collapse {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  padding: 0 2px;
}
.uat-collapse:hover {
  color: var(--text-primary);
}
.uat-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.uat-tech-select {
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-base);
  color: var(--text-primary);
}
.uat-action-btns {
  display: flex;
  gap: 6px;
}
.uat-action-btns .btn-sm {
  flex: 1;
}

/* Stop list */
.uat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}
.uat-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}
.uat-stop {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-base);
  cursor: grab;
}
.uat-stop:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}
.uat-stop.uat-dragging {
  opacity: 0.45;
}
.uat-stop-check {
  margin: 1px 0 0;
}
.uat-stop-body {
  flex: 1;
  min-width: 0;
}
.uat-stop-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.uat-stop-name a {
  color: inherit;
}
.uat-stop-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uat-stop-grip {
  color: var(--gray-400);
  font-size: 11px;
  cursor: grab;
  user-select: none;
}

.dispatch-map-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 0 40%;
  position: relative;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
}
.dispatch-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  min-height: 32px;
  box-sizing: border-box;
}
.dispatch-map-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dispatch-map-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dispatch-map-view-btn {
  background: none;
  border: none;
  padding: 3px 4px;
  cursor: pointer;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition:
    color 0.15s,
    background 0.15s;
}
.dispatch-map-view-btn:hover {
  color: var(--gray-900);
  background: var(--gray-100);
}
.dispatch-map-tech-select {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--surface-base);
  color: var(--gray-800);
  cursor: pointer;
  outline: none;
}
.dispatch-map-tech-select:focus {
  border-color: var(--blue);
}

/* Simple Route toggle */
.dispatch-map-toggle-label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-600);
  white-space: nowrap;
}
.dispatch-map-toggle-label input[type='checkbox'] {
  display: none;
}
.dispatch-map-toggle-track {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  background: var(--gray-300);
  border-radius: 8px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.dispatch-map-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--surface-base);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dispatch-map-toggle-label input:checked ~ .dispatch-map-toggle-track {
  background: var(--cb-2563eb, #2563eb);
}
.dispatch-map-toggle-label input:checked ~ .dispatch-map-toggle-track .dispatch-map-toggle-thumb {
  transform: translateX(12px);
}
.dispatch-map-toggle-text {
  font-size: 11px;
  color: var(--gray-600);
}

.dispatch-map-canvas {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--gray-100);
}
.dispatch-map-canvas .gmap-real {
  width: 100%;
  height: 100%;
}

/* No-API placeholder inside the map canvas */
.dispatch-map-no-api {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 20px;
  text-align: center;
}
.dispatch-map-no-api-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cb-dc2626, #dc2626);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}
.dispatch-map-no-api-msg {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}
.dispatch-map-no-api-link {
  font-size: 12px;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}
.dispatch-map-no-api-link:hover {
  color: var(--ct-1d4ed8, #1d4ed8);
}

/* Drag handle between map and Gantt */
.dispatch-split-handle {
  height: 10px;
  flex-shrink: 0;
  background: var(--gray-100);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
}
.dispatch-split-handle:hover {
  background: var(--gray-200);
}
.dispatch-split-handle.dragging {
  background: var(--gray-300);
}
.dispatch-split-grip {
  width: 40px;
  height: 3px;
  background: var(--gray-400);
  border-radius: 2px;
  pointer-events: none;
}
.dispatch-map-collapse {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--gray-300);
  background: var(--surface-base);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
}
.dispatch-map-collapse:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

/* Collapsed expand bar */
.dispatch-collapsed-bar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 30px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  flex-shrink: 0;
}
.dispatch-collapsed-bar:hover {
  background: var(--gray-100);
  color: var(--blue);
}

/* Collapsed state */
.dispatch-split.collapsed .dispatch-map-pane,
.dispatch-split.collapsed .dispatch-split-handle {
  display: none;
}
.dispatch-split.collapsed .dispatch-collapsed-bar {
  display: flex;
}

/* Board pane */
.dispatch-board-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 60%;
  min-height: 0;
  overflow: hidden;
}

/* ── Board View: map on the RIGHT (side mode) ── */
/* Lay the split out as a row and re-order so the board sits left, the map right. */
.dispatch-split.dispatch-split--side {
  flex-direction: row;
}
.dispatch-split--side .dispatch-board-pane {
  order: 1;
  min-width: 0;
}
.dispatch-split--side .dispatch-split-handle {
  order: 2;
}
.dispatch-split--side .dispatch-map-pane {
  order: 3;
  min-width: 0;
}
/* Map pane is width-driven in side mode (flex-basis set inline by _applyDispatchSplitFlex);
   swap the bottom divider for a left one. */
.dispatch-split--side .dispatch-map-pane {
  border-bottom: none;
  border-left: 1px solid var(--gray-200);
}
/* Handle becomes a vertical resize bar between the two panes. */
.dispatch-split--side .dispatch-split-handle {
  height: auto;
  width: 10px;
  border-top: none;
  border-bottom: none;
  border-left: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  cursor: ew-resize;
}
.dispatch-split--side .dispatch-split-grip {
  width: 3px;
  height: 40px;
}
/* Collapse button centered on the thin vertical handle, near the top. */
.dispatch-split--side .dispatch-map-collapse {
  top: 8px;
  right: 50%;
  transform: translateX(50%);
}

/* Map highlight pulse on job block (when marker clicked) */
@keyframes job-block-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
  }
  60% {
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}
.job-block.pulsing {
  animation: job-block-pulse 1s ease-out 2;
  outline: 2px solid var(--cd-2563eb, #2563eb);
  outline-offset: -2px;
  z-index: 15 !important;
}

/* Drag-to-reorder visuals */
.job-block[draggable='true'] {
  cursor: grab;
}
.job-block[draggable='true']:active {
  cursor: grabbing;
}
.job-block.reorder-dragging {
  opacity: 0.4;
}
.job-block.reorder-target {
  outline: 3px dashed var(--cd-2563eb, #2563eb);
  outline-offset: -3px;
  z-index: 14;
}
/* Same-tech reorder insertion indicator — vertical line in the gap where the dragged
   stop will land. Matches the blue drag-feedback colour used across the app. Display
   only; pointer-events:none so it never intercepts the drop hit-test on the block. */
.reorder-insert-line {
  position: absolute;
  width: 3px;
  margin-left: -1.5px;
  background: var(--cd-2563eb, #2563eb);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.25),
    0 0 6px rgba(37, 99, 235, 0.55);
  pointer-events: none;
  z-index: 16;
}
/* Small pip at the top of the line so the insertion point reads clearly. */
.reorder-insert-line::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--cd-2563eb, #2563eb);
}

/* ── Cross-tech drag drop zones ─────────────────────────── */
.gantt-row.cross-tech-drop-zone {
  position: relative;
  outline: 2px dashed var(--cd-2563eb, #2563eb);
  outline-offset: -2px;
  border-radius: 4px;
}
.gantt-row.cross-tech-drop-zone .jobs-area {
  background: rgba(37, 99, 235, 0.06);
  transition: background 0.1s;
}
.gantt-row.cross-tech-drop-invalid {
  position: relative;
  outline: 2px dashed var(--cd-dc2626, #dc2626);
  outline-offset: -2px;
  border-radius: 4px;
}
.gantt-row.cross-tech-drop-invalid .jobs-area {
  background: rgba(220, 38, 38, 0.06);
}

/* ── Cross-tech move modal ──────────────────────────────── */
.ctm-grid {
  display: flex;
  gap: 0;
  align-items: flex-start;
  min-width: 0;
}
.ctm-tech-col {
  flex: 1;
  min-width: 0;
}
.ctm-divider {
  width: 1px;
  background: var(--gray-200);
  align-self: stretch;
  margin: 0 16px;
  flex-shrink: 0;
}
.ctm-tech-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 10px;
}
.ctm-compare-wrap {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.ctm-compare-side {
  flex: 1;
  min-width: 0;
}
.ctm-compare-arrow {
  font-size: 16px;
  color: var(--gray-400);
  padding-top: 24px;
  flex-shrink: 0;
}
.ctm-after-label {
  color: var(--ct-0369a1, #0369a1);
}
.ctm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 6px;
}
.ctm-table thead th {
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  white-space: nowrap;
}
.ctm-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
  vertical-align: middle;
}
.ctm-table tbody tr:last-child td {
  border-bottom: none;
}
.ctm-table tbody tr:hover td {
  background: var(--gray-50);
}
@media (max-width: 700px) {
  .ctm-grid {
    flex-direction: column;
  }
  .ctm-divider {
    width: 100%;
    height: 1px;
    margin: 12px 0;
  }
  .ctm-compare-wrap {
    flex-direction: column;
  }
  .ctm-compare-arrow {
    display: none;
  }
}

/* ── Calendar header Add Job button ─────────────────────── */
.cal-hdr-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Employee Block bars (shared base) ───────────────────── */
.emp-block-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1e293b;
  color: #f1f5f9;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  user-select: none;
}
.emp-block-bar-reason {
  font-weight: 700;
  white-space: nowrap;
}
.emp-block-bar-dates {
  font-size: 12px;
  color: var(--gray-400);
  white-space: nowrap;
}
.emp-block-bar-name {
  font-size: 13px;
  color: #f1f5f9;
}

/* Unrouted dispatch view block bar */
.unrouted-block-bar {
  width: 100%;
  margin-bottom: 12px;
  gap: 12px;
}

/* Gantt view block bar — fills the timeline column */
.emp-block-gantt-row .timeline-col {
  padding: 6px 0;
}
.gantt-block-bar {
  width: 100%;
  height: 52px;
  justify-content: center;
  border-radius: 6px;
}

/* Partial (time-window) block — positioned overlay inside .jobs-area covering only the
   blocked time range. Sits above grid/jobs (z-index 3) so the dark bar wins visually. */
.gantt-block-bar-window {
  position: absolute;
  top: 7px;
  bottom: 7px;
  z-index: 3;
  border-radius: 5px;
  padding: 4px 8px;
  gap: 6px;
  font-size: 11px;
  overflow: hidden;
  min-width: 3px;
  background: repeating-linear-gradient(45deg, #1e293b 0 8px, #334155 8px 16px);
  pointer-events: auto;
  container-type: inline-size;
}
.gantt-block-bar-window .emp-block-bar-reason {
  font-size: 11px;
}
.gantt-block-bar-window .emp-block-bar-dates {
  font-size: 10px;
  color: #cbd5e1;
}
.gantt.layout-compact .gantt-block-bar-window {
  top: 5px;
  bottom: 5px;
  font-size: 10px;
}
.gantt.layout-expanded .gantt-block-bar-window {
  top: 6px;
  bottom: 6px;
}
/* Hide text when the partial block is too narrow */
@container (max-width: 60px) {
  .gantt-block-bar-window .emp-block-bar-dates {
    display: none;
  }
}
@container (max-width: 30px) {
  .gantt-block-bar-window > * {
    visibility: hidden;
  }
}

/* Calendar day-view block bar */
.cal-day-block-bar {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: 6px;
  padding: 12px 14px;
}
/* Compact partial-day block inside the calendar day cell */
.cal-day-block-bar-window {
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: repeating-linear-gradient(45deg, #1e293b 0 8px, #334155 8px 16px);
  font-size: 12px;
}
.cal-day-block-bar-window .emp-block-bar-reason {
  font-size: 12px;
}
.cal-day-block-bar-window .emp-block-bar-dates {
  font-size: 11px;
  color: #cbd5e1;
}

/* Calendar month-view block chip */
.cal-block-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  background: #1e293b;
  color: #f1f5f9;
  border-radius: 4px;
  padding: 1px 6px 1px 4px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-block-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Calendar week-view block entry */
.cal-week-block {
  padding: 5px 8px;
  margin-bottom: 3px;
  border-radius: var(--radius);
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
}
.cal-week-block .cal-wk-job-name {
  font-weight: 700;
  color: #f1f5f9;
}
.cal-week-block .cal-wk-job-meta {
  font-size: 11px;
}

/* ── Employee block list (settings panel) ────────────────── */
.emp-blocks-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.emp-block-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 4px 8px;
}
.emp-block-dates {
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}
.emp-block-time {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  white-space: nowrap;
  flex-shrink: 0;
}
.emp-block-time.emp-block-time-full {
  background: var(--gray-200);
  color: var(--gray-600);
}
.emp-block-reason {
  flex: 1;
  color: var(--gray-500);
  font-style: italic;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emp-block-del {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.emp-block-del:hover {
  color: var(--ct-dc2626, #dc2626);
}

/* Block Type radio toggle inside the Add Block modal */
.block-type-toggle {
  display: flex;
  gap: 8px;
}
.block-type-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  background: var(--surface-base);
  transition: all 0.12s;
  flex: 1;
  justify-content: center;
}
.block-type-opt:hover {
  background: var(--gray-50);
}
.block-type-opt input[type='radio'] {
  margin: 0;
  cursor: pointer;
}
.block-type-opt:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────
   Service Configuration settings tab
   ───────────────────────────────────────────────────────── */
.svcfg-card {
  margin-bottom: 16px;
}
.svcfg-card > h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
}
.svcfg-card > p {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--gray-500);
}

.svcfg-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--gray-50);
  min-height: 48px;
}

.svcfg-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--gray-500);
  text-align: center;
}

.svcfg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.svcfg-row:hover {
  border-color: var(--gray-300);
}

/* Archived configurable-list item — muted, still listed, with an "Archived" badge.
   Archived items are hidden from active pickers but remain valid on existing tickets. */
.svcfg-row-archived {
  background: var(--gray-50);
  border-style: dashed;
  opacity: 0.82;
}
.svcfg-row-archived .svcfg-row-input {
  color: var(--gray-500);
  font-style: italic;
}
.svcfg-archived-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
  background: var(--gray-200);
  padding: 2px 7px;
  border-radius: 999px;
}
.svcfg-btn-archive:hover {
  color: var(--ct-d97706, #d97706);
  border-color: var(--cd-fde68a, #fde68a);
  background: var(--cb-fffbeb, #fffbeb);
}
/* Field confirmation indicator */
.field-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  margin-left: 5px;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  color: var(--gray-300);
  transition:
    color 0.12s,
    transform 0.1s;
  line-height: 0;
}
.field-confirm-btn:hover:not(.confirmed) {
  color: var(--gray-400);
  transform: scale(1.15);
}
.field-confirm-btn.confirmed {
  color: var(--ct-16a34a, #16a34a);
}
.field-confirm-btn.confirmed:hover {
  transform: scale(1.1);
}
.field-confirm-btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
  display: block;
}
.field-confirm-btn .fcb-filled {
  display: none;
}
.field-confirm-btn.confirmed .fcb-empty {
  display: none;
}
.field-confirm-btn.confirmed .fcb-filled {
  display: block;
}

.svcfg-row-draggable {
  cursor: default;
}
.svcfg-row-dragging {
  opacity: 0.4;
}
.svcfg-row-over {
  border-top: 2px solid var(--blue);
}
.svcfg-row-drag-handle {
  display: flex;
  align-items: center;
  padding: 0 4px 0 2px;
  color: var(--gray-300);
  cursor: grab;
  flex-shrink: 0;
}
.svcfg-row-drag-handle:hover {
  color: var(--gray-500);
}
.svcfg-row-drag-handle:active {
  cursor: grabbing;
}

.svcfg-row-input {
  flex: 1;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  font-size: 13px;
  color: var(--gray-900);
  border-radius: 4px;
  font-family: inherit;
}
.svcfg-row-input:hover {
  background: var(--gray-50);
}
.svcfg-row-input:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--surface-base);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.svcfg-row-name {
  flex: 1;
  font-size: 13px;
  color: var(--gray-900);
  padding: 4px 0;
}

.svcfg-row-cost {
  font-size: 13px;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
  padding-right: 4px;
}

.svcfg-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.svcfg-btn-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-200);
  background: var(--surface-base);
  border-radius: 4px;
  cursor: pointer;
  color: var(--gray-500);
  transition: all 0.12s;
  padding: 0;
}
.svcfg-btn-icon svg {
  width: 13px;
  height: 13px;
}
.svcfg-btn-icon:hover {
  color: var(--gray-900);
  border-color: var(--gray-300);
  background: var(--gray-50);
}
.svcfg-btn-del:hover {
  color: var(--ct-dc2626, #dc2626);
  border-color: var(--cd-fecaca, #fecaca);
  background: var(--red-light);
}

.svcfg-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--gray-200);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}

.svcfg-card-action {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
.svcfg-card-action .btn-primary,
.svcfg-card-action .btn-secondary {
  font-size: 13px;
}

/* Scope of Work — 3 fixed groups */
.svcfg-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.svcfg-scope-group {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px;
}
.svcfg-scope-group-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-100);
}
.svcfg-scope-group .svcfg-list {
  border: none;
  padding: 0;
  background: transparent;
  min-height: 0;
}

/* Color picker modal swatches */
.svcfg-swatch-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
}
.svcfg-swatch-opt {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 1px var(--gray-200) inset;
  transition: transform 0.1s;
}
.svcfg-swatch-opt:hover {
  transform: scale(1.08);
}
.svcfg-swatch-opt.selected {
  border-color: var(--blue);
  box-shadow:
    0 0 0 1px var(--blue) inset,
    0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Material cost input */
.svcfg-cost-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  overflow: hidden;
}
.svcfg-cost-input:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.svcfg-cost-prefix {
  padding: 0 10px;
  font-size: 13px;
  color: var(--gray-500);
  background: var(--gray-50);
  border-right: 1px solid var(--gray-200);
  height: 100%;
  display: inline-flex;
  align-items: center;
}
.svcfg-cost-input input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 10px;
  font-size: 13px;
  background: transparent;
  font-variant-numeric: tabular-nums;
}

/* ═════════════════════════════════════════════════════════
   Ticket side panel — redesigned tabs
   ═════════════════════════════════════════════════════════ */

/* Tab bar — allow many tabs to wrap on narrow panels */
.tsp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.tsp-tab {
  font-size: 12px;
  padding: 6px 10px;
}

/* ── Floating mode: all tabs on one row ─────────────────── */
/* Prevent wrapping, shrink padding/font so six tabs fit the panel width */
.tsp-mode-floating .tsp-tabs {
  flex-wrap: nowrap;
  gap: 0;
  border-bottom: 1px solid var(--gray-200); /* match panel outer border weight */
}
.tsp-mode-floating .tsp-tab {
  font-size: 10.5px;
  padding: 5px 4px;
  flex: 1;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tighten header separator in floating mode to reduce visual gap at header/body junction */
.tsp-mode-floating .tsp-header-separator {
  margin-top: 4px; /* was 8px — halved so the tab row sits closer to the header content */
}

/* Empty-state hint */
.tsp-empty-note {
  font-size: 12px;
  color: var(--gray-500);
  margin: 6px 0 0;
  font-style: italic;
}

/* Overview tab — readonly status display */
.tsp-status-readonly {
  display: inline-flex;
}
.tsp-status-badge-inline {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 600;
}

/* ASAP yes/no toggle (also reused for deduction/warning) */
.tsp-asap-toggle {
  display: flex;
  gap: 8px;
}
.tsp-asap-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.12s;
}
.tsp-asap-opt input {
  display: none;
}
.tsp-asap-opt:hover {
  background: var(--gray-50);
}
.tsp-asap-opt:has(input:checked) {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}
.tsp-asap-opt:has(input[value='yes']:checked) {
  border-color: var(--cd-dc2626, #dc2626);
  color: var(--ct-dc2626, #dc2626);
  background: var(--red-light);
}

/* Three-way toggle for Major Callback */
.tsp-tri-toggle {
  display: flex;
  gap: 6px;
}
.tsp-tri-opt {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.12s;
}
.tsp-tri-opt input {
  display: none;
}
.tsp-tri-opt:hover {
  background: var(--gray-50);
}
.tsp-tri-opt:has(input[value='NA']:checked) {
  border-color: var(--gray-400);
  color: var(--gray-700);
  background: var(--gray-50);
}
.tsp-tri-opt:has(input[value='NO']:checked) {
  border-color: var(--cd-16a34a, #16a34a);
  color: var(--ct-16a34a, #16a34a);
  background: var(--cb-f0fdf4, #f0fdf4);
}
.tsp-tri-opt:has(input[value='YES']:checked) {
  border-color: var(--cd-dc2626, #dc2626);
  color: var(--ct-dc2626, #dc2626);
  background: var(--red-light);
}

/* Photos / paperwork placeholders */
.tsp-photos-placeholder,
.tsp-paperwork-placeholder {
  padding: 24px 16px;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius);
  text-align: center;
  background: var(--gray-50);
  color: var(--gray-500);
}
.tsp-photos-placeholder svg {
  width: 36px;
  height: 36px;
  color: var(--gray-300);
  margin-bottom: 8px;
}
.tsp-photos-placeholder p,
.tsp-paperwork-placeholder p {
  margin: 0;
  font-size: 13px;
}

/* Multi-pill selectors (surface type, installers, scope of work) */
.tsp-multi-pills,
.tsp-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tsp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--surface-base);
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.1s;
}
.tsp-pill:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}
.tsp-pill.active {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}
.tsp-pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

/* Scope group label */
.tsp-scope-group {
  margin-bottom: 12px;
}
.tsp-scope-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  margin-bottom: 6px;
}

/* Problem-Cause pair rows */
.tsp-pc-pairs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.tsp-pc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 13px;
}
.tsp-pc-problem {
  font-weight: 600;
  color: var(--gray-900);
}
.tsp-pc-arrow {
  color: var(--gray-400);
  font-weight: bold;
}
.tsp-pc-cause {
  flex: 1;
  color: var(--gray-700);
}
.tsp-pc-remove {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}
.tsp-pc-remove:hover {
  color: var(--ct-dc2626, #dc2626);
  background: var(--red-light);
}

/* Problem-Cause picker modal lists */
.tsp-pair-step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.tsp-pair-picklist {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 6px;
  background: var(--gray-50);
}
.tsp-pick-item {
  text-align: left;
  padding: 8px 10px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  color: var(--gray-900);
  transition: all 0.1s;
}
.tsp-pick-item:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}

/* Financial — remaining balance */
.tsp-remaining {
  padding: 10px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}
.tsp-remaining.tsp-remaining-due {
  color: var(--ct-dc2626, #dc2626);
  background: var(--red-light);
  border-color: var(--cd-fecaca, #fecaca);
}
.tsp-remaining.tsp-remaining-paid {
  color: var(--ct-059669, #059669);
  background: var(--green-light);
  border-color: var(--cd-a7f3d0, #a7f3d0);
}

/* Auto-filled indicator — flashes next to a field for 2s then fades */
.tsp-auto-flash {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ct-059669, #059669);
  background: var(--green-light);
  border: 1px solid var(--cd-a7f3d0, #a7f3d0);
  border-radius: 999px;
  padding: 1px 8px;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.tsp-auto-flash.tsp-auto-flash-active {
  opacity: 1;
}

/* Materials list rows */
.tsp-materials-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.tsp-mat-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 13px;
}
.tsp-mat-name {
  color: var(--gray-900);
  font-weight: 500;
}
.tsp-mat-qty {
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.tsp-mat-unit {
  color: var(--gray-500);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tsp-mat-line {
  color: var(--gray-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tsp-materials-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  margin-top: 10px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.tsp-mat-readonly {
  padding: 8px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}
.tsp-mat-line-total {
  font-weight: 700;
  color: var(--gray-900);
  font-size: 14px;
}

/* Activity summary grid */
.tsp-activity-summary {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px;
}
.tsp-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tsp-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tsp-summary-cell-wide {
  grid-column: 1 / -1;
}
.tsp-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  font-weight: 600;
}
.tsp-summary-val {
  font-size: 13px;
  color: var(--gray-900);
  font-weight: 500;
}

/* Field-row two-column layout */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field-row .field {
  margin-bottom: 0;
}

/* ═════════════════════════════════════════════════════════
   Forms — enhanced field types + draft + uploads
   ═════════════════════════════════════════════════════════ */

/* Field-builder: row layout fixes + edit button + collapsible config */
.fb-field-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* Edit / Done toggle button */
.fb-field-edit {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--gray-300);
  background: var(--surface-base);
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 0.1s,
    color 0.1s,
    border-color 0.1s;
}
.fb-field-edit:hover {
  background: var(--gray-100);
}
.fb-field-edit.fb-field-edit-on {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}

/* Collapsible config section below the main row */
.fb-field-config {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--gray-100);
  width: 100%;
}

.fb-field-extra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 6px;
}
.fb-field-extra-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fb-field-syslist {
  flex: 1;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--surface-base);
}
.fb-field-helper {
  width: 100%;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px dashed var(--gray-200);
  border-radius: 4px;
  background: transparent;
  color: var(--gray-700);
  font-style: italic;
  box-sizing: border-box;
}
.fb-field-helper:focus {
  outline: none;
  border-style: solid;
  border-color: var(--blue);
  background: var(--surface-base);
}

/* Public form: helper text under labels */
.pf-helper {
  margin: 4px 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-500);
}
.pf-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin: 4px 0 0;
}
.pf-hint-warn {
  color: var(--ct-b45309, #b45309);
  font-style: italic;
}

/* Public form: action row (Submit + Save as Draft) */
.pf-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pf-actions .pf-submit-btn {
  margin-top: 0;
}
.pf-draft-btn {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  background: var(--surface-base);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}
.pf-draft-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}
.pf-draft-indicator {
  font-size: 13px;
  color: var(--ct-059669, #059669);
  font-weight: 600;
}

/* Public form: upload zones */
.pf-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-upload-drop {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 28px 16px;
  text-align: center;
  background: var(--gray-50);
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.12s;
}
.pf-upload-drop:hover {
  border-color: var(--blue);
  background: var(--blue-light);
}
.pf-upload-drop-over {
  border-color: var(--blue);
  background: var(--cb-dbeafe, #dbeafe);
}
.pf-upload-drop svg {
  width: 36px;
  height: 36px;
  color: var(--gray-400);
  margin: 0 auto 8px;
  display: block;
}
.pf-upload-text {
  margin: 0;
  font-size: 14px;
  color: var(--gray-700);
}
.pf-upload-btn {
  display: inline;
  background: none;
  border: none;
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}
.pf-upload-types {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--gray-500);
}
.pf-upload-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-upload-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 13px;
}
.pf-upload-file svg {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
  flex-shrink: 0;
}
.pf-upload-file-name {
  flex: 1;
  color: var(--gray-900);
}
.pf-upload-file-size {
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.pf-upload-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gray-200);
  border: none;
  cursor: pointer;
  color: var(--gray-600);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition:
    background 0.12s,
    color 0.12s;
}
.pf-upload-remove:hover {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--red);
}

.pf-upload-note {
  margin: 0;
  padding: 8px 10px;
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-fde68a, #fde68a);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ct-92400e, #92400e);
  font-style: italic;
}

/* ═════════════════════════════════════════════════════════
   Metrics redesign
   ═════════════════════════════════════════════════════════ */

/* View toggle (Charts / Installer Scorecard) */
.met-view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 3px;
  margin: 0 12px;
}
.met-view-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
}
.met-view-btn:hover {
  color: var(--gray-900);
}
.met-view-btn.active {
  background: var(--surface-base);
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Filter bar */
.met-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 14px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.met-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.met-filter-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.met-filter-group select,
.met-filter-group input[type='date'] {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--surface-base);
  min-width: 140px;
}
.met-flt-sep {
  color: var(--gray-400);
  padding: 0 4px;
}

/* Multi-select trigger + popup */
.met-multi-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--surface-base);
  cursor: pointer;
  min-width: 180px;
}
.met-multi-trigger svg {
  width: 12px;
  height: 12px;
  color: var(--gray-500);
}
.met-multi-pop {
  position: absolute;
  z-index: 50;
  margin-top: 4px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
}
.met-multi-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
}
.met-multi-opt:hover {
  background: var(--gray-50);
}

/* Sections */
.met-section {
  margin-bottom: 22px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  overflow: hidden;
}
.met-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  user-select: none;
}
.met-section-chev {
  width: 14px;
  height: 14px;
  color: var(--gray-500);
  transition: transform 0.15s;
}
.met-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
}
.met-section-count {
  font-size: 12px;
  color: var(--gray-500);
}
.met-section-collapsed .met-section-chev {
  transform: rotate(-90deg);
}
.met-section-collapsed .met-section-body {
  display: none;
}
.met-section-body {
  padding: 14px 16px;
}
.met-section-empty {
  padding: 30px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-500);
  background: var(--gray-50);
  border-radius: var(--radius);
}

.met-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 14px;
}

/* Chart card */
.met-chart-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.met-chart-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.met-chart-card-title {
  margin: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
}
.met-chart-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gray-200);
  background: var(--surface-base);
  border-radius: 4px;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.12s;
  padding: 0;
}
.met-chart-edit-btn:hover {
  color: var(--blue);
  border-color: var(--blue);
}
.met-chart-card-body {
  padding: 8px 12px 12px;
}
.met-chart-svg {
  width: 100%;
  height: auto;
  max-height: 320px;
  display: block;
}
.met-chart-empty {
  padding: 36px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-500);
}

/* Focus issue */
.met-chart-card-focus {
  border-color: var(--cd-facc15, #facc15);
  box-shadow: 0 0 0 2px #fef3c7 inset;
}
.met-focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-facc15, #facc15);
  color: var(--ct-92400e, #92400e);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.met-focus-btn:hover {
  background: var(--cb-fde68a, #fde68a);
}
.met-focus-btn svg {
  width: 12px;
  height: 12px;
}

/* Legend */
.met-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 8px;
  padding: 4px 0 0;
  border-top: 1px solid var(--gray-100);
  font-size: 11px;
  color: var(--gray-700);
}
.met-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.met-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* Clickable chart elements */
.met-clickable {
  cursor: pointer;
  transition: opacity 0.1s;
}
.met-clickable:hover {
  opacity: 0.78;
}

/* Metrics body layout — charts area + drill panel side by side */
.met-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.met-main {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.met-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Category tab bar — sits below filter bar, always visible */
.met-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray-200);
  padding: 0 16px;
  background: var(--surface-base);
  flex-shrink: 0;
}
.met-tab {
  border: none;
  background: transparent;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition:
    color 0.12s,
    border-color 0.12s;
}
.met-tab:hover {
  color: var(--gray-800);
}
.met-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* Scrollable chart grid area */
.met-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}
.met-tab-content .met-section-grid {
  margin-top: 0;
}

/* Scorecard scrolls too */
.met-scorecard-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
  min-height: 0;
}

/* Drill-down panel — inline flex sibling (not fixed), pushes charts left */
.met-drill-panel {
  width: 320px;
  flex-shrink: 0;
  background: var(--surface-base);
  border-left: 1px solid var(--gray-200);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.met-drill-panel[hidden] {
  display: none !important;
}
.met-drill-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-200);
}
.met-drill-header h3 {
  margin: 0;
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}
.met-drill-close {
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--gray-500);
  cursor: pointer;
  padding: 0 6px;
}
.met-drill-close:hover {
  color: var(--gray-900);
}
.met-drill-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.met-drill-count {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.met-drill-row {
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.12s;
}
.met-drill-row:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}
.met-drill-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
}
.met-drill-row-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 3px;
  font-size: 11px;
  color: var(--gray-500);
}
.met-drill-row-status {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

/* Installer Scorecard table */
.met-scorecard-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  margin-bottom: 14px;
}
.met-scorecard-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.met-scorecard-table th,
.met-scorecard-table td {
  padding: 10px 12px;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}
.met-scorecard-table th {
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
}
.met-scorecard-table th:hover {
  background: var(--gray-100);
}
.met-scorecard-table th.met-sc-sort-asc::after {
  content: ' ▲';
  color: var(--blue);
}
.met-scorecard-table th.met-sc-sort-desc::after {
  content: ' ▼';
  color: var(--blue);
}
.met-sc-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}
.met-empty-note {
  font-size: 13px;
  color: var(--gray-500);
  font-style: italic;
}
.met-section-empty {
  font-style: italic;
}

/* Ensure metrics topbar lays out the toggle nicely */
#view-metrics .view-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
#view-metrics .view-topbar h1 {
  margin-right: auto;
}

/* ═════════════════════════════════════════════════════════
   Reports tab
   ═════════════════════════════════════════════════════════ */
.reports-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  height: calc(100vh - 60px);
  background: var(--surface-base);
  border-radius: 8px;
  overflow: hidden;
}
.reports-sidebar {
  background: var(--gray-50);
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
}
.reports-sidebar-header {
  padding: 16px 18px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rep-list {
  display: flex;
  flex-direction: column;
  padding: 4px 8px 12px;
  flex: 1;
  overflow-y: auto;
}
.rep-list-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  text-align: left;
  cursor: pointer;
  transition: all 0.12s;
}
.rep-list-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--gray-400);
}
.rep-list-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.rep-list-btn.active {
  background: var(--surface-base);
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.rep-list-btn.active svg {
  color: var(--blue);
}

.reports-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-base);
}
.reports-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--gray-200);
}
.reports-title {
  margin: 0;
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}
.reports-actions {
  display: flex;
  gap: 8px;
}
.reports-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 22px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.rep-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.rep-filter > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rep-filter select,
.rep-filter input[type='date'],
.rep-filter input[type='number'] {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--surface-base);
}
.rep-filter-multi .rep-multi-pop {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 110px;
  overflow-y: auto;
  padding: 6px 8px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 12px;
}
.rep-filter-multi .rep-multi-pop label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
  cursor: pointer;
}
.rep-empty-note {
  color: var(--gray-500);
  font-style: italic;
  font-size: 12px;
}

.reports-meta {
  padding: 10px 22px;
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
  border-bottom: 1px solid var(--gray-100);
}
.reports-table-wrap {
  flex: 1;
  overflow: auto;
  padding: 4px 22px 16px;
}
.rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--surface-base);
}
.rep-table th,
.rep-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}
.rep-table th {
  position: sticky;
  top: 0;
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
  z-index: 1;
}
.rep-table th:hover {
  background: var(--gray-100);
}
.rep-table th.rep-sort-asc::after {
  content: ' ▲';
  color: var(--blue);
  font-size: 10px;
}
.rep-table th.rep-sort-desc::after {
  content: ' ▼';
  color: var(--blue);
  font-size: 10px;
}
.rep-table tbody tr:hover {
  background: var(--gray-50);
}
.rep-customer-link {
  border: none;
  background: transparent;
  color: var(--blue);
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-size: inherit;
  font-family: inherit;
}
.rep-customer-link:hover {
  text-decoration: underline;
}

.rep-section {
  margin-bottom: 24px;
}
.rep-section-title {
  margin: 12px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}

.reports-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px 22px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}
.rep-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}
.rep-summary-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rep-summary-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

.rep-empty {
  padding: 50px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--gray-500);
}

/* ═════════════════════════════════════════════════════════
   Custom Reports — sidebar list + builder overlay + runtime
   ═════════════════════════════════════════════════════════ */

/* Sidebar header — Create button */
.reports-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reports-sidebar-header .btn-sm {
  padding: 4px 8px;
  font-size: 11px;
  gap: 4px;
}

/* Section label inside the rep-list */
.rep-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  padding: 12px 12px 4px;
}

/* Row that combines a button + hover-revealed actions */
.rep-list-row {
  position: relative;
  display: flex;
  align-items: center;
}
.rep-list-row.active .rep-list-btn {
  background: var(--surface-base);
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.rep-list-btn-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rep-list-btn-custom {
  padding-right: 40px;
}
.rep-custom-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: auto;
}
.rep-list-row-actions {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  gap: 2px;
  background: var(--surface-base);
  padding: 2px;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
}
.rep-list-row:hover .rep-list-row-actions,
.rep-list-row.active .rep-list-row-actions {
  display: flex;
}
.rep-list-mini-btn {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 3px;
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.1s,
    color 0.1s;
}
.rep-list-mini-btn svg {
  width: 12px;
  height: 12px;
}
.rep-list-mini-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.rep-list-del-btn:hover {
  background: var(--red-light);
  color: var(--red);
}

.rep-empty-note {
  padding: 12px;
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
  line-height: 1.5;
}

/* ── Builder overlay ── */
.cr-builder-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(24, 24, 27, 0.6);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 24px;
  overflow: auto;
}
.cr-builder-overlay[hidden] {
  display: none !important;
}
.cr-builder-card {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  background: var(--surface-base);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  overflow: hidden;
}
.cr-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--gray-200);
}
.cr-builder-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cr-builder-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0;
}
.cr-builder-subtitle {
  font-size: 12px;
  color: var(--gray-500);
}
.cr-builder-actions {
  display: flex;
  gap: 8px;
}

.cr-step-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.cr-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--gray-200);
  background: var(--surface-base);
  color: var(--gray-600);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.12s;
}
.cr-step-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.cr-step-pill-active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.cr-step-pill-active .cr-step-num {
  background: var(--surface-base);
  color: var(--blue);
}
.cr-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.cr-step-sep {
  color: var(--gray-300);
  font-size: 14px;
}

.cr-step-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  min-height: 300px;
}
.cr-step-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
}
.cr-step-hint {
  color: var(--gray-500);
  font-size: 13px;
  margin: 0;
}

.cr-builder-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.cr-builder-footer-spacer {
  flex: 1;
}

/* Step 1 — source cards */
.cr-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.cr-source-card {
  border: 2px solid var(--gray-200);
  background: var(--surface-base);
  border-radius: 10px;
  padding: 18px 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cr-source-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.cr-source-card-active {
  border-color: var(--blue);
  background: var(--blue-light);
}
.cr-source-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}
.cr-source-card-meta {
  font-size: 12px;
  color: var(--gray-500);
}

/* Step 2 — columns two-panel */
.cr-step-columns {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  min-height: 400px;
}
.cr-col-left,
.cr-col-right {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cr-panel-hd {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600);
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
}
.cr-col-left-body,
.cr-col-right-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.cr-cat-group {
  margin-bottom: 12px;
}
.cr-cat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  margin-bottom: 4px;
  padding-left: 4px;
}
.cr-cat-fields {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cr-field-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border: 1px solid var(--gray-200);
  background: var(--surface-base);
  border-radius: 6px;
  font-size: 12px;
  color: var(--gray-800);
  cursor: pointer;
  transition: all 0.12s;
}
.cr-field-pill:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}
.cr-field-pill:disabled,
.cr-field-pill-used {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--gray-100);
}
.cr-field-type {
  font-size: 9px;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 8px;
}

.cr-col-card {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  cursor: default;
}
.cr-col-card.cr-dragging {
  opacity: 0.4;
}
.cr-col-card.cr-drag-over {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px #2563eb33;
}
.cr-col-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cr-col-grip {
  cursor: grab;
  color: var(--gray-400);
  user-select: none;
}
.cr-col-label {
  flex: 1;
  border: none;
  background: transparent;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-900);
  min-width: 0;
}
.cr-col-label:focus {
  background: var(--gray-50);
  outline: none;
}
.cr-col-type {
  font-size: 9px;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cr-col-x {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cr-col-x:hover {
  background: var(--red-light);
  color: var(--red);
}
.cr-col-row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--gray-100);
}
.cr-mini-lbl {
  font-size: 10px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cr-mini {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--surface-base);
}

.cr-empty {
  padding: 20px;
  text-align: center;
  color: var(--gray-400);
  font-size: 13px;
  font-style: italic;
}
.cr-empty-sm {
  padding: 10px;
}

/* Step 3 — filters */
.cr-filter-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cr-filter-group {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface-base);
  overflow: hidden;
}
.cr-filter-root-grp {
  background: var(--gray-50);
}
.cr-filter-grp-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--surface-base);
  flex-wrap: wrap;
}
.cr-filter-grp-op {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cr-filter-grp-text {
  font-size: 11px;
  color: var(--gray-500);
  margin-left: 6px;
}
.cr-op-btn {
  border: 1px solid var(--gray-300);
  background: var(--surface-base);
  color: var(--gray-600);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.cr-op-active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.cr-filter-grp-tools {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.cr-filter-children {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cr-cond-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 6px 8px;
  flex-wrap: wrap;
}
.cr-cond-field,
.cr-cond-op,
.cr-cond-input {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--surface-base);
  min-width: 0;
}
.cr-cond-field {
  min-width: 140px;
  max-width: 200px;
  flex-shrink: 0;
}
.cr-cond-op {
  min-width: 110px;
  flex-shrink: 0;
}
.cr-cond-val {
  flex: 1;
  min-width: 120px;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.cr-cond-input {
  flex: 1;
  min-width: 80px;
}
.cr-cond-multi {
  min-height: 50px;
}
.cr-cond-novalue {
  font-size: 11px;
  color: var(--gray-400);
  font-style: italic;
  padding: 0 4px;
}
.cr-and {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 600;
}

/* Step 4 — display */
.cr-display-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cr-display-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--gray-50);
  border-radius: 8px;
}
.cr-display-section[hidden] {
  display: none;
}
.cr-display-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
}
.cr-display-input {
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--surface-base);
  font-family: inherit;
}
.cr-display-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cr-display-row select {
  flex: 1;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--surface-base);
}
.cr-display-hint {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* ── Runtime: custom report table ── */
.cr-runtime-desc {
  padding: 10px 14px;
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  border-radius: 4px;
  font-size: 13px;
  color: var(--gray-700);
}
.cr-runtime-chart {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}
.cr-table .cr-w-sm {
  width: 100px;
}
.cr-table .cr-w-md {
  width: 160px;
}
.cr-table .cr-w-lg {
  width: 240px;
}
.cr-table .cr-w-auto {
  width: auto;
}
.cr-tr-clickable {
  cursor: pointer;
}
.cr-tr-clickable:hover {
  background: var(--gray-50);
}
.cr-group-hdr {
  background: var(--gray-100);
  padding: 8px 12px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  position: sticky;
  top: 0;
}
.cr-group-name {
  flex: 1;
}
.cr-group-count {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 600;
  background: var(--surface-base);
  padding: 2px 8px;
  border-radius: 999px;
}
.cr-group-agg-row td {
  background: var(--blue-light);
  font-weight: 600;
  font-size: 12px;
  border-top: 2px solid var(--blue);
}
.cr-agg-cell {
  padding: 6px 10px;
}
.cr-agg-label {
  font-size: 10px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

/* Boolean badge formatter */
.crv-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.crv-badge-yes {
  background: var(--green-light);
  color: var(--ct-065f46, #065f46);
}
.crv-badge-no {
  background: var(--red-light);
  color: var(--red);
}

/* Print mode — hide chrome, show only reports content */
body.rep-print-mode #sidebar,
body.rep-print-mode .global-header,
body.rep-print-mode .reports-sidebar,
body.rep-print-mode .reports-actions,
body.rep-print-mode .reports-filters {
  display: none !important;
}
body.rep-print-mode .reports-page {
  grid-template-columns: 1fr;
  height: auto;
}
body.rep-print-mode #view-reports {
  display: block !important;
  position: static;
}
@media print {
  body {
    background: var(--surface-base);
  }
  #sidebar,
  .global-header,
  .reports-sidebar,
  .reports-actions,
  .reports-filters,
  .tl-side-panel,
  .met-drill-panel,
  .cf-float-panel,
  .auto-drawer {
    display: none !important;
  }
  .reports-page {
    grid-template-columns: 1fr;
    height: auto;
  }
  .reports-table-wrap {
    overflow: visible;
  }
  .rep-table th {
    position: static;
  }
}

/* ═════════════════════════════════════════════════════════
   Platform shell — department switcher, settings overlay,
   People page, Clients/Profile redesign
   ═════════════════════════════════════════════════════════ */

/* Department switcher bar — removed; dept switching moved to header dropdown pill.
   The .dept-switcher HTML element is no longer in index.html.
   See .gh-dept-wrap / .gh-dept-pill / .gh-dept-dropdown above for new styles. */

/* Department placeholder (Sales/Production/Marketing) */
.dept-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
  color: var(--gray-500);
}
.dept-placeholder-icon {
  width: 80px;
  height: 80px;
  color: var(--gray-300);
  margin-bottom: 20px;
}
.dept-placeholder-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--gray-700);
  margin: 0 0 8px;
}
.dept-placeholder-desc {
  font-size: 14px;
  color: var(--gray-500);
  max-width: 420px;
}

/* People Modal */
.people-modal-dialog {
  max-width: 580px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
.pm-section {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--gray-50);
}
.pm-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
  margin-bottom: 14px;
}
.pm-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.pm-field:last-child {
  margin-bottom: 0;
}
.pm-field > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
}
.pm-field input[type='text'],
.pm-field input[type='email'],
.pm-field input[type='password'],
.pm-field input[type='tel'],
.pm-field input[type='time'],
.pm-field select {
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  width: 100%;
  background: var(--surface-base);
  box-sizing: border-box;
}
.pm-field input:focus,
.pm-field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.pm-days-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pm-day-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  background: var(--surface-base);
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.15s;
}
.pm-day-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.pm-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pm-color-row input[type='color'] {
  width: 40px;
  height: 34px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}
.pm-dept-checks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pm-dept-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
}
.pm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
}
.pm-footer-right {
  display: flex;
  gap: 8px;
}
.pm-archive-btn {
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.15s;
}
.pm-archive-btn:hover {
  border-color: var(--cd-dc2626, #dc2626);
  color: var(--ct-dc2626, #dc2626);
  background: var(--red-light);
}
.pm-unarchive-btn {
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.15s;
}
.pm-unarchive-btn:hover {
  border-color: var(--cd-16a34a, #16a34a);
  color: var(--ct-16a34a, #16a34a);
  background: var(--cb-f0fdf4, #f0fdf4);
}
.people-archived-details {
  margin-top: 16px;
}
.people-archived-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  padding: 8px 0;
  user-select: none;
}
.people-archived-summary:hover {
  color: var(--gray-700);
}
.people-list-archived {
  margin-top: 8px;
  opacity: 0.7;
}
.people-row-archived {
  background: var(--gray-50) !important;
}
.people-archived-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Clients page — New Service/New Project split buttons */
.cl-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.cl-new-btn:hover {
  background: #1d4ed8;
}
.cl-new-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Branding hex status indicator */
.brand-hex-status {
  font-size: 13px;
  font-weight: 700;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}
.brand-hex-valid {
  color: var(--ct-16a34a, #16a34a);
}
.brand-hex-invalid {
  color: var(--ct-dc2626, #dc2626);
}

/* Sidebar Coming Soon label */
.sidenav-coming {
  padding: 14px 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
  font-style: italic;
}

/* Settings overlay */
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Full-page takeover — opaque base surface covers the entire app (incl. the
     global header at z-index 210). z-index 215 sits above the header but below
     standard modals (220) so dialogs opened from inside settings still render
     on top. overflow:hidden guards against the 100vw-vs-scrollbar quirk. */
  z-index: 215;
  background: var(--surface-base);
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
/* ── Settings nav panel — brand-colored shell (matches main app sidebar) ── */
.so-sidebar {
  /* Full-page settings: fixed 240px brand-colored rail (wider than the main app
     sidebar's --sidebar-w to give the nav room in the takeover layout). */
  width: 240px;
  flex-shrink: 0;
  height: 100%;
  background: var(--rail-bg);
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
  position: relative;
  z-index: 1;
}
.so-sidebar-header {
  padding: 8px 18px 16px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  gap: 8px;
}
.so-sidebar-header span {
  flex: 1;
}
.so-close-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7); /* sits over the brand sidebar */
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.so-close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.so-nav {
  flex: 1;
  padding: 6px 0 16px;
  font-size: 11px;
}
.so-nav-section {
  margin-bottom: 6px;
}
.so-nav-section-label {
  padding: 16px 18px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

/* Top-level single items + expandable group headers */
.so-nav-item,
.so-nav-grouphdr {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: rgba(255, 255, 255, 0.55);
  padding: 9px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.1s;
}
.so-nav-item:hover,
.so-nav-grouphdr:hover {
  background: rgba(255, 255, 255, 0.07);
}
.so-nav-item.active {
  border-left-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

/* Expandable group header (chevron + label) */
.so-nav-grouphdr-label {
  flex: 1;
}
.so-nav-grouphdr-chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.15s ease;
}
.so-nav-group-open > .so-nav-grouphdr .so-nav-grouphdr-chevron {
  transform: rotate(180deg);
}
.so-nav-group-body {
  overflow: hidden;
}
.so-nav-group-body.so-nav-group-collapsed {
  display: none;
}

/* Sub-items */
.so-nav-subitem {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: rgba(255, 255, 255, 0.55);
  padding: 7px 18px 7px 32px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.1s;
}
.so-nav-subitem:hover {
  background: rgba(255, 255, 255, 0.07);
}
/* Light pill keeps the active sub-item readable on any brand background. */
.so-nav-subitem.active {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  border-left-color: rgba(255, 255, 255, 0.6);
}

/* Planned / coming-soon nav items (muted) */
.so-nav-planned {
  color: rgba(255, 255, 255, 0.34);
}
.so-nav-item.so-nav-planned.active,
.so-nav-subitem.so-nav-planned.active {
  color: rgba(255, 255, 255, 0.95);
}

/* Legacy dept-group nav classes are no longer rendered. */
.so-nav-dept-group,
.so-nav-coming {
  display: none;
}

/* ── Settings search bar ─────────────────────────────────── */
/* Wrapper carries the input's 18px side / 12px bottom insets (spec: input
   margin 0 18px 12px, width calc(100% - 36px)) so the absolutely-positioned
   search icon stays anchored to the input. Visually identical to margining the
   input directly, but keeps icon alignment trivial. */
.so-search-bar {
  position: relative;
  margin: 0 18px 12px;
}
.so-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
#so-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px 7px 32px; /* left room preserved for the search icon */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.15s,
    background 0.15s;
}
#so-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#so-search-input:focus {
  border-color: var(--blue);
  background: rgba(255, 255, 255, 0.11);
}

/* Nav item highlight when search matches */
.so-nav-item.so-nav-search-match,
.so-nav-subitem.so-nav-search-match {
  background: color-mix(in srgb, var(--blue) 7%, #ffffff) !important;
  color: var(--blue-dark) !important;
}

/* ── Settings search results ─────────────────────────────── */
.so-search-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.so-search-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--gray-400);
  font-size: 14px;
}
.so-search-group {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
}
.so-search-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--gray-50);
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
  border-bottom: 1px solid var(--gray-200);
}
.so-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}
.so-search-item:last-child {
  border-bottom: none;
}
.so-search-item-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
  background: var(--gray-100);
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.so-search-item-label {
  flex: 1;
  color: var(--gray-800);
}
.so-search-goto {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 0.1s,
    color 0.1s;
}
.so-search-goto:hover {
  background: var(--blue);
  color: white;
}

/* Highlight pulse when search navigates to an item */
@keyframes so-search-hl {
  0%,
  100% {
    background: transparent;
  }
  30% {
    background: var(--blue-light);
  }
}
.so-search-highlight {
  animation: so-search-hl 2s ease;
}

.so-content {
  flex: 1;
  height: 100%;
  background: var(--surface-base); /* white in light, carbon in dark */
  overflow-y: auto;
  padding: 24px; /* kept — .rd-scope pages have no internal padding */
}
.so-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--gray-500);
}

/* ── Settings — coming-soon / roadmap + temporary placeholder pages ── */
.so-coming {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
}
.so-coming-card {
  max-width: 460px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.so-coming-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--blue) 24%, #ffffff);
  border-radius: 14px;
  margin-bottom: 18px;
}
.so-coming-icon svg {
  width: 30px;
  height: 30px;
}
.so-coming-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}
.so-coming-badge {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 2px 10px;
}
.so-coming-desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: #4b5563;
}
.so-coming-features {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  text-align: left;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.so-coming-features li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  color: #374151;
}
.so-coming-features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.so-coming-note {
  margin: 0;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.5;
}

/* Fields & Lists temporary combined-view note (inside the section header) */
.so-temp-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 8px 12px;
}

/* ── Settings accordion (Service Config collapsibles) ──────── */
.svcfg-accordion {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--surface-base);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.svcfg-acc-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  background: var(--gray-50);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s;
}
.svcfg-acc-hdr:hover {
  background: var(--gray-100);
}
.svcfg-acc-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}
.svcfg-acc-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--gray-200);
  color: var(--gray-600);
  border-radius: 999px;
  padding: 1px 8px;
  flex-shrink: 0;
}
.svcfg-acc-chevron {
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.svcfg-acc-chevron.svcfg-acc-open {
  transform: rotate(180deg);
}
.svcfg-acc-body {
  padding: 16px 16px 12px;
}
.svcfg-acc-body.svcfg-acc-collapsed {
  display: none;
}
.svcfg-acc-desc {
  font-size: 12px;
  color: var(--gray-500);
  margin: 0 0 12px;
  line-height: 1.5;
}
.svcfg-group {
  margin-bottom: 28px;
}
.svcfg-group-header {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gray-400);
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--gray-150, #e8ecf0);
  margin-bottom: 6px;
}
.svcfg-group-body {
  display: flex;
  flex-direction: column;
}
.svcfg-cols-list {
  padding: 4px 0;
}
.svcfg-cols-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1px;
}
.svcfg-cols-col {
  min-width: 0;
}
.svcfg-cols-col + .svcfg-cols-col {
  border-left: 1px solid var(--gray-150, #e8ecf0);
}
.svcfg-cols-col-hdr {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
  padding: 6px 12px 5px;
  border-bottom: 1px solid var(--gray-150, #e8ecf0);
}
.svcfg-cols-empty {
  font-size: 12px;
  color: var(--gray-400);
  padding: 10px 12px;
  margin: 0;
  font-style: italic;
}
.svcfg-summary-list {
  padding: 4px 0;
}
/* Summary picker two-section layout */
.svcfg-sml-section-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
  padding: 8px 12px 4px;
  border-top: 1px solid var(--gray-150, #e8ecf0);
  margin-top: 2px;
}
#svcfg-sml-active {
  padding: 2px 0 4px;
}
.svcfg-sml-avail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 4px;
  border-top: none;
}
.svcfg-sml-avail-group {
  min-width: 0;
}
.svcfg-sml-avail .tl-sml-group-header {
  padding-top: 6px;
}

/* ── Tags Settings Panel ─────────────────────────────────── */
.tag-setting-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.tag-setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--surface-base);
}
.tag-setting-row:hover {
  border-color: var(--gray-300);
}
.tag-setting-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.tag-setting-name {
  flex: 1;
  font-size: 13px;
  color: var(--gray-800);
  font-weight: 500;
}
.tag-setting-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Tag add/edit inline form */
.tag-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px dashed var(--gray-300);
  border-radius: 6px;
  background: var(--gray-50);
}
.tag-add-name-input {
  flex: 1;
  min-width: 120px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--gray-300);
  border-radius: 5px;
  background: var(--surface-base);
}
.tag-add-name-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.tag-swatch-row {
  display: grid;
  grid-template-columns: repeat(9, 20px);
  gap: 4px;
}
.tag-swatch-opt {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
}
.tag-swatch-opt:hover {
  transform: scale(1.18);
}
.tag-swatch-opt.selected {
  border-color: white;
  box-shadow: 0 0 0 2px var(--gray-700);
  transform: scale(1.1);
}
.tag-add-form-actions {
  display: flex;
  gap: 6px;
}

/* Service tag drag-to-reorder */
.tag-drag-handle {
  color: var(--gray-300);
  cursor: grab;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 2px;
  transition: color 0.1s;
}
.tag-drag-handle:hover {
  color: var(--gray-500);
}
.tag-drag-handle svg {
  width: 14px;
  height: 14px;
}
.tag-setting-row.tag-row-dragging {
  opacity: 0.35;
}
.tag-setting-row.tag-row-over {
  border-top: 2px solid var(--blue);
  margin-top: -1px;
}

/* People page rows */
.people-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.people-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.people-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.people-avatar-init {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
}
.people-info {
  flex: 1;
}
.people-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}
.people-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
  font-size: 12px;
  color: var(--gray-500);
  flex-wrap: wrap;
}
.people-role-badge {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 600;
  text-transform: capitalize;
  font-size: 11px;
}
.people-dept-badge {
  padding: 1px 6px;
  background: var(--gray-100);
  border-radius: 4px;
  font-size: 11px;
  color: var(--gray-700);
  text-transform: capitalize;
}
.people-sched-badge {
  padding: 1px 6px;
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.people-inactive-badge {
  padding: 1px 6px;
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-991b1b, #991b1b);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.people-no-login-badge {
  padding: 1px 6px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fde68a, #fde68a);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}
.people-row-no-login {
  border-left: 3px solid var(--cd-f59e0b, #f59e0b);
}
.people-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Credentials modal */
.pcm-intro {
  font-size: 13px;
  color: var(--gray-600);
  margin: 0 0 14px;
  line-height: 1.55;
}
.pcm-cred-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  margin-bottom: 8px;
}
.pcm-cred-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  min-width: 130px;
}
.pcm-cred-val {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  letter-spacing: 0.03em;
  user-select: all;
}
.pcm-hint {
  font-size: 12px;
  color: var(--amber);
  font-weight: 600;
  margin: 4px 0 0;
}

/* Clients list (redesigned) */
.cl-search-wrap {
  flex: 1;
  max-width: 420px;
  margin: 0 14px;
}
.cl-search-wrap input {
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.cl-filters {
  display: flex;
  gap: 14px;
  padding: 10px 18px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-size: 13px;
}
.cl-filters label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.cl-list {
  padding: 0 18px 18px;
}
.cl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cl-table th,
.cl-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  text-align: left;
}
.cl-table th {
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-700);
  font-size: 12px;
}
.cl-row {
  cursor: pointer;
  transition: background 0.1s;
}
.cl-table tbody tr:nth-child(even) {
  background: var(--gray-50);
}
.cl-row:hover {
  background: #eef4ff !important;
}
.cl-tag {
  display: inline-block;
  padding: 1px 8px;
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}
.cl-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--gray-500);
}

/* Customer Profile page */
.cp-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}
.cp-header {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%);
  border-bottom: 1px solid var(--gray-200);
  padding: 18px 24px;
}
.cp-back-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  font-size: 13px;
}
.cp-back-btn:hover {
  text-decoration: underline;
}
.cp-header-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.cp-header-info {
  flex: 1;
}
.cp-name {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
}
.cp-header-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 13px;
  color: var(--gray-700);
}
.cp-link {
  color: var(--blue);
  text-decoration: none;
}
.cp-link:hover {
  text-decoration: underline;
}
.cp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
/* Color-aware client tag pill (replaces old hard-coded blue) */
.cp-tag-colored {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.cp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.cp-tag-del {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.1s;
}
.cp-tag-del:hover {
  opacity: 1;
}
.cp-tag-add {
  padding: 3px 10px;
  background: transparent;
  border: 1px dashed var(--gray-300);
  color: var(--gray-500);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
}
.cp-tag-add:hover {
  color: var(--blue);
  border-color: var(--blue);
}
.cp-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cp-body {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 18px;
  padding: 18px 24px;
}
.cp-section {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.cp-section h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}

/* Section header row — h3 left, action buttons right */
.cp-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.cp-section-header-row h3 {
  margin: 0;
}
.cp-section-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Inline Add Note form inside Client Activity */
.cp-note-form {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-note-form-top {
  display: flex;
  gap: 8px;
}
.cp-note-type-sel {
  height: 30px;
  font-size: 12px;
  padding: 0 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--surface-base);
  color: var(--gray-800);
  font-family: inherit;
  cursor: pointer;
  width: auto;
}
.cp-note-textarea {
  width: 100%;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--surface-base);
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.cp-note-textarea:focus {
  outline: none;
  border-color: var(--blue);
}
.cp-note-form-actions {
  display: flex;
  gap: 6px;
}

/* Activity type color variants */
.cp-activity-type--call {
  color: var(--ct-16a34a, #16a34a);
}
.cp-activity-type--email {
  color: #9333ea;
}
.cp-activity-type--visit {
  color: var(--ct-d97706, #d97706);
}
.cp-activity-type--other {
  color: #6b7280;
}
.cp-section label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  margin-top: 10px;
}
.cp-field {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--surface-base);
  font-family: inherit;
}
.cp-field:focus {
  outline: none;
  border-color: var(--blue);
}
.cp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cp-stamps {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nc-error {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--red-light);
  border: 1px solid var(--cd-fca5a5, #fca5a5);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ct-dc2626, #dc2626);
}
.nc-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  align-items: center;
}
.cp-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cp-history-table th,
.cp-history-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}
.cp-history-table tr {
  cursor: pointer;
}
.cp-history-table tr:hover {
  background: var(--gray-50);
}
.cp-status {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.cp-future-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--gray-200);
}
.cp-future-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.cp-future-label em {
  color: var(--gray-400);
  font-size: 11px;
}
.cp-activity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-activity-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  gap: 8px;
  padding: 6px 10px;
  background: var(--gray-50);
  border-radius: 4px;
  font-size: 12px;
}
.cp-activity-type {
  font-weight: 600;
  color: var(--blue);
}
.cp-activity-date {
  color: var(--gray-500);
  text-align: right;
}
.cp-empty {
  font-size: 13px;
  color: var(--gray-500);
  font-style: italic;
}
.cp-fin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cp-fin-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--gray-50);
  border-radius: 4px;
}
.cp-fin-grid span {
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.cp-fin-grid strong {
  font-size: 16px;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.cp-fin-warn {
  color: var(--ct-dc2626, #dc2626) !important;
}

/* Ticket panel: View Profile link + duplicate banner */
.tsp-view-profile-link {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.tsp-view-profile-link:hover {
  background: var(--blue-light);
}
.tsp-duplicate-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-fde68a, #fde68a);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--ct-92400e, #92400e);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cp-banner-btn {
  background: var(--surface-base);
  border: 1px solid var(--cd-fde68a, #fde68a);
  color: var(--ct-92400e, #92400e);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cp-banner-btn:hover {
  background: var(--cb-fef3c7, #fef3c7);
  border-color: var(--cd-f59e0b, #f59e0b);
}

/* ═════════════════════════════════════════════════════════
   6-TAB TICKET PANEL REDESIGN
   ═════════════════════════════════════════════════════════ */

/* Container queries — switch field layout based on panel width */
.tsp-inner {
  container-type: inline-size;
  container-name: tspanel;
}

/* Default (narrow): all fields stack */
.tsp-grid-2col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tsp-grid-2col .field {
  margin-bottom: 12px;
}

/* Wide mode (panel > 580px): 2-column grid for paired fields */
@container tspanel (min-width: 580px) {
  .tsp-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .tsp-grid-2col .field {
    margin-bottom: 0;
  }
}

/* Compact paired/trio rows whose fields are narrow enough (toggle, short
   select, date, phone input) to go multi-column well below the 580px
   .tsp-grid-2col threshold — keeps them side-by-side at the floating
   panel's typical/default width too, so docked and floating match. */
.tsp-contact-row,
.tsp-3col-compact {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tsp-contact-row .field,
.tsp-3col-compact .field {
  margin-bottom: 12px;
}

@container tspanel (min-width: 360px) {
  .tsp-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .tsp-contact-row .field {
    margin-bottom: 0;
  }
}

@container tspanel (min-width: 440px) {
  .tsp-3col-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .tsp-3col-compact .field {
    margin-bottom: 0;
  }
}

/* Read-only display blocks (Customer Submission, Scheduling Summary) */
.tsp-readonly-block {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--gray-700);
  min-height: 38px;
  white-space: pre-wrap;
  line-height: 1.45;
}
.tsp-readonly-pill {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 7px 11px;
  font-size: 13px;
  color: var(--gray-700);
  font-weight: 500;
}

/* Scheduling Summary / Service Details fixed rows — explicit column counts that do
   NOT follow the .tsp-grid-2col 2→3 container query, so date rows stay 2-up and the
   duration row stays 3-up at every panel width. */
.tsp-sum-row {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px 12px;
  align-items: start;
}
.tsp-sum-row--2 {
  grid-template-columns: 1fr 1fr;
}
.tsp-sum-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.tsp-sum-row .field {
  margin-bottom: 0;
  min-width: 0;
}

/* Tighten the Scheduling Summary card — was eating too much vertical space. */
.tsp-section[data-section='scheduling-summary'] {
  gap: 8px 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.tsp-section[data-section='scheduling-summary'] .tsp-section-label {
  margin-bottom: 2px;
}
.tsp-section[data-section='scheduling-summary'] .field label {
  margin-bottom: 2px;
}
.tsp-section[data-section='scheduling-summary'] .tsp-readonly-pill {
  padding: 5px 9px;
}

/* Difference pill colour states (Estimated − Actual). Theme-adaptive: the semantic
   tokens shift in dark mode and the translucent fill lets the card surface show through.
   Scoped under .tsp-body so they beat the panel's generic .tsp-body .tsp-readonly-pill
   skin (which otherwise forces the value colour + removes the border). */
.tsp-body .tsp-readonly-pill.tsp-diff-green {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
  font-weight: 600;
}
.tsp-body .tsp-readonly-pill.tsp-diff-yellow {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  font-weight: 600;
}
.tsp-body .tsp-readonly-pill.tsp-diff-red {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 34%, transparent);
  font-weight: 600;
}
.tsp-tech-visible-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.12);
  color: var(--ct-1d4ed8, #1d4ed8);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tsp-field-meta {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 4px;
  font-style: italic;
}

/* Photo grid (Customer Photos, Job Photos) */
.tsp-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px;
  min-height: 60px;
}
/* Drop-zone state applied by _renderCustomerPhotos */
.tsp-photo-drop-zone {
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.tsp-photo-drop-zone:hover {
  border-color: var(--blue);
  border-style: dashed;
}
.tsp-photo-drop-zone.tsp-photo-drag-over {
  border-color: var(--blue);
  border-style: dashed;
  background: rgba(37, 99, 235, 0.05);
}
.tsp-photos-placeholder {
  font-style: normal;
  padding: 12px 0;
}
.tsp-photo-thumb {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--surface-base);
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.tsp-photo-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.tsp-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tsp-photos-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  color: var(--gray-400);
  font-style: italic;
  padding: 14px 0;
}
/* Paperwork grid — mirrors .tsp-photo-grid for visual consistency with Customer Photos */
.tsp-paperwork-display {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px;
  min-height: 60px;
}
.tsp-paperwork-item-wrap {
  position: relative;
  display: inline-block;
  cursor: grab;
}
.tsp-paperwork-item-wrap:active {
  cursor: grabbing;
}
.tsp-paperwork-item-wrap.tsp-paperwork-dragging {
  opacity: 0.35;
}
.tsp-paperwork-item-wrap.tsp-paperwork-over {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}
.tsp-paperwork-item {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  padding: 6px 4px;
  background: var(--surface-base);
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.tsp-paperwork-item:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.tsp-paperwork-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tsp-paperwork-item-icon {
  width: 28px;
  height: 28px;
  color: var(--gray-400);
  flex-shrink: 0;
}
.tsp-paperwork-item-name {
  font-size: 10px;
  color: var(--gray-600);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* ── Financial tab — stat cards ── */
.tsp-fin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.tsp-fin-stat {
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.tsp-fin-stat-neutral {
  background: var(--gray-50);
}
.tsp-fin-stat-collected {
  background: var(--green-light);
  border-color: var(--cd-a7f3d0, #a7f3d0);
}
.tsp-fin-stat-balance-due {
  background: var(--amber-light);
  border-color: var(--cd-fde68a, #fde68a);
}
.tsp-fin-stat-balance-zero {
  background: var(--green-light);
  border-color: var(--cd-a7f3d0, #a7f3d0);
}
.tsp-fin-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
}
.tsp-fin-stat-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.tsp-fin-stat-collected .tsp-fin-stat-amount {
  color: var(--green);
}
.tsp-fin-stat-balance-due .tsp-fin-stat-amount {
  color: var(--amber);
}
.tsp-fin-stat-balance-zero .tsp-fin-stat-amount {
  color: var(--green);
}

/* ── Financial tab — payment detail rows ── */
.tsp-payment-rows {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tsp-pay-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-100);
}
.tsp-pay-row:last-child {
  border-bottom: none;
}
.tsp-pay-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  flex: 1;
  min-width: 0;
}
.tsp-pay-row-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tsp-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tsp-pay-badge-paid {
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-065f46, #065f46);
  border: 1px solid var(--cd-6ee7b7, #6ee7b7);
}
.tsp-pay-badge-pending {
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
}
.tsp-pay-badge-na {
  background: var(--gray-100);
  color: var(--gray-500);
  border: 1px solid var(--gray-200);
}

/* ── UNPAID BALANCE tag (system tag) ── */
.tsp-tag-unpaid {
  background: var(--cb-dc2626, #dc2626) !important;
  color: #fff !important;
  font-weight: 700 !important;
  cursor: default;
}

/* Financial — no-cost banner */
.tsp-financial-nocost-banner {
  background:
    linear-gradient(0deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.08)), var(--surface-base);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ct-1e40af, #1e40af);
  margin-bottom: 14px;
}
.tsp-financial-nocost-banner svg {
  flex-shrink: 0;
}
.tsp-financial-nocost-banner strong {
  font-weight: 700;
}

/* Payment Method */
.tsp-payment-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: 0.01em;
}
.tsp-payment-trust-badge svg {
  color: var(--gray-400);
  flex: 0 0 auto;
}
.tsp-payment-saved-info {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--cb-f0fdf4, #f0fdf4);
  border: 1px solid var(--cd-bbf7d0, #bbf7d0);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ct-166534, #166534);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* QuickBooks card */
.tsp-qb-card {
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.tsp-qb-card p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--gray-500);
}

/* Completion Review banner */
.tsp-completion-review {
  background:
    linear-gradient(0deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.08)), var(--surface-base);
  border: 2px solid var(--cd-f59e0b, #f59e0b);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.tsp-completion-review-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.tsp-completion-review-banner svg {
  color: var(--ct-d97706, #d97706);
  flex-shrink: 0;
  margin-top: 2px;
}
.tsp-completion-review-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tsp-completion-review-text strong {
  color: var(--ct-92400e, #92400e);
  font-size: 14px;
}
.tsp-completion-meta {
  font-size: 12px;
  color: var(--gray-600);
}
.tsp-completion-review-actions {
  display: flex;
  gap: 8px;
}
.tsp-cr-complete-btn {
  background: var(--cb-16a34a, #16a34a);
  border-color: var(--cd-16a34a, #16a34a);
}
.tsp-cr-complete-btn:hover {
  background: var(--cb-15803d, #15803d);
  border-color: var(--cd-15803d, #15803d);
}
.tsp-cr-feedback-btn {
  background: var(--cb-f59e0b, #f59e0b);
  color: white;
  border-color: var(--cd-f59e0b, #f59e0b);
}
.tsp-cr-feedback-btn:hover {
  background: var(--cb-d97706, #d97706);
  border-color: var(--cd-d97706, #d97706);
}

/* ── Overview tab Pending Review banner ── */
.tsp-overview-review-banner {
  background: linear-gradient(135deg, var(--cb-f59e0b, #f59e0b) 0%, var(--cb-d97706, #d97706) 100%);
  border-radius: 10px;
  padding: 16px 20px 18px;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.tsp-overview-review-banner[hidden] {
  display: none;
}
.tsp-orb-text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: white;
  line-height: 1.45;
}
.tsp-orb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-base);
  color: var(--ct-92400e, #92400e);
  border: none;
  border-radius: var(--radius);
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.tsp-orb-btn:hover {
  background: var(--cb-fef3c7, #fef3c7);
}
.tsp-orb-btn svg {
  flex-shrink: 0;
  color: var(--ct-d97706, #d97706);
}

/* ── Job Review Modal ── */
.job-review-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.55);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.job-review-backdrop[hidden] {
  display: none;
}
.job-review-dialog {
  background: var(--surface-base);
  border-radius: 14px;
  width: 80vw;
  height: 85vh;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
.job-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.job-review-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}
.job-review-close {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  background: var(--gray-100);
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  transition: background 0.15s;
}
.job-review-close:hover {
  background: var(--gray-200);
}
.job-review-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.job-review-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 26px;
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
  background: var(--surface-base);
}

/* Feedback area (top of body, hidden until revealed) */
.jrm-feedback-area {
  background: var(--amber-light);
  border-bottom: 2px solid var(--cd-f59e0b, #f59e0b);
}
.jrm-feedback-area[hidden] {
  display: none;
}
.jrm-feedback-section {
  padding: 20px 26px;
}
.jrm-feedback-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Sections */
.jrm-section {
  padding: 22px 26px;
  border-bottom: 1px solid var(--gray-100);
}
.jrm-section:last-child {
  border-bottom: none;
}
.jrm-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
  margin-bottom: 14px;
}
.jrm-sub-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  margin: 0 0 7px;
}
.jrm-sub-block {
  margin-bottom: 16px;
}
.jrm-sub-block:last-child {
  margin-bottom: 0;
}

/* Key-value rows */
.jrm-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  align-items: baseline;
  border-bottom: 1px solid var(--gray-50);
}
.jrm-row:last-child {
  border-bottom: none;
}
.jrm-row-label {
  width: 190px;
  flex-shrink: 0;
  color: var(--gray-500);
  font-weight: 500;
}
.jrm-row-value {
  flex: 1;
  color: var(--gray-900);
  font-weight: 500;
}
.jrm-variance-fast {
  color: var(--ct-16a34a, #16a34a);
  font-weight: 700;
}
.jrm-variance-slow {
  color: var(--ct-dc2626, #dc2626);
  font-weight: 700;
}

/* Scope tags */
.jrm-scope-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.jrm-scope-tag {
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
}

/* Badges */
.jrm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
}
.jrm-badge-classification {
  background: var(--blue-light);
  color: var(--ct-1d4ed8, #1d4ed8);
}
.jrm-badge-goback {
  background: var(--red-light);
  color: var(--ct-dc2626, #dc2626);
}

/* Preformatted text blocks */
.jrm-pre {
  font-family: inherit;
  font-size: 13px;
  color: var(--gray-800);
  line-height: 1.65;
  white-space: pre-wrap;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px 15px;
  margin: 0;
}
.jrm-empty {
  color: var(--gray-400);
  font-size: 13px;
  font-style: italic;
}

/* Materials table */
.jrm-materials-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px;
}
.jrm-materials-table th {
  text-align: left;
  padding: 7px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  font-weight: 600;
  color: var(--gray-600);
  font-size: 12px;
}
.jrm-materials-table td {
  padding: 6px 10px;
  border: 1px solid var(--gray-200);
  color: var(--gray-800);
}
.jrm-mat-total-row td {
  font-weight: 700;
  background: var(--gray-50);
}

/* Photo grid */
.jrm-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jrm-photo-thumb {
  width: 84px;
  height: 84px;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: none;
  transition:
    border-color 0.15s,
    transform 0.1s;
}
.jrm-photo-thumb:hover {
  border-color: var(--primary);
  transform: scale(1.04);
}
.jrm-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PC pairs inside assessment */
.jrm-pc-pair {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  padding: 4px 0;
}
.jrm-pc-problem {
  color: var(--gray-700);
  font-weight: 500;
}
.jrm-pc-arrow {
  color: var(--gray-400);
  flex-shrink: 0;
}
.jrm-pc-cause {
  color: var(--gray-600);
}

/* Tech Feedback Modal */
.tfm-summary {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px 14px;
}
.tfm-summary-row {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
}
.tfm-summary-label {
  width: 140px;
  flex-shrink: 0;
  color: var(--gray-500);
  font-weight: 500;
}
.tfm-summary-value {
  flex: 1;
  color: var(--gray-800);
}

/* Notes & Communication — compose box */
.tsp-note-compose {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-base);
}
.tsp-note-compose-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.tsp-note-type-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  white-space: nowrap;
  flex-shrink: 0;
}
.tsp-note-type-select {
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 3px 8px;
  background: var(--surface-base);
  color: var(--gray-700);
  cursor: pointer;
}
.tsp-note-type-select:focus {
  outline: none;
  border-color: var(--blue);
}
.tsp-note-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  resize: vertical;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--gray-800);
  min-height: 78px;
  background: var(--surface-base);
  line-height: 1.5;
}
.tsp-note-textarea:focus {
  background: var(--cb-fafcff, #fafcff);
}
.tsp-note-compose-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 7px 12px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}

/* ── Compact note composer — type pills + small textarea that grows on focus ──── */
.tsp-note-compose--compact {
  border: none;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tsp-note-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tsp-note-type-pill {
  border: 0.5px solid var(--tsp-card-border, var(--gray-200));
  background: var(--tsp-card-bg, var(--surface-base));
  color: var(--tsp-card-title, var(--gray-700));
  border-radius: 99px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    box-shadow 0.12s,
    border-color 0.12s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.tsp-note-type-pill:hover {
  background: var(--tsp-input-bg-hover, var(--gray-100));
}
.tsp-note-type-pill.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}
/* Textarea + Save sit on one framed row; the editor flexes, Save stays inline. */
.tsp-note-compose-main {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface-base);
  overflow: hidden;
}
.tsp-note-compose--compact .tsp-note-textarea {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  max-height: 220px;
  overflow-y: auto;
  resize: none;
  transition: min-height 0.15s ease;
}
.tsp-note-compose--compact .tsp-note-textarea:focus {
  min-height: 84px;
}
.tsp-note-compose-main > .btn-primary {
  flex-shrink: 0;
  margin: 0 8px 8px 0;
}
.tsp-notes-search {
  margin: 10px 0 14px;
}
.tsp-notes-search input {
  width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
}
.tsp-notes-search input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.tsp-notes-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tsp-notes-empty {
  text-align: center;
  color: var(--gray-400);
  font-style: italic;
  font-size: 13px;
  padding: 24px 0;
}
.tsp-note-entry {
  border-left: 3px solid var(--gray-300);
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 10px 12px;
}
.tsp-note-entry-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.tsp-note-icon {
  display: flex;
  align-items: center;
  color: var(--gray-500);
}
.tsp-note-sm-badge {
  background: var(--blue);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.tsp-note-author {
  font-weight: 600;
  color: var(--gray-800);
}
.tsp-note-type {
  background: var(--gray-100);
  color: var(--gray-600);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}
.tsp-note-time {
  color: var(--gray-400);
  font-size: 11px;
  margin-left: auto;
}
.tsp-note-body {
  color: var(--gray-700);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.tsp-note-sm {
  border-left-color: var(--blue);
}
.tsp-note-tech {
  border-left-color: var(--cd-16a34a, #16a34a);
}
.tsp-note-system {
  border-left-color: var(--gray-300);
  background: var(--gray-50);
}
.tsp-note-system .tsp-note-body {
  font-style: italic;
  color: var(--gray-500);
  font-size: 12px;
}
.tsp-note-financial {
  border-left-color: var(--cd-059669, #059669);
}
.tsp-note-fin-badge {
  background: var(--cb-059669, #059669);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

/* ── Note inline editing ── */
.tsp-note-edit-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  color: var(--gray-400);
  flex-shrink: 0;
  transition:
    color 0.15s,
    background 0.15s;
  line-height: 1;
}
.tsp-note-entry:hover .tsp-note-edit-btn {
  display: flex;
  align-items: center;
}
.tsp-note-edit-btn:hover {
  color: var(--blue);
  background: var(--blue-light, rgba(37, 99, 235, 0.08));
}
.tsp-note-edit-textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-700);
  background: var(--surface-base);
  border: 1px solid var(--blue);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: inherit;
  margin-top: 4px;
}
.tsp-note-edit-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.tsp-note-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
[data-theme='dark'] .tsp-note-edit-textarea {
  color: var(--gray-200);
  background: var(--gray-800);
  border-color: var(--blue);
}

/* Draggable Photo Viewer */
.photo-viewer {
  position: fixed;
  width: 560px;
  height: 480px;
  min-width: 280px;
  min-height: 220px;
  background: rgba(24, 24, 27, 0.92);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  resize: none;
}
.pv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  cursor: grab;
  color: white;
}
.pv-header:active {
  cursor: grabbing;
}
.pv-counter {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.pv-actions {
  display: flex;
  gap: 4px;
}
.pv-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.12s;
}
.pv-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.pv-body {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}
.pv-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.pv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.pv-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}
.pv-prev {
  left: 12px;
}
.pv-next {
  right: 12px;
}
.pv-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background: linear-gradient(
    135deg,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    transparent 60%,
    transparent 70%,
    rgba(255, 255, 255, 0.4) 70%,
    rgba(255, 255, 255, 0.4) 80%,
    transparent 80%
  );
}

/* Pending Review status pill (used in tickets list status badges) */
.status-pending-review {
  background: rgba(245, 158, 11, 0.18);
  color: var(--ct-92400e, #92400e);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* My Schedule — Mark Complete + Feedback Received */
.ms-stop-work-desc {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(59, 130, 246, 0.05);
  border-left: 3px solid var(--blue);
  border-radius: 4px;
  font-size: 13px;
  color: var(--gray-700);
  white-space: pre-wrap;
  line-height: 1.45;
}
.ms-stop-complete-btn {
  margin-top: 10px;
  background: var(--cb-16a34a, #16a34a);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.ms-stop-complete-btn:hover {
  background: var(--cb-15803d, #15803d);
}
.ms-stop-status-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.ms-stop-status-pending-review {
  background: rgba(245, 158, 11, 0.18);
  color: var(--ct-92400e, #92400e);
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.ms-stop-status-complete {
  background: rgba(15, 118, 110, 0.15);
  color: #115e59;
  border: 1px solid rgba(15, 118, 110, 0.4);
}
.ms-stop.ms-stop-complete,
.ms-stop.ms-stop-pending-review {
  opacity: 0.78;
}
.ms-stop-feedback {
  margin-top: 12px;
  padding: 10px 12px;
  background:
    linear-gradient(0deg, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0.06)), var(--surface-base);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 8px;
}
.ms-stop-feedback-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ct-6d28d9, #6d28d9);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.ms-stop-feedback-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-stop-feedback-item {
  background: var(--surface-base);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 6px;
  padding: 8px 10px;
}
.ms-stop-feedback-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.ms-stop-feedback-meta strong {
  color: var(--gray-800);
  font-weight: 600;
}
.ms-stop-feedback-msg {
  font-size: 13px;
  color: var(--gray-800);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Columns picker — grouped sections */
.tl-cols-group {
  margin-bottom: 8px;
}
.tl-cols-group-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
  padding: 8px 10px 4px;
  border-top: 1px solid var(--gray-100);
}
.tl-cols-group:first-child .tl-cols-group-header {
  border-top: none;
}

/* ══════════════════════════════════════════════════════════
   MY SCHEDULE — Day summary + 5-step workflow
══════════════════════════════════════════════════════════ */
.ms-day-suggested {
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  color: var(--gray-400);
  margin-left: 4px;
}
.ms-day-summary {
  padding: 8px 16px;
  font-size: 12.5px;
  color: var(--gray-600);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  font-weight: 500;
}

/* ── Stop card collapsed summary ── */
.ms-stop {
  padding: 0;
  border-bottom: 1px solid var(--gray-100);
  display: block;
  background: var(--surface-base);
  transition: background 0.12s;
}
.ms-stop:last-child {
  border-bottom: none;
}
.ms-stop-summary {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.ms-stop-summary:hover {
  background: var(--gray-50);
}
.ms-stop-summary-info {
  flex: 1;
  min-width: 0;
}
.ms-stop-summary-line1 {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.ms-stop-summary-line2 {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--gray-500);
}
.ms-stop-address-text {
  color: var(--gray-700);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-stop-eta,
.ms-stop-hours {
  font-size: 12px;
  color: var(--gray-400);
}
.ms-stop-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: var(--surface-base);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
}
.ms-stop-toggle:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}
.ms-stop-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

/* Status badges */
.ms-status-badge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
}
.ms-status-pending {
  background: var(--gray-100);
  color: var(--gray-600);
  border-color: var(--gray-300);
}
.ms-status-progress {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  border-color: var(--cd-93c5fd, #93c5fd);
}
.ms-status-active {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  border-color: var(--cd-60a5fa, #60a5fa);
}
.ms-status-pending-review {
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border-color: var(--cd-fcd34d, #fcd34d);
}
.ms-status-complete {
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-065f46, #065f46);
  border-color: var(--cd-6ee7b7, #6ee7b7);
}
.ms-status-reschedule {
  background: var(--cb-fce7f3, #fce7f3);
  color: var(--ct-9d174d, #9d174d);
  border-color: #f9a8d4;
}
.ms-status-locked {
  background: var(--gray-100);
  color: var(--gray-500);
  border-color: var(--gray-300);
}

/* Active stop highlight */
.ms-stop-active {
  background: var(--cb-f0f7ff, #f0f7ff);
}
.ms-stop-active > .ms-stop-summary {
  box-shadow: inset 3px 0 0 var(--blue);
}

/* Day-overview time window */
.ms-stop-window {
  color: var(--gray-600);
  font-weight: 600;
}

/* Multi-day "Day X of N" badge */
.ms-day-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--cb-ede9fe, #ede9fe);
  color: var(--ct-5b21b6, #5b21b6);
  border: 1px solid var(--cd-c4b5fd, #c4b5fd);
}

/* Locked future stop */
.ms-stop-locked {
  opacity: 0.92;
}
.ms-stop-summary-locked {
  cursor: default;
}
.ms-stop-summary-locked .ms-stop-num {
  background: var(--gray-100);
  color: var(--gray-400);
}
.ms-locked-hint {
  font-size: 11.5px;
  color: var(--gray-400);
  font-style: italic;
}
.ms-lock-icon {
  color: var(--gray-300);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Morning-push gate / route locked */
.ms-locked-route {
  padding: 56px 24px;
  text-align: center;
  color: var(--gray-500);
}
.ms-locked-route svg {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  display: block;
  color: var(--gray-300);
}
.ms-locked-route h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--gray-700);
}
.ms-locked-route p {
  margin: 0;
  font-size: 14px;
}

/* Read-only reference block (phases + scope + classification) */
.ms-reference {
  margin: 6px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms-ref-block {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}
.ms-phase-block {
  border-left: 3px solid var(--cd-7c3aed, #7c3aed);
}
.ms-ref-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms-ref-ro {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-500);
  border: 1px solid var(--gray-200);
}
.ms-phase-tasks {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ms-phase-tasks li {
  font-size: 13.5px;
  color: var(--gray-700);
}
.ms-ref-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ms-ref-class {
  margin-top: 8px;
  font-size: 13px;
  color: var(--gray-700);
}
.ms-ref-class-lbl {
  font-weight: 700;
  color: var(--gray-500);
}
.ms-ref-empty {
  font-size: 13px;
  color: var(--gray-400);
}

/* Unable to Complete */
.ms-unable-bar {
  margin: 14px 0 4px;
  display: flex;
  justify-content: center;
}
.ms-unable-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  color: var(--ct-b91c1c, #b91c1c);
  border: 1px solid var(--cd-fca5a5, #fca5a5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.ms-unable-btn:hover {
  background: var(--red-light);
  border-color: #f87171;
}
.ms-resch-confirm {
  padding: 14px 4px;
}
.ms-resch-confirm h4 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--ct-9d174d, #9d174d);
}
.ms-resch-confirm p {
  margin: 4px 0;
  font-size: 13.5px;
  color: var(--gray-600);
}
.ms-resch-note {
  font-style: italic;
}

/* Unable-to-Complete modal reasons */
.msu-sub {
  font-size: 13.5px;
  color: var(--gray-500);
  margin: 0 0 14px;
}
.msu-reasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msu-reason {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 14px;
  color: var(--gray-700);
  transition:
    background 0.12s,
    border-color 0.12s;
}
.msu-reason:hover {
  background: var(--gray-50);
}
.msu-reason:has(input:checked) {
  background: var(--blue-light);
  border-color: var(--blue);
}

/* Expanded state */
.ms-stop-expanded {
  background: var(--cb-fafbfc, #fafbfc);
  box-shadow: inset 3px 0 0 var(--blue);
}
.ms-stop-done.ms-stop-expanded {
  box-shadow: inset 3px 0 0 #16a34a;
}
.ms-stop-body {
  padding: 6px 18px 18px;
}

/* ── Workflow scrolling (phone-friendly) ──
   ms-body is the single scroll container. Its day-card child must NOT shrink:
   ms-body is a flex column, and a shrinkable child (the card sets overflow:hidden)
   gets compressed to fit and then clips its own overflow, leaving the bottom of a
   tall step (and the Unable-to-Complete bar) unreachable. flex-shrink:0 keeps the
   card at natural height so ms-body scrolls the whole workflow, every step included. */
.ms-step-content {
  min-height: 0;
}

/* ── Persistent Instructions panel (visible at every step) ── */
.ms-instr-panel {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  margin-bottom: 10px;
  overflow: hidden;
}
.ms-instr-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  font-family: inherit;
}
.ms-instr-toggle:hover {
  color: var(--gray-900);
  background: var(--gray-50);
}
.ms-instr-toggle svg:first-child {
  color: var(--blue);
  flex-shrink: 0;
}
.ms-instr-chevron {
  margin-left: auto;
  transition: transform 0.2s;
}
.ms-instr-toggle.open .ms-instr-chevron {
  transform: rotate(180deg);
}
.ms-instr-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--gray-100);
}
.ms-instr-desc {
  background: var(--gray-50);
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-800);
  border: 1px solid var(--gray-100);
  margin-top: 12px;
}
.ms-instr-empty {
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 12px;
}

/* ── Step 3 — Photos hint ── */
.ms-photos-step-hint {
  margin-bottom: 12px;
}

/* ── Live remaining balance in the payment section ── */
.ms-pay-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 10px;
}
.ms-pay-balance-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
.ms-pay-balance-amt {
  font-size: 18px;
  font-weight: 800;
  color: var(--gray-900);
}

/* ── Full Kit checkbox (liquid materials) ── */
.ms-mat-fullkit-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  white-space: nowrap;
}
.ms-mat-fullkit-check input {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ── Step indicator (1–5) ── */
.ms-steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 8px 18px;
  margin-bottom: 8px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}
.ms-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: default;
  padding: 4px 6px;
  flex: 0 0 auto;
  min-width: 60px;
  font-family: inherit;
}
.ms-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--gray-100);
  color: var(--gray-500);
  border: 2px solid var(--gray-200);
  flex-shrink: 0;
}
.ms-step-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ms-step-line {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
  margin-top: -22px;
}
.ms-step-line-done {
  background: var(--cb-16a34a, #16a34a);
}
.ms-step-done .ms-step-circle {
  background: var(--cb-16a34a, #16a34a);
  color: white;
  border-color: var(--cd-16a34a, #16a34a);
}
.ms-step-done .ms-step-label {
  color: var(--ct-16a34a, #16a34a);
}
.ms-step-active .ms-step-circle {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.ms-step-active .ms-step-label {
  color: var(--blue);
}
.ms-step-done {
  cursor: pointer;
}
.ms-step-done:hover .ms-step-circle {
  filter: brightness(1.06);
}

/* ── Step content panes ── */
.ms-step-pane {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
}
.ms-step-hdr h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ms-step-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ms-step-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
}
.ms-step-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.ms-step-label-lg {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.ms-step-label-sm {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  margin: 12px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ms-field-hint {
  font-size: 11.5px;
  color: var(--gray-400);
  margin-top: 4px;
}

/* Step 1 — Arrive card */
.ms-arrive-card {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--gray-100);
}
.ms-arrive-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.ms-arrive-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  min-width: 90px;
}
.ms-arrive-addr {
  color: var(--blue);
  text-decoration: none;
}
.ms-arrive-addr:hover {
  text-decoration: underline;
}
.ms-checkin-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-065f46, #065f46);
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--cd-6ee7b7, #6ee7b7);
}
.ms-checkin-icon {
  flex-shrink: 0;
}
.ms-checkin-summary strong {
  display: block;
  font-size: 13.5px;
}
.ms-step-meta {
  font-size: 11.5px;
  color: var(--ct-047857, #047857);
  margin-top: 2px;
}
.ms-late-banner {
  margin-top: 10px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 12.5px;
  border: 1px solid var(--cd-fcd34d, #fcd34d);
}

/* Step 2 — Instructions */
.ms-work-desc {
  background: var(--gray-50);
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gray-800);
  border: 1px solid var(--gray-100);
  margin-bottom: 8px;
}
.ms-step-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ms-scope-tag {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
}

/* Step 3 — During / Step 5 — Complete textareas */
.ms-step-pane .field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
  display: block;
}
.ms-step-pane textarea {
  width: 100%;
  min-height: 80px;
  padding: 9px 11px;
  font-size: 13px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  resize: vertical;
  font-family: inherit;
}
.ms-step-pane textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.ms-photo-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-50);
  color: var(--gray-500);
  padding: 14px;
  border-radius: var(--radius);
  border: 1px dashed var(--gray-300);
  font-size: 12.5px;
}

/* Step 4 — Materials */
.ms-mat-add {
  display: grid;
  grid-template-columns: 1fr 90px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.ms-mat-select,
.ms-mat-qty-input {
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 13px;
}
.ms-mat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 6px;
  background: var(--gray-50);
  min-height: 50px;
}
.ms-empty-mat {
  padding: 14px;
  text-align: center;
  color: var(--gray-400);
  font-size: 12.5px;
}
.ms-mat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-base);
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-100);
}
.ms-mat-main {
  flex: 1;
  min-width: 0;
}
.ms-mat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}
.ms-mat-size {
  font-size: 11.5px;
  color: var(--gray-500);
  font-weight: 500;
}
.ms-mat-line {
  font-size: 11.5px;
  color: var(--gray-500);
  margin-top: 2px;
}
.ms-mat-tag {
  display: inline-block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  padding: 1px 7px;
  border-radius: 999px;
}
.ms-mat-tag-sm {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
}
.ms-mat-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-mat-remove:hover {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--red);
}
.ms-mat-total {
  margin-top: 10px;
  text-align: right;
  font-size: 13px;
  color: var(--gray-600);
}
.ms-mat-total strong {
  color: var(--gray-900);
  font-size: 14.5px;
}

/* Step 5 — completion summary grid */
.ms-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.ms-summary-grid > div {
  background: var(--gray-50);
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-100);
}
.ms-summary-lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  margin-bottom: 3px;
}
.ms-summary-grid strong {
  font-size: 13.5px;
  color: var(--gray-900);
}

/* Completion confirmation */
.ms-completion-confirm {
  text-align: center;
  padding: 24px 16px;
  color: var(--ct-065f46, #065f46);
}
.ms-completion-confirm svg {
  color: var(--ct-16a34a, #16a34a);
  margin-bottom: 10px;
}
.ms-completion-confirm h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ct-065f46, #065f46);
}
.ms-completion-confirm p {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
}

/* Tighten existing .ms-stop-num positioning */
.ms-stop-summary .ms-stop-num {
  margin-top: 0;
}

/* Mobile breakpoint for materials grid */
@media (max-width: 520px) {
  .ms-mat-add {
    grid-template-columns: 1fr;
  }
  .ms-summary-grid {
    grid-template-columns: 1fr;
  }
  .ms-step {
    min-width: 50px;
  }
  .ms-step-label {
    font-size: 9.5px;
  }
}

/* ══════════════════════════════════════════════════════════
   TICKET PANEL — Materials extensions + Net Revenue
══════════════════════════════════════════════════════════ */
.tsp-mat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-base);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.tsp-mat-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.tsp-mat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}
.tsp-mat-size {
  font-size: 11px;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 500;
}
.tsp-mat-tech {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  padding: 1px 7px;
  border-radius: 999px;
}
.tsp-mat-qty {
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
}
.tsp-mat-unit {
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
}
.tsp-mat-line {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

/* Read-only money displays (Material Cost, Net Revenue) */
.tsp-readonly-money {
  padding: 9px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-700);
}
.tsp-readonly-hint {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--gray-400);
  margin-left: 4px;
}
.tsp-net-revenue {
  padding: 11px 14px;
  background: var(--cb-f0fdf4, #f0fdf4);
  border: 1px solid var(--cd-bbf7d0, #bbf7d0);
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 800;
  color: var(--ct-166534, #166534);
  letter-spacing: -0.01em;
}
.tsp-net-revenue.tsp-net-negative {
  background: var(--red-light);
  border-color: var(--cd-fecaca, #fecaca);
  color: var(--ct-991b1b, #991b1b);
}
.tsp-net-revenue.tsp-net-positive {
  background: var(--cb-f0fdf4, #f0fdf4);
  border-color: var(--cd-bbf7d0, #bbf7d0);
  color: var(--ct-166534, #166534);
}

/* ── Service Config — Grouped Materials List ───────────────── */
#svcfg-mat-grouped-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

/* Group block container */
.svcfg-mat-group-block {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-base);
}
.svcfg-mat-group-block.svcfg-mat-drop-into {
  border-color: var(--cd-2563eb, #2563eb);
  box-shadow: 0 0 0 2px #dbeafe;
}
.svcfg-mat-ungrouped {
  border-style: dashed;
}
.svcfg-mat-ungrouped .svcfg-mat-group-hdr {
  background: var(--gray-50);
}

/* Group header */
.svcfg-mat-group-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  min-height: 36px;
}
.svcfg-mat-ghdr-label {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.svcfg-mat-ghdr-name {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  border-radius: 4px;
  min-width: 0;
}
.svcfg-mat-ghdr-name:hover {
  background: var(--gray-200);
}
.svcfg-mat-ghdr-name:focus {
  background: var(--surface-base);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  box-shadow: 0 0 0 2px #2563eb;
}
.svcfg-mat-ghdr-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  background: var(--gray-200);
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.svcfg-mat-ghdr-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.svcfg-mat-ghdr-add {
  color: var(--gray-400);
}
.svcfg-mat-ghdr-add:hover {
  color: var(--ct-2563eb, #2563eb);
  background: var(--cb-dbeafe, #dbeafe);
}
.svcfg-mat-ghdr-drag {
  color: var(--gray-300);
  cursor: grab;
  flex-shrink: 0;
}

/* Items container */
.svcfg-mat-group-items {
  display: flex;
  flex-direction: column;
}
.svcfg-mat-group-empty {
  padding: 10px 14px 10px 30px;
  font-size: 12px;
  color: var(--gray-400);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Individual material row */
.svcfg-mat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--surface-base);
  transition: background 80ms;
}
.svcfg-mat-item:last-child {
  border-bottom: none;
}
.svcfg-mat-item:hover {
  background: var(--gray-50);
}
.svcfg-mat-item.svcfg-mat-dragging {
  opacity: 0.35;
}
.svcfg-mat-item.svcfg-mat-drop-before {
  border-top: 2px solid var(--cd-2563eb, #2563eb);
}

/* Drag handle */
.svcfg-mat-drag {
  cursor: grab;
  color: var(--gray-300);
  flex-shrink: 0;
  padding: 2px 3px;
  border-radius: 3px;
  line-height: 0;
}
.svcfg-mat-drag:hover {
  color: var(--gray-500);
  background: var(--gray-100);
}

/* Material name + meta */
.svcfg-mat-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
  min-width: 0;
}
.svcfg-mat-size {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.svcfg-mat-cost {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
}
.svcfg-mat-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.svcfg-row-size-empty {
  color: var(--gray-300);
  font-weight: 500;
}

/* Calc chips (reused by ticket panel too) */
.svcfg-mat-calc-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  white-space: nowrap;
  flex-shrink: 0;
}
.svcfg-mat-chip-job {
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-065f46, #065f46);
  border-color: var(--cd-a7f3d0, #a7f3d0);
}

/* Footer: Create Group + Add Material buttons */
.svcfg-mat-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}

/* Material modal calc section */
.svcfg-mat-calc-hdr {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 12px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}
.svcfg-mat-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.svcfg-mat-calc-note {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── Pricebook material modal ─────────────────────────────── */
.svcfg-mat-modal-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svcfg-mat-sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 10px;
}
.svcfg-mat-sec-hdr {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 8px 0 2px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
}
.svcfg-mat-opt {
  color: var(--gray-400);
  font-weight: 500;
  font-size: 11px;
}
.svcfg-mat-field-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin: 4px 0 0;
  line-height: 1.4;
}
.svcfg-mat-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  line-height: 1.4;
}
.svcfg-mat-toggle input {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Advanced options disclosure (price method, description, notes, tech toggles) */
.svcfg-mat-advanced {
  border-top: 1px solid var(--gray-100);
  margin-top: 8px;
  padding-top: 2px;
}
.svcfg-mat-adv-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  padding: 11px 0 7px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}
.svcfg-mat-adv-summary::-webkit-details-marker {
  display: none;
}
.svcfg-mat-adv-summary::before {
  content: '▸';
  font-size: 9px;
  color: var(--gray-400);
  transition: transform 0.15s;
}
.svcfg-mat-advanced[open] > .svcfg-mat-adv-summary {
  color: var(--gray-700);
}
.svcfg-mat-advanced[open] > .svcfg-mat-adv-summary::before {
  transform: rotate(90deg);
}
.svcfg-mat-adv-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 4px;
}
.svcfg-mat-adv-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Tier / option rows */
.svcfg-mat-tier-head,
.svcfg-mat-tier-row {
  display: grid;
  grid-template-columns: 90px 1fr 32px;
  gap: 8px;
  align-items: center;
}
.svcfg-mat-option-row,
.svcfg-mat-options-panel .svcfg-mat-tier-head {
  display: grid;
  grid-template-columns: 1fr 70px 1fr 32px;
  gap: 8px;
  align-items: center;
}
#svcfg-mat-options-panel .svcfg-mat-tier-head {
  grid-template-columns: 1fr 70px 1fr 32px;
}
.svcfg-mat-tier-head {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.svcfg-mat-tier-row,
.svcfg-mat-option-row {
  margin-bottom: 6px;
}
.svcfg-mat-tier-row input,
.svcfg-mat-option-row input {
  width: 100%;
}
.svcfg-mat-base-cost {
  margin-bottom: 10px;
}

/* Measurement-type chip in the grouped list */
.svcfg-mat-meas-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.svcfg-mat-meas-single {
  background: var(--gray-100);
  color: var(--gray-600);
}
.svcfg-mat-meas-liquid {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
}
.svcfg-mat-meas-area {
  background: var(--cb-dcfce7, #dcfce7);
  color: var(--ct-166534, #166534);
}
.svcfg-mat-meas-custom {
  background: #f3e8ff;
  color: #6b21a8;
}
.svcfg-mat-flag {
  font-size: 11px;
  margin-left: 5px;
  opacity: 0.7;
}

/* ── Tech workflow material entry ─────────────────────────── */
.ms-mat-input-area {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ms-mat-unit-toggle {
  display: inline-flex;
  border: 1px solid var(--gray-300);
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
}
.ms-unit-opt {
  border: none;
  background: var(--surface-base);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  text-transform: uppercase;
  min-width: 40px;
}
.ms-unit-opt + .ms-unit-opt {
  border-left: 1px solid var(--gray-300);
}
.ms-unit-opt.active {
  background: var(--accent, #2563eb);
  color: #fff;
}
.ms-mat-auto-note {
  width: 100%;
  font-size: 12px;
  color: var(--gray-600);
  background: var(--cb-dcfce7, #dcfce7);
  border: 1px solid var(--cd-bbf7d0, #bbf7d0);
  border-radius: 6px;
  padding: 5px 9px;
}
.ms-mat-auto-note.ms-mat-auto-warn {
  background: var(--cb-fef3c7, #fef3c7);
  border-color: var(--cd-fde68a, #fde68a);
  color: var(--ct-92400e, #92400e);
}
.ms-mat-fullkit-btn {
  border: 1px solid var(--gray-300);
  background: var(--surface-base);
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
}
.ms-mat-fullkit-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

/* Material Calculation Rules accordion */
.svcfg-mcr-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.svcfg-mcr-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 10px;
  background: var(--gray-50);
  border-radius: 6px;
  margin-bottom: 2px;
}
.svcfg-mcr-row:hover {
  background: var(--gray-100);
}
.svcfg-mcr-jt {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-900);
  padding-top: 1px;
}
.svcfg-mcr-mats {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.6;
}
.svcfg-mcr-none {
  font-style: italic;
  color: var(--gray-400);
}
.svcfg-mcr-day-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--ct-0369a1, #0369a1);
  background: var(--cb-e0f2fe, #e0f2fe);
  border: 1px solid var(--cd-bae6fd, #bae6fd);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Rule editor modal */
.svcfg-mcr-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.svcfg-mcr-entry {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}
.svcfg-mcr-entry-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svcfg-mcr-entry-mat {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-900);
}
.svcfg-mcr-entry-info {
  font-size: 11px;
  color: var(--gray-400);
}
.svcfg-mcr-empty {
  font-size: 12px;
  color: var(--gray-400);
  font-style: italic;
  padding: 6px 0;
}
.svcfg-mcr-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.svcfg-mcr-add-row select {
  flex: 1;
  min-width: 0;
}
.mcr-day-sel {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--gray-200);
}
.mcr-flake-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--gray-500);
  cursor: pointer;
  flex-wrap: wrap;
}
.mcr-flake-label input {
  accent-color: var(--blue);
}
.mcr-flake-alt {
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid var(--gray-200);
}

/* Day group headers in auto-calc */
.tsp-auto-mat-day-hdr {
  font-size: 11px;
  font-weight: 700;
  color: var(--ct-0369a1, #0369a1);
  background: var(--cb-e0f2fe, #e0f2fe);
  padding: 4px 10px;
  border-bottom: 1px solid var(--cd-bae6fd, #bae6fd);
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD — Pending Review widget
══════════════════════════════════════════════════════════ */
.db-pending-review {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px;
  cursor: pointer;
  height: 100%;
}
.db-pending-review:hover {
  background: var(--gray-50);
  border-radius: var(--radius);
}
.db-pending-active .db-pr-count {
  color: var(--ct-d97706, #d97706);
}
.db-pr-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.db-pr-count {
  font-size: 36px;
  font-weight: 800;
  color: var(--gray-400);
  letter-spacing: -0.02em;
  line-height: 1;
}
.db-pr-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
.db-pr-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.db-pr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--gray-700);
  padding: 4px 8px;
  background: var(--cb-fef3c7, #fef3c7);
  border-radius: var(--radius);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
}
.db-pr-name {
  font-weight: 600;
  color: var(--ct-92400e, #92400e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-pr-tech {
  font-size: 11px;
  color: var(--ct-b45309, #b45309);
  flex-shrink: 0;
  margin-left: 6px;
}
.db-pr-more {
  font-size: 11px;
  color: var(--gray-400);
  font-style: italic;
  padding: 2px 8px;
}

/* ══════════════════════════════════════════════════════════
   TICKET PANEL — DISPLAY MODES
══════════════════════════════════════════════════════════ */

/* ── Modal backdrop (center modal mode) ── */
#tsp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.55);
  z-index: 498;
  animation: tsp-fade-in 0.18s ease;
}
#tsp-modal-backdrop[hidden] {
  display: none !important;
}
@keyframes tsp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Mode selector dropdown in panel header ── */
.tsp-mode-selector {
  position: relative;
  flex-shrink: 0;
  margin-right: 2px;
}
.tsp-mode-dd-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  background: var(--gray-50);
  cursor: pointer;
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
  font-family: inherit;
}
.tsp-mode-dd-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
  border-color: var(--gray-300);
}
.tsp-mode-dd-menu {
  /* Fixed so it escapes any overflow:hidden ancestor (panel inner container) */
  position: fixed;
  z-index: 99999;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.tsp-mode-dd-menu[hidden] {
  display: none;
}
.tsp-mode-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  transition:
    background 0.1s,
    color 0.1s;
  font-family: inherit;
}
.tsp-mode-dd-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}
.tsp-mode-dd-item.active {
  background: rgba(59, 130, 246, 0.22);
  color: var(--ct-60a5fa, #60a5fa);
  font-weight: 600;
}

/* ── Move to Group — header button + dropdown (compact, all panel modes) ── */
.tsp-move-group-wrap {
  position: relative;
  flex-shrink: 0;
}
.tsp-move-group-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  color: var(--gray-500);
  transition:
    background 0.15s,
    color 0.15s;
  font-family: inherit;
}
.tsp-move-group-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.tsp-move-group-menu {
  /* Fixed so it escapes any overflow:hidden ancestor (panel inner container) */
  position: fixed;
  z-index: 99999;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 4px;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.tsp-move-group-menu[hidden] {
  display: none;
}
.tsp-move-group-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--gray-500);
}
.tsp-move-group-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  color: var(--gray-800);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  transition:
    background 0.1s,
    color 0.1s;
  font-family: inherit;
}
.tsp-move-group-item:hover {
  background: var(--gray-100);
}
.tsp-move-group-item.is-current {
  background: var(--gray-50);
  font-weight: 600;
  cursor: default;
}
.tsp-move-group-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.tsp-move-group-check {
  margin-left: auto;
  color: var(--blue);
  font-weight: 700;
  font-size: 11px;
}

/* ── Activity Log: header clock button + audit-trail overlay ─────────────── */
/* The clock owns the auto-margin so it + the move-group button form the far-right
   cluster in docked / floating / modal. In fullscreen the Next Ticket button owns the
   auto-margin instead, so the clock falls inline just left of move-group there. */
.tsp-activity-btn {
  flex-shrink: 0;
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  color: var(--gray-500);
  transition:
    background 0.15s,
    color 0.15s;
  font-family: inherit;
}
.tsp-activity-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.tsp-activity-btn[hidden] {
  display: none;
}
.tsp-mode-fullscreen .tsp-activity-btn {
  margin-left: 4px;
}

/* Overlay fills the panel inner at its current size — the panel never resizes/repositions. */
.tsp-inner {
  position: relative;
}
.tsp-activity-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  border-radius: inherit;
}
.tsp-activity-overlay[hidden] {
  display: none;
}
.tsp-activity-hdr {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-200);
}
.tsp-activity-back {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--gray-600);
  transition:
    background 0.15s,
    color 0.15s;
}
.tsp-activity-back:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.tsp-activity-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: 0.01em;
}
.tsp-activity-count {
  font-size: 11px;
  color: var(--gray-500);
}
.tsp-activity-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 12px;
}

/* Audit rows — dense + scannable; user vs. system visually distinct (no social-feed look). */
.al-empty {
  padding: 28px 16px;
  font-size: 12px;
  color: var(--gray-500);
  text-align: center;
}
.al-day-sep {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
}
.al-entry {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 9px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.al-entry:hover {
  background: var(--gray-50);
}
.al-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.al-icon svg {
  width: 12px;
  height: 12px;
}
.al-entry.al-user .al-icon {
  background: var(--blue-50, #eff6ff);
  color: var(--blue, #2563eb);
}
.al-entry.al-system .al-icon {
  background: var(--gray-200);
  color: var(--gray-600);
}
.al-main {
  min-width: 0;
}
.al-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.35;
}
.al-entry.al-system .al-action {
  font-weight: 500;
}
.al-delta {
  font-size: 11.5px;
  color: var(--gray-600);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.al-from,
.al-to {
  max-width: 100%;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.al-from {
  background: var(--gray-100);
  color: var(--gray-700);
  text-decoration: line-through;
  opacity: 0.85;
}
.al-to {
  background: var(--blue-50, #eff6ff);
  color: var(--blue, #1d4ed8);
}
.al-arrow {
  color: var(--gray-400);
  flex-shrink: 0;
}
.al-detail {
  font-size: 11.5px;
  color: var(--gray-600);
  margin-top: 3px;
}
.al-meta {
  font-size: 11px;
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.al-actor {
  font-weight: 600;
  color: var(--gray-700);
}
.al-entry.al-system .al-actor {
  color: var(--gray-500);
  font-weight: 600;
}
.al-time {
  color: var(--gray-400);
}
.al-sys-badge {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Profile / link icon — inline in line1-right ── */
.tsp-profile-btn {
  position: static;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s;
  flex-shrink: 0;
}
.tsp-profile-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--blue);
}
.tsp-profile-btn[hidden] {
  display: none;
}

/* ── Back button (fullscreen mode only) ── */
.tsp-back-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.tsp-back-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.tsp-back-btn[hidden] {
  display: none;
}

/* ── Floating corner resize handle ── */
.tsp-float-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 54;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 40%,
    rgba(255, 255, 255, 0.35) 55%,
    transparent 55%,
    transparent 70%,
    rgba(255, 255, 255, 0.35) 70%
  );
  border-radius: 0 0 10px 0;
}
.tsp-float-resize[hidden] {
  display: none;
}

/* ════════════════════════════════════════════
   MODE 1 — DOCKED RIGHT (default, unchanged)
════════════════════════════════════════════ */
.tl-side-panel.tsp-mode-docked {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 10px 0 0 10px;
}

/* ════════════════════════════════════════════
   MODE 2 — FLOATING WINDOW
════════════════════════════════════════════ */
.tl-side-panel.tsp-mode-floating {
  position: fixed;
  border-radius: 12px;
  border: 1px solid var(--gray-300);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.28),
    0 2px 10px rgba(0, 0, 0, 0.16);
  overflow: visible;
  z-index: 500;
  min-width: 360px;
  min-height: 300px;
}
.tl-side-panel.tsp-mode-floating .tsp-inner {
  /* 11px = outer border-radius (12px) − border-width (1px), so content clips flush
     with the inner edge of the border — eliminates the corner-gap rendering artifact */
  border-radius: 11px;
}
.tl-side-panel.tsp-mode-floating .tsp-header {
  border-radius: 11px 11px 0 0;
  cursor: grab;
  user-select: none;
}
.tl-side-panel.tsp-mode-floating .tsp-header:active {
  cursor: grabbing;
}
/* Don't interfere with button clicks */
.tl-side-panel.tsp-mode-floating .tsp-header button,
.tl-side-panel.tsp-mode-floating .tsp-header input {
  cursor: pointer;
}
/* Resize handle not used in floating mode (replaced by corner) */
.tl-side-panel.tsp-mode-floating .tsp-resize-handle {
  display: none;
}
/* No slide-in animation when floating (already positioned) */
.tl-side-panel.tsp-mode-floating:not([hidden]) {
  animation: none;
}

/* ════════════════════════════════════════════
   MODE 3 — CENTER MODAL
════════════════════════════════════════════ */
.tl-side-panel.tsp-mode-modal {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 75vw !important;
  height: 85vh !important;
  border-radius: 14px;
  border: none;
  box-shadow:
    0 20px 80px rgba(0, 0, 0, 0.38),
    0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 500;
  overflow: visible;
}
.tl-side-panel.tsp-mode-modal .tsp-inner {
  border-radius: 14px;
}
.tl-side-panel.tsp-mode-modal .tsp-header {
  border-radius: 14px 14px 0 0;
}
.tl-side-panel.tsp-mode-modal .tsp-resize-handle {
  display: none;
}
.tl-side-panel.tsp-mode-modal .tsp-collapse-btn {
  display: none;
}
/* Modal entrance animation */
.tl-side-panel.tsp-mode-modal:not([hidden]) {
  animation: tsp-modal-in 0.2s ease;
}
@keyframes tsp-modal-in {
  from {
    opacity: 0;
    transform: translate(-50%, -47%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ════════════════════════════════════════════
   MODE 4 — FULL SCREEN
════════════════════════════════════════════ */
.tl-side-panel.tsp-mode-fullscreen {
  position: absolute;
  inset: 0;
  width: auto !important;
  height: auto !important;
  border-radius: 0;
  border-left: none;
  z-index: 60;
  box-shadow: none;
  animation: none !important;
}
.tl-side-panel.tsp-mode-fullscreen .tsp-inner {
  border-radius: 0;
}
.tl-side-panel.tsp-mode-fullscreen .tsp-header {
  border-radius: 0;
}
.tl-side-panel.tsp-mode-fullscreen .tsp-resize-handle {
  display: none;
}
.tl-side-panel.tsp-mode-fullscreen .tsp-collapse-btn {
  display: none;
}
/* Full-screen entrance */
.tl-side-panel.tsp-mode-fullscreen:not([hidden]) {
  animation: tsp-fs-in 0.15s ease;
}
@keyframes tsp-fs-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Container query: 3-column layout in fullscreen / very wide modal ── */
@container tspanel (min-width: 860px) {
  .tsp-grid-2col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Adjust inner scroll height for floating/modal/fullscreen ── */
.tl-side-panel.tsp-mode-floating .tsp-body,
.tl-side-panel.tsp-mode-modal .tsp-body {
  flex: 1;
  overflow-y: auto;
}
.tl-side-panel.tsp-mode-fullscreen .tsp-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 32px;
}
.tl-side-panel.tsp-mode-fullscreen .tsp-section {
  padding: 16px 18px 18px;
  gap: 12px 16px;
}
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane {
  max-width: none;
}
/* Fullscreen tab bar: no wrapping, tabs stretch evenly across the full width */
.tsp-mode-fullscreen .tsp-tabs {
  flex-wrap: nowrap;
  gap: 0;
  border-bottom: 1px solid var(--gray-200);
}
.tsp-mode-fullscreen .tsp-tab {
  flex: 1;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  padding: 8px 12px;
}

/* ── Next Ticket button (fullscreen only) ── */
.tsp-next-ticket-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid var(--primary, #2563eb);
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.tsp-next-ticket-btn:hover {
  background: var(--cb-1d4ed8, #1d4ed8);
  border-color: var(--cd-1d4ed8, #1d4ed8);
}
.tsp-next-ticket-btn[hidden] {
  display: none !important;
}

/* ── All-caught-up popup (anchored inside header-util) ── */
.tsp-caught-up-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  background: var(--surface-base);
  border: 1px solid var(--gray-200, var(--gray-200));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  text-align: center;
}
.tsp-caught-up-popup[hidden] {
  display: none !important;
}
.tsp-caught-up-icon {
  color: var(--ct-16a34a, #16a34a);
}
.tsp-caught-up-msg {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800, var(--gray-800));
}
/* Make the header-util the positioning parent for the popup */
.tsp-header-util {
  position: relative;
}
/* In fullscreen mode the Next Ticket button floats to the far right of the header */
.tsp-mode-fullscreen .tsp-next-ticket-btn {
  margin-left: auto;
}

/* ── Floating panel stays visible over all views ── */
.tl-side-panel.tsp-mode-floating[hidden] {
  display: none !important;
}

/* ── Tag badge (legacy .tl-tag-badge — kept for compat) ──── */
.tl-tag-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--cb-ede9fe, #ede9fe);
  color: var(--ct-5b21b6, #5b21b6);
  vertical-align: middle;
  line-height: 1.6;
}

/* ── Account tags (read-only, from linked client profile) ─── */
.tsp-account-tags-display {
  padding: 6px 14px 2px;
}
.tsp-account-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tsp-account-tags-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  flex-shrink: 0;
}
.tsp-account-tag-pill {
  cursor: default;
  font-size: 10px;
  padding: 2px 8px;
}

/* ── Tags display — ticket panel Overview — interactive ───── */
.tsp-tags-display {
  padding: 6px 14px 2px;
}
.tsp-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tsp-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tsp-tag-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  color: inherit;
  transition: background 0.1s;
}
.tsp-tag-del:hover {
  background: rgba(0, 0, 0, 0.3);
}
.tsp-tag-add-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px dashed var(--gray-300);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.tsp-tag-add-btn:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

/* Tag selector dropdown (appended to body) */
.tsp-tag-dd {
  position: fixed;
  z-index: 2200;
  min-width: 180px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 4px;
  font-size: 13px;
}
.tsp-tag-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-800);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.tsp-tag-dd-item:hover {
  background: var(--gray-50);
}
.tsp-tag-dd-item.is-active {
  font-weight: 600;
}
.tsp-tag-dd-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tsp-tag-check {
  margin-left: auto;
  font-size: 11px;
}

/* ── Photo drop zone ──────────────────────────────────────── */
.tsp-photo-dropzone {
  border: 2px dashed var(--gray-300, var(--gray-300));
  border-radius: 8px;
  padding: 22px 16px 18px;
  text-align: center;
  cursor: pointer;
  color: var(--gray-400, var(--gray-400));
  transition:
    border-color 0.15s,
    background 0.15s;
  user-select: none;
}
.tsp-photo-dropzone:hover,
.tsp-photo-dropzone.tsp-dropzone-over {
  border-color: var(--blue, #2563eb);
  background: rgba(37, 99, 235, 0.04);
  color: var(--blue, #2563eb);
}
.tsp-photo-dropzone svg {
  display: block;
  margin: 0 auto 8px;
  opacity: 0.5;
}
.tsp-photo-dropzone p {
  margin: 4px 0;
  font-size: 13px;
}
.tsp-photo-dropzone .tsp-dropzone-hint {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}
.tsp-dropzone-notice {
  font-size: 11px;
  color: var(--gray-400, var(--gray-400));
  margin: 6px 0 0;
  padding: 4px 8px;
  background: var(--gray-50, var(--gray-50));
  border-radius: 4px;
  border: 1px solid var(--gray-200, var(--gray-200));
}

/* ── Photo thumbnail with remove button ───────────────────── */
.tsp-photo-thumb-wrap {
  position: relative;
  display: inline-block;
}
.tsp-photo-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.tsp-photo-thumb-wrap:hover .tsp-photo-remove {
  opacity: 1;
}
.tsp-photo-remove:hover {
  background: var(--cb-dc2626, #dc2626);
}

/* ── Customer Time Windows Settings ── */
.ctw-overrides-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ctw-override-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}
.ctw-override-label {
  font-size: 13px;
  color: var(--gray-700);
  flex: 1;
  min-width: 120px;
}
.ctw-override-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-500);
}
.ctw-override-dur-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.ctw-override-dur-wrap input {
  width: 56px;
  padding: 3px 6px;
  font-size: 12px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
}
.ctw-override-dur-wrap span {
  color: var(--gray-500);
}

/* ── Confirm Route — Time Windows table ── */
.crm-tw-section {
  margin-top: 16px;
}
.crm-tw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.crm-tw-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-700);
}
.crm-tw-reset-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-light);
  border: 1px solid var(--cd-bfdbfe, #bfdbfe);
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
}
.crm-tw-reset-btn:hover {
  background: var(--cb-bfdbfe, #bfdbfe);
}
.crm-tw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.crm-tw-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.crm-tw-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.crm-tw-table tr:last-child td {
  border-bottom: none;
}
.crm-tw-input {
  width: 100%;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-family: inherit;
  color: var(--gray-700);
}
.crm-tw-input.crm-tw-custom {
  border-color: var(--cd-f59e0b, #f59e0b);
  background: var(--amber-light);
}
.crm-tw-input.crm-tw-changed {
  border-color: var(--cd-f59e0b, #f59e0b);
  background: var(--amber-light);
}
/* Responsive grid — never scrolls horizontally. One tech is a single full-width
   column; two or more techs use a two-column grid so the third and later techs wrap
   onto the next row. All time-window data stays visible without scroll or truncation. */
.crm-tw-cols {
  display: grid;
  gap: 16px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.crm-tw-cols.crm-tw-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.crm-tw-col {
  min-width: 0;
}
.crm-tw-col-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-800);
  padding: 3px 0 6px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--gray-300);
}
.crm-tw-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--gray-500);
  line-height: 1.4;
  padding: 8px 10px;
  background: var(--gray-50);
  border-radius: 6px;
  border: 1px solid var(--gray-200);
}

/* ── Dispatch board — job block time window ── */
.jb-time-window {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: inherit;
  opacity: 0.75;
  white-space: nowrap;
  /* Truncate with an ellipsis (was overflow:visible, which let the time window
     clip mid-character in narrow blocks). */
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  line-height: 1.2;
}
.jb-tw-label {
  font-weight: 700;
  opacity: 0.85;
}

/* ── My Schedule — arrival time window ── */
.ms-arrive-window {
  font-weight: 600;
  color: var(--blue);
  font-size: 13px;
}

/* ── Account Attachment — Ticket Panel ── */
.tsp-account-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--amber-light);
  border: 1px solid var(--cd-fde68a, #fde68a);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--ct-78350f, #78350f);
}
.tsp-account-banner[hidden] {
  display: none;
}
.tsp-acct-banner-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.tsp-acct-banner-text {
  flex: 1;
  line-height: 1.4;
}
.tsp-acct-banner-note {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ct-92400e, #92400e);
  font-style: italic;
}
.tsp-acct-banner-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

/* Account section — compact single-row display */
.tsp-section--compact {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  row-gap: 6px !important;
}
.tsp-account-linked {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tsp-account-icon {
  width: 14px;
  height: 14px;
  color: var(--blue);
  flex-shrink: 0;
}
.tsp-account-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-800);
  flex: 1;
}
.tsp-account-btns {
  display: flex;
  gap: 5px;
}
.tsp-account-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-500);
}
.tsp-account-none-label {
  flex: 1;
  font-size: 12px;
}

/* Keyboard shortcuts settings */
.kb-shortcuts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.kb-shortcuts-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kb-shortcuts-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
}
.kb-key-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid var(--gray-300);
  background: var(--gray-50);
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
  color: var(--gray-800);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.kb-key-input:focus,
.kb-key-input.recording {
  outline: none;
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}
.kb-shortcuts-save {
  margin-top: 16px;
}

/* Account search modal */
.acct-search-results {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface-base);
}
.acct-search-hint {
  padding: 14px;
  font-size: 12px;
  color: var(--gray-500);
  text-align: center;
  margin: 0;
}
.acct-search-result {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.1s;
}
.acct-search-result:last-child {
  border-bottom: none;
}
.acct-search-result:hover {
  background: var(--gray-50);
}
.acct-search-result.selected {
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
}
.acct-sr-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}
.acct-sr-meta {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}
.acct-sr-addr {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}

/* ── Route Preview Map Overlay ────────────────────────────── */
.route-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(24, 24, 27, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.route-preview-overlay[hidden] {
  display: none;
}
.route-preview-card {
  background: var(--surface-base);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  height: 560px;
  overflow: hidden;
}
.route-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.route-preview-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}
.route-preview-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.route-preview-close:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}
.route-preview-map-container {
  flex: 1;
  position: relative;
  background: var(--gray-100);
}

/* ── Backfill Modal ────────────────────────────────────────── */
/* Cap the entire modal at 90vh and lay it out as a flex column so the
   modal-body absorbs the remaining space and scrolls — when the Maps-fallback
   warning banner is present it consumes a fixed slice off the top of the
   modal, but the body still scrolls and stays fully reachable. */
.backfill-modal {
  max-width: 920px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.backfill-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 0;
}

.backfill-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.backfill-toolbar-label {
  font-size: 13px;
  color: var(--gray-600);
  font-weight: 600;
}
.backfill-toolbar #backfill-location-filter {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--surface-base);
}
.backfill-toolbar-status {
  margin-left: auto;
  font-size: 12px;
  color: var(--gray-500);
}

#backfill-body {
  padding: 16px 20px;
}
.backfill-empty {
  color: var(--gray-400);
  font-size: 13px;
  text-align: center;
  padding: 32px 16px;
}

.backfill-section {
  margin-bottom: 18px;
}
.backfill-section-hdr {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  border-radius: 6px 6px 0 0;
  color: white;
}
.backfill-hdr-asap {
  background: var(--cb-d97706, #d97706);
}
.backfill-hdr-green {
  background: var(--cb-059669, #059669);
}
.backfill-hdr-yellow {
  background: #ca8a04;
}
.backfill-section-body {
  border: 1px solid var(--gray-200);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.backfill-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
}
.backfill-row:last-child {
  border-bottom: none;
}
.backfill-row-main {
  flex: 1;
  min-width: 0;
}
.backfill-row-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.backfill-cust {
  color: var(--gray-900);
}
.backfill-row-line2 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12px;
  color: var(--gray-500);
}
.backfill-addr {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.backfill-source-date {
  font-weight: 600;
  color: var(--gray-700);
}
.backfill-source-unsched {
  font-style: italic;
  color: var(--gray-500);
}
.backfill-class-badge {
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}
/* Backfill row — account tags line */
.backfill-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

/* Backfill row — phone call button (blue) */
.bf-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s;
}
.bf-call-btn:hover {
  background: var(--blue-dark);
}

/* Backfill row — open customer profile button */
.bf-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.bf-profile-btn:hover {
  background: var(--blue-light);
  color: var(--blue);
  border-color: var(--cd-bfdbfe, #bfdbfe);
}

.backfill-row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.backfill-tech-sel {
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--surface-base);
  max-width: 240px;
}
.backfill-act-btn {
  padding: 6px 12px;
  font-size: 12px;
}

.backfill-section-red-toggle {
  text-align: center;
  padding-top: 4px;
}
.backfill-red-toggle-btn {
  width: 100%;
}
.backfill-red-list .backfill-row {
  background: var(--red-light);
}

/* ── Backfill Confirm Modal ────────────────────────────────── */
.backfill-confirm-modal {
  max-width: 1000px;
}
.backfill-confirm-modal .modal-body {
  max-height: 65vh;
  overflow-y: auto;
  padding: 16px 20px;
}
.bfc-intro {
  padding: 0 0 12px 0;
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.5;
}
.bfc-day-panel {
  margin-bottom: 18px;
}
.bfc-panel-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--gray-800);
}
.bfc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bfc-compare-col {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 8px;
}
.bfc-col-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin-bottom: 6px;
}
.bfc-compare-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.bfc-compare-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--gray-100);
}
.bfc-notify-note {
  padding: 10px 12px;
  background: var(--cb-fef3c7, #fef3c7);
  border-left: 3px solid var(--cd-d97706, #d97706);
  border-radius: 4px;
  font-size: 13px;
  color: var(--gray-800);
  margin-top: 8px;
}

.backfill-maps-warn {
  padding: 8px 20px;
  background: var(--cb-fef3c7, #fef3c7);
  border-bottom: 1px solid var(--cd-fcd34d, #fcd34d);
  font-size: 12px;
  color: var(--ct-78350f, #78350f);
  line-height: 1.4;
}

/* ── Route Optimization Tab ─────────────────────────────── */
#sub-optimize {
  padding: 16px 20px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

.opt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.opt-toolbar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opt-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.opt-select,
.opt-date {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--surface-base);
  color: var(--gray-800);
  font-size: 13px;
  min-width: 140px;
}
.opt-toolbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.opt-status {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 4px;
  min-height: 16px;
}

.opt-empty,
.opt-empty-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-500);
  font-size: 14px;
}
.opt-empty svg {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
  opacity: 0.7;
}
.opt-empty .opt-sub {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 6px;
}

.opt-banner {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.opt-banner-warn {
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
  color: var(--ct-78350f, #78350f);
}

.opt-section {
  margin-bottom: 20px;
}
.opt-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  color: white;
  font-weight: 700;
  font-size: 14px;
  border-radius: 6px 6px 0 0;
}
.opt-hdr-green {
  background: var(--cb-059669, #059669);
}
.opt-hdr-blue {
  background: var(--cb-2563eb, #2563eb);
}
.opt-section-saved {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.95;
}
.opt-section-sub {
  padding: 8px 14px;
  background: var(--gray-50);
  border-left: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  font-size: 12px;
  color: var(--gray-600);
}
.opt-section-body {
  border: 1px solid var(--gray-200);
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: var(--surface-base);
}

.opt-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.opt-card:last-child {
  border-bottom: none;
}
.opt-card-main {
  flex: 1;
  min-width: 0;
}
.opt-card-cust {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}
.opt-card-addr {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opt-card-move {
  font-size: 12px;
  color: var(--gray-700);
  margin-top: 6px;
}
.opt-arrow {
  color: var(--gray-400);
  margin: 0 4px;
}

.opt-card-impact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  min-width: 180px;
}
.opt-impact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.opt-impact-label {
  color: var(--gray-500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.opt-savings {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--ct-047857, #047857);
  margin-top: 2px;
}

.opt-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.opt-badge-green {
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-065f46, #065f46);
}
.opt-badge-yellow {
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
}
.opt-badge-red {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-991b1b, #991b1b);
}

.opt-card-actions {
  display: flex;
  align-items: center;
}
.opt-review-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
}

/* Run-all confirmation overlay */
.opt-runall-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.opt-runall-dialog {
  background: var(--surface-base);
  border-radius: 10px;
  padding: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.2));
}
.opt-runall-dialog h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--gray-900);
}
.opt-runall-dialog p {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.5;
  margin: 8px 0;
}
.opt-runall-confirmed {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--cb-fef3c7, #fef3c7);
  border-left: 3px solid var(--cd-d97706, #d97706);
  border-radius: 4px;
  font-size: 13px;
  color: var(--gray-800);
}
.opt-runall-confirmed ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.opt-runall-confirmed li {
  margin: 2px 0;
}
.opt-runall-note {
  font-weight: 600;
  color: var(--gray-800) !important;
  margin-top: 14px !important;
}
.opt-runall-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  flex-wrap: wrap;
}
.opt-runall-actions button {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
}
/* Overbooking warning list */
.opt-overbook-list {
  margin: 8px 0 0;
  padding-left: 20px;
}
.opt-overbook-list li {
  margin: 4px 0;
  font-size: 13px;
  color: var(--gray-800);
}

/* Threshold info icon */
.opt-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--gray-300);
  color: white;
  font-size: 9px;
  font-weight: 800;
  font-style: normal;
  text-transform: none;
  cursor: help;
  position: relative;
  line-height: 1;
}
.opt-info:hover,
.opt-info:focus {
  background: var(--gray-500);
  outline: none;
}
/* Inner span holds the tooltip text for JS to read — never rendered visually */
.opt-tooltip {
  display: none;
}

/* Portal tooltip rendered on <body> with position:fixed so no ancestor
   overflow:hidden can clip it */
.opt-info-tip-portal {
  position: fixed;
  z-index: 9999;
  background: var(--gray-900, #18181b);
  color: white;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 6px;
  width: 240px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  white-space: normal;
  /* JS sets top/left; transform centres horizontally and lifts above the icon */
  transform: translate(-50%, calc(-100% - 10px));
}
.opt-info-tip-portal[hidden] {
  display: none;
}
.opt-info-tip-portal::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gray-900, #18181b);
}

/* Drafted suggestion state */
.opt-pending-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.opt-card-drafted {
  background: var(--amber-light);
}
.opt-card-drafted .opt-card-cust {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Draft section (Commit All / Discard All) */
.opt-draft-section {
  border: 1px solid var(--cd-fcd34d, #fcd34d);
  border-radius: 8px;
  background: var(--surface-base);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.opt-draft-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--cb-fef3c7, #fef3c7);
  border-bottom: 1px solid var(--cd-fcd34d, #fcd34d);
}
.opt-draft-bar-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ct-78350f, #78350f);
}
.opt-draft-bar-actions {
  display: flex;
  gap: 8px;
}
.opt-draft-body {
  background: var(--surface-base);
}
.opt-draft-flag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--cb-e0f2fe, #e0f2fe);
  color: var(--ct-0369a1, #0369a1);
  border: 1px solid var(--cd-bae6fd, #bae6fd);
  font-size: 10px;
  font-weight: 700;
}
.opt-draft-remove {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

/* Proposed-change summary modal body */
.opt-sum-cust {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}
.opt-sum-addr {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 2px;
}
.opt-sum-move {
  font-size: 13px;
  color: var(--gray-700);
  margin-top: 12px;
}
.opt-sum-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}
.opt-sum-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opt-sum-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
}
.opt-sum-saved {
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--ct-047857, #047857);
}
.opt-sum-note {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.5;
  margin-top: 14px;
}

/* ── Live View ─────────────────────────────────────────── */
.live-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-300);
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.live-view-btn:hover:not(:disabled) {
  background: var(--gray-200);
  border-color: var(--gray-400);
}
.live-view-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.live-view-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-400);
  flex-shrink: 0;
  transition: background 0.2s;
}
.live-view-btn.live-on {
  border-color: var(--cd-dc2626, #dc2626);
  color: var(--ct-991b1b, #991b1b);
  background: var(--red-light);
}
.live-view-btn.live-on .live-view-dot {
  background: var(--cb-dc2626, #dc2626);
  animation: lv-pulse 1.5s ease-in-out infinite;
}
@keyframes lv-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
  }
}

/* Tech-level status badge + on-target chip in the gantt tech-name row */
.lv-tech-status,
.lv-target-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  white-space: nowrap;
}
.lv-tech-status-none {
  background: var(--gray-100);
  color: var(--gray-700);
}
.lv-tech-status-enroute {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
}
.lv-tech-status-onjob {
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-065f46, #065f46);
}
.lv-tech-status-between {
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
}
.lv-tech-status-done {
  background: #064e3b;
  color: #ffffff;
}
.lv-target-on {
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-065f46, #065f46);
}
.lv-target-behind {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-991b1b, #991b1b);
}
.lv-target-ahead {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
}

/* Job-block per-stop overlays */
.job-block.lv-stop-completed {
  opacity: 0.75;
}
.job-block.lv-stop-completed::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--cd-059669, #059669);
  border-radius: inherit;
  pointer-events: none;
}
.lv-stop-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-059669, #059669);
  color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 3;
}
.lv-stop-check svg {
  width: 14px;
  height: 14px;
}
.job-block.lv-stop-active {
  outline: 3px solid #10b981;
  outline-offset: 1px;
  animation: lv-active-pulse 1.8s ease-in-out infinite;
  z-index: 4;
}
@keyframes lv-active-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}

/* Updated-ETA badge on future stops */
.lv-eta-badge {
  position: absolute;
  bottom: 3px;
  right: 4px;
  padding: 2px 7px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}
.lv-eta-late {
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
}
.lv-eta-early {
  background: var(--cb-d1fae5, #d1fae5);
  color: var(--ct-065f46, #065f46);
  border: 1px solid var(--cd-6ee7b7, #6ee7b7);
}

/* Vertical "now" line across the timeline */
.lv-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cb-dc2626, #dc2626);
  box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
  z-index: 6;
  pointer-events: none;
}
.lv-now-line::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  background: var(--cb-dc2626, #dc2626);
  border-radius: 50%;
}
.lv-gantt .gantt {
  position: relative;
}

/* ── Load Up Block — Gantt ── */
.load-up-block {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--cb-f59e0b, #f59e0b), var(--cb-d97706, #d97706));
  z-index: 2;
  cursor: default;
  overflow: hidden;
  min-width: 28px;
  box-shadow: 0 1px 4px rgba(217, 119, 6, 0.35);
  container-type: inline-size;
}
.load-up-block-inner {
  padding: 4px 7px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  color: #fff;
  overflow: hidden;
}
/* The Load Up bar is TALL but can be very narrow (short duration). It holds only
   two short words plus a time range, so: put EACH word on its own line (the
   .lub-word spans are block-level) and scale the font to the bar width via the
   container's inline-size unit (cqi) so the whole word always fits without
   breaking mid-word. The bar has container-type:inline-size, so 1cqi = 1% of its
   width. The clamp keeps the font readable on wide bars and small on narrow ones. */
.load-up-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  line-height: 1.12;
  font-size: clamp(6px, 20cqi, 11px);
}
.lub-word {
  display: block; /* one word per line, always */
  white-space: nowrap; /* never break inside a word ("Loa"/"d") */
}
/* The time range is shown on every bar (no longer hidden on narrow ones). It
   wraps to as many lines as the tall bar allows and scales with the bar width. */
.load-up-time {
  opacity: 0.85;
  margin-top: 2px;
  line-height: 1.15;
  font-size: clamp(6px, 13cqi, 9px);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Settings — Load Up Block sub-section ── */
.svcfg-ts-divider {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-400);
  padding: 14px 0 4px 0;
  border-top: 1px solid var(--gray-100);
  margin-top: 6px;
}
.lub-sub-settings {
  padding-left: 0;
}
.lub-sub-settings.lub-sub-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.lub-num-inp {
  width: 68px !important;
  text-align: center;
}
.lub-days-wrap {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.lub-day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border-radius: 5px;
  border: 1.5px solid var(--gray-200);
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.12s;
  background: var(--surface-base);
  user-select: none;
}
.lub-day-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.lub-day-pill.lub-day-active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.lub-day-pill.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.lub-day-pill input {
  display: none;
}

/* ── Load Up Block — Tech View (My Schedule) ── */
.ms-load-up {
  margin: 0 0 0 0;
  border-bottom: 2px solid var(--gray-100);
  background: var(--amber-light);
  border-left: 4px solid var(--cd-f59e0b, #f59e0b);
}
.ms-load-up-done {
  background: var(--cb-f0fdf4, #f0fdf4);
  border-left-color: var(--cd-22c55e, #22c55e);
}
.ms-lub-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.ms-lub-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-f59e0b, #f59e0b);
  color: white;
  border-radius: 8px;
}
.ms-lub-icon-done {
  background: var(--cb-22c55e, #22c55e);
}
.ms-lub-title-wrap {
  flex: 1;
  min-width: 0;
}
.ms-lub-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}
.ms-lub-subtitle {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 1px;
}
.ms-lub-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
}
.ms-lub-badge-done {
  background: var(--cb-dcfce7, #dcfce7);
  color: var(--ct-15803d, #15803d);
  border-color: var(--cd-86efac, #86efac);
}
.ms-lub-body {
  padding: 0 16px 16px;
}
.ms-lub-intro {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.ms-lub-stop {
  margin-bottom: 16px;
  background: var(--surface-base);
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.ms-lub-stop-hdr {
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ms-lub-day-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--ct-1e40af, #1e40af);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}
.ms-lub-flake {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--amber-light);
}
.ms-lub-flake-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.ms-lub-flake-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
}
.ms-lub-flake-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ct-92400e, #92400e);
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
  padding: 2px 6px;
  border-radius: 10px;
}
.ms-lub-mat-list {
  padding: 6px 0;
}
.ms-lub-mat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-50);
  transition: background 0.1s;
}
.ms-lub-mat-item:last-child {
  border-bottom: none;
}
.ms-lub-mat-item:hover {
  background: var(--gray-50);
}
.ms-lub-mat-item input[type='checkbox'] {
  display: none;
}
.ms-lub-mat-check-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--gray-300);
  border-radius: 4px;
  background: var(--surface-base);
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-lub-mat-checked .ms-lub-mat-check-icon {
  background: var(--cb-22c55e, #22c55e);
  border-color: var(--cd-22c55e, #22c55e);
}
.ms-lub-mat-checked .ms-lub-mat-check-icon::after {
  content: '';
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
  display: block;
}
.ms-lub-mat-name {
  flex: 1;
  font-size: 13px;
  color: var(--gray-700);
}
.ms-lub-mat-size {
  font-size: 11px;
  color: var(--gray-400);
  margin-left: 4px;
}
.ms-lub-mat-manual {
  font-size: 10px;
  color: var(--ct-7c3aed, #7c3aed);
  background: var(--cb-ede9fe, #ede9fe);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 4px;
}
.ms-lub-mat-qty {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  white-space: nowrap;
}
.ms-lub-mat-checked .ms-lub-mat-name {
  text-decoration: line-through;
  color: var(--gray-400);
}
.ms-lub-empty {
  font-size: 12px;
  color: var(--gray-400);
  padding: 10px 12px;
}
.ms-lub-section-hdr {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ms-lub-photo-section {
  margin-top: 4px;
  margin-bottom: 16px;
}
.ms-lub-photo-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms-lub-photo-preview {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}
.ms-lub-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 7px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--gray-200);
  transition: background 0.12s;
}
.ms-lub-photo-btn:hover {
  background: var(--gray-200);
}
.ms-lub-actions {
  margin-top: 8px;
}
.ms-lub-complete-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 8px;
  border: none;
  background: var(--cb-16a34a, #16a34a);
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.ms-lub-complete-btn:hover {
  background: var(--cb-15803d, #15803d);
}

/* ── Global location filter bar ───────────────────────────── */
.global-loc-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.global-loc-filter[hidden] {
  display: none;
}
.global-loc-filter .glf-label,
.scb-left .glf-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-400);
  white-space: nowrap;
}
.global-loc-filter .glf-pills,
.scb-left .glf-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.global-loc-filter .glf-pill,
.scb-left .glf-pill {
  padding: 5px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.global-loc-filter .glf-pill:hover,
.scb-left .glf-pill:hover {
  background: var(--gray-200);
}
.global-loc-filter .glf-pill.active,
.scb-left .glf-pill.active {
  background: var(--cb-2563eb, #2563eb);
  border-color: var(--cd-2563eb, #2563eb);
  color: #ffffff;
}
.global-loc-filter .glf-all,
.scb-left .glf-all {
  padding: 5px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--surface-base);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.global-loc-filter .glf-all {
  margin-left: auto;
}
.global-loc-filter .glf-all.active,
.scb-left .glf-all.active {
  color: var(--gray-400);
}
.global-loc-filter .glf-all:hover,
.scb-left .glf-all:hover {
  background: var(--gray-100);
}

/* Dispatch board — location group header.
   Uses a flex-row wrapper (.gantt-loc-group-row) so the hdr cell is content-width
   only. This is required for position:sticky left:0 to work — if the element
   spans the full containing-block width there is no room to stick. The filler div
   fills the remaining row width with the same background so the full-width
   gray band appearance is preserved. */
.gantt-loc-group-row {
  display: flex;
  align-items: stretch;
  margin: 4px 0;
  border-top: 2px solid var(--gray-300);
}
.gantt-loc-group-filler {
  flex: 1;
  min-width: 0;
  background: var(--gray-50);
}
.gantt-loc-group-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--gray-50);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-600);
  position: sticky;
  left: 0;
  z-index: 4;
  flex-shrink: 0;
}
.gantt-loc-group-hdr .gantt-loc-group-addr {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray-400);
  font-size: 11px;
}

/* ── Locations settings ───────────────────────────────────── */
.loc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.loc-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}
.loc-reorder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.loc-move {
  width: 22px;
  height: 18px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 9px;
  cursor: pointer;
  line-height: 1;
}
.loc-move:hover:not(:disabled) {
  background: var(--gray-200);
}
.loc-move:disabled {
  opacity: 0.35;
  cursor: default;
}
.loc-fields {
  display: flex;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}
.loc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 160px;
}
.loc-field-addr {
  flex: 2;
  min-width: 240px;
}
.loc-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
}
.loc-field input {
  padding: 7px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 14px;
  color: var(--gray-800);
}
.loc-field input:focus {
  outline: none;
  border-color: var(--cd-2563eb, #2563eb);
  box-shadow: 0 0 0 2px #2563eb22;
}
.loc-del {
  align-self: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: var(--red-light);
  color: var(--ct-dc2626, #dc2626);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.loc-del:hover {
  background: var(--cb-fee2e2, #fee2e2);
}

/* ── People location filter + badge ───────────────────────── */
.people-loc-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
}
.people-loc-filter label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-400);
}
.people-loc-filter select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  color: var(--gray-800);
  background: var(--surface-base);
}
.people-loc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--blue-light);
  color: #4338ca;
  border: 1px solid #c7d2fe;
  font-size: 11px;
  font-weight: 600;
}
.pm-field-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--gray-400);
}

/* "Scheduling — from role" info card (person modal) — blue callout variant of
   .pm-section, shown when the assigned role has Technician Scheduling Settings on. */
.pm-section.pm-sched-info {
  background: var(--blue-light);
  border-color: var(--cd-bfdbfe, #bfdbfe);
}
.pm-sched-info-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  color: var(--ct-1d4ed8, #1d4ed8);
}
.pm-sched-info-head svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.pm-sched-info-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pm-sched-info-desc {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ct-1d4ed8, #1d4ed8);
}
/* Terminated ⇒ Inactive auto-coupling note */
.pm-term-note {
  margin: -4px 0 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--cb-fef3c7, #fef3c7);
  border: 1px solid var(--cd-fde68a, #fde68a);
  color: var(--ct-92400e, #92400e);
  font-size: 12px;
  line-height: 1.4;
}
[data-theme='dark'] .pm-section.pm-sched-info {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  border-color: color-mix(in srgb, var(--blue) 32%, transparent);
}
[data-theme='dark'] .pm-sched-info-head,
[data-theme='dark'] .pm-sched-info-desc {
  color: #93c5fd;
}
[data-theme='dark'] .pm-term-note {
  background: rgba(180, 83, 9, 0.18);
  border-color: rgba(180, 83, 9, 0.4);
  color: #fbbf24;
}

/* Administrative flag badge (People list) */
.people-admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--cb-fef3c7, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fde68a, #fde68a);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Administrative checkbox row (person + employee modals) */
.pm-admin-check,
.emp-admin-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.35;
}
.pm-admin-check input,
.emp-admin-check input {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Per-department role <select>s in the person modal */
.pm-deptrole-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

/* Department Roles config (People settings) */
.dept-roles-config {
  margin-top: 18px;
  border-top: 1px solid var(--gray-200);
  padding-top: 12px;
}
.dept-roles-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-700);
}
.dept-roles-hint {
  font-size: 12px;
  color: var(--gray-400);
  margin: 8px 0 12px;
}
.dept-roles-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.dept-roles-label {
  width: 120px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
}
.dept-roles-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}

/* ════════════════════════════════════════════════
   NOTIFICATION SETTINGS — Settings → Notifications
════════════════════════════════════════════════ */
.ns-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--gray-200);
}
.ns-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.ns-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  max-width: 540px;
  line-height: 1.5;
}
.ns-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 4px;
}
.ns-section-desc {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 14px;
  line-height: 1.5;
}

.ns-role-defaults-section {
  padding: 20px 24px;
}

/* Table */
.ns-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ns-table th {
  padding: 7px 10px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  border-bottom: 2px solid var(--gray-200);
  text-align: left;
}
.ns-th-event {
  width: 36%;
}
.ns-th-group {
  width: 16%;
}
.ns-th-role {
  width: 80px;
  text-align: center;
}
.ns-th-actions {
  width: 32px;
}
.ns-group-row td {
  padding: 10px 10px 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  border-bottom: 1px solid var(--gray-100);
}
.ns-group-label {
  background: var(--gray-50);
}
.ns-event-row td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.ns-event-row:hover td {
  background: var(--gray-50);
}
.ns-event-label,
.ns-event-group {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  color: var(--gray-800);
  font-family: inherit;
}
.ns-event-label:hover,
.ns-event-group:hover {
  border-color: var(--gray-200);
}
.ns-event-label:focus,
.ns-event-group:focus {
  border-color: var(--blue);
  outline: none;
  background: var(--surface-base);
}
.ns-role-cell {
  text-align: center;
}
.ns-actions-cell {
  text-align: center;
}
.ns-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-300);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition:
    color 0.12s,
    background 0.12s;
}
.ns-del-btn:hover {
  color: var(--red);
  background: var(--red-light);
}

/* Toggle pill (shared with user prefs) */
.ns-toggle-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.ns-toggle-wrap input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ns-toggle-pill {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--gray-200);
  transition: background 0.18s;
  position: relative;
  flex-shrink: 0;
}
.ns-toggle-pill::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-base);
  transition: transform 0.18s;
}
.ns-toggle-wrap input:checked ~ .ns-toggle-pill {
  background: var(--blue);
}
.ns-toggle-wrap input:checked ~ .ns-toggle-pill::after {
  transform: translateX(16px);
}

/* Add row */
.ns-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.ns-new-input {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 13px;
  color: var(--gray-800);
  background: var(--surface-base);
}
.ns-new-input:focus {
  outline: none;
  border-color: var(--blue);
}

/* History section */
.ns-history-section {
  padding: 20px 24px;
  border-top: 1px solid var(--gray-200);
}
.ns-history-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ns-hist-select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface-base);
  color: var(--gray-800);
}
.ns-hist-select:focus {
  outline: none;
  border-color: var(--blue);
}
.ns-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  overflow-y: auto;
}
.ns-hist-item {
  padding: 9px 12px;
  border: 1px solid var(--gray-100);
  border-radius: 6px;
  background: var(--surface-base);
}
.ns-hist-item.ns-hist-unread {
  background: var(--blue-light);
  border-color: var(--cd-dbeafe, #dbeafe);
}
.ns-hist-item.ns-hist-archived {
  opacity: 0.6;
}
.ns-hist-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.ns-hist-user {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
}
.ns-hist-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--gray-100);
  color: var(--gray-500);
  padding: 1px 6px;
  border-radius: 4px;
}
.ns-hist-time {
  font-size: 11px;
  color: var(--gray-400);
  margin-left: auto;
}
.ns-hist-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--gray-100);
  color: var(--gray-500);
}
.ns-hist-tag.ns-hist-tag-unread {
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--blue);
}
.ns-hist-text {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.4;
}
.ns-hist-empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-400);
}

/* ── Per-User Notification Preferences Modal ─── */
.unp-intro {
  padding: 0 0 14px;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
}
.unp-group {
  margin-bottom: 18px;
}
.unp-group-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 4px;
}
.unp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 4px;
  border-radius: 6px;
  gap: 12px;
}
.unp-row:hover {
  background: var(--gray-50);
}
.unp-row.unp-overridden {
  background: var(--blue-light);
}
.unp-row.unp-overridden:hover {
  background: var(--cb-dbeafe, #dbeafe);
}
.unp-row-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.unp-event-label {
  font-size: 13px;
  color: var(--gray-800);
  font-weight: 500;
}
.unp-override-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--cb-dbeafe, #dbeafe);
  color: var(--blue);
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.unp-default-tag {
  font-size: 10px;
  color: var(--gray-400);
  flex-shrink: 0;
}
.unp-row-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.unp-reset-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 14px;
  padding: 2px 5px;
  border-radius: 3px;
  transition: color 0.12s;
}
.unp-reset-btn:hover {
  color: var(--blue);
  background: var(--blue-light);
}

/* ── Event description under the role-default table label ─── */
.ns-event-desc {
  font-size: 11px;
  color: var(--gray-400);
  line-height: 1.35;
  margin-top: 2px;
  max-width: 320px;
}

/* ── Custom Notification Rules (Settings → Notifications) ─── */
.ns-rules-section {
  padding: 20px 24px;
  border-top: 1px solid var(--gray-200);
}
.ns-rules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.ns-rules-empty {
  padding: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-400);
  border: 1px dashed var(--gray-200);
  border-radius: 8px;
}
.ns-rule-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface-base);
}
.ns-rule-card.ns-rule-disabled {
  opacity: 0.55;
}
.ns-rule-toggle-wrap {
  flex-shrink: 0;
  margin-top: 2px;
}
.ns-rule-main {
  flex: 1;
  min-width: 0;
}
.ns-rule-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 4px;
}
.ns-rule-sentence {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.7;
}
.ns-rule-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Rule builder modal (WHEN/AND/THEN) ─── */
.nr-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.nr-filter-row .auto-select {
  flex: 1;
  min-width: 0;
}
.nr-filters-empty {
  font-size: 12px;
  color: var(--gray-400);
  padding: 4px 0;
}
.nr-f-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.nr-f-del:hover {
  color: var(--red);
  background: var(--red-light, #fee2e2);
}
.nr-user-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 8px;
}
.nr-user-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--gray-800);
  cursor: pointer;
}
.nr-user-check:hover {
  background: var(--gray-50);
}
.nr-user-role {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
}

/* ── Read-only "rules that apply to you" (user prefs) ─── */
.unp-rules {
  margin-top: 20px;
  padding-top: 6px;
}
.unp-rule-row {
  padding: 9px 4px;
  border-bottom: 1px solid var(--gray-100);
}
.unp-rule-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.unp-rule-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}
.unp-rule-why {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--gray-100);
  color: var(--gray-500);
  padding: 1px 6px;
  border-radius: 4px;
}
.unp-rule-sentence {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.7;
}
.unp-rules-empty {
  font-size: 13px;
  color: var(--gray-400);
  padding: 8px 4px;
}
.unp-rules-note {
  font-size: 11px;
  color: var(--gray-400);
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════
   DISPLAY PREFERENCE TOGGLES — profile dropdown
════════════════════════════════════════════════ */
.gh-dropdown-prefs-label {
  padding: 5px 14px 1px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
}
.gh-dropdown-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
}
.gh-dropdown-pref-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--gray-700);
}
.gh-dropdown-pref-name svg {
  color: var(--gray-400);
  flex-shrink: 0;
}
.gh-pref-toggle {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--gray-300);
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s;
}
.gh-pref-toggle.on {
  background: var(--blue);
}
.gh-pref-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-base);
  transition: transform 0.2s;
  pointer-events: none;
}
.gh-pref-toggle.on .gh-pref-toggle-thumb {
  transform: translateX(16px);
}

.pm-field-hint-inline {
  font-weight: 400;
  color: var(--gray-400);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

/* ════════════════════════════════════════════════
   FINANCE DEPARTMENT BOARD
════════════════════════════════════════════════ */
.fin-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 8px;
}
.fin-board {
  padding: 0 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Group */
.fin-group {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-base);
}
.fin-group-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.12s;
}
.fin-group-hdr:hover {
  filter: brightness(0.97);
}
.fin-hdr-orange {
  background: var(--amber-light);
  border-bottom-color: var(--cd-fed7aa, #fed7aa);
}
.fin-hdr-yellow {
  background: var(--cb-fefce8, #fefce8);
  border-bottom-color: var(--cd-fde68a, #fde68a);
}
.fin-hdr-blue {
  background: var(--blue-light);
  border-bottom-color: var(--cd-bfdbfe, #bfdbfe);
}
.fin-hdr-green {
  background: var(--cb-f0fdf4, #f0fdf4);
  border-bottom-color: var(--cd-bbf7d0, #bbf7d0);
}
.fin-group-label {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}
.fin-hdr-orange .fin-group-label {
  color: var(--ct-c2410c, #c2410c);
}
.fin-hdr-yellow .fin-group-label {
  color: var(--ct-a16207, #a16207);
}
.fin-hdr-blue .fin-group-label {
  color: var(--ct-1d4ed8, #1d4ed8);
}
.fin-hdr-green .fin-group-label {
  color: var(--ct-166534, #166534);
}
.fin-group-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.07);
}
.fin-chevron {
  color: var(--gray-400);
  transition: transform 0.2s;
}
.fin-chevron-open {
  transform: rotate(180deg);
}
.fin-group-body {
  overflow: hidden;
}
.fin-body-collapsed {
  display: none;
}

/* Column header */
.fin-col-hdr {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  column-gap: 16px;
  padding: 6px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
}
.fin-group-empty {
  padding: 18px 14px;
  font-size: 13px;
  color: var(--gray-400);
}

/* Row */
.fin-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  column-gap: 16px;
  padding: 9px 14px;
  align-items: center;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.1s;
}
.fin-row:last-child {
  border-bottom: none;
}
.fin-row:hover {
  background: var(--gray-50);
}
.fin-cell {
  font-size: 13px;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-cell-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Amount badges */
.fin-amount {
  font-size: 13px;
  font-weight: 600;
}
.fin-amount-due {
  color: var(--ct-c2410c, #c2410c);
}
.fin-amount-partial {
  color: var(--ct-a16207, #a16207);
}
.fin-amount-paid {
  color: var(--ct-166534, #166534);
}
.fin-amount-unknown {
  color: var(--gray-400);
}

/* Unpaid balance tag */
.fin-unpaid-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--cb-dc2626, #dc2626);
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Bookkeeper mode: non-financial tabs visually read-only ── */
.tsp-bookkeeper-mode .tsp-tab-pane:not(#tsp-pane-financial) {
  pointer-events: none;
  opacity: 0.72;
}
.tsp-bookkeeper-mode .tsp-tab:not([data-tsptab='financial']) {
  opacity: 0.55;
}

/* ── Tech Step 5: payment collection section ── */
.ms-pay-section {
  margin: 12px 0;
  padding: 14px;
  background: var(--cb-f0fdf4, #f0fdf4);
  border: 1px solid var(--cd-bbf7d0, #bbf7d0);
  border-radius: 8px;
}
.ms-pay-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ct-166534, #166534);
  margin-bottom: 10px;
}
.ms-pay-toggle-lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  color: var(--gray-800);
}
.ms-pay-toggle-lbl input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.ms-pay-details {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-pay-details .field {
  margin: 0;
}
.ms-pay-details label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 3px;
  display: block;
}

/* ════════════════════════════════════════════════
   FINANCE BOARD — payment-queue redesign
════════════════════════════════════════════════ */
/* Topbar: title + tools split across the row */
.fin-topbar {
  justify-content: space-between;
  flex-wrap: wrap;
}
.fin-topbar-titles {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.fin-topbar-sub {
  font-size: 12.5px;
  color: var(--gray-500);
  font-weight: 500;
}
.fin-topbar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fin-search {
  position: relative;
  display: flex;
  align-items: center;
}
.fin-search svg {
  position: absolute;
  left: 9px;
  color: var(--gray-400);
  pointer-events: none;
}
.fin-search input {
  padding: 7px 10px 7px 28px;
  font-size: 13px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface-base);
  color: var(--gray-800);
  width: 230px;
}
.fin-search input:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.fin-cols-wrap {
  position: relative;
}
.fin-cols-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface-base);
  color: var(--gray-700);
  cursor: pointer;
}
.fin-cols-btn:hover {
  background: var(--gray-50);
}
.fin-cols-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 200px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  padding: 6px;
}
.fin-cols-menu-hdr {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  padding: 6px 8px 4px;
}
.fin-cols-menu-foot {
  font-size: 10.5px;
  color: var(--gray-400);
  padding: 6px 8px 2px;
  border-top: 1px solid var(--gray-100);
  margin-top: 4px;
}
.fin-cols-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--gray-700);
}
.fin-cols-opt:hover {
  background: var(--gray-50);
}
.fin-cols-opt input {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Sortable column header cells */
.fin-colh {
  display: flex;
  align-items: center;
}
.fin-colh-right {
  justify-content: flex-end;
}
.fin-colh-sortable {
  cursor: pointer;
}
.fin-colh-sortable:hover {
  color: var(--gray-700);
}
.fin-colh-active {
  color: var(--primary, #2563eb);
}
.fin-colh-action {
}

/* Cell alignment + status cell */
.fin-cell-right {
  justify-content: flex-end;
  text-align: right;
}
.fin-cell-status {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Status indicator dot */
.fin-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.fin-dot-deposit {
  background: #ea580c;
}
.fin-dot-remainder {
  background: var(--cb-d97706, #d97706);
}
.fin-dot-full {
  background: #e11d48;
}
.fin-dot-paid {
  background: var(--cb-16a34a, #16a34a);
}
.fin-dot-none {
  background: #94a3b8;
}

/* Status tag pill */
.fin-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.fin-tag-deposit {
  background: var(--amber-light);
  color: var(--ct-c2410c, #c2410c);
}
.fin-tag-remainder {
  background: var(--cb-fefce8, #fefce8);
  color: var(--ct-a16207, #a16207);
}
.fin-tag-full {
  background: var(--red-light);
  color: var(--ct-be123c, #be123c);
}
.fin-tag-paid {
  background: var(--cb-f0fdf4, #f0fdf4);
  color: var(--ct-166534, #166534);
}
.fin-tag-none {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* Amount colors (extend the legacy set) */
.fin-amount-deposit {
  color: var(--ct-c2410c, #c2410c);
}
.fin-amount-remainder {
  color: var(--ct-a16207, #a16207);
}
.fin-amount-full {
  color: var(--ct-be123c, #be123c);
}
.fin-amount-none {
  color: var(--gray-400);
}

/* Row quick action */
.fin-cell-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.fin-quick-btn {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid var(--primary, #2563eb);
  background: var(--primary, #2563eb);
  color: #fff;
  transition: filter 0.1s;
}
.fin-quick-btn:hover {
  filter: brightness(1.08);
}
.fin-done-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cb-f0fdf4, #f0fdf4);
  color: var(--ct-16a34a, #16a34a);
}

/* ── Bookkeeper payment modal ── */
.fin-pm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(24, 24, 27, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.fin-pm-overlay[hidden] {
  display: none;
}
.fin-pm-card {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: auto;
  background: var(--surface-base);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
.fin-pm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.fin-pm-head-titles h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}
.fin-pm-head-titles p {
  font-size: 13px;
  color: var(--gray-500);
  margin: 3px 0 0;
}
.fin-pm-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.fin-pm-close:hover {
  color: var(--gray-700);
}
.fin-pm-body {
  padding: 16px 20px 22px;
}

.fin-pm-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 18px;
}
.fin-pm-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fin-pm-meta-k {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
}
.fin-pm-meta-v {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.fin-pm-section {
  margin-bottom: 16px;
}
.fin-pm-section-hdr {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  margin-bottom: 8px;
}
.fin-pm-payrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  margin-bottom: 6px;
}
.fin-pm-payrow-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  flex: 1;
}
.fin-pm-payrow-amt {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
}
.fin-pm-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.fin-pm-badge-paid {
  background: var(--cb-f0fdf4, #f0fdf4);
  color: var(--ct-166534, #166534);
}
.fin-pm-badge-pending {
  background: var(--amber-light);
  color: var(--ct-c2410c, #c2410c);
}

.fin-pm-outstanding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  border: 1px solid var(--gray-200);
}
.fin-pm-outstanding-deposit {
  background: var(--amber-light);
  border-color: var(--cd-fed7aa, #fed7aa);
}
.fin-pm-outstanding-remainder {
  background: var(--cb-fefce8, #fefce8);
  border-color: var(--cd-fde68a, #fde68a);
}
.fin-pm-outstanding-full {
  background: var(--red-light);
  border-color: var(--cd-fecaca, #fecaca);
}
.fin-pm-outstanding-paid {
  background: var(--cb-f0fdf4, #f0fdf4);
  border-color: var(--cd-bbf7d0, #bbf7d0);
}
.fin-pm-outstanding-none {
  background: var(--gray-50);
}
.fin-pm-outstanding-k {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
.fin-pm-outstanding-v {
  font-size: 24px;
  font-weight: 800;
  color: var(--gray-900);
  margin-top: 2px;
}

.fin-pm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fin-pm-act-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 9px;
  cursor: pointer;
  border: 1.5px solid var(--gray-200);
  background: var(--surface-base);
  color: var(--gray-800);
  font-size: 14px;
  text-align: left;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.fin-pm-act-btn:hover:not(.fin-pm-act-disabled) {
  border-color: var(--primary, #2563eb);
  background: var(--gray-50);
}
.fin-pm-act-selected {
  border-color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, 0.06);
}
.fin-pm-act-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.fin-pm-act-label {
  font-weight: 600;
}
.fin-pm-act-amt {
  font-weight: 800;
}
.fin-pm-fullypaid {
  padding: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ct-166534, #166534);
  background: var(--cb-f0fdf4, #f0fdf4);
  border-radius: 9px;
}

.fin-pm-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fin-pm-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fin-pm-form-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
}
.fin-pm-form-row input,
.fin-pm-form-row textarea {
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface-base);
  color: var(--gray-800);
  font-family: inherit;
  resize: vertical;
}
.fin-pm-form-row input:focus,
.fin-pm-form-row textarea:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.fin-pm-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fin-pm-form-summary {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-600);
}
.fin-pm-confirm {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background: var(--cb-16a34a, #16a34a);
  color: #fff;
}
.fin-pm-confirm:hover {
  filter: brightness(1.07);
}

/* ── Bookkeeper modal: payment notes ── */
.fin-pm-paynote {
  padding: 9px 12px;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--gray-50);
}
.fin-pm-paynote-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.fin-pm-paynote-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
}
.fin-pm-paynote-time {
  font-size: 11px;
  color: var(--gray-400);
  margin-left: auto;
}
.fin-pm-paynote-body {
  font-size: 13px;
  color: var(--gray-700);
  white-space: pre-wrap;
}
.fin-pm-paynote-empty {
  font-size: 13px;
  color: var(--gray-400);
  font-style: italic;
  margin-bottom: 8px;
}
.fin-pm-addnote {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fin-pm-addnote textarea {
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface-base);
  color: var(--gray-800);
  font-family: inherit;
  resize: vertical;
}
.fin-pm-addnote textarea:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.fin-pm-addnote-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--gray-300);
  border-radius: 7px;
  background: var(--surface-base);
  color: var(--gray-700);
  transition:
    background 0.12s,
    border-color 0.12s;
}
.fin-pm-addnote-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

/* ── Finance settings (Settings → Finance) ── */
.fin-set-card {
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 18px 20px;
  max-width: 680px;
}
.fin-set-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fin-set-card-hdr h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0;
}
.fin-set-reset {
  font-size: 12px;
  padding: 6px 12px;
}
.fin-set-hint {
  font-size: 12.5px;
  color: var(--gray-500);
  margin: 6px 0 14px;
}
.fin-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 16px;
}
.fin-set-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--gray-700);
}
.fin-set-opt:hover {
  background: var(--gray-50);
}
.fin-set-opt input {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Awaiting-completion row indicator + modal note */
.fin-await-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--ct-c2410c, #c2410c);
  white-space: nowrap;
  opacity: 0.8;
  font-style: italic;
}
.fin-pm-await {
  padding: 13px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ct-92400e, #92400e);
  background: var(--amber-light);
  border: 1px solid var(--cd-fed7aa, #fed7aa);
  border-radius: 9px;
}
.fin-pm-meta-wide {
  grid-column: 1 / -1;
}
.fin-pm-meta-muted {
  color: var(--gray-400);
  font-weight: 500;
}

/* Full (unmasked) payment-method detail in the bookkeeper modal */
.fin-pm-pmlist {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}
.fin-pm-pmline {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.fin-pm-pmk {
  color: var(--gray-400);
  font-size: 11.5px;
  font-weight: 600;
  min-width: 78px;
}
.fin-pm-pmv {
  color: var(--gray-800);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

/* Locked (masked) payment-method inputs in the ticket financial tab */
.pm-locked-input {
  background: var(--gray-50) !important;
  color: var(--gray-500) !important;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.pm-brand-note {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary, #2563eb);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Communications (Settings → Communications) ── */
.comm-section {
  margin-bottom: 28px;
}
.comm-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.comm-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 2px;
}
.comm-section-desc {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
  max-width: 640px;
}
.comm-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comm-empty {
  font-size: 13px;
  color: var(--gray-400);
  padding: 14px 16px;
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius-lg);
}
.comm-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}
.comm-card-off {
  opacity: 0.6;
}
.comm-card-main {
  flex: 1;
  min-width: 0;
}
.comm-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-800);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.comm-card-sub {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}
.comm-card-sentence {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
}
.comm-card-sentence .auto-kw-inline {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  margin: 0 4px;
}
.comm-card-sentence .auto-chip-inline {
  display: inline;
  background: var(--blue-light);
  color: var(--blue);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 500;
}
.comm-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.comm-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 10px;
}
.comm-badge-customer {
  background: var(--blue-light);
  color: var(--blue);
}
.comm-badge-internal {
  background: var(--gray-200);
  color: var(--gray-600);
}
.comm-badge-kind {
  background: #f3e8ff;
  color: #7e22ce;
}
.comm-radio-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.comm-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--gray-700);
  cursor: pointer;
}
.comm-recip-grid {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.comm-recip-row {
  display: flex;
  gap: 14px;
}
.comm-sublabel {
  font-size: 12px !important;
  color: var(--gray-500) !important;
}
.comm-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin: 6px 0 0;
}
.comm-hint code,
.comm-sms-bubble code {
  background: var(--gray-100);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
}
.comm-sms-bubble {
  background: #e7f3ff;
  border: 1px solid #c7e0ff;
  color: var(--gray-900);
  border-radius: 14px;
  padding: 12px 16px;
  max-width: 340px;
  font-size: 14px;
  line-height: 1.5;
}

/* comm log entries in the ticket Notes & Communication timeline */
.tsp-note-comm .tsp-note-icon {
  color: var(--blue);
}
.tsp-comm-status {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
}
.tsp-comm-ok {
  background: var(--green-light, #d1fae5);
  color: var(--green, #059669);
}
.tsp-comm-fail {
  background: var(--cb-fee2e2, #fee2e2);
  color: var(--ct-dc2626, #dc2626);
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE — Semantic alert/warning/badge colour overrides (auto-mapped)
   Light mode is unaffected (these vars are only defined here, under dark;
   in light the var() fallback = the original hex).
   ════════════════════════════════════════════════════════════════════ */
[data-theme='dark'] {
  /* backgrounds */
  --cb-047857: #047857;
  --cb-059669: #059669;
  --cb-14532d: #14532d;
  --cb-15803d: #15803d;
  --cb-16a34a: #16a34a;
  --cb-1b5e20: #1b5e20;
  --cb-1d4ed8: #2563eb;
  --cb-22c55e: #22c55e;
  --cb-2563eb: #3b82f6;
  --cb-2d7d32: #2d7d32;
  --cb-7c3aed: #7c3aed;
  --cb-b45309: #b45309;
  --cb-b91c1c: #b91c1c;
  --cb-bfdbfe: #1e3a5f;
  --cb-d1fae5: #0e3322;
  --cb-d97706: #d97706;
  --cb-dbeafe: #16233a;
  --cb-dc2626: #dc2626;
  --cb-dcfce7: #0e3322;
  --cb-e0edff: #1b2c47;
  --cb-e0f2fe: #122a38;
  --cb-ede9fe: #2a2140;
  --cb-ef4444: #ef4444;
  --cb-f0f7ff: #1c2433;
  --cb-f0fdf4: #0e2e1e;
  --cb-f59e0b: #f59e0b;
  --cb-fafbfc: #181a1f;
  --cb-fafcff: #181a1f;
  --cb-fce7f3: #3a1726;
  --cb-fde68a: #4a3a12;
  --cb-fee2e2: #391717;
  --cb-fef3c7: #2e2410;
  --cb-fef9c3: #2e2a0e;
  --cb-fefce8: #26230c;
  /* text / fill */
  --ct-0369a1: #7dd3fc;
  --ct-047857: #34d399;
  --ct-059669: #34d399;
  --ct-065f46: #6ee7b7;
  --ct-14532d: #86efac;
  --ct-15803d: #4ade80;
  --ct-166534: #86efac;
  --ct-16a34a: #4ade80;
  --ct-1d4ed8: #60a5fa;
  --ct-1e40af: #93c5fd;
  --ct-2563eb: #60a5fa;
  --ct-4ade80: #4ade80;
  --ct-5b21b6: #c4b5fd;
  --ct-60a5fa: #60a5fa;
  --ct-6d28d9: #a78bfa;
  --ct-78350f: #fde68a;
  --ct-7c3aed: #a78bfa;
  --ct-854d0e: #e3c341;
  --ct-92400e: #fcd34d;
  --ct-991b1b: #fca5a5;
  --ct-9d174d: #f472b6;
  --ct-a16207: #e3c341;
  --ct-b45309: #fbbf24;
  --ct-b91c1c: #f87171;
  --ct-bbf7d0: #86efac;
  --ct-be123c: #fb7185;
  --ct-c2410c: #fb923c;
  --ct-d97706: #fbbf24;
  --ct-dc2626: #f87171;
  --ct-ef4444: #f87171;
  --ct-f59e0b: #f59e0b;
  --ct-f97316: #fb923c;
  --ct-fca5a5: #fca5a5;
  --ct-ffa000: #ffb020;
  /* borders */
  --cd-059669: #067a56;
  --cd-15803d: #115e30;
  --cd-166534: #114a28;
  --cd-16a34a: #15703a;
  --cd-1d4ed8: #2c4a73;
  --cd-22c55e: #1e7a3e;
  --cd-2563eb: #3b82f6;
  --cd-60a5fa: #2c4a73;
  --cd-6ee7b7: #1e8a5e;
  --cd-7c3aed: #5b3a9a;
  --cd-86efac: #22863f;
  --cd-93c5fd: #3a5e8f;
  --cd-a7f3d0: #176a38;
  --cd-b91c1c: #7a1818;
  --cd-bae6fd: #225266;
  --cd-bbf7d0: #176a38;
  --cd-bfdbfe: #2c4a73;
  --cd-c4b5fd: #5a4690;
  --cd-d97706: #9a5a12;
  --cd-dbeafe: #1e3a5f;
  --cd-dc2626: #7a2020;
  --cd-ddd6fe: #463670;
  --cd-f59e0b: #8a5e12;
  --cd-f97316: #8a4516;
  --cd-facc15: #7c6a1a;
  --cd-fca5a5: #8a3a3a;
  --cd-fcd34d: #7c5e1a;
  --cd-fdba74: #7a4a1e;
  --cd-fde68a: #6b5214;
  --cd-fecaca: #6a2a2a;
  --cd-fecdd3: #6a2a32;
  --cd-fed7aa: #5a3e1a;
}
/* ════════════════════════════════════════════════════════════════════
   DARK MODE — Carbon  ·  [data-theme="dark"] on <body>
   ────────────────────────────────────────────────────────────────────
   Architecture: this theme is driven ENTIRELY by re-mapping the design
   tokens below. The base stylesheet references these tokens (var(--…))
   for every surface, text and border colour, so flipping the token
   values re-themes the whole app — no per-component patching.

   Gray scale convention (matches light mode roles, colours flipped):
     low index  (50–400)  = surfaces & dividers  (dark → lighter)
     high index (500–900) = text                 (muted → near-white)
   ════════════════════════════════════════════════════════════════════ */
[data-theme='dark'] {
  color-scheme: dark;

  /* Neutral charcoal scale (Carbon) */
  --gray-50: #1c1c20; /* subtle raised / hover surface */
  --gray-100: #232329; /* raised panel / inset section  */
  --gray-150: #2c2c33; /* (light fallback #e8ecf0 — divider lines) */
  --gray-200: #2c2c33; /* borders / dividers            */
  --gray-300: #3a3a42; /* strong border                 */
  --gray-400: #6e6e77; /* faint labels / hints (mostly text) */
  --gray-500: #8b8b93; /* faint text                    */
  --gray-600: #a1a1aa; /* secondary text                */
  --gray-700: #d4d4d8; /* strong secondary              */
  --gray-800: #e4e4e7; /* primary-ish text              */
  --gray-900: #f4f4f5; /* max-contrast text             */

  /* Status / semantic light tints → deep tints */
  --blue-light: #16233a;
  --green-light: #0e2e22;
  --amber-light: #2e2410;
  --red-light: #391717;

  /* Accent + semantic hues — brightened a touch for dark legibility */
  --blue: #3b82f6;
  --blue-dark: #2563eb;
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #f05252;

  /* Semantic surfaces / text / borders */
  --surface-base: #18181b; /* cards, rows, panels (was white)        */
  --surface-raised: #232329; /* hovered / elevated cards               */
  --surface-overlay: #232329; /* modals, dropdowns, popovers            */
  --surface-inset: #0f0f12; /* wells, table heads, recessed areas     */
  --surface-header: #18181b; /* sticky headers / toolbars              */
  --border: #2c2c33;
  --border-strong: #3a3a42;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-faint: #71717a;
  --input-bg: #121215;
  --input-border: #34343c;
  --input-text: #f4f4f5;
  --link-color: #60a5fa;
  --sidebar-bg: #18181b; /* true neutral dark — no blue cast */
  --rail-bg: #09090b; /* dark brand rails stay near-black (prior look preserved) */

  /* Shadows — deeper alpha so elevation still reads on dark */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.65), 0 2px 5px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 28px -6px rgba(0, 0, 0, 0.75), 0 6px 12px -6px rgba(0, 0, 0, 0.55);
}

/* ── Canvas (deepest layer, below cards) ─────────────────────────────── */
body[data-theme='dark'] {
  background: #0c0c0f;
  color: var(--text-primary);
}
[data-theme='dark'] .main-content,
[data-theme='dark'] .view {
  background: #0c0c0f;
}

/* Inputs / form controls render native chrome dark */
[data-theme='dark'] input,
[data-theme='dark'] select,
[data-theme='dark'] textarea {
  color-scheme: dark;
}

/* Thin scrollbars on dark */
[data-theme='dark'] *::-webkit-scrollbar-thumb {
  background: #3a3a42;
}
[data-theme='dark'] * {
  scrollbar-color: #3a3a42 transparent;
}

/* Elements that are intentionally dark in LIGHT mode (so they can't use
   the surface tokens) — re-pointed to Carbon neutrals for dark mode. */
[data-theme='dark'] .so-sidebar,
[data-theme='dark'] .ps-sidebar {
  background: var(--rail-bg);
}
/* Settings overlay (new IA): white nav in light mode — keep it legible on the
   dark sidebar surface in dark mode (light text, dark search field, etc.). */
[data-theme='dark'] .so-sidebar {
  border-right-color: var(--border);
}
[data-theme='dark'] .so-sidebar-header {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}
[data-theme='dark'] .so-search-bar {
  border-bottom-color: var(--border);
}
[data-theme='dark'] #so-search-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme='dark'] #so-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme='dark'] .so-nav-section-label {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme='dark'] .so-nav-item,
[data-theme='dark'] .so-nav-grouphdr {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme='dark'] .so-nav-subitem {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme='dark'] .so-nav-item:hover,
[data-theme='dark'] .so-nav-grouphdr:hover,
[data-theme='dark'] .so-nav-subitem:hover {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .so-nav-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  border-left-color: rgba(255, 255, 255, 0.6);
}
[data-theme='dark'] .so-nav-subitem.active {
  color: rgba(255, 255, 255, 0.95);
}
[data-theme='dark'] .so-nav-planned {
  color: rgba(255, 255, 255, 0.32);
}
[data-theme='dark'] .so-content {
  background: var(--surface-base);
}
[data-theme='dark'] .so-coming-title {
  color: var(--text-primary);
}
[data-theme='dark'] .so-coming-desc,
[data-theme='dark'] .so-coming-features li {
  color: var(--text-secondary);
}
[data-theme='dark'] .so-coming-icon {
  background: var(--blue-light);
  border-color: var(--border);
}
/* Profile Settings: light-green "2FA ON" badge → deep green tint */
[data-theme='dark'] .ps-2fa-on {
  background: var(--green-light);
  color: #4ade80;
}
[data-theme='dark'] .tl-bulk-bar,
[data-theme='dark'] .toast,
[data-theme='dark'] .tsp-mode-dd-menu {
  background: var(--surface-overlay);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme='dark'] .emp-block-bar,
[data-theme='dark'] .cal-block-chip,
[data-theme='dark'] .cal-week-block {
  background: var(--surface-raised);
  border-color: var(--border);
}

/* Net-revenue financial chip (green/red tints not in the surface map) */
[data-theme='dark'] .tsp-net-revenue,
[data-theme='dark'] .tsp-net-revenue.tsp-net-positive {
  background: var(--green-light);
  border-color: #14532d;
  color: #4ade80;
}
[data-theme='dark'] .tsp-net-revenue.tsp-net-negative {
  background: var(--red-light);
  border-color: #7f1d1d;
  color: #f87171;
}

/* Gantt odd-row striping — base uses a hardcoded light grey (#e8ecf0) that
   reads as bright rectangles in the empty timeline slots on dark. Re-point
   to a token so the stripe blends with the dark Gantt surface. */
[data-theme='dark'] .gantt-row:nth-child(odd) .jobs-area,
[data-theme='dark'] .gantt-row:nth-child(odd) .non-work-band {
  background: var(--gray-200);
}

/* Header brand / company logo — dark-on-light assets need to flip on dark.
   Default SVG icon + name use currentColor/hardcoded dark; uploaded logo
   images are inverted (hue preserved) so they stay clearly visible. */
[data-theme='dark'] .gh-brand-icon {
  color: var(--gray-700);
}
[data-theme='dark'] .gh-brand-name {
  color: var(--text-primary);
}
[data-theme='dark'] .gh-brand-logo {
  filter: invert(1) hue-rotate(180deg) brightness(1.05);
}

/* Surfaces that are intentionally DARK in light mode by using var(--gray-900)
   as a background — in dark that token flips to near-white, so they'd render
   as bright bars. Re-point them to real dark surfaces. (Text on them is light
   and stays readable.) */
[data-theme='dark'] #auth-wrap {
  background-color: #0c0c0f;
}
[data-theme='dark'] .auth-code-box {
  background: var(--surface-inset);
}
[data-theme='dark'] .pf-header {
  background: var(--surface-inset);
}

/* Dark "bubble" tooltip (route-optimisation threshold info) — gray-900 bg +
   white text becomes white-on-white in dark. Make it a raised dark surface. */
[data-theme='dark'] .opt-info-tip-portal {
  background: var(--surface-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
[data-theme='dark'] .opt-info-tip-portal::after {
  border-top-color: var(--surface-overlay);
}

/* Notification rows: unread-hover used a bright #DBEAFE flash. Keep hover a
   barely-lighter lift of the resting surface, like the ticket-row hover. */
[data-theme='dark'] .gh-notif-item:hover {
  background: #202024;
}
[data-theme='dark'] .gh-notif-item.unread {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-base));
}
[data-theme='dark'] .gh-notif-item.unread:hover {
  background: color-mix(in srgb, var(--blue) 20%, var(--surface-base));
}

/* Off-palette light tints (one-offs the semantic map didn't cover) ──────── */
[data-theme='dark'] .svcfg-mat-meas-custom,
[data-theme='dark'] .comm-badge-kind {
  background: #2a2140;
  color: #c4b5fd;
}
[data-theme='dark'] .cf-type-date {
  background: #2a2140;
}
[data-theme='dark'] .cl-row:hover {
  background: #202024 !important;
}
[data-theme='dark'] .comm-sms-bubble {
  background: #16233a;
  border-color: #2c4a73;
  color: var(--text-primary);
}
[data-theme='dark'] .jb-pref-last {
  background: #20254d;
  color: #a5b4fc;
}
[data-theme='dark'] .import-col-opt.sel {
  background: #20254d;
  color: #a5b4fc;
}
[data-theme='dark'] .ms-stop-status-complete {
  color: #5eead4;
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE — Dynamic (user-configured) colours
   Elements whose colour is set per-record in JS expose it as a CSS
   custom property (--grp-color / --job-color). In light mode the raw
   colour is used; in dark mode we derive a deep tinted band + a light
   tinted foreground via color-mix(), so any arbitrary hue stays legible
   and "darker tinted version of itself" rather than full saturation.
   ════════════════════════════════════════════════════════════════════ */

/* Status group headers (Service Tickets board) — minimal redesign: the header is
   a neutral surface (var(--surface-base)) with the colour shown only as the 8px
   dot, and the section is borderless/shadowless (groups separated by 24px
   whitespace). Dark mode is handled entirely by the auto-flipping surface / text
   / border tokens — no per-section override needed. */
/* Per-group column sub-header (CUSTOMER / PHONE / …) — was rgba(black) */
[data-theme='dark'] .tl-group-col-hdr {
  background: rgba(255, 255, 255, 0.03);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* .tl-group-col-hdr-cell label colour (#9ca3af) is set on the base rule and
   reads on the dark header surface (~6.7:1) — no dark override needed. */

/* Ticket row hover — light mode uses a bright blue-white (#f0f7ff); on dark
   that reads as a glaring flash. Use a barely-perceptible lift of the row
   surface instead. */
[data-theme='dark'] .tl-row:hover td {
  background: #202024 !important;
}
/* Task 4 — grouped board row hover: a bare white lift (no blue tint on dark). */
[data-theme='dark'] .tl-group-rows .tl-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
[data-theme='dark'] .tl-row.tl-selected:hover td,
[data-theme='dark'] .tl-group-rows .tl-row.tl-selected:hover {
  background: color-mix(in srgb, var(--blue) 16%, var(--surface-base)) !important;
}

/* Dispatch board job blocks (Gantt). Light mode keeps its inline colour;
   dark mode re-tints any tech colour into a deep band + light text. */
[data-theme='dark'] .job-block {
  background: color-mix(in srgb, var(--job-color, #3b82f6) 26%, #18181b) !important;
  border-left: 3px solid color-mix(in srgb, var(--job-color, #3b82f6) 72%, #ffffff) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .job-block-multiday,
[data-theme='dark'] .job-block-fullday {
  border-left-width: 4px !important;
}
[data-theme='dark'] .job-block .job-block-inner,
[data-theme='dark'] .job-block .job-customer,
[data-theme='dark'] .job-block .job-timerange {
  color: #f4f4f5 !important;
}
[data-theme='dark'] .job-block-confirmed {
  outline: 1px solid color-mix(in srgb, var(--job-color, #3b82f6) 50%, transparent);
}

/* ════════════════════════════════════════════════════════════════════
   COLOR-REDUCED MODE — [data-color-reduced="1"] on <body>
   Adds a redundant, NON-colour cue beside every colour-coded element so
   meaning never depends on hue alone. Does NOT remove colour. Works in
   both light and dark themes (overlays use white-alpha). Combines with
   dark mode when both are enabled.
   ════════════════════════════════════════════════════════════════════ */

/* ── Status group headers: a distinct TEXTURE per group (index-based),
      so the six stacked groups are tell-apart-able without colour. ──── */
[data-color-reduced='1'] .tl-group-hdr {
  position: relative;
  overflow: hidden;
}
[data-color-reduced='1'] .tl-group-hdr-label,
[data-color-reduced='1'] .tl-group-hdr-badge {
  position: relative;
  z-index: 1;
}
[data-color-reduced='1'] .tl-group-hdr::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}
[data-color-reduced='1'] .tl-group-section[data-grp-pattern='0'] .tl-group-hdr::after {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 0 5px,
    transparent 5px 11px
  );
}
[data-color-reduced='1'] .tl-group-section[data-grp-pattern='1'] .tl-group-hdr::after {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 0 5px,
    transparent 5px 11px
  );
}
[data-color-reduced='1'] .tl-group-section[data-grp-pattern='2'] .tl-group-hdr::after {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 0 4px,
    transparent 4px 12px
  );
}
[data-color-reduced='1'] .tl-group-section[data-grp-pattern='3'] .tl-group-hdr::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1.6px, transparent 1.7px);
  background-size: 11px 11px;
}
[data-color-reduced='1'] .tl-group-section[data-grp-pattern='4'] .tl-group-hdr::after {
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 8px);
}
[data-color-reduced='1'] .tl-group-section[data-grp-pattern='5'] .tl-group-hdr::after {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.2) 0 4px,
    transparent 4px 12px
  );
}
/* The minimal group-header redesign retires the colour-fill, so the per-group
   texture overlay (designed to tell colour-filled bands apart without hue) no
   longer has a coloured surface to sit on — it would be invisible on the new
   neutral header in light mode and a faint artefact in dark. Each group keeps
   its always-visible text label as the non-colour cue, so disable the overlay. */
[data-color-reduced='1'] .tl-group-hdr::after {
  content: none;
}

/* ── Dispatch job blocks: subtle diagonal texture beside the tech colour.
      The block is already position:absolute (its Gantt placement); we must
      NOT change its positioning. The overlay is a pure ::after layer that
      does not affect dimensions, flow, or placement. ─────────────────────── */
[data-color-reduced='1'] .job-block-inner {
  z-index: 1;
}
[data-color-reduced='1'] .job-block::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.16) 0 4px,
    transparent 4px 9px
  );
}

/* ══════════════════════════════════════════════════════════════
   Ticket panel restructure — Overview Completed Job Details,
   Scheduling-Summary tech avatar, per-tab section reorder.
   Token-driven so dark mode swaps automatically.
   ══════════════════════════════════════════════════════════════ */

/* Section header with a trailing avatar (Scheduling Summary) */
.tsp-section-label--withavatar .tsp-section-label-text {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tsp-section-label--withavatar .tsp-tech-avatar {
  margin-left: auto;
}

/* Assigned-tech colored circle avatar */
.tsp-tech-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--gray-400);
  box-shadow:
    0 0 0 2px var(--surface-base),
    0 1px 2px rgba(0, 0, 0, 0.18);
  text-transform: uppercase;
}
.tsp-tech-avatar[hidden] {
  display: none;
}

/* Completed Job Details fields must span both grid columns */
.tsp-section > .field:has(#tsp-materials-used),
.tsp-section > .field:has(#tsp-job-photos-section),
.tsp-section > .field:has(.tsp-profit-readout) {
  grid-column: 1 / -1;
}

/* Clear divider before the Completed Job Details block */
.tsp-section-divider {
  grid-column: 1 / -1;
  height: 0;
  border: 0;
  border-top: 2px solid var(--gray-200);
  margin: 6px 0 4px;
}

/* Completed Job Details — read-only placeholders */
.tsp-cjd-placeholder {
  margin: 0;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius);
  font-size: 12.5px;
  font-style: italic;
  color: var(--gray-500);
}
.tsp-materials-used {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tsp-mat-row-readonly {
  cursor: default;
}

/* Profit summary readout (moved from Financial → read-only on Overview) */
.tsp-profit-readout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.tsp-profit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--gray-600);
}
.tsp-profit-row span:last-child {
  font-weight: 700;
  color: var(--gray-800);
}
.tsp-profit-row-net {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--gray-200);
  font-weight: 600;
}
.tsp-profit-row-net .tsp-net-revenue {
  font-size: 15px;
  padding: 4px 10px;
}

/* Helper notes */
.tsp-mirror-hint,
.tsp-materials-needed-note,
.tsp-fin-profit-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--gray-400);
}

/* Per-tab section drag handle */
.tsp-sec-drag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
  color: var(--gray-300);
  cursor: grab;
  border-radius: 4px;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    color 0.12s ease,
    background 0.12s ease;
}
.tsp-section:hover .tsp-sec-drag {
  opacity: 1;
}
.tsp-sec-drag:hover {
  color: var(--gray-500);
  background: var(--gray-100);
}
.tsp-sec-drag:active {
  cursor: grabbing;
}
.tsp-section-dragging {
  opacity: 0.5;
}
.tsp-section-drag-over {
  border-radius: var(--radius);
  box-shadow: inset 0 2px 0 0 var(--blue-500, #3b82f6);
}
/* While reordering, keep edge auto-scroll instant (a smooth scroll-behavior would
   fight the per-frame scrollTop updates and stutter). */
.tsp-body.tsp-section-reordering {
  scroll-behavior: auto;
}

/* ── Colour-only swatches & dots gain a defining ring/shape ──────────── */
[data-color-reduced='1'] .tl-status-dot,
[data-color-reduced='1'] .tech-filter-dot,
[data-color-reduced='1'] .tech-pip {
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

/* ── Tag pills already carry their text label (the non-colour cue), so no
      extra indicator is needed. The previous `border-left: currentColor` drew
      a stray white bar on tags whose text colour was white — removed. ────── */

/* ── Status badges keep their text label (already present); add an
      outline so the tinted chip reads as a chip without relying on fill ─ */
[data-color-reduced='1'] .tl-status-badge {
  outline: 1px solid currentColor;
  outline-offset: -1px;
}

/* ════════════════════════════════════════════════════════════
   PROFILE SETTINGS OVERLAY
   ════════════════════════════════════════════════════════════ */

.ps-overlay {
  position: fixed;
  inset: 48px 0 0 0;
  display: flex;
  z-index: 300;
  background: var(--surface-base, #fff);
  animation: ps-slide-in 0.18s ease;
}
@keyframes ps-slide-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sidebar */
.ps-sidebar {
  width: 220px;
  background: var(--rail-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
.ps-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ps-sidebar-title {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.01em;
}
.ps-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition:
    color 0.12s,
    background 0.12s;
}
.ps-close-btn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}

.ps-nav {
  padding: 8px 0;
}
.ps-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 18px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  transition:
    color 0.12s,
    background 0.12s;
}
.ps-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}
.ps-nav-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}
.ps-nav-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.ps-nav-item.active svg {
  opacity: 1;
}

/* Body / content area */
.ps-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.ps-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px 60px;
}

/* Saved badge */
.ps-saved-badge {
  position: absolute;
  top: 16px;
  right: 20px;
  background: var(--green, #16a34a);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 1;
  animation: ps-badge-pop 0.15s ease;
}
@keyframes ps-badge-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Sections */
.ps-section {
  max-width: 640px;
}
.ps-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900, #18181b);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.ps-section-desc {
  font-size: 13px;
  color: var(--gray-500, #64748b);
  margin: 0 0 28px;
  line-height: 1.5;
}

/* Group block within a section */
.ps-group {
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 10px;
  padding: 20px 22px;
  margin-top: 28px;
}
.ps-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-700, #334155);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.ps-group-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* Photo upload */
.ps-photo-section {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin: 24px 0 28px;
  flex-wrap: wrap;
}
.ps-photo-drop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border: 2px dashed var(--gray-300, #cbd5e1);
  border-radius: 12px;
  padding: 20px 24px;
  transition:
    border-color 0.15s,
    background 0.15s;
  cursor: default;
}
.ps-photo-drop.ps-photo-drop-hover {
  border-color: var(--blue, #2563eb);
  background: rgba(37, 99, 235, 0.04);
}
.ps-photo-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gray-200, #e2e8f0);
  flex-shrink: 0;
}
.ps-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-photo-initials {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.ps-photo-ctrls {
  display: flex;
  gap: 8px;
}
.ps-photo-upload-btn {
  cursor: pointer;
}
.ps-photo-hint {
  font-size: 11px;
  color: var(--gray-400, #94a3b8);
  margin: 0;
}

.ps-avatar-color-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}
.ps-color-input {
  width: 52px;
  height: 36px;
  border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: transparent;
}

/* Fields */
.ps-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.ps-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.ps-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700, #334155);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ps-field-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--gray-400, #94a3b8);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}
.ps-field input[type='text'],
.ps-field input[type='email'],
.ps-field input[type='tel'],
.ps-field input[type='password'],
.ps-select {
  padding: 8px 10px;
  border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 7px;
  font-size: 14px;
  color: var(--gray-900, #18181b);
  background: var(--surface-base, #fff);
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
  width: 100%;
}
.ps-field input:focus,
.ps-select:focus {
  outline: none;
  border-color: var(--blue, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Email change inline */
.ps-email-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-email-display-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-email-display {
  font-size: 14px;
  color: var(--gray-700, #334155);
  font-weight: 500;
}
.ps-email-edit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 8px;
  padding: 14px 16px;
}
.ps-email-edit-row input {
  padding: 8px 10px;
  border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 6px;
  font-size: 14px;
  background: var(--surface-base, #fff);
  color: var(--gray-900, #18181b);
}
.ps-email-btns {
  display: flex;
  gap: 8px;
}
.ps-inline-error {
  font-size: 13px;
  color: var(--red, #dc2626);
  padding: 6px 0 0;
}
.ps-inline-ok {
  font-size: 13px;
  color: var(--green, #16a34a);
  padding: 6px 0 0;
  font-weight: 600;
}

/* Display preferences */
.ps-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-100, #f1f5f9);
}
.ps-pref-row:first-of-type {
  padding-top: 12px;
}
.ps-pref-row:last-of-type {
  border-bottom: none;
}
.ps-pref-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ps-pref-icon {
  color: var(--gray-400, #94a3b8);
  margin-top: 2px;
  flex-shrink: 0;
}
.ps-pref-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800, #1e293b);
}
.ps-pref-desc-text {
  font-size: 12px;
  color: var(--gray-500, #64748b);
  margin-top: 2px;
}

/* Security section */
.ps-2fa-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-2fa-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ps-2fa-on {
  background: #dcfce7;
  color: #15803d;
}
.ps-2fa-off {
  background: var(--gray-100, #f1f5f9);
  color: var(--gray-500, #64748b);
}
.ps-2fa-label {
  font-size: 13px;
  color: var(--gray-700, #334155);
}

.ps-devices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-device-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 8px;
  background: var(--surface-base, #fff);
}
.ps-device-current {
  border-color: var(--blue, #2563eb);
  background: rgba(37, 99, 235, 0.03);
}
.ps-device-icon {
  color: var(--gray-400, #94a3b8);
  flex-shrink: 0;
}
.ps-device-info {
  flex: 1;
  min-width: 0;
}
.ps-device-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800, #1e293b);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-device-current-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--blue, #2563eb);
  color: #fff;
  letter-spacing: 0.03em;
}
.ps-device-meta {
  font-size: 12px;
  color: var(--gray-500, #64748b);
  margin-top: 2px;
}

.ps-empty-state {
  font-size: 13px;
  color: var(--gray-500, #64748b);
  padding: 16px;
  text-align: center;
  font-style: italic;
}

/* Dark mode for Profile Settings is handled by the token value-swap — the
   base .ps-* rules already reference --gray-* / --surface-base correctly.
   (The previous override block here used the inverted-gray convention and
   produced light surfaces under the Carbon scheme, so it was removed.)
   Intentionally-dark sidebar + the light 2FA badge are re-pointed in the
   main dark-mode section above. */

/* ════════════════════════════════════════════════════════════════════
   METRICS WIDGET GRID  (mw-*)  ·  token-driven, works in light + dark
   Component accents alias existing semantic tokens; purple has no semantic
   token in the app, so the de-facto brand purple is used (lightened in dark).
   ════════════════════════════════════════════════════════════════════ */
:root {
  --mw-accent-team: #7c3aed;
}
[data-theme='dark'] {
  --mw-accent-team: #a78bfa;
}

#view-metrics .view-topbar {
  gap: 10px;
}
.view-topbar-spacer {
  flex: 1;
}

/* ── Global toolbar ── */
.mw-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--surface-header);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mw-tgroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mw-tgroup > label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
}
.mw-tgroup-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mw-custom-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mw-range-sep {
  color: var(--text-faint);
}
.mw-select {
  height: 32px;
  padding: 0 9px;
  font-size: 13px;
  color: var(--input-text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
}

/* ── Tabs ── */
.mw-tabbar {
  display: flex;
  gap: 4px;
  padding: 10px 20px 0;
  background: var(--surface-header);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mw-tab {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.mw-tab:hover {
  color: var(--text-primary);
}
.mw-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* ── Grid (scroll region) — free-flow; each card carries its own px size ── */
.mw-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 16px;
  padding: 18px 20px 40px;
}
.mw-tab-empty {
  width: 100%;
  text-align: center;
  color: var(--text-faint);
  padding: 60px 20px;
  font-size: 13px;
}
.mw-tab-empty strong {
  color: var(--text-secondary);
}
/* Forced row break: a zero-height full-width flex item that makes the next card
   wrap to a new row, so a row can be left partially filled (empty space at right). */
.mw-break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

/* ── Card — width/height set inline (px), freely resizable via the corner ── */
.mw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  border-top: 2px solid var(--blue);
  padding: 13px 15px 15px;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}
/* The card lifts into a floating ghost while being dragged (JS sets position:fixed
   + left/top to follow the cursor). */
.mw-card.mw-dragging {
  opacity: 0.92;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.28);
  cursor: grabbing;
  transform: rotate(1.2deg);
  transition: none;
}
/* Live-shift drop-slot placeholder: a dashed outline the size of the dragged card
   that other cards reflow around in real time. pointer-events:none so it stays
   transparent to drag hit-testing. */
.mw-card.mw-placeholder {
  border: 2px dashed var(--blue);
  background: var(--blue-light);
  border-top: 2px dashed var(--blue);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: none;
  pointer-events: none;
  opacity: 0.8;
}
/* Figma-style alignment guides shown while resizing a widget (JS toggles display) */
.mw-guide {
  position: fixed;
  z-index: 1500;
  pointer-events: none;
  background: #ec4899;
  box-shadow: 0 0 0 0.5px rgba(236, 72, 153, 0.5);
  display: none;
}
.mw-guide-v {
  width: 1.5px;
}
.mw-guide-h {
  height: 1.5px;
}

/* The header is the drag handle for reordering (pointer-based). touch-action:none
   keeps a touch-drag from scrolling the grid; the action buttons opt back out. */
.mw-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
/* Hardcoded (non-configurable) widgets: no drag/resize affordances. */
.mw-card-fixed .mw-head {
  cursor: default;
}
.mw-head:active {
  cursor: grabbing;
}
.mw-head .mw-icon-btn {
  cursor: pointer;
  touch-action: auto;
}
.mw-grip {
  display: flex;
  color: var(--text-faint);
  cursor: grab;
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.mw-grip svg {
  width: 14px;
  height: 14px;
}
.mw-grip:active {
  cursor: grabbing;
}
.mw-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mw-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
}
.mw-card:hover .mw-actions,
.mw-card:hover .mw-grip {
  opacity: 1;
}
.mw-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-faint);
}
.mw-icon-btn:hover {
  background: var(--surface-raised);
  color: var(--text-secondary);
}
.mw-icon-btn svg {
  width: 14px;
  height: 14px;
}
/* Filter icon turns blue when the widget has active filter conditions, so on
   hover it's obvious which cards are filtered. */
.mw-icon-btn.mw-filter-on {
  color: var(--blue);
}
.mw-icon-btn.mw-filter-on:hover {
  color: var(--blue);
  background: var(--blue-light);
}
.mw-resize {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  color: var(--text-faint);
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.12s;
  touch-action: none;
}
.mw-card:hover .mw-resize {
  opacity: 0.7;
}
.mw-resize svg {
  width: 11px;
  height: 11px;
}
.mw-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.mw-chart {
  width: 100%;
}

/* ── KPI ── */
.mw-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.mw-kpi-value {
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.mw-kpi-label {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
}
.mw-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}
.mw-trend.up {
  color: var(--green);
  background: var(--green-light);
}
.mw-trend.down {
  color: var(--red);
  background: var(--red-light);
}
.mw-trend svg {
  width: 10px;
  height: 10px;
}
.mw-spark {
  margin: 6px -6px 0;
}

/* ── Scorecard table ── */
.mw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 2px;
}
.mw-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.mw-table th:hover {
  color: var(--text-secondary);
}
.mw-table th.num {
  text-align: right;
}
.mw-table th.mw-sorted-asc::after {
  content: ' ▲';
  font-size: 8px;
}
.mw-table th.mw-sorted-desc::after {
  content: ' ▼';
  font-size: 8px;
}
.mw-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.mw-table tbody tr {
  cursor: pointer;
}
.mw-table tbody tr:hover td {
  background: var(--surface-raised);
}
.mw-table tr:last-child td {
  border-bottom: none;
}
.mw-table td.name {
  color: var(--text-primary);
  font-weight: 600;
}
.mw-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mw-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.rate-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 11.5px;
}
.rate-ok {
  color: var(--green);
  background: var(--green-light);
}
.rate-warn {
  color: var(--amber);
  background: var(--amber-light);
}
.rate-bad {
  color: var(--red);
  background: var(--red-light);
}

/* ── Empty state ── */
.mw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 26px 16px;
  min-height: 120px;
  color: var(--text-faint);
}
.mw-empty svg {
  width: 32px;
  height: 32px;
  opacity: 0.55;
}
.mw-empty p {
  font-size: 12.5px;
  max-width: 260px;
  line-height: 1.45;
}

/* ── Settings panel — floating + draggable; sits over the grid so edits show live ── */
.mw-gear {
  position: fixed;
  top: 84px;
  left: 60px;
  z-index: 1000;
  width: 360px;
  max-width: 94vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mw-gear-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
  touch-action: none;
  background: var(--surface-header);
}
.mw-gear-drag-icon {
  color: var(--text-faint);
  flex-shrink: 0;
}
.mw-gear-title-label {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.mw-gear-close {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 5px;
}
.mw-gear-close:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.mw-gear-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  overflow: auto;
}
.mw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mw-field > label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-faint);
}
.mw-field .mw-select,
.mw-field input.mw-select {
  width: 100%;
}
.mw-subfield {
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-base);
}
.mw-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mw-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-base);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}
.mw-type-btn svg {
  width: 18px;
  height: 18px;
}
.mw-type-btn:hover {
  border-color: var(--border-strong);
}
.mw-type-btn.active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}
/* Y-axis calculation selector (Sum / Average / Median / Min / Max) */
.mw-calc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.mw-calc-btn {
  padding: 8px 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-base);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}
.mw-calc-btn:hover {
  border-color: var(--border-strong);
}
.mw-calc-btn.active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}
/* condition rows (Filters + Calculated-Rate conditions) */
.mw-cond-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mw-cond-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 5px;
  align-items: center;
}
.mw-cond-row .mw-select {
  font-size: 12px;
  height: 30px;
}
.mw-cond-noval {
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}
.mw-row-del {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: 13px;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  flex-shrink: 0;
}
.mw-row-del:hover {
  background: var(--red-light);
  color: var(--red);
}
.mw-add-btn {
  align-self: flex-start;
  border: 1px dashed var(--border-strong);
  background: none;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 2px;
}
.mw-add-btn:hover {
  background: var(--blue-light);
}
.mw-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  font-style: italic;
  padding: 2px 0;
}
/* benchmark rows */
.mw-bench-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mw-bench-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 5px;
  align-items: center;
}
.mw-bench-row input[type='color'],
.mw-custom-row input[type='color'] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
/* columns picker */
.mw-cols-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mw-col-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-base);
}
.mw-col-name {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-primary);
}
.mw-col-chip button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-faint);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 12px;
}
.mw-col-chip button:not(:disabled):hover {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.mw-col-chip button:disabled {
  opacity: 0.3;
  cursor: default;
}
/* customize colors — one swatch per series/stack-group, a Color All shortcut on
   top, and the individual pickers tucked into a collapsible panel below it */
.mw-custom-all {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mw-custom-all input[type='color'] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.mw-custom-allbtn {
  border: 1px solid var(--border-strong);
  background: var(--surface-base);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.mw-custom-allbtn:hover {
  background: var(--surface-raised);
}
.mw-custom-panel {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mw-custom-panel > summary {
  cursor: pointer;
  list-style: none;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
}
.mw-custom-panel > summary::-webkit-details-marker {
  display: none;
}
.mw-custom-panel > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  font-size: 9px;
  transition: transform 0.15s;
}
.mw-custom-panel[open] > summary::before {
  transform: rotate(90deg);
}
.mw-custom-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 10px 10px;
  max-height: 220px;
  overflow: auto;
}
.mw-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mw-custom-name {
  font-size: 12.5px;
  color: var(--text-secondary);
}
/* "Start on a new row" checkbox — opt out of the uppercase field-label styling */
.mw-field > label.mw-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
  cursor: pointer;
}
.mw-field > label.mw-check input {
  width: 15px;
  height: 15px;
  cursor: pointer;
}
/* multi-part condition value cell (date range, in-the-next number + unit, etc.) */
.mw-cond-multi {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.mw-cond-multi .mw-select {
  min-width: 0;
  flex: 1;
}
.mw-cond-row select.mw-multi {
  height: auto;
  min-height: 30px;
  max-height: 96px;
  padding: 3px 6px;
}
.mw-gear-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-header);
}

/* ── Drill-down panel ── */
.mw-drill {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  background: var(--surface-overlay);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 900;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}
.mw-drill.open {
  transform: none;
}
.mw-drill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
}
.mw-drill-head h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.mw-drill-close {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 5px;
}
.mw-drill-close:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.mw-drill-body {
  flex: 1;
  overflow: auto;
  padding: 10px 12px;
}
.mw-drill-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 4px 8px;
}
.mw-drill-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}
.mw-drill-row {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--surface-base);
}
.mw-drill-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}
.mw-drill-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.mw-drill-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.mw-drill-status {
  padding: 1px 7px;
  border-radius: 20px;
  font-weight: 600;
}

/* ── Responsive ── */
/* Cards carry explicit px sizes; on narrow screens max-width:100% (set on
   .mw-card) lets them shrink and the flex grid wraps automatically. */
@media (max-width: 680px) {
  .mw-card {
    width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════════════
   Team Activity view — admin/owner ticket-touch audit
   All colors use semantic tokens so dark mode swaps automatically.
   ════════════════════════════════════════════════════════════ */
.ta-datepick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ta-datepick label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.ta-range-select,
.ta-date-input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  color-scheme: light dark;
}
.ta-range-select {
  cursor: pointer;
  padding-right: 8px;
}
.ta-range-select:focus,
.ta-date-input:focus {
  outline: none;
  border-color: var(--blue);
}
.ta-custom-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ta-custom-range[hidden] {
  display: none;
}
.ta-range-sep {
  color: var(--text-faint);
  font-size: 13px;
}

.ta-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ta-user-card {
  background: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ta-user-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
.ta-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.ta-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ta-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.ta-user-stat {
  font-size: 11px;
  color: var(--text-secondary);
}

.ta-ticket-list {
  display: flex;
  flex-direction: column;
}
.ta-ticket-row {
  border-bottom: 1px solid var(--border);
}
.ta-ticket-row:last-child {
  border-bottom: none;
}
.ta-ticket-row.ta-expandable {
  cursor: pointer;
}
.ta-ticket-row.ta-expandable:hover {
  background: var(--surface-raised);
}
.ta-ticket-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
.ta-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}
.ta-ticket-row.ta-open .ta-chevron {
  transform: rotate(90deg);
}
.ta-chevron-spacer {
  width: 14px;
  flex-shrink: 0;
}
.ta-ticket-name {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 240px;
  font-family: inherit;
}
.ta-ticket-name:hover {
  text-decoration: underline;
}
.ta-ticket-sub {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ta-count-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.ta-detail-list {
  list-style: none;
  margin: 0;
  padding: 2px 16px 10px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ta-detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.ta-detail-action {
  color: var(--text-primary);
  font-weight: 500;
}
.ta-detail-time {
  color: var(--text-secondary);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.ta-empty {
  margin: 48px auto;
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-faint);
}
.ta-empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.6;
}
.ta-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}
.ta-empty-sub {
  font-size: 13px;
  color: var(--text-faint);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   Awaiting Callback / Pending Info workflow
   All colors via CSS variables → dark mode follows the token swap.
   ════════════════════════════════════════════════════════════ */

/* ── Call Disposition ("Log Call") modal ── */
.cl-attempt-line {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-light);
  padding: 6px 10px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  display: inline-block;
}
.cl-dispositions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cl-disp-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-base);
  transition:
    border-color 0.12s,
    background 0.12s;
}
.cl-disp-opt:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}
.cl-disp-opt input {
  accent-color: var(--blue);
}
.cl-disp-opt span {
  font-size: 14px;
  color: var(--text-primary);
}
.cl-conditional {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.cl-required {
  color: var(--red, #dc2626);
  font-weight: 700;
}
.cl-toggle-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.cl-toggle-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-base);
  font-size: 13px;
  color: var(--text-primary);
}
.cl-toggle-opt:hover {
  border-color: var(--border-strong);
}
.cl-toggle-opt input {
  accent-color: var(--blue);
}
.cl-empty {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Pending Info ("What are you waiting for?") modal ── */
.pi-intro {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.pi-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pi-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-base);
  transition:
    border-color 0.12s,
    background 0.12s;
}
.pi-opt:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}
.pi-opt input {
  accent-color: var(--blue);
}
.pi-opt span {
  font-size: 14px;
  color: var(--text-primary);
}
.pi-other-wrap {
  margin-top: 12px;
}
.pi-empty {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Pending-items banner (Overview tab) ── */
.tsp-pending-items {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
}
.tsp-pending-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.tsp-pending-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tsp-pending-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-base);
  border: 1px solid var(--border-strong);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ── Call-attempts chip (Customer Contact) ── */
.tsp-call-attempts {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ── Settings: Call Dispositions rows ── */
.svcfg-disp-row {
  flex-wrap: wrap;
  gap: 8px;
}
.svcfg-disp-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.svcfg-disp-field span {
  white-space: nowrap;
}
.svcfg-disp-select {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--text-primary);
}
.svcfg-disp-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.svcfg-disp-check input {
  accent-color: var(--blue);
}

/* Option/label text in workflow modals should read in normal case, not inherit the
   app's uppercased field-label transform. */
.cl-disp-opt span,
.cl-toggle-opt,
.cl-toggle-opt span,
.pi-opt span,
.pi-intro,
.tsp-pending-chip,
.svcfg-disp-field,
.svcfg-disp-field span,
.svcfg-disp-check {
  text-transform: none;
  letter-spacing: normal;
}

/* Only transition the border — a var()-based background can't interpolate cleanly
   across a theme swap and could otherwise stick mid-transition. */
.cl-disp-opt,
.pi-opt {
  transition: border-color 0.12s;
}

/* ── Lock Technician (ticket scheduling tab) ───────────────────────── */
.tsp-lock-tech-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tsp-lock-tech-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: normal;
}
.tsp-lock-tech-toggle input {
  accent-color: var(--blue);
  width: 15px;
  height: 15px;
}
.tsp-lock-tech-select-wrap[hidden] {
  display: none;
}
/* First tech slot pinned to the locked technician (full-day / multi-day) */
.tsp-tech-slot-locked .tsp-tech-slot-sel {
  opacity: 0.85;
  cursor: not-allowed;
  background: var(--surface-inset, var(--gray-100));
}
.tsp-slot-lock-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
}
.tsp-slot-lock-icon svg {
  width: 14px;
  height: 14px;
}

/* ── Technician-lock reassignment modal ────────────────────────────── */
.lock-reassign-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── Reroute split button + menu (dispatch route bar) ──────────────── */
.reroute-split {
  position: relative;
  display: inline-flex;
}
.reroute-split-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* Settled route → main Reroute is a no-op; gray it out and block interaction. */
.reroute-split-main:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
/* Smart Reroute caret is locked — always grayed, non-interactive, with a lock affordance. */
.reroute-split-caret--locked {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.reroute-split-caret {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  padding-left: 6px;
  padding-right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.reroute-split-caret svg {
  width: 13px;
  height: 13px;
}
.reroute-split-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  min-width: 240px;
  background: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reroute-split-menu[hidden] {
  display: none;
}
.reroute-menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 8px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  width: 100%;
}
.reroute-menu-item:hover {
  background: var(--surface-inset, var(--gray-100));
}
.reroute-menu-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800, var(--text-primary));
}
.reroute-menu-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── Smart Reroute confirmation modal ──────────────────────────────── */
.sr-intro {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.sr-section {
  margin-top: 14px;
}
.sr-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.sr-saving {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  color: var(--green, #16a34a);
  background: var(--green-light, rgba(22, 163, 74, 0.12));
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
}
.sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sr-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.sr-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sr-move-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sr-tech {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sr-arrow {
  color: var(--text-secondary);
}
.sr-over-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--amber-light);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
}
/* Locked-stops section + geographic-mismatch flag */
.sr-mismatch-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--amber-light, #fef3c7);
  color: var(--ct-92400e, #92400e);
  border: 1px solid var(--cd-fcd34d, #fcd34d);
}
.sr-ok-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green-light, rgba(22, 163, 74, 0.12));
  color: var(--green, #16a34a);
}
/* Flip-proposal section — visually separated from the main moves */
.sr-flip-section {
  margin-top: 16px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}
.sr-flip-intro {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.sr-flip-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ════════════════════════════════════════════════════════════
   SETTINGS REDESIGN — shared design system
   Scoped to `.rd-scope`; never leaks into out-of-scope panels.
   Light by default; dark-mode overrides at the very bottom.
   ════════════════════════════════════════════════════════════ */
.rd-scope {
  --rd-bg: #ffffff;
  --rd-text: #374151;
  --rd-muted: #6b7280;
  --rd-label: #9ca3af;
  --rd-faint: #9ca3af;
  --rd-border: #e5e7eb;
  --rd-border-faint: #f0f2f5;
  --rd-row-sep: #f5f5f5;
  --rd-primary: var(--blue);
  --rd-primary-ink: var(--blue-dark);
  --rd-primary-tint: color-mix(in srgb, var(--blue) 7%, #ffffff);
  --rd-danger: #dc2626;
  --rd-danger-border: #fca5a5;
  --rd-ok: #16a34a;
  --rd-warn: #d97706;
  --rd-stat-bg: #f9fafb;
  --rd-input-bg: #ffffff;
  color: var(--rd-text);
  font-size: 12px;
}
.rd-scope *,
.rd-scope *::before,
.rd-scope *::after {
  box-sizing: border-box;
}

/* Page title + subtitle (Integrations, Templates, Outreach, Feedback…) */
.rd-page-head {
  margin: 0 0 20px;
}
.rd-page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #111827;
  letter-spacing: -0.01em;
  text-align: left;
}
.rd-page-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--rd-muted);
  line-height: 1.5;
}

/* Section header — 13px / 500 / #374151 with hairline rule */
.rd-section {
  margin: 0 0 28px;
}
.rd-section:last-child {
  margin-bottom: 4px;
}
.rd-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  border-bottom: 1px solid var(--rd-border-faint);
  border-left: 3px solid var(--rd-primary);
  padding-bottom: 8px;
  padding-left: 10px;
  margin-bottom: 10px;
}
.rd-section-head-l {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.rd-section-title {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
.rd-section-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--rd-label);
}
.rd-section-desc {
  margin: -4px 0 14px;
  font-size: 11px;
  color: var(--rd-muted);
  line-height: 1.5;
}

/* Field label — 9px uppercase */
.rd-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 500;
  margin: 0 0 5px;
}
.rd-field {
  margin-bottom: 14px;
}
.rd-field:last-child {
  margin-bottom: 0;
}
.rd-field-row {
  display: flex;
  gap: 14px;
}
.rd-field-row > .rd-field {
  flex: 1;
}
.rd-hint {
  margin: 5px 0 0;
  font-size: 10px;
  color: var(--rd-label);
  line-height: 1.5;
}

/* Inputs / selects / textareas */
.rd-input,
.rd-scope input[type='text'].rd-input,
.rd-scope select.rd-input,
.rd-scope textarea.rd-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--rd-text);
  font-family: inherit;
  background: var(--rd-input-bg, #ffffff);
  outline: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.rd-input:focus {
  border-color: var(--rd-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}
.rd-input::placeholder {
  color: var(--rd-label);
}
textarea.rd-input {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
}

/* Buttons */
.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  border-radius: 5px;
  padding: 7px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
  white-space: nowrap;
}
.rd-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.rd-btn-primary {
  background: var(--rd-primary);
  color: #fff;
}
.rd-btn-primary:hover {
  background: var(--blue-dark);
}
.rd-btn-secondary {
  background: #fff;
  border-color: var(--rd-border);
  color: var(--rd-muted);
}
.rd-btn-secondary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.rd-btn-danger {
  background: #fff;
  border-color: var(--rd-danger-border);
  color: var(--rd-danger);
}
.rd-btn-danger:hover {
  background: #fef2f2;
}
.rd-btn-sm {
  padding: 5px 10px;
  font-size: 10px;
}

/* Icon buttons (edit / trash / overflow) */
.rd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--rd-muted);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.rd-icon-btn svg {
  width: 15px;
  height: 15px;
}
.rd-icon-btn:hover {
  background: #f3f4f6;
  color: #374151;
}
.rd-icon-btn.rd-icon-danger:hover {
  background: #fef2f2;
  color: var(--rd-danger);
}

/* Toggle switch — 26×15 with 12px knob */
.rd-switch {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 15px;
  flex-shrink: 0;
}
.rd-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.rd-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: #d1d5db;
  transition: background 0.15s;
  cursor: pointer;
}
.rd-switch-track::after {
  content: '';
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.rd-switch input:checked + .rd-switch-track {
  background: var(--rd-primary);
}
.rd-switch input:checked + .rd-switch-track::after {
  transform: translateX(11px);
}
/* Dark mode: the OFF track (#D1D5DB) reads as a bright bar on Carbon — drop it to a
   subtle border-token surface so the toggle sits in line with the app's dark controls. */
[data-theme='dark'] .rd-switch-track {
  background: var(--border-strong);
}

/* Card + list containers */
.rd-card {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  background: #fff;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.rd-card:hover {
  background: var(--rd-stat-bg);
  border-color: #d1d5db;
}
.rd-list {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.rd-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rd-row-sep);
}
.rd-list-row:last-child {
  border-bottom: none;
}

/* A toggle/setting row: label block on left, control on right */
.rd-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rd-row-sep);
}
.rd-setting-row:last-child {
  border-bottom: none;
}
.rd-setting-label {
  font-size: 12px;
  color: var(--rd-text);
  font-weight: 500;
}
.rd-setting-label small {
  display: block;
  font-weight: 400;
  font-size: 10px;
  color: var(--rd-label);
  margin-top: 2px;
  line-height: 1.5;
}

/* Inline number/text setting (input + unit text) */
.rd-inline-set {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0;
  font-size: 12px;
  color: var(--rd-muted);
}
.rd-inline-set .rd-input {
  width: 72px;
  flex: none;
}

/* Save row */
.rd-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.rd-saved {
  font-size: 11px;
  color: var(--rd-ok);
  font-weight: 500;
}

/* Status dot */
.rd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.rd-dot-green {
  background: var(--rd-ok);
}
.rd-dot-amber {
  background: var(--rd-warn);
}
.rd-dot-gray {
  background: #d1d5db;
}
.rd-dot-red {
  background: var(--rd-danger);
}

/* Pill badges */
.rd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.4;
}

/* Empty states */
.rd-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--rd-label);
  font-size: 12px;
}

/* Overflow (⋯) menu */
.rd-menu-wrap {
  position: relative;
}
.rd-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 150px;
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
  padding: 4px;
}
.rd-menu[hidden] {
  display: none;
}
.rd-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--rd-text);
  padding: 7px 9px;
  border-radius: 6px;
}
.rd-menu-item:hover {
  background: #f3f4f6;
}
.rd-menu-item.rd-menu-danger {
  color: var(--rd-danger);
}
.rd-menu-item.rd-menu-danger:hover {
  background: #fef2f2;
}

/* ── Dark-mode overrides for the redesign system ── */
[data-theme='dark'] .rd-scope {
  --rd-bg: var(--surface-base);
  --rd-text: var(--text-primary);
  --rd-muted: var(--text-secondary);
  --rd-label: var(--text-tertiary, #8a8f98);
  --rd-border: var(--border);
  --rd-border-faint: var(--border);
  --rd-row-sep: var(--border);
  --rd-stat-bg: rgba(255, 255, 255, 0.03);
  --rd-input-bg: rgba(255, 255, 255, 0.04);
  --rd-primary-tint: color-mix(in srgb, var(--blue) 18%, transparent);
  /* Brand-derived light-blue ink for legible accent text on dark surfaces
     (var(--blue-dark) is too dark to read on Carbon). Still follows the brand hue. */
  --rd-primary-ink: color-mix(in srgb, var(--blue) 55%, #ffffff);
}
[data-theme='dark'] .rd-page-title {
  color: var(--text-primary);
}
[data-theme='dark'] .rd-section-head,
[data-theme='dark'] .rd-section-title {
  color: var(--text-primary);
}
[data-theme='dark'] .rd-input {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}
[data-theme='dark'] .rd-card,
[data-theme='dark'] .rd-list {
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}
[data-theme='dark'] .rd-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.16);
}
[data-theme='dark'] .rd-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
}
[data-theme='dark'] .rd-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme='dark'] .rd-btn-danger {
  background: transparent;
}
[data-theme='dark'] .rd-icon-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}
[data-theme='dark'] .rd-menu {
  background: var(--surface-raised, #1c1c1f);
  border-color: var(--border);
}
[data-theme='dark'] .rd-menu-item {
  color: var(--text-primary);
}
[data-theme='dark'] .rd-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ── §1 Company — Identity / Brand Colors / Login Background / Locations ── */
.rd-logo-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.rd-logo-preview {
  width: 132px;
  height: 56px;
  flex-shrink: 0;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  overflow: hidden;
}
.rd-logo-preview img {
  max-height: 36px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.rd-logo-preview .blp-icon {
  color: var(--rd-muted);
  width: 18px;
  height: 18px;
}
.rd-logo-preview .blp-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-text);
}
.rd-logo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}
.rd-logo-actions .rd-hint {
  width: 100%;
  margin: 2px 0 0;
}
.rd-logo-upload {
  cursor: pointer;
}
.rd-logo-upload input[type='file'] {
  display: none;
}

.rd-color-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.rd-color-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rd-row-sep);
}
.rd-color-row:last-child {
  border-bottom: none;
}
.rd-color-swatch {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  cursor: pointer;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}
.rd-color-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}
.rd-color-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
}
.rd-color-swatch::-moz-color-swatch {
  border: none;
  border-radius: 5px;
}
.rd-color-meta {
  flex: 1;
  min-width: 0;
}
.rd-color-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
}
.rd-color-desc {
  font-size: 10px;
  color: var(--rd-label);
  margin-top: 1px;
}
.rd-color-hexwrap {
  position: relative;
  flex-shrink: 0;
}
.rd-color-hex {
  width: 96px;
  box-sizing: border-box;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  padding: 6px 24px 6px 9px;
  font-size: 12px;
  color: var(--rd-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #fff;
  outline: none;
  text-transform: uppercase;
}
.rd-color-hex:focus {
  border-color: var(--rd-primary);
}
/* JS overwrites the status span class to `brand-hex-status …`, so style on that. */
.rd-color-hexwrap .brand-hex-status {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
}
.rd-color-hexwrap .brand-hex-valid {
  color: var(--rd-ok);
}
.rd-color-hexwrap .brand-hex-invalid {
  color: var(--rd-danger);
}

.rd-loginbg-thumb {
  width: 132px;
  height: 80px;
  flex-shrink: 0;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
}
.rd-loginbg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rd-loginbg-thumb .rd-loginbg-empty,
.rd-loginbg-thumb .brand-login-photo-empty {
  font-size: 10px;
  color: var(--rd-label);
}
.rd-opacity-field {
  max-width: 380px;
}
.rd-opacity-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rd-opacity-slider {
  flex: 1;
  accent-color: var(--rd-primary);
}
.rd-opacity-val {
  font-size: 11px;
  color: var(--rd-muted);
  width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rd-loc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-loc-card {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}
.rd-loc-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.rd-loc-title {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-loc-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
.rd-loc-tools .rd-icon-btn[disabled] {
  opacity: 0.3;
  cursor: default;
}
.rd-loc-tools .rd-icon-btn[disabled]:hover {
  background: transparent;
  color: var(--rd-muted);
}
.rd-loc-fields {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 12px;
}
.rd-loc-sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--rd-label);
  font-size: 9px;
}
@media (max-width: 760px) {
  .rd-loc-fields {
    grid-template-columns: 1fr;
  }
}

[data-theme='dark'] .rd-color-list,
[data-theme='dark'] .rd-loc-card {
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}
[data-theme='dark'] .rd-color-hex {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}
[data-theme='dark'] .rd-logo-preview {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .rd-loginbg-thumb {
  background: rgba(255, 255, 255, 0.03);
}

/* ── Generic data table (Feedback, Team Members) ── */
.rd-table-wrap {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.rd-table {
  width: 100%;
  border-collapse: collapse;
}
.rd-table thead th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 500;
  text-align: left;
  padding: 9px 12px;
  background: #fcfcfd;
  border-bottom: 1px solid var(--rd-border-faint);
  white-space: nowrap;
}
.rd-table tbody td {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--rd-text);
  border-bottom: 1px solid var(--rd-row-sep);
  vertical-align: middle;
}
.rd-table tbody tr:last-child td {
  border-bottom: none;
}
.rd-table tbody tr.rd-row-click {
  cursor: pointer;
}
.rd-table tbody tr.rd-row-click:hover {
  background: #fafafa;
}
.rd-cell-strong {
  font-weight: 500;
  color: var(--rd-text);
}
.rd-cell-muted {
  color: var(--rd-muted);
}
.rd-status-select {
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: inherit;
  background: #fff;
}
[data-theme='dark'] .rd-table-wrap {
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}
[data-theme='dark'] .rd-table thead th {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .rd-table tbody tr.rd-row-click:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .rd-status-select {
  background: rgba(255, 255, 255, 0.04);
}

/* ── §7 Clients → Tags ── */
.rd-grip {
  display: inline-flex;
  flex-shrink: 0;
  color: #c4c9d2;
  cursor: grab;
}
.rd-grip svg {
  width: 16px;
  height: 16px;
}
.rd-tag-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rd-tag-name {
  flex: 1;
  font-size: 12px;
  color: var(--rd-text);
  min-width: 0;
}
.rd-tag-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.tag-setting-row.tag-row-dragging {
  opacity: 0.5;
}
.tag-setting-row.tag-row-over {
  box-shadow: inset 0 2px 0 var(--rd-primary);
}
.rd-tag-addform {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  background: #f9fafb;
}
.rd-tag-addform[hidden] {
  display: none;
}
.rd-tag-addform .rd-input {
  flex: 1;
  min-width: 140px;
}
[data-theme='dark'] .rd-tag-addform {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .rd-grip {
  color: var(--text-tertiary, #6b7280);
}

/* ── Dept label chip (Forms / Documents page titles) ── */
.rd-dept-label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--rd-muted);
  background: #f3f4f6;
  border: 1px solid var(--rd-border);
  padding: 2px 8px;
  border-radius: 999px;
}
[data-theme='dark'] .rd-dept-label {
  background: rgba(255, 255, 255, 0.05);
}

/* ── Generic card list (Documents, Forms) ── */
.rd-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── §10 Documents ── */
.rd-doc-card,
.rd-form-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}
.rd-doc-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  color: #dc2626;
}
.rd-doc-icon svg {
  width: 18px;
  height: 18px;
}
.rd-doc-info,
.rd-form-info {
  flex: 1;
  min-width: 0;
}
.rd-doc-name,
.rd-form-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
}
.rd-doc-meta,
.rd-form-meta {
  font-size: 11px;
  color: var(--rd-muted);
  margin-top: 2px;
}
.rd-doc-actions,
.rd-form-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
[data-theme='dark'] .rd-doc-card,
[data-theme='dark'] .rd-form-card {
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}
[data-theme='dark'] .rd-doc-icon {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
}

/* ── §9 Forms ── */
.rd-form-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  color: var(--blue);
}
.rd-form-icon svg {
  width: 18px;
  height: 18px;
}
.rd-form-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
[data-theme='dark'] .rd-form-icon {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  color: #93c5fd;
}

/* Forms page — vertical stack, right-aligned action bar, 2-col card grid */
.rd-form-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
#forms-list .rd-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.rd-form-card {
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.rd-form-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
}
[data-theme='dark'] .rd-form-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.035);
}
@media (max-width: 640px) {
  #forms-list .rd-card-list {
    grid-template-columns: 1fr;
  }
}

/* ── Shared: page-head with right-aligned action; empty-state call-to-action ── */
.rd-page-head-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.rd-page-head-flex > div {
  min-width: 0;
}
.rd-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.rd-empty-title {
  font-size: 13px;
  color: var(--rd-muted);
}

/* ── §10 Documents — 2-col card grid (redesign), matching Outreach card style ── */
#doc-template-list .rd-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#doc-template-list .rd-doc-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
#doc-template-list .rd-doc-card:hover {
  border-color: #d1d5db;
  background: var(--rd-stat-bg);
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
}
#doc-template-list .rd-doc-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
#doc-template-list .rd-doc-top .rd-doc-icon {
  width: 30px;
  height: 30px;
}
#doc-template-list .rd-doc-top .rd-doc-icon svg {
  width: 16px;
  height: 16px;
}
#doc-template-list .rd-doc-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#doc-template-list .rd-doc-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
#doc-template-list .rd-doc-filename {
  font-size: 11px;
  color: var(--rd-muted);
  word-break: break-word;
}
#doc-template-list .rd-doc-counts {
  font-size: 10px;
  color: var(--rd-label);
}
@media (max-width: 640px) {
  #doc-template-list .rd-doc-grid {
    grid-template-columns: 1fr;
  }
}
[data-theme='dark'] #doc-template-list .rd-doc-card {
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}
[data-theme='dark'] #doc-template-list .rd-doc-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

/* ── §4 Communications (Templates / Outreach) ── */
.rd-comm-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}
.rd-comm-main {
  flex: 1;
  min-width: 0;
}
.rd-comm-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
}
.rd-comm-sub {
  font-size: 11px;
  color: var(--rd-muted);
  margin-top: 4px;
  word-break: break-word;
}
.rd-comm-meta {
  font-size: 10px;
  color: var(--rd-label);
  margin-top: 6px;
}
.rd-comm-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.rd-rule-card {
  align-items: center;
}
.rd-rule-card .rd-switch {
  margin-top: 2px;
}
.rd-rule-off {
  opacity: 0.62;
}
.rd-rule-logic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.rd-kw {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--rd-label);
}
.rd-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-chip-blue {
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  color: var(--blue-dark);
}
.rd-chip-green {
  background: #ecfdf5;
  color: #065f46;
}
[data-theme='dark'] .rd-comm-card {
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}
[data-theme='dark'] .rd-chip-blue {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  color: #93c5fd;
}
[data-theme='dark'] .rd-chip-green {
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
}

/* ── §4 Outreach rules — 2-col card grid (redesign) ── */
#comm-rule-list.rd-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.rd-rule-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.rd-rule-card:hover {
  border-color: #d1d5db;
  background: var(--rd-stat-bg);
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
}
.rd-rule-off {
  opacity: 0.6;
}
.rd-rule-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rd-rule-titlewrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.rd-rule-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-rule-head .rd-comm-actions {
  margin-left: auto;
  gap: 6px;
}
.rd-rule-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-rule-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 11px;
  color: var(--rd-muted);
}
.rd-badge-paused {
  background: #fef3c7;
  color: #92400e;
}
@media (max-width: 640px) {
  #comm-rule-list.rd-rule-grid {
    grid-template-columns: 1fr;
  }
}
[data-theme='dark'] .rd-rule-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .rd-badge-paused {
  background: rgba(217, 119, 6, 0.22);
  color: #fcd34d;
}

/* ── §4 Notifications — align the existing .ns-* panel with the design system ── */
#notif-settings-content.rd-scope .ns-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
#notif-settings-content.rd-scope .ns-role-defaults-section,
#notif-settings-content.rd-scope .ns-rules-section,
#notif-settings-content.rd-scope .ns-history-section {
  padding: 0;
  margin-top: 26px;
}
#notif-settings-content.rd-scope .ns-section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-text);
  border-bottom: 1px solid var(--rd-border-faint);
  border-left: 3px solid var(--rd-primary);
  padding-bottom: 8px;
  padding-left: 10px;
  margin-bottom: 4px;
}
#notif-settings-content.rd-scope .ns-section-desc {
  font-size: 11px;
  color: var(--rd-muted);
  margin: 6px 0 14px;
}
#notif-settings-content.rd-scope .ns-table {
  font-size: 12px;
}
#notif-settings-content.rd-scope .ns-table th {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  border-bottom: 1px solid var(--rd-border-faint);
}
#notif-settings-content.rd-scope .ns-group-row td {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  border-bottom: 1px solid var(--rd-row-sep);
}
#notif-settings-content.rd-scope .ns-group-label {
  background: var(--rd-stat-bg);
}
#notif-settings-content.rd-scope .ns-event-row td {
  border-bottom: 1px solid var(--rd-row-sep);
}
#notif-settings-content.rd-scope .ns-event-row:hover td {
  background: var(--rd-stat-bg);
}
#notif-settings-content.rd-scope .ns-event-desc {
  font-size: 10px;
  color: var(--rd-label);
}
#notif-settings-content.rd-scope .ns-toggle-pill {
  width: 26px;
  height: 15px;
  border-radius: 8px;
  background: #d1d5db;
}
#notif-settings-content.rd-scope .ns-toggle-pill::after {
  width: 12px;
  height: 12px;
  top: 1.5px;
  left: 1.5px;
  background: #fff;
}
#notif-settings-content.rd-scope .ns-toggle-wrap input:checked ~ .ns-toggle-pill {
  background: var(--rd-primary);
}
#notif-settings-content.rd-scope .ns-toggle-wrap input:checked ~ .ns-toggle-pill::after {
  transform: translateX(11px);
}
[data-theme='dark'] #notif-settings-content.rd-scope .ns-toggle-pill {
  background: rgba(255, 255, 255, 0.2);
}

/* ── §4 Notifications — category sections, sticky headers, role-toggle grid (redesign) ── */
#notif-settings-content.rd-scope .ns-cats {
  margin-top: 8px;
}
#notif-settings-content.rd-scope .ns-cat {
  margin: 0 0 16px;
}
#notif-settings-content.rd-scope .ns-cat:last-child {
  margin-bottom: 4px;
}
#notif-settings-content.rd-scope .ns-cat-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  height: 32px;
  background: var(--rd-stat-bg);
  border-left: 3px solid var(--rd-primary);
  border-radius: 0 6px 6px 0;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-text);
}
#notif-settings-content.rd-scope .ns-colhead {
  position: sticky;
  top: 32px;
  z-index: 3;
  display: grid;
  align-items: center;
  gap: 0 8px;
  background: var(--rd-bg);
  padding: 7px 12px 6px;
  border-bottom: 1px solid var(--rd-border-faint);
}
#notif-settings-content.rd-scope .ns-ch-role {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rd-muted);
  text-align: center;
}
#notif-settings-content.rd-scope .ns-evt {
  display: grid;
  align-items: center;
  gap: 0 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rd-row-sep);
}
#notif-settings-content.rd-scope .ns-evt:last-child {
  border-bottom: none;
}
#notif-settings-content.rd-scope .ns-evt:hover {
  background: var(--rd-stat-bg);
}
#notif-settings-content.rd-scope .ns-evt-name {
  min-width: 0;
}
#notif-settings-content.rd-scope .ns-evt-name-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
#notif-settings-content.rd-scope .ns-label-input {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: -6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
}
#notif-settings-content.rd-scope .ns-label-input:hover {
  border-color: var(--rd-border);
}
#notif-settings-content.rd-scope .ns-label-input:focus {
  outline: none;
  border-color: var(--rd-primary);
  background: var(--rd-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}
/* Regroup field is hover-only (also revealed on keyboard focus); absolutely
   positioned so the label keeps full width with no layout shift. Handler intact. */
#notif-settings-content.rd-scope .ns-group-input {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 104px;
  text-align: left;
  background: var(--rd-bg);
  border: 1px solid var(--rd-border);
  border-radius: 5px;
  padding: 3px 7px;
  font-family: inherit;
  font-size: 10px;
  color: var(--rd-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
#notif-settings-content.rd-scope .ns-evt:hover .ns-group-input {
  opacity: 1;
  pointer-events: auto;
}
#notif-settings-content.rd-scope .ns-group-input:focus {
  opacity: 1;
  pointer-events: auto;
  outline: none;
  border-color: var(--rd-primary);
  color: var(--rd-text);
  background: var(--rd-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}
#notif-settings-content.rd-scope .ns-event-desc {
  font-size: 10px;
  color: var(--rd-muted);
  line-height: 1.4;
  margin-top: 2px;
  max-width: 480px;
}
#notif-settings-content.rd-scope .ns-evt-role {
  display: flex;
  justify-content: center;
}
#notif-settings-content.rd-scope .ns-evt-act {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s;
}
#notif-settings-content.rd-scope .ns-evt:hover .ns-evt-act,
#notif-settings-content.rd-scope .ns-evt-act:focus-within {
  opacity: 1;
}
#notif-settings-content.rd-scope .ns-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rd-label);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 5px;
  transition:
    color 0.12s,
    background 0.12s;
}
#notif-settings-content.rd-scope .ns-del-btn:hover {
  color: var(--rd-danger);
  background: #fef2f2;
}

/* Notifications — restyle the preserved add-row, rules + history to the design system */
#notif-settings-content.rd-scope .ns-add-row {
  gap: 8px;
  margin-top: 14px;
}
#notif-settings-content.rd-scope .ns-new-input {
  height: auto;
  padding: 7px 10px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--rd-text);
  background: var(--rd-bg);
}
#notif-settings-content.rd-scope .ns-new-input:focus {
  outline: none;
  border-color: var(--rd-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}
#notif-settings-content.rd-scope .ns-rules-list {
  gap: 10px;
  margin-top: 10px;
}
#notif-settings-content.rd-scope .ns-rules-empty {
  border: 1px dashed var(--rd-border);
  border-radius: 8px;
  background: var(--rd-stat-bg);
  color: var(--rd-muted);
  font-size: 12px;
  padding: 22px;
}
#notif-settings-content.rd-scope .ns-rule-card {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  background: var(--rd-bg);
  padding: 12px 14px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
#notif-settings-content.rd-scope .ns-rule-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
}
#notif-settings-content.rd-scope .ns-rule-card.ns-rule-disabled {
  opacity: 0.6;
}
#notif-settings-content.rd-scope .ns-rule-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-text);
  margin-bottom: 4px;
}
#notif-settings-content.rd-scope .ns-rule-sentence {
  font-size: 11px;
  color: var(--rd-muted);
  line-height: 1.7;
}
#notif-settings-content.rd-scope .ns-history-controls {
  margin-bottom: 12px;
}
#notif-settings-content.rd-scope .ns-hist-select {
  height: auto;
  padding: 6px 9px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--rd-text);
  background: var(--rd-bg);
}
#notif-settings-content.rd-scope .ns-hist-select:focus {
  outline: none;
  border-color: var(--rd-primary);
}
#notif-settings-content.rd-scope .ns-history-list {
  gap: 0;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  max-height: 380px;
}
#notif-settings-content.rd-scope .ns-hist-item {
  border: none;
  border-bottom: 1px solid var(--rd-row-sep);
  border-radius: 0;
  background: var(--rd-bg);
  padding: 10px 13px;
}
#notif-settings-content.rd-scope .ns-hist-item:last-child {
  border-bottom: none;
}
#notif-settings-content.rd-scope .ns-hist-item.ns-hist-unread {
  background: var(--rd-primary-tint);
  border-color: var(--rd-row-sep);
}
#notif-settings-content.rd-scope .ns-hist-user {
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-text);
}
#notif-settings-content.rd-scope .ns-hist-type {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--rd-stat-bg);
  color: var(--rd-muted);
}
#notif-settings-content.rd-scope .ns-hist-time {
  font-size: 11px;
  color: var(--rd-label);
}
#notif-settings-content.rd-scope .ns-hist-text {
  font-size: 12px;
  color: var(--rd-text);
}
#notif-settings-content.rd-scope .ns-hist-empty {
  color: var(--rd-muted);
  font-size: 12px;
}
[data-theme='dark'] #notif-settings-content.rd-scope .ns-cat-head {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] #notif-settings-content.rd-scope .ns-rule-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
}
[data-theme='dark'] #notif-settings-content.rd-scope .ns-del-btn:hover {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
}

/* ── Shared two-pane secondary nav (Roles & Permissions, Integrations detail) ── */
.rd-twopane {
  display: flex;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  min-height: 400px;
  background: #fff;
}
.rd-secnav {
  width: 158px;
  flex-shrink: 0;
  background: #fafafa;
  border-right: 1px solid var(--rd-border-faint);
  padding: 8px 6px;
  overflow-y: auto;
}
.rd-secnav-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rd-text);
  padding: 6px 8px 10px;
}
.rd-secnav-back {
  display: inline-flex;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rd-muted);
  padding: 2px;
  border-radius: 5px;
}
.rd-secnav-back:hover {
  background: #eef0f2;
  color: var(--rd-text);
}
.rd-secnav-back svg {
  width: 15px;
  height: 15px;
}
.rd-secnav-label-tiny {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 500;
  padding: 8px 8px 5px;
}
.rd-secnav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--rd-muted);
  padding: 7px 8px;
  border-radius: 0 6px 6px 0;
}
.rd-secnav-item:hover {
  background: #f1f3f5;
}
.rd-secnav-item.active {
  border-left-color: var(--rd-primary);
  background: var(--rd-primary-tint);
  color: var(--rd-primary-ink);
  font-weight: 500;
}
.rd-secnav-item.rd-secnav-muted {
  color: var(--rd-label);
}
.rd-secnav-sq {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.rd-secnav-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-pane-content {
  flex: 1;
  padding: 18px 20px;
  min-width: 0;
  overflow-x: hidden;
}

/* permissions editor head + section overrides */
.rd-perm-head {
  margin-bottom: 16px;
}
.rd-perm-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-perm-desc {
  font-size: 11px;
  color: var(--rd-muted);
  margin-top: 3px;
  line-height: 1.5;
}
#perm-editor .perm-section {
  margin-bottom: 18px;
}
#perm-editor .perm-section:last-child {
  margin-bottom: 0;
}
#perm-editor .perm-section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-text);
  border-bottom: 1px solid var(--rd-border-faint);
  padding-bottom: 7px;
  margin-bottom: 10px;
}

[data-theme='dark'] .rd-twopane {
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}
[data-theme='dark'] .rd-secnav {
  background: rgba(255, 255, 255, 0.02);
  border-right-color: var(--border);
}
[data-theme='dark'] .rd-secnav-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme='dark'] .rd-secnav-back:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* custom-role nav rows: select item + delete control, and the inline create form */
.rd-secnav-row {
  display: flex;
  align-items: center;
}
.rd-secnav-row .rd-secnav-item {
  flex: 1;
  min-width: 0;
}
.rd-secnav-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rd-label);
  padding: 4px;
  margin-right: 4px;
  border-radius: 5px;
  opacity: 0;
  transition:
    opacity 0.12s,
    color 0.12s,
    background 0.12s;
}
.rd-secnav-row:hover .rd-secnav-del,
.rd-secnav-row.active .rd-secnav-del {
  opacity: 1;
}
.rd-secnav-del:hover {
  background: #fee2e2;
  color: #dc2626;
}
.rd-secnav-del svg {
  width: 13px;
  height: 13px;
}
.rd-secnav-create {
  padding: 6px 4px 2px;
  margin-top: 4px;
  border-top: 1px solid var(--rd-border-faint);
}
.rd-secnav-addbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-primary-ink);
  padding: 7px 8px;
  border-radius: 6px;
}
.rd-secnav-addbtn:hover {
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
}
.rd-secnav-addbtn svg {
  width: 14px;
  height: 14px;
}
.rd-newrole-form {
  padding: 4px;
}
.rd-newrole-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  background: #fff;
  color: var(--rd-text);
}
.rd-newrole-input:focus {
  outline: none;
  border-color: var(--rd-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 12%, transparent);
}
.rd-newrole-err {
  font-size: 10px;
  color: #dc2626;
  margin-top: 5px;
  line-height: 1.4;
}
.rd-newrole-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.rd-newrole-cancel {
  font-size: 11px;
  color: var(--rd-muted);
  cursor: pointer;
}
.rd-newrole-cancel:hover {
  color: var(--rd-text);
  text-decoration: underline;
}
[data-theme='dark'] .rd-secnav-del:hover {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}
[data-theme='dark'] .rd-secnav-addbtn:hover {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}
[data-theme='dark'] .rd-newrole-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

/* ── §5 Team Members ── */
.rd-people-filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.rd-scope input.rd-people-search {
  flex: 1;
  min-width: 120px;
  width: auto;
}
.rd-scope select.rd-people-fsel {
  flex: 0 0 auto;
  width: auto;
  min-width: 118px;
}
.rd-people-add {
  flex-shrink: 0;
  white-space: nowrap;
}
.rd-people-table td {
  vertical-align: middle;
}
.rd-people-avcell {
  width: 34px;
}
.rd-people-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}
.rd-people-namewrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rd-people-email {
  font-size: 10px;
  color: var(--rd-label);
  margin-top: 1px;
}
.rd-people-deptrole {
  font-size: 10px;
  color: var(--rd-muted);
  margin-top: 3px;
}
.rd-people-depts {
  white-space: normal;
}
.rd-people-deptbadge {
  display: inline-block;
  font-size: 9px;
  color: var(--rd-muted);
  background: #f3f4f6;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 1px 3px 1px 0;
  text-transform: capitalize;
}
.rd-people-tag {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  background: #fef3c7;
  padding: 1px 5px;
  border-radius: 4px;
}
.rd-people-tag-tech {
  color: var(--blue-dark);
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
}
.rd-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--rd-text);
  white-space: nowrap;
}
.rd-people-actions {
  text-align: right;
  white-space: nowrap;
}
.rd-people-actions > * {
  vertical-align: middle;
}
.rd-people-chev {
  display: inline-flex;
  color: var(--rd-label);
  margin-left: 6px;
}
.rd-people-chev svg {
  width: 16px;
  height: 16px;
}
.rd-people-archived {
  margin-top: 14px;
}
.rd-people-archived > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-muted);
  padding: 8px 0;
  list-style: none;
}
.rd-people-archived > summary::-webkit-details-marker {
  display: none;
}
.rd-people-archived[open] > summary {
  margin-bottom: 8px;
}
.rd-scope .dept-roles-config {
  margin-top: 18px;
}
[data-theme='dark'] .rd-people-deptbadge {
  background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 720px) {
  .rd-people-filterbar {
    flex-wrap: wrap;
  }
  .rd-people-search {
    flex-basis: 100%;
  }
}

/* ── Person detail modal (read view, opened by row click) ── */
.rd-pd {
  font-size: 13px;
  color: var(--rd-text);
}
.rd-pd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rd-border-faint);
}
.rd-pd-rolebadge {
  font-size: 11px;
}
.rd-pd-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--rd-border-faint);
}
.rd-pd-section:last-of-type {
  border-bottom: none;
}
.rd-pd-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 600;
  margin-bottom: 8px;
}
.rd-pd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.rd-pd-row-l {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.rd-pd-row-l svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--rd-label);
}
.rd-pd-label {
  font-size: 12px;
  color: var(--rd-muted);
}
.rd-pd-value {
  font-size: 13px;
  color: var(--rd-text);
  text-align: right;
  word-break: break-word;
}
.rd-pd-nologin {
  font-size: 12px;
  color: #b45309;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: 5px;
}
.rd-pd-actions-inline {
  margin-top: 10px;
}
.rd-pd-note {
  font-size: 11px;
  color: var(--rd-muted);
  margin: 8px 0 0;
  line-height: 1.5;
}
.rd-pd-link {
  color: var(--rd-primary-ink);
  cursor: pointer;
}
.rd-pd-link:hover {
  text-decoration: underline;
}
.rd-pd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--rd-border-faint);
}
.rd-pd-footer-r {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-pd-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.rd-pd-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.rd-pd-switch-track {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 11px;
  background: #cbd5e1;
  transition: background 0.15s;
  flex-shrink: 0;
}
.rd-pd-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
.rd-pd-switch input:checked + .rd-pd-switch-track {
  background: #16a34a;
}
.rd-pd-switch input:checked + .rd-pd-switch-track .rd-pd-switch-knob {
  transform: translateX(15px);
}
.rd-pd-switch input:focus-visible + .rd-pd-switch-track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent);
}
.rd-pd-switch-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
}
[data-theme='dark'] .rd-pd-nologin {
  background: rgba(180, 83, 9, 0.18);
  color: #fbbf24;
}
[data-theme='dark'] .rd-pd-switch-track {
  background: rgba(255, 255, 255, 0.2);
}

/* ── §8 Clients → Display — scoped to the clients-display group ONLY so the
   shared Service Config panel (out of scope) is never affected. ── */
#stab-service-config [data-sc-group='clients-display'] .svcfg-group-header {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  border-bottom: 1px solid #f0f2f5;
  padding-bottom: 8px;
  margin-bottom: 4px;
}
#stab-service-config [data-sc-group='clients-display'] .svcfg-acc-desc {
  font-size: 11px;
  color: #6b7280;
}
#stab-service-config [data-sc-group='clients-display'] .svcfg-cols-col-hdr {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9ca3af;
  font-weight: 500;
  margin-bottom: 7px;
}
#stab-service-config [data-sc-group='clients-display'] .tl-cols-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 6px;
  background: #fff;
  font-size: 12px;
  color: #374151;
}
#stab-service-config [data-sc-group='clients-display'] .tl-cols-drag {
  color: #c4c9d2;
  cursor: grab;
  display: inline-flex;
  flex-shrink: 0;
}
#stab-service-config [data-sc-group='clients-display'] .tl-cols-drag svg {
  width: 15px;
  height: 15px;
}
#stab-service-config [data-sc-group='clients-display'] .tl-cols-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
#stab-service-config [data-sc-group='clients-display'] .tl-cols-item.tl-cols-dragging {
  opacity: 0.5;
}
#stab-service-config [data-sc-group='clients-display'] .tl-cols-item.tl-cols-over {
  box-shadow: inset 0 2px 0 var(--blue);
}
#stab-service-config [data-sc-group='clients-display'] .svcfg-cols-empty {
  font-size: 11px;
  color: #9ca3af;
}
[data-theme='dark'] #stab-service-config [data-sc-group='clients-display'] .svcfg-group-header {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}
[data-theme='dark'] #stab-service-config [data-sc-group='clients-display'] .tl-cols-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
  color: var(--text-primary);
}

/* ── §3 Integrations ── */
.rd-int-group {
  margin-bottom: 26px;
}
.rd-int-grouphdr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
  margin-bottom: 12px;
}
.rd-int-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.rd-int-card {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  background: #fafafa;
  padding: 14px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.rd-int-card:hover {
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.07);
}
.rd-int-card-on {
  border-color: #d1fae5;
  background: #fafffe;
}
.rd-int-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rd-int-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rd-int-icon svg {
  width: 18px;
  height: 18px;
}
.rd-int-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--rd-text);
}
.rd-int-card-type {
  font-size: 11px;
  color: var(--rd-muted);
  margin-top: 1px;
}
.rd-int-card-foot {
  margin-top: 12px;
}
.rd-int-configure {
  font-size: 11px;
  font-weight: 500;
  color: var(--rd-primary-ink);
}

.rd-int-twopane {
  min-height: 460px;
}
.rd-secnav-none {
  font-size: 11px;
  color: var(--rd-label);
  padding: 4px 10px 8px;
}
.rd-int-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.rd-int-icon-lg {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rd-int-icon-lg svg {
  width: 22px;
  height: 22px;
}
.rd-int-detail-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-int-detail-type {
  font-size: 11px;
  color: var(--rd-muted);
  margin-top: 2px;
}
.rd-int-detail-desc {
  font-size: 12px;
  color: var(--rd-muted);
  line-height: 1.55;
  margin: 0 0 18px;
}
.rd-int-secret {
  display: flex;
  gap: 8px;
}
.rd-int-secret .rd-input {
  flex: 1;
}
.rd-int-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.rd-int-detail-actions .int-card-status {
  font-size: 11px;
  font-weight: 500;
  margin-left: 2px;
}
.rd-int-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}
.rd-int-stat {
  background: #f9fafb;
  border: 1px solid #f0f2f5;
  border-radius: 8px;
  padding: 12px 14px;
}
.rd-int-stat-val {
  font-size: 18px;
  font-weight: 600;
  color: var(--rd-text);
}
.rd-int-stat-lbl {
  font-size: 10px;
  color: var(--rd-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
}
.rd-int-activity {
  margin-top: 18px;
  border-top: 1px solid var(--rd-border-faint);
  padding-top: 8px;
}
.rd-int-activity > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
  list-style: none;
  padding: 6px 0;
}
.rd-int-activity > summary::-webkit-details-marker {
  display: none;
}
.rd-int-chev {
  width: 16px;
  height: 16px;
  color: var(--rd-label);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.rd-int-activity[open] .rd-int-chev {
  transform: rotate(180deg);
}
.rd-int-activity-body {
  padding-top: 4px;
}
[data-theme='dark'] .rd-int-card {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme='dark'] .rd-int-card-on {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.3);
}
[data-theme='dark'] .rd-int-stat {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
}

/* ════════════════════════════════════════════════════════════════════════
   SERVICE SETTINGS REDESIGN (Session 3) — Scheduling • Display • Fields •
   Workflow • Service Tags • How It Works. All scoped under .rd-scope or a
   specific panel/group id so out-of-scope UI is never affected.
   ════════════════════════════════════════════════════════════════════════ */

/* Sub-section header within a redesigned page (13/500/#374151 + faint rule) */
.rd-subhead {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  border-bottom: 1px solid var(--rd-border-faint);
  padding-bottom: 8px;
  margin: 24px 0 10px;
}
.rd-subhead:first-child {
  margin-top: 0;
}
.rd-subhead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rd-subdesc {
  font-size: 11px;
  color: var(--rd-muted);
  line-height: 1.5;
  margin: -3px 0 12px;
}
[data-theme='dark'] .rd-subhead {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}

/* Inline label + control + unit row (control sits right) */
.rd-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rd-row-sep);
}
.rd-field-row:last-child {
  border-bottom: none;
}
.rd-field-row .rd-setting-label {
  flex: 1;
  min-width: 0;
}
.rd-field-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--rd-muted);
  flex-shrink: 0;
}
.rd-field-ctrl .rd-input {
  width: 84px;
  flex: none;
}
.rd-field-ctrl input[type='time'].rd-input {
  width: 122px;
}
.rd-field-ctrl select.rd-input {
  width: auto;
  min-width: 150px;
}
.rd-field-ctrl.rd-hm {
  gap: 4px;
}
.rd-field-ctrl.rd-hm .rd-input {
  width: 54px;
}

/* Day-of-week pills (Load Up block keeps .lub-day-pill/.lub-day-active for wiring) */
.rd-scope .lub-days-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rd-scope .lub-day-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  font-weight: 500;
  color: var(--rd-muted);
  cursor: pointer;
  user-select: none;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.rd-scope .lub-day-pill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.rd-scope .lub-day-pill.lub-day-active {
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  border-color: color-mix(in srgb, var(--blue) 28%, #ffffff);
  color: var(--blue-dark);
}
.rd-scope .lub-day-pill input:disabled {
  cursor: default;
}
.rd-scope .lub-day-pill:has(input:disabled) {
  opacity: 0.45;
  cursor: default;
}
[data-theme='dark'] .rd-scope .lub-day-pill {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .rd-scope .lub-day-pill.lub-day-active {
  background: color-mix(in srgb, var(--blue) 20%, transparent);
  border-color: color-mix(in srgb, var(--blue) 50%, transparent);
  color: #93c5fd;
}

/* A disabled sub-block (Load Up sub-settings / weather sub) */
.rd-scope .lub-sub-disabled,
.rd-scope .wx-sub-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.rd-scope .svcfg-ts-divider {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 500;
  margin: 20px 0 2px;
  padding-top: 14px;
  border-top: 1px solid var(--rd-border-faint);
}

/* Radio cards (route strategy) */
.rd-hidden-select {
  display: none !important;
}
.rd-radio-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rd-radio-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  background: #fff;
  padding: 11px 13px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.rd-radio-card input {
  margin: 1px 0 0;
  accent-color: var(--rd-primary);
  flex-shrink: 0;
}
.rd-radio-card.rd-radio-on {
  border-color: color-mix(in srgb, var(--blue) 28%, #ffffff);
  background: var(--rd-primary-tint);
}
.rd-radio-card-body {
  min-width: 0;
}
.rd-radio-card-name {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
}
.rd-radio-card-desc {
  display: block;
  font-size: 10.5px;
  color: var(--rd-muted);
  margin-top: 2px;
  line-height: 1.45;
}
/* The cards are <label>s, so they inherit the dispatch label uppercase/spacing — reset it. */
#stab-dispatch.rd-scope .rd-radio-card,
#stab-dispatch.rd-scope .rd-radio-card-name,
#stab-dispatch.rd-scope .rd-radio-card-desc {
  text-transform: none;
  letter-spacing: normal;
}
[data-theme='dark'] .rd-radio-card {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .rd-radio-card.rd-radio-on {
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  border-color: color-mix(in srgb, var(--blue) 50%, transparent);
}
/* Route Strategy — per-strategy inline conflict-warning threshold (merged card).
   The threshold sits inline on the RIGHT of its strategy option, on the same row as
   the radio card; the card flexes to fill the remaining width. Optimal has no
   threshold, so its card spans the full row. */
.rd-strat-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.rd-strat-option > .rd-radio-card {
  flex: 1 1 auto;
  min-width: 0;
}
.rd-strat-thresh {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  color: var(--rd-muted);
  flex-shrink: 0;
}
.rd-strat-thresh-label {
  white-space: nowrap;
}
.rd-strat-thresh .inline-field.short {
  margin: 0;
}
#stab-dispatch.rd-scope .rd-strat-thresh,
#stab-dispatch.rd-scope .rd-strat-thresh-label {
  text-transform: none;
  letter-spacing: normal;
}

/* Return-time indicator rows (dot • label/desc • optional threshold • colour) */
.rd-rti-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rd-row-sep);
}
.rd-rti-row:last-child {
  border-bottom: none;
}
.rd-rti-text {
  flex: 1;
  min-width: 0;
}
.rd-rti-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
}
.rd-rti-desc {
  font-size: 10px;
  color: var(--rd-muted);
  margin-top: 1px;
  line-height: 1.45;
}
.rd-rti-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--rd-muted);
  flex-shrink: 0;
}
.rd-rti-ctrl .rd-input {
  width: 64px;
  flex: none;
}
.rd-color-dot-input {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  cursor: pointer;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
}
.rd-color-dot-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}
.rd-color-dot-input::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
.rd-color-dot-input::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

/* Per-preference override table (Time Windows) */
.rd-ov-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.rd-scope .ctw-override-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--rd-row-sep);
}
.rd-scope .ctw-override-row:last-child {
  border-bottom: none;
}
.rd-scope .ctw-override-label {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--rd-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-scope .ctw-override-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--rd-muted);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}
.rd-scope .ctw-override-toggle input {
  accent-color: var(--rd-primary);
}
.rd-scope .ctw-override-dur-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--rd-muted);
}
.rd-scope .ctw-override-dur-wrap .ctw-ov-dur {
  width: 60px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--rd-text);
}
.rd-scope .ctw-override-dur-wrap .ctw-ov-dur:disabled {
  background: #f9fafb;
  color: var(--rd-label);
}
.rd-ov-statusdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
}
.rd-ov-statusdot.rd-ov-on {
  background: var(--rd-primary);
}
[data-theme='dark'] .rd-ov-table {
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}
[data-theme='dark'] .rd-scope .ctw-override-dur-wrap .ctw-ov-dur {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}
[data-theme='dark'] .rd-scope .ctw-override-dur-wrap .ctw-ov-dur:disabled {
  background: rgba(255, 255, 255, 0.02);
}

/* Weather alerts — two-panel (installation-type rail + scope-of-work config) */
.rd-weather .wx-threshold-field {
  padding: 8px 0 2px;
}
.rd-weather .wx-threshold-field .rd-if-label {
  width: auto;
}
.rd-weather .wx-threshold-field .rd-input {
  width: 72px;
}
.rd-weather .wx-threshold-desc {
  font-size: 11px;
  color: var(--rd-muted);
  margin-left: 4px;
  line-height: 1.4;
}
/* The single Weather card sits in the shared .rd-cfg-cards-grid (a one-item grid
   → full width, no visual change). The grid zeroes the card's margin-bottom, so
   restore the 16px gap down to the two-panel block below. */
.rd-weather .rd-cfg-cards-grid {
  margin-bottom: 16px;
}
.rd-weather .wx-twopane {
  position: relative;
  display: flex;
  min-height: max(340px, calc(100vh - 380px));
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--rd-bg);
  margin: 0 0 18px;
}
.rd-weather:has(#wx-enabled:not(:checked)) .wx-twopane {
  opacity: 0.5;
  pointer-events: none;
}
.rd-weather .wx-typelist {
  width: 200px;
  flex-shrink: 0;
  background: var(--rd-stat-bg);
  border-right: 1px solid var(--rd-border);
  overflow-y: auto;
}
.rd-weather .wx-typelist-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rd-label);
  font-weight: 600;
  padding: 10px 14px 4px;
}
.rd-weather .wx-type-list {
  display: block;
}
.rd-weather .wx-type-block {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}
.rd-weather .wx-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.12s;
}
.rd-weather .wx-type-row:hover {
  background: color-mix(in srgb, var(--blue) 5%, transparent);
}
.rd-weather .wx-type-block.wx-selected .wx-type-row {
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  border-left-color: var(--blue);
}
.rd-weather .wx-type-block.wx-selected .wx-type-name {
  color: var(--blue-dark);
}
.rd-weather .wx-type-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-weather .wx-type-switch {
  flex-shrink: 0;
}
.rd-weather .wx-type-scopes {
  display: none;
}
.rd-weather .wx-type-block.wx-selected .wx-type-scopes:not(.wx-hidden) {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 200px;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 16px;
  overflow-y: auto;
  background: var(--rd-bg);
}
.rd-weather .wx-scope-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.rd-weather .wx-scope-typename {
  font-size: 14px;
  font-weight: 500;
  color: var(--rd-text);
}
.rd-weather .wx-scope-acts {
  display: inline-flex;
  gap: 12px;
  flex-shrink: 0;
}
.rd-weather .wx-scope-link {
  font-size: 11px;
  color: var(--rd-primary-ink);
  cursor: pointer;
}
.rd-weather .wx-scope-link:hover {
  text-decoration: underline;
}
.rd-weather .wx-scope-hint {
  font-size: 11px;
  color: var(--rd-muted);
  margin: 0 0 12px;
  line-height: 1.45;
}
.rd-weather .wx-scope-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 14px;
}
.rd-weather .wx-scope-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--rd-text);
  cursor: pointer;
  min-width: 0;
}
.rd-weather .wx-scope-label input {
  accent-color: var(--blue);
  flex-shrink: 0;
}
.rd-weather .wx-scope-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-weather .wx-scopepane {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.rd-weather .wx-scope-msg {
  display: none;
  font-size: 12px;
  color: var(--rd-label);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}
.rd-weather .wx-twopane:not(.wx-has-sel) .wx-msg-empty {
  display: block;
}
.rd-weather .wx-twopane.wx-has-sel .wx-msg-disabled {
  display: block;
}
.rd-weather .wx-empty-hint {
  display: block;
  font-size: 11px;
  color: var(--rd-label);
  padding: 9px 14px;
}
[data-theme='dark'] .rd-weather .wx-type-block.wx-selected .wx-type-row {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
}
[data-theme='dark'] .rd-weather .wx-type-block.wx-selected .wx-type-name {
  color: #93c5fd;
}
@media (max-width: 760px) {
  .rd-weather .wx-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Scoped restyle for the Dispatch panel routes (Routing / Time Windows /
   Dispatch Board). Panel hosts only these redesigned cards. ── */
#stab-dispatch.rd-scope > .settings-card {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 8px;
  background: transparent;
  box-shadow: none;
}
#stab-dispatch.rd-scope > .settings-card > h3 {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  border-bottom: 1px solid var(--rd-border-faint);
  border-left: 3px solid var(--rd-primary);
  padding-bottom: 8px;
  padding-left: 10px;
  margin: 24px 0 8px;
}
#stab-dispatch.rd-scope > .settings-card:first-of-type > h3 {
  margin-top: 4px;
}
#stab-dispatch.rd-scope > .settings-card > p {
  font-size: 11px;
  color: var(--rd-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}
#stab-dispatch.rd-scope .field {
  margin: 0;
}
#stab-dispatch.rd-scope .field > label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 500;
  margin: 0 0 7px;
}
#stab-dispatch.rd-scope .field .hint,
#stab-dispatch.rd-scope .field small.hint {
  font-size: 10px;
  color: var(--rd-label);
  line-height: 1.5;
}
[data-theme='dark'] #stab-dispatch.rd-scope > .settings-card > h3 {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}

/* Routing / Time Windows: contained, left-anchored form-page column whose
   .rd-cfg-card sections lay out in the same auto-fit grid as the other form
   pages (one column narrow, two+ wide). Applied only when _soShowDispatch sets
   cfg.formPage (Dispatch Board has no flag → stays full width, untouched).
   The .settings-card wrappers are display:contents in this mode so the
   .rd-cfg-card boxes they hold become direct grid items — that is what lets
   cards from different wrappers (and Time Windows' two cards in a single
   wrapper) sit side by side. Hidden wrappers keep their inline display:none, so
   :scope > .settings-card show/hide in _soShowDispatch is unaffected. */
#stab-dispatch.rd-form-page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
  align-items: start;
  /* Card grid fills the full content width via auto-fit — overrides the 860px
     single-column form cap inherited from .rd-form-page so the cards stop
     bunching up to ~half the page on wide monitors. */
  max-width: none;
}
#stab-dispatch.rd-form-page > .rd-page-head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
#stab-dispatch.rd-form-page > .settings-card {
  display: contents;
}
#stab-dispatch.rd-form-page .rd-cfg-card {
  margin-bottom: 0;
}
#stab-dispatch.rd-form-page .rd-cfg-card .field {
  margin: 0;
}
#stab-dispatch.rd-form-page .rd-cfg-card-body > .field + .field {
  margin-top: 4px;
}

/* Sched-logic + route-strategy threshold rows reuse .sched-thresh-* — restyle in scope */
#stab-dispatch.rd-scope .sched-thresh-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#stab-dispatch.rd-scope .sched-thresh-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rd-row-sep);
}
#stab-dispatch.rd-scope .sched-thresh-row:last-child {
  border-bottom: none;
}
#stab-dispatch.rd-scope .sched-thresh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#stab-dispatch.rd-scope .sched-thresh-label {
  flex: 1;
  font-size: 12px;
  color: var(--rd-text);
}
#stab-dispatch.rd-scope .inline-field.short {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#stab-dispatch.rd-scope .inline-field.short input {
  width: 64px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--rd-text);
}
#stab-dispatch.rd-scope .inline-field.short .unit {
  font-size: 11px;
  color: var(--rd-muted);
}
#stab-dispatch.rd-scope .sg-inline-color {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
[data-theme='dark'] #stab-dispatch.rd-scope .inline-field.short input {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

/* Hide redesigned service-config group headers (the inner provides its own head) */
#stab-service-config [data-sc-group='tech-schedule'] > .svcfg-group-header,
#stab-service-config [data-sc-group='sched-defaults'] > .svcfg-group-header,
#stab-service-config [data-sc-group='weather'] > .svcfg-group-header,
#stab-service-config [data-sc-group='tickets-display'] > .svcfg-group-header,
#stab-service-config [data-sc-group='call-workflow'] > .svcfg-group-header {
  display: none;
}
#stab-service-config [data-sc-group='tech-schedule'] > .svcfg-group-body,
#stab-service-config [data-sc-group='sched-defaults'] > .svcfg-group-body,
#stab-service-config [data-sc-group='weather'] > .svcfg-group-body,
#stab-service-config [data-sc-group='tickets-display'] > .svcfg-group-body,
#stab-service-config [data-sc-group='call-workflow'] > .svcfg-group-body {
  padding: 0;
}
#stab-service-config [data-sc-group='tech-schedule'],
#stab-service-config [data-sc-group='sched-defaults'],
#stab-service-config [data-sc-group='weather'],
#stab-service-config [data-sc-group='tickets-display'],
#stab-service-config [data-sc-group='call-workflow'] {
  border: none;
  margin: 0;
}

/* ── §5 Service Tickets — live previews + restyled pickers ── */
.rd-preview-card {
  position: relative;
  background: var(--rd-stat-bg);
  border: 1px solid var(--rd-border-faint);
  border-radius: 8px;
  padding: 26px 14px 14px;
  margin: 0 0 14px;
}
.rd-preview-card::before {
  content: 'PREVIEW';
  position: absolute;
  top: 9px;
  left: 14px;
  font-size: 8px;
  letter-spacing: 0.09em;
  color: var(--rd-label);
  font-weight: 600;
}
.rd-ticket-card {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  padding: 10px 12px;
}
.rd-ticket-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--rd-text);
}
.rd-ticket-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.rd-ticket-chip {
  font-size: 11px;
  color: var(--rd-muted);
  background: #f3f4f6;
  border-radius: 5px;
  padding: 2px 7px;
}
.rd-ticket-asap {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 5px;
  padding: 2px 7px;
}
.rd-ticket-empty {
  font-size: 11px;
  color: var(--rd-label);
  font-style: italic;
}
.rd-ph-card {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  padding: 12px 14px;
}
.rd-ph-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.rd-ph-row:last-child {
  margin-bottom: 0;
}
.rd-ph-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-text);
}
.rd-ph-status {
  font-size: 10px;
  font-weight: 600;
  color: var(--blue-dark);
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--blue) 28%, #ffffff);
  border-radius: 999px;
  padding: 2px 9px;
}
.rd-ph-num {
  font-size: 11px;
  color: var(--rd-label);
}
.rd-ph-tag {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  background: #fef3c7;
  border-radius: 4px;
  padding: 2px 7px;
}
.rd-ph-tag-b {
  color: #5b21b6;
  background: #ede9fe;
}
.rd-ph-text {
  font-size: 12px;
  color: var(--rd-muted);
}
[data-theme='dark'] .rd-preview-card {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme='dark'] .rd-ticket-card,
[data-theme='dark'] .rd-ph-card {
  background: var(--surface-raised, rgba(255, 255, 255, 0.03));
}
[data-theme='dark'] .rd-ticket-chip {
  background: rgba(255, 255, 255, 0.06);
}

/* Restyle the reused pickers inside the redesigned Service Tickets page */
.rd-tickets-display .svcfg-acc-desc {
  font-size: 11px;
  color: var(--rd-muted);
  line-height: 1.5;
  margin: -2px 0 12px;
}
.rd-tickets-display .tl-sml-search-wrap {
  margin: 0 0 10px;
}
.rd-tickets-display .tl-sml-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--rd-text);
}
.rd-tickets-display .svcfg-sml-section-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 500;
  margin: 14px 0 7px;
}
.rd-tickets-display #svcfg-sml-active {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  padding: 4px 10px;
}
.rd-tickets-display .tl-sml-group-header {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rd-faint);
  font-weight: 600;
  margin: 8px 0 3px;
}
.rd-tickets-display .tl-sml-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
}
.rd-tickets-display .tl-sml-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--rd-text);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.rd-tickets-display .tl-sml-label input {
  accent-color: var(--rd-primary);
}
.rd-tickets-display .tl-sml-drag {
  color: #c4c9d2;
  cursor: grab;
  display: inline-flex;
  flex-shrink: 0;
}
.rd-tickets-display .tl-sml-drag svg {
  width: 15px;
  height: 15px;
}
.rd-tickets-display .tl-sml-drag-hidden {
  visibility: hidden;
}
.rd-tickets-display .svcfg-sml-avail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rd-tickets-display .tl-sml-item.tl-sml-dragging {
  opacity: 0.5;
}
.rd-tickets-display .tl-sml-item.tl-sml-over {
  box-shadow: inset 0 2px 0 var(--rd-primary);
}
.rd-tickets-display .svcfg-cols-empty {
  font-size: 11px;
  color: var(--rd-label);
}

/* Ticket panel header editor */
.rd-tickets-display .thdr-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.rd-tickets-display .thdr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}
.rd-tickets-display .thdr-row.thdr-row-over {
  box-shadow: inset 0 2px 0 var(--rd-primary);
}
.rd-tickets-display .thdr-row-handle {
  color: #c4c9d2;
  cursor: grab;
  display: inline-flex;
  flex-shrink: 0;
}
.rd-tickets-display .thdr-row-handle svg {
  width: 15px;
  height: 15px;
}
.rd-tickets-display .thdr-row-num {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rd-label);
  white-space: nowrap;
}
.rd-tickets-display .thdr-row-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
  min-height: 24px;
  align-items: center;
  border-radius: 6px;
}
.rd-tickets-display .thdr-row-fields.thdr-fields-over {
  background: var(--rd-primary-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, #ffffff);
}
.rd-tickets-display .thdr-field-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--blue-dark);
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--blue) 28%, #ffffff);
  border-radius: 6px;
  padding: 2px 4px 2px 8px;
  cursor: grab;
}
.rd-tickets-display .thdr-field-pill.thdr-pill-locked {
  color: var(--rd-muted);
  background: #f3f4f6;
  border-color: var(--rd-border);
  cursor: default;
}
.rd-tickets-display .thdr-field-pill.thdr-pill-dragging {
  opacity: 0.5;
}
.rd-tickets-display .thdr-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.7;
}
.rd-tickets-display .thdr-remove:hover {
  opacity: 1;
}
.rd-tickets-display .thdr-add-field-btn {
  font-size: 11px;
  color: var(--rd-primary-ink);
  background: none;
  border: 1px dashed var(--rd-border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.rd-tickets-display .thdr-add-field-btn:hover {
  border-color: var(--rd-primary);
}
.rd-tickets-display .thdr-row-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rd-muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.rd-tickets-display .thdr-row-del:hover {
  color: var(--rd-danger);
}
.rd-tickets-display .thdr-add-row-btn {
  font-size: 11px;
  font-weight: 500;
  color: var(--rd-muted);
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
}
.rd-tickets-display .thdr-add-row-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.thdr-picker {
  z-index: 99999;
}

/* Columns 2-col picker */
.rd-tickets-display .svcfg-cols-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rd-tickets-display .svcfg-cols-col-hdr {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 500;
  margin-bottom: 7px;
}
.rd-tickets-display .tl-cols-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 6px;
  background: #fff;
  font-size: 12px;
  color: var(--rd-text);
}
.rd-tickets-display .tl-cols-drag {
  color: #c4c9d2;
  cursor: grab;
  display: inline-flex;
  flex-shrink: 0;
}
.rd-tickets-display .tl-cols-drag svg {
  width: 15px;
  height: 15px;
}
.rd-tickets-display .tl-cols-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  text-transform: none;
  letter-spacing: normal;
}
.rd-tickets-display .tl-cols-label input {
  accent-color: var(--rd-primary);
}
.rd-tickets-display .tl-cols-item.tl-cols-dragging {
  opacity: 0.5;
}
.rd-tickets-display .tl-cols-item.tl-cols-over {
  box-shadow: inset 0 2px 0 var(--rd-primary);
}
[data-theme='dark'] .rd-tickets-display .thdr-row,
[data-theme='dark'] .rd-tickets-display .tl-cols-item {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .rd-tickets-display .thdr-add-row-btn {
  background: transparent;
}

/* Sub-nav tabs (Option C) */
.rd-tickets-display .std-tabbar {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--rd-border);
  margin: 0 0 18px;
}
.rd-tickets-display .std-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 12px;
  color: var(--rd-muted);
  cursor: pointer;
  transition:
    color 0.12s,
    border-color 0.12s;
}
.rd-tickets-display .std-tab:hover {
  color: var(--rd-text);
}
.rd-tickets-display .std-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 500;
}
.rd-tickets-display .std-section[hidden] {
  display: none;
}

/* 2-col config / preview */
.rd-tickets-display .std-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 24px;
  align-items: start;
}
.rd-tickets-display .std-config {
  min-width: 0;
}
.rd-tickets-display .std-lbl {
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-text);
}
.rd-tickets-display .std-desc {
  font-size: 12px;
  color: var(--rd-muted);
  line-height: 1.5;
  margin: 2px 0 12px;
}
.rd-tickets-display .std-preview {
  position: sticky;
  top: 0;
}
.rd-tickets-display .std-preview-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rd-label);
  font-weight: 600;
  margin: 0 0 8px;
}

/* Summary line — selected rows + add-fields chips */
.rd-tickets-display .sml-hidden-cb,
.rd-tickets-display .cols-hidden-cb {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.rd-tickets-display #svcfg-sml-active.sml-selected {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rd-tickets-display .tl-sml-item.tl-sml-checked {
  gap: 8px;
  padding: 6px;
  border-radius: 6px;
}
.rd-tickets-display .tl-sml-item.tl-sml-checked:hover {
  background: var(--rd-stat-bg);
}
.rd-tickets-display .sml-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-tickets-display .sml-remove,
.rd-tickets-display .cols-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rd-label);
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 4px;
}
.rd-tickets-display .sml-remove:hover,
.rd-tickets-display .cols-remove:hover {
  color: var(--rd-danger);
  background: #fef2f2;
}
.rd-tickets-display .sml-add {
  margin-top: 12px;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
}
.rd-tickets-display .sml-add-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-primary-ink);
}
.rd-tickets-display .sml-add-summary::-webkit-details-marker {
  display: none;
}
.rd-tickets-display .sml-add-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--rd-label);
}
.rd-tickets-display .sml-add-body {
  padding: 2px 12px 12px;
  border-top: 1px solid var(--rd-border-faint);
}
.rd-tickets-display .svcfg-sml-avail-group {
  margin-top: 10px;
}
.rd-tickets-display .sml-chips,
.rd-tickets-display .cols-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.rd-tickets-display .sml-chip,
.rd-tickets-display .cols-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px 9px;
  border: 1px solid var(--rd-border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--rd-text);
  cursor: pointer;
  background: var(--rd-bg);
  transition:
    border-color 0.12s,
    background 0.12s;
}
.rd-tickets-display .sml-chip:hover,
.rd-tickets-display .cols-chip:hover {
  border-color: var(--blue);
  background: var(--rd-primary-tint);
}
.rd-tickets-display .sml-chip .tl-sml-label,
.rd-tickets-display .cols-chip .cols-chip-label {
  display: inline;
  font-size: 11px;
  color: var(--rd-text);
}
.rd-tickets-display .sml-chip .tl-sml-label::before,
.rd-tickets-display .cols-chip .cols-chip-label::before {
  content: '+ ';
  color: var(--blue);
  font-weight: 600;
}

/* Columns — active drag rows + available chips */
.rd-tickets-display .std-cols-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.rd-tickets-display .std-cols-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 600;
  margin-bottom: 8px;
}
.rd-tickets-display .cols-active-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  padding: 8px;
}
.rd-tickets-display .cols-active-box .tl-cols-item {
  border: none;
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 0;
  background: transparent;
}
.rd-tickets-display .cols-active-box .tl-cols-item:hover {
  background: var(--rd-stat-bg);
}
.rd-tickets-display .cols-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--rd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .rd-tickets-display .std-2col,
  .rd-tickets-display .std-cols-2col {
    grid-template-columns: 1fr;
  }
  .rd-tickets-display .std-preview {
    position: static;
  }
}

/* ── §6 Dispatch Board — live job-block preview + 3-column mode config ── */
#stab-dispatch.rd-scope .dd-preview-wrap {
  padding-top: 26px;
  max-width: 360px;
}
#stab-dispatch.rd-scope .dd-preview-wrap .dd-blk {
  min-height: 80px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dd-blk {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  padding: 9px 11px;
}
.dd-blk.dd-blk-bar {
  border-left: 4px solid var(--rd-primary);
}
.dd-blk-r1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dd-blk-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 700;
}
.dd-blk-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--rd-text);
}
.dd-blk-pref {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue-dark);
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--blue) 28%, #ffffff);
  border-radius: 999px;
  padding: 1px 8px;
}
.dd-blk-r2,
.dd-blk-r3 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 11px;
  color: var(--rd-muted);
}
.dd-blk-dot {
  color: var(--rd-faint);
}
.dd-blk-empty {
  font-size: 11px;
  color: var(--rd-label);
  font-style: italic;
}

#stab-dispatch.rd-scope .dd-mode-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
}
#stab-dispatch.rd-scope .dd-mode-tab {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--rd-muted);
  padding: 6px 14px;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
#stab-dispatch.rd-scope .dd-mode-tab:hover {
  background: #f9fafb;
}
#stab-dispatch.rd-scope .dd-mode-tab.active {
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  color: var(--blue-dark);
  border-color: color-mix(in srgb, var(--blue) 28%, #ffffff);
}
#stab-dispatch.rd-scope #dd-display-saved {
  margin-left: 4px;
  font-size: 11px;
  color: var(--rd-ok);
}

#stab-dispatch.rd-scope .dd-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
#stab-dispatch.rd-scope .dd-col {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
#stab-dispatch.rd-scope .dd-col-hdr {
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-muted);
  padding: 8px 12px;
  background: var(--rd-stat-bg);
  border-bottom: 1px solid var(--rd-border-faint);
}
#stab-dispatch.rd-scope .dd-col.dd-col-active .dd-col-hdr {
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  color: var(--blue-dark);
  border-bottom-color: color-mix(in srgb, var(--blue) 28%, #ffffff);
}
#stab-dispatch.rd-scope .dd-col .dd-toggles-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 6px;
}
#stab-dispatch.rd-scope .dd-toggle-item {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--rd-text);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s;
}
#stab-dispatch.rd-scope .dd-toggle-item:hover {
  background: var(--rd-stat-bg);
}
#stab-dispatch.rd-scope .dd-toggle-item input {
  accent-color: var(--rd-primary);
  flex-shrink: 0;
}
#stab-dispatch.rd-scope .dd-col:not(.dd-col-active) .dd-toggle-item {
  color: var(--rd-muted);
}
[data-theme='dark'] .dd-blk,
[data-theme='dark'] #stab-dispatch.rd-scope .dd-col,
[data-theme='dark'] #stab-dispatch.rd-scope .dd-mode-tab {
  background: var(--surface-raised, rgba(255, 255, 255, 0.03));
}
[data-theme='dark'] #stab-dispatch.rd-scope .dd-col-hdr {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] #stab-dispatch.rd-scope .dd-col.dd-col-active .dd-col-hdr {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
}
@media (max-width: 680px) {
  #stab-dispatch.rd-scope .dd-cols {
    grid-template-columns: 1fr;
  }
}

/* ── §7 Status Groups — mini-kanban ── */
#stab-groups > .settings-action-row {
  display: none;
} /* old (unwired) Add Group row */
.rd-sg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.rd-sg-add {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Columns wrap to new rows instead of scrolling off-screen (drag works across rows). */
.sg-kan-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 0 12px;
}
.sg-kan-col {
  flex: 0 0 152px;
  width: 152px;
  min-width: 140px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  border-radius: 7px;
}
.sg-kan-col[draggable='true'] {
  cursor: grab;
}
.sg-kan-col.sg-dragging {
  opacity: 0.5;
}
.sg-kan-col.sg-card-over {
  outline: 2px solid var(--rd-primary);
  outline-offset: 2px;
  border-radius: 8px;
}
.sg-kan-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}
.sg-kan-name {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.sg-kan-del {
  background: rgba(255, 255, 255, 0.22);
  border: none;
  color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sg-kan-del:hover {
  background: rgba(255, 255, 255, 0.42);
}
.sg-kan-body {
  flex: 1;
  background: #f9fafb;
  border: 1px solid var(--rd-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  min-height: 120px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sg-kan-ph {
  height: 16px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--rd-border-faint);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
/* Realistic placeholder ticket cards (intentionally grayed — clearly fake sample data). */
.sg-kan-card {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 6px;
}
.sg-kan-card-name {
  font-size: 11px;
  font-weight: 500;
  color: #d1d5db;
}
.sg-kan-card-addr {
  font-size: 10px;
  color: #e5e7eb;
  margin-top: 2px;
}
.sg-kan-card-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 9px;
  background: #f3f4f6;
  color: #d1d5db;
  border-radius: 4px;
  padding: 1px 6px;
}
.sg-kan-sep {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.sg-kan-sep span {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rd-label);
  font-weight: 600;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
[data-theme='dark'] .sg-kan-body {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .sg-kan-ph {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}
[data-theme='dark'] .sg-kan-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}
[data-theme='dark'] .sg-kan-card-name {
  color: rgba(255, 255, 255, 0.24);
}
[data-theme='dark'] .sg-kan-card-addr {
  color: rgba(255, 255, 255, 0.15);
}
[data-theme='dark'] .sg-kan-card-badge {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.24);
}

/* ════════════════════════════════════════════════════════════
   STATUS GROUPS — two-column primary/secondary list (drag to
   reorder within a column or across to promote/demote). Replaces
   the mini-kanban above; the .sg-kan-* rules are now unused.
   ════════════════════════════════════════════════════════════ */
.rd-sg .sg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .rd-sg .sg-cols {
    grid-template-columns: 1fr;
  }
}
.sg-col {
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sg-col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rd-row-sep);
  background: var(--rd-stat-bg);
}
.sg-col-titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-col-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--rd-text);
}
.sg-col-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-muted);
  background: rgba(17, 24, 39, 0.06);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.sg-col-desc {
  font-size: 11px;
  color: var(--rd-label);
  line-height: 1.45;
  margin: 4px 0 0;
}
.sg-col-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 80px;
  flex: 1;
}
.sg-col-empty {
  border: 1.5px dashed var(--rd-border);
  border-radius: 8px;
  padding: 20px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--rd-label);
}
.sg-col.sg-col-over {
  outline: 2px solid var(--rd-primary);
  outline-offset: -1px;
}
.sg-col.sg-col-over .sg-col-body {
  background: var(--rd-primary-tint);
  border-radius: 8px;
}

.sg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  background: #fff;
  transition:
    box-shadow 0.12s ease,
    border-color 0.12s ease;
}
.sg-row:hover {
  border-color: var(--rd-primary);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.07);
}
.sg-row.sg-dragging {
  opacity: 0.45;
}
.sg-handle {
  flex-shrink: 0;
  width: 18px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rd-label);
  cursor: grab;
  border-radius: 4px;
}
.sg-handle:hover {
  color: var(--rd-muted);
}
.sg-handle:active {
  cursor: grabbing;
}
.sg-handle svg {
  width: 15px;
  height: 15px;
}
.sg-dot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--rd-border);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease;
}
.sg-dot:hover {
  transform: scale(1.14);
}
.sg-name-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rd-text);
  background: transparent;
  outline: none;
}
.sg-name-input:hover {
  background: var(--rd-stat-bg);
}
.sg-name-input:focus {
  border-color: var(--rd-primary);
  background: var(--rd-input-bg);
}
.sg-lock {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rd-label);
  opacity: 0.65;
}
.sg-lock svg {
  width: 13px;
  height: 13px;
}
.sg-del {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--rd-label);
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.sg-del:hover {
  background: var(--rd-danger);
  color: #fff;
}
.sg-del svg {
  width: 15px;
  height: 15px;
}

[data-theme='dark'] .sg-col {
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}
[data-theme='dark'] .sg-row {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .sg-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme='dark'] .sg-col-count {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .sg-dot {
  border-color: rgba(255, 255, 255, 0.14);
}

/* ── Shared color popover (Status Groups dots + Branding swatches) ── */
.cpop {
  position: fixed;
  z-index: 4000;
  width: 198px;
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.2);
  padding: 10px;
}
.cpop-swatches {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cpop-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease;
}
.cpop-swatch:hover {
  transform: scale(1.14);
}
.cpop-swatch.is-active {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--rd-primary);
}
.cpop-hexrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.cpop-hexhash {
  font-size: 12px;
  color: var(--rd-label);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cpop-hex {
  width: 70px;
  box-sizing: border-box;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  color: var(--rd-text);
  outline: none;
  background: var(--rd-input-bg);
}
.cpop-hex:focus {
  border-color: var(--rd-primary);
}
.cpop-custom {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  background: var(--rd-stat-bg);
  color: var(--rd-text);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 6px;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    color 0.12s ease;
}
.cpop-custom:hover {
  border-color: var(--rd-primary);
  color: var(--rd-primary);
}
.cpop-custom svg {
  width: 13px;
  height: 13px;
}
[data-theme='dark'] .cpop {
  background: var(--surface-raised, #1b1d22);
}
[data-theme='dark'] .cpop-swatch {
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .cpop-swatch.is-active {
  box-shadow:
    0 0 0 2px var(--surface-raised, #1b1d22),
    0 0 0 4px var(--rd-primary);
}

/* ════════════════════════════════════════════════════════════
   FORM-PAGE FRAMEWORK — contained, card-based layout for form-style
   settings pages (Technician / Routing / Time Windows this session;
   Security / Weather / Service Tickets / Workflow next session).
   Token-mapped to the --rd-* system so dark mode value-swaps for free.
   NOTE: the section card is .rd-cfg-card (NOT .rd-form-card — that name
   is already taken by the Forms settings page).
   ════════════════════════════════════════════════════════════ */

/* Left-anchored, contained content column. Form pages ONLY — never two-panel
   layouts (Fields & Lists, Pricebook, Integrations, Team Members, Dispatch Board).
   margin-left:0 (not margin:0 auto) so the column stays anchored to the left of
   the content area on wide monitors instead of floating to the centre. */
.rd-form-page {
  max-width: 860px;
  margin-left: 0;
  padding: 24px;
}

/* Card-grid form pages (Security, Technician, …) fill the full content width via
   the auto-fit grid below, instead of the 860px single-column form cap — that cap
   was squeezing multi-card pages into ~2 columns ending near the page midpoint.
   Single-column form pages (no .rd-cfg-cards-grid) keep the cap so their field
   rows stay readable. */
.rd-form-page:has(> .rd-cfg-cards-grid) {
  max-width: none;
}

/* Auto-fit card grid: the .rd-cfg-card boxes fill the available column width,
   wrapping from one column on a narrow viewport up to two (or three, where the
   container is wide enough) side by side. minmax(380px, …) stops a card shrinking
   below 380px; auto-fit (not auto-fill) collapses empty tracks so the cards
   stretch to fill the row with no trailing white space. The grid gap owns the
   inter-card spacing, so each card's own margin-bottom is zeroed inside the grid
   to avoid doubling the row gap. */
.rd-cfg-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
  align-items: start;
}
.rd-cfg-cards-grid > .rd-cfg-card {
  margin-bottom: 0;
}

/* Section card: a logical group of settings in a contained box. */
.rd-cfg-card {
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #fff;
}
.rd-cfg-card:last-child {
  margin-bottom: 0;
}
.rd-cfg-card-header {
  background: var(--rd-stat-bg);
  padding: 11px 16px;
  border-bottom: 1px solid var(--rd-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.rd-cfg-card-header::before {
  content: '';
  width: 3px;
  height: 18px;
  background: var(--blue);
  border-radius: 0;
  flex-shrink: 0;
}
.rd-cfg-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-text);
}
.rd-cfg-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rd-cfg-card-desc {
  font-size: 11px;
  color: var(--rd-muted);
  line-height: 1.5;
  margin: 0 0 6px;
}
[data-theme='dark'] .rd-cfg-card {
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}
[data-theme='dark'] .rd-cfg-card-title {
  color: var(--text-primary);
}

/* Toggle setting row: label block on the left, control hugging the contained
   card's right edge (NOT the viewport edge). */
.rd-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--rd-row-sep);
}
.rd-toggle-row:last-child {
  border-bottom: none;
}
.rd-toggle-row > .rd-tr-text {
  flex: 1;
  padding-right: 24px;
  min-width: 0;
}
.rd-tr-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
}
.rd-tr-desc {
  font-size: 11px;
  color: var(--rd-muted);
  line-height: 1.5;
  margin-top: 2px;
}

/* Display-only row variant (no toggle): dot / label / description / inline control.
   Same geometry as .rd-toggle-row. */
.rd-toggle-row-style {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rd-row-sep);
}
.rd-toggle-row-style:last-child {
  border-bottom: none;
}
.rd-toggle-row-style > .rd-tr-text {
  flex: 1;
  padding-right: 16px;
  min-width: 0;
}

/* Indented inputs revealed under an enabled toggle (dims + locks when parent is off). */
.rd-dependent-inputs {
  margin-top: 8px;
  margin-left: 20px;
  padding: 10px 14px;
  background: var(--rd-stat-bg);
  border-left: 2px solid var(--rd-border);
  border-radius: 0 6px 6px 0;
  transition: opacity 0.15s ease;
}
.rd-dependent-inputs.rd-dep-off {
  opacity: 0.4;
  pointer-events: none;
}
/* Reactive dimming for the Morning-route-push dependent group — pure CSS, no
   handler change (the existing handler also disables the time input). */
.rd-cfg-card-body:has(input[data-ts='morningPushEnabled']:not(:checked)) .rd-mp-dep {
  opacity: 0.4;
  pointer-events: none;
}

/* A single inline field (label + input + unit) inside a card body or dependent group. */
.rd-inline-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.rd-inline-field > .rd-if-label {
  font-size: 11px;
  color: var(--rd-muted);
  width: 140px;
  flex-shrink: 0;
}
.rd-inline-field > .rd-if-unit {
  font-size: 11px;
  color: var(--rd-muted);
}
.rd-inline-field input[type='number'] {
  width: 80px;
}
.rd-inline-field .rd-input {
  width: 80px;
  flex: none;
}
.rd-inline-field input[type='time'].rd-input {
  width: 116px;
}
.rd-inline-field select.rd-input {
  width: auto;
  min-width: 150px;
  flex: 1;
}

/* A row of day-of-week selector pills (container only — pill visuals come from
   the page's own pill class, e.g. .lub-day-pill, to keep wiring intact). */
.rd-day-pills-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ── Security — dependent-input dimming (reactive :has(), no handler change) and
   a wider inline field for the 2FA From-address email. ── */
#security-panel-body .rd-cfg-card-body:has(#sec-session-enabled:not(:checked)) .rd-dependent-inputs,
#security-panel-body .rd-cfg-card-body:has(#sec-lockout-enabled:not(:checked)) .rd-dependent-inputs,
#security-panel-body .rd-cfg-card-body:has(#sec-twofa-enabled:not(:checked)) .rd-dependent-inputs {
  opacity: 0.4;
  pointer-events: none;
}
#security-panel-body .rd-inline-field-wide .rd-input {
  width: auto;
  flex: 1;
  min-width: 220px;
  max-width: 320px;
}
#security-panel-body .rd-if-hint {
  font-size: 10px;
  color: var(--rd-label);
  line-height: 1.5;
  margin: 8px 0 0;
}

/* ── §8 Fields & Lists — two-panel category nav ── */
.rd-fl-twopane {
  min-height: max(460px, calc(100vh - 180px));
}
.rd-fl-twopane .rd-secnav {
  width: 172px;
}
.rd-fl-twopane .rd-pane-content {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fl-nav-count {
  font-size: 10px;
  color: var(--rd-label);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  padding-left: 8px;
}
.rd-secnav-item.active .fl-nav-count {
  color: var(--rd-primary-ink);
}
.fl-nav-sep {
  height: 1px;
  background: var(--rd-border-faint);
  margin: 8px 6px;
}
.rd-fl-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  background: var(--rd-bg);
  border-bottom: 1px solid var(--rd-border-faint);
}
.rd-fl-head-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--rd-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-fl-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--rd-label);
  background: #f3f4f6;
  border-radius: 999px;
  padding: 1px 8px;
}
.rd-fl .fl-search {
  margin: 12px 20px 0;
  width: calc(100% - 40px);
  box-sizing: border-box;
}
.fl-list {
  padding: 6px 20px 4px;
}
.fl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rd-row-sep);
}
.fl-row:last-child {
  border-bottom: none;
}
.fl-row-archived {
  opacity: 0.6;
}
.fl-grip {
  color: #c4c9d2;
  cursor: grab;
  display: inline-flex;
  flex-shrink: 0;
}
.fl-grip svg {
  width: 15px;
  height: 15px;
}
.fl-row-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--rd-text);
  background: transparent;
  font-family: inherit;
}
.fl-row-input:hover {
  border-color: var(--rd-border);
}
.fl-row-input:focus {
  border-color: var(--rd-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
  background: var(--surface-base);
}
.fl-row-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--rd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.fl-archived-badge {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rd-muted);
  background: #f3f4f6;
  border-radius: 4px;
  padding: 1px 6px;
}
.fl-row.fl-row-dragging {
  opacity: 0.5;
}
.fl-row.fl-row-over {
  box-shadow: inset 0 2px 0 var(--rd-primary);
}
.fl-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.fl-addrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 20px 0;
  padding: 10px 0;
}
.fl-addrow .rd-input {
  flex: 1;
}
.fl-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--rd-border-faint);
  margin-top: auto;
}
.fl-pager-info {
  font-size: 11px;
  color: var(--rd-muted);
}
.fl-pager-btns {
  display: flex;
  gap: 6px;
}
.fl-scope-wrap {
  padding: 10px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fl-scope-group {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
}
.fl-scope-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--rd-stat-bg);
  border-bottom: 1px solid var(--rd-border-faint);
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-text);
}
.fl-scope-group .fl-list {
  padding: 4px 12px;
}
.fl-calc {
  padding: 12px 20px 18px;
}
/* Relocated custom-fields content fits the panel */
.rd-fl #fl-cf-mount {
  padding: 10px 20px 16px;
}
.rd-fl #fl-cf-mount .cf-section-head {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 600;
  margin: 10px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rd-fl #fl-cf-mount .cf-section-count {
  font-size: 9px;
  color: var(--rd-label);
  background: #f3f4f6;
  border-radius: 999px;
  padding: 1px 6px;
}
[data-theme='dark'] .rd-fl-head {
  background: var(--rd-bg);
}
[data-theme='dark'] .rd-fl-count,
[data-theme='dark'] .fl-archived-badge,
[data-theme='dark'] .rd-fl #fl-cf-mount .cf-section-count {
  background: rgba(255, 255, 255, 0.07);
}
@media (max-width: 720px) {
  .rd-fl-twopane {
    flex-direction: column;
  }
  .rd-fl-twopane .rd-secnav {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--rd-border-faint);
  }
}

/* ── Pricebook — two-panel page (material categories + calculation rules) ── */
.rd-pb-twopane {
  display: flex;
  min-height: 460px;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--rd-bg);
}
.rd-pb-nav {
  width: 210px;
  flex-shrink: 0;
  background: #f3f4f6;
  border-right: 1px solid var(--rd-border);
  display: flex;
  flex-direction: column;
  padding: 12px 8px 8px;
}
.rd-pb-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--rd-bg);
}
.pb-nav-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rd-label);
  font-weight: 600;
  padding: 0 8px 6px;
}
.pb-nav-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pb-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  padding: 7px 9px;
  font-size: 12px;
  color: var(--rd-text);
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.12s,
    color 0.12s;
}
.pb-nav-item:hover {
  background: color-mix(in srgb, var(--blue) 5%, transparent);
}
.pb-nav-item.active {
  border-left-color: var(--rd-primary);
  background: var(--rd-primary-tint);
  color: var(--rd-primary-ink);
  font-weight: 500;
}
.pb-nav-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-nav-count {
  font-size: 10px;
  color: var(--rd-label);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.pb-nav-item.active .pb-nav-count {
  color: var(--rd-primary-ink);
}
.pb-nav-tools {
  display: none;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.pb-nav-item:hover .pb-nav-tools {
  display: inline-flex;
}
.pb-nav-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 4px;
  color: var(--rd-faint);
  cursor: pointer;
}
.pb-nav-tool svg {
  width: 13px;
  height: 13px;
}
.pb-nav-tool:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--rd-muted);
}
.pb-nav-tool-del:hover {
  background: #fef2f2;
  color: var(--rd-danger);
}
.pb-nav-editing {
  padding: 3px 6px;
}
.pb-nav-rename {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rd-primary);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--rd-text);
  background: var(--rd-bg);
  font-family: inherit;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}
.pb-nav-sep {
  height: 1px;
  background: var(--rd-border-faint);
  margin: 8px 6px;
}
.pb-nav-calc {
  border-radius: 0 6px 6px 0;
}
.pb-nav-foot {
  margin-top: auto;
  padding-top: 8px;
}
.pb-nav-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--rd-primary-ink);
  cursor: pointer;
  font-family: inherit;
  border-radius: 6px;
}
.pb-nav-add svg {
  width: 12px;
  height: 12px;
}
.pb-nav-add:hover {
  background: var(--rd-primary-tint);
}
.pb-nav-addrow {
  padding: 2px;
}
.pb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--rd-border-faint);
}
.pb-head-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--rd-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pb-head-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--rd-label);
  background: #f3f4f6;
  border-radius: 999px;
  padding: 1px 8px;
}
.pb-table {
  margin: 16px 20px 20px;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
}
.pb-table-head,
.pb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 72px 92px 84px 62px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}
.pb-table-head {
  height: 34px;
  background: var(--rd-stat-bg);
  border-bottom: 1px solid var(--rd-border);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rd-label);
  font-weight: 600;
}
.pb-row {
  min-height: 46px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rd-row-sep);
}
.pb-row:last-child {
  border-bottom: none;
}
.pb-row:hover {
  background: var(--rd-stat-bg);
}
.pb-cell-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-cell-unit {
  font-size: 12px;
  color: var(--rd-muted);
}
.pb-cell-price {
  font-size: 12px;
  color: var(--rd-text);
  font-variant-numeric: tabular-nums;
}
.pb-badge-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pb-type-area {
  background: #dcfce7;
  color: #166534;
}
.pb-type-liquid {
  background: #dbeafe;
  color: #1e40af;
}
.pb-type-single {
  background: #f3f4f6;
  color: #4b5563;
}
.pb-type-custom {
  background: #f3e8ff;
  color: #6b21a8;
}
.pb-badge-auto {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  color: var(--rd-primary-ink);
  white-space: nowrap;
}
.pb-cell-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.pb-empty,
.pb-empty-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  flex: 1;
  padding: 48px 24px;
}
.pb-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-text);
}
.pb-empty-sub {
  font-size: 12px;
  color: var(--rd-muted);
  margin: 0;
}
.pb-calc {
  padding: 12px 20px 20px;
}
[data-theme='dark'] .pb-head-count {
  background: rgba(255, 255, 255, 0.07);
}
[data-theme='dark'] .pb-type-single {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}
[data-theme='dark'] .pb-type-area {
  background: rgba(22, 101, 52, 0.28);
  color: #86efac;
}
[data-theme='dark'] .pb-type-liquid {
  background: rgba(30, 64, 175, 0.32);
  color: #93c5fd;
}
[data-theme='dark'] .pb-type-custom {
  background: rgba(107, 33, 168, 0.32);
  color: #d8b4fe;
}
[data-theme='dark'] .pb-badge-auto {
  background: color-mix(in srgb, var(--blue) 22%, transparent);
  color: #93c5fd;
}
[data-theme='dark'] .pb-nav-tool:hover {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .rd-pb-nav {
  background: rgba(255, 255, 255, 0.05);
  border-right-color: var(--border);
}
@media (max-width: 720px) {
  .rd-pb-twopane {
    flex-direction: column;
  }
  .rd-pb-nav {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--rd-border);
  }
}

/* ── §9 Workflow — call-disposition smart table + pending checklist ── */
.rd-workflow .rd-cfg-card-header {
  gap: 8px;
}
.rd-workflow .wf-hdr-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--rd-label);
  font-variant-numeric: tabular-nums;
}
.rd-workflow .wf-hdr-add {
  margin-left: auto;
}
.rd-workflow .wf-card-body {
  padding-top: 12px;
}
.rd-workflow .wf-disp-table {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
}
.rd-workflow .wf-disp-head,
.rd-workflow .wf-disp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 100px 120px 36px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.rd-workflow .wf-disp-head {
  height: 34px;
  background: var(--rd-stat-bg);
  border-bottom: 2px solid #e5e7eb;
}
.rd-workflow .wf-disp-head > span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rd-label);
  font-weight: 600;
}
.rd-workflow .wf-disp-head .wf-th-c {
  text-align: center;
}
.rd-workflow .wf-disp-row {
  min-height: 46px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rd-border-faint);
  background: var(--rd-bg);
}
.rd-workflow .wf-disp-row:nth-child(odd) {
  background: var(--rd-stat-bg);
}
.rd-workflow .wf-disp-row:last-child {
  border-bottom: none;
}
.rd-workflow .wf-disp-row:hover {
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
}
.rd-workflow .wf-cell-outcome {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.rd-workflow .wf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.rd-workflow .wf-disp-name {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-text);
  background: transparent;
  font-family: inherit;
}
.rd-workflow .wf-disp-name:hover {
  border-color: var(--rd-border);
}
.rd-workflow .wf-disp-name:focus {
  border-color: var(--rd-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
  background: var(--rd-bg);
}
.rd-workflow .wf-disp-select {
  width: 100%;
  min-width: 0;
}
.rd-workflow .wf-cell-toggle {
  display: flex;
  justify-content: center;
}
.rd-workflow .wf-cell-del {
  display: flex;
  justify-content: flex-end;
}
.rd-workflow .wf-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--rd-muted);
}
.rd-workflow .wf-pend-list {
  display: flex;
  flex-direction: column;
}
.rd-workflow .wf-pend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rd-row-sep);
}
.rd-workflow .wf-pend-row:last-child {
  border-bottom: none;
}
.rd-workflow .wf-pend-num {
  font-size: 11px;
  color: var(--rd-label);
  font-variant-numeric: tabular-nums;
  width: 18px;
  flex-shrink: 0;
  text-align: center;
}
.rd-workflow .wf-pend-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--rd-text);
  background: transparent;
  font-family: inherit;
}
.rd-workflow .wf-pend-input:hover {
  border-color: var(--rd-border);
}
.rd-workflow .wf-pend-input:focus {
  border-color: var(--rd-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
  background: var(--rd-bg);
}
.rd-workflow .wf-pend-addrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 2px;
}
.rd-workflow .wf-pend-addrow .rd-input {
  flex: 1;
}
[data-theme='dark'] .rd-workflow .wf-disp-head {
  border-bottom-color: var(--border);
}
[data-theme='dark'] .rd-workflow .wf-disp-row:hover {
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}

/* ── §10 Service Tags — nested Tab Order sub-section ── */
.rd-taborder-nested {
  margin-top: 26px;
  border-top: 1px solid var(--rd-border-faint);
  padding-top: 18px;
}
.rd-taborder-nested > .settings-section-header {
  margin-bottom: 12px;
}
.rd-taborder-nested > .settings-section-header h2 {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin: 0;
}
.rd-taborder-nested > .settings-section-header p {
  font-size: 11px;
  color: var(--rd-muted);
  margin: 4px 0 0;
  line-height: 1.5;
}
.rd-taborder-nested .tab-order-list {
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.rd-taborder-nested .tab-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rd-row-sep);
  background: #fff;
}
.rd-taborder-nested .tab-order-item:last-child {
  border-bottom: none;
}
.rd-taborder-nested .tab-order-handle {
  color: #c4c9d2;
  cursor: grab;
  display: inline-flex;
  flex-shrink: 0;
}
.rd-taborder-nested .tab-order-handle svg {
  width: 15px;
  height: 15px;
}
.rd-taborder-nested .tab-order-label-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--rd-text);
  background: transparent;
  font-family: inherit;
}
.rd-taborder-nested .tab-order-label-input:not([readonly]):hover {
  border-color: var(--rd-border);
}
.rd-taborder-nested .tab-order-label-input:focus {
  border-color: var(--rd-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
  background: var(--surface-base);
}
.rd-taborder-nested .tab-order-item.tab-order-dragging {
  opacity: 0.5;
}
.rd-taborder-nested .tab-order-item.tab-order-over {
  box-shadow: inset 0 2px 0 var(--rd-primary);
}
.rd-taborder-nested .settings-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.rd-taborder-nested .settings-action-row .btn-primary {
  background: var(--rd-primary);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.rd-taborder-nested .settings-action-row .btn-primary:hover {
  background: var(--blue-dark);
}
.rd-taborder-nested .settings-action-row .btn-secondary {
  background: #fff;
  color: var(--rd-muted);
  border: 1px solid var(--rd-border);
  border-radius: 5px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.rd-taborder-nested .settings-action-row .btn-secondary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.rd-taborder-nested .save-confirm {
  font-size: 11px;
  color: var(--rd-ok);
  font-weight: 500;
}
[data-theme='dark'] .rd-taborder-nested .tab-order-list,
[data-theme='dark'] .rd-taborder-nested .tab-order-item {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .rd-taborder-nested .settings-action-row .btn-secondary {
  background: transparent;
}

/* Company split: the single branding panel always renders all three sections in
   a fixed order (Identity, Brand Colors, Login Background — see
   renderBrandingSettings). Each Company sub-page shows only its own sections.
   Scoped to the new wrapper classes, so it survives saveBranding()'s re-render
   and never affects shared classes. */
.rd-company-general #branding-panel-body > .rd-section:not(:first-child) {
  display: none;
}
.rd-company-branding #branding-panel-body > .rd-section:first-child {
  display: none;
}

/* ── §11 How It Works — documentation typography ── */
#hiw-content.rd-scope .hiw-content {
  max-width: 760px;
}
#hiw-content.rd-scope .hiw-section {
  padding: 18px 0;
  border-top: 1px solid #f0f2f5;
}
#hiw-content.rd-scope .hiw-section:first-child {
  padding-top: 2px;
  border-top: none;
}
#hiw-content.rd-scope .hiw-section h3 {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  margin: 0 0 8px;
}
#hiw-content.rd-scope .hiw-section p {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 8px;
}
#hiw-content.rd-scope .hiw-section p:last-child {
  margin-bottom: 0;
}
#hiw-content.rd-scope .hiw-section ul,
#hiw-content.rd-scope .hiw-section ol {
  margin: 0 0 8px;
  padding-left: 18px;
}
#hiw-content.rd-scope .hiw-section li {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 4px;
}
#hiw-content.rd-scope .hiw-section strong {
  color: var(--rd-text);
  font-weight: 600;
}
#hiw-content.rd-scope .hiw-section em {
  color: var(--rd-muted);
}
#hiw-content.rd-scope .hiw-section code {
  font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f3f4f6;
  color: #374151;
  border-radius: 4px;
  padding: 1px 5px;
}
#hiw-content.rd-scope .hiw-status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
[data-theme='dark'] #hiw-content.rd-scope .hiw-section {
  border-top-color: var(--border);
}
[data-theme='dark'] #hiw-content.rd-scope .hiw-section h3 {
  color: var(--text-primary);
}
[data-theme='dark'] #hiw-content.rd-scope .hiw-section p,
[data-theme='dark'] #hiw-content.rd-scope .hiw-section li {
  color: var(--text-secondary);
}
[data-theme='dark'] #hiw-content.rd-scope .hiw-section code {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════════════
   Settings — sticky unsaved-changes bar + guard modal + Forms title fix
   ════════════════════════════════════════════════════════════════════ */
/* The bar overlays the top of #so-content (its own scroll viewport). The
   settings overlay is position:fixed (a stacking + positioning context), so the
   absolute bar is laid against it and stays pinned while the content scrolls —
   true "sticky" behaviour. Zero presence when clean; fades + slides down (200ms)
   when the page is dirty. Surface/border use the same dark-aware tokens as
   .so-content, so it is white in light mode and the carbon surface in dark. */
.so-savebar {
  position: absolute;
  top: 0;
  left: 240px; /* flush with the 240px settings sidebar */
  right: 0;
  z-index: 5; /* above page content, below modals (220) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  /* hidden by default — no visual presence */
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}
.so-savebar.so-savebar-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}
.so-savebar-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.so-savebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b; /* amber warning */
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  flex-shrink: 0;
}
.so-savebar-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.so-savebar-btn {
  flex-shrink: 0;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.so-savebar-btn:hover {
  background: var(--blue-dark);
}
.so-savebar-btn:active {
  background: #1e40af;
}
.so-savebar-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Reserve room for the bar when shown so it never covers page content. The
   padding transition is synced with the bar slide so content glides down. */
.so-content {
  transition: padding-top 0.2s ease;
}
.so-content.so-content-hasbar {
  padding-top: 74px;
} /* 24 base + ~50 bar */

/* ── Full-page settings overlay — narrow-screen fallback (<900px) ──────────
   Tablet / small windows: tighten the rail so the content area keeps a usable
   width. Net-new breakpoint (no prior @media targets these selectors). Placed
   after every base rule above so these declarations win by source order. */
@media (max-width: 900px) {
  .so-sidebar {
    width: 180px;
  }
  .so-nav-item,
  .so-nav-grouphdr,
  .so-nav-subitem {
    font-size: 11px;
  }
  .so-savebar {
    left: 180px;
  } /* track the narrowed rail */
}

/* Guard modal — reuses the app .modal-backdrop/.modal pattern; only the type
   scale is tuned to spec (title 16/500, body 13 / secondary). */
#so-unsaved-modal .modal-header h3 {
  font-size: 16px;
  font-weight: 500;
}
.so-unsaved-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Forms page title alignment — only when the Forms view is relocated INTO the
   settings overlay (#so-content). Its native .view-topbar carries extra padding
   + a divider meant for the main content area; strip them and match the type of
   every other settings page title (.rd-page-head / .rd-page-title) so it sits in
   the exact same position. Outside settings (main content) it is untouched. */
#so-content #view-forms .view-topbar {
  padding: 0 0 20px;
  border-bottom: none;
  background: transparent;
}
#so-content #view-forms .view-title {
  font-size: 20px;
  font-weight: 500;
  color: #111827;
  letter-spacing: -0.01em;
}
[data-theme='dark'] #so-content #view-forms .view-title {
  color: var(--text-primary);
}

/* =========================================================
   Dashboard async widgets — Classification Breakdown,
   Problem/Cause Heat Map, Classification Rate.
   Token-driven (dark-mode swaps automatically); matches the
   Metrics board's visual language.
   ========================================================= */

/* Header actions (gear + remove grouped on the right) */
.db-widget-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.db-widget-gear {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--gray-300);
  line-height: 0;
  transition: color 0.12s;
}
.db-widget-gear svg {
  width: 14px;
  height: 14px;
}
.db-widget-gear:hover {
  color: var(--blue);
}

/* ── 1. Classification Breakdown ── */
.dbw-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dbw-comp {
  display: flex;
  gap: 2px;
  height: 12px;
  width: 100%;
  background: var(--surface-base);
  border-radius: 99px;
  overflow: hidden;
}
.dbw-comp-seg {
  min-width: 3px;
  transition: flex-grow 0.3s;
}
.dbw-comp-cap {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--gray-400);
  margin-top: -2px;
}
.dbw-rank-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dbw-rank-row {
  display: grid;
  grid-template-columns: 8px minmax(60px, 1.2fr) 2fr 30px 34px;
  align-items: center;
  gap: 8px;
}
.dbw-rank-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dbw-rank-name {
  font-size: 12px;
  color: var(--gray-700);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dbw-rank-bar-track {
  height: 6px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}
.dbw-rank-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s;
}
.dbw-rank-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-900);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dbw-rank-pct {
  font-size: 11px;
  color: var(--gray-400);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── 2. Problem / Cause Heat Map ── */
.dbw-chart-fill {
  height: 100%;
  min-height: 0;
}

/* ── 3. Classification Rate ── */
.dbw-rate {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.dbw-rate-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dbw-rate-gauge {
  width: 116px;
  flex-shrink: 0;
}
.dbw-rate-head {
  flex: 1;
  min-width: 0;
}
.dbw-rate-head .mw-kpi-value {
  font-size: 30px;
}
.dbw-rate-denom {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}
.dbw-rate-pillrow {
  margin-top: 6px;
}
.dbw-rate-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}
.dbw-rate-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--gray-100);
  padding-top: 8px;
}
.dbw-rate-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.dbw-rate-line-lbl {
  font-size: 11.5px;
  color: var(--gray-500);
}
.dbw-rate-line-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-800);
  font-variant-numeric: tabular-nums;
}
.dbw-rate-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-400);
}
.dbw-rate-cmp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dbw-cmp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
}
.dbw-cmp-lbl {
  font-size: 10.5px;
  color: var(--gray-500);
}
.dbw-cmp-delta {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}
.dbw-rate-err {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--amber, #b45309);
  background: var(--amber-light, #fef3c7);
  border-radius: var(--radius);
  padding: 7px 9px;
}
.dbw-rate-foot {
  margin-top: auto;
  font-size: 10.5px;
  color: var(--gray-400);
  text-align: right;
}

/* Configure-needed empty state (rate widget with no numerator chosen) */
.dbw-cfg-needed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 9px;
  height: 100%;
  min-height: 110px;
  color: var(--gray-400);
  padding: 14px;
}
.dbw-cfg-needed svg {
  width: 26px;
  height: 26px;
  opacity: 0.6;
}
.dbw-cfg-needed p {
  font-size: 12.5px;
  line-height: 1.4;
  max-width: 220px;
}

/* Skeleton shimmer (shown while an external fetch resolves) */
.dbw-skel {
  height: 14px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 400% 100%;
  animation: dbw-shimmer 1.3s ease infinite;
}
.dbw-skel-lg {
  height: 30px;
  width: 55%;
}
.dbw-skel-sm {
  width: 40%;
}
@keyframes dbw-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ── Classification Rate config modal form ── */
.dbw-cfg-field {
  margin-bottom: 16px;
}
.dbw-cfg-field:last-child {
  margin-bottom: 0;
}
.dbw-cfg-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.dbw-cfg-sublabel {
  display: block;
  font-size: 12px;
  color: var(--gray-600);
  margin: 4px 0 4px;
}
.dbw-cfg-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  max-height: 160px;
  overflow-y: auto;
}
.dbw-cfg-check,
.dbw-cfg-radio {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gray-700);
}
.dbw-cfg-check input,
.dbw-cfg-radio input {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}
.dbw-cfg-check {
  margin-bottom: 6px;
}
.dbw-cfg-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.dbw-cfg-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.dbw-cfg-dash {
  color: var(--gray-400);
}
.dbw-cfg-bp {
  margin-top: 10px;
  padding: 10px;
  background: var(--gray-50);
  border-radius: var(--radius);
}
.dbw-cfg-input {
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--surface-base);
  color: var(--gray-900);
}
.dbw-cfg-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.dbw-cfg-input-full {
  width: 100%;
  box-sizing: border-box;
}
.dbw-cfg-hint {
  font-size: 11.5px;
  color: var(--gray-500);
  margin-top: 6px;
  line-height: 1.4;
}
.dbw-cfg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ── Comparison widget ── */
.dbw-cmp {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  min-height: 0;
}
.dbw-cmp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dbw-cmp-subject {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dbw-cmp-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.dbw-cmp-delta.up {
  color: var(--green, #059669);
  background: color-mix(in srgb, var(--green, #059669) 12%, transparent);
}
.dbw-cmp-delta.down {
  color: var(--red, #dc2626);
  background: color-mix(in srgb, var(--red, #dc2626) 12%, transparent);
}
.dbw-cmp-stats {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.dbw-cmp-stat {
  flex: 1;
  min-width: 0;
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.dbw-cmp-val {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dbw-cmp-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray-600);
  margin-top: 2px;
}
.dbw-cmp-sub {
  font-size: 10.5px;
  color: var(--gray-400);
  margin-top: 1px;
}
.dbw-cmp-vs {
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  flex-shrink: 0;
}
.dbw-cmp-chart {
  flex: 1;
  min-height: 0;
  width: 100%;
}
/* config modal: two stacked custom-range rows */
.dbw-cmp-customwrap {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.dbw-cmp-customrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dbw-cmp-customrow .dbw-cfg-sublabel {
  margin: 0;
  width: 58px;
  flex-shrink: 0;
}
.dbw-cmp-customrow .dbw-cfg-input {
  flex: 1;
  min-width: 0;
}

/* ============================================================================
   TOM SELECT THEME  (cache-bust token: 20260611-tomselect)
   ----------------------------------------------------------------------------
   Token-driven re-skin of the Tom Select library so every searchable / multi
   dropdown is a visual twin of the app's native <select> and popovers. Loaded
   AFTER the base tom-select CDN CSS (linked before styles.css), so these rules
   win at equal specificity. Every colour references a semantic token, so dark
   mode — which value-swaps those tokens — is automatic (no [data-theme] rules).
   Wired by tomselect.js via the `data-tom` opt-in attribute.
   ========================================================================== */

/* Wrapper fills its field like the native select did (width:100%). The wrapper
   inherits the original <select>'s classes (e.g. .mw-select / .rd-input / .opt-select),
   which often carry a border/background/shadow — neutralise those so ONLY the inner
   .ts-control draws the box. Without this the original control's border/shadow
   "ghosts" out from under the Tom Select control. */
.ts-wrapper {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.ts-wrapper.ts-hidden,
.ts-control input::-ms-clear {
  display: none;
}
/* The Tom-Select-hidden original <select> is clipped via .ts-hidden-accessible;
   pin it fully out so it can never paint a ghost (this app drives state via JS, not
   native form submit, so dropping it from the a11y tree is safe — TS adds its own). */
select.tomselected.ts-hidden-accessible {
  display: none !important;
}

/* ── Control = a native <select> twin ─────────────────────────────────────── */
.ts-control {
  min-height: 36px;
  padding: 3px 8px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 13px;
  font-family: inherit;
  box-shadow: none;
  box-sizing: border-box;
  align-items: center; /* vertically centre the value/placeholder/input */
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.ts-wrapper.single .ts-control {
  padding-right: 26px;
} /* room for caret */
.ts-control,
.ts-control input {
  color: var(--input-text);
}
.ts-control input {
  font-size: 13px;
}
.ts-control input::placeholder,
.ts-control .ts-placeholder {
  color: var(--text-faint);
}
/* Single-select values/placeholders stay on ONE line (never wrap, e.g. the
   "All Technicians" dispatch filter); ellipsis if the control is too narrow. */
.ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
}
.ts-wrapper.single .ts-control > .item,
.ts-wrapper.single .ts-control > .ts-placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ts-control > input::placeholder {
  white-space: nowrap;
}

/* Focus / open = same blue ring as native inputs (styles.css:2854). */
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}
/* The library repaints the control white while its search input is active
   (`.ts-wrapper.single.input-active .ts-control{background:#fff}`, a 4-class
   selector). Match that specificity so the control stays on-token — critical
   for dark mode, where a hardcoded white box would otherwise flash on focus. */
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.multi.input-active .ts-control {
  background: var(--input-bg);
}
/* Same trap for the RESTING control: the library fills the box white via
   `.ts-wrapper .ts-control` (specificity 0,2,0), which out-specifies the bare
   `.ts-control { background }` rule above — so without this the control rendered
   solid white in dark mode (the reported bug). Re-assert the token fill at matching
   0,2,0 specificity (later in the cascade so it wins); covers single AND multi. */
.ts-wrapper .ts-control {
  background: var(--input-bg);
}

/* Single-select caret — recolour the library's CSS triangle to match. */
.ts-wrapper.single .ts-control::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 11px;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: var(--text-faint) transparent transparent transparent;
}
.ts-wrapper.single.dropdown-active .ts-control::after {
  border-color: var(--blue) transparent transparent transparent;
}
.ts-wrapper.single .ts-control {
  position: relative;
}

/* Disabled / read-only — reduced emphasis + not-allowed (a11y forms guidance). */
.ts-wrapper.disabled {
  opacity: 0.6;
}
.ts-wrapper.disabled .ts-control {
  background: var(--surface-inset);
  cursor: not-allowed;
}
.ts-wrapper.disabled .ts-control,
.ts-wrapper.disabled .ts-control * {
  cursor: not-allowed;
}

/* Selected value (single). */
.ts-wrapper.single .ts-control .item {
  color: var(--input-text);
}

/* ── Multi-select chips ───────────────────────────────────────────────────── */
.ts-wrapper.multi .ts-control {
  padding: 3px 6px;
}
.ts-wrapper.multi .ts-control > .item {
  display: inline-flex;
  align-items: center;
  background: var(--blue-light);
  color: var(--blue-dark);
  border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  border-radius: 5px;
  padding: 1px 5px;
  margin: 2px 4px 2px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.ts-wrapper.multi .ts-control > .item.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.ts-wrapper.multi .ts-control > .item .remove {
  border-left: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  margin-left: 5px;
  padding: 0 4px;
  color: inherit;
  opacity: 0.75;
}
.ts-wrapper.multi .ts-control > .item .remove:hover {
  background: rgba(0, 0, 0, 0.08);
  opacity: 1;
}
.ts-wrapper.multi .ts-control > .item.active .remove {
  border-left-color: rgba(255, 255, 255, 0.5);
}

/* ── Dropdown panel = app popover (surface-overlay + shadow-lg) ───────────── */
.ts-dropdown {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: 13px;
  z-index: 100000; /* render on <body> (default dropdownParent) ABOVE all
                                  app UI — modals (220), settings overlay (215), header
                                  (210), SweetAlert, etc. so it's never hidden/clipped */
  overflow: hidden;
  padding: 0;
}
.ts-dropdown .ts-dropdown-content {
  padding: 4px;
}
.ts-dropdown .option {
  padding: 7px 10px;
  border-radius: 5px;
  color: var(--text-primary);
  cursor: pointer;
  scroll-margin: 4px;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: var(--blue-light);
  color: var(--blue-dark);
}
.ts-dropdown .option[aria-selected='true'],
.ts-dropdown .option.selected {
  font-weight: 600;
}
.ts-dropdown .optgroup-header {
  padding: 7px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  cursor: default;
}
.ts-dropdown .optgroup:not(:first-child) .optgroup-header {
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.ts-dropdown .no-results {
  padding: 8px 10px;
  color: var(--text-secondary);
}
.ts-dropdown .create {
  padding: 7px 10px;
  color: var(--blue);
}
.ts-dropdown .create:hover,
.ts-dropdown .create.active {
  background: var(--blue-light);
}
.ts-dropdown .spinner {
  /* keep library default sizing */
}

/* Thin themed scrollbar inside long dropdowns. */
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar {
  width: 10px;
}
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 6px;
  border: 3px solid var(--surface-overlay);
}

/* ── Layout bridges: contexts where the original native <select> was NOT full
   width (toolbars / inline rows). Keep the wrapper content-sized there so dense
   bars don't reflow. Extend this list if a toolbar select stretches oddly. */
.met-filter-group .ts-wrapper,
.rep-filter .ts-wrapper,
.rd-field-ctrl .ts-wrapper,
.rd-inline-field .ts-wrapper,
.rd-scope .ts-wrapper.rd-people-fsel,
.opt-row .ts-wrapper,
.ta-range-select.ts-wrapper {
  width: auto;
  min-width: 150px;
  display: inline-flex;
}
.inline-field .ts-wrapper {
  width: auto;
  min-width: 120px;
}

/* Inline filter / slot rows: keep wrapped selects content-sized so compact rows
   don't reflow (Advanced Filters condition rows, the ticket tech-slot rows). */
.afp-row .ts-wrapper {
  width: auto;
  flex: 0 1 auto;
}
.afp-row .ts-wrapper.afp-col-sel,
.afp-row .afp-col-sel.ts-wrapper {
  min-width: 150px;
}
.afp-row .ts-wrapper.afp-cond-sel,
.afp-row .afp-cond-sel.ts-wrapper {
  min-width: 130px;
}
.afp-row .ts-wrapper.afp-val-in,
.afp-row .afp-val-in.ts-wrapper {
  min-width: 150px;
  flex: 1 1 auto;
}
.tsp-tech-slot .ts-wrapper {
  width: auto;
  min-width: 150px;
  flex: 1 1 auto;
}

/* CSV import column-mapping select: fill the table cell; its dropdown is parented
   to <body> (so it escapes the table's overflow) — give that dropdown a sensible
   min width so long field labels stay readable. */
.import-col-select-wrap .ts-wrapper {
  width: 100%;
  min-width: 0;
}
.import-col-select-wrap .ts-control {
  min-height: 30px;
  font-size: 12px;
  padding: 1px 8px;
}
.ts-dropdown {
  min-width: 170px;
}

/* ── @mention tagging in ticket notes (mentions.js) ─────────────────────────
   Contenteditable composer twin of the note <textarea>; the original textarea
   stays in the DOM (display:none) as the .value mirror so existing save
   handlers keep working. Chip + dropdown are token-driven and dark-mode aware. */
.tsp-mention-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 78px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--gray-800);
  background: var(--surface-base);
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  outline: none;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.tsp-mention-input:focus {
  background: var(--cb-fafcff, #fafcff);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.tsp-mention-input:empty::before {
  content: attr(data-placeholder);
  color: var(--gray-400);
  pointer-events: none;
}
/* Main note composer sits inside .tsp-note-compose, which already draws a frame. */
.tsp-note-textarea.tsp-mention-input {
  border: none;
  border-radius: 0;
}
.tsp-note-textarea.tsp-mention-input:focus {
  box-shadow: none;
}
/* Inline edit box keeps the blue edit frame. */
.tsp-note-edit-textarea.tsp-mention-input {
  min-height: 72px;
  border: 1px solid var(--blue);
  border-radius: 4px;
}

/* The blue mention chip — shared by the composer and the saved timeline. */
.tsp-mention {
  color: var(--blue-dark);
  background: var(--blue-light, rgba(37, 99, 235, 0.1));
  font-weight: 600;
  border-radius: 4px;
  padding: 0 3px;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tsp-mention-input .tsp-mention {
  cursor: default;
}
[data-theme='dark'] .tsp-mention {
  color: #bfdbfe;
  background: color-mix(in srgb, var(--blue) 26%, transparent);
}

/* The user-picker dropdown (appended to <body>, fixed under the caret). */
.tsp-mention-menu {
  position: fixed;
  z-index: 2200;
  min-width: 222px;
  max-width: 300px;
  max-height: 248px;
  overflow-y: auto;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 4px;
}
.tsp-mention-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.tsp-mention-opt.is-active {
  background: var(--blue-light, rgba(37, 99, 235, 0.1));
}
.tsp-mention-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
}
.tsp-mention-opt-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.tsp-mention-opt-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsp-mention-opt-sub {
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsp-mention-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--gray-400);
}

/* ════════════════════════════════════════════════════════════════════════
   TICKET PANEL — VISUAL REDESIGN  (2026-06-12)
   Elevated white cards floating on a soft blue-tinted body. Applies to ALL
   four view modes (docked / floating / modal / fullscreen) and all six tabs
   because they share one .tsp-body. Scoped to .tl-side-panel so nothing else
   in the app is touched. Token-mapped so the existing dark mode keeps working.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Panel design tokens — LIGHT (spec values) ─────────────────────────── */
.tl-side-panel {
  --tsp-body-bg: #f4f6fa;
  --tsp-card-bg: #ffffff;
  --tsp-card-border: rgba(0, 0, 0, 0.05);
  --tsp-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
  --tsp-card-title: #374151;
  --tsp-label: #9ca3af;
  --tsp-value: #1e293b;
  --tsp-input-bg: #f4f6f9;
  --tsp-input-bg-hover: #eceff5;
  --tsp-focus-ring: 0 0 0 2px rgba(37, 99, 235, 0.25);
  --tsp-ro-bg: #f8f9fc;
  --tsp-ro-accent: #94a3b8;
  --tsp-divider: rgba(0, 0, 0, 0.05);
  --tsp-seg-track: #eceff5;
  --tsp-seg-thumb: #ffffff;
  --tsp-seg-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.05);
  --tsp-chip-bg: #eef2ff;
  --tsp-chip-text: #4f5bd5;
  --tsp-activity-accent: #8b5cf6; /* purple — system / activity entries  */
}

/* ── Panel design tokens — DARK (Carbon-mapped equivalents) ────────────── */
[data-theme='dark'] .tl-side-panel {
  --tsp-body-bg: #0f0f12;
  --tsp-card-bg: #18181b;
  --tsp-card-border: rgba(255, 255, 255, 0.07);
  --tsp-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --tsp-card-title: #e4e4e7;
  --tsp-label: #71717a;
  --tsp-value: #f4f4f5;
  --tsp-input-bg: #121215;
  --tsp-input-bg-hover: #1a1a1f;
  --tsp-focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.45);
  --tsp-ro-bg: #1c1c20;
  --tsp-ro-accent: #52525b;
  --tsp-divider: rgba(255, 255, 255, 0.07);
  --tsp-seg-track: #232329;
  --tsp-seg-thumb: #3a3a42;
  --tsp-seg-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --tsp-chip-bg: #232329;
  --tsp-chip-text: #a5b4fc;
  --tsp-activity-accent: #a78bfa;
}

/* Bottom "next tab" bar blends into the tinted body (no hard divider) */
.tsp-body .tsp-next-tab-wrap {
  border-top: none;
  padding: 6px 18px 16px;
}
.tsp-body .tsp-next-tab-btn {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* A clear card divider (used inside cards that need one subtle separator) */
.tsp-section-divider {
  border: none;
  border-top: 1px solid var(--tsp-divider);
  margin: 4px 0 0;
}

/* ── Inputs — soft filled, borderless, blue focus ring ─────────────────── */
.tsp-body .field input[type='text'],
.tsp-body .field input[type='number'],
.tsp-body .field input[type='date'],
.tsp-body .field input[type='time'],
.tsp-body .field input[type='tel'],
.tsp-body .field input[type='email'],
.tsp-body .field input[type='password'],
.tsp-body .field select,
.tsp-body .field textarea,
.tsp-body textarea[data-mention],
.tsp-body .tsp-note-textarea,
.tsp-body .tsp-notes-search input,
.tsp-body .svcfg-cost-input,
.tsp-body .hm-input-group,
.tsp-body .tsp-sqft-wrap {
  background: var(--tsp-input-bg);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--tsp-value);
  font-size: 12.5px;
  box-shadow: none;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
.tsp-body .field input[type='text'],
.tsp-body .field input[type='number'],
.tsp-body .field input[type='date'],
.tsp-body .field input[type='time'],
.tsp-body .field input[type='tel'],
.tsp-body .field input[type='email'],
.tsp-body .field input[type='password'],
.tsp-body .field select {
  height: 34px;
  padding: 0 10px;
}
.tsp-body .field textarea,
.tsp-body textarea[data-mention],
.tsp-body .tsp-note-textarea {
  padding: 7px 10px;
}
.tsp-body .field input:hover:not(:focus),
.tsp-body .field select:hover:not(:focus),
.tsp-body .field textarea:hover:not(:focus) {
  background: var(--tsp-input-bg-hover);
}
.tsp-body .field input:focus,
.tsp-body .field select:focus,
.tsp-body .field textarea:focus,
.tsp-body textarea[data-mention]:focus,
.tsp-body .tsp-note-textarea:focus,
.tsp-body .tsp-notes-search input:focus {
  outline: none;
  border-color: transparent;
  background: var(--tsp-card-bg);
  box-shadow: var(--tsp-focus-ring);
}
/* Cost / hm / sqft composite inputs: outer wrap carries the fill, inner input is bare */
.tsp-body .svcfg-cost-input input,
.tsp-body .hm-input-group input,
.tsp-body .tsp-sqft-wrap input {
  background: transparent;
  border: none;
  box-shadow: none;
}
.tsp-body .svcfg-cost-input:focus-within,
.tsp-body .hm-input-group:focus-within,
.tsp-body .tsp-sqft-wrap:focus-within {
  background: var(--tsp-card-bg);
  box-shadow: var(--tsp-focus-ring);
}

/* Tom Select controls in the panel match the filled-input look */
.tsp-body .ts-wrapper.single .ts-control,
.tsp-body .ts-wrapper.multi .ts-control {
  background: var(--tsp-input-bg);
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  min-height: 34px;
  color: var(--tsp-value);
}
.tsp-body .ts-wrapper.single.input-active .ts-control,
.tsp-body .ts-wrapper.single.focus .ts-control,
.tsp-body .ts-wrapper.multi.focus .ts-control {
  background: var(--tsp-card-bg);
  border-color: transparent;
  box-shadow: var(--tsp-focus-ring);
}

/* ── Field labels — tiny, uppercase, faint (strong value contrast) ─────── */
.tsp-body .field > label,
.tsp-body .tsp-note-type-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tsp-label);
}

/* ── Read-only displays ────────────────────────────────────────────────── */
.tsp-body .tsp-readonly-pill,
.tsp-body .tsp-readonly-block {
  background: var(--tsp-input-bg);
  border: none;
  border-radius: 6px;
  color: var(--tsp-value);
}

/* ── Segmented control (ASAP / Paid Service / Deduction yes-no) ────────── */
.tsp-body .tsp-asap-toggle {
  gap: 2px;
  background: var(--tsp-seg-track);
  border-radius: 8px;
  padding: 3px;
}
.tsp-body .tsp-asap-opt {
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--tsp-label);
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.tsp-body .tsp-asap-opt:hover {
  background: transparent;
  color: var(--tsp-card-title);
}
.tsp-body .tsp-asap-opt:has(input:checked) {
  background: var(--tsp-seg-thumb);
  box-shadow: var(--tsp-seg-thumb-shadow);
  color: var(--blue);
  border: none;
}
.tsp-body .tsp-asap-opt:has(input[value='yes']:checked),
.tsp-body .tsp-asap-opt:has(input[value='YES']:checked) {
  background: var(--tsp-seg-thumb);
  box-shadow: var(--tsp-seg-thumb-shadow);
  color: var(--red);
  border: none;
}

/* Tri-state segmented control (Major Callback: N/A · No · Yes) */
.tsp-body .tsp-tri-toggle {
  gap: 2px;
  background: var(--tsp-seg-track);
  border-radius: 8px;
  padding: 3px;
}
.tsp-body .tsp-tri-opt {
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--tsp-label);
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.tsp-body .tsp-tri-opt:hover {
  background: transparent;
  color: var(--tsp-card-title);
}
.tsp-body .tsp-tri-opt:has(input[value='NA']:checked) {
  background: var(--tsp-seg-thumb);
  box-shadow: var(--tsp-seg-thumb-shadow);
  color: var(--gray-600);
}
.tsp-body .tsp-tri-opt:has(input[value='NO']:checked) {
  background: var(--tsp-seg-thumb);
  box-shadow: var(--tsp-seg-thumb-shadow);
  color: var(--green);
}
.tsp-body .tsp-tri-opt:has(input[value='YES']:checked) {
  background: var(--tsp-seg-thumb);
  box-shadow: var(--tsp-seg-thumb-shadow);
  color: var(--red);
}

/* ── "Read only" chip + read-only card skin ────────────────────────────── */
.tsp-ro-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tsp-ro-accent);
  background: color-mix(in srgb, var(--tsp-ro-accent) 14%, transparent);
  border-radius: 99px;
  padding: 2px 8px;
}
.tsp-ro-help {
  grid-column: 1 / -1;
  margin: -2px 0 2px;
  font-size: 11px;
  color: var(--tsp-label);
  line-height: 1.45;
}
.tsp-section[data-section='completed-job-details'] {
  background: var(--tsp-ro-bg);
  border: 0.5px solid var(--tsp-card-border);
  border-left: 3px solid var(--tsp-ro-accent);
  border-radius: 0 10px 10px 0;
}

/* ── KPI stat cards (profit summary) ───────────────────────────────────── */
.tsp-kpi-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tsp-kpi-card {
  background: var(--tsp-card-bg);
  border: 0.5px solid var(--tsp-card-border);
  border-radius: 8px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--tsp-card-shadow);
}
.tsp-kpi-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--tsp-value);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tsp-kpi-card.tsp-kpi-net .tsp-kpi-value {
  color: var(--green);
}
.tsp-kpi-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tsp-label);
}

/* ── Tech job photos — responsive grid of upload zones ─────────────────────
   auto-fit + a 170px minimum keeps each Before/During/After group wide enough for
   its header (name + count + Add) to fit on one line, so the Add button never gets
   clipped by .jp-group's overflow:hidden in a narrow floating/docked panel. Lays
   out 3-up when wide, 2-up at medium, 1-up at the narrowest sizes. */
.tsp-section[data-section='completed-job-details'] .jp-groups-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.tsp-section[data-section='completed-job-details'] .jp-group {
  margin: 0;
  min-width: 0;
}

/* ── Assessment "Media" card — photos + paperwork side by side ──────────── */
.tsp-media-cols {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 14px;
  align-items: start;
}
.tsp-media-col {
  min-width: 0;
}
.tsp-media-col-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tsp-label);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tsp-media-divider {
  background: var(--tsp-divider);
  width: 1px;
  align-self: stretch;
}
@container tspanel (max-width: 358px) {
  .tsp-media-cols {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tsp-media-divider {
    display: none;
  }
}
/* Tighten the Media card — was taking too much vertical space (2-col + divider kept). */
.tsp-section[data-section='media'] {
  padding-top: 12px;
  padding-bottom: 13px;
  gap: 8px 14px;
}
.tsp-section[data-section='media'] > .tsp-section-label {
  margin-bottom: 2px;
}
.tsp-section[data-section='media'] .tsp-media-col-label {
  margin-bottom: 5px;
}
.tsp-section[data-section='media'] .tsp-photo-grid,
.tsp-section[data-section='media'] .tsp-paperwork-display {
  min-height: 44px;
  padding: 8px;
}
.tsp-section[data-section='media'] .tsp-photos-empty {
  padding: 8px 0;
}
/* Photo overflow "+N" tile */
.tsp-photo-more {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tsp-value) 6%, var(--tsp-input-bg));
  color: var(--tsp-card-title);
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.12s;
}
.tsp-photo-more:hover {
  background: color-mix(in srgb, var(--tsp-value) 12%, var(--tsp-input-bg));
}

/* ── Classification & Flags — read-display summary + edit toggle ────────── */
.tsp-flags-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tsp-flag-card {
  background: var(--tsp-input-bg);
  border: 0.5px solid var(--tsp-card-border);
  border-radius: 8px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tsp-flag-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--tsp-value);
  line-height: 1.1;
}
.tsp-flag-value.is-yes {
  color: var(--red);
}
.tsp-flag-value.is-no {
  color: var(--green);
}
.tsp-flag-value.is-na {
  color: var(--gray-500);
}
.tsp-flag-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tsp-label);
}
.tsp-flags-edit-link {
  grid-column: 1 / -1;
  justify-self: start;
  background: none;
  border: none;
  padding: 2px 0;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tsp-flags-edit-link:hover {
  text-decoration: underline;
}
.tsp-flags-editor[hidden] {
  display: none;
}
.tsp-flags-editor {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
}

/* ── Financial — Payment Details + Payment Status side-by-side ─────────── */
.tsp-body .tsp-fin-stats {
  margin: 12px 14px 0;
  padding: 0;
  border-bottom: none;
}
.tsp-body .tsp-fin-stat {
  box-shadow: var(--tsp-card-shadow);
  border: 0.5px solid var(--tsp-card-border);
}
.tsp-fin-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  margin: 12px 14px;
}
.tsp-fin-2col > .tsp-section {
  margin: 0;
}
@container tspanel (max-width: 358px) {
  .tsp-fin-2col {
    grid-template-columns: 1fr;
  }
}

/* ── Notes — Monday.com activity feed ──────────────────────────────────── */
.tsp-note-filter-pills {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 14px 2px;
}
.tsp-note-filter-pills:empty {
  display: none;
}
.tsp-note-filter-pill {
  border: 0.5px solid var(--tsp-card-border);
  background: var(--tsp-card-bg);
  color: var(--tsp-card-title);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    box-shadow 0.12s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.tsp-note-filter-pill:hover {
  background: var(--tsp-input-bg-hover);
}
.tsp-note-filter-pill.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}
.tsp-notes-timeline {
  gap: 0;
  position: relative;
}
/* timeline spine */
.tsp-notes-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--tsp-divider);
}
.tsp-body .tsp-note-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: none;
  border-left: none;
  padding: 10px 0 10px 44px;
  margin: 0;
}
.tsp-note-avatar {
  position: absolute;
  left: 4px;
  top: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--gray-400);
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--tsp-body-bg);
}
.tsp-note-avatar svg {
  width: 14px;
  height: 14px;
}
.tsp-note-avatar.is-system {
  background: color-mix(in srgb, var(--tsp-activity-accent) 18%, var(--tsp-card-bg));
  color: var(--tsp-activity-accent);
}
.tsp-body .tsp-note-entry-hdr {
  gap: 7px;
  align-items: baseline;
}
.tsp-body .tsp-note-author {
  font-weight: 600;
  color: var(--tsp-card-title);
  font-size: 12.5px;
}
.tsp-body .tsp-note-type {
  background: var(--tsp-chip-bg);
  color: var(--tsp-chip-text);
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
}
.tsp-body .tsp-note-time {
  color: var(--tsp-label);
  font-size: 10.5px;
}
/* The note "card" wraps the body so manual notes read as elevated bubbles */
.tsp-body .tsp-note-body {
  background: var(--tsp-card-bg);
  border: 0.5px solid var(--tsp-card-border);
  border-radius: 8px;
  padding: 9px 11px;
  box-shadow: var(--tsp-card-shadow);
  color: var(--gray-700);
  font-size: 12.5px;
  line-height: 1.5;
}
/* Accent the bubble's left edge by source */
.tsp-body .tsp-note-sm .tsp-note-body {
  border-left: 3px solid var(--blue);
}
.tsp-body .tsp-note-tech .tsp-note-body {
  border-left: 3px solid var(--green);
}
.tsp-body .tsp-note-financial .tsp-note-body {
  border-left: 3px solid var(--cd-059669, #059669);
}
.tsp-body .tsp-note-comm .tsp-note-body {
  border-left: 3px solid var(--blue);
}
/* System / activity entries: purple accent + muted italic */
.tsp-body .tsp-note-system .tsp-note-body {
  border-left: 3px solid var(--tsp-activity-accent);
  background: color-mix(in srgb, var(--tsp-activity-accent) 6%, var(--tsp-card-bg));
}
.tsp-body .tsp-note-system .tsp-note-body {
  font-style: italic;
  color: var(--gray-500);
  font-size: 12px;
}

/* ── Buttons — shadow elevation, not flat borders (panel-scoped) ───────── */
.tsp-body .btn-primary {
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}
.tsp-body .btn-secondary {
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
.tsp-body .btn-secondary:hover {
  background: var(--tsp-input-bg-hover);
}

/* ── Status badge in panel header — subtle gradient + shadow (alive, not flat) ──
   The JS sets background-color inline; this gradient + highlight layers over it. */
.tl-side-panel .tsp-status-badge {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.1));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ════════════ FULL SCREEN — card-per-section masonry across the wide canvas ═════
   Section cards flow into 2 balanced columns that fill the width (collapsing to 1 on a
   narrow canvas), instead of the previous centred column. The Financial tab nests its
   cards inside #tsp-financial-full, so that wrapper is the column context there; every
   other tab uses the pane itself.
   (Replaces the old max-width:1080 + margin:auto rule, whose auto margins on flex items
   defeated align-items:stretch and collapsed each card to its content width, centred.) */
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane:not(#tsp-pane-financial) {
  display: block;
  column-count: 2;
  column-gap: 18px;
  padding: 16px 22px 8px;
  max-width: none;
}
.tl-side-panel.tsp-mode-fullscreen #tsp-pane-financial {
  padding: 16px 22px 8px;
}
.tl-side-panel.tsp-mode-fullscreen #tsp-financial-full {
  column-count: 2;
  column-gap: 18px;
  max-width: none;
}

/* Cards stay intact within a column; vertical rhythm via margin (multicol has no row-gap). */
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane:not(#tsp-pane-financial) > .tsp-section,
.tl-side-panel.tsp-mode-fullscreen #tsp-financial-full > .tsp-section {
  break-inside: avoid;
  margin: 0 0 18px;
  max-width: none;
}

/* Items that must run full width across both columns. */
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane > .tsp-cf-tab-container,
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane > .tsp-next-tab-wrap,
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane > .tsp-overview-review-banner,
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane > .tsp-pending-items,
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane > .tsp-account-banner,
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane > .tsp-duplicate-banner,
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane > #tsp-account-section,
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane > .tsp-note-filter-pills,
.tl-side-panel.tsp-mode-fullscreen #tsp-financial-full > .tsp-fin-stats,
.tl-side-panel.tsp-mode-fullscreen #tsp-financial-full > .tsp-fin-2col {
  column-span: all;
  break-inside: avoid;
  margin: 0 0 16px;
  max-width: none;
}

/* Keep hidden cards hidden (overrides the .tsp-section--compact display:block below). */
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-section[hidden] {
  display: none;
}

/* The mid-list divider would force an awkward full-width break in the masonry. */
.tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane > .tsp-section-divider {
  display: none;
}

/* Inside the now half-width cards, keep paired fields at 2 columns rather than jumping
   to the wide-panel 3-column container-query layout. */
.tl-side-panel.tsp-mode-fullscreen .tsp-grid-2col {
  grid-template-columns: 1fr 1fr;
}

/* Reflow to a single column when the canvas is genuinely narrow. */
@container tspanel (max-width: 760px) {
  .tl-side-panel.tsp-mode-fullscreen .tsp-body .tsp-tab-pane:not(#tsp-pane-financial),
  .tl-side-panel.tsp-mode-fullscreen #tsp-financial-full {
    column-count: 1;
  }
}
/* Account-link card: the status text + Create/Attach buttons sit on one clean
   full-width inline row in every mode (never stranded in the middle of the card). */
.tsp-section--compact > .tsp-account-empty,
.tsp-section--compact > .tsp-account-linked {
  grid-column: 1 / -1;
}
.tl-side-panel.tsp-mode-fullscreen .tsp-section--compact {
  display: block;
}

/* ══════════════════════════════════════════════════════════
   RESILIENCE / ASYNC UX (loading overlays, busy buttons,
   offline banner) — added in the 2026-06-16 resilience pass.
   Uses the existing design tokens (--surface-*, --text-*, --blue,
   --radius, --shadow). The fatal-error recovery screen is rendered
   with inline styles in main.js (it must work if THIS file fails
   to load), so it intentionally has no rules here.
══════════════════════════════════════════════════════════ */

/* Spinner — a single rotating ring. Sized for overlays; --sm for inline button use. */
.gw-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--gray-200, #e2e8f0);
  border-top-color: var(--blue, #2563eb);
  animation: gw-spin 0.7s linear infinite;
  flex: none;
}
.gw-spinner--sm {
  width: 15px;
  height: 15px;
  border-width: 2px;
  display: inline-block;
  vertical-align: middle;
}
@keyframes gw-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gw-spinner {
    animation-duration: 1.4s;
  }
}

/* Loading overlay — covers its (position:relative) container with a translucent veil,
   centered spinner + message. showLoading()/hideLoading() in utils.js manage it. */
.gw-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(120%) blur(1px);
  -webkit-backdrop-filter: saturate(120%) blur(1px);
  border-radius: inherit;
}
.gw-loading-msg {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  text-align: center;
  padding: 0 16px;
}

/* Full-screen boot loader (index.html #boot-loader). A neutral, login-independent veil
   shown from the first paint through the end of the initial Supabase session check, so a
   logged-in user never sees the #auth-wrap login screen flash on refresh. Solid
   surface-colored backdrop + centered spinner; z-index sits ABOVE #auth-wrap (9999) so
   the login backdrop underneath stays fully covered while the check runs. hideBootLoader()
   (auth.js) sets [hidden] the moment the app, an auth screen, or the public form is ready. */
#boot-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-base, #ffffff);
}
#boot-loader[hidden] {
  display: none !important;
}

/* Busy action button (duplicate-submit protection). withButtonBusy() swaps the label
   for a spinner + busy text; the button is also [disabled] while busy. */
.gw-btn-busy {
  cursor: progress !important;
  opacity: 0.85;
}
.gw-btn-busy .gw-btn-busy-label {
  margin-left: 7px;
}
/* When the busy spinner sits on a SOLID, colored button (white text — e.g. the Sign In
   button, .btn-primary), its default gray ring + blue arc is illegible: the blue arc
   disappears into the blue fill, leaving a near-static gray ring. Recolor it to a
   translucent-white ring + solid-white arc so the motion reads clearly on every solid
   variant. Works in BOTH light and dark mode (these buttons keep a colored fill + white
   text in both themes); the 3-class specificity here intentionally beats the
   [data-theme='dark'] .gw-spinner rule below so the white arc holds in dark mode too. */
.btn-primary.gw-btn-busy .gw-spinner,
.btn-amber.gw-btn-busy .gw-spinner,
.btn-warn.gw-btn-busy .gw-spinner,
.btn-success.gw-btn-busy .gw-spinner,
.btn-danger.gw-btn-busy .gw-spinner {
  border-color: rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
}

/* Offline banner — non-blocking strip pinned to the top of the viewport. Styled like the
   app's amber notice tone; slides down when shown. */
.gw-net-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  background: var(--amber, #d97706);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 8px 16px;
  box-shadow: var(--shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.gw-net-banner--show {
  transform: translateY(0);
}

/* Dark-mode tuning for the overlay veil. */
[data-theme='dark'] .gw-loading-overlay {
  background: rgba(15, 23, 42, 0.72);
}
[data-theme='dark'] .gw-spinner {
  border-color: var(--gray-700, #334155);
  border-top-color: var(--blue, #2563eb);
}