/*
 * Genius Connect Design System Foundation (HGP Brand Guide derived)
 *
 * Scope:
 * - Shared design tokens (CSS variables)
 * - Lightweight component primitives (buttons/cards/badges/forms/tables)
 * - No full-page redesigns in this file
 *
 * Brand Source of Truth:
 * - HGP Brand Guide (Electric Yellow + Black; DIN Next LT Pro + Gotham)
 */

:root {
  /* Colors */
  --hgp-color-black: #000000;
  --hgp-color-white: #ffffff;
  --hgp-color-electric-yellow: #ffe000; /* Brand guide primary */

  /* Neutral scale (supportive system grays for UI surfaces) */
  --hgp-color-gray-950: #0b0b0b;
  --hgp-color-gray-900: #111111;
  --hgp-color-gray-800: #1a1a1a;
  --hgp-color-gray-700: #2a2a2a;
  --hgp-color-gray-600: #3a3a3a;
  --hgp-color-gray-500: #646464; /* matches brand guide supportive text tone */
  --hgp-color-gray-400: #8a8a8a;
  --hgp-color-gray-300: #c9c9c9;
  --hgp-color-gray-200: #e9ecef;
  --hgp-color-gray-100: #f8f9fa;

  /* Semantic */
  --hgp-color-bg: var(--hgp-color-gray-100);
  --hgp-color-surface: var(--hgp-color-white);
  --hgp-color-border: rgba(0, 0, 0, 0.12);
  --hgp-color-text: #111111;
  --hgp-color-text-muted: #5a5a5a;

  /* Typography */
  --hgp-font-heading: "DIN Next LT Pro", "DIN Condensed", "Arial Narrow", Impact, system-ui, sans-serif;
  --hgp-font-body: Gotham, "Gotham Book", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Spacing scale (px) */
  --hgp-space-1: 4px;
  --hgp-space-2: 8px;
  --hgp-space-3: 12px;
  --hgp-space-4: 16px;
  --hgp-space-5: 24px;
  --hgp-space-6: 32px;
  --hgp-space-7: 40px;
  --hgp-space-8: 48px;

  /* Radius */
  --hgp-radius-sm: 8px;
  --hgp-radius-md: 12px;
  --hgp-radius-lg: 16px;

  /* Elevation */
  --hgp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --hgp-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.10);

  /* Focus */
  --hgp-focus-ring: 0 0 0 3px rgba(255, 224, 0, 0.45);
}

/* Base */
body.hgp-body {
  font-family: var(--hgp-font-body);
  background: var(--hgp-color-bg);
  color: var(--hgp-color-text);
}

h1, h2, h3, h4, .hgp-heading {
  font-family: var(--hgp-font-heading);
}

/* Links */
a {
  color: inherit;
}

/* Buttons (bootstrap overrides) */
.btn-primary {
  background: var(--hgp-color-electric-yellow);
  border-color: var(--hgp-color-electric-yellow);
  color: var(--hgp-color-black);
  font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus {
  background: #e6cc00;
  border-color: #e6cc00;
  color: var(--hgp-color-black);
}

.btn-outline-primary {
  border-color: var(--hgp-color-electric-yellow);
  color: var(--hgp-color-black);
  font-weight: 700;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--hgp-color-electric-yellow);
  border-color: var(--hgp-color-electric-yellow);
  color: var(--hgp-color-black);
}

.btn:focus,
.btn:focus-visible {
  box-shadow: var(--hgp-focus-ring);
}

/* Cards */
.hgp-card {
  border: 1px solid var(--hgp-color-border);
  border-radius: var(--hgp-radius-md);
  box-shadow: var(--hgp-shadow-sm);
}

.hgp-card .card-header {
  background: var(--hgp-color-surface);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Badges */
.hgp-pill {
  border-radius: 999px;
}

/* Forms */
.form-control:focus,
.form-select:focus {
  border-color: rgba(255, 224, 0, 0.8);
  box-shadow: var(--hgp-focus-ring);
}

/* Tables */
.table thead.table-light th {
  background: #f2f3f5;
}

/* Layout primitives */
.hgp-page {
  padding-top: var(--hgp-space-4);
  padding-bottom: var(--hgp-space-4);
}

.hgp-page-title {
  letter-spacing: 0;
}

.hgp-subtle {
  color: var(--hgp-color-text-muted);
}


/* =========================================================================
 * DARK-GLASS THEME (Labs/Hub aesthetic, HGP electric-yellow accent)
 * Scoped to .hgp-shell-body so only the modern shell surfaces are themed
 * (flagship-first; legacy pages untouched). Overrides the per-template card
 * classes via higher specificity — no template HTML edits required.
 * ========================================================================= */
.hgp-shell-body {
  --hgp-color-bg: #0a0a0b;
  --hgp-color-surface: rgba(255, 255, 255, 0.045);
  --hgp-color-border: rgba(255, 255, 255, 0.10);
  --hgp-color-text: #f4f4f5;
  --hgp-color-text-muted: rgba(244, 244, 245, 0.55);
  --hgp-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hgp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hgp-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.40);
  --hgp-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.55);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --yellow: #ffe000;
  --yellow-glow: 0 0 18px rgba(255, 224, 0, 0.18);
  background-color: #0a0a0b;
  color: #f4f4f5;
  font-family: var(--hgp-font-body);
}
.hgp-shell-body, .hgp-shell-body .hgp-shell {
  background-color: #0a0a0b;
  background-image:
    radial-gradient(680px circle at 14% -2%, rgba(255, 224, 0, 0.10), transparent 55%),
    radial-gradient(620px circle at 92% 4%, rgba(255, 224, 0, 0.05), transparent 55%);
  background-attachment: fixed;
}
.hgp-shell-body h1, .hgp-shell-body h2, .hgp-shell-body h3,
.hgp-shell-body h4, .hgp-shell-body .h4, .hgp-shell-body .h5 { font-family: var(--hgp-font-body); color: #f4f4f5; }

/* Shell chrome → glass */
.hgp-shell-body .hgp-shell__sidebar {
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.hgp-shell-body .hgp-shell__brand { font-family: var(--hgp-font-body); font-weight: 800; }
.hgp-shell-body .hgp-shell__navlink.is-active {
  background: rgba(255, 224, 0, 0.12);
  border-color: rgba(255, 224, 0, 0.30);
  color: #ffe000;
  box-shadow: var(--yellow-glow);
}
.hgp-shell-body .hgp-shell__navlink.is-active i { color: #ffe000; }
.hgp-shell-body .hgp-shell__topbar {
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.hgp-shell-body .hgp-shell__topbar-title { font-family: var(--hgp-font-body); font-weight: 800; color: #f4f4f5; }
.hgp-shell-body .hgp-shell__navtoggle { border-color: rgba(255, 255, 255, 0.16); color: #f4f4f5; }
.hgp-shell-body .hgp-shell-flash { padding: 12px 18px 0; }

/* Content cards → frosted glass */
.hgp-shell-body .upp-card, .hgp-shell-body .as-card, .hgp-shell-body .ye-card,
.hgp-shell-body .pd-card, .hgp-shell-body .lc-card, .hgp-shell-body .rc,
.hgp-shell-body .spine-card, .hgp-shell-body .hgp-card, .hgp-shell-body .hgp-panel,
.hgp-shell-body .hgp-metric {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-inset);
  color: #f4f4f5;
}
.hgp-shell-body .upp-card.placeholder, .hgp-shell-body .ye-card.placeholder { background: var(--glass-2) !important; }
.hgp-shell-body details.site, .hgp-shell-body details.cohort, .hgp-shell-body details.lc,
.hgp-shell-body details.site > summary { background: var(--glass) !important; border-color: var(--glass-border) !important; color: #f4f4f5; }
.hgp-shell-body details.cohort { background: var(--glass-2) !important; }

/* Tables */
.hgp-shell-body table { color: #f4f4f5; }
.hgp-shell-body .cohort td, .hgp-shell-body .cohort th, .hgp-shell-body .ymt td, .hgp-shell-body .ymt th,
.hgp-shell-body .yat td, .hgp-shell-body .yat th, .hgp-shell-body .yht td, .hgp-shell-body .yht th,
.hgp-shell-body table.staff td, .hgp-shell-body table.staff th, .hgp-shell-body .cohort table th,
.hgp-shell-body .lc td, .hgp-shell-body .lc th { border-top-color: rgba(255, 255, 255, 0.07) !important; }
.hgp-shell-body .ymt table, .hgp-shell-body .yat table, .hgp-shell-body .yht table,
.hgp-shell-body table.staff { background: var(--glass) !important; border-color: var(--glass-border) !important; }
.hgp-shell-body thead tr, .hgp-shell-body thead th { color: rgba(244, 244, 245, 0.5) !important; }
.hgp-shell-body tbody tr:hover { background: rgba(255, 224, 0, 0.05); }

/* Key-value rows, muted, dividers */
.hgp-shell-body .kv { border-top-color: rgba(255, 255, 255, 0.07) !important; }
.hgp-shell-body .kv .k, .hgp-shell-body .muted, .hgp-shell-body .cnt, .hgp-shell-body .pd-card .l,
.hgp-shell-body .metric-row .l, .hgp-shell-body .upp-id, .hgp-shell-body .l,
.hgp-shell-body .text-muted, .hgp-shell-body small.text-muted { color: rgba(244, 244, 245, 0.5) !important; }
.hgp-shell-body .kv .v, .hgp-shell-body .metric, .hgp-shell-body .big .n, .hgp-shell-body .pd-card .n,
.hgp-shell-body .score { color: #f4f4f5; }
.hgp-shell-body .rowlist .row { border-top-color: rgba(255, 255, 255, 0.07); }
.hgp-shell-body .tl-item, .hgp-shell-body .tl-item + .tl-item { border-top-color: rgba(255, 255, 255, 0.07); }

/* Pills / badges / progress bars */
.hgp-shell-body .pill, .hgp-shell-body .chip.soon, .hgp-shell-body .bdg.hist,
.hgp-shell-body .badge.bg-secondary {
  background: rgba(255, 255, 255, 0.08) !important; color: rgba(244, 244, 245, 0.85) !important; border-color: rgba(255, 255, 255, 0.12) !important;
}
.hgp-shell-body .bar { background: rgba(255, 255, 255, 0.10) !important; }
.hgp-shell-body .bar > span, .hgp-shell-body .hgp-progress__bar { background: var(--yellow) !important; }
.hgp-shell-body .kind-head { color: rgba(244, 244, 245, 0.45); }

/* Forms → dark glass + yellow focus */
/* NOTE: exclude checkbox/radio — this is text-input styling (a flat dark fill
   with !important). Applied to checkboxes it overrode their :checked state, so a
   ticked box looked identical to an empty one across every dark-shell modal
   (staff permissions, cohorts, sites…). Checkboxes/radios keep their own
   styling so the checked state stays visible. */
.hgp-shell-body input:not([type="checkbox"]):not([type="radio"]), .hgp-shell-body select, .hgp-shell-body textarea,
.hgp-shell-body .form-control, .hgp-shell-body .form-select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f4f4f5 !important;
}
.hgp-shell-body input::placeholder, .hgp-shell-body textarea::placeholder { color: rgba(244, 244, 245, 0.38); }
.hgp-shell-body input:not([type="checkbox"]):not([type="radio"]):focus, .hgp-shell-body select:focus, .hgp-shell-body textarea:focus,
.hgp-shell-body .form-control:focus, .hgp-shell-body .form-select:focus {
  border-color: rgba(255, 224, 0, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 224, 0, 0.16) !important;
  outline: none;
}
.hgp-shell-body select option { background: #161617; color: #f4f4f5; }

/* Buttons */
.hgp-shell-body .btn-primary {
  background: var(--yellow) !important; border-color: var(--yellow) !important; color: #161208 !important;
  font-weight: 600; box-shadow: 0 4px 18px rgba(255, 224, 0, 0.28);
}
.hgp-shell-body .btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.hgp-shell-body .btn-outline-primary { color: var(--yellow) !important; border-color: rgba(255, 224, 0, 0.45) !important; }
.hgp-shell-body .btn-outline-primary:hover { background: rgba(255, 224, 0, 0.14) !important; color: var(--yellow) !important; }
.hgp-shell-body .btn-outline-secondary, .hgp-shell-body .btn-outline-success {
  color: rgba(244, 244, 245, 0.85) !important; border-color: rgba(255, 255, 255, 0.18) !important;
}
.hgp-shell-body .btn-outline-secondary:hover, .hgp-shell-body .btn-outline-success:hover { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }
.hgp-shell-body .btn-link { color: var(--yellow); }
.hgp-shell-body a { color: #ffe97a; }
.hgp-shell-body a:hover { color: var(--yellow); }
.hgp-shell-body .upp-card a, .hgp-shell-body .ye-card a, .hgp-shell-body td a { color: #ffe97a; }

/* Alerts → dark */
.hgp-shell-body .alert { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #f4f4f5; }
.hgp-shell-body .alert-success { border-left: 3px solid #1d9e75; }
.hgp-shell-body .alert-danger, .hgp-shell-body .alert-error { border-left: 3px solid #e24b4a; }

/* Hover lift on cards (Labs/Hub feel) */
.hgp-shell-body .upp-card, .hgp-shell-body .as-card, .hgp-shell-body .ye-card,
.hgp-shell-body .pd-card, .hgp-shell-body .rc { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.hgp-shell-body .pd-card:hover, .hgp-shell-body .rc:hover { transform: translateY(-2px); border-color: rgba(255, 224, 0, 0.25) !important; }

/* Scrollbar */
.hgp-shell-body ::-webkit-scrollbar { width: 9px; height: 9px; }
.hgp-shell-body ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; }
.hgp-shell-body ::-webkit-scrollbar-track { background: transparent; }

/* =========================================================================
 * Light surfaces inside the dark shell — .hgp-light-surface
 *
 * The shell forces text light and inputs dark-glass (with !important and,
 * for inputs, a high-specificity :not() chain). Any template that paints a
 * white/near-white card inside .hgp-shell-body therefore renders invisible
 * text unless it out-specifies those rules — a mistake made repeatedly
 * (PRs #190/#194/#201 + the events pages). Instead of per-page overrides,
 * mark the light container with class="hgp-light-surface" and everything
 * inside reads dark again. Every selector here is
 * `.hgp-shell-body .hgp-light-surface ...` (three classes — beats each
 * two-class shell rule at equal !important), and the input selector carries
 * the same :not() chain to win that specificity tie as well.
 * tests/test_light_surface_lint.py enforces that new light surfaces either
 * use this class or carry an explicit waiver comment.
 * ========================================================================= */
.hgp-shell-body .hgp-light-surface,
.hgp-shell-body .hgp-light-surface h1, .hgp-shell-body .hgp-light-surface h2,
.hgp-shell-body .hgp-light-surface h3, .hgp-shell-body .hgp-light-surface h4,
.hgp-shell-body .hgp-light-surface h5, .hgp-shell-body .hgp-light-surface h6,
.hgp-shell-body .hgp-light-surface .text-dark { color: #111827 !important; }
.hgp-shell-body .hgp-light-surface label,
.hgp-shell-body .hgp-light-surface .cnt, .hgp-shell-body .hgp-light-surface .muted,
.hgp-shell-body .hgp-light-surface .kv .k, .hgp-shell-body .hgp-light-surface .l,
.hgp-shell-body .hgp-light-surface .text-muted, .hgp-shell-body .hgp-light-surface small,
.hgp-shell-body .hgp-light-surface small.text-muted { color: #6b7280 !important; }
.hgp-shell-body .hgp-light-surface table,
.hgp-shell-body .hgp-light-surface td, .hgp-shell-body .hgp-light-surface th { color: #111827 !important; }
.hgp-shell-body .hgp-light-surface thead tr, .hgp-shell-body .hgp-light-surface thead th { color: #6b7280 !important; }
.hgp-shell-body .hgp-light-surface td { border-top-color: #eeeeee !important; }
.hgp-shell-body .hgp-light-surface tbody tr:hover { background: rgba(0, 0, 0, 0.03); }
.hgp-shell-body .hgp-light-surface .pill,
.hgp-shell-body .hgp-light-surface .badge.bg-secondary {
  background: #ececec !important; color: #444444 !important; border-color: #dddddd !important;
}
.hgp-shell-body .hgp-light-surface input:not([type="checkbox"]):not([type="radio"]),
.hgp-shell-body .hgp-light-surface select,
.hgp-shell-body .hgp-light-surface textarea,
.hgp-shell-body .hgp-light-surface .form-control,
.hgp-shell-body .hgp-light-surface .form-select {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
}
.hgp-shell-body .hgp-light-surface input::placeholder,
.hgp-shell-body .hgp-light-surface textarea::placeholder { color: #9ca3af; }
.hgp-shell-body .hgp-light-surface select option { background: #ffffff; color: #111827; }
.hgp-shell-body .hgp-light-surface input:not([type="checkbox"]):not([type="radio"]):focus,
.hgp-shell-body .hgp-light-surface select:focus,
.hgp-shell-body .hgp-light-surface textarea:focus {
  border-color: rgba(200, 165, 0, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(255, 224, 0, 0.25) !important;
}
.hgp-shell-body .hgp-light-surface a:not(.btn),
.hgp-shell-body .hgp-light-surface td a { color: #8a6d00; }
.hgp-shell-body .hgp-light-surface a:not(.btn):hover { color: #5c4900; }