/*
 * DavinaRadius Captive Portal — Theme System
 *
 * Architecture
 * ────────────
 * 1. ACCENT TOKENS   [data-accent="X"]          — primary, secondary, card colours
 *    BACKGROUND      [data-accent="X"][data-mode="Y"] — gradient stops
 * 2. MODE TOKENS     [data-mode="dark|light"]   — glass surfaces, text, inputs …
 * 3. COMPONENTS      theme-agnostic styles that consume the tokens via var()
 * 4. PACKAGE CARDS   self-contained; render identically on dark and light pages
 *
 * Named themes are fully handled here.  The custom theme receives its tokens
 * via a <style>:root{…}</style> block injected by base.html — no extra CSS needed.
 *
 * Variables (short canonical names used throughout):
 *   --portal-primary      accent colour hex
 *   --portal-primary-rgb  R,G,B for rgba() use
 *   --portal-secondary    lighter tint for links / outline states
 *   --hourly-bg  --daily-bg  --weekly-bg  --monthly-bg   package card fills
 *   --bg-a  --bg-b  --bg-c   gradient stops for the page background
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. ACCENT TOKENS  (13 named themes)
   Each [data-accent] block also sets Bootstrap's own primary var so
   that BS components (focus rings, etc.) pick up the right colour.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Purple ─────────────────────────────────────────────── */
[data-accent="purple"] {
  --portal-primary: #7C3AED; --portal-primary-rgb: 124,58,237; --portal-secondary: #a78bfa;
  --bs-primary: #7C3AED; --bs-primary-rgb: 124,58,237;
  --hourly-bg: #F59E0B; --daily-bg: #0EA5E9; --weekly-bg: #EC4899; --monthly-bg: #059669;
}
[data-accent="purple"][data-mode="dark"]  { --bg-a:#0f0f1a; --bg-b:#12162a; --bg-c:#0d1117; }
[data-accent="purple"][data-mode="light"] { --bg-a:#f5f3ff; --bg-b:#faf9ff; --bg-c:#ede9fe; --portal-secondary:#5b21b6; }

/* ── Crimson Red ────────────────────────────────────────── */
[data-accent="red"] {
  --portal-primary: #DC2626; --portal-primary-rgb: 220,38,38; --portal-secondary: #fca5a5;
  --bs-primary: #DC2626; --bs-primary-rgb: 220,38,38;
  --hourly-bg: #F59E0B; --daily-bg: #8B5CF6; --weekly-bg: #0EA5E9; --monthly-bg: #059669;
}
[data-accent="red"][data-mode="dark"]  { --bg-a:#1a0808; --bg-b:#1f0f0f; --bg-c:#100606; }
[data-accent="red"][data-mode="light"] { --bg-a:#fff5f5; --bg-b:#fff8f8; --bg-c:#fee2e2; --portal-secondary:#991b1b; }

/* ── Rose Pink ──────────────────────────────────────────── */
[data-accent="pink"] {
  --portal-primary: #EC4899; --portal-primary-rgb: 236,72,153; --portal-secondary: #f9a8d4;
  --bs-primary: #EC4899; --bs-primary-rgb: 236,72,153;
  --hourly-bg: #F59E0B; --daily-bg: #0EA5E9; --weekly-bg: #7C3AED; --monthly-bg: #059669;
}
[data-accent="pink"][data-mode="dark"]  { --bg-a:#1a0d14; --bg-b:#1f1019; --bg-c:#12090e; }
[data-accent="pink"][data-mode="light"] { --bg-a:#fdf4ff; --bg-b:#fef8ff; --bg-c:#fce7f3; --portal-secondary:#be185d; }

/* ── Emerald Green ──────────────────────────────────────── */
[data-accent="green"] {
  --portal-primary: #059669; --portal-primary-rgb: 5,150,105; --portal-secondary: #6ee7b7;
  --bs-primary: #059669; --bs-primary-rgb: 5,150,105;
  --hourly-bg: #F59E0B; --daily-bg: #0EA5E9; --weekly-bg: #EC4899; --monthly-bg: #7C3AED;
}
[data-accent="green"][data-mode="dark"]  { --bg-a:#071811; --bg-b:#0a1e15; --bg-c:#050e0b; }
[data-accent="green"][data-mode="light"] { --bg-a:#f0fdf4; --bg-b:#f7fef9; --bg-c:#dcfce7; --portal-secondary:#047857; }

/* ── Sky Blue ───────────────────────────────────────────── */
[data-accent="blue"] {
  --portal-primary: #0284C7; --portal-primary-rgb: 2,132,199; --portal-secondary: #7dd3fc;
  --bs-primary: #0284C7; --bs-primary-rgb: 2,132,199;
  --hourly-bg: #F59E0B; --daily-bg: #059669; --weekly-bg: #EC4899; --monthly-bg: #7C3AED;
}
[data-accent="blue"][data-mode="dark"]  { --bg-a:#030f1a; --bg-b:#05131f; --bg-c:#020a12; }
[data-accent="blue"][data-mode="light"] { --bg-a:#f0f9ff; --bg-b:#f7fcff; --bg-c:#e0f2fe; --portal-secondary:#0369a1; }

/* ── Amber Yellow ───────────────────────────────────────── */
[data-accent="yellow"] {
  --portal-primary: #D97706; --portal-primary-rgb: 217,119,6; --portal-secondary: #fcd34d;
  --btn-primary-text: #1a0e00;  /* white (#fff) only gives ~3.2:1 contrast on amber */
  --bs-primary: #D97706; --bs-primary-rgb: 217,119,6;
  --hourly-bg: #EF4444; --daily-bg: #0EA5E9; --weekly-bg: #059669; --monthly-bg: #8B5CF6;
}
[data-accent="yellow"][data-mode="dark"]  { --bg-a:#1a1205; --bg-b:#1f1608; --bg-c:#0f0a03; }
[data-accent="yellow"][data-mode="light"] { --bg-a:#fffbeb; --bg-b:#fffdf5; --bg-c:#fef3c7; --portal-secondary:#92400e; }

/* ── Teal ───────────────────────────────────────────────── */
[data-accent="teal"] {
  --portal-primary: #0D9488; --portal-primary-rgb: 13,148,136; --portal-secondary: #5eead4;
  --bs-primary: #0D9488; --bs-primary-rgb: 13,148,136;
  --hourly-bg: #F59E0B; --daily-bg: #EC4899; --weekly-bg: #8B5CF6; --monthly-bg: #EF4444;
}
[data-accent="teal"][data-mode="dark"]  { --bg-a:#061412; --bg-b:#081917; --bg-c:#040c0b; }
[data-accent="teal"][data-mode="light"] { --bg-a:#f0fdfa; --bg-b:#f6fffe; --bg-c:#ccfbf1; --portal-secondary:#0f766e; }

/* ── Sunset Orange ──────────────────────────────────────── */
[data-accent="orange"] {
  --portal-primary: #EA580C; --portal-primary-rgb: 234,88,12; --portal-secondary: #fdba74;
  --bs-primary: #EA580C; --bs-primary-rgb: 234,88,12;
  --hourly-bg: #EF4444; --daily-bg: #0EA5E9; --weekly-bg: #8B5CF6; --monthly-bg: #059669;
}
[data-accent="orange"][data-mode="dark"]  { --bg-a:#1a0d05; --bg-b:#1f1007; --bg-c:#0f0803; }
[data-accent="orange"][data-mode="light"] { --bg-a:#fff7ed; --bg-b:#fffaf4; --bg-c:#fed7aa; --portal-secondary:#c2410c; }

/* ── Brown ──────────────────────────────────────────────── */
[data-accent="brown"] {
  --portal-primary: #92400E; --portal-primary-rgb: 146,64,14; --portal-secondary: #d97706;
  --bs-primary: #92400E; --bs-primary-rgb: 146,64,14;
  --hourly-bg: #0EA5E9; --daily-bg: #EC4899; --weekly-bg: #7C3AED; --monthly-bg: #059669;
}
[data-accent="brown"][data-mode="dark"]  { --bg-a:#180e04; --bg-b:#1d1206; --bg-c:#0f0902; }
[data-accent="brown"][data-mode="light"] { --bg-a:#fef9f0; --bg-b:#fefcf7; --bg-c:#fef3c7; --portal-secondary:#78350f; }

/* ── Slate ──────────────────────────────────────────────── */
[data-accent="slate"] {
  --portal-primary: #475569; --portal-primary-rgb: 71,85,105; --portal-secondary: #94a3b8;
  --bs-primary: #475569; --bs-primary-rgb: 71,85,105;
  --hourly-bg: #F59E0B; --daily-bg: #0EA5E9; --weekly-bg: #EC4899; --monthly-bg: #7C3AED;
}
[data-accent="slate"][data-mode="dark"]  { --bg-a:#0a0c10; --bg-b:#0d1016; --bg-c:#07090e; }
[data-accent="slate"][data-mode="light"] { --bg-a:#f8fafc; --bg-b:#fafbfd; --bg-c:#e2e8f0; --portal-secondary:#334155; }

/* ── Indigo ─────────────────────────────────────────────── */
[data-accent="indigo"] {
  --portal-primary: #4338CA; --portal-primary-rgb: 67,56,202; --portal-secondary: #a5b4fc;
  --bs-primary: #4338CA; --bs-primary-rgb: 67,56,202;
  --hourly-bg: #F59E0B; --daily-bg: #EC4899; --weekly-bg: #059669; --monthly-bg: #EF4444;
}
[data-accent="indigo"][data-mode="dark"]  { --bg-a:#080813; --bg-b:#0b0b1c; --bg-c:#05050d; }
[data-accent="indigo"][data-mode="light"] { --bg-a:#eef2ff; --bg-b:#f5f7ff; --bg-c:#e0e7ff; --portal-secondary:#3730a3; }

/* ── Coral ──────────────────────────────────────────────── */
[data-accent="coral"] {
  --portal-primary: #F43F5E; --portal-primary-rgb: 244,63,94; --portal-secondary: #fda4af;
  --bs-primary: #F43F5E; --bs-primary-rgb: 244,63,94;
  --hourly-bg: #8B5CF6; --daily-bg: #0EA5E9; --weekly-bg: #059669; --monthly-bg: #F59E0B;
}
[data-accent="coral"][data-mode="dark"]  { --bg-a:#1a0810; --bg-b:#200b15; --bg-c:#12050b; }
[data-accent="coral"][data-mode="light"] { --bg-a:#fff1f2; --bg-b:#fff7f8; --bg-c:#ffe4e6; --portal-secondary:#be123c; }

/*
 * Custom theme: [data-accent="custom"]
 * All tokens are injected by base.html via a <style>:root{…}</style> block.
 * The mode tokens below still apply automatically from [data-mode="dark|light"].
 */


/* ═══════════════════════════════════════════════════════════════════════════
   2. MODE TOKENS  (shared by all accents)
═══════════════════════════════════════════════════════════════════════════ */

[data-mode="dark"] {
  color-scheme: dark;

  /* Glow opacity for body radial gradients */
  --glow-a: .15; --glow-b: .08;

  /* Glass surfaces */
  --glass-bg:        rgba(255,255,255,.05);
  --glass-bg-2:      rgba(255,255,255,.08);
  --glass-border:    rgba(255,255,255,.09);
  --glass-shadow:    0 8px 32px rgba(0,0,0,.42);

  /* Typography */
  --color-body:      #e2e2ef;
  --color-muted:     rgba(255,255,255,.48);
  --color-heading:   #ffffff;

  /* Navbar */
  --nav-bg:          rgba(0,0,0,.50);
  --nav-border:      rgba(255,255,255,.07);
  --nav-brand:       #ffffff;
  --nav-link:        rgba(255,255,255,.48);
  --nav-link-active: #ffffff;

  /* Form inputs */
  --input-bg:        rgba(255,255,255,.06);
  --input-bg-focus:  rgba(255,255,255,.10);
  --input-border:    rgba(255,255,255,.12);
  --input-color:     #e2e2ef;
  --input-ph:        rgba(255,255,255,.28);
  --input-group-bg:  rgba(255,255,255,.08);

  /* Stat cards & misc */
  --stat-bg:         rgba(255,255,255,.05);
  --stat-value:      #e2e2ef;
  --divider:         rgba(255,255,255,.09);
  --progress-bg:     rgba(255,255,255,.08);
  --btn-close-filter:invert(1) grayscale(1) brightness(1.5);

  /* Card header tints */
  --ch-default-bg:   rgba(255,255,255,.04); --ch-default-c: #e2e2ef;
  --ch-info-bg:      rgba(14,165,233,.16);  --ch-info-c:    #7dd3fc;
  --ch-ok-bg:        rgba(5,150,105,.16);   --ch-ok-c:      #6ee7b7;
  --ch-dark-bg:      rgba(255,255,255,.04); --ch-dark-c:    #e2e2ef;
  --ch-warn-bg:      rgba(217,119,6,.16);   --ch-warn-c:    #fcd34d;

  /* Alert colours */
  --al-info-bg:    rgba(14,165,233,.10);  --al-info-b:    rgba(14,165,233,.28);  --al-info-c:    #7dd3fc;
  --al-ok-bg:      rgba(5,150,105,.10);   --al-ok-b:      rgba(5,150,105,.28);   --al-ok-c:      #6ee7b7;
  --al-warn-bg:    rgba(217,119,6,.10);   --al-warn-b:    rgba(217,119,6,.28);   --al-warn-c:    #fcd34d;
  --al-danger-bg:  rgba(220,38,38,.10);   --al-danger-b:  rgba(220,38,38,.28);   --al-danger-c:  #fca5a5;
  --al-sec-bg:     rgba(255,255,255,.04); --al-sec-b:     rgba(255,255,255,.09); --al-sec-c:     rgba(255,255,255,.50);

  /* Badge colours */
  --badge-ok-bg:   rgba(5,150,105,.28);   --badge-ok-c:   #6ee7b7;
  --badge-warn-bg: rgba(217,119,6,.25);   --badge-warn-c: #fcd34d;
  --badge-danger-bg:rgba(220,38,38,.25);  --badge-danger-c:#fca5a5;
  --badge-info-bg: rgba(14,165,233,.20);  --badge-info-c: #7dd3fc;

  /* Misc */
  --danger-outline-c:   #f87171;
  --danger-outline-b:   rgba(248,113,113,.38);
  --icon-bg:  rgba(var(--portal-primary-rgb),.16);
  --icon-border: rgba(var(--portal-primary-rgb),.26);
  --icon-color: var(--portal-secondary);
}

[data-mode="light"] {
  color-scheme: light;

  --glow-a: .07; --glow-b: .04;

  --glass-bg:        rgba(255,255,255,.76);
  --glass-bg-2:      rgba(255,255,255,.90);
  --glass-border:    rgba(0,0,0,.09);
  --glass-shadow:    0 4px 24px rgba(0,0,0,.09);

  --color-body:      #1a1a2e;
  --color-muted:     #6b7280;
  --color-heading:   #0f0f1e;

  --nav-bg:          rgba(255,255,255,.80);
  --nav-border:      rgba(0,0,0,.07);
  --nav-brand:       #0f0f1e;
  --nav-link:        #6b7280;
  --nav-link-active: #0f0f1e;

  --input-bg:        rgba(255,255,255,.92);
  --input-bg-focus:  #ffffff;
  --input-border:    rgba(0,0,0,.14);
  --input-color:     #1a1a2e;
  --input-ph:        #9ca3af;
  --input-group-bg:  #f3f4f6;

  --stat-bg:         rgba(0,0,0,.03);
  --stat-value:      #1a1a2e;
  --divider:         rgba(0,0,0,.09);
  --progress-bg:     rgba(0,0,0,.08);
  --btn-close-filter:none;

  --ch-default-bg:   rgba(0,0,0,.02);    --ch-default-c: #1a1a2e;
  --ch-info-bg:      rgba(14,165,233,.09); --ch-info-c:  #0369a1;
  --ch-ok-bg:        rgba(5,150,105,.09);  --ch-ok-c:    #15803d;
  --ch-dark-bg:      rgba(0,0,0,.04);    --ch-dark-c:   #1a1a2e;
  --ch-warn-bg:      rgba(217,119,6,.10);  --ch-warn-c:  #92400e;

  --al-info-bg:    rgba(14,165,233,.08);  --al-info-b:    rgba(14,165,233,.28);  --al-info-c:    #0369a1;
  --al-ok-bg:      rgba(5,150,105,.08);   --al-ok-b:      rgba(5,150,105,.28);   --al-ok-c:      #15803d;
  --al-warn-bg:    rgba(217,119,6,.10);   --al-warn-b:    rgba(217,119,6,.28);   --al-warn-c:    #92400e;
  --al-danger-bg:  rgba(220,38,38,.08);   --al-danger-b:  rgba(220,38,38,.28);   --al-danger-c:  #b91c1c;
  --al-sec-bg:     rgba(0,0,0,.03);       --al-sec-b:     rgba(0,0,0,.10);       --al-sec-c:     #4b5563;

  --badge-ok-bg:   rgba(5,150,105,.12);   --badge-ok-c:   #15803d;
  --badge-warn-bg: rgba(217,119,6,.15);   --badge-warn-c: #92400e;
  --badge-danger-bg:rgba(220,38,38,.12);  --badge-danger-c:#b91c1c;
  --badge-info-bg: rgba(14,165,233,.12);  --badge-info-c: #0369a1;

  --danger-outline-c:  #dc2626;
  --danger-outline-b:  rgba(220,38,38,.35);
  --icon-bg:    rgba(var(--portal-primary-rgb),.10);
  --icon-border:rgba(var(--portal-primary-rgb),.18);
  --icon-color: var(--portal-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. COMPONENTS
═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ────────────────────────────────────────────────── */
html, body { min-height: 100vh; }

body {
    background:
        radial-gradient(ellipse at 20% 0%,   rgba(var(--portal-primary-rgb), var(--glow-a)) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(var(--portal-primary-rgb), var(--glow-b)) 0%, transparent 55%),
        linear-gradient(160deg, var(--bg-a) 0%, var(--bg-b) 50%, var(--bg-c) 100%);
    background-attachment: fixed;
    color: var(--color-body);
    /* No background transition — CSS gradients via variables snap, not interpolate */
    transition: color .15s;
}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
    background: var(--nav-bg) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border) !important;
    box-shadow: none !important;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--nav-brand) !important;
}

.nav-link { color: var(--nav-link) !important; transition: color .15s; }
.nav-link:hover, .nav-link.active { color: var(--nav-link-active) !important; }

/* Hamburger toggler works on both modes */
.navbar-toggler { border-color: var(--divider) !important; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(160,160,180,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
[data-mode="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30,30,60,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--glass-shadow) !important;
    color: var(--color-body);
    transition: border-color .15s;
}

.card-header {
    background: var(--ch-default-bg) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: 1rem 1rem 0 0 !important;
    padding: .85rem 1.25rem;
    color: var(--ch-default-c) !important;
}

.card-header.bg-info    { background: var(--ch-info-bg) !important; color: var(--ch-info-c) !important; }
.card-header.bg-success { background: var(--ch-ok-bg)   !important; color: var(--ch-ok-c)   !important; }
.card-header.bg-dark    { background: var(--ch-dark-bg)  !important; color: var(--ch-dark-c)  !important; }
.card-header.bg-warning { background: var(--ch-warn-bg)  !important; color: var(--ch-warn-c)  !important; }

/* Nested cards get slightly lighter glass */
.card .card {
    background: var(--glass-bg-2) !important;
    border-color: var(--divider) !important;
    border-radius: .75rem !important;
    box-shadow: none !important;
}

/* ── Network logo ────────────────────────────────────────── */
.network-title { text-align: center; margin: 1.5rem 0; }
.network-logo  {
    max-height: 72px;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    margin-bottom: 1rem;
    border-radius: .75rem;
}

@media (max-width: 576px) {
    .network-logo { max-height: 56px; }
    .card-body    { padding: 1rem; }
}

/* ── Forms ───────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: .6rem !important;
    color: var(--input-color) !important;
    transition: border-color .15s, box-shadow .15s, background-color .2s;
}

.form-control::placeholder { color: var(--input-ph) !important; }

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg-focus) !important;
    border-color: var(--portal-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--portal-primary-rgb), .18) !important;
    color: var(--input-color) !important;
}

.form-label {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: .35rem;
}

.input-group-text {
    background: var(--input-group-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--color-body) !important;
    border-radius: .6rem 0 0 .6rem !important;
}

.form-check-input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}
.form-check-input:checked {
    background-color: var(--portal-primary) !important;
    border-color: var(--portal-primary) !important;
}
.form-check-label { color: var(--color-muted); font-size: .875rem; }
.form-text        { color: var(--color-muted) !important; }

/* IntlTelInput */
.iti { width: 100%; }
.input-group .country-code { width: 130px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    border-radius: 2rem;
    font-weight: 600;
    font-size: .875rem;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:active { transform: scale(.97); }

.btn-primary {
    background: linear-gradient(135deg,
        rgba(var(--portal-primary-rgb), 1)   0%,
        rgba(var(--portal-primary-rgb), .78) 100%);
    border: none;
    color: var(--btn-primary-text, #fff) !important;
    box-shadow: 0 4px 16px rgba(var(--portal-primary-rgb), .30);
}
.btn-primary:hover,
.btn-primary:focus {
    box-shadow: 0 6px 22px rgba(var(--portal-primary-rgb), .44);
    transform: translateY(-1px);
    color: var(--btn-primary-text, #fff) !important;
}

.btn-outline-primary {
    color: var(--portal-secondary) !important;
    border-color: rgba(var(--portal-primary-rgb), .45) !important;
}
.btn-outline-primary:hover {
    background: rgba(var(--portal-primary-rgb), .12) !important;
    border-color: var(--portal-primary) !important;
    color: var(--portal-primary) !important;
    transform: translateY(-1px);
}

.current-plan-badge {
    display: inline-block;
    padding: .45rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    background: var(--portal-primary) !important;
    color: var(--btn-primary-text, #fff) !important;
}

.btn-outline-secondary {
    color: var(--color-muted) !important;
    border-color: var(--divider) !important;
}
.btn-outline-secondary:hover {
    background: var(--glass-bg-2) !important;
    color: var(--color-body) !important;
}

.btn-outline-danger {
    color: var(--danger-outline-c) !important;
    border-color: var(--danger-outline-b) !important;
}
.btn-outline-danger:hover {
    background: rgba(220, 38, 38, .08) !important;
    color: var(--danger-outline-c) !important;
}

.btn-link { color: var(--color-muted) !important; }
.btn-link:hover { color: var(--color-body) !important; }

/* ── Dropdowns ───────────────────────────────────────────── */
.dropdown-menu {
    background: var(--glass-bg-2) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border) !important;
    border-radius: .75rem !important;
    box-shadow: var(--glass-shadow) !important;
    padding: .35rem !important;
}

.dropdown-item {
    color: var(--color-body) !important;
    border-radius: .5rem;
    font-size: .875rem;
    white-space: normal;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(var(--portal-primary-rgb), .12) !important;
    color: var(--color-body) !important;
}

.dropdown-item:active {
    background: rgba(var(--portal-primary-rgb), .22) !important;
    color: var(--color-body) !important;
}

.dropdown-divider {
    border-color: var(--glass-border) !important;
    margin: .25rem .5rem !important;
}

/* ── Alerts ──────────────────────────────────────────────── */
.alert { border-radius: .75rem; border: 1px solid; font-size: .875rem; }
.alert strong, .alert b, .alert-heading { color: inherit !important; }
.btn-close { filter: var(--btn-close-filter) !important; }

.alert-info      { background: var(--al-info-bg)   !important; border-color: var(--al-info-b)   !important; color: var(--al-info-c)   !important; }
.alert-success   { background: var(--al-ok-bg)     !important; border-color: var(--al-ok-b)     !important; color: var(--al-ok-c)     !important; }
.alert-warning   { background: var(--al-warn-bg)   !important; border-color: var(--al-warn-b)   !important; color: var(--al-warn-c)   !important; }
.alert-danger    { background: var(--al-danger-bg) !important; border-color: var(--al-danger-b) !important; color: var(--al-danger-c) !important; }
.alert-secondary { background: var(--al-sec-bg)    !important; border-color: var(--al-sec-b)    !important; color: var(--al-sec-c)    !important; }

/* Bare text-success (paybill numbers, wallet credit, etc.) was still raw
   Bootstrap green in both modes - card-header/alert/badge green already
   go through mode-aware tokens, this didn't. */
.text-success { color: var(--al-ok-c) !important; }

/* ── Badges ──────────────────────────────────────────────── */
.badge.bg-success { background: var(--badge-ok-bg)     !important; color: var(--badge-ok-c)     !important; }
.badge.bg-warning { background: var(--badge-warn-bg)   !important; color: var(--badge-warn-c)   !important; }
.badge.bg-danger  { background: var(--badge-danger-bg) !important; color: var(--badge-danger-c) !important; }
.badge.bg-info    { background: var(--badge-info-bg)   !important; color: var(--badge-info-c)   !important; }

/* Discount badge on package cards: always crisp dark text on yellow pill */
.badge.bg-warning.text-dark {
    background: rgba(250, 204, 21, .90) !important;
    color: #1a1a1a !important;
}

/* ── Progress ────────────────────────────────────────────── */
.progress { background: var(--progress-bg) !important; border-radius: 2rem !important; }

/* ── Typography ──────────────────────────────────────────── */
.text-muted { color: var(--color-muted) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--color-heading); }
a:not(.btn):not(.nav-link) { color: var(--portal-secondary); text-decoration: none; }
a:not(.btn):not(.nav-link):hover { color: var(--portal-primary); }
hr, .border-top { border-color: var(--divider) !important; }

/* ── Stat card (voucher/pppoe dashboards) ────────────────── */
.stat-card {
    background: var(--stat-bg);
    border: 1px solid var(--glass-border);
    border-radius: .75rem;
    padding: 1rem;
    text-align: center;
}
.stat-card .stat-value { font-size: 1.25rem; font-weight: 700; color: var(--stat-value); }
.stat-card .stat-label { font-size: .75rem; color: var(--color-muted); margin-top: .25rem; }

/* ── Icon badge (login page header icons) ────────────────── */
.portal-icon-badge {
    width: 56px; height: 56px;
    border-radius: 1rem;
    background: var(--icon-bg);
    border: 1px solid var(--icon-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}
.portal-icon-badge i { font-size: 1.6rem; color: var(--icon-color); }

/* ── Accent lines ────────────────────────────────────────── */
.package-accent { border-left: 3px solid var(--portal-primary); }
.package-details { border-left: 4px solid var(--portal-primary); padding-left: 15px; }

/* ── Toast / clipboard ───────────────────────────────────── */
.toast        { background-color: var(--glass-bg);  color: var(--color-body); border: 1px solid var(--glass-border); }
.toast-header { background-color: var(--glass-bg-2); color: var(--color-body); border-bottom: 1px solid var(--glass-border); }

/* ── Voucher code display ────────────────────────────────── */
.display-4.fw-bold { letter-spacing: .05em; }

/* ── Validation ──────────────────────────────────────────── */
.invalid-feedback { font-size: .875em; color: var(--al-danger-c); }


/* ═══════════════════════════════════════════════════════════════════════════
   4. PACKAGE CARDS
   Self-contained — render identically on dark and light page themes.
   Colours come from [data-accent] tokens (or :root for custom theme).
   No overrides from the old per-card admin colour fields are applied;
   the theme drives everything here.
═══════════════════════════════════════════════════════════════════════════ */

.package-card {
    transition: transform .2s, box-shadow .2s;
    border: none !important;
    border-radius: .9rem !important;
    /* Disable glass effect — cards have solid vivid backgrounds */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.package-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .30) !important;
}

.hourly-card  { background-color: var(--hourly-bg)  !important; }
.daily-card   { background-color: var(--daily-bg)   !important; }
.weekly-card  { background-color: var(--weekly-bg)  !important; }
.monthly-card { background-color: var(--monthly-bg) !important; }

.hourly-card,
.daily-card,
.weekly-card,
.monthly-card {
    color: #fff !important;
    border: 1px solid rgba(0, 0, 0, .14) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .40);
}

.hourly-card  *,
.daily-card   *,
.weekly-card  *,
.monthly-card * { color: #fff !important; }

/* Discount percentage badge stays dark-text on its yellow pill */
.hourly-card  .text-dark,
.daily-card   .text-dark,
.weekly-card  .text-dark,
.monthly-card .text-dark { color: #1a1a1a !important; text-shadow: none; }

/* Ensure text colour is preserved when card is wrapped in <a> */
a .package-card { color: inherit; }
a:hover .package-card { text-decoration: none; }

/* Radio-backed package picker (change-subscription flow) — replaces a
   native <select> with the same card visual language used elsewhere. */
.package-select-card { cursor: pointer; position: relative; }
.package-select-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.package-select-card .package-select-check {
    position: absolute;
    top: .6rem;
    right: .6rem;
    font-size: 1.1rem;
    color: #fff;
    opacity: 0;
    transition: opacity .15s;
}
.package-select-card input[type="radio"]:checked + .package-card {
    outline: 3px solid var(--portal-primary);
    outline-offset: 2px;
}
.package-select-card input[type="radio"]:checked + .package-card .package-select-check {
    opacity: 1;
}
.package-select-card input[type="radio"]:focus-visible + .package-card {
    outline: 3px solid var(--portal-primary);
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. MODALS
═══════════════════════════════════════════════════════════════════════════ */

.modal-content {
    background: var(--glass-bg-2) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--glass-shadow) !important;
    color: var(--color-body);
}
.modal-header {
    border-bottom: 1px solid var(--glass-border) !important;
    background: transparent !important;
}
.modal-footer {
    border-top: 1px solid var(--glass-border) !important;
    background: transparent !important;
}
.modal-title { color: var(--color-heading); }
.modal-header .btn-close { filter: var(--btn-close-filter) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   6. LIST GROUPS
═══════════════════════════════════════════════════════════════════════════ */

.list-group-item {
    background: transparent !important;
    border-color: var(--glass-border) !important;
    color: var(--color-body);
}
.list-group-flush .list-group-item { border-radius: 0 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   7. TABLES
═══════════════════════════════════════════════════════════════════════════ */

.table { color: var(--color-body); --bs-table-bg: transparent; }
.table > :not(caption) > * > * {
    background: transparent !important;
    color: var(--color-body);
    border-bottom-color: var(--divider) !important;
}
.table-warning > * { background: rgba(217,119,6,.12) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   8. MISC
═══════════════════════════════════════════════════════════════════════════ */

code {
    color: var(--portal-secondary);
    background: var(--stat-bg);
    padding: .1em .35em;
    border-radius: .25rem;
    font-size: .875em;
}

/* ── Theme toggle (fixed floating button, always visible) ──── */
.portal-theme-toggle {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1050;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-muted);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background .2s, color .2s, transform .15s, box-shadow .2s;
    box-shadow: var(--glass-shadow);
}
.portal-theme-toggle:hover {
    color: var(--portal-secondary);
    background: var(--glass-bg);
    transform: scale(1.12);
}

/* Card footer */
.card-footer {
    background: var(--ch-default-bg) !important;
    border-top: 1px solid var(--glass-border) !important;
    border-radius: 0 0 1rem 1rem !important;
}