/* ═══════════════════════════════════════════════════════════════════════════
   WPEDU Dark Glassmorphism Theme — overrides for lms/assets/css/main.css
   Matches Western Province Department of Education main portal aesthetic.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts (matching main site) ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');

/* ── Design token overrides ──────────────────────────────────────────────── */
:root {
    /* Site palette */
    --wp-navy:          #05070f;
    --wp-navy-mid:      #0f172a;
    --wp-navy-card:     #0d1526;
    --wp-gold:          #d97706;
    --wp-gold-bright:   #fbbf24;
    --wp-green:         #059669;
    --wp-green-light:   #34d399;
    --wp-violet:        #a78bfa;
    --wp-sky:           #60a5fa;
    --wp-cyan:          #22d3ee;
    --wp-orange:        #fb923c;

    /* Overrides for LMS variables */
    --primary:          #fbbf24;
    --primary-dark:     #d97706;
    --primary-light:    #fde68a;
    --primary-lighter:  rgba(251,191,36,0.12);
    --secondary:        #34d399;
    --secondary-dark:   #059669;
    --accent:           #fbbf24;
    --accent-dark:      #d97706;

    --bg-primary:       #0f172a;
    --bg-secondary:     #05070f;
    --bg-tertiary:      #1e293b;

    --text-primary:     #f1f5f9;
    --text-secondary:   #94a3b8;
    --text-muted:       #64748b;

    --border-color:     rgba(255,255,255,0.07);
    --border-radius:    10px;
    --border-radius-lg: 14px;
    --border-radius-xl: 18px;

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
    --shadow:    0 4px 16px rgba(0,0,0,0.35);
    --shadow-md: 0 8px 28px rgba(0,0,0,0.4);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.55);

    --glass-bg:     rgba(15,23,42,0.72);
    --glass-border: rgba(255,255,255,0.07);
    --glass-hover:  rgba(15,23,42,0.9);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --success: #34d399;
    --warning: #fbbf24;
    --error:   #f87171;
    --info:    #60a5fa;

    --gray-50:  #1e293b;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html { background: var(--wp-navy) !important; }

body,
body.page-shell {
    font-family: var(--font-sans) !important;
    background: var(--wp-navy) !important;
    color: var(--text-primary) !important;
    background-image:
        radial-gradient(ellipse 70% 55% at 18% 12%, rgba(52,211,153,0.05), transparent 55%),
        radial-gradient(ellipse 55% 45% at 85% 20%, rgba(251,191,36,0.04), transparent 50%),
        radial-gradient(ellipse 50% 45% at 50% 90%, rgba(167,139,250,0.04), transparent 55%) !important;
    background-attachment: fixed !important;
}

a { color: var(--wp-gold-bright); }
a:hover { color: var(--wp-green-light); }

h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }
p { color: var(--text-secondary); }

/* ── Header / Nav ────────────────────────────────────────────────────────── */
.header {
    background: rgba(5,7,15,0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 1px 28px rgba(0,0,0,0.45);
}

.logo { color: var(--wp-gold-bright) !important; }
.logo:hover { color: var(--wp-green-light) !important; }

.nav-link { color: rgba(241,245,249,0.82) !important; }
.nav-link:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--wp-gold-bright) !important;
}
.nav-link.active {
    background: rgba(251,191,36,0.1) !important;
    color: var(--wp-gold-bright) !important;
}

.menu-toggle { color: var(--text-primary) !important; }

/* User avatar ring */
.user-avatar {
    border: 2px solid var(--wp-gold-bright) !important;
    box-shadow: 0 0 0 3px rgba(251,191,36,0.15);
}

/* Dropdown */
.dropdown-menu {
    background: rgba(13,21,38,0.97) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
    backdrop-filter: blur(20px);
}
.dropdown-item {
    color: var(--text-primary) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.dropdown-item:hover { background: rgba(255,255,255,0.05) !important; }
.dropdown-item:last-child { border-bottom: none !important; }

/* Back-to-portal top bar */
.wpedu-topbar {
    background: rgba(251,191,36,0.06);
    border-bottom: 1px solid rgba(251,191,36,0.1);
    padding: 0.35rem 0;
    font-size: 0.72rem;
    text-align: center;
    color: rgba(251,191,36,0.75);
    letter-spacing: 0.06em;
}
.wpedu-topbar a { color: var(--wp-gold-bright); text-decoration: none; }
.wpedu-topbar a:hover { color: var(--wp-green-light); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
.card:hover {
    background: var(--glass-hover) !important;
    border-color: rgba(251,191,36,0.15) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(251,191,36,0.08) !important;
}
.card-header {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.card-footer {
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* Course cards */
.premium-course-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
}
.premium-course-card:hover {
    border-color: rgba(251,191,36,0.18) !important;
    box-shadow: 0 20px 55px rgba(0,0,0,0.5), 0 0 0 1px rgba(251,191,36,0.1) !important;
}
.course-card-empty { background: rgba(255,255,255,0.04) !important; }
.course-card-empty i { color: var(--text-muted) !important; }

/* Premium hero */
.premium-hero {
    background: linear-gradient(135deg, rgba(5,7,15,0.95) 0%, rgba(15,23,42,0.95) 60%, rgba(5,150,105,0.18) 100%) !important;
    border: 1px solid rgba(52,211,153,0.15) !important;
    box-shadow: 0 32px 90px rgba(0,0,0,0.45) !important;
}
.premium-hero h1, .premium-hero p { color: var(--text-primary) !important; }
.premium-hero p { color: rgba(241,245,249,0.78) !important; }
.premium-label, .premium-pill { background: rgba(251,191,36,0.1) !important; color: var(--wp-gold-bright) !important; }

.premium-stat-card {
    background: rgba(15,23,42,0.85) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.3) !important;
}
.premium-stat-card p { color: var(--text-secondary) !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
    background: var(--wp-gold-bright) !important;
    color: #0a0f1e !important;
    border: none !important;
    font-weight: 600 !important;
}
.btn-primary:hover {
    background: var(--wp-gold) !important;
    box-shadow: 0 6px 20px rgba(251,191,36,0.35) !important;
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--wp-green-light) !important;
    color: #0a0f1e !important;
    border: none !important;
    font-weight: 600 !important;
}
.btn-secondary:hover {
    background: var(--wp-green) !important;
    box-shadow: 0 6px 20px rgba(52,211,153,0.3) !important;
}

.btn-outline {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: var(--text-primary) !important;
}
.btn-outline:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.25) !important;
}

.btn-danger {
    background: rgba(248,113,113,0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248,113,113,0.25) !important;
}
.btn-danger:hover { background: rgba(248,113,113,0.25) !important; }

.btn-success {
    background: rgba(52,211,153,0.15) !important;
    color: var(--wp-green-light) !important;
    border: 1px solid rgba(52,211,153,0.25) !important;
}
.btn-success:hover { background: rgba(52,211,153,0.25) !important; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge-primary {
    background: rgba(251,191,36,0.15) !important;
    color: var(--wp-gold-bright) !important;
}
.badge-success {
    background: rgba(52,211,153,0.12) !important;
    color: var(--wp-green-light) !important;
}
.badge-danger {
    background: rgba(248,113,113,0.15) !important;
    color: #f87171 !important;
}
.badge-info {
    background: rgba(96,165,250,0.15) !important;
    color: var(--wp-sky) !important;
}
.badge-warning {
    background: rgba(251,191,36,0.15) !important;
    color: var(--wp-gold-bright) !important;
}
.badge-secondary {
    background: rgba(167,139,250,0.12) !important;
    color: var(--wp-violet) !important;
}

/* ── Form Controls ───────────────────────────────────────────────────────── */
.form-group label { color: var(--text-secondary); font-size: 0.82rem; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select,
.form-control {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius) !important;
}
input::placeholder,
textarea::placeholder { color: rgba(148,163,184,0.45) !important; }
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(251,191,36,0.4) !important;
    box-shadow: 0 0 0 3px rgba(251,191,36,0.08) !important;
    outline: none !important;
}
select option { background: #0f172a; color: var(--text-primary); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--border-radius-lg) !important;
    border-left: 3px solid !important;
}
.alert-success {
    background: rgba(52,211,153,0.08) !important;
    border-color: var(--wp-green-light) !important;
    color: #86efac !important;
}
.alert-danger, .alert-error {
    background: rgba(248,113,113,0.08) !important;
    border-color: #f87171 !important;
    color: #fca5a5 !important;
}
.alert-warning {
    background: rgba(251,191,36,0.08) !important;
    border-color: var(--wp-gold-bright) !important;
    color: #fde68a !important;
}
.alert-info {
    background: rgba(96,165,250,0.08) !important;
    border-color: var(--wp-sky) !important;
    color: #bae6fd !important;
}

/* ── Progress bars ───────────────────────────────────────────────────────── */
.progress-bar {
    background: rgba(255,255,255,0.06) !important;
    border-radius: 999px !important;
    overflow: hidden;
}
.progress-fill {
    background: linear-gradient(90deg, var(--wp-green-light), var(--wp-gold-bright)) !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
table { color: var(--text-primary); }
th {
    background: rgba(255,255,255,0.04) !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
}
td { border-bottom: 1px solid rgba(255,255,255,0.04) !important; }
tr:hover td { background: rgba(255,255,255,0.025) !important; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination a, .pagination span {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: var(--text-secondary) !important;
}
.pagination a:hover {
    background: rgba(251,191,36,0.1) !important;
    color: var(--wp-gold-bright) !important;
}
.pagination .active {
    background: rgba(251,191,36,0.15) !important;
    color: var(--wp-gold-bright) !important;
    border-color: rgba(251,191,36,0.3) !important;
}

/* ── Course meta & misc ──────────────────────────────────────────────────── */
.course-category {
    background: rgba(251,191,36,0.1) !important;
    color: var(--wp-gold-bright) !important;
}
.course-title { color: var(--text-primary) !important; }
.course-meta { color: var(--text-muted) !important; }
.stars { color: var(--wp-gold-bright) !important; }

/* ── Stats widgets ───────────────────────────────────────────────────────── */
.stat-card, .stat-widget {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
}
.stat-number { color: var(--wp-gold-bright) !important; }
.stat-label  { color: var(--text-muted) !important; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar { background: var(--glass-bg) !important; border-right: 1px solid var(--glass-border) !important; }
.sidebar-link { color: var(--text-secondary) !important; }
.sidebar-link:hover, .sidebar-link.active {
    background: rgba(251,191,36,0.08) !important;
    color: var(--wp-gold-bright) !important;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tabs { border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
.tab {
    color: var(--text-muted) !important;
    border-bottom: 2px solid transparent !important;
}
.tab:hover { color: var(--text-primary) !important; }
.tab.active {
    color: var(--wp-gold-bright) !important;
    border-bottom-color: var(--wp-gold-bright) !important;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay { background: rgba(0,0,0,0.75) !important; backdrop-filter: blur(6px); }
.modal-content {
    background: rgba(13,21,38,0.97) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: var(--shadow-xl) !important;
    color: var(--text-primary) !important;
}
.modal-header { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.modal-footer { border-top:    1px solid rgba(255,255,255,0.06) !important; }

/* ── Quiz / assessment ───────────────────────────────────────────────────── */
.question-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
}
.option-item {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: var(--text-primary) !important;
}
.option-item:hover { background: rgba(251,191,36,0.07) !important; border-color: rgba(251,191,36,0.2) !important; }
.option-item.selected { background: rgba(52,211,153,0.1) !important; border-color: rgba(52,211,153,0.3) !important; }
.option-item.correct  { background: rgba(52,211,153,0.12) !important; border-color: var(--wp-green-light) !important; }
.option-item.incorrect { background: rgba(248,113,113,0.1) !important; border-color: #f87171 !important; }

/* ── Profile / certificate sections ─────────────────────────────────────── */
.profile-header {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
}
.certificate-card {
    background: var(--glass-bg) !important;
    border: 1px solid rgba(251,191,36,0.15) !important;
}

/* ── Section dividers ────────────────────────────────────────────────────── */
hr { border-color: rgba(255,255,255,0.07) !important; }

/* ── Dashboard inline-style overrides ───────────────────────────────────── */
/* dashboard.php uses local <style> with light colors — beat them with specifics */
main,
.main-area,
.content-area,
.page-content,
.dashboard-content,
.dash-main {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* Light sidebar panels */
aside,
.sidebar-panel,
.left-panel,
.right-panel,
.dash-sidebar {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

/* Any white/light-grey boxes (divs with inline background) */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background:#f1f5f9"],
[style*="background: #f1f5f9"],
[style*="background:#f8fafc"],
[style*="background: #f8fafc"],
[style*="background:#F1F5F9"],
[style*="background:#F8FAFC"] {
    background: rgba(15,23,42,0.72) !important;
    color: var(--text-primary) !important;
}

/* Light-text overrides */
[style*="color:#1e293b"],
[style*="color: #1e293b"],
[style*="color:#111827"],
[style*="color: #111827"],
[style*="color:#374151"],
[style*="color:#1E293B"] {
    color: var(--text-primary) !important;
}
[style*="color:#6b7280"],
[style*="color:#64748b"],
[style*="color:#94a3b8"],
[style*="color:#6B7280"],
[style*="color:#64748B"],
[style*="color:#9CA3AF"] {
    color: var(--text-secondary) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(251,191,36,0.35); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
    background: rgba(5,7,15,0.95) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(20px);
}
.footer-content { color: var(--text-secondary) !important; }
.footer-link {
    color: rgba(148,163,184,0.75) !important;
    display: block;
    padding: 0.2rem 0;
    font-size: 0.82rem;
    transition: color 0.2s;
}
.footer-link:hover { color: var(--wp-gold-bright) !important; }
.footer h4 {
    color: var(--wp-gold-bright) !important;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.footer-bottom {
    background: rgba(0,0,0,0.3) !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    color: var(--text-muted) !important;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-align: center;
}

/* ── Mobile nav (dark) ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-menu.show {
        background: rgba(5,7,15,0.97) !important;
        border: 1px solid rgba(255,255,255,0.07) !important;
        backdrop-filter: blur(20px);
    }
}

/* ── Utility accent helpers ──────────────────────────────────────────────── */
.text-gold    { color: var(--wp-gold-bright) !important; }
.text-emerald { color: var(--wp-green-light) !important; }
.text-violet  { color: var(--wp-violet)      !important; }
.text-sky     { color: var(--wp-sky)         !important; }
.bg-gold-subtle   { background: rgba(251,191,36,0.08) !important; }
.bg-green-subtle  { background: rgba(52,211,153,0.08) !important; }
.bg-violet-subtle { background: rgba(167,139,250,0.08) !important; }
.ring-gold   { box-shadow: 0 0 0 1px rgba(251,191,36,0.25) !important; }
.ring-emerald{ box-shadow: 0 0 0 1px rgba(52,211,153,0.25) !important; }

/* ── Eyebrow text ────────────────────────────────────────────────────────── */
.section-eyebrow {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--wp-gold-bright);
}

/* ── Smooth fade-in for page transitions ─────────────────────────────────── */
.page-shell > * { animation: wpedu-fadein 0.4s ease both; }
@keyframes wpedu-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAILWIND UTILITY CLASS OVERRIDES
   Standalone pages load Tailwind CDN — these beat Tailwind's generated CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Background utilities ───────────────────────────────────────────────── */
.bg-white, .bg-gray-50, .bg-gray-100 {
    background-color: rgba(15,23,42,0.75) !important;
    color: #f1f5f9 !important;
}
.bg-gray-200 { background-color: rgba(15,23,42,0.55) !important; }
.bg-gray-700, .bg-gray-800, .bg-gray-900 {
    background-color: rgba(5,7,15,0.95) !important;
}
.bg-blue-600, .bg-blue-500, .bg-indigo-600, .bg-indigo-500 {
    background-color: #fbbf24 !important;
    color: #05070f !important;
}
.bg-green-500, .bg-green-600  { background-color: #34d399 !important; color: #05070f !important; }
.bg-red-500,   .bg-red-600    { background-color: #f87171 !important; }
.bg-yellow-400,.bg-yellow-500  { background-color: #fbbf24 !important; color: #05070f !important; }

/* ── Text color utilities ───────────────────────────────────────────────── */
.text-gray-900, .text-gray-800, .text-gray-700 { color: #f1f5f9 !important; }
.text-gray-600, .text-gray-500                 { color: #94a3b8 !important; }
.text-gray-400, .text-gray-300                 { color: #64748b !important; }
.text-black                                     { color: #f1f5f9 !important; }
.text-white                                     { color: #f8fafc !important; }
.text-blue-600, .text-blue-500, .text-indigo-600, .text-indigo-500 { color: #fbbf24 !important; }
.text-green-500, .text-green-600               { color: #34d399 !important; }
.text-red-500, .text-red-600                   { color: #f87171 !important; }

/* ── Border utilities ───────────────────────────────────────────────────── */
.border,
.border-t, .border-b, .border-l, .border-r,
.border-gray-100, .border-gray-200, .border-gray-300 {
    border-color: rgba(255,255,255,0.07) !important;
}

/* ── Form inputs (Tailwind-styled pages) ────────────────────────────────── */
input, select, textarea,
input.border, select.border, textarea.border,
input.w-full, select.w-full, textarea.w-full,
input.rounded, input.rounded-md, input.rounded-lg,
select.rounded, select.rounded-md, select.rounded-lg,
textarea.rounded, textarea.rounded-md, textarea.rounded-lg,
.form-control, .form-input, .form-select, .form-textarea {
    background: rgba(15,23,42,0.70) !important;
    background-color: rgba(15,23,42,0.70) !important;
    color: #f1f5f9 !important;
    border-color: rgba(255,255,255,0.12) !important;
}
input::placeholder,
textarea::placeholder { color: rgba(148,163,184,0.50) !important; }
input:focus,
select:focus,
textarea:focus,
input.border:focus,
select.border:focus,
textarea.border:focus {
    background: rgba(15,23,42,0.85) !important;
    border-color: rgba(251,191,36,0.45) !important;
    box-shadow: 0 0 0 3px rgba(251,191,36,0.10) !important;
    outline: none !important;
    color: #f8fafc !important;
}
select option, option { background: #0f172a !important; color: #f1f5f9 !important; }

/* ── Label overrides ────────────────────────────────────────────────────── */
label,
.form-label,
.text-sm.font-medium,
.block.text-sm { color: #94a3b8 !important; }

/* ── Card / container utilities ─────────────────────────────────────────── */
.rounded, .rounded-md, .rounded-lg, .rounded-xl {
    /* Don't override border-radius but do fix bg if white */
}
.shadow, .shadow-md, .shadow-lg, .shadow-xl {
    box-shadow: 0 4px 20px rgba(0,0,0,0.40) !important;
}

/* ── Tailwind table cells ───────────────────────────────────────────────── */
.px-4.py-2, td.px-4, th.px-4 { color: #f1f5f9 !important; }
.text-slate-600, .text-slate-700, .text-slate-800 { color: #94a3b8 !important; }
.text-slate-400, .text-slate-500                  { color: #64748b !important; }

/* ── Tailwind button classes ────────────────────────────────────────────── */
.bg-yellow-500.text-white,
.bg-indigo-600.text-white,
.bg-blue-600.text-white {
    color: #05070f !important;
}
.hover\:bg-yellow-600:hover { background-color: #d97706 !important; }
.hover\:bg-red-700:hover    { background-color: #dc2626 !important; color: #fff !important; }
.bg-red-600.text-white      { color: #fff !important; }

/* ── Injected WPEDU footer style ────────────────────────────────────────── */
.wpedu-injected-footer {
    margin-top: 3rem;
    border-top: 1px solid rgba(251,191,36,0.12) !important;
    background: rgba(5,7,15,0.95) !important;
    backdrop-filter: blur(14px);
    padding: 1.5rem 1rem;
    font-family: 'Inter','Montserrat',sans-serif;
    text-align: center;
}
.wpedu-injected-footer a { color: rgba(251,191,36,0.55); text-decoration: none; }
.wpedu-injected-footer a:hover { color: #fbbf24; }