/* USGRP Secure Network — custom branding + dark theme for the Defguard web UI.
 *
 * Defguard ships a prebuilt SPA (we run the stock ghcr.io image), so we can't
 * touch its source. This stylesheet is injected by nginx (sub_filter adds a
 * <link> to /branding/usgrp-defguard.css on every HTML response, and also flips
 * the hardcoded data-theme="light" to "dark"). It overrides Defguard's CSS
 * custom properties to the USGRP palette (matches usgrp-secure-net/home — deep
 * ink background, violet accent, Inter) and re-skins the login hero + wordmark.
 *
 * Everything keys off a handful of Defguard vars:
 *   --surface-main-primary/secondary  → the blue hero panel + primary buttons
 *   --surface-frame-bg / -nav-bg / -default-modal → dark surfaces
 *   #auth-container .logo-container    → the big login side panel + its logo img
 */

:root,
html[data-theme='light'],
html[data-theme='dark'] {
  /* USGRP violet replaces defguard blue everywhere it's referenced */
  --surface-main-primary: #7c5cff;
  --surface-main-secondary: #9b82ff;
  --text-button-tertiary: #9b82ff;
  --primary: #7c5cff;
  --primary-dark: #6a4cf0;

  /* Dark ink surfaces — mirror the Secure Network home page */
  --surface-frame-bg: #0c0d12;
  --surface-nav-bg: #11131b;
  --surface-default-modal: #14161f;
  --surface-info-modal: #14161f;
  --surface-button: #14161f;
  --surface-tag-modal: #1b1e2b;

  --border-primary: #232636;
  --border-secondary: #232636;
  --border-separator: #313648;

  --text-body-primary: #f3f4f8;
  --text-body-secondary: #9aa0b4;
  --text-body-tertiary: #6a7086;
  --text-button-primary: #f3f4f8;
  --text-button-secondary: #ffffff;

  --white: #f3f4f8;
  --bg-light: #0c0d12;

  /* drop-shadow-blue referenced by primary buttons → tint it violet */
  --drop-shadow-blue: 0px 6px 14px 0px rgba(124, 92, 255, .45);
}

/* Page + app background → deep ink with the signature violet glow */
html[data-theme='dark'] body,
body {
  background:
    radial-gradient(1200px 620px at 50% -8%, rgba(124, 92, 255, .16), transparent 55%),
    #0c0d12 !important;
}

/* ── Login / enrollment hero panel ─────────────────────────────────────────
 * The left half is #auth-container .logo-container with the defguard <img>.
 * Give it the violet gradient + swap the wordmark for "USGRP Secure Network". */
#auth-container .logo-container,
#openid-consent .logo-container {
  background:
    radial-gradient(900px 500px at 30% 20%, rgba(155, 130, 255, .35), transparent 60%),
    linear-gradient(160deg, #7c5cff 0%, #5a3fd6 60%, #3a2a8f 100%) !important;
  position: relative;
}

/* Hide the stock defguard wordmark image */
#auth-container .logo-container img,
#openid-consent .logo-container img {
  opacity: 0 !important;
}

/* Overlay the USGRP wordmark in its place */
#auth-container .logo-container::after,
#openid-consent .logo-container::after {
  content: 'USGRP';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 18px));
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: 54px;
  letter-spacing: -1px;
  color: #ffffff;
  text-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
#auth-container .logo-container::before,
#openid-consent .logo-container::before {
  content: 'SECURE NETWORK';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 30px));
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .34em;
  color: rgba(255, 255, 255, .82);
}

/* Loader splash uses the same var — recolour the spinner glow to match */
#loader-page {
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(124, 92, 255, .35), transparent 60%),
    #0c0d12 !important;
}

/* Primary buttons: violet, no harsh blue focus ring */
.btn.variant-primary {
  background-color: #7c5cff !important;
  color: #fff !important;
}
.btn.variant-primary.hovered,
.btn.variant-primary:hover {
  background-color: #9b82ff !important;
}

/* Login heading uses Poppins/blue by default — keep it crisp on dark */
#login-container h1 {
  color: #f3f4f8 !important;
}

/* Text inputs on dark surfaces */
.input .inside,
.input input,
input[type='text'],
input[type='password'] {
  background-color: #11131b !important;
  color: #f3f4f8 !important;
}