/* ACIDRIPP VPN — unified portal theme
 * Re-skins the wg-portal Vue SPA to match the AdminLTE v4 / ACIDRIPP look used
 * across the fleet (dark Bootstrap 5.3 base + ACIDRIPP accent + branding).
 * Served via wg-portal web.frontend_filepath override; linked from index.html.
 * CSS-only — does not touch the SPA's markup/JS, so portal functionality is intact.
 */

:root,
[data-bs-theme="dark"] {
  /* ACIDRIPP accent (cyan-forward, distinct yet AdminLTE-compatible) */
  --bs-primary: #00b8d4;
  --bs-primary-rgb: 0, 184, 212;
  --bs-link-color: #2fd6ef;
  --bs-link-color-rgb: 47, 214, 239;
  --bs-link-hover-color: #6fe4f5;
  --bs-link-hover-color-rgb: 111, 228, 245;

  /* Dark surface palette matching the quota dashboard (AdminLTE dark) */
  --bs-body-bg: #16191c;
  --bs-body-bg-rgb: 22, 25, 28;
  --bs-tertiary-bg: #1f2326;
  --bs-secondary-bg: #23282c;
  --bs-body-color: #d8dee4;
  --bs-border-color: #2c3136;
}

/* Force the dark scheme regardless of the SPA's default html attribute */
html { color-scheme: dark; }

/* Brand accent for buttons — explicit props (+!important) so they win over the
 * SPA's compiled .btn-primary rule, which sets background-color directly. */
.btn-primary {
  background-color: #00b8d4 !important;
  border-color: #00b8d4 !important;
  color: #07191c !important;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #00a0ba !important;
  border-color: #0096ae !important;
  color: #07191c !important;
}
.btn-outline-primary {
  color: #2fd6ef !important;
  border-color: #00b8d4 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #00b8d4 !important;
  border-color: #00b8d4 !important;
  color: #07191c !important;
}

/* Navbar / header — ACIDRIPP dark bar */
.navbar {
  background-color: #1b1f23 !important;
  border-bottom: 1px solid var(--bs-border-color);
}
.navbar-brand, .navbar .navbar-brand img { filter: none; }

/* Cards / panels */
.card {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
}
.card-header {
  background-color: rgba(0, 184, 212, .06);
  border-bottom: 1px solid var(--bs-border-color);
}

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); }

/* Form controls on dark */
.form-control, .form-select {
  background-color: #1b1f23;
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.form-control:focus, .form-select:focus {
  border-color: #00b8d4;
  box-shadow: 0 0 0 .2rem rgba(0, 184, 212, .25);
}

/* Login / OIDC button accent */
.btn-google, a.btn[href*="google"] { font-weight: 600; }

/* Subtle ACIDRIPP wordmark accent on headings */
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: .2px; }