/*
    Thème de la console d'administration.
    Chargé UNIQUEMENT par les pages de la console, via :
        <HeadContent><link rel="stylesheet" href="@Assets["console.css"]" /></HeadContent>
    Le reste du site n'est donc pas affecté (btn-primary y reste bleu, par exemple).
    Il est chargé après app.css : à règle équivalente, ce sont les règles de ce fichier qui l'emportent.
*/

/*
    Palette de la console, définie une seule fois sous forme de variables CSS.
    Pour changer la couleur de toute la console, il suffit de modifier ces valeurs.
    Utilisation ailleurs : color: var(--console-primaire);
*/
:root {
    --console-primaire: #BE3881;          /* couleur de base de la console (rose FACISOFT) */
    --console-primaire-rgb: 190, 56, 129; /* même couleur en R, G, B : sert pour les transparences rgba(...) */
    --console-primaire-survol: #A2306E;   /* plus foncée : bouton survolé par la souris */
    --console-primaire-actif: #982D67;    /* encore plus foncée : bouton en cours de clic */
    --console-primaire-fonce: #5E1B40;    /* très foncée : fin du dégradé de fond */

    /* Couleur d'accent des composants communs (commun.css : bouton œil...) : celle de la console */
    --theme-primaire: var(--console-primaire);
}

/* =====================================================================================
   Mise en page commune des pages de la console (connexion, création de compte...)
   ===================================================================================== */

/* Fond plein écran qui centre la carte horizontalement et verticalement */
.console-fond {
    min-height: 100vh;  /* hauteur de l'écran, pour les anciens navigateurs */
    min-height: 100dvh; /* hauteur réellement visible sur mobile (tient compte de la barre d'adresse) */
    display: block;
    align-content: center;
    justify-items: center;
    padding: 1rem;      /* marge de sécurité autour de la carte sur les petits écrans */
    background-color: #f4f6f9; /* couleur de repli si le dégradé n'est pas pris en charge */
    background-image: linear-gradient(135deg, var(--console-primaire) 0%, var(--console-primaire-fonce) 100%);
}

/* Carte blanche contenant le formulaire : toute la largeur sur mobile, limitée à 420px au-delà */
.console-carte {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 0.75rem;
}

/* Variante plus large, pour les formulaires comportant beaucoup de champs */
.console-carte.console-carte-large {
    max-width: 720px;
}

/* Variante très large, pour les listes (tableaux) */
.console-carte.console-carte-liste {
    max-width: 1100px;
}

/* Tableau d'une liste : valeurs centrées verticalement dans chaque ligne */
.console-carte .table td,
.console-carte .table th {
    vertical-align: middle;
}

/* (Champs .champ, .champ-mdp, bouton œil, .code-sms : communs à tous les thèmes, voir commun.css) */

/* Bouton « × » d'une ligne de liens (fiche utilisateur) : même hauteur que les champs .champ voisins */
.bouton-ligne {
    padding: 0.75rem 1rem;
    line-height: 1.5;
}

/* Titre de section à l'intérieur d'un formulaire (« Connexion à la base du client »...) */
.console-section {
    color: var(--console-primaire);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.5rem 0 0.75rem;
}

/* =====================================================================================
   Composants
   ===================================================================================== */

/*
    Volets déroulants des licences (page /console), construits avec <details> / <summary> :
    le navigateur gère seul l'ouverture / fermeture au clic, sans JavaScript.
*/
.volet-licence {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden; /* pour que le fond du titre respecte les coins arrondis */
}

/* Ligne de titre du volet (toujours visible, cliquable) */
.volet-licence > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    list-style: none;         /* masque le triangle par défaut du navigateur... */
    user-select: none;        /* évite de sélectionner le texte en cliquant plusieurs fois */
    background-color: #fff;
}

.volet-licence > summary::-webkit-details-marker {
    display: none;            /* ... y compris sur Safari */
}

/* Flèche personnalisée à gauche du titre, qui pivote quand le volet est ouvert */
.volet-licence > summary::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--console-primaire);
    border-bottom: 2px solid var(--console-primaire);
    transform: rotate(-45deg);          /* flèche vers la droite : volet fermé */
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.volet-licence[open] > summary::before {
    transform: rotate(45deg);           /* flèche vers le bas : volet ouvert */
}

.volet-licence > summary:hover {
    background-color: rgba(var(--console-primaire-rgb), 0.05);
}

/* Navigation au clavier : contour visible sur le titre sélectionné */
.volet-licence > summary:focus-visible {
    outline: 2px solid var(--console-primaire);
    outline-offset: -2px;
}

.volet-titre {
    font-weight: 600;
    flex-grow: 1; /* pousse le compteur tout à droite */
}

/* Compteur « attribuées / maximum » */
.volet-compteur {
    background-color: var(--console-primaire);
    font-variant-numeric: tabular-nums;
}

/* Plus de licences attribuées que le maximum autorisé : compteur en rouge pour alerter */
.volet-compteur.depasse {
    background-color: var(--bs-danger);
}

/* Contenu du volet ouvert : liste des utilisateurs */
.volet-contenu {
    padding: 0.75rem 1rem 1rem 2.3rem; /* aligné sous le titre, après la flèche */
    border-top: 1px solid var(--bs-border-color);
}

.volet-utilisateur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    overflow-wrap: anywhere; /* les longues adresses e-mail passent à la ligne sur mobile */
}

.volet-utilisateur + .volet-utilisateur {
    border-top: 1px dashed var(--bs-border-color);
}

/*
    Bouton primaire de la console.
    S'utilise TOUJOURS avec la classe Bootstrap « btn » : class="btn btn-console".
    « btn » apporte la forme (bordures arrondies, marges, taille du texte...) et lit ses couleurs dans des
    variables --bs-btn-* : il suffit de redéfinir ces variables pour obtenir un bouton aux couleurs de la console,
    avec tous ses états (normal, survol, clic, désactivé).
*/
.btn-console {
    /* État normal */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--console-primaire);
    --bs-btn-border-color: var(--console-primaire);
    /* Survol de la souris */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--console-primaire-survol);
    --bs-btn-hover-border-color: var(--console-primaire-survol);
    /* Halo de focus (navigation au clavier) */
    --bs-btn-focus-shadow-rgb: var(--console-primaire-rgb);
    /* Pendant le clic */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--console-primaire-actif);
    --bs-btn-active-border-color: var(--console-primaire-actif);
    /* Bouton désactivé (Bootstrap ajoute lui-même la transparence) */
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--console-primaire);
    --bs-btn-disabled-border-color: var(--console-primaire);
}

/*
    app.css (fourni par le modèle Blazor) impose un halo de focus BLEU sur tous les boutons et champs.
    On le remplace par un halo rose sur la console : liseré blanc de 0.1rem + halo rose semi-transparent.
*/
.btn-console:focus, .btn-console:active:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--console-primaire-rgb), 0.5);
}

/* Champ de saisie ou case à cocher sélectionné : bordure et halo roses au lieu du bleu */
.form-control:focus, .form-check-input:focus {
    border-color: var(--console-primaire);
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--console-primaire-rgb), 0.5);
}

/* Case à cocher cochée : fond rose au lieu du bleu Bootstrap */
.form-check-input:checked {
    background-color: var(--console-primaire);
    border-color: var(--console-primaire);
}