/* ============================================================
   themes.css — application theme layer
   Three data-theme values: classic | stripi | stripi-dark
   All Stripi tokens use flat colours — no linear-gradient()
   ============================================================ */

/* ── CLASSIC (default — Dashmix look) ──────────────────────── */
:root,
[data-theme="classic"] {
  --app-primary:             #0665d0;
  --app-primary-dark:        #0554b3;
  --app-body-bg:             #edf0f7;
  --app-body-color:          #343a40;
  --app-surface:             #ffffff;
  --app-surface-soft:        #f8f9fa;
  --app-border:              #e9ecef;
  --app-muted:               #6c757d;
  --app-sidebar-bg:          #1e3c72;
  --app-header-bg:           rgba(255, 255, 255, 0.95);
  --app-header-border:       rgba(0, 0, 0, 0.08);
  --app-card-shadow:         0 4px 25px 0 rgba(0, 0, 0, 0.1);
  --app-font-family:         inherit;
  --app-font-weight-display: 400;
  --app-letter-spacing:      0;
  --app-btn-radius:          0.375rem;
  --bs-primary:              #0665d0;
  --bs-body-bg:              #edf0f7;
  --bs-body-color:           #343a40;
}

/* ── STRIPI LIGHT ───────────────────────────────────────────── */
[data-theme="stripi"] {
  --app-primary:             #533afd;
  --app-primary-dark:        #4434d4;
  --app-body-bg:             #f6f9fc;
  --app-body-color:          #0d253d;
  --app-surface:             #ffffff;
  --app-surface-soft:        #f6f9fc;
  --app-border:              #e3e8ee;
  --app-muted:               #64748d;
  --app-sidebar-bg:          #1c1e54;
  --app-header-bg:           rgba(255, 255, 255, 0.97);
  --app-header-border:       #e3e8ee;
  --app-card-shadow:         0 1px 3px rgba(0, 55, 112, 0.08);
  --app-font-family:         'Inter', 'SF Pro Display', system-ui, sans-serif;
  --app-font-weight-display: 300;
  --app-letter-spacing:      -0.02em;
  --app-btn-radius:          9999px;
  --bs-primary:              #533afd;
  --bs-body-bg:              #f6f9fc;
  --bs-body-color:           #0d253d;
  --bs-border-color:         #e3e8ee;
}

/* ── STRIPI DARK ────────────────────────────────────────────── */
[data-theme="stripi-dark"] {
  --app-primary:             #665efd;
  --app-primary-dark:        #533afd;
  --app-body-bg:             #0d0f1a;
  --app-body-color:          #e8eaf0;
  --app-surface:             #1c1e2e;
  --app-surface-soft:        #252740;
  --app-border:              #2e3154;
  --app-muted:               #8892a4;
  --app-sidebar-bg:          #0d0f1a;
  --app-header-bg:           rgba(28, 30, 46, 0.97);
  --app-header-border:       #2e3154;
  --app-card-shadow:         0 1px 3px rgba(0, 0, 0, 0.4);
  --app-font-family:         'Inter', 'SF Pro Display', system-ui, sans-serif;
  --app-font-weight-display: 300;
  --app-letter-spacing:      -0.02em;
  --app-btn-radius:          9999px;
  --bs-primary:              #665efd;
  --bs-body-bg:              #0d0f1a;
  --bs-body-color:           #e8eaf0;
  --bs-border-color:         #2e3154;
  --bs-card-bg:              #1c1e2e;
  --bs-modal-bg:             #1c1e2e;
  --bs-dropdown-bg:          #1c1e2e;
  --bs-input-bg:             #252740;
}

/* ── COMPONENT RULES ────────────────────────────────────────── */

/* Body */
body {
  background-color: var(--app-body-bg);
  color: var(--app-body-color);
  font-family: var(--app-font-family);
}

/* Header */
.modern-header {
  background: var(--app-header-bg);
  border-bottom-color: var(--app-header-border);
}

/* Sidebar */
.sidebar-dark .modern-sidebar {
  background: var(--app-sidebar-bg);
}

/* Cards */
.card {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: var(--app-card-shadow);
}

.card-header,
.card-footer {
  background-color: var(--app-surface-soft);
  border-color: var(--app-border);
}

/* Buttons */
.btn {
  border-radius: var(--app-btn-radius);
}

.btn-primary {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

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

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--app-font-weight-display);
  letter-spacing: var(--app-letter-spacing);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--app-surface);
  border-color: var(--app-border);
}

.dropdown-item {
  color: var(--app-body-color);
}

.dropdown-item:hover {
  background-color: var(--app-surface-soft);
}

/* Modals */
.modal-content {
  background-color: var(--app-surface);
  border-color: var(--app-border);
}

/* Forms */
.form-control,
.form-select {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-body-color);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--app-surface);
  color: var(--app-body-color);
}

/* Tables */
.table {
  --bs-table-bg: var(--app-surface);
  color: var(--app-body-color);
}

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

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--app-surface-soft);
}

/* Muted text */
.text-muted {
  color: var(--app-muted) !important;
}

/* Borders */
.border,
.border-top,
.border-bottom {
  border-color: var(--app-border) !important;
}

/* Input groups, list groups, pagination */
.input-group-text,
.list-group-item {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-body-color);
}

.page-link {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-primary);
}

/* Nav tabs */
.nav-tabs {
  border-color: var(--app-border);
}

.nav-tabs .nav-link.active {
  background-color: var(--app-surface);
  border-color: var(--app-border) var(--app-border) var(--app-surface);
}

/* Breadcrumb */
.breadcrumb-item a,
.breadcrumb-item.active {
  color: var(--app-muted);
}

/* Theme selector in header */
.theme-selector {
  display: flex;
  background: var(--app-surface-soft);
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-btn {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 13px;
  text-decoration: none;
  color: var(--app-muted);
  transition: all 0.3s ease;
}

.theme-btn.active {
  background: var(--app-primary);
  color: #fff;
  border-radius: 25px;
}

.theme-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.05);
  color: var(--app-body-color);
}

/* Search bar and dropdown */
.search-input {
  background: var(--app-surface-soft) !important;
  border: 1px solid var(--app-border) !important;
  color: var(--app-body-color) !important;
}

.search-input::placeholder {
  color: var(--app-muted);
}

.search-dropdown {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  color: var(--app-body-color) !important;
}

.search-kbd {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  color: var(--app-muted);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
}

/* Sidebar toggle button */
.sidebar-toggle-btn {
  background-color: rgba(6, 101, 208, 0.25);
  color: #fff;
  border: none;
}

[data-theme="stripi"] .sidebar-toggle-btn,
[data-theme="stripi-dark"] .sidebar-toggle-btn {
  background-color: rgba(83, 58, 253, 0.25);
}

/* ── STRIPI: override all legacy gradient variables ─────────── */
/* Classic keeps its gradients; Stripi uses flat colours only.   */
[data-theme="stripi"],
[data-theme="stripi-dark"] {
  --primary-gradient:   var(--app-primary);
  --secondary-gradient: #64748b;
  --success-gradient:   #22c55e;
  --warning-gradient:   #f59e0b;
  --sidebar-bg:         var(--app-sidebar-bg);
}

/* Buttons: flat colours for Stripi */
[data-theme="stripi"] .btn-success,
[data-theme="stripi-dark"] .btn-success {
  background: #22c55e;
}

[data-theme="stripi"] .btn-warning,
[data-theme="stripi-dark"] .btn-warning {
  background: #f59e0b;
}

[data-theme="stripi"] .btn-secondary,
[data-theme="stripi-dark"] .btn-secondary {
  background: #64748b;
}

/* Sidebar active nav link: flat colour, no gradient */
[data-theme="stripi"] .nav-main-link.active,
[data-theme="stripi-dark"] .nav-main-link.active,
[data-theme="stripi"] .nav-link.active,
[data-theme="stripi-dark"] .nav-link.active {
  background: var(--app-primary) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   STRIPI — eliminate every remaining gradient (light + dark)
   Module CSS files and views ship hard-coded linear-gradient()
   on headers, containers, cards. Flatten them all here.
   ============================================================ */

/* Module page containers (gradient backdrops → flat body bg) */
[data-theme="stripi"] .cours-container,
[data-theme="stripi-dark"] .cours-container,
[data-theme="stripi"] .modules-container,
[data-theme="stripi-dark"] .modules-container,
[data-theme="stripi"] .sessions-container,
[data-theme="stripi-dark"] .sessions-container,
[data-theme="stripi"] .specialites-container,
[data-theme="stripi-dark"] .specialites-container,
[data-theme="stripi"] .inscriptions-container,
[data-theme="stripi-dark"] .inscriptions-container,
[data-theme="stripi"] .formateurs-container,
[data-theme="stripi-dark"] .formateurs-container,
[data-theme="stripi"] .programs-container,
[data-theme="stripi-dark"] .programs-container,
[data-theme="stripi"] .cours-create-container,
[data-theme="stripi-dark"] .cours-create-container,
[data-theme="stripi"] .create-module-container,
[data-theme="stripi-dark"] .create-module-container {
  background: var(--app-body-bg) !important;
}

/* Card / modal headers that use light gradients → flat soft surface */
[data-theme="stripi"] .modal-header,
[data-theme="stripi-dark"] .modal-header,
[data-theme="stripi"] .specialite-modal .card-header,
[data-theme="stripi-dark"] .specialite-modal .card-header,
[data-theme="stripi"] .cours-table th,
[data-theme="stripi-dark"] .cours-table th,
[data-theme="stripi"] .modules-table th,
[data-theme="stripi-dark"] .modules-table th,
[data-theme="stripi"] .specialites-table th,
[data-theme="stripi-dark"] .specialites-table th {
  background: var(--app-surface-soft) !important;
  color: var(--app-body-color) !important;
}

/* Gradient table-header rows that carried white text → primary flat */
[data-theme="stripi"] .cours-table thead,
[data-theme="stripi-dark"] .cours-table thead,
[data-theme="stripi"] .modules-table thead,
[data-theme="stripi-dark"] .modules-table thead {
  background: var(--app-primary) !important;
}

/* Buttons that pull *-gradient vars → already flat via vars above;
   catch any direct .btn-info / gradient hovers */
[data-theme="stripi"] .btn-info,
[data-theme="stripi-dark"] .btn-info {
  background: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
}

/* Stat cards / hero headers shipped with gradient text-clip or bg */
[data-theme="stripi"] .stat-card,
[data-theme="stripi-dark"] .stat-card,
[data-theme="stripi"] .session-stat,
[data-theme="stripi-dark"] .session-stat {
  background: var(--app-surface) !important;
}

/* Cartes de statistiques "cours" (fonds pastel) — sur fond sombre, un
   pastel plein clair ressort mal ; on passe à une teinte translucide
   sur la surface sombre avec un texte plus clair de la même famille. */
[data-theme="stripi-dark"] .stats-soft-primary {
  background: rgba(102, 94, 253, 0.16) !important;
}
[data-theme="stripi-dark"] .stats-soft-primary .text-xs,
[data-theme="stripi-dark"] .stats-soft-primary .h5,
[data-theme="stripi-dark"] .stats-soft-primary .stats-card-icon {
  color: #b3aeff;
}

[data-theme="stripi-dark"] .stats-soft-success {
  background: rgba(16, 185, 129, 0.16) !important;
}
[data-theme="stripi-dark"] .stats-soft-success .text-xs,
[data-theme="stripi-dark"] .stats-soft-success .h5,
[data-theme="stripi-dark"] .stats-soft-success .stats-card-icon {
  color: #6ee7b7;
}

[data-theme="stripi-dark"] .stats-soft-info {
  background: rgba(14, 165, 233, 0.16) !important;
}
[data-theme="stripi-dark"] .stats-soft-info .text-xs,
[data-theme="stripi-dark"] .stats-soft-info .h5,
[data-theme="stripi-dark"] .stats-soft-info .stats-card-icon {
  color: #7dd3fc;
}

[data-theme="stripi-dark"] .stats-soft-warning {
  background: rgba(245, 158, 11, 0.16) !important;
}
[data-theme="stripi-dark"] .stats-soft-warning .text-xs,
[data-theme="stripi-dark"] .stats-soft-warning .h5,
[data-theme="stripi-dark"] .stats-soft-warning .stats-card-icon {
  color: #fcd34d;
}

[data-theme="stripi-dark"] .stats-card-icon {
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   STRIPI LIGHT — harmonise module surfaces with the indigo palette
   (these read as plain Bootstrap white otherwise — acceptable, but
   align the soft greys to Stripi's #f6f9fc so it feels cohesive)
   ============================================================ */
[data-theme="stripi"] .cours-filters,
[data-theme="stripi"] .cours-options,
[data-theme="stripi"] .modules-filters,
[data-theme="stripi"] .modules-options,
[data-theme="stripi"] .filter-section,
[data-theme="stripi"] .formateurs-filters,
[data-theme="stripi"] .programs-filters,
[data-theme="stripi"] .formateur-card,
[data-theme="stripi"] .stat-card,
[data-theme="stripi"] .formateurs-header,
[data-theme="stripi"] .programs-header {
  background: var(--app-surface) !important;
  border-color: var(--app-border) !important;
}

/* ============================================================
   DARK MODE — global surface + text override layer
   Highest-ROI fix: target Bootstrap utilities + module classes +
   per-view --light-bg so the 320 views go dark without editing them.
   ============================================================ */

/* View-local CSS variables redefined for dark (used by evaluations,
   corrections, planification embedded <style> blocks) */
[data-theme="stripi-dark"] {
  --light-bg: #252740;
  --white: #1c1e2e;
  --dark: #e8eaf0;
  --text-dark: #e8eaf0;
  --text-muted: #8892a4;
  --border-color: #2e3154;
  --gray-100: #252740;
  --gray-200: #2e3154;
  --gray-300: #3a3d63;
}

/* Bootstrap light utilities → dark surface */
[data-theme="stripi-dark"] .bg-white,
[data-theme="stripi-dark"] .bg-light,
[data-theme="stripi-dark"] .bg-body {
  background-color: var(--app-surface) !important;
  color: var(--app-body-color) !important;
}

/* Dark text utility → readable light text */
[data-theme="stripi-dark"] .text-dark {
  color: var(--app-body-color) !important;
}

[data-theme="stripi-dark"] .text-black,
[data-theme="stripi-dark"] .text-body {
  color: var(--app-body-color) !important;
}

/* Dashmix blocks (the template's primary card primitive) */
[data-theme="stripi-dark"] .block,
[data-theme="stripi-dark"] .block.block-rounded,
[data-theme="stripi-dark"] .content-side,
[data-theme="stripi-dark"] .bg-body-light,
[data-theme="stripi-dark"] .bg-body-extra-light {
  background-color: var(--app-surface) !important;
  color: var(--app-body-color) !important;
}

[data-theme="stripi-dark"] .block-header {
  background-color: var(--app-surface) !important;
  border-color: var(--app-border) !important;
}

/* Module containers + content surfaces → dark */
[data-theme="stripi-dark"] .cours-container,
[data-theme="stripi-dark"] .modules-container,
[data-theme="stripi-dark"] .sessions-container,
[data-theme="stripi-dark"] .specialites-container,
[data-theme="stripi-dark"] .inscriptions-container,
[data-theme="stripi-dark"] .programs-container {
  background: var(--app-body-bg) !important;
}

[data-theme="stripi-dark"] .cours-filters,
[data-theme="stripi-dark"] .cours-options,
[data-theme="stripi-dark"] .modules-filters,
[data-theme="stripi-dark"] .modules-options,
[data-theme="stripi-dark"] .filter-section,
[data-theme="stripi-dark"] .formateurs-filters,
[data-theme="stripi-dark"] .programs-filters,
[data-theme="stripi-dark"] .formateurs-header,
[data-theme="stripi-dark"] .programs-header,
[data-theme="stripi-dark"] .formateur-card,
[data-theme="stripi-dark"] .formateur-form,
[data-theme="stripi-dark"] .formateurs-table,
[data-theme="stripi-dark"] .cours-table,
[data-theme="stripi-dark"] .modules-table,
[data-theme="stripi-dark"] .specialites-table .table,
[data-theme="stripi-dark"] .inscriptions-table,
[data-theme="stripi-dark"] .calendar-view,
[data-theme="stripi-dark"] .timeline-view,
[data-theme="stripi-dark"] .list-view,
[data-theme="stripi-dark"] .form-section,
[data-theme="stripi-dark"] .create-module-card,
[data-theme="stripi-dark"] .no-cours-found,
[data-theme="stripi-dark"] .no-modules-found,
[data-theme="stripi-dark"] .session-timeline-content,
[data-theme="stripi-dark"] .session-stat {
  background: var(--app-surface) !important;
  border-color: var(--app-border) !important;
}

/* Soft / code / tag chips → soft dark surface */
[data-theme="stripi-dark"] .cours-code,
[data-theme="stripi-dark"] .module-code,
[data-theme="stripi-dark"] .specialite-code,
[data-theme="stripi-dark"] .competence-tag,
[data-theme="stripi-dark"] .session-tag,
[data-theme="stripi-dark"] .objectif-item,
[data-theme="stripi-dark"] .cours-item,
[data-theme="stripi-dark"] .stat-item,
[data-theme="stripi-dark"] .cours-card .card-footer,
[data-theme="stripi-dark"] .module-card .card-footer,
[data-theme="stripi-dark"] .cours-sessions .badge,
[data-theme="stripi-dark"] .module-sessions .badge {
  background: var(--app-surface-soft) !important;
  color: var(--app-body-color) !important;
}

/* Dark text colours that go invisible on dark → light */
[data-theme="stripi-dark"] .cours-header h1,
[data-theme="stripi-dark"] .modules-header h1,
[data-theme="stripi-dark"] .formateurs-header h1,
[data-theme="stripi-dark"] .programs-header h1,
[data-theme="stripi-dark"] .cours-title h5,
[data-theme="stripi-dark"] .module-title h5,
[data-theme="stripi-dark"] .specialite-title,
[data-theme="stripi-dark"] .session-stat-number,
[data-theme="stripi-dark"] .stat-number,
[data-theme="stripi-dark"] .form-section-title,
[data-theme="stripi-dark"] .section-title,
[data-theme="stripi-dark"] .formateur-nom,
[data-theme="stripi-dark"] .program-title,
[data-theme="stripi-dark"] .no-cours-found h4,
[data-theme="stripi-dark"] .no-modules-found h4,
[data-theme="stripi-dark"] .empty-state h4,
[data-theme="stripi-dark"] .stat-card h3 {
  color: var(--app-body-color) !important;
}

/* Muted-grey text that's too dark on a dark bg → lighter muted */
[data-theme="stripi-dark"] .cours-header p,
[data-theme="stripi-dark"] .modules-header p,
[data-theme="stripi-dark"] .formateurs-header p,
[data-theme="stripi-dark"] .cours-code,
[data-theme="stripi-dark"] .module-code,
[data-theme="stripi-dark"] .specialite-code,
[data-theme="stripi-dark"] .cours-description p,
[data-theme="stripi-dark"] .module-description p,
[data-theme="stripi-dark"] .specialite-description,
[data-theme="stripi-dark"] .meta-item,
[data-theme="stripi-dark"] .stat-label,
[data-theme="stripi-dark"] .stat-card p,
[data-theme="stripi-dark"] .formateur-matricule,
[data-theme="stripi-dark"] .session-stat-label,
[data-theme="stripi-dark"] .session-info-item h6,
[data-theme="stripi-dark"] .form-label,
[data-theme="stripi-dark"] .empty-state p,
[data-theme="stripi-dark"] .no-cours-found p,
[data-theme="stripi-dark"] .no-modules-found p {
  color: var(--app-muted) !important;
}

/* Progress / capacity tracks → dark */
[data-theme="stripi-dark"] .progress,
[data-theme="stripi-dark"] .capacity-progress {
  background-color: var(--app-surface-soft) !important;
}

/* Modal + dropdown surfaces in dark */
[data-theme="stripi-dark"] .modal-content,
[data-theme="stripi-dark"] .modal-header,
[data-theme="stripi-dark"] .modal-footer,
[data-theme="stripi-dark"] .dropdown-menu {
  background-color: var(--app-surface) !important;
  border-color: var(--app-border) !important;
  color: var(--app-body-color) !important;
}

/* Loading overlays (semi-white) → semi-dark */
[data-theme="stripi-dark"] .loading-overlay,
[data-theme="stripi-dark"] .loading-content {
  background: rgba(13, 15, 26, 0.85) !important;
}

/* Form inputs in dark */
[data-theme="stripi-dark"] .form-control,
[data-theme="stripi-dark"] .form-select,
[data-theme="stripi-dark"] .input-group-text {
  background-color: var(--app-surface-soft) !important;
  border-color: var(--app-border) !important;
  color: var(--app-body-color) !important;
}

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

/* List groups, accordions, list items */
[data-theme="stripi-dark"] .list-group-item,
[data-theme="stripi-dark"] .accordion-button,
[data-theme="stripi-dark"] .accordion-body {
  background-color: var(--app-surface) !important;
  color: var(--app-body-color) !important;
  border-color: var(--app-border) !important;
}

/* Generic dark-text safety net for headings on surfaces */
[data-theme="stripi-dark"] .card h1,
[data-theme="stripi-dark"] .card h2,
[data-theme="stripi-dark"] .card h3,
[data-theme="stripi-dark"] .card h4,
[data-theme="stripi-dark"] .card h5,
[data-theme="stripi-dark"] .card h6,
[data-theme="stripi-dark"] .block h1,
[data-theme="stripi-dark"] .block h2,
[data-theme="stripi-dark"] .block h3,
[data-theme="stripi-dark"] .block h4,
[data-theme="stripi-dark"] .block h5,
[data-theme="stripi-dark"] .block h6 {
  color: var(--app-body-color);
}

/* ============================================================
   STRIPI — neutralise decorative sidebar shimmer gradients and
   any remaining linear-gradient on visible chrome (light + dark)
   ============================================================ */
[data-theme="stripi"] .sidebar-header::before,
[data-theme="stripi-dark"] .sidebar-header::before,
[data-theme="stripi"] .section-title::after,
[data-theme="stripi-dark"] .section-title::after,
[data-theme="stripi"] .nav-link::before,
[data-theme="stripi-dark"] .nav-link::before {
  background: transparent !important;
}

/* Active sidebar item: flat translucent fill, no gradient */
[data-theme="stripi"] .nav-link.active,
[data-theme="stripi-dark"] .nav-link.active {
  background: rgba(255, 255, 255, 0.12) !important;
  border-left-color: var(--app-primary) !important;
  box-shadow: none !important;
}

/* Search overlay backdrop (was a navy gradient) → flat */
[data-theme="stripi"] .search-backdrop,
[data-theme="stripi-dark"] .search-backdrop,
[data-theme="stripi"] .loader-backdrop,
[data-theme="stripi-dark"] .loader-backdrop {
  background: var(--app-sidebar-bg) !important;
}

/* ============================================================
   STRIPI — DataTables theads avec couleur navy codée en dur
   (#022548 inline sur publier / document / suivi) : on aligne
   sur la couleur primaire du thème pour la cohérence.
   ============================================================ */
[data-theme="stripi"] table thead[style*="022548"],
[data-theme="stripi-dark"] table thead[style*="022548"] {
  background-color: var(--app-primary) !important;
  color: #fff !important;
}

/* Tables larges : garantir le défilement interne plutôt qu'un
   débordement de la page (filet de sécurité tous thèmes).
   max-width borne le conteneur pour éviter qu'une table large
   n'élargisse la page entière sur petit écran. */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overflow-x: auto;
}

/* Modales fermées : ne doivent occuper aucun espace de mise en page
   (comportement Bootstrap standard). Certaines modales héritées rendues
   à l'intérieur des lignes de tableau restaient en flux et élargissaient
   la page sur tablette. .modal:not(.show) garantit display:none tant
   qu'elles ne sont pas explicitement ouvertes. */
.modal:not(.show) {
  display: none !important;
}

/* ============================================================
   STRIPI — suppression exhaustive des dégradés hérités
   Les fichiers CSS par page (*-modern.css, programs.css, formateurs.css,
   sidebar-fix.css) et les <style> inline dans les vues Blade appliquent
   des linear-gradient() codés en dur sur leurs sélecteurs propres.
   Ces règles chargent APRÈS themes.css et l'emportent en cascade sauf
   si on utilise !important avec une spécificité au moins équivalente.
   Ce bloc cible tous les sélecteurs recensés et remplace chaque
   dégradé par une couleur plate issue des tokens du thème.
   ============================================================ */

/* ── Icônes de statistiques (inline style="background: linear-gradient(...)") */
[data-theme="stripi"] .stat-icon,
[data-theme="stripi-dark"] .stat-icon {
  background: var(--app-primary) !important;
  color: #fff !important;
}

/* ── En-tête de bienvenue (dashboard, inline gradient) */
[data-theme="stripi"] .welcome-header,
[data-theme="stripi-dark"] .welcome-header {
  background: var(--app-surface) !important;
  color: var(--app-body-color) !important;
}

/* ── En-tête de page programs */
[data-theme="stripi"] .programs-header h1,
[data-theme="stripi-dark"] .programs-header h1 {
  background: transparent !important;
  color: var(--app-body-color) !important;
}

/* ── Bouton de basculement de vue actif */
[data-theme="stripi"] .view-toggle-btn.active,
[data-theme="stripi-dark"] .view-toggle-btn.active {
  background: var(--app-primary) !important;
  color: #fff !important;
}

/* ── Bouton primaire programs + FullCalendar */
[data-theme="stripi"] .btn-program-primary,
[data-theme="stripi-dark"] .btn-program-primary,
[data-theme="stripi"] .fc-button-primary,
[data-theme="stripi-dark"] .fc-button-primary,
[data-theme="stripi"] .fc-button-primary:hover,
[data-theme="stripi-dark"] .fc-button-primary:hover {
  background: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
}

/* ── Badges de statut colorés (formateurs, inscriptions) */
[data-theme="stripi"] .badge-actif,
[data-theme="stripi-dark"] .badge-actif {
  background: #22c55e !important;
  color: #fff !important;
}
[data-theme="stripi"] .badge-inactif,
[data-theme="stripi-dark"] .badge-inactif,
[data-theme="stripi"] .badge-en_conge,
[data-theme="stripi-dark"] .badge-en_conge {
  background: var(--app-muted) !important;
  color: #fff !important;
}
[data-theme="stripi"] .badge-annule,
[data-theme="stripi-dark"] .badge-annule,
[data-theme="stripi"] .badge-en_attente,
[data-theme="stripi-dark"] .badge-en_attente {
  background: #f59e0b !important;
  color: #fff !important;
}
[data-theme="stripi"] .badge-complete,
[data-theme="stripi-dark"] .badge-complete {
  background: var(--app-primary) !important;
  color: #fff !important;
}

/* ── Pseudo-éléments de statistiques programs (::before accent bar) */
[data-theme="stripi"] .stat-card.total::before,
[data-theme="stripi-dark"] .stat-card.total::before,
[data-theme="stripi"] .stat-card.total .stat-icon,
[data-theme="stripi-dark"] .stat-card.total .stat-icon {
  background: var(--app-primary) !important;
}
[data-theme="stripi"] .stat-card.confirmes::before,
[data-theme="stripi-dark"] .stat-card.confirmes::before,
[data-theme="stripi"] .stat-card.confirmes .stat-icon,
[data-theme="stripi-dark"] .stat-card.confirmes .stat-icon {
  background: #22c55e !important;
}
[data-theme="stripi"] .stat-card.en_cours::before,
[data-theme="stripi-dark"] .stat-card.en_cours::before,
[data-theme="stripi"] .stat-card.en_cours .stat-icon,
[data-theme="stripi-dark"] .stat-card.en_cours .stat-icon {
  background: #f59e0b !important;
}
[data-theme="stripi"] .stat-card.aujourdhui::before,
[data-theme="stripi-dark"] .stat-card.aujourdhui::before,
[data-theme="stripi"] .stat-card.aujourdhui .stat-icon,
[data-theme="stripi-dark"] .stat-card.aujourdhui .stat-icon {
  background: #3b82f6 !important;
}
[data-theme="stripi"] .stat-card.semaine::before,
[data-theme="stripi-dark"] .stat-card.semaine::before,
[data-theme="stripi"] .stat-card.semaine .stat-icon,
[data-theme="stripi-dark"] .stat-card.semaine .stat-icon {
  background: #8b5cf6 !important;
}

/* ── En-têtes de modale avec dégradé (cours-modern, modules-modern) */
[data-theme="stripi"] .modal-header,
[data-theme="stripi-dark"] .modal-header {
  background: var(--app-surface-soft) !important;
  color: var(--app-body-color) !important;
}

/* ── Conteneurs de page avec dégradé (formateurs.css, programs.css) */
[data-theme="stripi"] .formateurs-container,
[data-theme="stripi-dark"] .formateurs-container,
[data-theme="stripi"] .programs-container,
[data-theme="stripi-dark"] .programs-container {
  background: var(--app-body-bg) !important;
}

/* ── Squelette de chargement (formateurs.css shimmer) */
[data-theme="stripi"] .loading-skeleton,
[data-theme="stripi-dark"] .loading-skeleton {
  background: var(--app-surface-soft) !important;
}

/* ── En-tête de modale de spécialité */
[data-theme="stripi"] .specialite-modal .card-header,
[data-theme="stripi-dark"] .specialite-modal .card-header {
  background: var(--app-surface-soft) !important;
  color: var(--app-body-color) !important;
}

/* ── Sidebar : shimmer de survol + décorateur ::before + lien actif */
[data-theme="stripi"] .nav-link::before,
[data-theme="stripi-dark"] .nav-link::before,
[data-theme="stripi"] .section-title::after,
[data-theme="stripi-dark"] .section-title::after,
[data-theme="stripi"] .sidebar-header::before,
[data-theme="stripi-dark"] .sidebar-header::before {
  background: transparent !important;
}
/* Page active dans la sidebar : fond plein (couleur d'accent du thème,
   pas de dégradé — cf. règle L.694 "eliminate gradients") + bordure claire
   en relief, pour que l'élément actif reste repérable au premier coup
   d'œil dans une arborescence à plusieurs niveaux. Cette règle est la
   dernière du fichier sur ce sélecteur : c'est elle qui l'emporte. */
[data-theme="stripi"] .nav-link.active,
[data-theme="stripi-dark"] .nav-link.active,
[data-theme="stripi"] .nav-main-link.active,
[data-theme="stripi-dark"] .nav-main-link.active {
  background: var(--app-primary) !important;
  border-left-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

/* ── Conteneurs génériques de sections (corrections, planification, etc.) */
[data-theme="stripi"] .corrections-container,
[data-theme="stripi-dark"] .corrections-container,
[data-theme="stripi"] .planification-container,
[data-theme="stripi-dark"] .planification-container,
[data-theme="stripi"] .evaluation-container,
[data-theme="stripi-dark"] .evaluation-container {
  background: var(--app-body-bg) !important;
}

/* ── En-têtes de section avec dégradé dans les vues Blade inline */
[data-theme="stripi"] .section-header,
[data-theme="stripi-dark"] .section-header,
[data-theme="stripi"] .page-header,
[data-theme="stripi-dark"] .page-header,
[data-theme="stripi"] .card-header-gradient,
[data-theme="stripi-dark"] .card-header-gradient {
  background: var(--app-surface-soft) !important;
  color: var(--app-body-color) !important;
}

/* ── Boutons personnalisés avec background-image: gradient (CSS files) */
[data-theme="stripi"] .btn-formateur-primary,
[data-theme="stripi-dark"] .btn-formateur-primary,
[data-theme="stripi"] .btn-inscription-primary,
[data-theme="stripi-dark"] .btn-inscription-primary,
[data-theme="stripi"] .btn-planification-primary,
[data-theme="stripi-dark"] .btn-planification-primary,
[data-theme="stripi"] .btn-header-primary,
[data-theme="stripi-dark"] .btn-header-primary,
[data-theme="stripi"] .btn-header-outline,
[data-theme="stripi-dark"] .btn-header-outline {
  background: var(--app-primary) !important;
  background-image: none !important;
  border-color: var(--app-primary) !important;
  color: #fff !important;
}

/* ── .btn-primary (gradient codé en dur via background shorthand ou background-image) */
[data-theme="stripi"] .btn-primary,
[data-theme="stripi-dark"] .btn-primary {
  background: var(--app-primary) !important;
  background-image: none !important;
  border-color: var(--app-primary) !important;
}
[data-theme="stripi"] .btn-primary:hover,
[data-theme="stripi-dark"] .btn-primary:hover {
  background: var(--app-primary-dark) !important;
  background-image: none !important;
  border-color: var(--app-primary-dark) !important;
}

/* ── Badges Bootstrap enrichis avec gradient (bg-info, bg-danger de soft-ui) */
[data-theme="stripi"] .badge.bg-info,
[data-theme="stripi-dark"] .badge.bg-info,
[data-theme="stripi"] .badge.bg-danger,
[data-theme="stripi-dark"] .badge.bg-danger,
[data-theme="stripi"] .badge.bg-success,
[data-theme="stripi-dark"] .badge.bg-success,
[data-theme="stripi"] .badge.bg-warning,
[data-theme="stripi-dark"] .badge.bg-warning {
  background-image: none !important;
}

/* ── En-tête de section corrections/planification (background: gradient) */
[data-theme="stripi"] .corrections-header,
[data-theme="stripi-dark"] .corrections-header,
[data-theme="stripi"] .planifications-header,
[data-theme="stripi-dark"] .planifications-header,
[data-theme="stripi"] .planifications-filters,
[data-theme="stripi-dark"] .planifications-filters {
  background: var(--app-surface) !important;
  background-image: none !important;
  color: var(--app-body-color) !important;
}

/* ── Titres H1/H2/H3 avec gradient text-clip (corrections, planification) */
[data-theme="stripi"] h1,
[data-theme="stripi-dark"] h1,
[data-theme="stripi"] h2,
[data-theme="stripi-dark"] h2,
[data-theme="stripi"] h3,
[data-theme="stripi-dark"] h3 {
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}

/* ── Card-header avec gradient (sessions-modern) */
[data-theme="stripi"] .card-header,
[data-theme="stripi-dark"] .card-header {
  background-image: none !important;
}

/* ── .filter-card, .btn-light blancs sous dark */
[data-theme="stripi-dark"] .filter-card,
[data-theme="stripi-dark"] .card-filter {
  background: var(--app-surface) !important;
  border-color: var(--app-border) !important;
  color: var(--app-body-color) !important;
}
[data-theme="stripi-dark"] .btn-light {
  background: var(--app-surface-soft) !important;
  border-color: var(--app-border) !important;
  color: var(--app-body-color) !important;
}

/* ── Alerte info bleue trop claire en dark */
[data-theme="stripi-dark"] .alert-info {
  background: rgba(102, 94, 253, 0.15) !important;
  border-color: rgba(102, 94, 253, 0.3) !important;
  color: var(--app-body-color) !important;
}

/* ── Notification bell button blanc en dark */
[data-theme="stripi-dark"] .notification-toggle {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--app-body-color) !important;
}

/* ── Onglets de navigation bleus pâles (exams nav-tabs) */
[data-theme="stripi-dark"] ul.nav-tabs {
  background: var(--app-surface) !important;
}
[data-theme="stripi-dark"] .nav-tabs-block {
  background: var(--app-surface) !important;
}

/* ── Header loader overlay (blanc en dark) */
[data-theme="stripi-dark"] .header-loader,
[data-theme="stripi-dark"] .overlay-header {
  background: var(--app-header-bg) !important;
}

/* ── Filet de sécurité universel : tout élément dont le style inline
   contient "linear-gradient" sous Stripi — background-image et background
   shorthand. !important l'emporte sur les styles inline et les CSS de page. */
[data-theme="stripi"] [style*="linear-gradient"],
[data-theme="stripi-dark"] [style*="linear-gradient"] {
  background: var(--app-primary) !important;
  background-image: none !important;
  color: #fff !important;
}

/* Conteneurs de page qui portent un gradient en background-image
   (planification-container, etc.) */
[data-theme="stripi"] [class*="-container"],
[data-theme="stripi-dark"] [class*="-container"] {
  background-image: none !important;
}

/* ── .btn-outline-secondary.active avec gradient var (cours/modules toggle) */
[data-theme="stripi"] .btn-outline-secondary.active,
[data-theme="stripi-dark"] .btn-outline-secondary.active {
  background: var(--app-primary) !important;
  background-image: none !important;
  border-color: var(--app-primary) !important;
  color: #fff !important;
}

/* ── Badges personnalisés avec gradient (cours : badge-debutant etc.) */
[data-theme="stripi"] [class*="badge-"],
[data-theme="stripi-dark"] [class*="badge-"] {
  background-image: none !important;
}

/* ── Icônes <i> avec gradient (dans boutons, titres, etc.) */
[data-theme="stripi"] i,
[data-theme="stripi-dark"] i {
  background-image: none !important;
  background: transparent !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}

/* ── Thead de table avec gradient inline (planification) */
[data-theme="stripi"] thead,
[data-theme="stripi-dark"] thead {
  background-image: none !important;
}

/* ── Corrections : cartes et icônes de progression avec gradient */
[data-theme="stripi-dark"] .tips-card,
[data-theme="stripi"] .tips-card {
  background: var(--app-surface) !important;
  background-image: none !important;
  color: var(--app-body-color) !important;
}
[data-theme="stripi-dark"] .progress-icon,
[data-theme="stripi"] .progress-icon {
  background: var(--app-primary) !important;
  background-image: none !important;
}
[data-theme="stripi-dark"] .actions-card,
[data-theme="stripi"] .actions-card {
  background: var(--app-surface) !important;
  background-image: none !important;
  color: var(--app-body-color) !important;
}

/* ── Profil : surcharges dark-mode pour les styles inline codés en dur */
[data-theme="stripi-dark"] .bg-gradient-primary,
[data-theme="stripi"] .bg-gradient-primary {
  background: var(--app-primary) !important;
  background-image: none !important;
}
[data-theme="stripi-dark"] .bg-light {
  background-color: var(--app-surface-soft) !important;
  color: var(--app-body-color) !important;
}
[data-theme="stripi-dark"] .profile-accordion-btn {
  background-color: var(--app-surface-soft) !important;
  color: var(--app-body-color) !important;
  border-color: var(--app-border) !important;
}
[data-theme="stripi-dark"] .profile-accordion-btn:hover {
  background-color: var(--app-border) !important;
}
[data-theme="stripi-dark"] .profile-accordion-btn[aria-expanded="true"] {
  background-color: rgba(102, 94, 253, 0.15) !important;
  color: var(--app-primary) !important;
}
[data-theme="stripi-dark"] .profile-accordion,
[data-theme="stripi-dark"] .profile-accordion-item {
  border-color: var(--app-border) !important;
}
[data-theme="stripi-dark"] .profile-accordion-body {
  background-color: var(--app-surface) !important;
  color: var(--app-body-color) !important;
}
[data-theme="stripi-dark"] .profile-photo,
[data-theme="stripi-dark"] .profile-placeholder {
  border-color: var(--app-border) !important;
}

/* ── Formulaires : input-group-text fond clair codé en dur */
[data-theme="stripi-dark"] .input-group-text {
  background-color: var(--app-surface-soft) !important;
  border-color: var(--app-border) !important;
  color: var(--app-muted) !important;
}

/* ── Bootstrap .bg-white, .bg-secondary utilisés dans plusieurs vues */
[data-theme="stripi-dark"] .bg-white {
  background-color: var(--app-surface) !important;
  color: var(--app-body-color) !important;
}