/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  CursosPRO — Global Design System v2                            ║
 * ║  Palette: Purple (#7c3aed) · Dark Navy (#07071a) · Orange (#f97316) ║
 * ║  Sistema de tokens semânticos — personalizável por tenant       ║
 * ╚══════════════════════════════════════════════════════════════════╝
 */

/* ══════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (single source of truth)
   ══════════════════════════════════════════════════════════ */
:root {
    /* ── Paleta fixa (accent / status colors) ── */
    --neon-purple:  #7c3aed;
    --neon-violet:  #9333ea;
    --neon-indigo:  #4f46e5;
    --neon-orange:  #f97316;
    --neon-amber:   #fbbf24;
    --neon-green:   #22c55e;
    --neon-red:     #ef4444;
    --neon-cyan:    #22d3ee;  /* mantido para badges/status */
    --neon-pink:    #ec4899;  /* mantido para badges/status */

    /* ══════════════════════════════════════════════
       TOKENS SEMÂNTICOS — SOBRESCRITOS POR TENANT
       via _tenant_theme.blade.php  (<style> inline)
       ══════════════════════════════════════════════ */
    --theme-primary:       #7c3aed;    /* Cor principal da marca */
    --theme-primary-light: #9333ea;    /* Tom mais claro */
    --theme-primary-dark:  #5b21b6;    /* Tom mais escuro */
    --theme-cta:           #f97316;    /* Cor de ação / botão CTA */
    --theme-cta-dark:      #ea580c;    /* CTA hover/pressed */

    /* Glows derivados dos tokens (atualizados pelo tenant_theme) */
    --theme-glow-primary:  0 0 32px rgba(124, 58, 237, 0.45);
    --theme-glow-cta:      0 0 32px rgba(249, 115, 22, 0.45);

    /* Gradientes derivados dos tokens */
    --grad-brand:   linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    --grad-cta:     linear-gradient(135deg, var(--theme-cta), var(--theme-cta-dark));
    --grad-brand-cta: linear-gradient(135deg, var(--theme-primary), var(--theme-cta));

    /* Background layers — dark navy */
    --bg-base:     #07071a;
    --bg-surface:  #0d0d24;
    --bg-surface2: #13132e;
    --bg-surface3: #1a1a3c;

    /* Borders */
    --border-subtle: #1c1c38;
    --border-base:   #252550;
    --border-strong: #32325e;

    /* Text */
    --text-base:  #f0f0fa;
    --text-muted: #7878a0;
    --text-dim:   #44445a;

    /* Gradients (decorativos / compatibilidade) */
    --grad-neon:    linear-gradient(135deg, var(--theme-primary), var(--neon-indigo), var(--theme-cta));
    --grad-purple:  linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    --grad-warm:    linear-gradient(135deg, var(--theme-cta), var(--theme-primary));
    --grad-main:    linear-gradient(135deg, var(--theme-primary), var(--neon-indigo));
    --grad-alt:     linear-gradient(135deg, var(--theme-primary), var(--theme-cta));

    /* Shadows */
    --glow-purple: var(--theme-glow-primary);
    --glow-cyan:   0 0 24px rgba(79, 70, 229, 0.4);
    --glow-pink:   0 0 24px rgba(249, 115, 22, 0.35);

    /* Button system */
    --grad-button:       var(--grad-brand);
    --grad-button-hover: linear-gradient(135deg, var(--theme-primary-dark), #3b0764);
    --btn-glow:          var(--theme-glow-primary);

    /* Aliases legados */
    --cp-primary:  var(--theme-primary);
    --cp-cyan:     var(--neon-indigo);
    --cp-pink:     var(--theme-cta);
    --cp-dark:     var(--bg-base);
    --cp-surface:  var(--bg-surface);
    --cp-surface2: var(--bg-surface2);
    --cp-border:   var(--border-subtle);
    --cp-border2:  var(--border-base);
    --cp-text:     var(--text-base);
    --cp-muted:    var(--text-muted);

    /* Landing-page aliases */
    --brand-primary:  var(--theme-primary);
    --brand-cyan:     var(--neon-indigo);
    --brand-pink:     var(--theme-cta);
    --brand-dark:     var(--bg-base);
    --brand-surface:  var(--bg-surface);
    --brand-surface2: var(--bg-surface2);
    --brand-border:   var(--border-subtle);
    --brand-border2:  var(--border-base);
    --brand-text:     var(--text-base);
    --brand-muted:    var(--text-muted);
}

html[data-bs-theme="light"] {
    --bg-base:     #f5f5ff;
    --bg-surface:  #ffffff;
    --bg-surface2: #f0f0fc;
    --bg-surface3: #e8e8f8;

    --border-subtle: #e0e0f0;
    --border-base:   #d0d0e8;
    --border-strong: #c0c0d8;

    --text-base:  #0f0f2e;
    --text-muted: #5a5a80;
    --text-dim:   #9494b8;

    --cp-dark:     var(--bg-base);
    --cp-surface:  var(--bg-surface);
    --cp-surface2: var(--bg-surface2);
    --cp-border:   var(--border-subtle);
    --cp-border2:  var(--border-base);
    --cp-text:     var(--text-base);
    --cp-muted:    var(--text-muted);

    --brand-dark:     var(--bg-base);
    --brand-surface:  var(--bg-surface);
    --brand-surface2: var(--bg-surface2);
    --brand-border:   var(--border-subtle);
    --brand-border2:  var(--border-base);
    --brand-text:     var(--text-base);
    --brand-muted:    var(--text-muted);
}


/* ══════════════════════════════════════════════════════════
   2. BASE RESET
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-base);
    color: var(--text-base);
    line-height: 1.6;
    overflow-x: hidden;
}

html[data-bs-theme="light"] body {
    background: var(--bg-base);
    color: var(--text-base);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-purple); }


/* ══════════════════════════════════════════════════════════
   3. ANIMATION KEYFRAMES
   ══════════════════════════════════════════════════════════ */
@keyframes neon-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes neon-pulse {
    0%, 100% { opacity: .45; }
    50%       { opacity: 1; }
}
@keyframes neon-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}


/* ══════════════════════════════════════════════════════════
   4. UTILITY CLASSES
   ══════════════════════════════════════════════════════════ */

/* ── Glow card (gradient border) ── */
.glow-card {
    position: relative;
    border-radius: 14px;
    background: var(--bg-surface);
    border: none !important;
}
.glow-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-brand-cta);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .45;
    transition: opacity .3s;
    pointer-events: none;
}
.glow-card:hover::before { opacity: 1; }

/* ── CTA card — borda laranja ── */
.cta-card {
    position: relative;
    border-radius: 14px;
    background: var(--bg-surface);
    border: none !important;
}
.cta-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-cta);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .55;
    transition: opacity .3s;
    pointer-events: none;
}
.cta-card:hover::before { opacity: 1; }

/* ── Gradient text ── */
.text-neon {
    background: var(--grad-brand-cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-neon-purple  { color: var(--theme-primary)  !important; }
.text-neon-primary { color: var(--theme-primary)  !important; }
.text-neon-orange  { color: var(--theme-cta)      !important; }
.text-neon-cta     { color: var(--theme-cta)      !important; }
.text-neon-cyan    { color: var(--neon-cyan)       !important; }
.text-neon-pink    { color: var(--neon-pink)       !important; }
.text-brand { color: var(--theme-primary) !important; }
.text-cta   { color: var(--theme-cta)    !important; }

/* ── Neon border ── */
.border-neon {
    border: 1px solid transparent !important;
    background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
                var(--grad-brand-cta) border-box;
}
.border-brand {
    border: 1px solid transparent !important;
    background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
                var(--grad-brand) border-box;
}
.border-cta {
    border: 1px solid transparent !important;
    background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
                var(--grad-cta) border-box;
}

/* ── Section eyebrow ── */
.section-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    background: var(--grad-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: .75rem;
    display: inline-block;
}
.section-title {
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}
.section-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto 3rem;
}


/* ══════════════════════════════════════════════════════════
   5. BOOTSTRAP OVERRIDES — CARDS
   ══════════════════════════════════════════════════════════ */
.card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-base) !important;
    border-radius: 12px !important;
}
.card-header {
    background: var(--bg-surface2) !important;
    border-bottom: 1px solid var(--border-base) !important;
}
.card-footer {
    background: var(--bg-surface2) !important;
    border-top: 1px solid var(--border-base) !important;
}


/* ══════════════════════════════════════════════════════════
   6. BOOTSTRAP OVERRIDES — BUTTONS
   ══════════════════════════════════════════════════════════ */

/* ── Button system — Purple brand + Orange CTA ── */
:root {
    --btn-font-size:      .75rem;
    --btn-font-weight:    700;
    --btn-letter-spacing: .02em;
    --btn-padding:        .72rem 1.35rem;
    --btn-radius:         12px;
    --btn-height:         52px;
    --btn-brand-bg:       linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary));
    --btn-brand-shadow:   0 14px 30px color-mix(in srgb, var(--theme-primary) 40%, transparent);
    --btn-brand-shadow-hover: 0 18px 36px color-mix(in srgb, var(--theme-primary) 52%, transparent);
}

/* Base .btn typography reset — applies to ALL buttons */
.btn {
    font-size:      var(--btn-font-size) !important;
    font-weight:    var(--btn-font-weight) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    padding:        var(--btn-padding) !important;
    border-radius:  var(--btn-radius) !important;
    min-height:     var(--btn-height);
    font-family:    'Inter', sans-serif !important;
    transition:     transform .18s ease, box-shadow .18s ease, opacity .18s ease !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}

/* .btn-sm — even tighter */
.btn-sm {
    font-size:   .7rem !important;
    padding:     .3rem .75rem !important;
    border-radius: 6px !important;
    min-height: 38px;
}

/* .btn-lg — slightly larger but still elegant */
.btn-lg {
    font-size:   .98rem !important;
    padding:     .9rem 1.7rem !important;
    border-radius: 14px !important;
    min-height: 58px;
}

/* ── Primary — purple brand gradient ── */
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background:   var(--btn-brand-bg) !important;
    border:       none !important;
    color:        #fff !important;
    box-shadow:   var(--btn-brand-shadow) !important;
}
.btn-primary:hover {
    background:   linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark)) !important;
    box-shadow:   var(--btn-brand-shadow-hover) !important;
    transform:    translateY(-1px) !important;
    color:        #fff !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
    opacity: .45 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── CTA — orange action gradient ── */
.btn-cta,
.btn-cta:focus,
.btn-cta:active,
.btn-cta.active {
    background:   var(--grad-cta) !important;
    border:       none !important;
    color:        #fff !important;
    box-shadow:   0 4px 20px rgba(249,115,22,.3) !important;
}
.btn-cta:hover {
    box-shadow:   var(--theme-glow-cta) !important;
    transform:    translateY(-1px) !important;
    opacity:      .92 !important;
    color:        #fff !important;
}
.btn-cta:disabled,
.btn-cta.disabled {
    opacity: .45 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Outline primary ── */
.btn-outline-primary {
    border:      1px solid color-mix(in srgb, var(--theme-primary) 55%, white 10%) !important;
    color:       #f5ecff !important;
    background:  rgba(124,58,237,.12) !important;
}
.btn-outline-primary:hover {
    background:  var(--btn-brand-bg) !important;
    border-color: transparent !important;
    color:       #fff !important;
    box-shadow:  var(--btn-brand-shadow) !important;
    transform:   translateY(-1px) !important;
}

/* ── Outline CTA ── */
.btn-outline-cta {
    border:      1px solid var(--theme-cta) !important;
    color:       var(--theme-cta) !important;
    background:  transparent !important;
}
.btn-outline-cta:hover {
    background:  var(--grad-cta) !important;
    border-color: transparent !important;
    color:       #fff !important;
    box-shadow:  var(--theme-glow-cta) !important;
    transform:   translateY(-1px) !important;
}

/* ── Secondary ── */
.btn-secondary {
    background:  var(--bg-surface2) !important;
    border:      1px solid var(--border-base) !important;
    color:       var(--text-base) !important;
}
.btn-secondary:hover {
    background:  var(--bg-surface3) !important;
    border-color: var(--border-strong) !important;
    color:       var(--text-base) !important;
}

/* ── Outline secondary ── */
.btn-outline-secondary {
    border-color: var(--border-strong) !important;
    color:        var(--text-muted) !important;
    background:   transparent !important;
}
.btn-outline-secondary:hover {
    background:   var(--bg-surface2) !important;
    border-color: var(--border-strong) !important;
    color:        var(--text-base) !important;
}

/* ── Danger ── */
.btn-danger {
    background: rgba(239,68,68,.12) !important;
    border:     1px solid rgba(239,68,68,.28) !important;
    color:      #f87171 !important;
}
.btn-danger:hover {
    background: rgba(239,68,68,.22) !important;
    box-shadow: 0 0 14px rgba(239,68,68,.28) !important;
    color:      #fff !important;
    transform:  translateY(-1px) !important;
}

/* ── Success ── */
.btn-success {
    background: rgba(34,197,94,.12) !important;
    border:     1px solid rgba(34,197,94,.28) !important;
    color:      #4ade80 !important;
}
.btn-success:hover {
    background: rgba(34,197,94,.22) !important;
    box-shadow: 0 0 14px rgba(74,222,128,.25) !important;
    color:      #fff !important;
    transform:  translateY(-1px) !important;
}
.btn-success:disabled {
    opacity: .45 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Warning ── */
.btn-warning {
    background: rgba(251,191,36,.12) !important;
    border:     1px solid rgba(251,191,36,.28) !important;
    color:      #fbbf24 !important;
}
.btn-warning:hover {
    background: rgba(251,191,36,.22) !important;
    box-shadow: 0 0 14px rgba(251,191,36,.22) !important;
    color:      #fff !important;
    transform:  translateY(-1px) !important;
}

/* ── Brand (purple→orange — identidade visual) ── */
.btn-brand {
    background:    var(--btn-brand-bg);
    border:        none;
    border-radius: 12px;
    color:         #fff;
    font-family:   'Inter', sans-serif;
    font-size:     .95rem;
    font-weight:   800;
    letter-spacing:.01em;
    padding:       .82rem 1.55rem;
    min-height:    54px;
    cursor:        pointer;
    text-decoration: none;
    display:       inline-flex;
    align-items:   center;
    justify-content:center;
    gap:           .6rem;
    transition:    transform .22s, box-shadow .22s, opacity .22s;
    box-shadow:    var(--btn-brand-shadow);
}
.btn-brand:hover {
    box-shadow:  var(--btn-brand-shadow-hover);
    transform:   translateY(-2px);
    color:       #fff;
}

/* ── Mono labels / kbd / code ── JetBrains Mono ── */
code, kbd, pre, .font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    font-size: .82em;
}
.btn-brand-lg { padding: .85rem 2.2rem; font-size: 1rem; font-weight: 700; border-radius: 10px; letter-spacing: .4px; }
.btn-outline-brand {
    background: rgba(124,58,237,.12);
    color: #f5ecff;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 55%, white 10%);
    border-radius: 12px;
    font-weight: 700;
    padding: .78rem 1.45rem;
    font-size: .92rem;
    transition: all .25s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    box-shadow: 0 0 0 0 rgba(168,85,247,0);
}
.btn-outline-brand:hover {
    background: var(--btn-brand-bg);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--btn-brand-shadow);
}


/* ══════════════════════════════════════════════════════════
   7. FORMS
   ══════════════════════════════════════════════════════════ */
.form-control,
.form-select,
.input-group-text {
    background: var(--bg-surface2) !important;
    border-color: var(--border-base) !important;
    color: var(--text-base) !important;
    border-radius: 8px;
}
.form-control:focus,
.form-select:focus {
    background: var(--bg-surface2) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,.18) !important;
    color: var(--text-base) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
.form-label {
    color: var(--text-muted);
    font-size: .875rem;
    font-weight: 500;
}
.form-check-input {
    background-color: var(--bg-surface2) !important;
    border-color: var(--border-base) !important;
}
.form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}
.input-group-text {
    color: var(--text-muted) !important;
}


/* ══════════════════════════════════════════════════════════
   8. TABLES
   ══════════════════════════════════════════════════════════ */
.table { color: var(--text-base); }
.table thead th {
    background: var(--bg-surface2);
    border-color: var(--border-base);
    color: var(--text-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
.table tbody td { border-color: var(--border-subtle); }
.table-hover tbody tr:hover { background: rgba(124,58,237,.05) !important; }
.table-dark {
    --bs-table-bg: var(--bg-surface) !important;
    --bs-table-border-color: var(--border-base) !important;
    --bs-table-hover-bg: rgba(124,58,237,.07) !important;
}


/* ══════════════════════════════════════════════════════════
   9. BADGES
   ══════════════════════════════════════════════════════════ */
.badge.bg-primary   { background: rgba(124,58,237,.18) !important; color: #a78bfa !important; border: 1px solid rgba(124,58,237,.3) !important; }
.badge.bg-success   { background: rgba(34,197,94,.15)  !important; color: #22c55e !important; border: 1px solid rgba(34,197,94,.25) !important; }
.badge.bg-danger    { background: rgba(239,68,68,.15)  !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,.25) !important; }
.badge.bg-warning   { background: rgba(251,191,36,.15) !important; color: #fbbf24 !important; border: 1px solid rgba(251,191,36,.25) !important; }
.badge.bg-info      { background: rgba(34,211,238,.15) !important; color: #22d3ee !important; border: 1px solid rgba(34,211,238,.25) !important; }
.badge.bg-secondary { background: var(--border-base)   !important; color: var(--text-muted) !important; }


/* ══════════════════════════════════════════════════════════
   10. ALERTS
   ══════════════════════════════════════════════════════════ */
.alert-success {
    background: rgba(34,197,94,.08) !important;
    border-color: rgba(34,197,94,.25) !important;
    color: #22c55e !important;
}
.alert-danger {
    background: rgba(239,68,68,.08) !important;
    border-color: rgba(239,68,68,.25) !important;
    color: #f87171 !important;
}
.alert-warning {
    background: rgba(251,191,36,.08) !important;
    border-color: rgba(251,191,36,.25) !important;
    color: #fbbf24 !important;
}
.alert-info {
    background: rgba(34,211,238,.08) !important;
    border-color: rgba(34,211,238,.25) !important;
    color: #22d3ee !important;
}
.alert-secondary {
    background: var(--bg-surface2) !important;
    border-color: var(--border-base) !important;
    color: var(--text-muted) !important;
}
.btn-close { filter: invert(1) grayscale(1); }

html[data-bs-theme="light"] .btn-close { filter: none; }


/* ══════════════════════════════════════════════════════════
   11. DROPDOWNS
   ══════════════════════════════════════════════════════════ */
.dropdown-menu {
    background: var(--bg-surface2) !important;
    border: 1px solid var(--border-base) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.8) !important;
    padding: .5rem !important;
}
.dropdown-item {
    color: var(--text-base) !important;
    border-radius: 8px !important;
    font-size: .875rem !important;
    padding: .55rem .85rem !important;
    transition: background .15s !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(124,58,237,.1) !important;
    color: var(--text-base) !important;
}
.dropdown-divider { border-color: var(--border-base) !important; }


/* ══════════════════════════════════════════════════════════
   12. PROGRESS
   ══════════════════════════════════════════════════════════ */
.progress {
    background: var(--border-base);
    border-radius: 100px;
    overflow: hidden;
}
.progress-bar {
    background: var(--grad-brand);
    border-radius: 100px;
}
.progress-bar.progress-cta {
    background: var(--grad-cta);
}


/* ══════════════════════════════════════════════════════════
   13. ACCORDION
   ══════════════════════════════════════════════════════════ */
.accordion-item {
    background: var(--bg-surface) !important;
    border-color: var(--border-base) !important;
    border-radius: 10px !important;
    margin-bottom: .4rem;
    overflow: hidden;
}
.accordion-button {
    background: var(--bg-surface2) !important;
    color: var(--text-base) !important;
    font-weight: 500;
}
.accordion-button:not(.collapsed) {
    background: rgba(124,58,237,.1) !important;
    color: var(--theme-primary) !important;
    box-shadow: none !important;
}
.accordion-button::after { filter: invert(1); }
.accordion-body {
    background: var(--bg-surface) !important;
    color: var(--text-muted);
    font-size: .9rem;
}


/* ══════════════════════════════════════════════════════════
   14. LIST GROUP
   ══════════════════════════════════════════════════════════ */
.list-group-item {
    background: var(--bg-surface) !important;
    border-color: var(--border-base) !important;
    color: var(--text-base) !important;
}
.list-group-item.active {
    background: rgba(124,58,237,.15) !important;
    border-color: rgba(124,58,237,.35) !important;
    color: #a78bfa !important;
}
.list-group-item:hover { background: rgba(124,58,237,.06) !important; }


/* ══════════════════════════════════════════════════════════
   15. MODALS
   ══════════════════════════════════════════════════════════ */
.modal-content {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-base) !important;
    border-radius: 16px !important;
}
.modal-header {
    border-bottom: 1px solid var(--border-base) !important;
    background: var(--bg-surface2) !important;
    border-radius: 15px 15px 0 0 !important;
}
.modal-footer {
    border-top: 1px solid var(--border-base) !important;
    background: var(--bg-surface2) !important;
    border-radius: 0 0 15px 15px !important;
}
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .75; }

html[data-bs-theme="light"] .modal-backdrop {
    --bs-backdrop-bg: #e2e8f0;
    --bs-backdrop-opacity: .55;
}


/* ══════════════════════════════════════════════════════════
   16. PAGINATION
   ══════════════════════════════════════════════════════════ */
.pagination .page-link {
    background: var(--bg-surface2) !important;
    border-color: var(--border-base) !important;
    color: var(--text-muted) !important;
    border-radius: 8px !important;
    margin: 0 2px;
    transition: all .2s;
}
.pagination .page-link:hover {
    background: rgba(124,58,237,.12) !important;
    border-color: rgba(124,58,237,.3) !important;
    color: var(--theme-primary) !important;
}
.pagination .page-item.active .page-link {
    background: var(--grad-brand) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: var(--theme-glow-primary);
}
.pagination .page-item.disabled .page-link { opacity: .35 !important; }


/* ══════════════════════════════════════════════════════════
   17. NAV TABS
   ══════════════════════════════════════════════════════════ */
.nav-tabs {
    border-bottom: 1px solid var(--border-base) !important;
}
.nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: .75rem 1.25rem !important;
    font-weight: 600;
    transition: color .2s, border-color .2s !important;
}
.nav-tabs .nav-link:hover { color: var(--text-base) !important; }
.nav-tabs .nav-link.active {
    background: transparent !important;
    color: #fff !important;
    border-bottom-color: var(--theme-primary) !important;
}


/* ══════════════════════════════════════════════════════════
   18. TOOLTIPS & POPOVERS
   ══════════════════════════════════════════════════════════ */
.tooltip-inner {
    background: var(--bg-surface2) !important;
    border: 1px solid var(--border-base) !important;
    color: var(--text-base) !important;
    font-size: .8rem;
    border-radius: 8px;
}

html[data-bs-theme="light"] .dropdown-menu {
    box-shadow: 0 18px 48px rgba(15, 23, 42, .12) !important;
}


/* ══════════════════════════════════════════════════════════
   19. FEATURE ICONS (shared across landing & admin)
   ══════════════════════════════════════════════════════════ */
.fi-purple { background: rgba(168,85,247,.12); color: #c084fc; border: 1px solid rgba(168,85,247,.2); }
.fi-cyan   { background: rgba(34,211,238,.1);  color: #22d3ee; border: 1px solid rgba(34,211,238,.2); }
.fi-green  { background: rgba(52,211,153,.1);  color: #34d399; border: 1px solid rgba(52,211,153,.2); }
.fi-amber  { background: rgba(251,191,36,.1);  color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
.fi-pink   { background: rgba(236,72,153,.1);  color: #f472b6; border: 1px solid rgba(236,72,153,.2); }
.fi-blue   { background: rgba(99,102,241,.1);  color: #818cf8; border: 1px solid rgba(99,102,241,.2); }
.fi-red    { background: rgba(239,68,68,.1);   color: #f87171; border: 1px solid rgba(239,68,68,.2); }


/* ══════════════════════════════════════════════════════════
   20. STAT CARDS (admin dashboard)
   ══════════════════════════════════════════════════════════ */
.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: 14px;
    padding: 1.5rem;
    transition: border-color .3s, transform .3s, box-shadow .3s;
}
.stat-card:hover {
    border-color: rgba(124,58,237,.4);
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(124,58,237,.12);
}
.stat-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}