/*
 * Local operations dashboard — Selvora tokens on top of Unfold (TMP-D386).
 *
 * Values are the selvora-frontend `styles/tokens.css` tokens (named in comments);
 * Unfold's own ramps (`--color-base-*`, `--color-primary-*`) are already mapped to
 * the same tokens in `config/settings/admin_local.py`. Dark mode follows Unfold's
 * `.dark` class on <html> (its theme switch). Type stays on the closed scale:
 * 12 / 14 / 16 / 20. Status is never colour alone: every flagged row carries an
 * icon and the words "Needs attention".
 */

.sv-ops {
  --sv-surface: #ffffff;           /* --sl-surface */
  --sv-surface-muted: #f1f5f9;     /* --sl-surface-muted */
  --sv-border: #e2e8f0;            /* --sl-border-subtle */
  --sv-text: #0f172a;              /* --sl-text-primary */
  --sv-text-secondary: #334155;    /* --sl-text-secondary */
  --sv-muted: #64748b;             /* --sl-text-muted */
  --sv-brand: #4f46e5;             /* --sl-brand-action */
  --sv-brand-subtle: #eef2ff;      /* --sl-brand-subtle */
  --sv-brand-text: #4338ca;        /* --sl-brand-text */
  --sv-attention-bg: #fffbeb;      /* --sl-warning-subtle */
  --sv-attention-border: #fde68a;  /* --sl-warning-border */
  --sv-attention-text: #b45309;    /* --sl-warning-text */
  --sv-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); /* --sl-shadow-panel */

  display: flex;
  flex-direction: column;
  gap: 24px;                       /* --sl-space-6 */
  color: var(--sv-text);
  font-variant-numeric: tabular-nums;
}

.dark .sv-ops {
  --sv-surface: #0f172a;
  --sv-surface-muted: #162033;
  --sv-border: #334155;
  --sv-text: #f8fafc;
  --sv-text-secondary: #cbd5e1;
  --sv-muted: #94a3b8;
  --sv-brand: #818cf8;             /* --sl-focus-ring (dark) */
  --sv-brand-subtle: #1e1b4b;
  --sv-brand-text: #a5b4fc;
  --sv-attention-bg: #2e2208;
  --sv-attention-border: #7a5310;
  --sv-attention-text: #fcd34d;
  --sv-shadow: none;
}

/* ---------------------------------------------------------- system state */
.sv-state {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px 32px;
  align-items: start;
  padding: 20px 24px;
  border: 1px solid var(--sv-border);
  border-inline-start: 4px solid var(--sv-brand);
  border-radius: 12px;             /* --sl-radius-md */
  background: var(--sv-brand-subtle);
}

.sv-state__title {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--sv-text);
}

.sv-state__lead {
  margin: 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sv-text-secondary);
}

.sv-switches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-switch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--sv-border);
  border-radius: 8px;
  background: var(--sv-surface);
}

.sv-switch__name {
  font-size: 12px;
  line-height: 1.5;
  color: var(--sv-muted);
}

.sv-switch__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sv-text);
}

.sv-switch.is-on .sv-switch__value .material-symbols-outlined {
  color: var(--sv-brand);
}

.sv-switch.is-off .sv-switch__value .material-symbols-outlined {
  color: var(--sv-muted);
}

/* --------------------------------------------------------------- panels */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 16px;
  align-items: start;
}

.sv-panel {
  border: 1px solid var(--sv-border);
  border-radius: 12px;
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
  overflow: hidden;
}

.sv-panel__head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--sv-border);
}

.sv-panel__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--sv-text);
}

.sv-panel__source {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sv-muted);
}

.sv-rows {
  margin: 0;
}

.sv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;                /* --sl-row-height-compact */
  padding: 8px 16px;
  border-top: 1px solid var(--sv-border);
}

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

.sv-row__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sv-text-secondary);
}

.sv-row__hint {
  font-size: 12px;
  color: var(--sv-muted);
}

.sv-row__value {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  flex-shrink: 0;
}

.sv-figure {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--sv-text);
  font-feature-settings: "tnum" 1;
}

.sv-row.is-attention {
  background: var(--sv-attention-bg);
  box-shadow: inset 3px 0 0 var(--sv-attention-text);
}

[dir="rtl"] .sv-row.is-attention {
  box-shadow: inset -3px 0 0 var(--sv-attention-text);
}

.sv-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid var(--sv-attention-border);
  border-radius: 999px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: var(--sv-attention-text);
}

.sv-flag .material-symbols-outlined,
.sv-panel__empty .material-symbols-outlined {
  font-size: 16px;
}

.sv-panel__empty {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sv-text-secondary);
  background: var(--sv-surface-muted);
}

.sv-panel__empty strong {
  font-weight: 600;
  color: var(--sv-text);
}

.sv-footnote {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sv-muted);
}

@media (max-width: 767px) {
  .sv-state {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
}

/* ======================================================================
 * Shell accessibility (design review F1–F7) — applies on every admin page.
 * ====================================================================== */

/* F6 — skip link: off-screen until focused, then a Selvora brand chip. */
.sv-skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -48px;
  z-index: 1100;
  padding: 8px 16px;
  border-radius: 8px;
  background: #4f46e5;              /* --sl-brand-action */
  color: #ffffff;                   /* --sl-text-on-brand */
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.sv-skip-link:focus {
  top: 12px;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #4f46e5;
}

#main-content:focus {
  outline: none;
}

.sv-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* F1 — icon-only buttons (sidebar toggle, close). */
.sv-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;                  /* --sl-control-height-sm */
  min-height: 32px;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.sv-icon-button:hover {
  background: var(--color-base-100);
}

.dark .sv-icon-button:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Visible focus on every control this tool adds or rewrites (SC 2.4.7 / 2.4.13). */
.sv-icon-button:focus-visible,
.sv-user-opener:focus-visible,
.sv-theme-choice:focus-visible,
.filter-open-button:focus-visible,
.sv-target:focus-visible {
  outline: 2px solid #4f46e5;       /* --sl-focus-ring */
  outline-offset: 2px;
}

.dark .sv-icon-button:focus-visible,
.dark .sv-user-opener:focus-visible,
.dark .sv-theme-choice:focus-visible,
.dark .filter-open-button:focus-visible,
.dark .sv-target:focus-visible {
  outline-color: #818cf8;           /* --sl-focus-ring (dark) */
}

/* F2 — the current theme choice is marked by colour AND aria-pressed. */
.sv-theme-choice.is-current {
  color: #4338ca;                   /* --sl-brand-text */
  font-weight: 600;
}

.dark .sv-theme-choice.is-current {
  color: #a5b4fc;                   /* --sl-brand-text (dark) */
}

/* F5 — 24 x 24 px minimum targets (SC 2.5.8) for search submit and sorting. */
.sv-target {
  min-width: 24px;
  min-height: 24px;
}

/* F4 — dark-mode text contrast: Selvora's dark brand text, not primary-500. */
.dark #nav-sidebar a.active,
.dark #nav-sidebar a.active .material-symbols-outlined {
  color: #a5b4fc;                   /* --sl-brand-text (dark): 8.9:1 on #1C2433 */
}

.dark .text-link,
.dark #content a.text-primary-600,
.dark #content a.text-primary-500 {
  color: #a5b4fc;                   /* 9.8:1 on #0F172A */
}

/* R2-2 — the "Account menu" subtitle keeps >= 4.5:1 on the open-state
 * background too: --sl-text-secondary (#334155 on base-100 #F1F5F9 is 9.4:1). */
.sv-user-subtitle {
  color: #334155;                   /* --sl-text-secondary */
}

.dark .sv-user-subtitle {
  color: #cbd5e1;                   /* --sl-text-secondary (dark): 11.9:1 on #1E293B */
}

/* R2-3 — dark filter sheet: the selected option and link hovers use the dark
 * brand text, as F4 did elsewhere (#A5B4FC is 9.8:1 on #0F172A). */
.dark #changelist-filter .text-primary-600,
.dark #changelist-filter .text-primary-500,
.dark #changelist-filter a:hover {
  color: #a5b4fc;                   /* --sl-brand-text (dark) */
}

/* R2-5 — forced colours drop the colour cue; mark the current theme choice
 * with a system-coloured outline and underline as well as aria-pressed. */
@media (forced-colors: active) {
  .sv-theme-choice.is-current {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}