/**
 * ============================================================================
 * Dark Mode Theme
 * Panpacific University - Online Counseling Appointment System
 * ============================================================================
 * 
 * Modern dark mode implementation with smooth transitions
 * Toggle via JavaScript, preference saved to localStorage
 * 
 * @version 1.0.0
 * ============================================================================
 */

/* Navbar Theme Toggle Button */
#navbar-theme-toggle {
    color: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

#navbar-theme-toggle:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

#navbar-theme-toggle:focus {
    outline: none;
    box-shadow: none;
}

/* Dark Mode Variables - Pleasing Dark Grey Theme */
[data-theme="dark"] {
    /* Primary Colors - Softer, more vibrant */
    --navy-blue: #5a9fd4;
    --dark-navy: #3d4f5c;
    --gold: #fdb913;
    --gold-hover: #ffc935;
    
    /* Background Colors - DARK GREY (Not black!) - Discord/Slack inspired */
    --bg-primary: #2b2d31;        /* Main background - dark grey */
    --bg-secondary: #36393f;      /* Cards - medium grey */
    --bg-tertiary: #40444b;       /* Elevated elements */
    --bg-card: #36393f;           /* Card backgrounds */
    --bg-hover: #40444b;          /* Hover states */
    --light-bg: #2b2d31;          /* Body background */
    
    /* Text Colors - High contrast but not harsh */
    --text-primary: #dcddde;      /* Primary text - light grey */
    --text-secondary: #b9bbbe;    /* Secondary text */
    --text-muted: #8e9297;        /* Muted text */
    --text-inverse: #2b2d31;      /* Inverse text */
    
    /* Border Colors - Subtle but visible */
    --border-color: #4f545c;      /* Borders */
    --border-light: #5a5f66;      /* Light borders */
    
    /* Component Colors - Pleasing palette */
    --input-bg: #40444b;          /* Input backgrounds */
    --input-border: #5a5f66;      /* Input borders */
    --input-focus: #5a9fd4;       /* Focus state */
    
    /* Status Colors - Vibrant but not harsh */
    --success-bg: #2d4a2d;
    --success-text: #7bc67b;
    --warning-bg: #4a3d2d;
    --warning-text: #f0ad4e;
    --danger-bg: #4a2d2d;
    --danger-text: #e57373;
    --info-bg: #2d3d4a;
    --info-text: #64b5f6;
}

/* Apply dark mode styles */
[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

/* Override any inline or gradient backgrounds */
[data-theme="dark"] body {
    background-image: none !important;
}

/* Dashboard section backgrounds */
[data-theme="dark"] .dashboard-section {
    background-color: transparent !important;
}

/* Container backgrounds */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
    background-color: transparent !important;
}

/* Cards & Containers */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .health-card,
[data-theme="dark"] .filter-card,
[data-theme="dark"] .notes-container,
[data-theme="dark"] .student-table,
[data-theme="dark"] .appointment-card,
[data-theme="dark"] .feedback-card,
[data-theme="dark"] .modern-card {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Stat card headings */
[data-theme="dark"] .stat-card h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-card p {
    color: var(--text-secondary) !important;
}

/* Welcome Card */
[data-theme="dark"] .welcome-card {
    background: linear-gradient(135deg, #3d4f5c 0%, #4a5f73 50%, #5a7a96 100%) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .welcome-card h2,
[data-theme="dark"] .welcome-card p {
    color: var(--text-primary) !important;
}

/* Text Elements */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] small.text-muted,
[data-theme="dark"] p.text-muted {
    color: var(--text-muted) !important;
}

/* Action cards & Feature cards - Dark Mode */
[data-theme="dark"] .action-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .feature-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .action-card:hover,
[data-theme="dark"] .feature-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
}

[data-theme="dark"] .feature-card h5,
[data-theme="dark"] .action-card h5 {
    color: var(--text-primary) !important;
}

/* Forms & Inputs */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--input-focus);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

/* Tables */
[data-theme="dark"] .table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table thead th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table tbody td {
    border-color: var(--border-color);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* Alerts */
[data-theme="dark"] .alert-success {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-text);
}

[data-theme="dark"] .alert-warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-text);
}

[data-theme="dark"] .alert-danger {
    background-color: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-text);
}

[data-theme="dark"] .alert-info {
    background-color: var(--info-bg);
    color: var(--info-text);
    border-color: var(--info-text);
}

/* Badges */
[data-theme="dark"] .badge {
    color: var(--text-inverse);
}

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--border-color);
}

/* Navbar (Keep original navbar colors for branding) */
[data-theme="dark"] .navbar-dark {
    background-color: #1a1a1a !important;
}

/* Buttons - Keep primary colors, adjust text */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-light);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Specific Component Adjustments */
[data-theme="dark"] .info-box {
    background-color: var(--bg-tertiary);
    border-left-color: var(--gold);
}

[data-theme="dark"] .note-card,
[data-theme="dark"] .appointment-details {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .metric-box {
    background-color: var(--bg-tertiary);
}

/* Charts - Adjust canvas background */
[data-theme="dark"] .chart-container canvas {
    filter: brightness(0.9);
}

/* HR Dividers */
[data-theme="dark"] hr {
    border-color: var(--border-color);
    opacity: 0.5;
}

/* Links — exclude .btn elements so gold buttons keep dark text */
[data-theme="dark"] a:not(.btn) {
    color: var(--gold);
}

[data-theme="dark"] a:not(.btn):hover {
    color: var(--gold-hover);
}

/* ── Gold / Yellow Buttons: always dark navy text on gold background ── */
[data-theme="dark"] .btn-primary-cta,
[data-theme="dark"] .btn-student,
[data-theme="dark"] .btn-warning {
    color: #0f2537 !important;
    background-color: #fdb913 !important;
    border-color: #fdb913 !important;
}

[data-theme="dark"] .btn-primary-cta:hover,
[data-theme="dark"] .btn-primary-cta:focus,
[data-theme="dark"] .btn-primary-cta:active,
[data-theme="dark"] .btn-student:hover,
[data-theme="dark"] .btn-student:focus,
[data-theme="dark"] .btn-student:active,
[data-theme="dark"] .btn-warning:hover,
[data-theme="dark"] .btn-warning:focus,
[data-theme="dark"] .btn-warning:active {
    color: #0f2537 !important;
    background-color: #e6a711 !important;
    border-color: #e6a711 !important;
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-secondary);
}

/* List Groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-hover);
}

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--navy-blue);
    border-color: var(--navy-blue);
}

/* Toast Notifications */
[data-theme="dark"] .toast {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* DataTables */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary);
}

/* Smooth Transition for All Elements */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Override for animations that shouldn't transition */
.btn,
.badge,
canvas {
    transition: none;
}