/* ============================================ */
/* DARK MODE STYLES - YELLOW TEXT EDITION      */
/* ============================================ */

/* ============================================
   ROOT VARIABLES - DARK MODE
   ============================================ */
.dark-mode {
    /* Dark backgrounds */
    --bg-primary: #0a0e14;        /* Very dark blue-black */
    --bg-secondary: #141a23;      /* Slightly lighter */
    --bg-tertiary: #1c2430;       /* For cards */
    --bg-hover: #252d3a;          /* Hover state */
    
    /* Yellow text colors */
    --text-primary: #ffb700;       /* Bright yellow - main text */
    --text-secondary: #ffb700;     /* Slightly darker yellow */
    --text-muted: #ffb700;        /* Muted yellow */
    --text-heading: #ffe066;      /* Bright yellow for headings */
    
    /* Borders and accents */
    --border-color: #3a4a5c;
    --accent-yellow: #ffb700; 
    --accent-yellow-bright: #ffb700; 
    
    /* Shadows */
    --shadow-color: rgba(255, 214, 10, 0.15);
    --shadow-yellow: 0 0 20px rgba(255, 214, 10, 0.2);
}

/* ============================================
   BODY AND GENERAL TEXT
   ============================================ */
.dark-mode body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   HEADINGS - BRIGHT YELLOW
   ============================================ */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--text-heading) !important;
}

/* ============================================
   PARAGRAPHS AND LABELS
   ============================================ */
.dark-mode p,
.dark-mode span,
.dark-mode label,
.dark-mode div {
    color: var(--text-primary);
}

.dark-mode label {
    color: var(--text-heading) !important;
}

/* ============================================
   LINKS - YELLOW
   ============================================ */
.dark-mode a {
    color: var(--accent-yellow-bright) !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dark-mode a:hover {
    color: #fff4b8 !important;
    text-decoration: underline;
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.dark-mode .login-container,
.dark-mode .login-screen {
    background: var(--bg-secondary) !important;
}

.dark-mode .login-container h1,
.dark-mode .login-header h1 {
    color: var(--text-heading) !important;
}

.dark-mode .login-container .subtitle,
.dark-mode .login-header p {
    color: var(--text-secondary) !important;
}

.dark-mode .login-form label {
    color: var(--text-heading) !important;
}

.dark-mode .login-form input {
    background: var(--bg-tertiary) !important;
    color: var(--accent-yellow-bright) !important;
    border: 2px solid var(--border-color) !important;
}

.dark-mode .login-form input:focus {
    border-color: var(--accent-yellow) !important;
    box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.2) !important;
    outline: none;
}

.dark-mode .login-form input::placeholder {
    color: rgba(255, 214, 10, 0.4) !important;
}

.dark-mode .login-footer p {
    color: var(--text-secondary) !important;
}

/* ============================================
   SIDEBAR - DARK WITH YELLOW TEXT
   ============================================ */
.dark-mode .sidebar {
    background: #050810 !important;
    border-right: 1px solid var(--border-color);
}

.dark-mode .sidebar-header h3 {
    color: var(--text-heading) !important;
}

.dark-mode .sidebar-header img {
    filter: brightness(1.2);
}

.dark-mode .menu-item a {
    color: var(--text-primary) !important;
    transition: all 0.2s ease;
}

.dark-mode .menu-item a i {
    color: var(--accent-yellow) !important;
}

.dark-mode .menu-item a:hover {
    background: rgba(255, 214, 10, 0.1) !important;
    color: var(--accent-yellow-bright) !important;
}

.dark-mode .menu-item.active a {
    background: rgba(255, 214, 10, 0.15) !important;
    color: var(--accent-yellow-bright) !important;
    border-left: 3px solid var(--accent-yellow);
}

.dark-mode .menu-item.active a i {
    color: var(--accent-yellow-bright) !important;
}

/* ============================================
   TOP BAR
   ============================================ */
.dark-mode .top-bar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .top-bar h2 {
    color: var(--text-heading) !important;
}

.dark-mode .user-name {
    color: var(--text-heading) !important;
}

.dark-mode .user-role {
    color: var(--text-secondary) !important;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.dark-mode .main-content {
    background: var(--bg-primary) !important;
}

.dark-mode .page-content {
    background: var(--bg-primary) !important;
}

/* ============================================
   PAGE HEADERS
   ============================================ */
.dark-mode .page-header h2 {
    color: var(--text-heading) !important;
}

.dark-mode .page-header p {
    color: var(--text-secondary) !important;
}

/* ============================================
   CARDS - STAT CARDS, CHART CARDS
   ============================================ */
.dark-mode .stat-card,
.dark-mode .chart-card,
.dark-mode .profile-card,
.dark-mode .program-card,
.dark-mode .event-card,
.dark-mode .activity-card,
.dark-mode .analytics-card,
.dark-mode .analytics-stat-box,
.dark-mode .analytics-chart-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .stat-card:hover,
.dark-mode .chart-card:hover {
    box-shadow: var(--shadow-yellow) !important;
}

.dark-mode .stat-card .stat-number {
    color: var(--accent-yellow-bright) !important;
}

.dark-mode .stat-card .stat-label {
    color: var(--text-primary) !important;
}

.dark-mode .stat-icon i {
    color: var(--accent-yellow) !important;
}

/* ============================================
   CHART CARDS
   ============================================ */
.dark-mode .chart-card h3 {
    color: var(--text-heading) !important;
}

.dark-mode .chart-container canvas {
    filter: brightness(1.1) contrast(1.1);
}

/* ============================================
   TABLES
   ============================================ */
.dark-mode table {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode table thead {
    background: var(--bg-tertiary) !important;
}

.dark-mode table thead th {
    color: var(--text-heading) !important;
    border-bottom: 2px solid var(--accent-yellow) !important;
}

.dark-mode table tbody tr {
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode table tbody tr:hover {
    background: var(--bg-hover) !important;
}

.dark-mode table tbody td {
    color: var(--text-primary) !important;
}

/* ============================================
   MODALS
   ============================================ */
.dark-mode .modal {
    background: rgba(0, 0, 0, 0.85) !important;
}

.dark-mode .modal-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), var(--shadow-yellow);
}

.dark-mode .modal-header {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--accent-yellow) !important;
}

.dark-mode .modal-header h2 {
    color: var(--text-heading) !important;
}

.dark-mode .modal-header p {
    color: var(--text-secondary) !important;
}

.dark-mode .modal-body {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .modal-footer {
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-color) !important;
}

.dark-mode .close-modal {
    color: var(--text-primary) !important;
}

.dark-mode .close-modal:hover {
    color: #ff6b6b !important;
}

/* ============================================
   FORMS AND INPUTS
   ============================================ */
.dark-mode .form-control,
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background: var(--bg-tertiary) !important;
    color: var(--accent-yellow-bright) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .form-control:focus,
.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    border-color: var(--accent-yellow) !important;
    box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.2) !important;
    outline: none;
}

.dark-mode .form-control::placeholder,
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: rgba(255, 214, 10, 0.4) !important;
}

.dark-mode select option {
    background: var(--bg-tertiary) !important;
    color: var(--accent-yellow-bright) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.dark-mode .btn-primary {
    background: #ffb700; 
    color: #0a0e14 !important;
    font-weight: 700 !important;
}

.dark-mode .btn-primary:hover {
    background: #ffb700; 
    box-shadow: 0 0 20px rgba(255, 214, 10, 0.5) !important;
}

.dark-mode .btn-secondary {
    background: var(--bg-tertiary) !important;
    color: var(--accent-yellow) !important;
    border: 1px solid var(--border-color);
}

.dark-mode .btn-secondary:hover {
    background: var(--bg-hover) !important;
    color: var(--accent-yellow-bright) !important;
}

.dark-mode .btn-danger {
    background: #c92a2a !important;
    color: #fff !important;
}

.dark-mode .btn-success {
    background: #2b8a3e !important;
    color: #fff !important;
}

/* ============================================
   BADGES
   ============================================ */
.dark-mode .badge,
.dark-mode .status-badge,
.dark-mode .role-badge {
    color: #0a0e14 !important;
    font-weight: 700 !important;
}

/* ============================================
   NOTIFICATION SIDEBAR
   ============================================ */
.dark-mode .notification-sidebar {
    background: var(--bg-secondary) !important;
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

.dark-mode .notification-sidebar-header {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--accent-yellow) !important;
}

.dark-mode .notification-sidebar-header h3 {
    color: var(--text-heading) !important;
}

.dark-mode .notification-item {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .notification-item:hover {
    background: var(--bg-hover) !important;
}

.dark-mode .notification-title {
    color: var(--text-heading) !important;
}

.dark-mode .notification-message {
    color: var(--text-primary) !important;
}

.dark-mode .notification-time {
    color: var(--text-secondary) !important;
}

/* ============================================
   SYSTEM LOGS MODAL
   ============================================ */
.dark-mode #system-logs-modal .modal-content,
.dark-mode .system-logs-modal {
    background: var(--bg-secondary) !important;
}

.dark-mode .sl-stats > div {
    background: var(--bg-tertiary) !important;
    border-left-color: var(--accent-yellow) !important;
}

.dark-mode .sl-stat-number {
    color: var(--accent-yellow-bright) !important;
}

.dark-mode #sl-table-body tr:hover {
    background: var(--bg-hover) !important;
}

/* ============================================
   PROFILE PAGE
   ============================================ */
.dark-mode .profile-detail-card,
.dark-mode .profile-stat-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .profile-detail-header h3 {
    color: var(--text-heading) !important;
}

.dark-mode .profile-detail-item label {
    color: var(--text-secondary) !important;
}

.dark-mode .profile-detail-item p {
    color: var(--text-primary) !important;
}

/* ============================================
   SIDEBAR FOOTER - LOGOUT BUTTON
   ============================================ */
.dark-mode .sidebar-footer .btn {
    background: rgba(255, 214, 10, 0.1) !important;
    color: var(--accent-yellow) !important;
    border: 1px solid var(--accent-yellow);
}

.dark-mode .sidebar-footer .btn:hover {
    background: var(--accent-yellow) !important;
    color: #0a0e14 !important;
}

/* ============================================
   ACCESSIBILITY TOOLBAR
   ============================================ */
.dark-mode .accessibility-toolbar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--accent-yellow) !important;
}

.dark-mode .access-btn {
    background: var(--bg-tertiary) !important;
    color: var(--accent-yellow) !important;
    border: 1px solid var(--border-color);
}

.dark-mode .access-btn:hover {
    background: var(--accent-yellow) !important;
    color: #0a0e14 !important;
}

.dark-mode .language-select {
    background: var(--bg-tertiary) !important;
    color: var(--accent-yellow) !important;
    border: 1px solid var(--border-color);
}

/* ============================================
   EMPTY STATES
   ============================================ */
.dark-mode .empty-state {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .empty-state h3 {
    color: var(--text-heading) !important;
}

.dark-mode .empty-state i {
    color: var(--accent-yellow) !important;
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.dark-mode .loading-spinner {
    color: var(--accent-yellow) !important;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */
.dark-mode * {
    transition: background-color 0.9s ease, color 0.9s ease, border-color 0.9s ease;
}