/* ============================================================
   Awall surface stylesheet: dashboard-extras.css
   Split from styles.css (F1, issue #186) — NO rule changes.
   Owns: ops-strip, dashboard meta row, card-fill alignment, leaderboards/heatmap, two-choice picker modal (S2 + org modal)
   Concatenating every surfaces/*.css in base.html <link> order
   reproduces the original styles.css byte-for-byte.
   ============================================================ */
/* ---------------------------------------------------------
   Custom rules section (guardrails page)
   --------------------------------------------------------- */
.custom-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  margin-left: var(--space-2);
  vertical-align: middle;
}

.detail-panel-footer {
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.custom-rules-table {
  table-layout: auto;
}

.custom-rules-table td:nth-child(4) {
  white-space: nowrap;
}

.custom-rules-table .mode-selector {
  display: inline-flex;
}

/* ---------------------------------------------------------
   Dashboard — page header compact variant
   --------------------------------------------------------- */
.page-header.page-header--compact {
  margin-bottom: var(--space-6);
}

.page-header.page-header--compact .eyebrow {
  margin-bottom: var(--space-1);
}

.page-header.page-header--compact .page-subtitle {
  margin-top: var(--space-1);
}

/* ---------------------------------------------------------
   Dashboard — operational status strip
   Compact mono pills under page header. Surfaces system signals
   (cache, guardrail coverage, key count, latency) in one calm row.
   --------------------------------------------------------- */
.ops-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 0;
}

/* Meta row: ops-strip on the left, range/auto-refresh controls on the right,
   in a single horizontal band below the page title. Both sides take only the
   width they need; the gap between them grows via justify-content. Only wraps
   when the viewport really cannot fit the pills + the controls side-by-side. */
.dashboard-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.dashboard-meta-row-body {
  flex: 0 1 auto;
  min-width: 0;
}

.dashboard-meta-row-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Inside the meta row the controls no longer push themselves via their own
   margin-left auto (the wrapper provides it). Reset to avoid double-pushing. */
.dashboard-meta-row-controls .page-controls {
  margin-left: 0;
}

.ops-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-body);
  white-space: nowrap;
}

.ops-pill-label {
  font-weight: 600;
  color: var(--color-text-muted);
}

.ops-pill-value {
  font-weight: 700;
  color: var(--color-text-heading);
  text-transform: none;
  letter-spacing: 0.02em;
}

.ops-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-text-muted);
}

.ops-pill--ok .ops-pill-dot { background: var(--color-success); }
.ops-pill--err {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}
.ops-pill--err .ops-pill-dot { background: var(--color-danger); }
.ops-pill--err .ops-pill-label { color: var(--color-danger-strong); }
.ops-pill--err .ops-pill-value { color: var(--color-danger-strong); }

.ops-pill--neutral .ops-pill-dot { display: none; }

/* ---------------------------------------------------------
   Dashboard — stacked right column
   Lets the right slot of dashboard-row hold multiple cards
   without the divider-inside-one-card workaround.
   --------------------------------------------------------- */
.dashboard-col.dashboard-col--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---------------------------------------------------------
   Bar chart — gridlines (visual baseline for sparse data)
   --------------------------------------------------------- */
.bar-chart-grid {
  position: absolute;
  inset: 0 0 28px 0;
  pointer-events: none;
  z-index: 0;
}

.bar-chart-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--color-border);
  opacity: 0.6;
}

.bar-chart-col {
  z-index: 1;
}

/* ---------------------------------------------------------
   Card — universal hover lift for dashboard cards
   Mirrors metric-card lift; warms border + raises shadow so the
   whole grid feels alive instead of flat.
   --------------------------------------------------------- */
.dashboard-col.card,
.dashboard-col--stack > .card,
.dashboard-row > .card {
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base),
              transform var(--transition-base),
              border-color var(--transition-base);
}

.dashboard-col.card:hover,
.dashboard-col--stack > .card:hover,
.dashboard-row > .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--color-primary-ring);
}

/* Card content stretches to fill the card so heights line up across
   the row. The chart, ranking list, status list, and recent table
   each grow into their slot without forcing artificial fixed heights. */
.dashboard-col.card > .bar-chart,
.dashboard-col.card > .guardrail-ranking,
.dashboard-col--stack > .card > .guardrail-status-list,
.dashboard-col--stack > .card > .system-status-list,
.dashboard-col.card > .data-table,
.dashboard-col.card > .empty-state,
.dashboard-row > .card > .bar-chart,
.dashboard-row > .card > .guardrail-ranking,
.dashboard-row > .card > .guardrail-status-list,
.dashboard-row > .card > .system-status-list,
.dashboard-row > .card > .data-table,
.dashboard-row > .card > .empty-state {
  flex: 1;
  min-height: 0;
}

.dashboard-col.card > .bar-chart,
.dashboard-row > .card > .bar-chart {
  min-height: 160px;
}

/* ---------------------------------------------------------
   Bar chart — empty-day baseline + top gridline
   --------------------------------------------------------- */
.bar-chart-gridline--top {
  border-top-style: solid;
  opacity: 0.35;
}

.bar--baseline {
  background: var(--color-border);
  height: 1px !important;
  min-height: 1px;
  opacity: 0.7;
}

.bar-chart-col--empty .bar-chart-label,
.bar-chart-col--empty .bar-chart-total {
  opacity: 0.5;
}

/* ---------------------------------------------------------
   Stat grid — 2- or 3-cell row inside cards (Latency, Threats)
   --------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.stat-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}

.stat-cell-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stat-cell-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-heading);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-cell--muted .stat-cell-value {
  color: var(--color-text-muted);
  font-weight: 500;
}

.card-footnote {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.card-subtle {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: lowercase;
}

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

/* ---------------------------------------------------------
   Ops pill — warn variant
   --------------------------------------------------------- */
.ops-pill--warn {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}
.ops-pill--warn .ops-pill-dot { background: var(--color-warning); }
.ops-pill--warn .ops-pill-label { color: var(--color-warning-strong); }
.ops-pill--warn .ops-pill-value { color: var(--color-warning-strong); }

/* ---------------------------------------------------------
   Threat categories list (Block Reasons companion)
   --------------------------------------------------------- */
.threat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.threat-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.threat-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.threat-row-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-heading);
}

.threat-row-meta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.threat-row-count {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-heading);
}

.threat-row-pct {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.threat-row-bar {
  height: 6px;
  background: var(--color-border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.threat-row-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: inherit;
  transition: width var(--transition-base) var(--ease-out);
}

/* ---------------------------------------------------------
   Pipeline health list
   --------------------------------------------------------- */
.pipeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pipeline-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

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

.pipeline-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex-shrink: 0;
}

.pipeline-row--active .pipeline-row-dot { background: var(--color-success); }
.pipeline-row--monitor .pipeline-row-dot { background: var(--color-warning); }
.pipeline-row--disabled .pipeline-row-dot { background: var(--color-border); }
.pipeline-row--err .pipeline-row-dot { background: var(--color-danger); }

.pipeline-row-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-row-mode {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.pipeline-row--active .pipeline-row-mode { color: var(--color-success-strong); }
.pipeline-row--monitor .pipeline-row-mode { color: var(--color-warning-strong); }
.pipeline-row--err .pipeline-row-mode { color: var(--color-danger-strong); }

.pipeline-row-time {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------
   Provider health list
   --------------------------------------------------------- */
.provider-health-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.provider-health-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.provider-health-row:last-child {
  border-bottom: 0;
}

.provider-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.provider-health-row--ok  .provider-health-dot { background: var(--color-success); }
.provider-health-row--err .provider-health-dot { background: var(--color-danger); }
.provider-health-row--off .provider-health-dot { background: var(--color-border); }

.provider-health-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-health-meta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.provider-health-state {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.provider-health-row--ok  .provider-health-state { color: var(--color-success-strong); }
.provider-health-row--err .provider-health-state { color: var(--color-danger-strong); }

.provider-health-time {
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   Leaderboard list (Top API Keys, Top Models)
   --------------------------------------------------------- */
.leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.leaderboard-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

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

.leaderboard-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-heading);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-name--mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.leaderboard-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.leaderboard-num {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-heading);
}

.leaderboard-dim {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.leaderboard-bad {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  font-weight: 600;
  margin-left: var(--space-2);
}

/* ---------------------------------------------------------
   Heatmap (7 × 24)
   --------------------------------------------------------- */
.heatmap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
}

.heatmap-cols {
  display: grid;
  grid-template-columns: 32px repeat(24, minmax(0, 1fr));
  gap: 2px;
  align-items: end;
  padding-bottom: 2px;
}

.heatmap-col-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: left;
  letter-spacing: 0.04em;
}

.heatmap-row {
  display: grid;
  grid-template-columns: 32px repeat(24, minmax(0, 1fr));
  gap: 2px;
  align-items: stretch;
}

.heatmap-row-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heatmap-cell {
  display: block;
  height: 18px;
  border-radius: 3px;
  background: color-mix(
    in srgb,
    var(--color-primary) calc(var(--cell-intensity, 0%) * 0.7 + 4%),
    var(--color-border-soft)
  );
  transition: transform var(--transition-fast);
}

.heatmap-cell[data-intensity="0"] {
  background: var(--color-border-soft);
  opacity: 0.5;
}

.heatmap-cell:hover {
  transform: scale(1.15);
  outline: 1px solid var(--color-primary-ring);
  outline-offset: 1px;
}

/* Intensity legend — quantifies the colour ramp so the heatmap is never
   colour-only. Swatches reuse the exact .heatmap-cell fill formula. */
.heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.heatmap-legend-scale {
  display: inline-flex;
  gap: 2px;
}

.heatmap-legend-swatch {
  width: 16px;
  height: 12px;
  border-radius: 3px;
  background: color-mix(
    in srgb,
    var(--color-primary) calc(var(--cell-intensity, 0%) * 0.7 + 4%),
    var(--color-border-soft)
  );
}

/* ---------------------------------------------------------
   Trigger chip (Recent Blocks row)

   Base chip = PII variant (danger family). The other
   variants map guardrail category → a distinct hue so the
   operator can recognise the kind of block at a glance:

     --injection       Prompt Injection / ML classifier   amber
     --jailbreak       Jailbreak personas                 teal
     --awall           AWall LLM (LLM-driven detector)    violet
     --content_safety  Content Safety (C1–C7 model)       violet (AI family)
     --custom          User-defined keyword detectors     neutral

   Soft palette: low-alpha tint on the card surface (not the
   solid pastel *-bg) so the chips read as quiet meta-labels
   instead of radioactive pills. Text stays in the *-strong
   companion so 10px mono still clears WCAG AA 4.5:1.
   --------------------------------------------------------- */
.trigger-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-tag);
  background: rgba(220, 38, 38, 0.08);
  color: var(--color-danger-strong);
  border: 1px solid rgba(220, 38, 38, 0.18);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* --pii is an explicit alias of the base style (kept so the
   template can emit a modifier uniformly across categories). */
.trigger-chip--pii,
.trigger-chip--default {
  background: rgba(220, 38, 38, 0.08);
  color: var(--color-danger-strong);
  border-color: rgba(220, 38, 38, 0.18);
}

.trigger-chip--injection {
  background: rgba(245, 158, 11, 0.10);
  color: var(--color-warning-strong);
  border-color: rgba(245, 158, 11, 0.20);
}

.trigger-chip--jailbreak {
  background: rgba(13, 148, 136, 0.08);
  color: var(--color-jailbreak-strong);
  border-color: rgba(13, 148, 136, 0.18);
}

/* --content_safety shares the Operator Violet AI-flavor family with
   --awall (both are model-driven detectors); the chip label carries the
   distinction per the Status-Plus-Label rule. */
.trigger-chip--awall,
.trigger-chip--content_safety {
  background: rgba(139, 92, 246, 0.10);
  color: var(--color-accent-strong);
  border-color: rgba(139, 92, 246, 0.20);
}

.trigger-chip--custom {
  background: rgba(107, 114, 128, 0.08);
  color: var(--color-text-muted);
  border-color: rgba(107, 114, 128, 0.18);
}

[data-theme="dark"] .trigger-chip,
[data-theme="dark"] .trigger-chip--pii,
[data-theme="dark"] .trigger-chip--default {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.26);
}
[data-theme="dark"] .trigger-chip--injection {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.28);
}
[data-theme="dark"] .trigger-chip--jailbreak {
  background: rgba(94, 234, 212, 0.14);
  border-color: rgba(94, 234, 212, 0.26);
}
[data-theme="dark"] .trigger-chip--awall,
[data-theme="dark"] .trigger-chip--content_safety {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.30);
}
[data-theme="dark"] .trigger-chip--custom {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.24);
}

.ts-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ts-rel {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  opacity: 0.75;
}

/* ---------------------------------------------------------
   System status — bad value variant
   --------------------------------------------------------- */
.system-status-value--bad {
  color: var(--color-danger);
  font-weight: 700;
}

/* ---------------------------------------------------------
   Stat grid — explicit 3-column variant
   --------------------------------------------------------- */
.stat-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------------------------------------------------------
   Onboarding (empty-state) card
   --------------------------------------------------------- */
.onboarding-card {
  padding: var(--space-8);
}

.onboarding-lead {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: 1.6;
  margin: var(--space-3) 0 var(--space-6);
  max-width: 640px;
}

.onboarding-steps {
  list-style: decimal inside;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
}

.onboarding-steps li {
  line-height: 1.6;
}

.onboarding-snippet {
  display: block;
  margin-top: var(--space-3);
  background: var(--color-pre-bg);
  color: var(--color-pre-text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  overflow-x: auto;
  white-space: pre;
}

/* ---------------------------------------------------------
   Mobile polish (#209) — dashboard home at <= 768px.
   Follow-up to S2 (#193): the live mobile UI showed page-wide
   horizontal overflow, a colliding bar-chart axis, latency values
   spilling their boxes, and a heatmap legend eating scarce width.
   Mobile-only — no desktop rule changes. dashboard-extras.css is the
   last dashboard surface in the cascade, so these win over the shared
   responsive/routing layers without touching them.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  /* Bar chart: the x-axis labels collide once a range has more than ~7
     buckets. The view tags every column whose index isn't a multiple of
     chart_label_step; hide those labels so only ~7 survive. Bars and the
     sr-only data table are untouched. */
  .bar-chart-col--label-thin .bar-chart-label {
    display: none;
  }

  /* Recent Blocks: the dense incident table doesn't reduce cleanly to a phone,
     so drop the whole card on mobile rather than cramming or scrolling it. The
     same data lives one tap away under Logs (sidebar → Logs, filtered to
     blocked via the desktop "View All"). Scoped through `.dashboard-row >` to
     out-specify the base `.dashboard-row > .card { display: flex }` rule, which
     would otherwise keep the card visible. */
  .dashboard-row > .recent-blocks-card {
    display: none;
  }

  /* Auto-refresh countdown ("next in NNNs") lives in the shared page-controls
     (S2-owned). Rather than edit that surface, scope a fix to the dashboard's
     meta row: give the controls the full row, let each control wrap, and let
     the countdown shrink so it never widens the row past the viewport. */
  .dashboard-meta-row-controls,
  .dashboard-meta-row-controls .page-controls {
    width: 100%;
  }
  .dashboard-meta-row .page-control {
    flex-wrap: wrap;
  }
  .dashboard-meta-row .page-control-countdown {
    min-width: 0;
  }

  /* Latency: the ms->s folding (card_latency.html) already shortens the values;
     trim the value font one step so even four-digit ms readings clear the box.
     .stat-cell-value is used only by the latency card. */
  .stat-cell-value {
    font-size: var(--font-size-lg);
  }

  /* Traffic heatmap: the intensity legend and the "day x hour . max N/cell"
     subtitle eat width mobile can't spare. The grid plus the sr-only table
     still carry the meaning. */
  .heatmap-legend,
  .card-subtle--heatmap {
    display: none;
  }
}

/* ---------------------------------------------------------
   Responsive breakpoints — ultrawide & 4K
   --------------------------------------------------------- */
@media (min-width: 1600px) {
  :root {
    --content-max-width: 1440px;
  }
}

@media (min-width: 1920px) {
  :root {
    --content-max-width: 1640px;
    --font-size-base: 16px;
  }
  body {
    font-size: var(--font-size-base);
  }
  .heatmap-cell {
    height: 22px;
  }
}

/* ---------------------------------------------------------
   Users management (admin /users/ page)
   --------------------------------------------------------- */
/* .visually-hidden is defined once alongside .sr-only in core.css (F4 #189). */

.form-input--inline {
  width: auto;
  min-width: 120px;
  padding: 4px 28px 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.user-role-select:disabled {
  opacity: 0.5;
  cursor: progress;
}

.user-role-select--admin {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-strong);
  border-color: var(--color-warning-border-soft, var(--color-border));
}

.user-role-select--manager {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-border-soft, var(--color-border));
}

.user-role-select--user {
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

.user-name {
  font-weight: 600;
  color: var(--color-text-heading);
}

.user-self-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-tag);
}

.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}

.table-pagination__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.table-pagination__controls {
  display: flex;
  gap: var(--space-2);
}

.table-pagination__controls [aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* Modal: two-choice picker (Deactivate / Permanently delete) */
.modal-choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-4);
  border: none;
}

.modal-choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out, ease),
              background 160ms var(--ease-out, ease);
}

.modal-choice:hover {
  border-color: var(--color-primary-border-soft, var(--color-border));
  background: var(--color-primary-soft, transparent);
}

.modal-choice input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--color-primary);
}

.modal-choice:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft, transparent);
}

.modal-choice[data-mode-option="hard"]:has(input[type="radio"]:checked) {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.modal-choice__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-choice__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-heading);
}

.modal-choice__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}