/* ==========================================================================
   Design tokens — Guideway Care (v28)
   Light content surfaces + navy chrome + Guideway azure accent.
   Palette taken from the brand assets in /assets/. Every text/background
   pair below was measured for WCAG contrast, not eyeballed — the ratios in
   the comments are real and worth preserving if you retune anything.

   THE ONE TRAP: brand azure #0096D5 is only 3.32:1 on white. That is fine
   for large blocks, rails and focus rings, but it FAILS AA for link text and
   for white button labels. Hence the accent split below — use --accent for
   fills/rails, --accent-strong anywhere text is involved on a light surface.
   Note the hover directions are opposites: on white you DARKEN, on navy you
   LIGHTEN. That is why there are two hover tokens rather than one.
   ========================================================================== */
:root {
  /* ---- Brand ------------------------------------------------------------ */
  --navy:          #011925;   /* sidebar, header, dark surfaces */
  --navy-2:        #052736;   /* raised navy — hover rows, nested panels */

  --accent:        #0096D5;   /* brand azure: fills, active rail, focus ring */
  --accent-strong: #0077AD;   /* 4.95:1 on white — links, primary button fill */
  --accent-strong-hover: #005F8A;  /* 6.99:1 — hover for the above */
  --accent-on-navy:      #00A8EE;  /* lighter azure — hover/active on navy */
  --accent-dim:    rgba(0, 150, 213, 0.12);   /* tints, active row background */

  /* Back-compat alias: --accent-hover was the dark theme's "lighter accent".
     Anything still referencing it now gets the navy-context value. */
  --accent-hover:  #00A8EE;

  /* ---- Surfaces (light) ------------------------------------------------- */
  --bg:            #F4F7FA;   /* page background — cool light gray */
  --surface:       #FFFFFF;   /* cards */
  --surface-2:     #EEF2F6;   /* inputs, table stripes, wells */
  --surface-3:     #E4EAF0;   /* pressed / tertiary */
  --border:        #E2E8EE;   /* hairlines */
  --border-hover:  #CBD7E0;
  /* Translucent surface for panels floating over a map or image, where a
     solid fill would hide context. Needs its own token because rgba() cannot
     be derived from --surface in plain CSS. */
  --surface-overlay: rgba(255, 255, 255, 0.94);

  /* ---- Text -------------------------------------------------------------- */
  --text:          #0F2A36;   /* 14.95:1 on white — AAA */
  --text-dim:      #556B78;   /*  5.58:1 on white — AA  */
  --text-faint:    #7B8C97;   /*  3.48:1 — large/decorative only, never body */
  --text-on-navy:     #FFFFFF;   /* 17.99:1 on navy — AAA */
  --text-on-navy-dim: #A4B8C4;   /*  8.77:1 on navy — AAA */

  /* ---- Status — darkened for light backgrounds --------------------------- */
  /* The dark theme's #22c55e / #f5a623 / #ef4444 all fail AA on white. */
  --success:       #15803D;   /* 5.02:1 */
  --success-dim:   rgba(21, 128, 61, 0.12);
  --warning:       #C2410C;   /* 5.18:1 */
  --warning-dim:   rgba(194, 65, 12, 0.12);
  --danger:        #B91C1C;   /* 6.47:1 */
  --danger-dim:    rgba(185, 28, 28, 0.12);

  /* ---- Elevation --------------------------------------------------------- */
  /* New in v28: a light theme needs shadow for depth. The dark theme used
     borders alone, which reads flat and cheap on white. */
  --shadow-sm:     0 1px 2px rgba(1, 25, 37, 0.06);
  --shadow-md:     0 2px 8px rgba(1, 25, 37, 0.08);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Links use the STRONG azure: plain --accent is 3.32:1 on white and fails AA
   for text. Hover darkens (a light-theme convention) rather than lightening. */
a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--accent-strong-hover); }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ==========================================================================
   Layout
   ========================================================================== */
/* --------------------------------------------------------------------------
   App shell — fixed navy sidebar + light topbar.

   One number governs the whole layout: --sidebar-w. The sidebar is fixed, so
   #app-main is offset by an equal margin rather than being a flex sibling —
   that keeps every existing view's internal layout untouched.
   -------------------------------------------------------------------------- */
:root { --sidebar-w: 240px; --topbar-h: 56px; }

#app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--navy);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 40;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  color: var(--text-on-navy);
}
.sidebar-brand:hover { color: var(--text-on-navy); }
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.header-brand-sub {
  color: var(--text-on-navy-dim);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.sidebar-nav { display: flex; flex-direction: column; padding: 6px 0 24px; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 21px;
  color: var(--text-on-navy-dim);
  font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nav-item:hover { background: var(--navy-2); color: var(--text-on-navy); }
.nav-item.active {
  color: var(--text-on-navy);
  background: var(--accent-dim);
  border-left-color: var(--accent);
  font-weight: 500;
}

.nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 10px 18px;
}

.nav-badge {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  margin-left: auto;
  border-radius: 8px;
  background: var(--success);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Tools disclosure ------------------------------------------------------- */
.nav-parent { padding-right: 10px; }
.nav-parent-link { flex: 1; color: inherit; }
.nav-parent-link:hover { color: inherit; }

.nav-disclosure {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  color: var(--text-on-navy-dim);
  transition: transform 0.15s, background 0.12s, color 0.12s;
}
.nav-disclosure:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-on-navy); }
.nav-group.is-expanded .nav-disclosure { transform: rotate(180deg); }

/* Collapsed by default; grid-template-rows animates to auto-height cleanly. */
/* Collapsed by default. grid-template-rows 0fr -> 1fr animates to the
   content's natural height without hardcoding one.
   INVARIANT: .nav-sub must contain exactly ONE child (.nav-sub-inner).
   The rule sizes only the first EXPLICIT row — any further direct children
   land in auto-sized implicit rows and stay visible while collapsed, which
   is precisely the bleed-through this replaced. If you add markup here, put
   it inside .nav-sub-inner. */
.nav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s ease;
  overflow: hidden;              /* clips the active item's left rail at 0 height */
}
.nav-sub-inner { overflow: hidden; min-height: 0; }
.nav-group.is-expanded .nav-sub { grid-template-rows: 1fr; }
.nav-sub-item {
  display: block;
  padding: 7px 18px 7px 34px;
  font-size: 12.5px;
  color: var(--text-on-navy-dim);
  border-left: 3px solid transparent;
}
.nav-sub-item:hover { background: var(--navy-2); color: var(--text-on-navy); }
.nav-sub-item.active {
  color: var(--text-on-navy);
  border-left-color: var(--accent);
  background: var(--accent-dim);
}

/* Topbar ------------------------------------------------------------------ */
#app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-left: var(--sidebar-w);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.header-inner {
  height: var(--topbar-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-user-block { display: flex; align-items: center; gap: 12px; }
.header-user { color: var(--text-dim); font-size: 13px; }

/* Hamburger — desktop hides it; it only exists when the sidebar goes away. */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px; height: 34px;
  margin-left: -6px;
  border-radius: var(--radius-sm);
}
.hamburger span {
  display: block;
  height: 2px;
  width: 18px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 1px;
}
.hamburger:hover { background: var(--surface-2); }

#app-scrim {
  position: fixed;
  inset: 0;
  background: rgba(1, 25, 37, 0.45);
  z-index: 35;
}
#app-scrim[hidden] { display: none; }

#app-main {
  margin-left: var(--sidebar-w);
  padding: 32px 24px;
}
/* The 1200px reading measure now lives on an inner wrapper of the offset
   column, so content stays centred beside the sidebar instead of being
   centred against the whole viewport. */
#app-main > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Signed out (login): no chrome at all, so nothing is offset and the empty
   topbar must not leave a stray hairline across the top of the page. */
body.no-chrome #app-main { margin-left: 0; }
body.no-chrome #app-header,
body.no-chrome #app-sidebar { display: none; }

/* --------------------------------------------------------------------------
   Below 1024px the sidebar goes off-canvas and the offsets collapse to 0 so
   content never sits under the drawer nor leaves a 240px gap.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  #app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow-md);
  }
  #app-sidebar.is-open { transform: translateX(0); }
  #app-main, #app-header { margin-left: 0; }
  .hamburger { display: flex; }
  body.sidebar-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  #app-sidebar, .nav-sub, .nav-disclosure { transition: none; }
}

/* ==========================================================================
   View primitives
   ========================================================================== */
.view-header { margin-bottom: 28px; }
.view-header h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.3px; margin-bottom: 4px; }
.view-header .subtitle { color: var(--text-dim); font-size: 14px; }

.view-loading {
  display: flex; justify-content: center; align-items: center;
  min-height: 200px;
}

.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--text-dim);
}
.empty-state p { margin-bottom: 16px; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: 14px; }

.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; color: var(--text-dim); }
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-error {
  background: var(--danger-dim);
  color: var(--danger);
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:disabled { cursor: not-allowed; opacity: 0.6; }

/* White label on the STRONG azure (4.95:1). The brand azure would only reach
   3.32:1 behind white text. The old rule painted near-black #0b0d10 on the
   accent, which suited the dark theme but reads muddy on a light page. */
.btn-primary { background: var(--accent-strong); color: #FFFFFF; }
.btn-primary:hover:not(:disabled) { background: var(--accent-strong-hover); color: #FFFFFF; }

.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-hover);
}

.btn-ghost { color: var(--text-dim); padding: 6px 10px; }
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }

/* ==========================================================================
   Cards + grids
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.tool-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.tool-card:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--text);
  transform: translateY(-1px);
}
.tool-card h3 { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.tool-card p { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* ==========================================================================
   Table
   ========================================================================== */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table { width: 100%; border-collapse: collapse; }

.table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--surface-2); }
.table-link { color: var(--text); display: block; }
.table-link:hover { color: var(--accent); }

/* ==========================================================================
   Status badges + progress
   ========================================================================== */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}
.badge-queued    { background: var(--warning-dim); color: var(--warning); }
.badge-running   { background: var(--accent-dim);  color: var(--accent);  }
.badge-succeeded { background: var(--accent-dim);  color: var(--accent);  }
.badge-failed    { background: var(--danger-dim);  color: var(--danger);  }
.badge-cancelled { background: var(--surface-3);   color: var(--text-dim); }

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.progress-label {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 8px;
}

/* ==========================================================================
   Code / result
   ========================================================================== */
pre.result {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre;
}

/* ==========================================================================
   Login
   ========================================================================== */
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Was calc(100vh - 60px), sized against the old always-present header bar.
     The login screen renders with no chrome now, so the full viewport is ours. */
  min-height: 100vh;
  padding-top: 80px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 380px;
  /* Padding moved to .login-card-body so the hero can sit full-bleed against
     the card edges. */
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Brand hero — the cover art carries the GUIDEWAY CARE wordmark, so the login
   screen needs no separate logo (that is why .login-logo stays unused). The
   art is a wide banner; object-fit crops it to a band rather than letterboxing.
   aspect-ratio + explicit dimensions reserve the space before the image loads,
   so the form never jumps. */
.login-hero {
  display: block;
  width: 100%;
  height: 116px;
  object-fit: cover;
  object-position: center;
  background: var(--navy);   /* fills the band while the JPEG loads */
}

.login-card-body { padding: 28px 32px 32px; }
.login-card h1 { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.login-card .subtitle { color: var(--text-dim); margin-bottom: 24px; font-size: 13px; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mb-16 { margin-bottom: 16px; }
.mb-12 { margin-bottom: 12px; }
.text-dim { color: var(--text-dim); }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* ==========================================================================
   v25 lead filter row — dark-theme styling
   ========================================================================== */
.lead-filters {
  background: var(--surface-2) !important;
}
.lead-filters select,
.lead-filters input[type="text"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  color: var(--text);
}
.lead-filters select:focus,
.lead-filters input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
/* ============================================================
   Branding additions (Apr 2026)
   Append to the end of styles.css.
   ============================================================ */

/* Header mark + wordmark sitting inline on the left */
.header-brand-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-brand-mark {
  height: 32px;
  width: auto;
  display: block;
  /* The mark is azure on a transparent ground, so it reads on both the white
     topbar and the navy sidebar with no filter tweaks. (The old note here
     referenced the dark theme's #14171c header, which no longer exists.) */
  flex-shrink: 0;
}

/* Login page — big logo above the form */
.login-logo {
  display: block;
  margin: 0 auto 20px;
  max-width: 200px;
  width: 70%;
  height: auto;
}

/* Small "Powered by" footer style — currently unused after debranding */
.login-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.login-footer-accent {
  color: var(--accent);
  font-weight: 600;
}

/* ============================================================
   Reviews tool — theme chips (4b iter 2)
   Chips were colliding visually because inline-block siblings
   need explicit spacing.
   ============================================================ */
.theme-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.theme-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
/* Hue families preserved exactly (positive=blue, negative=red, mixed=amber);
   only the values move onto tokens, because the old ones were light-on-light
   once the page went white — e.g. #f5a623 text on a 15% amber tint. */
.theme-chip.theme-positive {
  background: var(--accent-dim);
  color: var(--accent-strong);
  border-color: rgba(0, 150, 213, 0.3);
}
.theme-chip.theme-negative {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: rgba(185, 28, 28, 0.3);
}
.theme-chip.theme-mixed {
  background: var(--warning-dim);
  color: var(--warning);
  border-color: rgba(194, 65, 12, 0.3);
}

/* ============================================================================
 * Admin tabs
 * Unstyled before this — tabs rendered as inline text blob.
 * ========================================================================= */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.admin-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  white-space: nowrap;
}
.admin-tab:hover {
  color: var(--text);
}
.admin-tab.active {
  /* --accent-strong, not --accent: brand azure is 3.32:1 on white. */
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

/* ============================================================================
 * Admin v2 — registry-driven settings, advanced disclosure, diagnostics.
 * .pill / .btn-sm / .template-side-btn existed in the markup but were never
 * styled; defined here rather than left to the browser defaults.
 * ========================================================================= */
.admin-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.admin-search {
  flex: 1; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.admin-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.admin-rule { border: none; border-top: 1px solid var(--border); margin: 28px 0 20px; }

/* One setting per row: description left, control right, hairline between.
   The previous auto-fill grid put checkboxes beside 14-row JSON editors and
   read as a jumble — heterogeneous control heights need rows, not columns. */
.settings-list { display: flex; flex-direction: column; }

.settings-group-head {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 22px 0 8px;
  border-bottom: 1px solid var(--border);
}
.settings-group-head:first-child { padding-top: 4px; }

.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px 32px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
/* Wide editors get the full width, under the description. */
.setting-row.is-wide { grid-template-columns: minmax(0, 1fr); }
.setting-row.is-wide .setting-control { grid-column: 1; }

.setting-desc { min-width: 0; }
.setting-label {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--text); cursor: pointer;
}
.setting-help { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-top: 5px; max-width: 62ch; }
.setting-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 7px; }
.setting-key { font-size: 11px; color: var(--text-faint); }
.setting-default { font-size: 11px; color: var(--text-faint); }

.setting-control { display: flex; justify-content: flex-end; }
.setting-row.is-wide .setting-control { justify-content: stretch; margin-top: 10px; }
.setting-control input[type="text"],
.setting-control input[type="number"] {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 11px;
}
.setting-control textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  resize: vertical;
}
.setting-control input:focus, .setting-control textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Toggle — a checkbox reads as an afterthought next to real inputs. */
.switch { position: relative; display: inline-block; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  display: block; width: 38px; height: 22px; border-radius: 11px;
  background: var(--surface-3); border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
}
.switch input:checked + .switch-track { background: var(--accent-strong); border-color: var(--accent-strong); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--accent-dim); }

.setting-disabled { opacity: 0.5; }
.dep-note {
  grid-column: 1 / -1;
  font-size: 11.5px; color: var(--warning);
  border-left: 2px solid var(--warning); padding-left: 8px; margin-top: 2px;
}
.json-editor { font-size: 11.5px; line-height: 1.45; }

.search-origin {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); padding-top: 16px;
}

.pill {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-dim);
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.pill-accent  { background: var(--accent-dim);  color: var(--accent-strong); }
.pill-modified{ background: var(--accent-dim);  color: var(--accent-strong); }
.pill-missing { background: var(--surface-2);   color: var(--text-faint); }
.pill-warning { background: var(--warning-dim); color: var(--warning); }

.btn-sm { padding: 3px 9px; font-size: 12px; }

.template-side-btn {
  text-align: left; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-dim); border: 1px solid transparent;
}
.template-side-btn:hover { background: var(--surface-2); color: var(--text); }
.template-side-btn.active {
  background: var(--accent-dim); color: var(--accent-strong);
  border-color: var(--accent); font-weight: 500;
}

/* Advanced disclosure ------------------------------------------------------ */
.advanced-block { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 14px; }
.advanced-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px; border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 500;
}
.advanced-toggle:hover { background: var(--surface-3); }
.advanced-caret { transition: transform 0.15s; color: var(--text-dim); }
.advanced-block.is-open .advanced-caret { transform: rotate(180deg); }
.advanced-body { display: none; padding-top: 18px; }
.advanced-block.is-open .advanced-body { display: block; }
.advanced-warning {
  font-size: 12px; line-height: 1.55; color: var(--text-dim);
  background: var(--warning-dim); border-left: 3px solid var(--warning);
  padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 18px;
}

.save-bar {
  display: flex; align-items: center; gap: 12px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* ============================================================================
 * Targets — filter toolbar.
 * Was one flat wrap of inline-styled labels; now a search row over a labelled
 * control row, so a rep can see at a glance which filters exist and which are
 * doing something.
 * ========================================================================= */
.tfilter-bar {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Each filter gets its own cell with the label stacked above the control, so
   they align into columns. A single wrapping flex row put a slider, three
   selects and a checkbox shoulder to shoulder and read as one run-on line. */
.tfilter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 22px;
  align-items: end;
}

/* Checkbox left, count + reset right, on their own line under a hairline. */
.tfilter-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.tfilter-search-wrap { position: relative; max-width: 380px; width: 100%; }
.tfilter-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
}
.tfilter-search {
  width: 100%;
  padding: 7px 10px 7px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.tfilter-search:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
.tfilter-search::-webkit-search-cancel-button { cursor: pointer; }

.tfilter-field {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; font-size: 12px; cursor: pointer;
}
.tfilter-label {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); white-space: nowrap;
}
.tfilter-field select {
  width: 100%;
  padding: 7px 9px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.tfilter-field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
.tfilter-field input[type="range"] {
  width: 100%; accent-color: var(--accent); margin: 0; height: 28px;
}
.tfilter-slider-val {
  font-weight: 700; font-size: 11px; letter-spacing: 0;
  text-transform: none; color: var(--accent-strong);
}

.tfilter-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text); cursor: pointer;
}

.tfilter-tail { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tfilter-count { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

.tfilter-rescore { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.tfilter-section { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.tfilter-note { font-size: 11px; color: var(--text-faint); }

@media (max-width: 720px) {
  .tfilter-search-wrap { max-width: none; }
  .tfilter-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 14px; }
  .tfilter-foot { align-items: flex-start; }
  .tfilter-tail { width: 100%; justify-content: space-between; }
}

/* Diagnostics -------------------------------------------------------------- */
.diag-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
.diag-tile {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.diag-tile-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.diag-tile-value { font-size: 26px; font-weight: 600; margin: 4px 0 2px; }
.diag-tile-sub { font-size: 11px; color: var(--text-faint); line-height: 1.4; }
.diag-tile.diag-ok    { border-color: var(--success); background: var(--success-dim); }
.diag-tile.diag-warn  { border-color: var(--warning); background: var(--warning-dim); }
.row-stuck { background: var(--warning-dim); }
.diag-precondition {
  font-size: 12px; line-height: 1.6; color: var(--text);
  background: var(--danger-dim); border-left: 3px solid var(--danger);
  padding: 12px 14px; border-radius: var(--radius-sm); margin-top: 8px;
}

@media (max-width: 720px) {
  /* Stack the control under its description rather than squeezing a 260px
     column into a phone width. */
  .setting-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .setting-control { justify-content: flex-start; }
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-search { max-width: none; }
  .diag-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* Section label used inside admin panels */
.section-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

/* ============================================================================
 * Lead workspace cards
 * ========================================================================= */
.leads-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.lead-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  transition: border-color 0.15s, transform 0.15s;
}
.lead-card:hover {
  border-color: var(--accent);
}
@media (max-width: 768px) {
  .leads-cards-grid {
    grid-template-columns: 1fr;
  }
}