/* ============================================================
   base.css — Shared CSS Variables & Dark Mode Overrides
   Loaded in every layout AFTER panel/marketing CSS so that
   html[data-theme="dark"] overrides :root definitions.
   ============================================================ */

/* ── Theme toggle button (dark navbar variant) ── */
.theme-btn {
    width: 34px; height: 34px;
    border-radius: 7px;
    background: none;
    border: 1.5px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.75);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .88rem;
    transition: border-color .18s, color .18s;
    flex-shrink: 0; padding: 0; line-height: 1;
}
.theme-btn:hover { border-color: rgba(255,255,255,.65); color: #fff; }

/* ── Theme toggle button (light topbar variant) ── */
.theme-btn-panel {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: none;
    border: 1.5px solid var(--border);
    color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .88rem;
    transition: border-color .2s, color .2s, background .2s;
    flex-shrink: 0; padding: 0; line-height: 1;
}
.theme-btn-panel:hover {
    border-color: var(--primary, var(--accent, #4361EE));
    color: var(--primary, var(--accent, #4361EE));
}

/* ── Smooth theme transitions ── */
body,
.admin-topbar, .mentor-topbar,
.admin-sidebar, .mentor-sidebar,
.a-card, .panel, .stat-card, .form-card,
.detail-card, .info-card, .upload-card,
.ticket-table, .ticket-card, .session-card,
.profile-card, .support-card, .auth-card,
.quick-card, .subject-card, .pyp-card,
.topic-header, .topic-body,
.viewer-header,
.exam-card, .res-card, .sub-card,
.contact-form-wrap, .contact-info-card,
.faq-item, .topic-card {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* ============================================================
   DARK MODE — Variable Overrides
   html[data-theme="dark"] specificity (0,1,1) beats :root (0,1,0)
   so these always win regardless of source order.
   ============================================================ */
html[data-theme="dark"] {
    /* Shared neutral palette */
    --bg:       #0d1117;
    --bg2:      #161b22;
    --bg3:      #21262d;
    --card-bg:  #161b22;
    --border:   #30363d;
    --text:     #e6edf3;
    --muted:    #8b949e;

    /* Marketing-specific */
    --accent:   #D4A850;
    --blue:     #60A5FA;
    --green:    #34D399;
    --accent2:  #F87171;

    /* Sidebars stay dark but slightly deeper */
    --sidebar-bg: #090e1a;
}

/* ── Admin / Student topbar (hardcoded #fff in layout) ── */
html[data-theme="dark"] .admin-topbar,
html[data-theme="dark"] .mentor-topbar {
    background: var(--card-bg) !important;
    border-bottom-color: var(--border) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.4) !important;
}

/* ── Bootstrap form controls ── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .a-form-control {
    background: var(--bg3) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .a-form-control:focus {
    background: var(--bg3) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .a-form-control::placeholder { color: var(--muted) !important; }

/* ── Input group addon buttons ── */
html[data-theme="dark"] .input-group .btn-toggle-pw,
html[data-theme="dark"] .pw-group .btn-toggle-pw {
    background: var(--bg3) !important;
    border-color: var(--border) !important;
    color: var(--muted) !important;
}

/* ── Alerts ── */
html[data-theme="dark"] .alert-success { background: rgba(16,185,129,.12) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .alert-danger  { background: rgba(239,68,68,.12)  !important; color: #fca5a5 !important; }
html[data-theme="dark"] .alert-info    { background: rgba(59,130,246,.12)  !important; color: #93c5fd !important; }
html[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.12)  !important; color: #fde68a !important; }

/* ── Admin a-form-label ── */
html[data-theme="dark"] .a-form-label { color: var(--muted) !important; }

/* ── Admin table alternates ── */
html[data-theme="dark"] .a-table th { background: rgba(255,255,255,.03) !important; }
html[data-theme="dark"] .a-table tr:hover td { background: rgba(255,255,255,.03) !important; }
html[data-theme="dark"] .st-table th { background: rgba(255,255,255,.03) !important; }
html[data-theme="dark"] .st-table tr:hover td { background: rgba(255,255,255,.03) !important; }

/* ── Admin badge overrides ── */
html[data-theme="dark"] .badge-green { background: rgba(16,185,129,.15) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .badge-red   { background: rgba(239,68,68,.15)  !important; color: #fca5a5 !important; }
html[data-theme="dark"] .badge-amber { background: rgba(245,158,11,.15)  !important; color: #fde68a !important; }
html[data-theme="dark"] .badge-blue  { background: rgba(67,97,238,.2)   !important; color: #93c5fd !important; }

/* ── btn-sec (admin) ── */
html[data-theme="dark"] .btn-sec {
    background: var(--bg3) !important;
    border-color: var(--border) !important;
    color: var(--muted) !important;
}

/* ── Student hero/banner pseudo-element background ── */
html[data-theme="dark"] .page-hero::after,
html[data-theme="dark"] .hero-banner::after,
html[data-theme="dark"] .support-hero::after { background: var(--bg) !important; }

/* ── Student footer (uses var(--text) as background) ── */
html[data-theme="dark"] .footer { background: #090e1a !important; }

/* ── Student auth pages ── */
html[data-theme="dark"] .auth-card { background: var(--card-bg) !important; border: 1px solid var(--border); }
html[data-theme="dark"] .otp-box { background: var(--bg3) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* ── Student viewer header ── */
html[data-theme="dark"] .viewer-header { background: var(--card-bg) !important; border-bottom-color: var(--border) !important; }

/* ── Student viewer back button ── */
html[data-theme="dark"] .btn-vback { border-color: var(--border) !important; color: var(--text) !important; }

/* ── Student detail/support cards ── */
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .support-card,
html[data-theme="dark"] .ticket-card { background: var(--card-bg) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .question-box { background: var(--bg3) !important; color: var(--text) !important; }

/* ── Mentor hardcoded colors (mentor pages use fixed #fff/#d1fae5) ── */
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .ticket-table,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .session-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .stat-card { background: var(--card-bg) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .filter-tab { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--muted) !important; }
html[data-theme="dark"] .filter-tab.active { background: var(--primary, #059669) !important; border-color: var(--primary, #059669) !important; color: #fff !important; }
html[data-theme="dark"] .ticket-table thead th { background: rgba(255,255,255,.04) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .ticket-table tbody td { border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="dark"] .ticket-table tbody tr:hover td { background: rgba(255,255,255,.04) !important; }

/* ── Marketing cards (hardcoded #fff) ── */
html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .res-card,
html[data-theme="dark"] .sub-card,
html[data-theme="dark"] .iit-card,
html[data-theme="dark"] .about-stat-card,
html[data-theme="dark"] .value-card { background: var(--bg2) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .about-mini { background: var(--bg3) !important; }

/* ── Marketing hero background (inline gradient uses bg) ── */
html[data-theme="dark"] .hero { background: linear-gradient(180deg, #0d1117 0%, #161b22 100%) !important; }

/* ── Dropdown menus ── */
html[data-theme="dark"] .dropdown-menu {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .dropdown-item { color: var(--text) !important; }
html[data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,.06) !important; }

/* ── Bootstrap table ── */
html[data-theme="dark"] .table { color: var(--text); }
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; }

/* ── Scrollbar ── */
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #484f58; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* ── Admin/Mentor Login page dark mode ── */
html[data-theme="dark"] .login-right { background: #0d1117 !important; }
html[data-theme="dark"] .login-right .login-card h1 { color: var(--text) !important; }
html[data-theme="dark"] .login-right .login-card .subtitle,
html[data-theme="dark"] .login-right .back-link { color: var(--muted) !important; }
html[data-theme="dark"] .login-right .form-control { background: #161b22 !important; color: var(--text) !important; border-color: #30363d !important; }
html[data-theme="dark"] .login-right .form-control:focus { border-color: #4361EE !important; }
html[data-theme="dark"] .login-right .form-check-label { color: var(--muted) !important; }