:root {
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 10px;
}

/* Dark theme (default) */
/* Tell the browser which scheme to prepare native UI for (scrollbars,
   default form controls, etc.). Follows data-theme automatically. */
html[data-theme="dark"]  { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

html[data-theme="dark"], :root {
  --bg: #0b0d10;
  --surface: #15181d;
  --surface-2: #1c2026;
  --border: #262b33;
  --border-strong: #343a44;
  --text: #e7e9ec;
  --text-dim: #9aa3ad;
  --muted: #6b7480;
  --accent: #6aa9ff;
  --accent-dim: #2b4d80;
  --ok: #7cc67a;
  --ok-bg: #14311a;
  --warn: #f2b76b;
  --warn-bg: #3a2a14;
  --danger: #ef6b6b;
  --danger-bg: #3a1818;
  --chip: #242931;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --th-bg: #14181d;
  --row-hover: var(--surface-2);
  --tree-bg: #070a0e;
  --btn-bg: var(--surface-2);
  --btn-hover: #262b33;
  --input-bg: var(--surface-2);
  --pill-brand-bg: #1a2c47;
  --pill-brand-fg: #a9c8f4;
  --pill-brand-border: #2a4060;
  --ok-border: #2a5533;
  --warn-border: #5a3f1a;
  --danger-border: #5a2929;
  --btn-primary-bg: var(--accent-dim);
  --btn-primary-border: #3c6aa8;
  --btn-primary-fg: #eaf2ff;
  --btn-primary-hover: #32568e;
  --btn-border-hover: #3d434e;
  --btn-danger-border: #743838;
}

/* Light theme */
html[data-theme="light"] {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --border: #dfe4ec;
  --border-strong: #c4cbd6;
  --text: #1a1d24;
  --text-dim: #5b6573;
  --muted: #8a93a0;
  --accent: #2660d9;
  --accent-dim: #cfdcf5;
  --ok: #167c3a;
  --ok-bg: #d9f3e2;
  --warn: #9a5200;
  --warn-bg: #fbeccb;
  --danger: #b91f1f;
  --danger-bg: #fbdede;
  --chip: #eef1f6;
  --shadow-sm: 0 1px 2px rgba(15, 25, 45, 0.06);
  --th-bg: #f8fafc;
  --row-hover: #f5f7fa;
  --tree-bg: #1a1d24;
  --btn-bg: #ffffff;
  --btn-hover: #f1f4f8;
  --input-bg: #ffffff;
  --pill-brand-bg: #dbe7fa;
  --pill-brand-fg: #1d4ca3;
  --pill-brand-border: #b5cdf0;
  --ok-border: #a3dab3;
  --warn-border: #e8c787;
  --danger-border: #ecb3b3;
  --btn-primary-bg: var(--accent);
  --btn-primary-border: #2660d9;
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: #1f4fb3;
  --btn-border-hover: #a9b2c0;
  --btn-danger-border: #d28c8c;
}

* { box-sizing: border-box; }

/* Theme transition — fades colours when user flips dark/light. Targets only
   colour properties so layout/transform effects aren't affected. The
   .no-transition class is applied briefly on first page load (see base.html)
   to prevent the FOUC when the saved theme is applied. */
*, *::before, *::after {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    fill 180ms ease;
}
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 0.5rem; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }

/* Topbar */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  position: sticky; top: 0; z-index: 10;
}
.brand {
  font-weight: 600;
  color: var(--text-dim);
  font-size: 0.9rem;
  white-space: nowrap;
}
.brand strong { color: var(--text); }
.topbar nav { display: flex; gap: 0.25rem; flex: 1; }
.topbar nav a {
  color: var(--text-dim);
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-weight: 500;
}
.topbar nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.topbar nav a.active {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.health-pills { display: flex; gap: 0.5rem; }

.theme-toggle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 36px; height: 36px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.12s, border-color 0.12s;
  margin-left: 0.25rem;
}
.theme-toggle:hover { background: var(--btn-hover); border-color: var(--border-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.health-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  line-height: 1.15;
}
.health-pill strong { display: block; color: var(--text); font-size: 0.85rem; }
.health-pill.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.health-pill.warn strong { color: var(--warn); }
.health-pill.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.health-pill.ok strong { color: var(--ok); }
.health-pill.danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }

/* Layout */
.container { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
}
.card-header h2 { margin: 0; }

/* Stat cards (top row) */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.stat-label { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.5rem; }
.stat-value { font-size: 2.25rem; font-weight: 600; line-height: 1.1; color: var(--text); }
.stat-value.good { color: var(--ok); }
.stat-value.warn { color: var(--warn); }
.stat-sub { color: var(--muted); font-size: 0.8rem; margin-top: 0.35rem; }

/* Table */
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td {
  text-align: left; padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data th {
  color: var(--muted); font-weight: 500;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-strong);
}
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--surface-2); }
table.data.small th, table.data.small td { font-size: 0.85rem; padding: 0.45rem 0.6rem; }

/* Pills / badges */
.pill {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  font-size: 0.75rem;
  background: var(--chip);
  color: var(--text-dim);
  border-radius: 999px;
  font-weight: 500;
  border: 1px solid transparent;
}
.pill-brand { background: var(--pill-brand-bg); color: var(--pill-brand-fg); border-color: var(--pill-brand-border); }
.pill-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.pill-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.pill-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
/* Draft = neutral "in progress" — distinct from Active (green) and Archived
 * (which never shows on the campaigns list because archived campaigns are
 * filtered out of list_campaigns()). Dashed border telegraphs "not yet shipped". */
.pill-draft {
  background: rgba(127, 127, 127, 0.06);
  color: var(--muted);
  border: 1px dashed var(--border-strong);
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-off { background: var(--muted); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.12s, border-color 0.12s;
}
.btn { background: var(--btn-bg); }
.btn:hover { background: var(--btn-hover); border-color: var(--btn-border-hover); text-decoration: none; }
.btn-primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-fg); }
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-danger { background: transparent; border-color: var(--btn-danger-border); color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
/* Disabled-button visual cue — applies to every .btn variant.
   Without this, .btn-danger[disabled] looked identical to the enabled state in
   dark mode (2026-06-01 archive-modal incident: user thought button was active
   but it was waiting on type-to-confirm input). */
.btn[disabled], .btn:disabled,
button.btn-danger[disabled], button.btn-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.btn[disabled]:hover, .btn:disabled:hover { background: var(--btn-bg); border-color: var(--border); }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.btn-ghost { background: transparent; }
.btn-link { background: none; border: none; cursor: pointer; color: var(--accent); padding: 0; font-size: inherit; }

/* Dealer chip card */
.dealer-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.12s;
}
.dealer-card:hover { border-color: var(--border-strong); }
.dealer-card .name { font-weight: 500; color: var(--text); margin-bottom: 0.35rem; }
.dealer-card .brands { display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: 0.75rem; color: var(--muted); }
.dealer-card .brands span:not(:last-child)::after { content: "·"; margin-left: 0.25rem; color: var(--muted); }
.dealer-more {
  display: block;
  border: 1px dashed var(--border-strong);
  text-align: center;
  padding: 0.65rem;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.dealer-more:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* System health grid */
.health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.health-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}
.health-cell .label { color: var(--text-dim); font-size: 0.78rem; margin-bottom: 0.3rem; }
.health-cell .value { font-weight: 500; font-size: 0.95rem; }
.health-cell.ok .value { color: var(--ok); }
.health-cell.warn .value { color: var(--warn); }

/* Disk bar */
.disk-bar {
  height: 6px; width: 100%;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.45rem;
}
.disk-bar-fill {
  height: 100%;
  background: var(--warn);
  border-radius: 3px;
}
.disk-bar-fill.ok { background: var(--ok); }
.disk-bar-fill.danger { background: var(--danger); }

/* Audit log rows */
.audit-row {
  display: grid;
  grid-template-columns: 110px 1fr 100px;
  gap: 1rem;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 0.88rem;
}
.audit-row:last-child { border-bottom: none; }
.audit-row:hover { background: var(--surface-2); }
.audit-row .ts { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.audit-row .actor { color: var(--text-dim); font-size: 0.82rem; text-align: right; }

/* Flash messages */
.flash {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  border: 1px solid;
  font-size: 0.88rem;
}
.flash-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.flash-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.flash-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.flash ul { margin: 0.5rem 0 0 1.25rem; padding: 0; }

/* Forms */
.form label { display: block; margin-bottom: 1rem; font-weight: 500; font-size: 0.88rem; }
.form label small { display: block; font-weight: 400; color: var(--text-dim); font-size: 0.8rem; margin-top: 0.25rem; }
.form input[type=text], .form input[type=password], .form input[type=url],
.form input[type=email], .form input[type=search], .form input[type=tel],
.form input[type=number], .form input:not([type]),
.form select, .form textarea, .form input[type=file] {
  display: block; width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  margin-top: 0.4rem;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--accent);
}
.form textarea { font-family: var(--mono); font-size: 0.82rem; line-height: 1.4; }
.form-inline { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.form-inline input, .form-inline select { width: auto; min-width: 160px; margin: 0; }
.form-inline label { margin: 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; background: var(--surface-2); max-height: 400px; overflow-y: auto; }
fieldset legend { font-weight: 500; padding: 0 0.5rem; font-size: 0.85rem; color: var(--text-dim); }
fieldset legend small { color: var(--muted); font-weight: 400; margin-left: 0.3rem; }
label.check { display: block; font-weight: 400; margin-bottom: 0.2rem; font-size: 0.85rem; cursor: pointer; }
label.check input { margin-right: 0.4rem; }

/* Misc */
.mono { font-family: var(--mono); font-size: 0.82rem; word-break: break-all; color: var(--text-dim); }
.small { font-size: 0.85rem; }
.muted { color: var(--text-dim); }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: none; }

pre.tree {
  background: var(--tree-bg);
  color: var(--text-dim);
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: auto;
  max-height: 400px;
  font-size: 0.8rem;
}

details summary { cursor: pointer; font-weight: 500; padding: 0.5rem 0; color: var(--text-dim); }
details[open] summary { color: var(--text); }

/* ---------------- Responsive ---------------- */

/* Tablet and below: stack multi-column layouts */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
}

/* Tablet/mobile: topbar goes two rows — utility row on top, nav wraps below */
@media (max-width: 820px) {
  .container { padding: 1rem; }
  .topbar {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.85rem;
  }
  .topbar .brand { font-size: 0.85rem; flex: 1 1 auto; }
  .topbar nav {
    order: 10;
    width: 100%;
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.3rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
  }
  .topbar nav a {
    padding: 0.45rem 0.8rem;
    font-size: 0.88rem;
    white-space: nowrap;
    flex: 1 1 auto;
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
  }
  .topbar nav a.active {
    background: var(--accent-dim);
    color: var(--text);
    border-color: var(--border-strong);
  }
  .health-pills { gap: 0.35rem; }
  .health-pill { padding: 0.25rem 0.55rem; font-size: 0.7rem; }
  .health-pill strong { font-size: 0.78rem; }
  .theme-toggle { width: 32px; height: 32px; font-size: 0.85rem; margin-left: 0; }

  /* Cards shrink their padding on mobile */
  .card, .stat-card { padding: 0.85rem 1rem; }
  .card-header { flex-wrap: wrap; gap: 0.5rem; }
  .stat-value { font-size: 1.75rem; }

  /* Tables get horizontal scroll container behavior so they don't crush */
  .card > table.data, .card > .row-between + table.data {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  table.data th, table.data td { padding: 0.5rem 0.6rem; }

  /* Dealer cards full width */
  .dealer-card { padding: 0.6rem 0.8rem; }

  /* System health grid becomes single column */
  .health-grid { grid-template-columns: 1fr; }

  /* Row-between allows wrap on mobile so buttons don't get pushed off */
  .row-between { flex-wrap: wrap; gap: 0.5rem; }
  .row-wrap { gap: 0.35rem; }

  /* Forms: stack inline fields */
  .form-inline { flex-direction: column; align-items: stretch; }
  .form-inline input, .form-inline select { min-width: 0; width: 100%; }

  /* Audit row collapses to stacked blocks */
  .audit-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding: 0.6rem 0.5rem;
  }
  .audit-row .actor { text-align: left; }
  .audit-row .ts { font-size: 0.75rem; }
}

/* Phone: hide pill labels, use just the value */
@media (max-width: 480px) {
  h1 { font-size: 1.15rem; }
  h2 { font-size: 1rem; }
  .brand span, .brand strong { font-size: 0.8rem; }
  .brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .health-pill { padding: 0.2rem 0.45rem; }
  .container { padding: 0.85rem 0.75rem; }
  fieldset { max-height: 280px; }
}

.footer { text-align: center; color: var(--muted); padding: 2rem 0; font-size: 0.78rem; }

/* Bulk upload grid */
.bulk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  margin: 1rem 0;
}
.bulk-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  background: var(--card-bg, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.bulk-card.has-file {
  border-color: var(--ok, #2a7);
  box-shadow: 0 0 0 1px var(--ok, #2a7) inset;
}
.bulk-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.bulk-drop {
  display: block;
  border: 2px dashed var(--border);
  border-radius: 6px;
  padding: 1rem 0.6rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 90px;
}
.bulk-drop:hover,
.bulk-drop.dragover {
  border-color: var(--accent, #38f);
  background: rgba(60, 130, 250, 0.06);
}
.bulk-drop-icon { font-size: 1.35rem; opacity: 0.7; margin-bottom: 0.2rem; }
.bulk-drop-empty, .bulk-drop-filled {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
/* Override the class's display:flex so the [hidden] attribute actually hides. */
.bulk-drop-empty[hidden], .bulk-drop-filled[hidden] { display: none !important; }
.bulk-file-name { word-break: break-all; font-size: 0.82rem; }
.bulk-existing summary { cursor: pointer; font-size: 0.8rem; color: var(--muted); }
.bulk-existing ul { margin: 0.4rem 0 0 0; padding-left: 1rem; }
.bulk-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  position: sticky;
  bottom: 0;
  padding: 0.6rem 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* Tip box at top of bulk-upload page (replaces the per-card duplicate hint) */
.bulk-tip {
  margin: 0.5rem 0 1rem;
  padding: 0.55rem 0.85rem;
  border-left: 3px solid var(--accent, #38f);
  background: rgba(60, 130, 250, 0.06);
  border-radius: 0 5px 5px 0;
  font-size: 0.88rem;
}

/* Sticky upload bar — always visible while you scroll the dealer grid */
.bulk-sticky-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin: 1rem -1rem -1rem;
  background: var(--surface, var(--bg));
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
  z-index: 10;
}
.bulk-sticky-status strong { font-size: 1.1rem; }
.bulk-sticky-actions { display: flex; gap: 0.5rem; }

/* Image preview thumbnail in the staged-file state */
.bulk-thumb-slot {
  display: flex;
  justify-content: center;
  margin-bottom: 0.4rem;
}
.bulk-thumb {
  width: 64px;
  height: 64px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.bulk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bulk-thumb-doc { background: rgba(60,130,250,0.10); color: #9ac4ff; }

/* Multi-file staged list per dealer card */
.bulk-staged-list {
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bulk-staged-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}
.bulk-thumb-mini {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.bulk-thumb-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bulk-thumb-mini.bulk-thumb-doc { background: rgba(60,130,250,0.10); color: #9ac4ff; }
.bulk-staged-meta { flex: 1; min-width: 0; line-height: 1.25; font-size: 0.78rem; }
.bulk-staged-meta .mono { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-staged-remove {
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.3rem;
  flex-shrink: 0;
}
.row-actions { display: flex; gap: 1rem; align-items: center; }

/* Dealer-selection cards (replaces old <fieldset>/<legend> pattern) */
.group-card { padding: 0; overflow: hidden; }
.group-head {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.group-head h3 {
  margin: 0 0 0.25rem 0;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.group-head p { margin: 0; line-height: 1.25; }
.group-head .pill { font-size: 0.75rem; }
.group-list {
  padding: 0.6rem 0.9rem;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Custom asset upload — drag-drop zone */
.asset-drop {
  display: block;
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin: 0.5rem 0;
}
.asset-drop:hover,
.asset-drop.dragover {
  border-color: var(--accent, #38f);
  background: rgba(60, 130, 250, 0.06);
}
.asset-drop-icon { font-size: 1.8rem; opacity: 0.6; margin-bottom: 0.3rem; }
.asset-drop-empty { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; }
.asset-selected { margin: 0.75rem 0; }
.asset-selected-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.4rem;
}
.asset-selected-head .btn-link { margin-left: auto; }
.asset-file-list { margin: 0; padding: 0; }
.asset-file-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}
.asset-file-row:last-child { border-bottom: 0; }
.asset-file-row > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.asset-file-row .btn-link {
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.3rem;
}
/* Hard-hide the native file input — the `hidden` attr was being overridden
   by a form-level `display: block` rule. */
.asset-file-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* File-list thumbnail (image preview OR ext badge) */
.asset-thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-thumb-doc { background: rgba(60,130,250,0.08); color: #9ac4ff; }
.asset-file-meta { flex: 1; min-width: 0; line-height: 1.25; }
.asset-file-meta .mono { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Picker empty-state: filter bar + card grid of (dealer × campaign) targets */
.asset-picker-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.asset-filter {
  flex: 1;
  max-width: 420px;
  padding: 0.55rem 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  font-size: 0.95rem;
}
.asset-filter:focus { outline: 2px solid var(--accent, #38f); outline-offset: 1px; }

.asset-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.65rem;
}
.asset-target-card {
  position: relative;
  display: block;
  padding: 0.7rem 2rem 0.7rem 0.85rem;   /* extra right padding for arrow */
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, background 0.15s, box-shadow 0.15s;
}
.asset-target-card[hidden] { display: none !important; }
/* Right-arrow affordance — telegraphs "this is a link, click to open" */
.asset-target-card::after {
  content: "→";
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.05rem;
  transition: transform 0.15s ease, color 0.15s ease;
}
.asset-target-card:hover {
  border-color: var(--accent, #38f);
  background: rgba(60, 130, 250, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.asset-target-card:hover::after {
  color: var(--accent, #6aa9ff);
  transform: translateY(-50%) translateX(3px);
}
.asset-target-card:focus-visible {
  outline: 2px solid var(--accent, #38f);
  outline-offset: 2px;
}
.asset-target-dealer { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.15rem; }
.asset-target-campaign { line-height: 1.25; }
.asset-empty-hint { margin-top: 1rem; text-align: center; }

/* Per-brand colors. Each brand gets a distinct hue so the dealer list
   becomes scannable at a glance. Outlined-chip style: near-transparent bg,
   colored text + visible border. Same hue scheme on dark + light themes,
   different opacity stops for legibility. */
.pill.brand-audiolab,    .dealer-network-stat.brand-audiolab    { background: rgba(59, 130, 246, 0.10); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.55); border-radius: 999px; }
.pill.brand-castle,      .dealer-network-stat.brand-castle      { background: rgba(168, 85, 247, 0.10); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.55); border-radius: 999px; }
.pill.brand-dual,        .dealer-network-stat.brand-dual        { background: rgba(239, 68, 68, 0.10);  color: #f87171; border: 1px solid rgba(239, 68, 68, 0.55); border-radius: 999px; }
.pill.brand-leak,        .dealer-network-stat.brand-leak        { background: rgba(16, 185, 129, 0.10); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.55); border-radius: 999px; }
.pill.brand-mission,     .dealer-network-stat.brand-mission     { background: rgba(236, 72, 153, 0.10); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.55); border-radius: 999px; }
.pill.brand-quad,        .dealer-network-stat.brand-quad        { background: rgba(245, 158, 11, 0.10); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.55); border-radius: 999px; }
.pill.brand-velodyne,    .dealer-network-stat.brand-velodyne    { background: rgba(251, 146, 60, 0.10); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.55); border-radius: 999px; }
.pill.brand-wharfedale,  .dealer-network-stat.brand-wharfedale  { background: rgba(139, 92, 246, 0.10); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.55); border-radius: 999px; }
.pill.brand-wharfedale-elysian, .dealer-network-stat.brand-wharfedale-elysian { background: rgba(124, 58, 237, 0.12); color: #8b5cf6; border: 1px solid rgba(124, 58, 237, 0.65); border-radius: 999px; }
.pill.brand-qed,         .dealer-network-stat.brand-qed         { background: rgba(20, 184, 166, 0.10); color: #2dd4bf; border: 1px solid rgba(20, 184, 166, 0.55); border-radius: 999px; }

/* Intel matrix column headers — text color only (currentColor drives the
   bottom border accent). NOT pill-styled. */
.intel-col-brand.brand-audiolab          { color: #60a5fa; }
.intel-col-brand.brand-castle            { color: #c084fc; }
.intel-col-brand.brand-dual              { color: #f87171; }
.intel-col-brand.brand-leak              { color: #34d399; }
.intel-col-brand.brand-mission           { color: #f472b6; }
.intel-col-brand.brand-quad              { color: #fbbf24; }
.intel-col-brand.brand-velodyne          { color: #fb923c; }
.intel-col-brand.brand-wharfedale        { color: #a78bfa; }
.intel-col-brand.brand-wharfedale-elysian{ color: #8b5cf6; }
.intel-col-brand.brand-qed               { color: #2dd4bf; }
[data-theme="light"] .intel-col-brand.brand-audiolab          { color: #1d4ed8; }
[data-theme="light"] .intel-col-brand.brand-castle            { color: #7e22ce; }
[data-theme="light"] .intel-col-brand.brand-dual              { color: #b91c1c; }
[data-theme="light"] .intel-col-brand.brand-leak              { color: #047857; }
[data-theme="light"] .intel-col-brand.brand-mission           { color: #be185d; }
[data-theme="light"] .intel-col-brand.brand-quad              { color: #b45309; }
[data-theme="light"] .intel-col-brand.brand-velodyne          { color: #c2410c; }
[data-theme="light"] .intel-col-brand.brand-wharfedale        { color: #6d28d9; }
[data-theme="light"] .intel-col-brand.brand-wharfedale-elysian{ color: #5b21b6; }
[data-theme="light"] .intel-col-brand.brand-qed               { color: #0f766e; }

/* Light theme — boost contrast so colors don't wash out on white bg.
   Stronger background tint + darker text variant for readability. */
[data-theme="light"] .pill.brand-audiolab,    [data-theme="light"] .dealer-network-stat.brand-audiolab    { background: rgba(59, 130, 246, 0.10);  color: #1d4ed8; border-color: rgba(59, 130, 246, 0.55); }
[data-theme="light"] .pill.brand-castle,      [data-theme="light"] .dealer-network-stat.brand-castle      { background: rgba(168, 85, 247, 0.10);  color: #7e22ce; border-color: rgba(168, 85, 247, 0.55); }
[data-theme="light"] .pill.brand-dual,        [data-theme="light"] .dealer-network-stat.brand-dual        { background: rgba(239, 68, 68, 0.10);   color: #b91c1c; border-color: rgba(239, 68, 68, 0.55); }
[data-theme="light"] .pill.brand-leak,        [data-theme="light"] .dealer-network-stat.brand-leak        { background: rgba(16, 185, 129, 0.10);  color: #047857; border-color: rgba(16, 185, 129, 0.55); }
[data-theme="light"] .pill.brand-mission,     [data-theme="light"] .dealer-network-stat.brand-mission     { background: rgba(236, 72, 153, 0.10);  color: #be185d; border-color: rgba(236, 72, 153, 0.55); }
[data-theme="light"] .pill.brand-quad,        [data-theme="light"] .dealer-network-stat.brand-quad        { background: rgba(245, 158, 11, 0.12);  color: #b45309; border-color: rgba(245, 158, 11, 0.55); }
[data-theme="light"] .pill.brand-velodyne,    [data-theme="light"] .dealer-network-stat.brand-velodyne    { background: rgba(251, 146, 60, 0.10);  color: #c2410c; border-color: rgba(251, 146, 60, 0.55); }
[data-theme="light"] .pill.brand-wharfedale,  [data-theme="light"] .dealer-network-stat.brand-wharfedale  { background: rgba(139, 92, 246, 0.10);  color: #6d28d9; border-color: rgba(139, 92, 246, 0.55); }
[data-theme="light"] .pill.brand-wharfedale-elysian, [data-theme="light"] .dealer-network-stat.brand-wharfedale-elysian { background: rgba(124, 58, 237, 0.12); color: #5b21b6; border-color: rgba(124, 58, 237, 0.65); }
[data-theme="light"] .pill.brand-qed,         [data-theme="light"] .dealer-network-stat.brand-qed         { background: rgba(20, 184, 166, 0.10);  color: #0f766e; border-color: rgba(20, 184, 166, 0.55); }

/* Active network stat — solid fill so the selected brand reads instantly */
.dealer-network-stat.active.brand-audiolab          { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.dealer-network-stat.active.brand-castle            { background: #a855f7; color: #fff; border-color: #a855f7; }
.dealer-network-stat.active.brand-dual              { background: #ef4444; color: #fff; border-color: #ef4444; }
.dealer-network-stat.active.brand-leak              { background: #10b981; color: #fff; border-color: #10b981; }
.dealer-network-stat.active.brand-mission           { background: #ec4899; color: #fff; border-color: #ec4899; }
.dealer-network-stat.active.brand-quad              { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.dealer-network-stat.active.brand-velodyne          { background: #fb923c; color: #fff; border-color: #fb923c; }
.dealer-network-stat.active.brand-wharfedale        { background: #8b5cf6; color: #fff; border-color: #8b5cf6; }
.dealer-network-stat.active.brand-wharfedale-elysian{ background: #7c3aed; color: #fff; border-color: #7c3aed; }
.dealer-network-stat.active.brand-qed               { background: #14b8a6; color: #fff; border-color: #14b8a6; }
.dealer-network-stat.active strong, .dealer-network-stat.active span { color: #fff; }

/* The "All" reset stat — neutral, but solid when active */
.dealer-network-all { border: 1px solid var(--border); border-radius: 999px; }
.dealer-network-all.active { background: var(--accent, #2660d9); color: #fff; border-color: var(--accent, #2660d9); }
.dealer-network-all.active strong, .dealer-network-all.active span { color: #fff; }

/* Brand pill cluster — give touching pills room to breathe */
.brand-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  align-items: center;
}

/* State tag — neutral, monospaced AU state code */
.state-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: inherit;
}
[data-theme="light"] .state-tag { background: rgba(0, 0, 0, 0.05); }

/* Dealer intelligence matrix — premium toggle pills */
.intel-card { padding: 0; overflow: auto; max-height: 75vh; }
.intel-table { margin: 0; border-collapse: separate; border-spacing: 0; }
.intel-table th, .intel-table td {
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  transition: background 80ms ease;
}
.intel-table th { font-size: 0.72rem; letter-spacing: 0.05em; text-align: left; }

/* Sticky first column (dealer names) + sticky header row */
.intel-table thead th { position: sticky; top: 0; background: var(--surface, #1a1d22); z-index: 2; }
.intel-table .intel-col-dealer { position: sticky; left: 0; background: var(--surface, #1a1d22); z-index: 1; }
.intel-table thead .intel-col-dealer { z-index: 3; }

/* Brand-colored column headers — pulls in the .brand-X palette colors */
.intel-table th.intel-col-brand {
  border-bottom: 2px solid currentColor;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  vertical-align: bottom;
  padding-top: 0.7rem;
}
.intel-brand-name { display: block; }
.intel-brand-count {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.66rem;
  font-weight: 500;
  margin-top: 0.2rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}
.intel-star { color: #f59e0b; font-size: 0.85em; }

/* Toggle button (replaces the dropdown) */
.intel-toggle {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: filter 80ms ease, transform 60ms ease;
  min-width: 4.6rem;
}
.intel-toggle:hover { filter: brightness(1.2); transform: translateY(-1px); }
.intel-toggle.is-generic { background: rgba(255, 255, 255, 0.04); }
.intel-toggle.is-custom {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.55);
  color: #fbbf24;
  font-weight: 600;
}
[data-theme="light"] .intel-toggle.is-generic { background: rgba(0, 0, 0, 0.04); color: #555; }
[data-theme="light"] .intel-toggle.is-custom {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}
.intel-na { color: var(--muted); opacity: 0.4; }

/* Row hover (built-in) + column hover (driven by JS adding .col-hover) */
.intel-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.intel-table .col-hover {
  background: rgba(60, 130, 250, 0.05) !important;
}
[data-theme="light"] .intel-table tbody tr:hover td { background: rgba(0, 0, 0, 0.02); }
[data-theme="light"] .intel-table .col-hover {
  background: rgba(60, 130, 250, 0.08) !important;
}

/* Sticky save bar at the bottom — flips bright when there are unsaved changes.
   Solid background (no blur) so table rows can't bleed through underneath. */
.intel-savebar {
  position: sticky;
  bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  margin-top: 0.85rem;
  background: var(--bg, #0e1116);
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: 5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .intel-savebar {
  background: var(--bg, #ffffff);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
/* Reserve space below the form so the last row never hides behind the bar */
#intel-form { padding-bottom: 5rem; }

/* Bulk-fill column trigger — header is now a button */
.intel-col-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  letter-spacing: inherit;
  text-transform: inherit;
  width: 100%;
}
.intel-col-trigger:hover { filter: brightness(1.25); }
.intel-col-trigger:focus-visible {
  outline: 2px solid var(--accent, #38f);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Bulk-fill popover */
.intel-bulk-popover {
  position: absolute;
  z-index: 100;
  background: var(--surface, #1a1d22);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  padding: 0.7rem 0.85rem;
  min-width: 18rem;
}
[data-theme="light"] .intel-bulk-popover {
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.intel-bulk-popover-head {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.intel-bulk-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.intel-bulk-actions .btn-link { margin-left: auto; }
.intel-savebar-msg { color: var(--muted); font-size: 0.88rem; }
.intel-savebar.is-dirty {
  border-color: var(--accent, #38f);
  box-shadow: 0 0 0 2px rgba(60, 130, 250, 0.18);
}
.intel-savebar.is-dirty .intel-savebar-msg {
  color: var(--accent, #4d8aff);
  font-weight: 600;
}

/* Compact pill — for dashboard dealer cards where space is tight */
.pill-xs {
  font-size: 0.7rem;
  padding: 0.08rem 0.45rem;
  line-height: 1.4;
}

/* Upload status indicator on the Deployed-to table per Custom dealer */
.upload-dot {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.3rem;
  text-align: center;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
}
.upload-dot-ok      { background: rgba(16, 185, 129, 0.18); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.5); }
.upload-dot-pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.5); }
[data-theme="light"] .upload-dot-ok      { color: #047857; }
[data-theme="light"] .upload-dot-pending { color: #b45309; }
.deployed-table td { vertical-align: middle; }

/* Collapsible "How to create a campaign" intro on /campaigns/new */
.intro-help {
  margin: 0.5rem 0 1.25rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #38f);
  border-radius: 0 6px 6px 0;
  background: rgba(60, 130, 250, 0.04);
}
.intro-help summary { cursor: pointer; padding: 0.15rem 0; }
.intro-help summary:hover { color: var(--accent, #38f); }
.intro-help-body {
  margin: 0.6rem 0 0;
  padding-left: 1.4rem;
  line-height: 1.6;
}
.intro-help-body li { margin-bottom: 0.4rem; }
.intro-help-body li:last-child { margin-bottom: 0; }
.intro-help-body code {
  background: rgba(255,255,255,0.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.95em;
}
[data-theme="light"] .intro-help-body code { background: rgba(0,0,0,0.06); }

/* Numbered step labels on form sections (single + multi-brand campaign new) */
.step-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--accent, #2660d9);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Dealer-selection "Show all dealers" toggle — slightly more visible than a
   plain checkbox so it's discoverable when the brand-filter kicks in. */
.dealer-section-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.dealer-toggle-row { gap: 0.6rem; align-items: center; }
.dealer-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}
.dealer-toggle-switch:hover { border-color: var(--accent, #38f); }
.dealer-toggle-switch input { margin: 0; }

/* Dealer network summary strip — clickable per-brand counts at top of /dealers/ */
.dealer-network-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
}
.dealer-network-label { margin-right: 0.4rem; flex-shrink: 0; }
.dealer-network-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.82rem;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  transition: filter 120ms ease, transform 80ms ease;
}
.dealer-network-stat:hover { filter: brightness(1.25); transform: translateY(-1px); }
.dealer-network-stat strong { font-size: 0.95rem; }
.dealer-network-stat span { opacity: 0.85; }

/* System → Maintenance cards */
.maint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}
.maint-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.maint-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.maint-head strong { font-size: 0.98rem; }
.maint-card p { margin: 0; line-height: 1.45; }
.maint-confirm {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.2rem;
  align-items: stretch;
}
.maint-confirm-input {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface, transparent);
  color: inherit;
  font-size: 0.9rem;
}
.maint-confirm-input:focus {
  outline: 2px solid var(--accent, #38f);
  outline-offset: 1px;
}
.maint-confirm button { white-space: nowrap; }
.maint-confirm button[disabled] { opacity: 0.45; cursor: not-allowed; }

.uploads-tip {
  margin: 0.75rem 0 1rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--accent, #38f);
  background: rgba(60, 130, 250, 0.06);
  border-radius: 0 5px 5px 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Brand picker on dealer new/edit — clean card replaces the old <fieldset>. */
.brand-picker {
  border: 1px solid var(--border);
  border-radius: 7px;
  margin: 0.5rem 0 1rem;
  overflow: hidden;
}
.brand-picker-head {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.brand-picker-head h4 { margin: 0; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; }
.brand-picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0.85rem;
}
.brand-check { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }

/* Source-browser brand folder creator (new campaign page) */
.sb-brand-tools {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.sb-brand-tools-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}

/* Source-browser upload tools — same divider treatment as brand-tools so
 * both "modify the source" actions read as peer sections of the card. */
.sb-upload-tools {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.sb-upload-tools .sb-tools-head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.15rem 0;
  user-select: none;
}
.sb-upload-tools .sb-tools-head::-webkit-details-marker { display: none; }
.sb-upload-tools .sb-tools-head::before {
  content: "▶";
  font-size: 0.75rem;
  color: var(--muted);
  transition: transform 0.15s ease;
  display: inline-block;
}
.sb-upload-tools details[open] .sb-tools-head::before {
  transform: rotate(90deg);
}
.sb-upload-tools .sb-tools-head strong {
  font-size: 0.95rem;
}
.sb-upload-tools .sb-tools-head:hover strong {
  color: var(--accent, #6aa9ff);
}
.sb-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.3rem 0.75rem;
}
.sb-brand-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}
.sb-brand-check.is-present {
  color: var(--muted);
  background: rgba(40, 170, 70, 0.08);
}
.sb-brand-check.is-present .sb-brand-label { text-decoration: line-through; opacity: 0.7; }
.sb-brand-status { margin-left: auto; font-size: 0.75rem; }
.sb-help { margin: 0.6rem 0 0.85rem; }
.sb-help summary { cursor: pointer; padding: 0.2rem 0; }
.sb-help summary:hover { color: var(--accent, #38f); }
.sb-help-body { padding: 0.5rem 0.7rem; margin-top: 0.3rem; border-left: 3px solid var(--border); background: rgba(255,255,255,0.02); border-radius: 0 4px 4px 0; }
.sb-help-body p { margin: 0 0 0.5rem; line-height: 1.5; }
.sb-help-body p:last-child { margin-bottom: 0; }
.sb-help-body code { background: rgba(255,255,255,0.08); padding: 1px 4px; border-radius: 3px; font-size: 0.95em; }

/* Brand / logo in topbar */
.brand { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.brand-logo {
  height: 28px;
  width: auto;
  display: block;
  /* Logo is dark on transparent — invert on dark theme so it stays visible. */
}
[data-theme="dark"] .brand-logo {
  filter: brightness(0) invert(1);
}
@media (max-width: 480px) {
  .brand-logo { height: 22px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Source-folder upload widget — drop zone + file list
 * Used by templates/campaign_new.html and campaign_new_multi.html. The
 * native <input type="file"> is hidden and triggered via a styled button
 * inside this zone. Selected files render as a removable list below.
 * ────────────────────────────────────────────────────────────────────────── */
.upload-dropzone {
  border: 2px dashed var(--border-strong, #343a44);
  border-radius: 8px;
  padding: 1rem 1rem 0.85rem;
  margin: 0.5rem 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* The native file input is triggered programmatically via the styled
 * "Choose files" button. .form input[type=file] above sets display:block
 * which overrides the HTML `hidden` attribute, so we need an explicit
 * rule (with !important to win regardless of source order). */
.upload-dropzone input[type="file"] { display: none !important; }
.upload-dropzone.is-dragover {
  border-color: var(--accent, #6aa9ff);
  background: var(--accent-dim);
}
.upload-dropzone-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  text-align: center;
  min-height: 2.6rem;
}
.upload-dropzone-prompt .muted {
  color: var(--muted);
  font-size: 0.85rem;
}
.upload-file-list {
  list-style: none;
  padding: 0;
  margin: 0.7rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.upload-file-list:empty { display: none; }
.upload-file-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.55rem;
  background: rgba(127, 127, 127, 0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}
.upload-file-list .upload-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.upload-file-list .upload-file-size {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.75rem;
}
.upload-file-list .upload-file-remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.4rem;
  border-radius: 3px;
}
.upload-file-list .upload-file-remove:hover {
  background: rgba(192, 57, 43, 0.15);
  color: #e74c3c;
}
.upload-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

/* ===== Multi-user auth UI (added 2026-05-12, refined 2026-05-12) ===== */

/* User pill in the topbar — sits between nav and health-pills.
   Existing `.topbar nav { flex: 1 }` consumes available space, so margin-left:auto
   on the pill itself would have no effect. Instead we rely on the natural
   flex layout order; nav's flex:1 already separates brand from right-side widgets. */
.topbar .user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.topbar .user-pill > a.user-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.88rem;
}
.topbar .user-pill > a.user-link:hover { color: var(--accent); }
.topbar .user-pill .logout-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 0.95rem;
  border-radius: 50%;
  transition: background 0.12s, color 0.12s;
}
.topbar .user-pill .logout-link:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.12);
}

/* Role badges */
.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  vertical-align: middle;
}
.badge-admin  { background: rgba(231, 76, 60, 0.18);  color: #e74c3c; }
.badge-editor { background: rgba(52, 152, 219, 0.18); color: #3498db; }
.badge-viewer { background: rgba(149, 165, 166, 0.20); color: #95a5a6; }

/* Page header for /system/users + /me */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.page-header h1 { font-size: 1.5rem; }
.page-header-meta { color: var(--muted); font-size: 0.9rem; }
.card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--text);
}

/* Users table */
table.users-table {
  width: 100%;
  border-collapse: collapse;
}
table.users-table thead th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.4rem 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
table.users-table tbody td {
  padding: 0.7rem 0.6rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
table.users-table tbody tr:last-child td { border-bottom: 0; }
table.users-table .col-action { width: 1%; white-space: nowrap; }
table.users-table .col-narrow { width: 1%; }
table.users-table .cell-user strong { color: var(--text); }
.muted-small { color: var(--muted); font-size: 0.82rem; margin-left: 0.35rem; }

/* Inline form (one row of table) — small inputs, no stacking */
.inline-form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.inline-form .inline-input,
.inline-form .inline-select {
  padding: 0.35rem 0.55rem;
  font-size: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  min-width: 9rem;
}
.inline-form .inline-input:focus,
.inline-form .inline-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Stacked form — Create user / Change password */
.form-card { max-width: 560px; }
.stacked-form .form-row { margin-bottom: 1rem; }
.stacked-form .form-row label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
}
.stacked-form .form-row input[type="text"],
.stacked-form .form-row input[type="password"],
.stacked-form .form-row select,
.stacked-form .form-row textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-size: 0.95rem;
  /* !important here defeats both browser UA defaults and Chrome's password-
     field autofill colour without us having to use selector tricks. */
  background-color: var(--input-bg) !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: 5px;
  box-sizing: border-box;
  font-family: inherit;
}
.stacked-form .form-row input::placeholder { color: var(--muted); opacity: 0.7; }
.stacked-form .form-row input:focus,
.stacked-form .form-row select:focus,
.stacked-form .form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 52,152,219), 0.18);
}

/* Chrome autofill paints password fields with its own yellow/white background
   that ignores our `background` rule. The inset box-shadow trick is the
   standard workaround — it masks the autofill colour with our surface colour. */
.stacked-form .form-row input:-webkit-autofill,
.stacked-form .form-row input:-webkit-autofill:hover,
.stacked-form .form-row input:-webkit-autofill:focus,
.stacked-form .form-row input:-webkit-autofill:active,
.inline-form .inline-input:-webkit-autofill,
.inline-form .inline-input:-webkit-autofill:hover,
.inline-form .inline-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  transition: background-color 99999s 0s, color 99999s 0s;
}

/* Same fix for the inline reset-password input in the users table. */
.inline-form .inline-input,
.inline-form .inline-select {
  background: var(--input-bg);
  color: var(--text);
}
.stacked-form .form-row small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.stacked-form .form-actions {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Role reference grid */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.role-block {
  padding: 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.role-block p {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.45;
}

/* Button sizes / variants used by users page */
.btn-small {
  padding: 0.3rem 0.65rem;
  font-size: 0.82rem;
}
.btn-warn  { background: #f39c12; color: #fff; border: 0; }
.btn-warn:hover  { background: #e67e22; }

@media (max-width: 720px) {
  table.users-table thead { display: none; }
  table.users-table tbody td {
    display: block;
    border: 0;
    padding: 0.35rem 0;
  }
  table.users-table tbody tr {
    display: block;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
  }
  table.users-table .col-action,
  table.users-table .col-narrow { width: auto; white-space: normal; }
  .inline-form { flex-wrap: wrap; }
}

/* ===== Login page (added 2026-05-12) ===== */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 0%, rgba(52, 152, 219, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 70% 100%, rgba(231, 76, 60, 0.06), transparent 60%),
    var(--bg);
}
.login-shell {
  width: 100%;
  max-width: 420px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-logo {
  height: 44px; width: auto; display: inline-block;
  margin-bottom: 0.75rem;
}
[data-theme="dark"] .login-logo { filter: brightness(0) invert(1); }
.login-brand h1 {
  font-size: 1.25rem;
  margin: 0 0 0.3rem;
  color: var(--text);
}
.login-brand .muted { margin: 0; font-size: 0.9rem; }
.login-footer { text-align: center; font-size: 0.78rem; }

/* Password show/hide toggle */
.password-wrap { position: relative; display: flex; align-items: stretch; }
.password-wrap input {
  padding-right: 4.2rem !important; /* leave room for the Show button */
}
.password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.password-toggle:hover { color: var(--text); background: var(--surface-2); }

/* Remember-me row */
.form-row-inline { margin-bottom: 1.25rem; }
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.btn-block { width: 100%; padding: 0.7rem; font-size: 0.95rem; }

/* Logout form button — looks like the old anchor it replaced */
.user-pill .logout-form { margin: 0; padding: 0; display: inline-flex; }
.user-pill button.logout-link {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}