/* ================================================================
   UX.CSS — Scolarix — Design system
   Source unique des jetons de design (couleurs, rayons, ombres,
   police) + habillage moderne de tous les composants partagés
   (cartes, boutons, champs, tableaux, navigation, badges...).
   Chargé en dernier : c'est la couche qui a le dernier mot sur
   le rendu visuel, au-dessus du framework (uglcs.css) et des
   feuilles complémentaires (theme.min.css).
   ================================================================ */

:root {
    /* Marque
     * Violet aligné sur la couleur déjà dominante de fait dans l'appli :
     * #8b5cf6/#6d28d9/#a78bfa/#ede9fe apparaissent déjà des dizaines de fois
     * en dur dans les styles inline des 4 espaces (enseignant, élève,
     * parent, admin) — badges, icônes, accents, mode sombre. Seuls les
     * vrais boutons .btn-primary (pilotés par ce jeton) étaient restés
     * bleus (#4361ee), en décalage visible avec le reste de chaque écran.
     * Choisie ici pour refléter la couleur réellement en usage plutôt que
     * l'inverse, qui aurait exigé de retoucher des dizaines de fichiers de
     * vues dans les 4 espaces.
     */
    --ux-primary: #8b5cf6;
    --ux-primary-dark: #6d28d9;
    --ux-primary-light: #a78bfa;
    --ux-primary-50: #ede9fe;
    --ux-primary-rgb: 139, 92, 246;

    --ux-accent: #10b981;
    --ux-accent-dark: #0d9668;

    --ux-info: #0ea5e9;
    --ux-success: #10b981;
    --ux-warning: #f59e0b;
    --ux-danger: #ef4444;

    /* Fonds "teintés" — badges, alertes, cartes de statut (fond clair + encre lisible) */
    --ux-success-bg: #dcfce7;
    --ux-success-ink: #166534;
    --ux-warning-bg: #fef3c7;
    --ux-warning-ink: #92400e;
    --ux-danger-bg: #fee2e2;
    --ux-danger-ink: #991b1b;
    --ux-info-bg: #dbeafe;
    --ux-info-ink: #1e40af;
    --ux-neutral-bg: #f1f5f9;
    --ux-neutral-ink: #475569;

    /* Neutres */
    --ux-ink: #0f172a;
    --ux-body: #334155;
    --ux-muted: #7c8aa5;
    --ux-border: #eef1f7;
    --ux-surface: #ffffff;
    --ux-bg: #f8fafc;

    /* Rayons */
    --ux-radius-xl: 1.5rem;
    --ux-radius-lg: 1.15rem;
    --ux-radius: 0.9rem;
    --ux-radius-sm: 0.6rem;

    /* Ombres */
    --ux-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --ux-shadow: 0 10px 24px -12px rgba(15, 23, 42, .14), 0 2px 6px -2px rgba(15, 23, 42, .06);
    --ux-shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, .18);
    --ux-shadow-primary: 0 12px 28px -10px rgba(var(--ux-primary-rgb), .38);

    /* Police */
    --ux-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

    /* Compat rétro (ancien nom utilisé ailleurs éventuellement) */
    --ux-primary-dark-legacy: var(--ux-primary-dark);
}

/* ----------------------------------------------------------------
   Typographie
   ---------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body,
.nk-body {
    font-family: var(--ux-font);
    color: var(--ux-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.nk-block-title, .card-title, .title {
    font-family: var(--ux-font);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ux-ink);
}

.nk-block-title.page-title {
    letter-spacing: -0.02em;
}

.sub-text, .text-soft {
    color: var(--ux-muted);
}

/* ----------------------------------------------------------------
   Cartes — coins doux, ombre élégante au survol
   ---------------------------------------------------------------- */
.card {
    border-radius: var(--ux-radius-lg);
    border-color: var(--ux-border);
    box-shadow: var(--ux-shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.card.card-bordered {
    border-color: var(--ux-border);
}

.card-inner-group > .card-inner + .card-inner,
.card-inner-group > .card-inner + div {
    border-top: 1px solid var(--ux-border);
}

.nk-block .card:hover {
    box-shadow: var(--ux-shadow);
}

.card-inner {
    padding: 1.5rem;
}

/* ----------------------------------------------------------------
   Boutons — micro-interaction cohérente sur toute l'app
   ---------------------------------------------------------------- */
.btn {
    border-radius: var(--ux-radius-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-primary,
.btn.btn-primary {
    background: linear-gradient(135deg, var(--ux-primary), var(--ux-primary-dark));
    border-color: var(--ux-primary-dark);
    box-shadow: 0 8px 18px -8px rgba(var(--ux-primary-rgb), .55);
}

.btn-primary:not(:disabled):hover,
.btn.btn-primary:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: var(--ux-shadow-primary);
    background: linear-gradient(135deg, var(--ux-primary-dark), var(--ux-primary));
}

.btn:not(:disabled):active {
    transform: translateY(0);
}

.btn-icon {
    border-radius: var(--ux-radius-sm);
}

.btn-lg {
    border-radius: var(--ux-radius);
}

/* ----------------------------------------------------------------
   Champs de formulaire
   ---------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--ux-radius-sm);
    border-color: var(--ux-border);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ux-primary-light);
    box-shadow: 0 0 0 3px rgba(var(--ux-primary-rgb), .12);
}

.form-label {
    font-weight: 600;
    color: var(--ux-ink);
    font-size: .8125rem;
}

/* ----------------------------------------------------------------
   Liens — retour visuel immédiat au clic
   ---------------------------------------------------------------- */
a {
    transition: opacity .15s ease, color .15s ease;
}

a:active {
    opacity: .65;
}

/* ----------------------------------------------------------------
   Tableaux
   ---------------------------------------------------------------- */
.nk-tb-list .nk-tb-item.nk-tb-head {
    background: var(--ux-primary-50);
    border-radius: var(--ux-radius-sm);
}

.nk-tb-list .nk-tb-item.nk-tb-head .sub-text {
    color: var(--ux-primary-dark);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .04em;
}

.nk-tb-list .nk-tb-item:not(.nk-tb-head):hover {
    background: var(--ux-bg);
}

table.table thead th {
    font-weight: 700;
    color: var(--ux-ink);
}

/* ----------------------------------------------------------------
   Barre de défilement
   ---------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d8deee;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ux-primary-light);
}

/* ----------------------------------------------------------------
   Accessibilité — repère de focus clavier
   ---------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ux-primary);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Navigation — sidebar & menu
   ---------------------------------------------------------------- */
.nk-sidebar {
    border-right: 1px solid var(--ux-border);
}

.nk-sidebar-brand {
    padding-block: .35rem;
}

.nk-menu-link {
    border-radius: var(--ux-radius-sm);
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

.nk-menu-link:hover {
    transform: translateX(2px);
}

.nk-menu-item.active > .nk-menu-link,
.nk-menu-item.current-page > .nk-menu-link {
    background: var(--ux-primary-50);
    color: var(--ux-primary);
    font-weight: 700;
}

.nk-menu-item.active > .nk-menu-link .nk-menu-icon,
.nk-menu-item.current-page > .nk-menu-link .nk-menu-icon {
    color: var(--ux-primary);
}

.nk-menu-heading .overline-title {
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--ux-muted);
}

/* ----------------------------------------------------------------
   En-tête (topbar)
   ---------------------------------------------------------------- */
.nk-header {
    border-bottom: 1px solid var(--ux-border);
    backdrop-filter: blur(6px);
}

/* ----------------------------------------------------------------
   Badges & alertes
   ---------------------------------------------------------------- */
.badge {
    font-weight: 700;
    border-radius: var(--ux-radius-sm);
    letter-spacing: .01em;
}

.alert {
    border-radius: var(--ux-radius);
    border: 1px solid transparent;
}

/* ----------------------------------------------------------------
   Avatars
   ---------------------------------------------------------------- */
.user-avatar,
.avatar {
    border-radius: var(--ux-radius);
}

/* ----------------------------------------------------------------
   Pagination & dropdowns
   ---------------------------------------------------------------- */
.dropdown-menu {
    border-radius: var(--ux-radius);
    border-color: var(--ux-border);
    box-shadow: var(--ux-shadow);
}

.dropdown-item {
    border-radius: var(--ux-radius-sm);
    margin-inline: .25rem;
    width: calc(100% - .5rem);
    transition: background-color .15s ease;
}

.pagination .page-link {
    border-radius: var(--ux-radius-sm);
}

/* ----------------------------------------------------------------
   Entrée douce du contenu de page
   ---------------------------------------------------------------- */
.nk-content-body {
    animation: uxFadeIn .35s ease;
}

@keyframes uxFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nk-content-body {
        animation: none;
    }
}

/* ----------------------------------------------------------------
   Mode sombre — jetons + composants
   ---------------------------------------------------------------- */
body.dark-mode {
    --ux-bg: #0f1223;
    --ux-surface: #171b30;
    --ux-border: #262c47;
    --ux-ink: #e8eaf6;
    --ux-body: #c3c8e0;
    --ux-muted: #8891b0;
    --ux-primary-50: rgba(var(--ux-primary-rgb), .14);

    --ux-success-bg: rgba(16, 185, 129, .15);
    --ux-success-ink: #4ade80;
    --ux-warning-bg: rgba(245, 158, 11, .15);
    --ux-warning-ink: #fbbf24;
    --ux-danger-bg: rgba(239, 68, 68, .15);
    --ux-danger-ink: #f87171;
    --ux-info-bg: rgba(14, 165, 233, .15);
    --ux-info-ink: #60a5fa;
    --ux-neutral-bg: #334155;
    --ux-neutral-ink: #cbd5e1;
}

body.dark-mode .nk-tb-list .nk-tb-item.nk-tb-head {
    background: var(--ux-primary-50);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #33334a;
}

body.dark-mode .nk-menu-item.active > .nk-menu-link,
body.dark-mode .nk-menu-item.current-page > .nk-menu-link {
    background: var(--ux-primary-50);
}

body.dark-mode .card {
    box-shadow: none;
}

/* ----------------------------------------------------------------
   Mode sombre — rattrapage des couleurs codées en dur (audit §16)
   ----------------------------------------------------------------
   Beaucoup de pages admin/espaces récentes fixent leurs couleurs
   directement en style inline (au lieu des jetons --ux-* ci-dessus),
   donc `body.dark-mode` seul ne les touche jamais : elles restaient
   figées en clair, souvent illisibles, une fois le mode sombre activé.
   Plutôt que de retoucher chaque page une par une (des dizaines de
   fichiers, même palette réutilisée partout), on intercepte ici les
   valeurs hexadécimales exactes les plus utilisées via des sélecteurs
   d'attribut CSS (le nom qu'on lui donne : "patch systémique") : un
   `!important` en feuille de style l'emporte sur un style inline sans
   `!important`, donc ça s'applique sans toucher au HTML/PHP existant.
   Les couleurs d'accent déjà vives (#3b82f6, #8b5cf6, #f59e0b, #22c55e,
   #ef4444, #06b6d4...) restent lisibles telles quelles sur fond sombre
   et ne sont pas concernées. */
body.dark-mode [style*="#f8fafc"],
body.dark-mode [style*="#fafbfc"],
body.dark-mode [style*="#f1f3f5"],
body.dark-mode [style*="#f0f2f6"],
body.dark-mode [style*="#e9edf2"],
body.dark-mode [style*="#e5e9f2"],
body.dark-mode [style*="#dee2e6"] {
    background-color: var(--ux-surface) !important;
    border-color: var(--ux-border) !important;
}

body.dark-mode [style*="#1a2332"],
body.dark-mode [style*="#1a1a2e"],
body.dark-mode [style*="#475569"] {
    color: var(--ux-ink) !important;
}

body.dark-mode [style*="#64748b"],
body.dark-mode [style*="#94a3b8"],
body.dark-mode [style*="#6c757d"],
body.dark-mode [style*="#8896a6"],
body.dark-mode [style*="#6c7a8a"] {
    color: var(--ux-muted) !important;
}

/* Paires fond-clair/texte-foncé des mini "stat cards" (Total, Actifs...) */
body.dark-mode [style*="#dbeafe"] { background-color: var(--ux-info-bg) !important; }
body.dark-mode [style*="#1e40af"] { color: var(--ux-info-ink) !important; }
body.dark-mode [style*="#dcfce7"] { background-color: var(--ux-success-bg) !important; }
body.dark-mode [style*="#166534"] { color: var(--ux-success-ink) !important; }
body.dark-mode [style*="#fef3c7"],
body.dark-mode [style*="#fffbeb"] { background-color: var(--ux-warning-bg) !important; }
body.dark-mode [style*="#92400e"] { color: var(--ux-warning-ink) !important; }
body.dark-mode [style*="#fee2e2"] { background-color: var(--ux-danger-bg) !important; }
body.dark-mode [style*="#991b1b"] { color: var(--ux-danger-ink) !important; }
body.dark-mode [style*="#ede9fe"] { background-color: rgba(139, 92, 246, .18) !important; }
body.dark-mode [style*="#6d28d9"] { color: #c4b5fd !important; }
body.dark-mode [style*="#f3e8ff"] { background-color: rgba(217, 70, 239, .18) !important; }
body.dark-mode [style*="#cffafe"] { background-color: rgba(6, 182, 212, .18) !important; }

body.dark-mode [style*="background: #fff;"],
body.dark-mode [style*="background:#fff;"],
body.dark-mode [style*="background-color: #fff;"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background-color: #ffffff"] {
    background-color: var(--ux-surface) !important;
}

/* ================================================================
   LMS — cartes matière illustrées (élève / enseignant / admin)
   ================================================================ */
.lms-subject-card {
    background: var(--ux-surface);
    border-radius: var(--ux-radius-lg);
    border: 1px solid var(--ux-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;
    margin-bottom: 1.25rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.lms-subject-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 20px 36px -16px rgba(15, 23, 42, .22);
}

/* Bandeau illustré — pur visuel (dégradé + texture + formes + icône).
   Les couleurs sont passées via --g1/--g2 (custom properties) plutôt que
   par la propriété "background" directement, pour pouvoir superposer une
   texture à pois sans que le style inline de la carte ne l'écrase. */
.lms-subject-banner {
    position: relative;
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(rgba(255, 255, 255, .45) 1.5px, transparent 1.8px) -6px -6px / 16px 16px,
        linear-gradient(135deg, var(--g1, #8b5cf6), var(--g2, #6366f1));
}

.lms-subject-banner::before,
.lms-subject-banner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 70%);
}

.lms-subject-banner::before {
    width: 150px;
    height: 150px;
    top: -70px;
    right: -40px;
}

.lms-subject-banner::after {
    width: 100px;
    height: 100px;
    bottom: -60px;
    left: 8%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
}

.lms-subject-banner-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .32);
    box-shadow: 0 10px 22px -6px rgba(15, 23, 42, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.55rem;
}

/* Bandeau d'information — sur fond neutre, lisible quelle que soit la matière */
.lms-subject-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--ux-border);
}

.lms-subject-info-main {
    min-width: 0;
}

.lms-subject-info-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    color: var(--ux-muted);
    margin-bottom: 3px;
}

.lms-subject-info-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lms-subject-info-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--ux-ink);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lms-subject-info-meta {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 600;
    color: var(--ux-muted);
    white-space: nowrap;
    background: var(--ux-bg);
    padding: 4px 12px;
    border-radius: 30px;
    margin-top: 1px;
}

.lms-subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
    gap: 1.15rem;
}

body.dark-mode .lms-subject-info-meta {
    background: rgba(255, 255, 255, .04);
}

/* ================================================================
   NOTES — cartes "examen x classe" groupées par matière (enseignant
   ET admin, cf. App/Views/marks/a-noter.php et Espace-enseignant/notes)
   ================================================================ */
.notes-group-head {
    background: var(--ux-bg);
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.note-card {
    background: var(--ux-surface);
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius-lg);
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: all 0.2s ease;
}

.note-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.note-card-pending {
    border-left: 3px solid var(--ux-warning);
}

.note-card-graded {
    border-left: 3px solid var(--ux-success);
}

.note-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.note-card-body {
    flex: 1;
}

.note-card-foot .btn-block {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   ANGLES DROITS — boutons et éléments de formulaire (2026-09-26)
   Chargé par tous les layouts (base*.php) et les pages de connexion.
   !important : nécessaire pour l'emporter sur les nombreux
   style="border-radius: …" écrits en ligne dans les vues.
   Exclus volontairement : boutons radio (doivent rester ronds),
   interrupteurs .form-switch (le curseur est dessiné en cercle),
   curseurs range et sélecteurs de couleur.
   ============================================================ */
.btn, .btn:hover, .btn:focus, .btn:active, .btn.active, .btn:focus-visible,
button, button:hover, button:focus, button:active, button:focus-visible,
input[type="button"], input[type="submit"], input[type="reset"],
.input-group > .btn, .input-group-text, .btn-group > .btn,
.swal2-styled, .swal2-input, .swal2-select, .swal2-textarea,
.dt-button, .paginate_button,
input:not([type="radio"]):not([type="range"]):not([type="color"]),
input:not([type="radio"]):not([type="range"]):not([type="color"]):hover,
input:not([type="radio"]):not([type="range"]):not([type="color"]):focus,
input:not([type="radio"]):not([type="range"]):not([type="color"]):active,
select, select:hover, select:focus, select:active,
textarea, textarea:hover, textarea:focus, textarea:active,
.form-control, .form-control:hover, .form-control:focus, .form-control:active,
.form-select, .form-select:hover, .form-select:focus, .form-select:active,
.form-control-wrap, .input-group > .form-control, .input-group > .form-select,
.select2-container .select2-selection, .select2-container--open .select2-selection,
.select2-dropdown, .select2-search__field,
.dataTables_filter input, .dataTables_length select,
.dual-listbox .dual-listbox__search, .file-upload-input {
    border-radius: 0 !important;
}

/* Les interrupteurs sont des <input type="checkbox"> : on leur rend
   leur forme de pilule, sinon le curseur rond flotte dans un carré. */
.form-switch .form-check-input,
.form-switch .form-check-input:focus,
.form-switch .form-check-input:checked {
    border-radius: 2em !important;
}

/* ============================================================
   RÉSULTATS DE LA RECHERCHE GLOBALE (#search_block) — angles droits
   ============================================================ */
#search_block,
#search_block .card-inner-group,
#search_block .card-inner,
#search_block a,
#search_block a:hover,
#search_block a:focus,
#search_block a:focus-visible,
#search_block a:active {
    border-radius: 0 !important;
}

#search_block {
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1050;
}

#search_block a:hover,
#search_block a:focus,
#search_block a.is-active {
    background: var(--ux-primary-lighter, #f1f5f9);
    outline: none;
}

#search_block .search-empty {
    padding: 1rem 1.25rem;
    font-size: .85rem;
    color: #64748b;
}

body.dark-mode #search_block { background: #1e293b !important; }
body.dark-mode #search_block a:hover,
body.dark-mode #search_block a:focus { background: rgba(148, 163, 184, .12); }