/* GUNPAI Control Center theme — synced from design_handoff_gunpai/styles.css
   ───────────────────────────────────────────────────────────────
   Warm paper · ink text · ONE royal-blue accent #2f6fd6 · hairline borders.
   Type: Poppins (headings + UI chrome) · Lora (body) · Geist Mono (data).
   This file = tokens (verbatim) + Bootstrap 5 variable mapping + overrides,
   so existing Bootstrap markup reskins centrally. Visual only. */

:root {
  /* Surface tokens (warm paper) */
  --bg:           #faf9f5;
  --bg-subtle:    #f4f2ea;
  --surface:      #fffdf9;
  --surface-2:    #faf8f2;
  --surface-3:    #f2efe6;
  --border:       #e8e6dc;
  --border-strong:#dcd9cc;
  --divider:      #ece9df;

  /* Type */
  --text:         #141413;
  --text-2:       #3f3d38;
  --text-3:       #6b6a63;
  --text-muted:   #b0aea5;
  --text-on-dark: #faf9f5;

  /* Brand — ONE royal-blue accent */
  --brand:        #2f6fd6;
  --brand-2:      #2356b3;
  --clay-ink:     #1b3e74;
  --accent:       #2f6fd6;
  --accent-2:     #2356b3;
  --accent-soft:  #e4edfb;

  /* Status — desaturated brand tints */
  --live:         #bc4b39;
  --live-soft:    #f6e3dd;
  --warn:         #c08a3e;
  --warn-soft:    #f3e9d6;
  --ok:           #788c5d;
  --ok-soft:      #e7ebdd;
  --info:         #6a9bcc;
  --violet:       #8a6cae;

  /* Video surfaces (camera feeds stay dark) */
  --video:        #14110d;
  --video-2:      #1c1813;
  --video-3:      #2a241d;

  /* Shadows — barely there, warm */
  --shadow-sm: 0 1px 2px rgba(20,20,19,0.05);
  --shadow:    0 1px 3px rgba(20,20,19,0.06), 0 1px 2px rgba(20,20,19,0.04);
  --shadow-lg: 0 12px 34px rgba(20,20,19,0.12), 0 3px 8px rgba(20,20,19,0.06);
  --shadow-pop:0 22px 56px rgba(20,20,19,0.20);

  /* Radii */
  --r-sm: 6px;  --r: 8px;  --r-md: 10px;  --r-lg: 12px;  --r-xl: 16px;

  /* Fonts */
  --font-ui:      "Lora", Georgia, "Times New Roman", serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Poppins", Arial, sans-serif;

  /* Bootstrap 5 mapping */
  --bs-primary: #2f6fd6;
  --bs-primary-rgb: 47,111,214;
  --bs-body-bg: #faf9f5;
  --bs-body-color: #141413;
  --bs-border-color: #e8e6dc;
  --bs-border-radius: 10px;
  --bs-link-color: #2f6fd6;
  --bs-link-hover-color: #2356b3;
  --bs-body-font-family: var(--font-ui);
  --bs-font-sans-serif: var(--font-ui);
}

/* ── Base ─────────────────────────────────────────────────────── */
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 15px; line-height: 1.6; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display); font-weight: 600; color: var(--text); letter-spacing: -0.02em;
}
a { color: var(--brand); } a:hover { color: var(--brand-2); }
code { font-family: var(--font-mono); font-size: 0.86em; color: var(--text-2); background: var(--surface-3); padding: 1px 5px; border-radius: 5px; }
.text-muted, .text-secondary { color: var(--text-3) !important; }
hr { border-color: var(--divider); opacity: 1; }

/* ── Sidebar rail (warm light) ────────────────────────────────── */
.sidebar {
  background: #f2efe6 !important; color: var(--text-2) !important;
  border-right: 1px solid var(--border); position: relative;
}
.sidebar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(at 0% 0%, rgba(47,111,214,0.06), transparent 55%);
}
.sidebar .brand { color: var(--text) !important; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; position: relative; z-index: 1; }
.sidebar .brand i { color: var(--brand); }
.sidebar .nav-section { color: var(--text-muted) !important; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.13em; font-size: 10px; }
.sidebar a.navlink {
  color: var(--text-2) !important; font-family: var(--font-display); font-weight: 500; font-size: 13px;
  border-radius: 9px; position: relative; z-index: 1; transition: background 0.12s, color 0.12s;
}
.sidebar a.navlink:hover { background: var(--surface-3) !important; color: var(--text) !important; }
.sidebar a.navlink.active { background: var(--brand) !important; color: #fffaf5 !important; box-shadow: var(--shadow-sm); }
.sidebar .small.text-secondary { color: var(--text-muted) !important; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; }

/* ── Topbar ───────────────────────────────────────────────────── */
.topbar { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn { font-family: var(--font-display); font-weight: 500; border-radius: var(--r-md); transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s; }
.btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fffaf5;
}
.btn-primary:hover, .btn-primary:focus { background: var(--brand-2); border-color: var(--brand-2); color: #fffaf5; }
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-dark {
  background: var(--surface); border-color: var(--border); color: var(--text-2);
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover, .btn-outline-dark:hover {
  background: var(--surface-3); border-color: var(--border-strong); color: var(--text);
}
.btn-outline-primary { color: var(--brand); border-color: #c3d4f0; background: var(--surface); }
.btn-outline-primary:hover { background: var(--accent-soft); color: var(--clay-ink); border-color: #a9c2ea; }
.btn-outline-info { color: #355877; border-color: #c3d6e8; background: var(--surface); }
.btn-outline-info:hover { background: #e3edf6; color: #355877; border-color: #a9c5de; }
.btn-outline-success { color: #4a5a35; border-color: #cdd6bb; background: var(--surface); }
.btn-outline-success:hover { background: var(--ok-soft); color: #4a5a35; border-color: #b9c6a1; }
.btn-outline-warning { color: #8a611e; border-color: #e6d3ab; background: var(--surface); }
.btn-outline-warning:hover { background: var(--warn-soft); color: #8a611e; border-color: #d9c08c; }
.btn-outline-danger, .btn-danger {
  color: var(--live); border-color: #e3c4bc; background: var(--surface);
}
.btn-outline-danger:hover, .btn-danger:hover { background: var(--live-soft); color: var(--live); border-color: #d9a99e; }
.btn-link { color: var(--brand); font-family: var(--font-display); }

/* ── Cards ────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.card-header { background: transparent !important; border-bottom: 1px solid var(--divider) !important; font-family: var(--font-display); }
.card-header.fw-semibold, .card-header .fw-semibold { font-size: 13.5px; color: var(--text); letter-spacing: -0.005em; }

/* ── Tables ───────────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--surface-3); color: var(--text-2); border-color: var(--divider); }
.table thead th {
  font-family: var(--font-display); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-3); background: var(--surface-2);
  border-bottom: 1px solid var(--divider); padding: 11px 14px;
}
.table td { border-bottom: 1px solid var(--divider); padding: 11px 14px; font-size: 12.5px; color: var(--text-2); }
.table > :not(caption) > * > * { border-bottom-color: var(--divider); }
.table tbody tr:hover td { background: var(--surface-3); }
.table tbody tr:last-child td { border-bottom: none; }
.table strong { color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 12.5px; }

/* ── Tabs (nav-pills) ─────────────────────────────────────────── */
.nav-pills .nav-link {
  font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--text-3);
  border-radius: 999px; padding: 6px 14px;
}
.nav-pills .nav-link:hover { color: var(--text); background: var(--surface-3); }
.nav-pills .nav-link.active { background: var(--accent-soft); color: var(--clay-ink); }

/* ── Badges / chips — desaturated tints, pill radius ──────────── */
.badge { font-family: var(--font-display); font-weight: 500; font-size: 11px; border-radius: 999px; padding: 3px 9px; border: 1px solid transparent; }
.badge.bg-success { background: var(--ok-soft) !important; color: #4a5a35 !important; border-color: #cdd6bb; }
.badge.bg-warning { background: var(--warn-soft) !important; color: #8a611e !important; border-color: #e6d3ab; }
.badge.bg-danger  { background: var(--live-soft) !important; color: #8f3326 !important; border-color: #e6c3ba; }
.badge.bg-info    { background: #e3edf6 !important; color: #355877 !important; border-color: #c3d6e8; }
.badge.bg-primary { background: var(--accent-soft) !important; color: var(--clay-ink) !important; border-color: #c3d4f0; }
.badge.bg-secondary { background: var(--surface-3) !important; color: var(--text-3) !important; border-color: var(--border); }
.badge.bg-light   { background: var(--surface-2) !important; color: var(--text-3) !important; border-color: var(--border); }
.badge.bg-info-subtle    { background: #e3edf6 !important; color: #355877 !important; }
.badge.bg-warning-subtle { background: var(--warn-soft) !important; color: #8a611e !important; }

/* ── Forms ────────────────────────────────────────────────────── */
.form-label { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.form-label .text-muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-control, .form-select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-md); font-size: 13.5px;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.form-control:focus, .form-select:focus {
  background: var(--surface); border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47,111,214,0.18); color: var(--text);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(47,111,214,0.18); border-color: var(--brand); }
.form-text { color: var(--text-3); font-size: 12.5px; }
.form-range::-webkit-slider-thumb { background: var(--brand); }

/* ── Flash / alerts (notice style) ────────────────────────────── */
.alert { border-radius: var(--r-md); font-family: var(--font-ui); font-size: 13.5px; }
.alert-info { background: var(--accent-soft); border: 1px solid #c3d4f0; color: var(--clay-ink); }
.alert-danger { background: var(--live-soft); border: 1px solid #e6c3ba; color: #8f3326; }
.alert-warning { background: var(--warn-soft); border: 1px solid #e6d3ab; color: #8a611e; }

/* ── Modal / dropdown ─────────────────────────────────────────── */
.modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--divider); font-family: var(--font-display); }
.modal-footer { border-top: 1px solid var(--divider); }
.dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }

/* ── Mono data helpers ────────────────────────────────────────── */
.font-monospace, .mono { font-family: var(--font-mono) !important; font-size: 11.5px; }

/* ── Pagination / misc ────────────────────────────────────────── */
.page-link { color: var(--brand); border-color: var(--border); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); }
::selection { background: var(--accent-soft); color: var(--clay-ink); }

/* ── Night mode ───────────────────────────────────────────────────────────────────
   The same design after dark, not a different one: warm dark surfaces rather than
   pure black, so the paper-and-ink character survives and the one royal-blue accent
   still reads as the accent.

   Only TOKENS are redefined here — every rule above already consumes them, so the
   whole console reskins from this block alone. The switch is Bootstrap 5.3's own
   data-bs-theme, which means cards, tables, forms, dropdowns and modals follow
   without a single extra rule.

   The two exceptions below are rules that hardcode a light colour: the sidebar's
   warm-paper fill and the .bg-white utility Bootstrap does not theme. */
:root[data-bs-theme="dark"] {
  /* Cool, not warm: a slate base with a blue cast (hue ~215°, low saturation) so the night
     side reads as the same product as the royal-blue accent — but kept desaturated, or the
     whole console starts looking like a wash of blue rather than a dark grey with a tint. */
  --bg:           #0f1218;
  --bg-subtle:    #141821;
  --surface:      #171c26;
  --surface-2:    #1c222d;
  --surface-3:    #232a36;
  --border:       #2a3341;
  --border-strong:#3a4553;
  --divider:      #232a36;

  --text:         #e9eef6;
  --text-2:       #c7d1de;
  --text-3:       #98a3b3;
  --text-muted:   #6d7889;
  --text-on-dark: #e9eef6;

  /* Lifted a step: #2f6fd6 on a dark surface is too dim to read as the accent. */
  --brand:        #5b91e8;
  --brand-2:      #7aa8ee;
  --clay-ink:     #a8c6f5;
  --accent:       #5b91e8;
  --accent-2:     #7aa8ee;
  --accent-soft:  #18263d;

  --live:         #e8776a;
  --live-soft:    #37222a;
  --warn:         #dda85e;
  --warn-soft:    #342c1f;
  --ok:           #93b485;
  --ok-soft:      #1e2b28;

  --bs-primary: #5b91e8;
  --bs-primary-rgb: 91,145,232;
  --bs-body-bg: #0f1218;
  --bs-body-color: #e9eef6;
  --bs-border-color: #2a3341;
  --bs-link-color: #5b91e8;
  --bs-link-hover-color: #7aa8ee;
}

:root[data-bs-theme="dark"] .sidebar { background: #131822 !important; }
:root[data-bs-theme="dark"] .sidebar a.navlink.active { color: #0f0f0c !important; }
/* .bg-white is used for card headers throughout both apps; Bootstrap leaves it literal. */
:root[data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; }
:root[data-bs-theme="dark"] .btn-primary,
:root[data-bs-theme="dark"] .btn-primary:hover { color: #0f0f0c; }