/* Habillage de ScolSup, posé par-dessus la feuille de style de l'administration Django.
 *
 * Rien n'est remplacé ici : ce fichier ne fait que redéfinir les variables de couleur exposées
 * par l'admin et retoucher quelques règles d'apparence. Aucun gabarit n'en dépend, et supprimer
 * la ligne qui le charge dans templates/admin/base_site.html suffit à revenir à l'aspect
 * d'origine — c'est ce qui rend la refonte sans risque pour les 37 écrans sur mesure.
 *
 * La palette est tirée des deux logos de la formation : le cyan du logo IUT/amU et le rouge
 * de Formasup, ce dernier réservé aux alertes pour ne pas le banaliser.
 */

:root,
html[data-theme="light"] {
    --primary: #2a6f8e;
    --secondary: #1e3a52;
    --accent: #7fd8f0;
    --primary-fg: #ffffff;

    --body-fg: #22303c;
    --body-bg: #f2f5f8;
    --body-quiet-color: #526271;
    --body-medium-color: #3d4d5a;
    --body-loud-color: #101a22;

    --header-color: #d8eef7;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: #ffffff;

    --breadcrumbs-fg: #cfe3ee;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: #2a5673;

    --link-fg: #1c6b8c;
    --link-hover-color: #12495f;
    --link-selected-fg: var(--secondary);

    --hairline-color: #dbe3ea;
    --border-color: #c3cfda;

    --error-fg: #c00030;

    --selected-bg: #e2f0f8;
    --selected-row: #cfe8f4;
    --darkened-bg: #e5ecf2;

    /* Propres à cet habillage. */
    --scolsup-carte-bg: #ffffff;

    --scolsup-zebre: #eef4f9;
    --scolsup-ombre: 0 1px 2px rgba(16, 26, 34, .06), 0 2px 8px rgba(16, 26, 34, .05);
    --scolsup-rayon: 10px;
}

/* Le mode sombre est défini par l'admin dans deux portées distinctes (préférence du système et
 * choix explicite) : les deux sont reprises, sans quoi l'habillage ne vaudrait qu'en clair.
 *
 * RÈGLE : toute variable posée dans le bloc clair ci-dessus doit l'être aussi dans ces deux blocs,
 * avec une valeur lisible sur fond sombre. Une variable oubliée garde sa valeur claire, donc son
 * texte foncé sur fond foncé (c'était le cas de --body-fg, du texte discret, du texte en gras, du
 * lien sélectionné et de la couleur d'erreur : tout le site était illisible en mode sombre).
 * verifications/verif_mode_sombre.py le contrôle, ainsi que le contraste des couples texte/fond. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #2a6f8e;
        --secondary: #14212c;
        --accent: #7fd8f0;
        --primary-fg: #ffffff;

        --body-fg: #e6edf3;
        --body-bg: #14181c;
        --body-quiet-color: #a9b6c2;
        --body-medium-color: #c4cfd9;
        --body-loud-color: #ffffff;

        --header-color: #d8eef7;
        --header-branding-color: var(--accent);
        --header-bg: var(--secondary);
        --header-link-color: #ffffff;

        --breadcrumbs-fg: #cfe3ee;
        --breadcrumbs-link-fg: #ffffff;
        --breadcrumbs-bg: #2a5673;

        --link-fg: #7fd8f0;
        --link-hover-color: #a8e6f7;
        --link-selected-fg: #a8e6f7;

        --hairline-color: #2b333c;
        --border-color: #3a454f;

        --error-fg: #ff8fa3;

        --selected-bg: #1a2731;
        --selected-row: #17303c;
        --darkened-bg: #222a31;

        --scolsup-carte-bg: #1b2026;


        --scolsup-zebre: #1f262d;
        --scolsup-ombre: 0 1px 2px rgba(0, 0, 0, .4);
        --scolsup-rayon: 10px;
    }
}

html[data-theme="dark"] {
    --primary: #2a6f8e;
    --secondary: #14212c;
    --accent: #7fd8f0;
    --primary-fg: #ffffff;

    --body-fg: #e6edf3;
    --body-bg: #14181c;
    --body-quiet-color: #a9b6c2;
    --body-medium-color: #c4cfd9;
    --body-loud-color: #ffffff;

    --header-color: #d8eef7;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: #ffffff;

    --breadcrumbs-fg: #cfe3ee;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: #2a5673;

    --link-fg: #7fd8f0;
    --link-hover-color: #a8e6f7;
    --link-selected-fg: #a8e6f7;

    --hairline-color: #2b333c;
    --border-color: #3a454f;

    --error-fg: #ff8fa3;

    --selected-bg: #1a2731;
    --selected-row: #17303c;
    --darkened-bg: #222a31;

    --scolsup-carte-bg: #1b2026;


    --scolsup-zebre: #1f262d;
    --scolsup-ombre: 0 1px 2px rgba(0, 0, 0, .4);
    --scolsup-rayon: 10px;
}

/* --- Typographie -------------------------------------------------------------------------
 * Pile système : aucune police n'est téléchargée, l'application devant fonctionner sans réseau.
 */
body,
input, select, textarea, button,
.button, input[type="submit"], input[type="button"] {
    font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system,
                 "Helvetica Neue", Arial, sans-serif;
}

body {
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    letter-spacing: -0.01em;
}

/* --- En-tête ------------------------------------------------------------------------------ */
#header {
    padding: 12px 28px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

#branding h1,
#site-name a {
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: .02em;
}

#user-tools {
    font-size: .78rem;
    letter-spacing: .02em;
}

div.breadcrumbs {
    padding: 9px 28px;
    font-size: .82rem;
}

/* Flèche « ← Retour » posée en tête du fil d'Ariane par navigation.js (le fil d'Ariane est sur fond sombre dans les deux thèmes). */
.retour-page {
    display: inline-block;
    margin-right: 1rem;
    padding: 1px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}
.retour-page:hover,
.retour-page:focus {
    background: rgba(255, 255, 255, .18);
    text-decoration: none;
}
#content > .retour-page {
    margin: 0 0 .8rem;
}

/* --- Contenu et cartes --------------------------------------------------------------------
 * Les « modules » de l'admin (tableaux de la page d'accueil, blocs de formulaire, listes)
 * deviennent des cartes claires posées sur un fond neutre, plutôt que des blocs bordés.
 */
#content {
    padding: 24px 28px 40px;
}

.module,
#changelist,
.inline-group,
#content-related .module {
    background: var(--scolsup-carte-bg);
    border: 1px solid var(--hairline-color);
    border-radius: var(--scolsup-rayon);
    box-shadow: var(--scolsup-ombre);
    overflow: hidden;
}

.module + .module,
#content-main > .module {
    margin-bottom: 18px;
}

.module h2,
.module caption,
.inline-group h2 {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 11px 16px;
}

.module h3 {
    padding: 10px 16px 4px;
}

/* --- Tableaux ------------------------------------------------------------------------------
 * Les écrans de ScolSup sont surtout des tableaux : un peu d'air et une ligne survolée
 * lisible comptent plus ici que partout ailleurs.
 */
table {
    border-collapse: collapse;
}

thead th,
#result_list thead th {
    /* Ligne d'en-tête volontairement plus grande que les données : c'est elle qu'on cherche
       du regard quand on remonte un tableau, et les petites capitales la rendaient discrète. */
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    /* Texte foncé sur fond franc : en gris sur gris clair, les en-têtes se lisaient mal,
       surtout sur les grilles larges où l'on cherche sa colonne. */
    color: var(--body-loud-color);
    background: var(--darkened-bg);
    border-bottom: 2px solid var(--primary);
}

/* Une ligne sur deux légèrement teintée : sur une grille de plusieurs colonnes, c'est ce qui
   permet de suivre une ligne des yeux jusqu'au bout. */
#result_list tbody tr:nth-child(even) > * {
    background: var(--scolsup-zebre);
}

#result_list tbody td,
#result_list tbody th,
.module table td,
.module table th {
    padding: 9px 12px;
}

#result_list tbody tr:hover > * {
    background: var(--selected-bg);
}

#changelist-filter {
    border-radius: var(--scolsup-rayon);
}

/* --- Boutons ------------------------------------------------------------------------------- */
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
    border-radius: 7px;
    padding: 8px 14px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background-color .12s ease, box-shadow .12s ease;
}

.button:hover,
input[type="submit"]:hover,
.submit-row input:hover,
a.button:hover {
    box-shadow: 0 1px 3px rgba(16, 26, 34, .18);
}

.button.default,
input[type="submit"].default,
.submit-row input.default {
    font-weight: 600;
}

.submit-row {
    border-radius: var(--scolsup-rayon);
    border: 1px solid var(--hairline-color);
    box-shadow: var(--scolsup-ombre);
    padding: 14px 16px;
}

/* --- Formulaires --------------------------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="tel"], textarea, select, .vTextField {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 7px 9px;
    /* Les champs de formulaire n'héritent pas de la taille de police de la page : les
       navigateurs leur imposent environ 13 px. Sans cette ligne, les listes déroulantes
       s'affichent plus petites que tout ce qui les entoure. */
    font-size: 14px;
    line-height: 1.4;
}

/* Une hauteur confortable : base.css de Django impose aux listes déroulantes une hauteur fixe
   de 1.875rem, soit 30 px. À cette taille, la ligne de texte ne dispose que de 16 px et les
   accents comme les jambages des lettres s'y trouvent rognés — d'où des libellés difficiles à
   lire. Il faut lever cette hauteur fixe (min-height ne suffirait pas à la surclasser). */
select {
    height: auto;
    min-height: 36px;
}

/* Dans les grilles denses, les champs restent compacts (voir plus bas) : la hauteur minimale
   générale y ferait des lignes trop hautes. */
body table.grille-attribution-ta select,
body table.grille-soutenances select,
body table.grille-evaluation select,
body table.saisie-avis select,
body table.review-import select {
    height: auto;
    min-height: 30px;
}

input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus,
.vTextField:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(42, 111, 142, .16);
    outline: none;
}

fieldset.module .form-row {
    padding: 10px 16px;
}

/* --- Messages ------------------------------------------------------------------------------ */
ul.messagelist li {
    border-radius: 8px;
    margin: 0 28px 8px;
    padding: 11px 14px 11px 42px;
    box-shadow: var(--scolsup-ombre);
}

/* --- Menu latéral -------------------------------------------------------------------------- */
#nav-sidebar {
    background: var(--scolsup-carte-bg);
    border-right: 1px solid var(--hairline-color);
}

.main > #nav-sidebar + .content {
    max-width: none;
}

/* --- Blocs propres à ScolSup ---------------------------------------------------------------
 * Le bandeau d'année et le rappel des tâches préexistent : ils sont seulement accordés aux
 * cartes ci-dessus (mêmes angles, même ombre), leurs couleurs d'alerte restant inchangées.
 */
.bandeau-annee {
    padding: 9px 28px;
    font-size: .84rem;
}

.bandeau-logos {
    border-radius: var(--scolsup-rayon) !important;
    border-color: var(--hairline-color) !important;
    box-shadow: var(--scolsup-ombre);
    padding: 22px 16px !important;
}

.bloc-taches .ligne-tache {
    border-bottom-color: var(--hairline-color);
}

.bloc-taches .bouton-fait {
    border-radius: 6px;
    border-color: var(--border-color);
}

/* --- Page d'accueil ------------------------------------------------------------------------
 * L'admin fige le tableau de bord à 600 px de large : sur un écran courant, les deux tiers de
 * la fenêtre restaient vides et la liste des rubriques s'étirait sur une colonne interminable.
 * Elle est ici disposée en grille, autant de colonnes que la largeur en permet.
 */
.dashboard #content {
    width: auto;
}

.dashboard #content-main {
    float: left;
    width: calc(100% - 320px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    align-items: start;
}

.dashboard #content-main > .module {
    margin: 0;
}

.dashboard #content-related {
    width: 300px;
}

/* Les blocs pleine largeur (logos, rappel des tâches) précèdent la grille et n'en font pas
   partie : ils gardent la largeur de la colonne principale. */
.dashboard .bandeau-logos,
.dashboard .bloc-taches {
    width: calc(100% - 320px);
    box-sizing: border-box;
}

/* En dessous de cette largeur, tout se remet en une seule colonne, y compris les actions
   récentes, plutôt que de comprimer les deux. */
@media (max-width: 1100px) {
    .dashboard #content-main,
    .dashboard .bandeau-logos,
    .dashboard .bloc-taches,
    .dashboard #content-related {
        float: none;
        width: 100%;
    }
}

/* --- Nom du logiciel, en haut à gauche ------------------------------------------------------
 * Il était écrit en cyan sur le bandeau sombre, dans la taille d'un simple titre : peu lisible.
 * Il passe en blanc, plus grand et plus gras, le cyan ne servant plus qu'au survol.
 */
#branding h1,
#branding h1 a:link,
#branding h1 a:visited,
#site-name a {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #ffffff;
}

#branding h1 a:hover,
#site-name a:hover {
    color: var(--accent);
}

/* --- Écrans de saisie -----------------------------------------------------------------------
 * Les grilles de saisie (notes, appréciations, attribution des TA, soutenances, coefficients...)
 * définissent chacune leur propre tableau, avec des couleurs écrites en dur : bordures #ccc et
 * en-têtes #f8f8f8. Résultat, elles ignoraient la palette — et devenaient illisibles en mode
 * sombre, un en-tête presque blanc sur fond noir.
 *
 * Ces règles reprennent la main sans toucher aux gabarits. Le préfixe « body » leur donne une
 * spécificité supérieure : les styles des gabarits sont écrits plus bas dans la page et
 * l'emporteraient autrement.
 */
body table.grille-attribution-ta,
body table.grille-coef,
body table.grille-evaluation,
body table.grille-repartition,
body table.grille-soutenances,
body table.saisie-appreciation,
body table.saisie-avis,
body table.coefficients,
body table.evaluations,
body table.review-import,
body table.bareme {
    border: 1px solid var(--hairline-color);
    border-radius: var(--scolsup-rayon);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--scolsup-carte-bg);
    box-shadow: var(--scolsup-ombre);
}

body table.grille-attribution-ta th, body table.grille-attribution-ta td,
body table.grille-coef th, body table.grille-coef td,
body table.grille-evaluation th, body table.grille-evaluation td,
body table.grille-repartition th, body table.grille-repartition td,
body table.grille-soutenances th, body table.grille-soutenances td,
body table.saisie-appreciation th, body table.saisie-appreciation td,
body table.saisie-avis th, body table.saisie-avis td,
body table.coefficients th, body table.coefficients td,
body table.evaluations th, body table.evaluations td,
body table.review-import th, body table.review-import td,
body table.bareme th, body table.bareme td {
    border: none;
    border-bottom: 1px solid var(--hairline-color);
    padding: 9px 11px;
    vertical-align: middle;
}

body table.grille-attribution-ta th,
body table.grille-coef th,
body table.grille-evaluation th,
body table.grille-repartition th,
body table.grille-soutenances th,
body table.saisie-appreciation th,
body table.saisie-avis th,
body table.coefficients th,
body table.evaluations th,
body table.review-import th,
body table.bareme th {
    background: var(--darkened-bg);
    color: var(--body-loud-color);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--primary);
    /* En-tête figé : ces grilles font souvent plus d'un écran de haut, et l'on y saisit
       colonne par colonne. */
    position: sticky;
    top: 0;
    z-index: 2;
}

body table.grille-attribution-ta tbody tr:hover > *,
body table.grille-coef tbody tr:hover > *,
body table.grille-evaluation tbody tr:hover > *,
body table.grille-repartition tbody tr:hover > *,
body table.grille-soutenances tbody tr:hover > *,
body table.saisie-appreciation tbody tr:hover > *,
body table.saisie-avis tbody tr:hover > *,
body table.evaluations tbody tr:hover > *,
body table.review-import tbody tr:hover > * {
    background: var(--selected-row);
}

/* Alternance des lignes sur les grilles de saisie, pour la même raison que sur les listes. */
body table.grille-attribution-ta tbody tr:nth-child(even) > *,
body table.grille-coef tbody tr:nth-child(even) > *,
body table.grille-evaluation tbody tr:nth-child(even) > *,
body table.grille-repartition tbody tr:nth-child(even) > *,
body table.saisie-appreciation tbody tr:nth-child(even) > *,
body table.saisie-avis tbody tr:nth-child(even) > *,
body table.coefficients tbody tr:nth-child(even) > *,
body table.evaluations tbody tr:nth-child(even) > *,
body table.review-import tbody tr:nth-child(even) > *,
body table.bareme tbody tr:nth-child(even) > * {
    background: var(--scolsup-zebre);
}

/* Les champs posés dans ces grilles : même hauteur, même arrondi que partout ailleurs. */
body table.grille-attribution-ta select,
body table.grille-soutenances select,
body table.grille-soutenances input[type="text"],
body table.grille-evaluation select,
body table.grille-coef input,
body table.coefficients input,
body table.saisie-appreciation textarea,
body table.saisie-avis select,
body table.saisie-avis textarea,
body table.review-import select {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 5px 7px;
    background: var(--body-bg);
    color: var(--body-fg);
    /* Les listes déroulantes prennent la largeur de leur colonne : à taille fixe, un nom de
       tuteur un peu long s'y trouvait coupé. */
    width: 100%;
    box-sizing: border-box;
}

/* La ligne « pause » du planning de soutenances : discrète, mais visible en mode sombre. */
body table.grille-soutenances tr.ligne-pause td {
    background: var(--darkened-bg);
    color: var(--body-quiet-color);
    border-top: 1px solid var(--border-color);
}

/* Barre d'actions en haut des écrans de saisie : les liens et boutons y sont séparés par des
   points médians, on leur donne un peu d'air plutôt que de les laisser collés au titre. */
#content > form > .submit-row:last-child,
#content > .submit-row {
    margin-top: 18px;
}


/* En mode sombre, l'alternance des lignes s'éclaircit au lieu de s'assombrir. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #result_list tbody tr:nth-child(even) > *,
    :root:not([data-theme="light"]) body table[class^="grille"] tbody tr:nth-child(even) > *,
    :root:not([data-theme="light"]) body table[class^="saisie"] tbody tr:nth-child(even) > * {
        background: #1f262c;
    }
}

html[data-theme="dark"] #result_list tbody tr:nth-child(even) > *,
html[data-theme="dark"] body table[class^="grille"] tbody tr:nth-child(even) > *,
html[data-theme="dark"] body table[class^="saisie"] tbody tr:nth-child(even) > * {
    background: #1f262c;
}

/* --- Panneau « Filtre » des listes : replié par défaut (voir filtre_replie.js) ---------------- */
#changelist:not(.filtre-ouvert) #changelist-filter {
    display: none;
}

.filtre-bascule {
    margin: 0 0 10px;
}

.filtre-bascule button {
    border: 1px solid var(--hairline-color);
    border-radius: 7px;
    background: var(--scolsup-carte-bg);
    color: var(--body-fg);
    padding: 5px 12px;
    font-size: .85rem;
    cursor: pointer;
}

.filtre-bascule button.avec-filtres {
    border-color: var(--link-fg);
    font-weight: 600;
}