/*
 * Styles spécifiques à l'application, non couverts par Bootstrap ni le thème.
 *
 * Application destinée au poste de travail : aucune règle de point de rupture
 * ici, et aucune n'est à ajouter. Les couleurs viennent des variables du thème
 * sombre de Bootstrap (cf. theme.css), jamais de valeurs écrites en dur.
 */

/* ------------------------------------------------------------------ */
/* Backoffice : coquille, menu latéral, barre du haut                   */
/* ------------------------------------------------------------------ */

:root {
    --admin-sidebar-width: 292px;
    --admin-topbar-height: 56px;
}

.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    flex: 0 0 var(--admin-sidebar-width);
    width: var(--admin-sidebar-width);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background-color: var(--odisio-shell-bg);
}

.admin-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.admin-content {
    flex: 1 1 auto;
}

.admin-brand {
    height: var(--admin-topbar-height);
    color: var(--bs-emphasis-color);
}

.admin-nav-section + .admin-nav-section {
    margin-top: 1.25rem;
}

.admin-nav-title {
    margin: 0 0 0.25rem;
    padding: 0 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
}

.admin-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: var(--bs-border-radius);
    /* Un cran sous la taille du corps de page : les libellés les plus longs
       du menu tiennent alors sur une seule ligne. */
    font-size: 0.9375rem;
    color: var(--bs-secondary-color);
}

.admin-nav .nav-link:hover {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-secondary-bg);
}

/* L'accent du thème étant presque blanc, l'entrée active s'écrit en sombre. */
.admin-nav .nav-link.active {
    color: var(--odisio-accent-contraste);
    background-color: var(--bs-primary);
}

/* ------------------------------------------------------------------ */
/* Écran de connexion                                                   */
/* ------------------------------------------------------------------ */

.login-screen {
    min-height: 100vh;
    background-color: var(--odisio-shell-bg);
}

.login-card {
    width: 100%;
    max-width: 24rem;
}

/*
 * Marque, pas information : la famille `primary` du thème porte un sens
 * (« contraint par le contrat »), la reprendre ici en ferait la seule couleur
 * d'un écran par ailleurs monochrome.
 */
.login-logo {
    font-size: 2rem;
    color: var(--bs-emphasis-color);
}

/* ------------------------------------------------------------------ */
/* Écran « Univers et contrat »                                         */
/* ------------------------------------------------------------------ */

/*
 * Valeur d'une liste fermée, tag du vocabulaire, onglet lu à l'import : une
 * étiquette de lecture, jamais un bouton. Les badges Bootstrap sont gras et
 * colorés, ce qui donnerait un tapis de couleurs sur les listes longues.
 */
.chip {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/*
 * Le champ de filtre partage sa ligne avec les onglets. Il a une largeur de
 * confort, mais cède le premier : un onglet renvoyé à la ligne suivante se lirait
 * comme un second niveau de navigation, alors que ce n'en est pas un.
 */
.contrat-filtre {
    flex: 0 1 24rem;
    min-width: 11rem;
}

/* Colonnes du tableau des critères : l'intitulé et le format ne bougent pas
   d'une section à l'autre, la place restante va aux valeurs. */
.contrat-colonne-critere {
    width: 22rem;
}

.contrat-colonne-format {
    width: 16rem;
}

/* Ancres d'un axe : ce que valent ses deux extrémités, de part et d'autre de
   l'échelle. Largeur fixe pour que les échelles s'alignent entre les cartes. */
.axe-ancre {
    flex: 0 0 8.5rem;
}

.axe-cran {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

/* Note que le modèle a le droit de poser. */
.axe-cran-plein {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    border: 1px solid var(--bs-primary-border-subtle);
}

/* Demi-point : réservé à une correction humaine, donc en retrait. */
.axe-cran-demi {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.6875rem;
    color: var(--bs-tertiary-color);
    border: 1px dashed var(--bs-border-color);
}

/*
 * Crans de l'échelle sur une fiche : la barre est remplie jusqu'à la note. Le cran
 * exact porte un anneau — sans lui, une note de 3 et une note de 4 se distinguent
 * mal d'un coup d'œil, l'œil lisant d'abord la longueur remplie.
 */
.axe-cran-atteint {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    border: 1px solid var(--bs-primary-border-subtle);
}

.axe-cran-vide {
    color: var(--bs-tertiary-color);
    border: 1px solid var(--bs-border-color);
}

.axe-cran-exacte {
    box-shadow: 0 0 0 0.15rem var(--bs-primary-border-subtle);
    font-weight: 600;
}

/* Cran intermédiaire : un demi-point, que seul un humain peut poser. */
.axe-cran-petit {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.6875rem;
}

/* Colonne JSON brute : longue par nature, elle défile chez elle. */
.contrat-json {
    max-height: 30rem;
    overflow: auto;
    color: var(--bs-secondary-color);
}

/* Les anomalies relevées au chargement du contrat arrivent en plusieurs lignes. */
.contrat-incident {
    white-space: pre-line;
}

/* ------------------------------------------------------------------ */
/* Saisie d'une référence par URL                                       */
/* ------------------------------------------------------------------ */

/*
 * Un écran de formulaire n'a pas à s'étirer sur toute la largeur d'un écran de
 * poste de travail : au-delà, l'œil perd la ligne entre la fin d'un champ et le
 * début du suivant. Largeur maximale, donc, et non largeur fixe — la mise en
 * page reste desktop, il n'y a ici aucun point de rupture.
 */
.ecran-etroit {
    max-width: 56rem;
}

/* Photo du produit : une vignette de contrôle, pas une illustration. */
.apercu-photo {
    max-width: 8rem;
    max-height: 8rem;
    object-fit: contain;
    background-color: var(--bs-tertiary-bg);
}

/*
 * Texte retenu pour la description, offert à la correction. Il garde les sauts de
 * ligne de l'extraction : c'est ce découpage qui dit si les notes de dégustation
 * ont bien été isolées du reste de la page, et le réécrire en paragraphes
 * masquerait justement ce qu'on demande de vérifier.
 */
.apercu-description {
    max-height: 28rem;
    line-height: 1.5;
}

/* Contenance et prix : deux nombres courts, qui n'ont pas à s'étirer sur la ligne. */
.apercu-champ-court {
    max-width: 12rem;
}

/*
 * Texte source d'une fiche déjà enrichie : montré, plus modifiable. Le fond en
 * retrait dit qu'on est en lecture, sans qu'il faille l'écrire.
 */
.apercu-texte-fige {
    overflow-y: auto;
    white-space: pre-line;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* Colonnes de la liste des produits : les chiffres et l'état ne bougent pas d'une
   ligne à l'autre, la place restante va au nom du produit. La colonne d'état est la
   plus large parce que « En attente d'enrichissement » y tient sur une ligne. */
.produits-colonne-etroite {
    width: 9rem;
}

.produits-colonne-etat {
    width: 14rem;
}

/* Bloc de recherche de la liste des produits : largeur fixe, pour que le tableau
   dessous ne se redessine pas selon que des critères sont actifs ou non. */
.produits-recherche {
    width: 26rem;
    flex: 0 0 26rem;
}

/* Les deux intitulés de filtres alignent leurs onglets : sans largeur commune, la
   deuxième rangée de pastilles démarre ailleurs que la première et l'œil ne suit plus
   la colonne. */
.produits-libelle-filtre {
    display: inline-block;
    width: 9rem;
}

/* La ligne des critères actifs garde sa hauteur même vide : sans cela, poser un
   critère fait sauter le tableau vers le bas au moment où on le lit. */
.produits-recapitulatif {
    min-height: 2.25rem;
}

/* ------------------------------------------------------------------ */
/* Consultation d'une fiche                                             */
/* ------------------------------------------------------------------ */

/*
 * La fiche est plus large que les écrans de formulaire : elle porte des tableaux de
 * critères et des cartes d'axes sur deux colonnes, que la largeur de confort d'un
 * formulaire écraserait. Elle reste bornée pour que l'œil suive la ligne d'un
 * intitulé jusqu'à sa valeur.
 */
.fiche-ecran {
    max-width: 72rem;
}

/* Intitulé du critère : largeur fixe, pour que les valeurs s'alignent d'une section
   à l'autre — c'est en colonne qu'on repère ce qui manque. */
.fiche-colonne-critere {
    width: 22rem;
}

/*
 * Second niveau de la fiche : un axe, une famille de tags. Il vit à l'intérieur de la
 * carte de son onglet, et ne doit surtout pas en être une lui-même — une carte dans
 * une carte faisait lire les axes comme un écran à part, alors que c'est un onglet du
 * classeur au même titre que les critères. Un fond suffit à les détacher.
 */
.fiche-panneau {
    background-color: var(--bs-tertiary-bg);
}

/* Le panneau des tags que le vocabulaire ne reconnaît pas : même forme qu'une famille,
   la couleur en moins — c'est la seule chose qui distingue les deux. */
.fiche-panneau-alerte {
    background-color: var(--bs-warning-bg-subtle);
}

/* La note portée par la fiche, le seul chiffre que l'œil doit trouver sur le panneau. */
.fiche-note {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
    font-variant-numeric: tabular-nums;
}

/* Ligne de tableau dont le clic ouvre la fiche : le curseur doit l'annoncer, sinon
   rien ne distingue une ligne cliquable d'un simple survol coloré. */
.ligne-cliquable {
    cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Divers                                                               */
/* ------------------------------------------------------------------ */

/* Pastille d'icône des indicateurs du tableau de bord. */
.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.25rem;
}

/* Autorise le rognage du texte (text-truncate) dans un conteneur flex. */
.min-width-0 {
    min-width: 0;
}