/* ================================================================
   TalibWay — Dark Mode
   Triggered by: body.dark-mode  (toggled via dark-mode.js)
   NOTE: header transparency is handled in header.html inline <style>
   ================================================================ */

/* ── Dark Mode Toggle Button ── */
.dark-mode-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4361EE, #6A5BFF);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(67, 97, 238, 0.40);
    z-index: 9999;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
    font-size: 1rem;
}

[dir="rtl"] .dark-mode-toggle {
    left: 24px;
    right: auto;
}

.dark-mode-toggle:hover {
    transform: scale(1.10) rotate(-15deg);
    box-shadow: 0 8px 28px rgba(67, 97, 238, 0.55);
}

body.dark-mode .dark-mode-toggle {
    background: linear-gradient(135deg, #F72585, #6A5BFF);
    box-shadow: 0 4px 20px rgba(247, 37, 133, 0.40);
}

body.dark-mode .dark-mode-toggle:hover {
    box-shadow: 0 8px 28px rgba(247, 37, 133, 0.55);
}

/* ================================================================
   ROOT OVERRIDES
   ================================================================ */
body.dark-mode {
    --primary-color: #6377f1;
    --primary-dark: #4361ee;
    --primary-light: #a5b4fc;
    --secondary-color: #1a1a2e;
    --accent-color: #f72585;
    --text-color: #e2e8f0;
    --text-light: #94a3b8;
    --text-lighter: #64748b;
    --text-muted: #94a3b8;
    --background-color: #0f0f1a;
    --card-bg-color: #1a1a2e;
    --glass-bg: rgba(20, 20, 38, 0.88);
    --glass-border: rgba(99, 119, 241, 0.14);
    --border-color: #2d2d4e;
    --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(99, 119, 241, 0.07);
    --card-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(99, 119, 241, 0.14);
    --glow-primary: 0 0 30px rgba(99, 119, 241, 0.25);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
    --success-color: #34d399;
    --danger-color: #f87171;
    --warning-color: #fbbf24;
    --info-color: #38bdf8;

    color: #e2e8f0 !important;
    background: linear-gradient(165deg, #080812 0%, #0d0d1a 50%, #0a0a14 100%) !important;
    background-attachment: fixed !important;
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
body.dark-mode ::-webkit-scrollbar-track {
    background: rgba(99, 119, 241, 0.04);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(99, 119, 241, 0.22);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 119, 241, 0.40);
}

/* ================================================================
   NAV LINKS — color only, zero backgrounds
   ================================================================ */
body.dark-mode header .nav-links>li>a,
body.dark-mode header .nav-links .dropdown-toggle {
    color: rgba(226, 232, 240, 0.70) !important;
    background: transparent !important;
}

body.dark-mode header .nav-links>li>a:hover,
body.dark-mode header .nav-links>li>a.active,
body.dark-mode header .nav-links .dropdown-toggle:hover,
body.dark-mode header .nav-links .dropdown-toggle.active,
body.dark-mode header .nav-links .user-dropdown.open>.dropdown-toggle {
    color: #a5b4fc !important;
    background: transparent !important;
}

/* Register pill keeps its gradient */
body.dark-mode header .nav-links>li>a[href="/register"] {
    background: linear-gradient(135deg, #4361EE, #6A5BFF, #F72585) !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(99, 119, 241, 0.35) !important;
}

/* Desktop dropdown panels */
body.dark-mode header .dropdown-menu {
    background: rgba(16, 16, 32, 0.97) !important;
    border: 1px solid rgba(99, 119, 241, 0.18) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55) !important;
}

body.dark-mode header .dropdown-menu a {
    color: rgba(226, 232, 240, 0.80) !important;
    background: transparent !important;
}

body.dark-mode header .dropdown-menu a:hover {
    background: rgba(99, 119, 241, 0.14) !important;
    color: #c7d2fe !important;
}

/* Hamburger */
body.dark-mode header .menu-toggle span {
    background: rgba(226, 232, 240, 0.80);
}

body.dark-mode header .menu-toggle {
    background: rgba(99, 119, 241, 0.10) !important;
    border-color: rgba(99, 119, 241, 0.20) !important;
}

/* ================================================================
   BODY & TEXT
   ================================================================ */
body.dark-mode main {
    color: #e2e8f0 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e2e8f0 !important;
}

body.dark-mode p {
    color: #94a3b8;
}

/* ================================================================
   CARDS & GLASS SURFACES
   ================================================================ */
body.dark-mode .card,
body.dark-mode .dashboard-card,
body.dark-mode .form-container,
body.dark-mode .auth-form,
body.dark-mode .content-section,
body.dark-mode .recommendation-card,
body.dark-mode .profile-form,
body.dark-mode .chatbot-container,
body.dark-mode .recommendations-container,
body.dark-mode .profile-edit-container,
body.dark-mode .dashboard-container,
body.dark-mode .vision-card,
body.dark-mode .service-card,
body.dark-mode .contact-info-card {
    background: rgba(20, 20, 38, 0.88) !important;
    border-color: rgba(99, 119, 241, 0.12) !important;
    box-shadow: var(--card-shadow) !important;
    color: #e2e8f0 !important;
}

/* ================================================================
   FORMS
   ================================================================ */
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea,
body.dark-mode .chat-input input,
body.dark-mode .form-inline input,
body.dark-mode #schoolText {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(99, 119, 241, 0.20) !important;
    color: #e2e8f0 !important;
}

/* Profile edit: native <select> dropdown is OS-rendered; keep text readable */
body.dark-mode .profile-edit-container .form-group select {
    background: #ffffff !important;
    color: #111827 !important;
}

body.dark-mode .profile-edit-container .form-group select option {
    color: #111827 !important;
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
    color: #64748b !important;
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus,
body.dark-mode .form-group textarea:focus {
    border-color: #a5b4fc !important;
    box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.18) !important;
}

body.dark-mode .form-group label {
    color: #94a3b8 !important;
}

body.dark-mode .input-wrapper i {
    color: #64748b !important;
}

body.dark-mode .form-section {
    background: rgba(20, 20, 38, 0.80) !important;
    border-color: rgba(99, 119, 241, 0.12) !important;
}

body.dark-mode .form-section h3 {
    color: #a5b4fc !important;
}

body.dark-mode .checkbox-item label,
body.dark-mode .checkbox-group label {
    color: #e2e8f0 !important;
}

body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
    accent-color: #6377f1;
}

body.dark-mode .interest-chip,
body.dark-mode .language-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(99, 119, 241, 0.18) !important;
    color: #c7d2fe !important;
}

body.dark-mode .interest-chip.selected,
body.dark-mode .language-chip.selected {
    background: #4361ee !important;
    border-color: #4361ee !important;
    color: white !important;
}

/* ================================================================
   BUTTONS
   ================================================================ */
body.dark-mode .btn {
    color: #e2e8f0 !important;
}

body.dark-mode .btn-primary {
    background: #4361ee !important;
    color: white !important;
}

body.dark-mode .btn-primary:hover {
    background: #3a56d4 !important;
    color: white !important;
}

body.dark-mode .btn-outline {
    border-color: #a5b4fc !important;
    color: #a5b4fc !important;
    background: transparent !important;
}

body.dark-mode .btn-outline:hover {
    background: #4361ee !important;
    border-color: #4361ee !important;
    color: white !important;
}

body.dark-mode .btn-secondary {
    background: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .btn-danger {
    color: white !important;
}

body.dark-mode .btn-success {
    color: white !important;
}

/* ================================================================
   ALERTS
   ================================================================ */
body.dark-mode .alert-danger {
    background: rgba(248, 113, 113, 0.12) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.25) !important;
}

body.dark-mode .alert-success {
    background: rgba(52, 211, 153, 0.12) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.25) !important;
}

body.dark-mode .alert-warning {
    background: rgba(251, 191, 36, 0.12) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
}

body.dark-mode .alert-info {
    background: rgba(56, 189, 248, 0.10) !important;
    color: #7dd3fc !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
}

/* ================================================================
   CHAT
   ================================================================ */
body.dark-mode .chat-area {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(99, 119, 241, 0.14) !important;
}

body.dark-mode .bot-message .message-content {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}

body.dark-mode .chat-input .input-wrapper {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(99, 119, 241, 0.18) !important;
}

body.dark-mode .welcome-message h3 {
    color: #a5b4fc !important;
}

/* ================================================================
   FOOTER
   ================================================================ */
body.dark-mode footer {
    background: #080812 !important;
    border-top: 1px solid rgba(99, 119, 241, 0.10) !important;
}

body.dark-mode footer p {
    color: rgba(148, 163, 184, 0.55) !important;
}

body.dark-mode footer img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.75 !important;
}

body.dark-mode.home-page footer {
    background: #060610 !important;
}

/* ================================================================
   LANDING PAGE SECTIONS
   ================================================================ */
body.dark-mode .tw-hero {
    background: #0a0a16 !important;
}

body.dark-mode .tw-hero-title {
    color: #e2e8f0 !important;
}

body.dark-mode .tw-hero-sub {
    color: #94a3b8 !important;
}

body.dark-mode .tw-dash-card {
    background: rgba(20, 20, 40, 0.92) !important;
    border-color: rgba(99, 119, 241, 0.18) !important;
}

body.dark-mode .tw-school-row {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(99, 119, 241, 0.12) !important;
}

body.dark-mode .tw-sch-name {
    color: #e2e8f0 !important;
}

body.dark-mode .tw-sch-tag {
    color: #64748b !important;
}

body.dark-mode .tw-float {
    background: rgba(18, 18, 36, 0.96) !important;
    border-color: rgba(99, 119, 241, 0.18) !important;
}

body.dark-mode .tw-float-num {
    color: #e2e8f0 !important;
}

body.dark-mode .tw-ai-msg {
    color: #94a3b8 !important;
}

body.dark-mode .tw-ai-msg strong {
    color: #e2e8f0 !important;
}

body.dark-mode .tw-stats {
    background: #0d0d1a !important;
    border-color: rgba(99, 119, 241, 0.10) !important;
}

body.dark-mode .tw-stat-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(99, 119, 241, 0.12) !important;
}

body.dark-mode .tw-stat-lbl {
    color: #64748b !important;
}

body.dark-mode .tw-feat-bg {
    background: rgba(255, 255, 255, 0.02) !important;
}

body.dark-mode .tw-feat-card {
    background: rgba(20, 20, 38, 0.80) !important;
    border-color: rgba(99, 119, 241, 0.12) !important;
}

body.dark-mode .tw-feat-title {
    color: #e2e8f0 !important;
}

body.dark-mode .tw-feat-desc {
    color: #94a3b8 !important;
}

body.dark-mode .tw-sec-label {
    background: rgba(99, 119, 241, 0.10) !important;
    border-color: rgba(99, 119, 241, 0.22) !important;
}

body.dark-mode .tw-sec-title {
    color: #e2e8f0 !important;
}

body.dark-mode .tw-sec-desc {
    color: #94a3b8 !important;
}

body.dark-mode .tw-hero-badge {
    background: rgba(99, 119, 241, 0.14) !important;
    border-color: rgba(99, 119, 241, 0.28) !important;
}

body.dark-mode .tw-hiw-bg {
    background: #090912 !important;
}

body.dark-mode .tw-step {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(99, 119, 241, 0.12) !important;
}

body.dark-mode .tw-step-title {
    color: #e2e8f0 !important;
}

body.dark-mode .tw-step-desc {
    color: #94a3b8 !important;
}

body.dark-mode .tw-testi-bg {
    background: rgba(255, 255, 255, 0.02) !important;
}

body.dark-mode .tw-testi-card {
    background: rgba(20, 20, 38, 0.80) !important;
    border-color: rgba(99, 119, 241, 0.12) !important;
}

body.dark-mode .tw-quote {
    color: #94a3b8 !important;
}

body.dark-mode .tw-auth-name {
    color: #e2e8f0 !important;
}

body.dark-mode .tw-auth-role {
    color: #64748b !important;
}

body.dark-mode .tw-author {
    border-color: rgba(99, 119, 241, 0.12) !important;
}

body.dark-mode .tw-btn-ghost {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(99, 119, 241, 0.28) !important;
    color: #e2e8f0 !important;
}

body.dark-mode .tw-btn-ghost:hover {
    background: rgba(99, 119, 241, 0.15) !important;
    color: #a5b4fc !important;
}

/* ================================================================
   ADMIN & MODALS
   ================================================================ */
body.dark-mode .admin-container {
    background: transparent !important;
    color: #e2e8f0 !important;
}

body.dark-mode .table {
    background: rgba(20, 20, 38, 0.85) !important;
}

body.dark-mode .table th {
    background: #4361ee !important;
    color: white !important;
    border-color: rgba(99, 119, 241, 0.20) !important;
}

body.dark-mode .table td {
    color: #e2e8f0 !important;
    border-color: rgba(99, 119, 241, 0.10) !important;
}

body.dark-mode .table tr:hover td {
    background: rgba(99, 119, 241, 0.08) !important;
}

body.dark-mode .modal {
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(8px) !important;
}

body.dark-mode .modal-content {
    background: rgba(16, 16, 32, 0.97) !important;
    border-color: rgba(99, 119, 241, 0.18) !important;
}

body.dark-mode .modal-header {
    background: linear-gradient(135deg, rgba(99, 119, 241, 0.10) 0%, transparent 100%) !important;
    border-color: rgba(99, 119, 241, 0.14) !important;
}

body.dark-mode .modal-header h2 {
    color: #a5b4fc !important;
}

body.dark-mode .modal-body {
    background: rgba(16, 16, 32, 0.97) !important;
    color: #e2e8f0 !important;
}

body.dark-mode .close {
    color: #64748b !important;
}

body.dark-mode .close:hover {
    color: #e2e8f0 !important;
}

body.dark-mode .dropdown-menu {
    background: rgba(16, 16, 32, 0.97) !important;
    border-color: rgba(99, 119, 241, 0.18) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}

body.dark-mode .dropdown-menu a {
    color: #e2e8f0 !important;
}

body.dark-mode .dropdown-menu a:hover {
    background: rgba(99, 119, 241, 0.12) !important;
    color: #a5b4fc !important;
}

body.dark-mode .um-card {
    background: rgba(20, 20, 38, 0.88) !important;
    border-color: rgba(99, 119, 241, 0.12) !important;
}

body.dark-mode .um-table thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #64748b !important;
    border-color: rgba(99, 119, 241, 0.10) !important;
}

body.dark-mode .um-row td {
    color: #e2e8f0 !important;
    border-color: rgba(99, 119, 241, 0.08) !important;
}

body.dark-mode .um-row:hover td {
    background: rgba(99, 119, 241, 0.06) !important;
}

body.dark-mode .um-stat-card {
    background: rgba(20, 20, 38, 0.88) !important;
    border-color: rgba(99, 119, 241, 0.12) !important;
}

body.dark-mode .um-stat-value {
    color: #e2e8f0 !important;
}

body.dark-mode .um-badge-admin {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, 0.30) !important;
}

body.dark-mode .um-badge-counselor {
    background: rgba(167, 139, 250, 0.15) !important;
    color: #c4b5fd !important;
    border-color: rgba(167, 139, 250, 0.30) !important;
}

body.dark-mode .um-badge-student {
    background: rgba(52, 211, 153, 0.15) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.30) !important;
}

body.dark-mode .um-btn-edit {
    background: rgba(99, 119, 241, 0.14) !important;
    border-color: rgba(99, 119, 241, 0.28) !important;
    color: #a5b4fc !important;
}

body.dark-mode .um-btn-delete {
    background: rgba(248, 113, 113, 0.12) !important;
    border-color: rgba(248, 113, 113, 0.25) !important;
    color: #fca5a5 !important;
}

body.dark-mode .um-alert-success {
    background: rgba(52, 211, 153, 0.12) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.25) !important;
}

body.dark-mode .um-alert-danger {
    background: rgba(248, 113, 113, 0.12) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.25) !important;
}

body.dark-mode .instructions {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #94a3b8 !important;
    border-color: rgba(99, 119, 241, 0.20) !important;
}

body.dark-mode .social-icon {
    background: rgba(99, 119, 241, 0.22) !important;
    color: white !important;
}

body.dark-mode .social-icon:hover {
    background: #f72585 !important;
    color: white !important;
}