/* OFM Gatekeeper Director Dashboard — Locked Screen 1 Design Tokens
 * Fonts: Rubik (Headlines) + Sora (UI Labels/Controls) + Roboto Flex (Body) + JetBrains Mono (Telemetry)
 * Palette: Tactical Lime (#92D964) + Warm Citron (#CECC50) + Ice Cyan (#4CD7F6) on Pure Obsidian (#0B0F17) & Slate (#111827)
 * Zero Navy (#001137) or AI-Synth Purple/Indigo Drift.
 */

:root {
  color-scheme: dark;
  --surface-lowest: #070A10;
  --surface-obsidian: #0B0F17;
  --surface-slate: #111827;
  --surface-high: #162032;
  --surface-elevated: #1F2937;
  --border-tactical: #1E293B;
  --border-subtle: #162032;
  --primary: #92D964;
  --primary-bright: #ADF67D;
  --primary-dim: #438316;
  --tertiary: #CECC50;
  --secondary: #4CD7F6;
  --status-emerald: #10B981;
  --status-amber: #F59E0B;
  --status-crimson: #EF4444;
  --status-cyan: #06B6D4;
  --on-surface: #E2E8F0;
  --on-surface-variant: #C1C9B6;
  --outline: #8B9481;
  --outline-variant: #41493A;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--surface-obsidian) !important;
  color: var(--on-surface);
  font-family: 'Roboto Flex', sans-serif;
  overscroll-behavior: none;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  display: inline-flex;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--surface-lowest);
}

::-webkit-scrollbar-thumb {
  background: var(--border-tactical);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Modern Web Guidance: Layout & Paint Containment for Multi-Column Boards / Roster Decks */
.gk-containment-col {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px auto 520px;
}

@supports not (content-visibility: auto) {
  .gk-containment-col {
    contain: layout style paint;
  }
}

/* Modern Web Guidance: Accessible Sticky Data Tables & Container Queries */
.gk-table-region {
  overflow: auto;
  max-inline-size: 100%;
  container-type: inline-size;
}

.gk-table-region table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.gk-table-region thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background-color: var(--surface-lowest);
}

/* Forced Colors Mode Accessibility Fallbacks */
@media (forced-colors: active) {
  .gk-card,
  .gk-btn,
  .gk-badge {
    border: 1px solid CanvasText !important;
  }
}