/**
 * Global Dark Mode Styles
 * Apply consistent dark mode across all pages
 */

/* Light mode (default) variables */
:root {
  /* Primary colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-card: #ffffff;
  
  /* Text colors */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-tertiary: #adb5bd;
  --text-inverse: #ffffff;
  
  /* Border colors */
  --border-color: #dee2e6;
  --border-light: #e9ecef;
  --border-dark: #adb5bd;
  
  /* UI colors */
  --primary: #0081A1;
  --primary-hover: #0081A1;
  --success: #28a745;
  --success-hover: #218838;
  --warning: #ffc107;
  --warning-hover: #e0a800;
  --danger: #dc3545;
  --danger-hover: #c82333;
  --info: #17a2b8;
  --info-hover: #138496;
  
  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Input colors */
  --input-bg: #0081A1;
  --input-border: #ced4da;
  --input-focus-border: #0081A1;
  --input-placeholder: #6c757d;
  
  /* Table colors */
  --table-header-bg: #f8f9fa;
  --table-row-hover: #f8f9fa;
  --table-border: #dee2e6;
  
  /* Footer */
  --footer-bg: #303437;
  --footer-text: #ffffff;
  
  /* Navbar */
  --navbar-bg: #ffffff;
  --navbar-text: #212529;
  --navbar-border: #dee2e6;
}

/* Dark mode variables */
.dark-mode,
html.dark-mode,
body.dark-mode {
  /* Primary colors */
  --bg-primary: #1a1a1a;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #4f4e4e;
  --bg-card: #2d2d2d;
  
  /* Text colors */
  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --text-tertiary: #6c757d;
  --text-inverse: #212529;
  
  /* Border colors */
  --border-color: #495057;
  --border-light: #3a3a3a;
  --border-dark: #6c757d;
  
  /* UI colors - slightly adjusted for dark mode */
  --primary: #0081A1;
  --primary-hover: #0081A1;
  --success: #198754;
  --success-hover: #146c43;
  --warning: #ffc107;
  --warning-hover: #ffca2c;
  --danger: #dc3545;
  --danger-hover: #bb2d3b;
  --info: #0dcaf0;
  --info-hover: #31d2f2;
  
  /* Shadow - lighter for dark mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  
  /* Input colors */
  --input-bg: #2d2d2d;
  --input-border: #495057;
  --input-focus-border: #0081A1;
  --input-placeholder: #6c757d;
  
  /* Table colors */
  --table-header-bg: #3a3a3a;
  --table-row-hover: #3a3a3a;
  --table-border: #495057;
  
  /* Footer */
  --footer-bg: #1a1a1a;
  --footer-text: #e9ecef;
  
  /* Navbar */
  --navbar-bg: #2d2d2d;
  --navbar-text: #e9ecef;
  --navbar-border: #495057;
  
}

/* Apply dark mode to body and html */
.dark-mode {
  color: var(--text-primary);
}

html.dark-mode body {
  color: var(--text-primary);
}

/* Global element styles */
.dark-mode * {
  border-color: var(--border-color);
}

/* Cards */
.dark-mode .card,
.dark-mode .settings-section,
.dark-mode .stat-card,
.dark-mode .overview-card,
.dark-mode .absences-section,
.dark-mode .section,
.dark-mode .modal-content {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Inputs */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--input-placeholder);
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
  border-color: var(--input-focus-border);
  background-color: var(--input-bg);
  color: var(--text-primary);
}

/* Tables */
.dark-mode table,
.dark-mode .table {
  color: var(--text-primary);
  border-color: var(--table-border);
  background-color: var(--bg-card);
}

.dark-mode thead,
.dark-mode .table thead {
  background-color: var(--table-header-bg);
  color: var(--text-primary);
}

.dark-mode tbody tr:hover,
.dark-mode .table tbody tr:hover {
  background-color: var(--table-row-hover);
}

.dark-mode th,
.dark-mode td {
  border-color: var(--table-border);
}

/* Navbar */
.dark-mode .header,
.dark-mode nav,
.dark-mode .navbar {
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
  border-color: var(--navbar-border);
}

.dark-mode .header a,
.dark-mode nav a,
.dark-mode .navbar a {
  color: var(--navbar-text);
}

.dark-mode .icon {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.dark-mode .icon:hover {
  background: var(--bg-secondary);
}

/* Nav links for students */
.dark-mode .nav-link {
  color: var(--navbar-text);
}

.dark-mode .nav-link:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dark-mode .nav-link.active {
  background: #0081A1;
  color: #ffffff;
}


.dark-mode .nav-menu .nav-link {
  color: var(--text-primary) !important;
}

.dark-mode .nav-menu .nav-link:hover {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.dark-mode .nav-menu .nav-link.active {
  background: #0081A1 !important;
  color: #ffffff !important;
}

.dark-mode .mobile-menu-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* Footer */
.dark-mode footer,
.dark-mode .footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

/* Buttons - maintain their colors but adjust for dark mode */
.dark-mode .btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.dark-mode .btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.dark-mode .btn-success {
  background-color: var(--success);
  border-color: var(--success);
}

.dark-mode .btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--text-inverse);
}

.dark-mode .btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
}

.dark-mode .btn-secondary {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Badges and status indicators */
.dark-mode .badge,
.dark-mode .status-badge {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Links */
.dark-mode a {
  color: var(--primary);
}

.dark-mode .btn-view-action{
  color: white;
}

.dark-mode a:hover {
  color: var(--primary-hover);
}

/* Modals */
.dark-mode .modal-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Scrollbar */
.dark-mode ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 6px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* Progress bars */
.dark-mode .progress-bar {
  background-color: var(--bg-tertiary);
}

/* Alerts */
.dark-mode .alert,
.dark-mode .alert-box {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Code blocks */
.dark-mode code,
.dark-mode pre {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* HR */
.dark-mode hr {
  border-color: var(--border-color);
}

/* Profile dropdown */
.dark-mode .profile-dropdown {
  background: var(--bg-card);
  border-color: var(--border-color);
}

.dark-mode .dropdown-item {
  color: var(--text-primary);
}

.dark-mode .dropdown-item:hover {
  background: var(--bg-tertiary);
}

.dark-mode .dropdown-item.logout {
  color: var(--danger);
}

.dark-mode .dropdown-item.logout:hover {
  background: rgba(220, 53, 69, 0.1);
}


/* Smooth transition for theme changes */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Disable transitions for immediate theme application on page load */
.no-transition * {
  transition: none !important;
}

/* Logo - ensure visibility in dark mode */
.dark-mode .logo,
.dark-mode .logo img {
  filter: brightness(1.2) contrast(1.1);
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== Auth Pages (Login, Registration, Password Reset) ===== */

/* Container for auth forms */
.dark-mode .container {
  background-color: rgba(45, 45, 45, 0.95);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Form titles */
.dark-mode .form-title {
  color: var(--text-primary);
}

/* Form groups and labels */
.dark-mode .form-group label {
  color: var(--text-primary);
}

.dark-mode #files-summary-size {
  background: rgb(0 0 0 / 0%) !important;
}


/* Password field container */
.dark-mode .password-input-container {
  background-color: var(--input-bg);
  border-color: var(--input-border);
}

.dark-mode .password-input-container input {
  background-color: transparent;
  color: var(--text-primary);
  border: none;
}

.dark-mode .password-toggle {
  color: var(--text-secondary);
  background: transparent;
}

.dark-mode .password-toggle:hover {
  color: var(--text-primary);
}

/* Form links */
.dark-mode .form-container a,
.dark-mode .form-options a,
.dark-mode .form-links a {
  color: var(--primary);
}

.dark-mode .form-container a:hover,
.dark-mode .form-options a:hover,
.dark-mode .form-links a:hover {
  color: var(--primary-hover);
}

/* Messages */
.dark-mode .success-message {
  background-color: rgba(25, 135, 84, 0.2);
  border-color: var(--success);
  color: #75d99f;
}

.dark-mode .error-message,
.dark-mode .error-messages {
  background-color: rgba(220, 53, 69, 0.2);
  border-color: var(--danger);
  color: #f5a3ab;
}

.dark-mode .info-message {
  background-color: rgba(13, 202, 240, 0.2);
  border-color: var(--info);
  color: #7de4f5;
}

/* Submit button */
.dark-mode .btn-submit {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.dark-mode .btn-submit:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Secondary buttons */
.dark-mode .btn-secondary,
.dark-mode .btn-resend {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .btn-secondary:hover,
.dark-mode .btn-resend:hover {
  background-color: var(--bg-secondary);
}

/* Paragraph text in auth pages */
.dark-mode .form-container p,
.dark-mode .container p {
  color: var(--text-secondary);
}

/* ===== History pages styling ===== */
.dark-mode main {
  background-color: var(--bg-primary);
}

.dark-mode h1 {
  color: var(--text-primary);
}

.dark-mode h2 {
  color: var(--text-primary);
}

/* Filter grid */
.dark-mode .filter-grid input,
.dark-mode .filter-grid select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

/* ===== Student pages ===== */
.dark-mode .page-title {
  color: var(--text-primary);
}

.dark-mode .info-container,
.dark-mode .info-section {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .section-header h2 {
  color: var(--text-primary);
}


/* ===== View Proof page ===== */
.dark-mode .title {
  color: var(--text-primary);
}

.dark-mode .info-grid,
.dark-mode .info-field {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.dark-mode .info-field strong {
  color: var(--text-secondary);
}

/* ===== Settings Page ===== */
.dark-mode .settings-section {
  background: var(--bg-card);
  color: var(--text-primary);
}

.dark-mode .section-header {
  border-bottom-color: var(--primary);
}

.dark-mode .section-title {
  color: var(--text-primary);
}

.dark-mode .section-title h2 {
  color: var(--text-primary);
}

.dark-mode .section-description {
  color: var(--text-secondary);
}

.dark-mode .info-label {
  color: var(--text-secondary);
}

.dark-mode .info-value {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.dark-mode .stat-card {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.dark-mode .stat-number {
  color: var(--text-primary);
}

.dark-mode .stat-label {
  color: var(--text-secondary);
}

.dark-mode .form-input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.dark-mode .form-input:focus {
  border-color: var(--input-focus-border);
  background-color: var(--input-bg);
}

.dark-mode .form-hint {
  color: var(--text-secondary);
}

.dark-mode .form-label {
  color: var(--text-primary);
}

.dark-mode .settings-container {
  color: var(--text-primary);
}

.dark-mode .page-subtitle {
  color: var(--text-secondary);
}

/* Theme Toggle in Settings */
.dark-mode .theme-section {
  background: var(--bg-card);
}

.dark-mode .theme-option {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .theme-option:hover {
  border-color: var(--primary);
}

.dark-mode .theme-option.active {
  border-color: var(--primary);
  background: var(--primary);
}

/* ===== Secretary Home / Dashboard ===== */
.dark-mode .dashboard-container {
  background-color: var(--bg-primary);
}

.dark-mode .card {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  color: var(--text-primary);
}

.dark-mode .card h2 {
  color: var(--text-primary);
  border-bottom-color: var(--primary);
}

.dark-mode .tabs-header {
  border-bottom-color: var(--border-color);
}

.dark-mode .tab-btn {
  color: var(--text-secondary);
}

.dark-mode .tab-btn:hover {
  color: var(--primary);
}

.dark-mode .tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.dark-mode .file-label #file-name,
.dark-mode #file-name,
.dark-mode #students-file-name {
  color: var(--text-secondary);
}

.dark-mode .progress-container {
  background: var(--bg-tertiary);
}

.dark-mode .progress-bar {
  background: var(--bg-secondary);
}

.dark-mode .progress-info {
  color: var(--text-primary);
}

.dark-mode .import-result {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dark-mode .form-group label {
  color: var(--text-primary);
}

.dark-mode .search-container input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.dark-mode .search-results {
  background: var(--bg-card);
  border-color: var(--border-color);
}

.dark-mode .search-results .search-result-item {
  color: var(--text-primary);
}

.dark-mode .search-results .search-result-item:hover {
  background: var(--bg-tertiary);
}

.dark-mode .selected-info {
  color: var(--text-secondary);
}

.dark-mode .selected-info.active {
  background-color: var(--bg-card);
}

.dark-mode .duration-btn {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .duration-btn:hover,
.dark-mode .duration-btn.selected {
  background: var(--primary);
  color: #ffffff;
}

.dark-mode .selected-time-info {
  color: var(--text-secondary);
}

.dark-mode .sidebar {
  background: var(--bg-card);
}

.dark-mode .sidebar h2,
.dark-mode .sidebar h3 {
  color: var(--text-primary);
}

.dark-mode .history-item {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary);
}

.dark-mode .history-status.success{
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);

}

.dark-mode .history-action {
  color: white;
}

.dark-mode .history-item:hover {
  background: var(--bg-secondary);
}

.dark-mode .result-item {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ===== Student Home Page ===== */
.dark-mode .dashboard-title {
  color: var(--text-primary);
}

.dark-mode .overview-card {
  background: var(--bg-card);
  color: var(--text-primary);
}

.dark-mode .overview-card.primary,
.dark-mode .overview-card.success,
.dark-mode .overview-card.warning,
.dark-mode .overview-card.info,
.dark-mode .overview-card.danger,
.dark-mode .overview-card.secondary {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
}

.dark-mode .card-label {
  color: var(--text-secondary);
}

.dark-mode .card-value {
  color: var(--text-primary);
}

.dark-mode .card-description {
  color: var(--text-secondary);
}

/* Justification Progress Section */
.dark-mode .justification-progress-section {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.dark-mode .section-heading {
  color: var(--text-primary);
}

.dark-mode .progress-container {
  background: var(--bg-card);
}

.dark-mode .progress-info,
.dark-mode .progress-label,
.dark-mode .progress-percentage {
  color: var(--text-primary);
}

.dark-mode .progress-bar {
  background: var(--bg-tertiary);
}

.dark-mode .progress-legend {
  color: var(--text-secondary);
}

.dark-mode .legend-item {
  color: var(--text-secondary);
}

.dark-mode .points-penalty {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.dark-mode .points-penalty span {
  color: var(--text-primary) !important;
}

/* Proof Status Section */
.dark-mode .proofs-status-section {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.dark-mode .proofs-grid {
  gap: 1rem;
}

.dark-mode .proof-card {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dark-mode .proof-card:hover {
  background: var(--bg-secondary);
}

.dark-mode .proof-label,
.dark-mode .proof-count {
  color: var(--text-primary);
}

.dark-mode .proof-description {
  color: var(--text-secondary);
}

/* Alert Box */
.dark-mode .alert-box {
  background: var(--bg-card);
  border-color: var(--border-color);
}

.dark-mode .alert-box.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
}

.dark-mode .alert-box.alert-info {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

.dark-mode .alert-title {
  color: var(--text-primary);
}

.dark-mode .alert-message {
  color: var(--text-secondary);
}

/* Absences Section / Tables */
.dark-mode .absences-section {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.dark-mode .section-title {
  color: var(--text-primary);
}

.dark-mode .absences-subtitle {
  color: var(--text-secondary);
}

.dark-mode .absences-table-container {
  background: var(--bg-card);
}

.dark-mode .absences-table {
  background: var(--bg-card);
  color: var(--text-primary);
}

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

.dark-mode .absences-table thead th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode .absences-table tbody tr {
  background: var(--bg-card);
  border-color: var(--border-color);
}

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

.dark-mode .absences-table td {
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .course-code {
  color: var(--text-secondary);
}

/* ===== Student Absences & Proofs Pages ===== */
.dark-mode .filter-form {
  background: var(--bg-card);
  color: var(--text-primary);
}

.dark-mode .filter-input label {
  color: var(--text-primary);
}

.dark-mode .filter-input input,
.dark-mode .filter-input select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.dark-mode .filter-input input:focus,
.dark-mode .filter-input select:focus {
  border-color: var(--input-focus-border);
}

.dark-mode .button-container button {
  background: var(--primary);
  color: #ffffff;
}

.dark-mode .button-container button:hover {
  background: var(--primary-hover);
}

.dark-mode .reset-link {
  color: var(--text-secondary);
}

.dark-mode .results-counter {
  color: var(--text-primary);
}

.dark-mode .table-container {
  background: var(--bg-card);
  border-radius: 12px;
  overflow: hidden;
}

.dark-mode #absenceTable,
.dark-mode #proofsTable,
.dark-mode table {
  background: var(--bg-card);
  color: var(--text-primary);
}

.dark-mode #absenceTable thead,
.dark-mode #proofsTable thead,
.dark-mode table thead {
  background: var(--bg-tertiary);
}

.dark-mode #absenceTable thead th,
.dark-mode #proofsTable thead th,
.dark-mode table thead th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode #absenceTable tbody tr,
.dark-mode #proofsTable tbody tr,
.dark-mode table tbody tr {
  background: var(--bg-card);
  border-color: var(--border-color);
}

.dark-mode #absenceTable tbody tr:hover,
.dark-mode #proofsTable tbody tr:hover,
.dark-mode table tbody tr:hover {
  background: var(--bg-tertiary);
}

.dark-mode #absenceTable td,
.dark-mode #proofsTable td,
.dark-mode table td {
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .no-results {
  color: var(--text-secondary);
}

/* ===== Alert Action Button Fix ===== */
.dark-mode .alert-action {
  background: #0081A1 !important;
  color: #ffffff !important;
}

.dark-mode .alert-action:hover {
  box-shadow: 0 4px 12px rgba(0, 129, 161, 0.4);
}

/* ===== Student Home Page - Proof Cards Enhanced ===== */
.dark-mode .proofs-grid .proof-card {
  background: var(--bg-card);
  border-width: 2px;
}

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

.dark-mode .proof-card .proof-description {
  color: var(--text-secondary) !important;
}

.dark-mode .proof-card.proof-accepted {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%) !important;
  border-color: #22c55e !important;
}

.dark-mode .proof-card.proof-accepted:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.15) 100%) !important;
}

.dark-mode .proof-card.proof-pending {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
  border-color: #3b82f6 !important;
}

.dark-mode .proof-card.proof-pending:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.15) 100%) !important;
}

.dark-mode .proof-card.proof-review {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%) !important;
  border-color: #f59e0b !important;
}

.dark-mode .proof-card.proof-review:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.15) 100%) !important;
}

.dark-mode .proof-card.proof-rejected {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%) !important;
  border-color: #ef4444 !important;
}

.dark-mode .proof-card.proof-rejected:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.15) 100%) !important;
}

/* ===== Alert Box Content ===== */
.dark-mode .alert-box {
  background: var(--bg-card);
  border-radius: 12px;
}

.dark-mode .alert-box.alert-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.dark-mode .alert-box.alert-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

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

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

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

/* ===== Student Statistics Title and Recent Section ===== */
.dark-mode .recent-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px;
  padding: 1.5rem;
}

.dark-mode .recent-section h3 {
  color: var(--text-primary) !important;
}

.dark-mode .recent-table {
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}

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

.dark-mode .recent-table th {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.dark-mode .recent-table td {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  background: var(--bg-card) !important;
}

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

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

/* ===== Teacher & Academic Manager Statistics ===== */
.dark-mode .statistics-container {
  background: var(--bg-primary);
}

.dark-mode .stats-header {
  background: var(--bg-card);
}

.dark-mode .stats-title h1 {
  color: var(--text-primary);
}

.dark-mode .stats-title p,
.dark-mode .subtitle {
  color: var(--text-secondary);
}

.dark-mode .filters-content {
  background: var(--bg-card);
}

.dark-mode .filter-group label {
  color: var(--text-primary);
}

.dark-mode .filter-group input,
.dark-mode .filter-group select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.dark-mode .kpi-card {
  background: var(--bg-card);
}

.dark-mode .kpi-blue,
.dark-mode .kpi-cyan,
.dark-mode .kpi-green,
.dark-mode .kpi-red,
.dark-mode .kpi-orange,
.dark-mode .kpi-purple {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
}

.dark-mode .kpi-label {
  color: var(--text-secondary);
}

.dark-mode .kpi-value {
  color: var(--text-primary);
}

.dark-mode .semester-card {
  background: var(--bg-card);
}

.dark-mode .semester-card h3 {
  color: var(--text-primary);
}

.dark-mode .semester-row {
  color: var(--text-primary);
}

.dark-mode .semester-row span {
  color: var(--text-secondary);
}

.dark-mode .semester-total {
  color: var(--text-primary);
  border-top-color: var(--border-color);
}

.dark-mode .chart-card {
  background: var(--bg-card);
}

.dark-mode .chart-card h3 {
  color: var(--text-primary);
}

.dark-mode .chart-legend-item {
  color: var(--text-primary);
}

.dark-mode .ranking-card {
  background: var(--bg-card);
}

.dark-mode .ranking-header h2 {
  color: var(--text-primary);
}

.dark-mode .ranking-table {
  background: var(--bg-card);
}

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

.dark-mode .ranking-table th {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.dark-mode .ranking-table td {
  color: var(--text-primary);
  border-color: var(--border-color);
}

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

.dark-mode .student-name,
.dark-mode .student-id,
.dark-mode .total-absences {
  color: var(--text-primary);
}

.dark-mode .modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}

.dark-mode .modal-content-large,
.dark-mode .modal-content {
  background: var(--bg-card);
  color: var(--text-primary);
}

.dark-mode .modal-header-detail {
  background: var(--bg-secondary);
}

.dark-mode .student-detail-title h2,
.dark-mode .student-detail-title p {
  color: var(--text-primary);
}

.dark-mode .student-kpi-card {
  background: var(--bg-tertiary);
}

.dark-mode .student-kpi-label {
  color: var(--text-secondary);
}

.dark-mode .student-kpi-value {
  color: var(--text-primary);
}

.dark-mode .student-chart-card {
  background: var(--bg-card);
}

.dark-mode .student-chart-card h3 {
  color: var(--text-primary);
}

.dark-mode .ds-info-panel {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.dark-mode .ds-info-panel h4 {
  color: var(--primary);
}

.dark-mode .ds-info-panel 
.ds-info-label{
  color: var(--text-secondary);
}

.dark-mode .ds-info-panel .ds-info-value{
  color: var(--text-primary);
}

.dark-mode .ds-info-panel .ds-students-list li {
  background: var(--bg-card);
  border-color: var(--border-color);
}



/* Academic Manager specific */
.dark-mode .student-search-container {
  background: var(--bg-card);
}

.dark-mode .student-search-container input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.dark-mode .student-view {
  background: var(--bg-primary);
}

.dark-mode .student-header {
  background: var(--bg-card);
  color: var(--text-primary);
}

.dark-mode .student-header h2,
.dark-mode .student-header p {
  color: var(--text-primary);
}

.dark-mode .semester-section h2 {
  color: var(--text-primary);
}

.dark-mode .semester-stat {
  color: var(--text-primary);
}

.dark-mode .semester-label {
  color: var(--text-secondary);
}

.dark-mode .semester-value {
  color: var(--text-primary);
}

.dark-mode .charts-grid {
  gap: 1.5rem;
}

.dark-mode .top-students-section {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem;
}

.dark-mode .top-students-section h2 {
  color: var(--text-primary);
}

.dark-mode .students-table table {
  background: var(--bg-card);
}

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

.dark-mode .students-table th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dark-mode .students-table td {
  color: var(--text-primary);
  border-color: var(--border-color);
}

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

/* Footer */
.dark-mode .footer {
  background: var(--footer-bg);
  color: var(--footer-text);
}

.dark-mode .footer-content {
  color: var(--footer-text);
}

.dark-mode .team-title {
  color: var(--footer-text);
}

.dark-mode .team-names p {
  color: var(--text-secondary);
}

/* ===== Student Proofs specific elements ===== */
.dark-mode .comment-preview {
  color: var(--text-secondary);
}

.dark-mode .btn-add-info {
  background: var(--primary);
  color: #ffffff;
}

/* ===== Modals for student pages ===== */
.dark-mode .proof-modal-content,
.dark-mode .absence-modal-content {
  background: var(--bg-card);
  color: var(--text-primary);
}

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

.dark-mode .modal-body {
  background: var(--bg-card);
}

.dark-mode .modal-section {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.dark-mode .modal-section h4 {
  color: var(--text-primary);
}

.dark-mode .modal-section p,
.dark-mode .modal-section span {
  color: var(--text-secondary);
}

/* ===== Common elements ===== */
.dark-mode body {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.dark-mode .main-content {
  background: transparent;
}

.dark-mode select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* ===== Academic Manager Home Page ===== */
.dark-mode .stats-grid .stat-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%) !important;
  color: var(--text-primary);
}

.dark-mode .stat-card .stat-title {
  color: var(--text-secondary);
}

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

/* Pagination styles for academic manager */
.dark-mode .pagination {
  color: var(--text-primary);
  background: var(--bg-card);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.dark-mode .pagination-buttons .btn {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode .pagination-buttons .btn:hover {
  background: var(--primary);
  color: #ffffff;
}

/* History button - btn-history */
.dark-mode .btn-history {
  background: var(--primary);
  color: #ffffff !important;
  border: none;
}

.dark-mode .btn-history:hover {
  background: var(--primary-hover);
}

.dark-mode .history-section a {
  color: #ffffff !important;
}

/* ===== Academic Manager Absences Page ===== */
.dark-mode .absences-section .table {
  background: var(--bg-card);
}

.dark-mode .absences-section .table th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode .absences-section .table td {
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode .absences-section .table tr:hover {
  background: var(--bg-tertiary);
}

/* ===== Historique Proof Page ===== */
.dark-mode .filter-grid {
  background: var(--bg-card);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.dark-mode .filter-grid input,
.dark-mode .filter-grid select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dark-mode .filter-grid input::placeholder {
  color: var(--input-placeholder);
}

.dark-mode .button-container {
  margin-bottom: 1rem;
}

.dark-mode #filterButton {
  background: var(--primary);
  color: #ffffff;
  border: none;
}

.dark-mode #filterButton:hover {
  background: var(--primary-hover);
}

.dark-mode .reset-link {
  background: var(--bg-tertiary);
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
}

.dark-mode .results-counter {
  color: var(--text-primary);
  background: var(--bg-card);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.dark-mode #proofTable {
  background: var(--bg-card);
}

.dark-mode #proofTable thead {
  background: var(--bg-tertiary);
}

.dark-mode #proofTable th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode #proofTable td {
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode #proofTable tbody tr:hover {
  background: var(--bg-tertiary);
}

/* ===== Student Home Page - Proof Status Squares ===== */
.dark-mode .proof-card.proof-accepted {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.dark-mode .proof-card.proof-pending {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.dark-mode .proof-card.proof-review {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.dark-mode .proof-card.proof-rejected {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Alert box button fix for student home */
.dark-mode .alert-box .btn,
.dark-mode .alert-box a.btn {
  background: var(--primary);
  color: #ffffff !important;
  border: none;
}

.dark-mode .alert-box .btn:hover,
.dark-mode .alert-box a.btn:hover {
  background: var(--primary-hover);
}

.dark-mode .btn-submit-proof,
.dark-mode a[href*="student_proof_submission"] {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* ===== Student Statistics Page ===== */
.dark-mode .stats-header h1 {
  color: #0081A1 !important;
}

.dark-mode .recent-section {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
}

.dark-mode .recent-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.dark-mode .recent-table {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

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

.dark-mode .recent-table th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode .recent-table td {
  color: var(--text-primary);
  border-color: var(--border-color);
}

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

/* Student statistics stat cards */
.dark-mode .stats-grid .stat-card,
.dark-mode .stat-card.stat-card-success,
.dark-mode .stat-card.stat-card-danger,
.dark-mode .stat-card.stat-card-purple,
.dark-mode .stat-card.stat-card-info,
.dark-mode .stat-card.stat-card-warning {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%) !important;
  border: 1px solid var(--border-color);
}

.dark-mode .stat-card .stat-icon {
  background: var(--bg-tertiary);
}

.dark-mode .stat-card .stat-content .stat-title {
  color: var(--text-secondary);
}

.dark-mode .stat-card .stat-content .stat-number {
  color: var(--text-primary);
}

/* Filters container in statistics pages */
.dark-mode .filters-container {
  background: var(--bg-card);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-color);
}

.dark-mode .toggle-filters-btn {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode .toggle-filters-btn:hover {
  background: var(--bg-tertiary);
}

.dark-mode .filters-form {
  background: var(--bg-card);
}

.dark-mode .filter-row {
  background: var(--bg-card);
}

.dark-mode .filter-group label {
  color: var(--text-primary);
}

.dark-mode .filter-group input,
.dark-mode .filter-group select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.dark-mode .filter-actions .btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode .filter-actions .btn-primary {
  background: var(--primary);
  color: #ffffff;
}



/* ===== Common Button Fixes ===== */
.dark-mode .btn {
  color: var(--text-primary);
}

.dark-mode .btn-primary,
.dark-mode button[type="submit"] {
  background: var(--bg-tertiary);
  color: #ffffff !important;
  border-color: var(--primary);
}

.dark-mode .btn-sm {
  background: var(--primary);
  color: #ffffff !important;
}

.dark-mode a.btn-view,
.dark-mode .btn-view {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* Search box in academic manager statistics */
.dark-mode .student-search-container .search-box input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.dark-mode .search-results {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.dark-mode .search-result-item {
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}

.dark-mode .search-result-item:hover {
  background: var(--bg-tertiary);
}

.dark-mode .no-results {
  color: var(--text-secondary);
}

/* ===== Historique Proof - Filter Section Border Fix ===== */
.dark-mode .filter-grid {
  background: var(--bg-card);
  border: 1px solid var(--border-color) !important;
  border-radius: 12px;
  padding: 1.5rem;
}

.dark-mode form .filter-grid {
  border: 1px solid var(--border-color) !important;
}

/* ===== Academic Manager Statistics - Search Results Fix ===== */
.dark-mode .student-search-container {
  background: var(--bg-card);
  padding: 1rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.dark-mode .search-box {
  position: relative;
}

.dark-mode .search-box input {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dark-mode #searchResults,
.dark-mode .search-results {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode #searchResults .search-result-item,
.dark-mode .search-results .search-result-item {
  background: var(--bg-card);
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
}

.dark-mode #searchResults .search-result-item:hover,
.dark-mode .search-results .search-result-item:hover {
  background: var(--bg-tertiary) !important;
}

.dark-mode #searchResults .search-result-item strong,
.dark-mode .search-results .search-result-item strong {
  color: var(--text-primary);
}

.dark-mode #searchResults .search-result-item span,
.dark-mode .search-results .search-result-item span {
  color: var(--text-secondary);
}

/* ===== Login Page Dark Mode ===== */
.dark-mode .container {
  background-color: rgba(45, 45, 45, 0.95) !important;
  border-color: var(--border-color) !important;
  backdrop-filter: blur(10px);
}

.dark-mode .form-title {
  color: #0081A1;
}

.dark-mode .form-container,
.dark-mode .login-form {
  background: transparent;
}

.dark-mode .form-group label {
  color: var(--text-primary);
}

.dark-mode .form-group input {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dark-mode .password-wrapper {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 4px;
}

.dark-mode .password-wrapper input {
  border: none !important;
  background: transparent !important;
}

.dark-mode .toggle-password {
  color: var(--text-secondary);
}

.dark-mode .login-link {
  color: var(--text-secondary);
}

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

.dark-mode .login-link a {
  color: var(--primary);
}

/* ===== Secretary Home - Import History Fix ===== */
.dark-mode .sidebar {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
}

.dark-mode .sidebar h2,
.dark-mode .sidebar h3 {
  color: var(--text-primary);
}




.dark-mode .history-item .history-date,
.dark-mode .history-item .history-info {
  color: var(--text-secondary);
}

.dark-mode .history-item .history-status {
  color: var(--text-primary);
}

/* Import section card */
.dark-mode .import-section,
.dark-mode .card.import-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
}

.dark-mode .manual-entry-section,
.dark-mode .card.manual-entry-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
}

.dark-mode .logo {
  filter: brightness(0) invert(1);
}

/* ===== Teacher Home & Evals - Filter Section Fix ===== */
.dark-mode .section > .filter-group,
.dark-mode .section > form.filter-group {
  background: var(--bg-card);
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
}

.dark-mode .filter-group .filter-label {
  color: var(--text-primary);
}

.dark-mode .filter-group .select-input,
.dark-mode .filter-group select {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dark-mode .section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
}

.dark-mode .section .section-title {
  color: var(--text-primary);
}

.dark-mode .section-header {
  border-bottom-color: var(--border-color);
}

/* ===== Planifier Rattrapage - Form Fix ===== */
.dark-mode .main-content .section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
}

.dark-mode .page-title {
  color: #0081A1;
}

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

.dark-mode .form-group input,
.dark-mode .form-group select,
.dark-mode .form-group textarea {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dark-mode .form-group input::placeholder,
.dark-mode .form-group textarea::placeholder {
  color: var(--input-placeholder);
}

.dark-mode .form-help {
  color: var(--text-secondary);
}

.dark-mode .required {
  color: #ef4444;
}

.dark-mode .message {
  border-radius: 8px;
  padding: 1rem;
}

.dark-mode .message.success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid #22c55e;
  color: #4ade80;
}

.dark-mode .message.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #f87171;
}

.dark-mode .form-row {
  background: transparent;
}

.dark-mode .form-actions .btn {
  background: var(--primary);
  color: #ffffff !important;
}

/* ===== Academic Manager Statistics - Student View Single Row ===== */
.dark-mode .student-view .stats-grid {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
  .dark-mode .student-view .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

    /* Mobile menu dark mode - surcharge des styles mobiles */
  .dark-mode .nav-menu {
    background: var(--bg-secondary) !important;
  }
}

@media (max-width: 768px) {
  .dark-mode .student-view .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .dark-mode .student-view .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Historique Proof - Filter Grid Border Fix (Enhanced) ===== */
/* Main form styling for historique_proof - Scoped to avoid breaking login */
.dark-mode main form.filter-form,
.dark-mode main form:has(.filter-grid) {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px;
  padding: 1.5rem;
}

.dark-mode main form .filter-grid,
.dark-mode form.filter-form .filter-grid {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.dark-mode .filter-grid input[type="text"],
.dark-mode .filter-grid input[type="date"],
.dark-mode .filter-grid select {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dark-mode .button-container button[type="submit"],
.dark-mode #filterButton {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: none !important;
}

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

.dark-mode .reset-link:hover {
  color: var(--primary) !important;
}

.dark-mode .results-counter {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  padding: 1rem;
  border-radius: 8px;
}

/* ===== Student Home Page - Table Hover Fix (Enhanced) ===== */
.dark-mode .absences-table tbody tr:hover,
.dark-mode .absences-table tbody tr:hover td,
.dark-mode .absences-table-container table tbody tr:hover {
  background: var(--bg-tertiary) !important;
  background-color: var(--bg-tertiary) !important;
}

.dark-mode .absences-table tbody tr:nth-child(odd) {
  background: var(--bg-card);
}

.dark-mode .absences-table tbody tr:nth-child(even) {
  background: var(--bg-secondary);
}

.dark-mode .absences-table tbody tr:nth-child(odd):hover,
.dark-mode .absences-table tbody tr:nth-child(even):hover {
  background: var(--bg-tertiary) !important;
}

/* ===== View Proof - Files Section Fix ===== */
.dark-mode .files-section,
.dark-mode div.files-section,
.dark-mode .container .files-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 15px;
}

.dark-mode .files-section strong {
  color: var(--text-primary) !important;
}

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

.dark-mode .files-section a {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.dark-mode .files-section a:hover {
  background: var(--primary-hover) !important;
}

/* View Proof - General styles */
.dark-mode .view-proof-page .container,
.dark-mode body .container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.dark-mode .info-grid {
  background: var(--bg-card);
}

.dark-mode .info-field {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
}

.dark-mode .info-field strong {
  color: var(--text-primary);
}

.dark-mode .dates-container,
.dark-mode .reason-container {
  background: var(--bg-card);
}

.dark-mode .dates-container .info-field,
.dark-mode .reason-container .info-field {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.dark-mode .rejection-form,
.dark-mode .validation-form,
.dark-mode .split-form {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
}

.dark-mode .rejection-form label,
.dark-mode .validation-form label,
.dark-mode .split-form label {
  color: var(--text-primary);
}

.dark-mode .rejection-form select,
.dark-mode .validation-form select,
.dark-mode .split-form select,
.dark-mode .rejection-form input,
.dark-mode .validation-form input,
.dark-mode .split-form input,
.dark-mode .rejection-form textarea,
.dark-mode .validation-form textarea,
.dark-mode .split-form textarea {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dark-mode #summary-list-validation{
  background-color: var(--bg-card);
}



.dark-mode .split-form small {
  color: var(--text-secondary) !important;
}

.dark-mode .decision-buttons {
  background: var(--bg-card);
}

/* ===== Student Proof Submit Page ===== */
.dark-mode .proof-submit-page,
.dark-mode body:has(.form-container) {
  background: var(--bg-primary);
}

.dark-mode .form-container {
  background: var(--bg-card) !important;
}

.dark-mode .form-container h1,
.dark-mode .form-container h2,
.dark-mode .form-container h3 {
  color: var(--text-primary);
}

.dark-mode .form-container p {
  color: var(--text-secondary);
}

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

.dark-mode .form-container input[type="text"],
.dark-mode .form-container input[type="date"],
.dark-mode .form-container input[type="time"],
.dark-mode .form-container input[type="datetime-local"],
.dark-mode .form-container input[type="email"],
.dark-mode .form-container select,
.dark-mode .form-container textarea {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dark-mode .form-container input::placeholder,
.dark-mode .form-container textarea::placeholder {
  color: var(--input-placeholder);
}

.dark-mode .form-container .submit-btn,
.dark-mode .form-container button[type="submit"] {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.dark-mode .form-container .submit-btn:hover,
.dark-mode .form-container button[type="submit"]:hover {
  background: var(--primary-hover) !important;
}

.dark-mode .file-upload-container,
.dark-mode .file-upload-area {
  background: var(--bg-secondary) !important;
  border: 2px dashed var(--border-color) !important;
  color: var(--text-secondary);
}

.dark-mode .file-upload-container:hover,
.dark-mode .file-upload-area:hover {
  border-color: var(--primary) !important;
  background: var(--bg-tertiary) !important;
}

.dark-mode .file-list,
.dark-mode .uploaded-files {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.dark-mode .file-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.dark-mode .file-item .file-name {
  color: var(--text-primary);
}

.dark-mode .file-item .file-size {
  color: var(--text-secondary);
}

.dark-mode .file-item .remove-file {
  color: #ef4444;
}

/* ===== Student Proof Validation Page ===== */
.dark-mode .success-message,
.dark-mode .success-container {
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid #22c55e !important;
  color: #4ade80 !important;
}

.dark-mode .warning-message {
  background: rgba(234, 179, 8, 0.15) !important;
  border: 1px solid #eab308 !important;
  color: #facc15 !important;
}

.dark-mode .pdf-download {
  background: var(--bg-card);
}

.dark-mode .btn-pdf {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.dark-mode .btn-pdf:hover {
  background: var(--primary-hover) !important;
}

.dark-mode h3 {
  color: var(--text-primary);
}

.dark-mode ul li {
  color: var(--text-primary);
}

.dark-mode ul li strong {
  color: var(--text-primary);
}

.dark-mode .stats-box,
.dark-mode .stats-container {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
}

.dark-mode .stats-box h3,
.dark-mode .stats-container h3 {
  color: var(--text-primary);
}

.dark-mode .stats-box p,
.dark-mode .stats-container p {
  color: var(--text-secondary);
}

.dark-mode .action-buttons a,
.dark-mode .action-buttons button {
  background: var(--primary);
  color: #ffffff !important;
  border: none;
}

.dark-mode .action-buttons a:hover,
.dark-mode .action-buttons button:hover {
  background: var(--primary-hover);
}

/* ===== Student Info Page ===== */
.dark-mode .info-container,
.dark-mode .student-info-container {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

.dark-mode .info-container h1,
.dark-mode .info-container h2,
.dark-mode .student-info-container h1,
.dark-mode .student-info-container h2 {
  color: var(--text-primary);
}

.dark-mode .info-section {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.dark-mode .info-section .section-header,
.dark-mode .info-section h3 {
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}

.dark-mode .info-section .info-row,
.dark-mode .info-row {
  border-bottom-color: var(--border-color);
}

.dark-mode .info-section .info-label,
.dark-mode .info-label {
  color: var(--text-secondary);
}

.dark-mode .info-section .info-value,
.dark-mode .info-value {
  color: var(--text-primary);
}

.dark-mode .back-link,
.dark-mode .back-button {
  color: var(--text-secondary);
}

.dark-mode .back-link:hover,
.dark-mode .back-button:hover {
  color: var(--primary);
}

.dark-mode .btn-back {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .btn-back:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Student info additional styles */
.dark-mode .profile-header {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  border: 1px solid var(--border-color);
}

.dark-mode .profile-avatar {
  background: var(--bg-tertiary);
  border: 3px solid var(--primary);
}

.dark-mode .profile-name {
  color: var(--text-primary);
}

.dark-mode .profile-email {
  color: var(--text-secondary);
}

.dark-mode .profile-badge {
  background: var(--primary);
  color: #ffffff;
}

/* ===== General Form & Input Dark Mode Fixes ===== */
.dark-mode form {
  background: transparent;
}

.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="date"],
.dark-mode input[type="time"],
.dark-mode input[type="datetime-local"],
.dark-mode input[type="number"],
.dark-mode select,
.dark-mode textarea {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--input-placeholder);
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* ===== Proof Cards in Lists ===== */
.dark-mode .proof-card,
.dark-mode .justificatif-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark-mode .proof-card:hover,
.dark-mode .justificatif-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.dark-mode .proof-card h3,
.dark-mode .justificatif-card h3 {
  color: var(--text-primary);
}

.dark-mode .proof-card p,
.dark-mode .justificatif-card p {
  color: var(--text-secondary);
}

.dark-mode .proof-card .date,
.dark-mode .justificatif-card .date {
  color: var(--text-secondary);
}

.dark-mode .proof-card .status,
.dark-mode .justificatif-card .status {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
}

/* ===== Student Info Page - Complete Dark Mode Fixes ===== */
.dark-mode .info-container {
  background: var(--bg-card) !important;
}

.dark-mode .info-section {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px;
}

.dark-mode .info-section.important-section,
.dark-mode .info-section.alert-section {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
}

.dark-mode .section-content p {
  background: var(--shadow-xl);
  color: var(--text-secondary) !important;
}

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

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

.dark-mode .link-box {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary);
}

.dark-mode .link-box strong {
  color: var(--text-primary);
}

.dark-mode .link-box a.external-link {
  color: var(--primary) !important;
}

.dark-mode .deadline-box {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 8px;
  padding: 1rem;
}

.dark-mode .deadline-box h3 {
  color: var(--text-primary) !important;
}

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

.dark-mode .example-box {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
}

.dark-mode .example-box h4 {
  color: var(--text-primary) !important;
}

.dark-mode .example-box ul li {
  color: var(--text-secondary) !important;
}

.dark-mode .example-box .note {
  color: var(--text-tertiary) !important;
}

.dark-mode .warning-box {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 8px;
  padding: 1rem;
  color: var(--text-primary);
}

.dark-mode .warning-box.danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.dark-mode .warning-box strong {
  color: var(--text-primary) !important;
}

.dark-mode .info-box {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 8px;
  padding: 1rem;
  color: var(--text-primary);
}

.dark-mode .info-box.success {
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.dark-mode .info-box strong {
  color: var(--text-primary) !important;
}

.dark-mode .info-box p {
  color: var(--text-primary) !important;
}

.dark-mode .consequence-box {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.dark-mode .consequence-box h3 {
  color: var(--text-primary) !important;
}

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

.dark-mode .consequence-box ul li {
  color: var(--text-secondary) !important;
}

.dark-mode .motifs-grid {
  gap: 1rem;
}

.dark-mode .motif-card {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
}

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

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

.dark-mode .steps-container {
  background: transparent;
}

.dark-mode .step {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.5rem;
}

.dark-mode .step-number {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.dark-mode .step-content h4 {
  color: var(--text-primary) !important;
}

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

.dark-mode .action-box {
  background: transparent;
}

.dark-mode .submit-button,
.dark-mode .secondary-button {
  background: #0081A1 !important;
  color: #ffffff !important;
  text-decoration: none;
}

.dark-mode .submit-button:hover,
.dark-mode .secondary-button:hover {
  box-shadow: 0 4px 12px rgba(0, 129, 161, 0.4);
}

.dark-mode .status-grid {
  gap: 1rem;
}

.dark-mode .status-card {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
}

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

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

.dark-mode .status-card.status-pending {
  border-left: 4px solid #3b82f6 !important;
}

.dark-mode .status-card.status-review {
  border-left: 4px solid #f59e0b !important;
}

.dark-mode .status-card.status-accepted {
  border-left: 4px solid #22c55e !important;
}

.dark-mode .status-card.status-rejected {
  border-left: 4px solid #ef4444 !important;
}

.dark-mode .contact-grid {
  gap: 1rem;
}

.dark-mode .contact-card {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
}

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

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

.dark-mode .contact-card a {
  color: var(--primary) !important;
}

/* ===== Student Proof Submit/Edit - File Preview Section Fixes ===== */
.dark-mode #files_preview {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
}

.dark-mode #files_preview h4 {
  color: var(--text-primary) !important;
}

.dark-mode #files_list {
  color: var(--text-primary);
}

.dark-mode #files_list .file-item,
.dark-mode .file-preview-item {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px;
  padding: 0.75rem;
  color: var(--text-primary);
}

.dark-mode #total_size {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.dark-mode #file_size_warning {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid #ef4444 !important;
  color: #f87171 !important;
}

/* Existing files list in edit mode */
.dark-mode .existing-file-item,
.dark-mode #existing-files-list .existing-file-item {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.dark-mode .existing-file-item div {
  color: var(--text-primary) !important;
}

.dark-mode .existing-file-item div[style*="color: #666"] {
  color: var(--text-secondary) !important;
}

/* New files add section */
.dark-mode div[style*="background: #e7f3ff"],
.dark-mode div[style*="background-color: #e7f3ff"] {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.dark-mode div[style*="background: #e7f3ff"] label,
.dark-mode div[style*="background-color: #e7f3ff"] label {
  color: var(--primary) !important;
}

.dark-mode #new-files-container .file-item,
.dark-mode .new-file-item {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Submission delay warning */
.dark-mode .manager-comment-section,
.dark-mode div[style*="background-color: #fff3cd"],
.dark-mode div[style*="background: #fff3cd"] {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 2px solid rgba(245, 158, 11, 0.5) !important;
}

.dark-mode .manager-comment-section h3,
.dark-mode div[style*="background-color: #fff3cd"] h3 {
  color: #fbbf24 !important;
}

.dark-mode .manager-comment-section p,
.dark-mode div[style*="background-color: #fff3cd"] p,
.dark-mode div[style*="color: #856404"] {
  color: #fde68a !important;
}

/* ===== Student Home Page - Modal Dark Mode Fixes ===== */
.dark-mode .modal {
  background: rgba(0, 0, 0, 0.8);
}

.dark-mode .modal-content,
.dark-mode #absenceModalContent,
.dark-mode #proofModalContent {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
}

.dark-mode .modal-close {
  color: var(--text-secondary);
  background: transparent;
}

.dark-mode .modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.dark-mode .modal-title {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color);
}

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

.dark-mode .modal-info-group {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.dark-mode .modal-info-item {
  border-bottom-color: var(--border-color);
}

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

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

.dark-mode .modal-status-section {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
}

.dark-mode .modal-files-section {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
}

.dark-mode .modal-files-section a {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.dark-mode .modal-comment-section {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.dark-mode .modal-comment-box {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px;
  padding: 0.75rem;
  color: var(--text-primary) !important;
}

/* Modal action section */
.dark-mode .modal-action-section {
  background: transparent;
}

.dark-mode .modal-action-section .btn-add-info {
  background: #0081A1 !important;
  color: #ffffff !important;
}

/* Evaluation section in modal */
.dark-mode #evaluationSection,
.dark-mode div[style*="background-color: #fff3cd"][style*="padding: 15px"] {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.dark-mode #evaluationSection h3,
.dark-mode div[style*="background-color: #fff3cd"] h3[style*="color: #856404"] {
  color: #fbbf24 !important;
}

/* Makeup section in modal */
.dark-mode #makeupSection,
.dark-mode div[style*="background-color: #d1ecf1"] {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.dark-mode #makeupSection h3,
.dark-mode div[style*="background-color: #d1ecf1"] h3[style*="color: #0c5460"] {
  color: #60a5fa !important;
}

/* ===== Student Absences & Proofs Pages - Table Row Hover Fix ===== */
.dark-mode #absenceTable tbody tr,
.dark-mode #proofsTable tbody tr {
  background: var(--bg-card) !important;
  transition: background-color 0.2s ease;
}

.dark-mode #absenceTable tbody tr:hover,
.dark-mode #proofsTable tbody tr:hover {
  background: var(--bg-tertiary) !important;
  background-color: var(--bg-tertiary) !important;
}

.dark-mode #absenceTable tbody tr:hover td,
.dark-mode #proofsTable tbody tr:hover td {
  background: var(--bg-tertiary) !important;
}

/* Fix alternating row colors with hover */
.dark-mode #absenceTable tbody tr:nth-child(even),
.dark-mode #proofsTable tbody tr:nth-child(even) {
  background: var(--bg-secondary) !important;
}

.dark-mode #absenceTable tbody tr:nth-child(even):hover,
.dark-mode #proofsTable tbody tr:nth-child(even):hover,
.dark-mode #absenceTable tbody tr:nth-child(even):hover td,
.dark-mode #proofsTable tbody tr:nth-child(even):hover td {
  background: var(--bg-tertiary) !important;
}

/* ===== Student Home Page - Justificatifs Table Column Width Fix ===== */
.dark-mode .absences-table th,
.dark-mode .absences-table td {
  white-space: nowrap;
}

/* Make Missed hours and Submission date columns narrower */
.dark-mode .absences-table th:nth-child(3),
.dark-mode .absences-table td:nth-child(3) {
  width: auto;
  min-width: 80px;
}

/* ===== Planifier Rattrapage - Border Fix ===== */
.dark-mode .main-content .section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px;
}

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

.dark-mode .form-row {
  background: transparent !important;
  border: none !important;
}

.dark-mode .form-group {
  background: transparent !important;
  border: none !important;
}

.dark-mode .form-group:not(.filter-group) {
  border: none !important;
}

.dark-mode .form-actions {
  background: transparent !important;
  border: none !important;
}

/* Fix ugly borders on planifier rattrapage form elements */
.dark-mode .main-content form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.dark-mode .main-content .section form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.dark-mode .main-content .section form .form-group {
  background: transparent !important;
  border: none !important;
}

/* ===== Login Page - Form Fix (Don't break login page) ===== */
/* Scope the form background to specific pages only, not login */
.dark-mode main form:not(.login-form):not(.form-container form) {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
}

/* Exclude forms inside sections from double styling */
.dark-mode .section form,
.dark-mode .filter-form,
.dark-mode main .section form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ===== Points Penalty Section Fix ===== */
.dark-mode .points-penalty,
.dark-mode div[style*="background: #fee2e2"],
.dark-mode div[style*="background: #dcfce7"] {
  background: var(--bg-tertiary) !important;
}


.dark-mode div[style*="background: #fee2e2"] span,
.dark-mode div[style*="background: #dcfce7"] span {
  color: var(--text-primary) !important;
}

.dark-mode div[style*="background: #fee2e2"] strong[style*="color: #dc2626"] {
  color: #f87171 !important;
}

.dark-mode div[style*="background: #dcfce7"] strong[style*="color: #16a34a"] {
  color: #4ade80 !important;
}

/* ===== Help Text in Forms ===== */
.dark-mode .help-text {
  color: var(--text-secondary) !important;
}

.dark-mode p.help-text[style*="color: #e36153ff"],
.dark-mode p.help-text[style*="color: #6c757d"] {
  color: var(--text-secondary) !important;
}

/* ===== Readonly Input Fields ===== */
.dark-mode input[readonly],
.dark-mode input[style*="background-color: #e9ecef"] {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  cursor: not-allowed;
}

/* ===== Student Proof Submit - Course List & Recap Dark Mode ===== */
/* Courses container */
.dark-mode #courses_list,
.dark-mode #courses_container {
  background: transparent;
  color: var(--text-primary);
}

.dark-mode .courses-container {
  background: transparent;
}

.dark-mode .course-item {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.dark-mode .course-item.selected {
  border-color: var(--primary) !important;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
}

.dark-mode .course-item:hover {
  border-color: var(--primary) !important;
}

.dark-mode .course-button {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.dark-mode .course-checkbox {
  background: var(--bg-tertiary);
}

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

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

.dark-mode .course-details {
  background: var(--bg-tertiary) !important;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.dark-mode .course-info {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.dark-mode .course-info h2 {
  color: var(--text-primary);
}

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

.dark-mode .course-info .info-value {
  color: var(--text-primary) !important;
}

.dark-mode .courses-summary {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  color: var(--text-primary) !important;
  text-align: center;
}

.dark-mode .courses-summary strong {
  color: var(--primary) !important;
}

/* Absence recap section */
.dark-mode #absence_recap {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  color: var(--text-primary);
}

.dark-mode .recap-title {
  color: var(--text-primary) !important;
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.dark-mode .recap-stats {
  background: transparent;
}

.dark-mode .recap-item {
  background: var(--bg-tertiary) !important;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

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

.dark-mode .recap-value {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  font-weight: 600;
}

.dark-mode .recap-empty {
  color: var(--text-secondary) !important;
  font-style: italic;
}

.dark-mode .course-types-list {
  margin-top: 0.25rem;
}

.dark-mode .course-type-badge {
  background: var(--primary) !important;
  color: #ffffff !important;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85em;
  margin-right: 0.25rem;
  display: inline-block;
}

.dark-mode .recap-item.evaluation-alert {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.dark-mode .recap-item.evaluation-alert .recap-value {
  color: #f87171 !important;
}

/* ===== Student Proof Validation Page Dark Mode ===== */
.dark-mode .container {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary);
}

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

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

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

.dark-mode .container ul {
  color: var(--text-primary);
}

.dark-mode .container ul li {
  color: var(--text-primary) !important;
}

.dark-mode .container ul li strong {
  color: var(--text-primary) !important;
}

.dark-mode .container p {
  color: var(--text-secondary);
}

/* Absence statistics section */
.dark-mode .absence-statistics {
  background: none !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.dark-mode .absence-statistics h3 {
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.dark-mode .stats-container {
  background: transparent !important;
}

.dark-mode .stats-summary {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.dark-mode .stat-item {
  background-color: var(--bg-card);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.dark-mode .stat-item:last-child {
  border-bottom: none;
}

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

.dark-mode .stat-value {
  background-color: var(--bg-tertiary);
  color: var(--text-primary) !important;
  font-weight: 600;
}

.dark-mode .course-types {
  margin-top: 0.25rem;
}

.dark-mode .course-type-tag {
  background: var(--primary) !important;
  color: #ffffff !important;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85em;
  margin-right: 0.25rem;
  display: inline-block;
}

.dark-mode .stat-item.evaluation-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.dark-mode .stat-item.evaluation-warning .stat-label {
  color: #fbbf24 !important;
}

.dark-mode .evaluation-count {
  color: #fbbf24 !important;
  font-weight: bold;
}

/* Courses details section */
.dark-mode .courses-details {
  background: none !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.dark-mode .courses-details h4 {
  color: var(--text-primary) !important;
  margin-bottom: 0.75rem;
}

.dark-mode .courses-list {
  background: transparent;
}

.dark-mode .course-detail-item {
  background: none !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary) !important;
}

/* Evaluation details section */
.dark-mode .evaluation-details {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.dark-mode .evaluation-details h4 {
  color: #fbbf24 !important;
  margin-bottom: 0.75rem;
}

.dark-mode .evaluation-list {
  background: transparent;
}

.dark-mode .evaluation-detail {
  background: none !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

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

.dark-mode .eval-header strong {
  color: var(--text-primary) !important;
}

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

.dark-mode .eval-details {
  color: var(--text-secondary) !important;
  margin-top: 0.25rem;
}

.dark-mode .eval-info {
  color: white;
  background: var(--bg-tertiary);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  margin-left: 0.25rem;
  font-size: 0.85em;
}

/* PDF download section */
.dark-mode .pdf-download {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

.dark-mode .btn-pdf {
  background: #0081A1 !important;
  color: #ffffff !important;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
}

.dark-mode .btn-pdf:hover {
  box-shadow: 0 4px 12px rgba(0, 129, 161, 0.4);
}

/* Warning message */
.dark-mode .warning-message {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 8px;
  padding: 1rem;
  color: #fbbf24 !important;
}

.dark-mode .warning-message strong {
  color: #fbbf24 !important;
}

/* Nested ul styling fix */
.dark-mode .container ul ul {
  background: transparent;
}

.dark-mode .container ul ul li {
  color: var(--text-secondary) !important;
}

/* ===== Student Home Page - Justificatifs Table Column Widths ===== */
/* These tables have 7 columns: Period, Reason, Missed hours, Submission date, Evaluation, Comment, Action */
/* Or 6 columns: Period, Reason, Missed hours, Submission date, Validation date, Evaluation */
.absences-section .absences-table:not(:has(th:nth-child(8))) {
  table-layout: auto;
}

.absences-section .absences-table:not(:has(th:nth-child(8))) th,
.absences-section .absences-table:not(:has(th:nth-child(8))) td {
  white-space: nowrap;
  padding: 0.75rem 0.5rem;
}

/* Missed hours column - narrower */
.absences-section .absences-table th:nth-child(3):not(:last-child),
.absences-section .absences-table td:nth-child(3):not(:last-child) {
  width: auto;
  min-width: 70px;
  text-align: center;
}

/* Date soumission column - narrower */
.absences-section .absences-table th:nth-child(4):not(:last-child),
.absences-section .absences-table td:nth-child(4):not(:last-child) {
  width: auto;
  min-width: 100px;
}

/* Dark mode - New UI elements (Bastien & Scapin compliance) */
.dark-mode .btn-cta {
  background: var(--primary);
  color: white;
}

.dark-mode .btn-cta:hover {
  background: var(--primary-hover);
}

.dark-mode .btn-primary-action {
  background: var(--primary);
  color: white;
}

.dark-mode .btn-primary-action:hover {
  background: var(--primary-hover);
  color: white;
}

.dark-mode .btn-secondary,
.dark-mode .btn.btn-secondary {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .btn-secondary:hover,
.dark-mode .btn.btn-secondary:hover {
  background-color: var(--border-dark);
}

.dark-mode .quick-actions a {
  color: white;
}

.dark-mode .page-title {
  color: var(--primary);
}

.dark-mode .filter-input label {
  color: var(--text-secondary);
}

.dark-mode .cta-section .btn-cta {
  box-shadow: 0 2px 8px rgba(0, 129, 161, 0.4);
}

/* ===== Responsive Card Tables - Dark Mode ===== */
/* Ces styles s'appliquent aux tableaux en format carte sur petits écrans */
@media (max-width: 992px) {
  .dark-mode .absences-table tr,
  .dark-mode #absenceTable tr,
  .dark-mode .table tr,
  .dark-mode table tr {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  }

  .dark-mode .absences-table tr:hover,
  .dark-mode #absenceTable tr:hover,
  .dark-mode .table tr:hover,
  .dark-mode table tr:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  }

  .dark-mode .absences-table td,
  .dark-mode #absenceTable td,
  .dark-mode .table td,
  .dark-mode table td {
    border-bottom-color: var(--border-color) !important;
  }

  /* Couleurs alternées pour mode sombre */
  .dark-mode .absences-table tr td:nth-child(odd),
  .dark-mode #absenceTable tr td:nth-child(odd),
  .dark-mode .table tr td:nth-child(odd),
  .dark-mode table tr td:nth-child(odd) {
    background-color: var(--bg-tertiary) !important;
  }

  .dark-mode .absences-table tr td:nth-child(even),
  .dark-mode #absenceTable tr td:nth-child(even),
  .dark-mode .table tr td:nth-child(even),
  .dark-mode table tr td:nth-child(even) {
    background-color: var(--bg-card) !important;
  }

  /* Labels des cellules */
  .dark-mode .absences-table td::before,
  .dark-mode #absenceTable td::before,
  .dark-mode .table td::before,
  .dark-mode table td::before {
    color: var(--text-secondary) !important;
  }

  /* Texte des cellules */
  .dark-mode .absences-table td,
  .dark-mode #absenceTable td,
  .dark-mode .table td,
  .dark-mode table td {
    color: var(--text-primary) !important;
  }

  /* Course info styling */
  .dark-mode .course-info .course-code {
    color: #22d3ee !important;
  }

  .dark-mode .course-info .course-name {
    color: var(--text-secondary) !important;
  }
}