/* =====================================================================
   كيم تحصيلي — app_theme.css
   Override theme that re-skins the admin website to match the Flutter app.
   Load LAST in base.html (after styles.css, Font Awesome and toastr).
   The sidebar/topbar shell lives in kt_shell.css. Light theme only.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;600;700&display=swap');

/* ---------- 1. Tokens ------------------------------------------------ */
:root {
  /* app identity */
  --kt-primary: #2563eb;
  --kt-primary-dark: #1d4ed8;
  --kt-primary-soft: #dbeafe;
  --kt-teal: #0d9488;          /* dark teal: readable white text (4.6:1) */
  --kt-teal-light: #4ecdc4;    /* app accent: used for highlights, never as text background */
  --kt-grad: linear-gradient(135deg, #0d9488 0%, #2563eb 100%);
  --kt-bg: #eef2f7;
  --kt-card: #ffffff;
  --kt-surface: #f8fafc;
  --kt-text: #1e293b;
  --kt-text-strong: #0f172a;
  --kt-muted: #64748b;
  --kt-line: #e2e8f0;
  --kt-success: #16a34a;  --kt-success-soft: #dcfce7;  --kt-success-text: #166534;
  --kt-warning: #f59e0b;  --kt-warning-soft: #fef3c7;  --kt-warning-text: #92400e;
  --kt-danger: #dc2626;   --kt-danger-soft: #fee2e2;   --kt-danger-text: #991b1b;
  --kt-info: #0891b2;     --kt-info-soft: #cffafe;     --kt-info-text: #155e75;
  --kt-purple: #7c3aed;
  --kt-purple-soft: #ede9fe;
  --kt-teal-soft: #ccfbf1;
  --kt-radius: 14px;
  --kt-radius-sm: 10px;
  --kt-radius-lg: 18px;
  --kt-shadow: 0 2px 12px rgba(15, 23, 42, .06);
  --kt-shadow-lg: 0 8px 24px rgba(15, 23, 42, .10);
  --kt-font: 'Readex Pro', Tahoma, 'Segoe UI', sans-serif;

  /* legacy variables used by styles.css and many templates: re-pointed to the new palette */
  --primary-color: var(--kt-primary);
  --secondary-color: var(--kt-success);
  --accent-color: var(--kt-purple);
  --dark-color: var(--kt-text);
  --light-color: var(--kt-surface);
  --danger-color: var(--kt-danger);
  --warning-color: var(--kt-warning);
  --success-color: var(--kt-success);
  --text-color: var(--kt-text);
  --border-radius: 12px;
  --box-shadow: var(--kt-shadow);
  /* page-local variables (students/list.html, teachers/list.html ...) */
  --primary: var(--kt-primary);
  --secondary: var(--kt-success);
  --dark: var(--kt-text);
  --danger: var(--kt-danger);
  --warning: var(--kt-warning);
  --light-bg: var(--kt-surface);
  --teal: var(--kt-teal);
  --blue: var(--kt-primary);
  --bg: var(--kt-bg);
  --card: var(--kt-card);
  --txt: var(--kt-text);
  --muted: var(--kt-muted);
  --line: var(--kt-line);
}

/* ---------- 2. Base: font, body, particles --------------------------- */
html { background: var(--kt-bg); }
body, body * { font-family: var(--kt-font); }
.fa, .fas, .far, .fa-solid, .fa-regular { font-family: 'Font Awesome 6 Free' !important; }
.fab, .fa-brands { font-family: 'Font Awesome 6 Brands' !important; }
code, pre, kbd, samp { font-family: ui-monospace, Menlo, Consolas, monospace; }

body {
  background: var(--kt-bg) !important;
  color: var(--kt-text);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; padding: 1.25rem 1.5rem !important; }
/* the floating particles don't belong to the app identity (recommend removing the markup in base.html) */
.particles-container { display: none !important; }

/* ---------- 4. Page titles / page headers ---------------------------- */
main > h2, main > div > h2:first-child, main > div > div > h2, .dashboard > h2, .page-title, .content-header h3 {
  color: var(--kt-text-strong) !important;
  font-weight: 800;
  font-size: 1.5rem;
  border-bottom: 0 !important;
  padding: 0 .9rem 0 0 !important;
  margin: .5rem 0 1.25rem !important;
  border-right: 5px solid var(--kt-primary);
  line-height: 1.3;
}
main > h2 i, main > div > h2:first-child i, main > div > div > h2 i, .dashboard > h2 i, .page-title i { color: var(--kt-teal) !important; margin-left: .35rem; }
/* app-style gradient page header (students/teachers list, notifications...) */
.students-header, .teachers-header, .page-header.gradient, .notifications-header {
  background: var(--kt-grad) !important;
  color: #fff !important;
  border-radius: var(--kt-radius-lg) var(--kt-radius-lg) 40px 40px / var(--kt-radius-lg) var(--kt-radius-lg) 22px 22px !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .2) !important;
  padding: 1.5rem 1.75rem 1.75rem !important;
}
.students-header h1, .teachers-header h1 { color: #fff !important; font-weight: 800; font-size: 1.6rem; }
.students-header h1 i, .teachers-header h1 i { color: #fff !important; opacity: .95; }
.students-header p, .teachers-header p { color: rgba(255,255,255,.78) !important; }

/* ---------- 5. Cards / sections / stat tiles ------------------------- */
.card, .section, .form-card, .content-container, .recent-activity, .charts-section,
.registration-control, .search-box, .empty-state, .table-container, .add-form, .gc-card,
.students-table, .quick-action-card, .chart-card, .backup-stat-card, .notification-item,
.curriculum-container .course-item, .question-card {
  background: var(--kt-card) !important;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: var(--kt-radius) !important;
  box-shadow: var(--kt-shadow) !important;
  color: var(--kt-text);
}
.card:hover, .section:hover { transform: none !important; box-shadow: var(--kt-shadow) !important; }
.card { padding: 1.25rem !important; margin: 0 0 1.25rem !important; }
.card:has(> .card-header), .card:has(> .card-body) { padding: 0 !important; }
.card > .card-body { padding: 1.25rem !important; }
.card-header, .card > .card-header {
  background: var(--kt-surface) !important;
  color: var(--kt-text-strong) !important;
  border-bottom: 1px solid var(--kt-line) !important;
  padding: .85rem 1.25rem !important;
  margin: 0 !important;
  font-weight: 700;
}
.card-header.bg-primary, .card-header.bg-dark, .card-header.bg-success, .card-header.bg-info,
.card-header.text-white {
  background: var(--kt-grad) !important;
  color: #fff !important;
}
.card-header h5, .card-header h4, .card-header h3 { color: inherit !important; font-weight: 700; margin: 0; }
.card-title { color: var(--kt-text-strong) !important; }
.section { padding: 1.25rem !important; }
.section-header { border-bottom: 1px solid var(--kt-line) !important; margin-bottom: 1rem; padding-bottom: .75rem; }
.section-header h3, .chart-header, .recent-backups h3 { color: var(--kt-text-strong) !important; font-weight: 700; }
.section-header h3 i, .chart-header i, .recent-backups h3 i { color: var(--kt-teal) !important; }
.add-form { border-style: solid !important; background: var(--kt-card) !important; }
.gc-card-head { background: var(--kt-grad) !important; color: #fff !important; border-radius: 0 !important; }

/* dashboard wrapper: was a dark navy gradient block */
.dashboard, .dashboard::before {
  background: transparent !important;
  color: var(--kt-text) !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dashboard::before { display: none !important; }

/* stat tiles (dashboard, students, teachers, notifications) */
.stat-card, .backup-stat-card {
  background: var(--kt-card) !important;
  border: 1px solid var(--kt-line) !important;
  border-top: 0 !important;
  border-radius: var(--kt-radius) !important;
  box-shadow: var(--kt-shadow) !important;
  overflow: hidden;
}
.stat-card::before { display: none !important; }
.stat-card:hover { transform: translateY(-2px); border-color: #cbd5e1 !important; box-shadow: var(--kt-shadow-lg) !important; }
.stat-card, .stat-card:nth-child(1), .stat-card:nth-child(2), .stat-card:nth-child(3), .stat-card:nth-child(4) { border-right: 4px solid var(--kt-primary) !important; }
.dashboard .stat-card:nth-child(2) { border-right-color: var(--kt-success) !important; }
.dashboard .stat-card:nth-child(3) { border-right-color: var(--kt-purple) !important; }
.dashboard .stat-card:nth-child(4) { border-right-color: var(--kt-warning) !important; }
.stat-card.active { border-right-color: var(--kt-success) !important; }
.stat-card.inactive { border-right-color: var(--kt-danger) !important; }
.stat-icon, .dashboard .stat-icon, .stat-card:nth-child(n) .stat-icon {
  background: var(--kt-primary-soft) !important;
  color: var(--kt-primary) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.stat-icon i, .stat-card:nth-child(n) .stat-icon i { color: inherit !important; }
.dashboard .stat-card:nth-child(2) .stat-icon { background: var(--kt-success-soft) !important; color: var(--kt-success) !important; }
.dashboard .stat-card:nth-child(3) .stat-icon { background: #ede9fe !important; color: var(--kt-purple) !important; }
.dashboard .stat-card:nth-child(4) .stat-icon { background: var(--kt-warning-soft) !important; color: #d97706 !important; }
.stat-info h3, .stat-label, .backup-stat-card .stat-label, .stat-card p { color: var(--kt-muted) !important; font-weight: 500 !important; font-size: .9rem !important; }
.stat-number, .dashboard .stat-number, .backup-stat-card .stat-number, .stat-card h3 { color: var(--kt-text-strong) !important; font-weight: 800 !important; }
.stat-card.total h3 { color: var(--kt-primary) !important; }
.stat-card.active h3 { color: var(--kt-success) !important; }
.stat-card.inactive h3 { color: var(--kt-danger) !important; }

/* dashboard: activity list, quick actions, charts, backups (all were white-on-dark) */
.activity-item { background: var(--kt-surface) !important; border: 1px solid var(--kt-line) !important; border-radius: var(--kt-radius-sm) !important; }
.activity-item:hover { background: #f1f5f9 !important; }
.activity-icon { background: var(--kt-primary-soft) !important; color: var(--kt-primary) !important; }
.activity-title, .activity-details p { color: var(--kt-text) !important; }
.activity-time { color: var(--kt-muted) !important; }
.loading-spinner, .loading-spinner span, .no-data, .no-backups { color: var(--kt-muted) !important; background: transparent !important; }
.view-all { color: var(--kt-primary) !important; background: var(--kt-primary-soft) !important; border: 0 !important; border-radius: 999px !important; font-weight: 600; }
.quick-action-card { color: var(--kt-text) !important; }
.quick-action-card::before { display: none !important; }
.quick-action-card:hover { background: var(--kt-surface) !important; border-color: #bfdbfe !important; transform: translateY(-2px); }
.quick-action-card i { color: var(--kt-primary) !important; }
.chart-card, .progress-item { background: var(--kt-surface) !important; border: 1px solid var(--kt-line) !important; }
.progress-label { color: var(--kt-text) !important; }
.progress-bar { background: var(--kt-line) !important; }
.progress-fill { background: var(--kt-grad) !important; }
.backup-item { background: var(--kt-surface) !important; border: 1px solid var(--kt-line) !important; }
.backup-info h4, .file-name, .sync-status, .toggle-text, .page-info, .scope-label strong, .security-label strong,
.method-label strong, .restore-label strong, .custom-option span, .schedule-option span, .notification-option span,
.file-upload-area p { color: var(--kt-text) !important; }
.backup-info p, .backup-info small, .backup-description, .file-size, .sync-details, .scope-label small,
.security-label small, .method-label small, .restore-label small, .file-upload-area small, .form-group small { color: var(--kt-muted) !important; }
.user-settings-sync-bar { background: var(--kt-card) !important; border: 1px solid var(--kt-line); border-radius: var(--kt-radius) !important; color: var(--kt-text) !important; }
.form-section, .restore-method, .restore-settings, .file-upload-area { background: var(--kt-surface) !important; border: 1px solid var(--kt-line) !important; border-radius: var(--kt-radius-sm) !important; }
.form-section h3, .form-section h3 i { color: var(--kt-text-strong) !important; }
.form-group label { color: var(--kt-text) !important; }
.form-group input, .form-group textarea, .form-group select, .search-box input, .filter-options select {
  background: #fff !important; color: var(--kt-text) !important; border: 1px solid #cbd5e1 !important;
}

/* registration control / search bar (students) */
.registration-text h4, .setting-info h5 { color: var(--kt-text-strong) !important; }
.registration-text p, .setting-info p { color: var(--kt-muted) !important; }
.registration-icon.open, .registration-status.open, .status-badge.active { background: var(--kt-success-soft) !important; color: var(--kt-success-text) !important; }
.registration-icon.closed, .registration-status.closed, .status-badge.inactive { background: var(--kt-danger-soft) !important; color: var(--kt-danger-text) !important; }
.search-box { padding: .75rem 1rem !important; border-radius: var(--kt-radius) !important; }
.search-box input { border-radius: var(--kt-radius-sm) !important; padding: .6rem .9rem !important; }
.search-box input:focus { border-color: var(--kt-primary) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important; outline: 0; }

/* empty state */
.empty-state { padding: 3rem 1rem !important; text-align: center; }
.empty-state i { color: #cbd5e1 !important; font-size: 2.6rem; }
.empty-state h3 { color: var(--kt-text) !important; font-weight: 700; }
.empty-state p { color: var(--kt-muted) !important; }

/* ---------- 6. Buttons ------------------------------------------------ */
.btn, button.btn, a.btn, input[type="submit"].btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: var(--kt-radius-sm) !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  padding: .55rem 1rem !important;
  line-height: 1.3 !important;
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
  background: var(--kt-primary) !important;
  color: #fff !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
}
.btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(15,23,42,.12) !important; filter: brightness(1.05); }
.btn:disabled, .btn.disabled { opacity: .5 !important; transform: none !important; box-shadow: none !important; filter: none; }
.btn-primary, .btn-edit, .btn-toggle, .add-filter-btn, .page-btn, .btn-restore, .upload-btn, .select-backup-btn,
.backup-action-btn, .search-box .btn-primary, .search-box .btn-primary, .add-form button, .gc-btn.primary { background: var(--kt-primary) !important; color: #fff !important; }
.btn-success, .btn-add, .add-btn, .btn-save, .btn-create, .export-excel, .backup-action-btn.primary, .btn-toggle-reg.close { background: var(--kt-success) !important; color: #fff !important; }
.btn-danger, .btn-delete, .export-pdf, .remove-file, .backup-action-btn.danger, .btn-toggle-reg.open { background: var(--kt-danger) !important; color: #fff !important; }
.btn-warning, .export-csv { background: var(--kt-warning) !important; color: #3b2300 !important; }
.btn-info { background: var(--kt-info) !important; color: #fff !important; }
.btn-secondary, .btn-cancel, .settings-btn { background: #e2e8f0 !important; color: var(--kt-text) !important; }
.btn-dark { background: var(--kt-text-strong) !important; color: #fff !important; }
.btn-light { background: #fff !important; color: var(--kt-text) !important; border-color: var(--kt-line) !important; }
.btn-link { background: transparent !important; color: var(--kt-primary) !important; box-shadow: none !important; }
.btn-outline-primary { background: #fff !important; color: var(--kt-primary) !important; border-color: #bfdbfe !important; }
.btn-outline-primary:hover, .btn-outline-primary.active { background: var(--kt-primary-soft) !important; }
.btn-outline-success { background: #fff !important; color: var(--kt-success-text) !important; border-color: #86efac !important; }
.btn-outline-danger { background: #fff !important; color: var(--kt-danger) !important; border-color: #fca5a5 !important; }
.btn-outline-danger:hover { background: var(--kt-danger-soft) !important; }
.btn-outline-warning { background: #fff !important; color: #b45309 !important; border-color: #fcd34d !important; }
.btn-outline-warning:hover { background: var(--kt-warning-soft) !important; }
.btn-outline-secondary { background: #fff !important; color: var(--kt-muted) !important; border-color: #cbd5e1 !important; }
.btn-outline-info { background: #fff !important; color: var(--kt-info-text) !important; border-color: #67e8f9 !important; }
.btn-outline-dark { background: #fff !important; color: var(--kt-text-strong) !important; border-color: #cbd5e1 !important; }
.btn-sm, .btn-group-sm > .btn { padding: .35rem .7rem !important; font-size: .8rem !important; border-radius: 8px !important; }
.btn-lg { padding: .75rem 1.4rem !important; font-size: 1rem !important; border-radius: 12px !important; }
.btn-group .btn { border-radius: var(--kt-radius-sm) !important; margin: 0 !important; }
.btn-group .btn + .btn { margin-right: 4px !important; }
.btn-toolbar { gap: .5rem; flex-wrap: wrap; }
.btn-toolbar .btn { margin: 0 !important; }
/* AI classify link has an inline purple gradient: harmonised to the identity purple */
a.btn[href*="classify"] { background: var(--kt-purple) !important; }
.btn-settings-reg { border: 1.5px solid #bfdbfe !important; color: var(--kt-primary) !important; background: #fff !important; border-radius: var(--kt-radius-sm) !important; }
.btn-settings-reg:hover { background: var(--kt-primary) !important; color: #fff !important; }
.btn-action { border-radius: 8px !important; }
.gc-btn { border-radius: 8px !important; font-weight: 700; }
/* plain <button> elements in legacy pages (e.g. grade config forms) */
button:not(.btn):not(.modal-close):not(.close):not(.btn-close):not([class*="toggle"]):not(.page-link) {
  font-family: var(--kt-font); border-radius: var(--kt-radius-sm) !important; font-weight: 700;
}

/* ---------- 7. Tables ------------------------------------------------- */
.table-container, .table-responsive { border-radius: var(--kt-radius) !important; border: 1px solid var(--kt-line); background: #fff; box-shadow: var(--kt-shadow) !important; }
table, .table { background: #fff !important; border-radius: 0 !important; font-size: .9rem !important; color: var(--kt-text); }
thead, table thead, .questions-table thead, .students-table thead, .table-dark, thead.table-dark, .table > thead,
.gc-table thead, tr[style*="background:#f1f5f9"] {
  background: var(--kt-surface) !important;
  background-image: none !important;
  color: var(--kt-text-strong) !important;
  --bs-table-bg: var(--kt-surface);
}
table th, .table th, .questions-table th, .students-table th, .table-dark th, .gc-table th, .table > thead > tr > th {
  background: var(--kt-surface) !important;
  color: var(--kt-text-strong) !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  border-bottom: 1px solid var(--kt-line) !important;
  padding: .8rem .85rem !important;
  text-shadow: none !important;
}
.questions-table th::after { display: none !important; }
table td, .table td, .questions-table td, .students-table td, .gc-table td {
  color: var(--kt-text) !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: .7rem .85rem !important;
  background: transparent !important;
}
table tbody, .questions-table tbody { background: #fff !important; }
table tbody tr, .questions-table tbody tr, table tbody tr:nth-child(even), .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: #fff !important;
  --bs-table-accent-bg: transparent;
}
table tbody tr:nth-child(even) td, .table-striped tbody tr:nth-child(even) td { background: #fafbfd !important; }
table tbody tr:hover td, .questions-table tr:hover td, .table-hover tbody tr:hover td, .students-table tbody tr:hover td { background: #eff6ff !important; color: var(--kt-text) !important; }
table .btn, .table .btn, .questions-table .btn { padding: .3rem .6rem !important; font-size: .78rem !important; border-radius: 8px !important; }
.questions-table .btn-edit { background: var(--kt-primary) !important; }
.questions-table .btn-delete { background: var(--kt-danger) !important; }
.last-login { color: var(--kt-muted) !important; }

/* ---------- 8. Forms -------------------------------------------------- */
.form-control, .form-select, .filter-select, .message-input, .analyze-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not(.toggle-switch input),
select, textarea {
  font-family: var(--kt-font);
  background: #fff !important;
  color: var(--kt-text) !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--kt-radius-sm) !important;
  padding: .55rem .8rem !important;
  font-size: .92rem !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  outline: 0 !important;
  border-color: var(--kt-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
}
::placeholder { color: #94a3b8 !important; opacity: 1; }
label, .form-label, .form-group label, .add-form label { color: var(--kt-text) !important; font-weight: 600 !important; font-size: .9rem; }
.form-text, .text-muted, small.text-muted { color: var(--kt-muted) !important; }
.form-check-input:checked { background-color: var(--kt-primary); border-color: var(--kt-primary); }
.toggle-switch input:checked + .toggle-slider, .toggle-switch input[type="checkbox"]:checked + .toggle-label .toggle-slider { background: var(--kt-success) !important; }
.setting-item { background: var(--kt-surface) !important; border: 1px solid var(--kt-line) !important; border-radius: var(--kt-radius-sm) !important; }
/* date inputs that the dual (hijri/gregorian) picker turns into buttons */
.dual-date-btn, button.dual-date { background: #fff !important; color: var(--kt-text) !important; border: 1px solid #cbd5e1 !important; }

/* ---------- 9. Badges / pills ---------------------------------------- */
.badge, .tag, .label, .gc-badge, .status-badge, .order-badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: .75rem !important;
  padding: .3rem .7rem !important;
  line-height: 1.2 !important;
}
.badge.bg-primary, .badge-primary { background: var(--kt-primary) !important; color: #fff !important; }
.badge.bg-success, .badge-success { background: var(--kt-success-soft) !important; color: var(--kt-success-text) !important; }
.badge.bg-danger, .badge-danger { background: var(--kt-danger-soft) !important; color: var(--kt-danger-text) !important; }
.badge.bg-warning, .badge-warning { background: var(--kt-warning-soft) !important; color: var(--kt-warning-text) !important; }
.badge.bg-info, .badge-info { background: var(--kt-info-soft) !important; color: var(--kt-info-text) !important; }
.badge.bg-secondary, .badge-secondary { background: #e2e8f0 !important; color: var(--kt-text) !important; }
.badge.bg-dark, .badge-dark { background: var(--kt-text-strong) !important; color: #fff !important; }
.badge.fs-6 { font-size: .85rem !important; padding: .45rem .9rem !important; }

/* ---------- 10. Alerts / toasts -------------------------------------- */
.alert, .flash, .message { border-radius: var(--kt-radius-sm) !important; border-width: 1px !important; font-size: .9rem !important; padding: .8rem 1rem !important; }
.alert-success, .message-success { background: var(--kt-success-soft) !important; border-color: #86efac !important; color: var(--kt-success-text) !important; }
.alert-danger, .message-error { background: var(--kt-danger-soft) !important; border-color: #fca5a5 !important; color: var(--kt-danger-text) !important; }
.alert-warning, .message-warning { background: var(--kt-warning-soft) !important; border-color: #fcd34d !important; color: var(--kt-warning-text) !important; }
.alert-info, .message-info { background: var(--kt-primary-soft) !important; border-color: #93c5fd !important; color: #1e3a8a !important; }
#toast-container > div { border-radius: var(--kt-radius-sm) !important; box-shadow: var(--kt-shadow-lg) !important; opacity: 1 !important; font-family: var(--kt-font); }
#toast-container > .toast-success { background-color: var(--kt-success) !important; }
#toast-container > .toast-error { background-color: var(--kt-danger) !important; }
#toast-container > .toast-info { background-color: var(--kt-primary) !important; }
#toast-container > .toast-warning { background-color: #d97706 !important; }

/* ---------- 11. Modals ------------------------------------------------ */
.modal-overlay { background: rgba(15, 23, 42, .5) !important; backdrop-filter: blur(2px); }
.modal-content, .modal-container, .modal .box {
  background: #fff !important;
  border-radius: var(--kt-radius-lg) !important;
  border: 0 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25) !important;
  color: var(--kt-text);
  overflow: hidden;
}
.modal-header, .popup-header {
  background: var(--kt-grad) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  padding: .9rem 1.25rem !important;
}
.modal-header h3, .modal-header h4, .modal-header h5, .modal-header .modal-title, .modal-title { color: inherit !important; font-weight: 700 !important; }
.modal-container .modal-title { color: var(--kt-text-strong) !important; }
.modal-close { background: rgba(255,255,255,.22) !important; color: #fff !important; border-radius: 8px !important; }
.modal-close:hover { background: rgba(255,255,255,.35) !important; }
.modal-body, .popup-body { background: #fff !important; color: var(--kt-text) !important; }
.modal-footer, .popup-footer { border-top: 1px solid var(--kt-line) !important; background: var(--kt-surface) !important; }

/* ---------- 12. Pagination / misc ------------------------------------ */
.pagination .page-link { border-radius: 8px !important; border: 1px solid var(--kt-line) !important; color: var(--kt-primary) !important; background: #fff !important; }
.pagination .page-item.active .page-link { background: var(--kt-primary) !important; border-color: var(--kt-primary) !important; color: #fff !important; }
.pagination .page-item.disabled .page-link { color: #94a3b8 !important; }
a { color: var(--kt-primary); }
hr { border-color: var(--kt-line); }
.text-primary { color: var(--kt-primary) !important; }
.bg-primary:not(.badge):not(.card-header) { background: var(--kt-primary) !important; }
.bg-light { background: var(--kt-surface) !important; }
.list-group-item { border-color: var(--kt-line) !important; }
.list-group-item.active { background: var(--kt-primary) !important; border-color: var(--kt-primary) !important; }
.accordion-header, .collapse-header { background: var(--kt-surface) !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid var(--kt-bg); }

/* ---------- 13. Footer ----------------------------------------------- */
footer {
  background: #fff !important;
  color: var(--kt-muted) !important;
  border-top: 1px solid var(--kt-line);
  padding: 1.1rem 0 !important;
  margin-top: 2rem !important;
  font-size: .85rem;
}
footer p { color: var(--kt-muted) !important; margin: 0; }
.footer-links a { color: var(--kt-primary) !important; font-weight: 600; }
.footer-links a:hover { color: var(--kt-primary-dark) !important; text-decoration: underline; }

/* ---------- 14. Keep the light theme when the OS is in dark mode ----- */
@media (prefers-color-scheme: dark) {
  .card, .stat-card, .section, .questions-table tbody tr, .questions-table tbody tr:nth-child(even) {
    background: var(--kt-card) !important;
    background-color: var(--kt-card) !important;
    border-color: var(--kt-line) !important;
  }
  .questions-table tbody tr:hover { background-color: #eff6ff !important; }
}

/* ---------- 15. Mobile ----------------------------------------------- */
@media (max-width: 768px) {
  main { padding: 1rem !important; }
  .students-header, .teachers-header { border-radius: var(--kt-radius) !important; }
}

/* ---------- 16. Iteration fixes ------------------------------------- */
/* page titles: no shadow, always right-aligned so the accent bar hugs the text */
main > h2, main > div > h2:first-child, main > div > div > h2, .dashboard > h2 { text-shadow: none !important; text-align: right !important; display: block; }
.card h2, .form-card h2, .modal-content h2, .modal-container h2 { border-right: 0 !important; }
/* cards: let dropdowns/buttons overflow, round the header instead */
.card { overflow: visible !important; }
.card > .card-header:first-child { border-radius: var(--kt-radius) var(--kt-radius) 0 0 !important; }
.card > .card-body:last-child { padding-bottom: 1.5rem !important; }
/* segmented control (table / cards view toggle) */
.view-toggle, .btn-group.view-toggle { display: inline-flex !important; background: #fff; border: 1px solid var(--kt-line); border-radius: 12px; padding: 3px; box-shadow: none !important; overflow: visible; gap: 3px; }
.view-toggle .btn, .view-toggle .btn:first-child, .view-toggle .btn:last-child { border-radius: 9px !important; margin: 0 !important; padding: .45rem .9rem !important; }
.view-toggle .btn.active { background: var(--kt-primary) !important; color: #fff !important; box-shadow: none !important; }
.view-toggle .btn:not(.active) { background: transparent !important; color: var(--kt-muted) !important; border-color: transparent !important; }
.view-toggle .btn:not(.active):hover { background: var(--kt-surface) !important; color: var(--kt-text) !important; }
.d-flex.justify-content-between { gap: .75rem; flex-wrap: wrap; }
/* contrast pass: darker green on solid buttons (white text 4.0:1), muted texts, dual-date button */
.btn-success, .btn-add, .add-btn, .btn-save, .btn-create, .export-excel, .backup-action-btn.primary, .btn-toggle-reg.close, .stat-card.active h3 { background-color: #15803d !important; }
.stat-card.active h3 { background: none !important; color: #15803d !important; }
table td.text-muted, .table td.text-muted, td.text-muted, .text-muted, [style*="color:#94a3b8"], [style*="color: #94a3b8"] { color: var(--kt-muted) !important; }
.add-form button.dd-btn, button.dd-btn, .dd-btn { background: #fff !important; color: var(--kt-text) !important; border: 1px solid #cbd5e1 !important; border-radius: var(--kt-radius-sm) !important; font-weight: 500 !important; }
.dd-btn .dd-ph { color: #64748b !important; }
.no-data, .questions-table .no-data { background: var(--kt-surface) !important; border: 1px solid var(--kt-line) !important; border-radius: var(--kt-radius-sm) !important; box-shadow: none !important; color: var(--kt-muted) !important; }
/* selects keep a chevron (styles.css draws one with appearance:none and a background-image we reset) */
select, .form-select {
  -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat left .8rem center / 14px 10px !important;
  padding-left: 2.2rem !important;
}
/* buttons hidden inline/by JS must stay hidden */
.btn[style*="display:none"], .btn[style*="display: none"], [hidden] { display: none !important; }

/* ---------- 17. Icons that replaced emoji -------------------------- */
.kt-ico { font-size: .95em; margin-inline: 1px; }
.kt-ico.kt-ok { color: var(--kt-success); }
.kt-ico.kt-bad { color: var(--kt-danger); }
.kt-ico.kt-warn { color: var(--kt-warning); }
.kt-ico.kt-orange { color: #ea580c; }
.kt-ico.kt-gold { color: #ca8a04; }
.kt-ico.kt-silver { color: #94a3b8; }
.kt-ico.kt-bronze { color: #b45309; }

/* ---------- 18. Pages that were dark --------------------------------- */
/* styles.css draws every h1 as gradient text (made for the old dark header) */
h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--kt-text-strong); text-shadow: none; }
.dates-header, .dates-header h1 { color: var(--kt-text-strong) !important; text-align: right !important; }
.dates-header p { color: var(--kt-muted) !important; text-align: right; }
.dates-card-header h2, .dates-card-header i, .date-field-label i { color: var(--kt-teal) !important; }
.dates-card:hover { transform: none !important; }
body.notifications-page { background: var(--kt-bg) !important; }
.notifications-page .notifications-container { background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 1.25rem 1.5rem !important; min-height: 0 !important; }
.notifications-page .notifications-container::before { display: none !important; }
.notifications-page .notifications-header h1 { text-shadow: none !important; }
.notifications-page .notifications-stats .stat-item { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.3) !important; backdrop-filter: none !important; }
.notifications-page .notifications-stats .stat-number { color: #fff !important; }
.notifications-page .notifications-stats .stat-label { color: rgba(255,255,255,.9) !important; }
[style*="linear-gradient"] > h1 { color: #fff; }