/* Strict theme — graphite gradient shell & component overrides */

.app-shell,
body:not(.has-nav) {
  color-scheme: dark;
  background: var(--bg);
  background-image: none;
  background-attachment: fixed;
}

.app-shell .main-column,
.app-shell.has-nav .wrap,
.app-shell .wrap.wrap--overview,
.app-shell .wrap.wrap--runs,
.app-shell .wrap.wrap--multiblox,
.app-shell .wrap.wrap--telemetry {
  background: transparent;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.app-shell .sidebar,
.app-shell .shell-sidebar {
  background-color: var(--bg-subtle);
  background-image: var(--gradient-sidebar);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: 1px solid var(--border);
}

.app-shell .shell-sidebar .sidebar-brand {
  border-bottom: none;
  margin-bottom: 4px;
  padding-bottom: 14px;
}

.app-shell .shell-sidebar .brand-name {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
}

.app-shell .shell-sidebar .sidebar-nav a:hover {
  background: var(--fill-hover);
  color: var(--text);
}

.app-shell .shell-sidebar .sidebar-nav a.active {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--zinc-100);
  font-weight: 600;
}

.app-shell .shell-sidebar .sidebar-nav a:focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 var(--zinc-100), 0 0 0 2px var(--accent-ring);
}

.app-shell .shell-sidebar .sidebar-nav a.active .nav-icon {
  color: var(--text);
  opacity: 1;
}

/* ── Mobile menu button ──────────────────────────────────── */
.app-shell .mobile-menu-btn {
  background-color: var(--surface-raised);
  background-image: var(--gradient-surface-raised);
  border-color: var(--border);
  color: var(--text-secondary);
}

.app-shell .mobile-menu-btn:hover {
  background-color: var(--surface-hover);
  background-image: var(--gradient-surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.app-shell .admin-topbar {
  background-color: var(--bg-subtle);
  background-image: var(--gradient-sidebar);
  border-bottom-color: var(--border);
}

.app-shell .admin-topbar__search {
  background-color: var(--surface-raised);
  background-image: var(--gradient-surface-raised);
  border-color: var(--border);
}

.app-shell .admin-topbar__search:hover {
  background-color: var(--surface-hover);
  background-image: var(--gradient-surface-hover);
  color: var(--text);
}

.app-shell .shell-period {
  background-color: var(--surface-raised);
  background-image: var(--gradient-surface-raised);
  border: 1px solid var(--border);
}

.app-shell .shell-period__btn.active,
.app-shell .ov-segment-btn.active {
  background: var(--gradient-accent);
  color: var(--accent-on);
}

.app-shell .shell-search kbd {
  background-color: var(--surface-raised);
  background-image: var(--gradient-surface-raised);
  border-color: var(--border);
  color: var(--text-secondary);
}

.app-shell .shell-user__avatar {
  background-color: var(--surface-elevated);
  background-image: var(--gradient-surface-elevated);
  border-color: var(--border-strong);
  color: var(--text);
}

.app-shell .shell-tabs {
  background-color: var(--surface);
  background-image: var(--gradient-surface);
  border-color: var(--border);
  box-shadow: none;
}

.app-shell .shell-tab.active {
  background: var(--gradient-accent-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent-muted);
}

/* ── Forms & controls ─────────────────────────────────────── */
.app-shell input[type="text"],
.app-shell input[type="password"],
.app-shell input[type="search"],
.app-shell input[type="email"],
.app-shell input[type="date"],
.app-shell input[type="datetime-local"],
.app-shell select,
.app-shell textarea {
  background-color: var(--surface);
  background-image: var(--gradient-input);
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}

.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus,
.app-shell .ui-menu__trigger:focus-visible {
  box-shadow: var(--focus-ring);
}

.app-shell input[type="checkbox"]:not(.ui-native) {
  border-color: var(--border-strong);
  background-color: var(--surface);
  background-image: var(--gradient-input);
}

.app-shell input[type="checkbox"]:not(.ui-native):hover {
  border-color: var(--accent-muted);
  background-color: var(--surface-hover);
  background-image: var(--gradient-surface-hover);
}

.app-shell input[type="checkbox"]:not(.ui-native):checked {
  background: var(--gradient-accent);
  border-color: var(--accent);
}

.app-shell .ui-select-trigger,
.app-shell .ui-menu-panel {
  background-color: var(--surface-elevated);
  background-image: var(--gradient-surface-elevated);
  backdrop-filter: none;
  border-color: var(--border);
}

.app-shell .ui-select-trigger:hover {
  background-color: var(--surface-hover);
  background-image: var(--gradient-surface-hover);
  border-color: var(--border-strong);
}

.app-shell .ui-menu-item:hover,
.app-shell .ui-menu-item:focus {
  background: var(--fill-hover);
}

/* ── Buttons ────────────────────────────────────────────── */
.app-shell .btn-primary,
.app-shell button.primary,
.app-shell a.button:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-outline) {
  background: var(--gradient-accent);
  color: var(--accent-on);
  border: 1px solid transparent;
}

.app-shell .btn-primary:hover,
.app-shell button.primary:hover {
  background: var(--gradient-accent-hover);
  filter: none;
  box-shadow: none;
}

.app-shell .sidebar-overlay {
  background: var(--gradient-overlay);
  backdrop-filter: none;
}

/* ── Tables ───────────────────────────────────────────────── */
.app-shell .runs-table thead th,
.app-shell .data-table thead th {
  background-color: var(--table-head-bg);
  background-image: var(--gradient-table-head);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary);
  box-shadow: none;
}

.app-shell .runs-table tbody tr:nth-child(even) {
  background: var(--table-zebra);
}

.app-shell .runs-table tbody tr:hover,
.app-shell .data-table tbody tr:hover {
  background: var(--fill-hover);
}

.app-shell .runs-table tbody td {
  border-bottom: 1px solid var(--border-muted);
}

/* ── Command palette ──────────────────────────────────────── */
.app-shell .cmd-palette-overlay {
  background: var(--gradient-overlay);
  backdrop-filter: none;
}

.app-shell .cmd-palette {
  background-color: var(--surface-elevated);
  background-image: var(--gradient-surface-elevated);
  backdrop-filter: none;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.app-shell .cmd-palette-input {
  background: transparent;
  border-bottom-color: var(--border-muted);
  color: var(--text);
}

.app-shell .cmd-palette-item:hover,
.app-shell .cmd-palette-item.active {
  background: var(--fill-hover);
}

/* ── Cards & panels ─────────────────────────────────────────── */
.app-shell .card,
.app-shell .filter-bar,
.app-shell .panel-block,
.app-shell .ov-card,
.app-shell .runs-toolbar__card,
.app-shell .runs-list-card,
.app-shell .export-card,
.app-shell .data-viewport__table {
  background-color: var(--surface);
  background-image: var(--gradient-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
}

.app-shell .ov-stat {
  background-color: var(--surface);
  background-image: var(--gradient-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.app-shell .ov-stats {
  background: transparent;
  border: none;
  box-shadow: none;
  gap: 12px;
}

.app-shell a {
  color: var(--zinc-200);
}

.app-shell a:hover {
  color: var(--text);
}

.app-shell .ov-card-link,
.app-shell .runs-id {
  color: var(--zinc-200);
  text-decoration: none;
}

.app-shell .ov-card-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}

.app-shell .ov-hero {
  border-bottom-color: var(--border-muted);
}

.app-shell .chip,
.app-shell .log-tag,
.app-shell .badge,
.app-shell .ov-badge {
  border-radius: var(--radius-xs);
}

.app-shell .badge,
.app-shell .ov-badge {
  font-weight: 500;
  letter-spacing: 0;
}

.app-shell .flash {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  backdrop-filter: none;
}

.app-shell .flash-ok {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok-border);
}

.app-shell .flash-error {
  background: var(--error-bg);
  color: var(--error);
  border-color: var(--error-border);
}

body:not(.has-nav) .card.narrow {
  background-color: var(--surface);
  background-image: var(--gradient-panel);
  backdrop-filter: none;
  border-color: var(--border);
}

/* ── Global strict overrides (all pages) ──────────────────── */
.badge,
.chip,
.log-tag,
.filter-chip-active,
.status-pill,
.service-chip {
  border-radius: var(--radius-xs) !important;
}

.card,
.filter-bar,
.ov-card,
.ov-stat,
.runs-toolbar__card,
.runs-list-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.btn-primary,
button.primary,
a.button:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-outline),
button.button:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-outline):not(.small-btn):not(.danger-btn) {
  background: var(--gradient-accent) !important;
}

.btn-primary:hover,
button.primary:hover,
a.button:hover,
button.button:hover {
  background: var(--gradient-accent-hover) !important;
  filter: none !important;
}

.brand-name {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}

.ui-menu-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.flatpickr-calendar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}