/* ── Styles communs à tous les dialogs Syncfusion ───────────────────────────
   Inclus dans App.razor — ne pas dupliquer dans les fichiers .razor.
   Couleurs alignées sur le thème MudBlazor de Lirevia (MainLayout.razor.cs) :
   #3A786D (vert Chriss Consulting) / #E8913A (orange). Les SfDialog vivent en
   dehors de l'arbre MudBlazor (thème Syncfusion Bootstrap 5), d'où ces styles
   à plat plutôt que des variables MudBlazor.
   ───────────────────────────────────────────────────────────────────────── */

/* Fenêtre */
.e-dialog {
    border: 0;
}

    .e-dialog .e-dlg-header-content {
        background-color: #5478a5;
        border-top-right-radius: inherit;
        border-top-left-radius: inherit;
        padding: 2px;
    }

.e-dialog .e-footer-content {
    padding: 8px 12px;
}

.e-dlg-header, .e-dlg-header * {
    color: white;
}

/* Header */
.sf-dialog-header {
    display: flex;
    align-items: center;
    color: white;
    font-size: 16px;
    font-weight: 600;
    padding: 9px 16px;
}

/* ---------------------------------------------------------------------
   Fenêtre dont l'onglet occupe TOUTE la hauteur disponible (LivreDialog).

   Le défaut corrigé : la fenêtre était haute de 830 px et l'onglet fixé à
   640. L'écart laissait une bande morte au-dessus du pied de page, et
   comme le contenu de l'onglet s'arrêtait tout de même à 640, un
   ascenseur apparaissait dès que le bandeau de notice s'affichait — on
   faisait défiler une zone alors que la place libre était juste en
   dessous. Deux hauteurs écrites à la main finissent toujours par se
   désaccorder.

   La chaîne flex ci-dessous répartit la hauteur sans nombre magique :
   l'en-tête d'onglet prend ce qu'il lui faut, le contenu prend le reste.
   `min-height: 0` est indispensable à chaque étage — sans lui, un élément
   flex refuse de descendre sous la taille de son contenu et déborde au
   lieu de défiler.

   Portée par une CssClass et non par `.e-dialog` : les autres fenêtres de
   Lirevia n'ont pas d'onglets et n'ont rien à faire de cette règle.
   --------------------------------------------------------------------- */
.sf-dialog-plein .e-dlg-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sf-dialog-plein .e-dlg-content > .e-tab {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sf-dialog-plein .e-tab > .e-tab-header {
    flex: 0 0 auto;
}

.sf-dialog-plein .e-tab > .e-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Corps */
.sf-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 8px 16px;
}

/* Footer */
.sf-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Champs */
.sf-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Variantes de largeur — même ligne, champs de longueur très différente
   (email long vs téléphone à 10 chiffres, ville variable vs code postal fixe). */
.sf-row-2-1 {
    grid-template-columns: 2fr 1fr;
}

.sf-row-1-2 {
    grid-template-columns: 1fr 2fr;
}

/* ---------------------------------------------------------------------
   Ligne ISBN + Titre + boutons (LivreDialog).

   FLEX et non grid, délibérément : le nombre de cellules dépend du rôle —
   le superadmin a un bouton de plus, l'adhérent n'en a aucun et parfois
   pas d'ISBN. En grid il faudrait quatre gabarits `grid-template-columns`
   à garder en phase avec le Razor ; ici chaque cellule porte sa propre
   largeur et toutes les combinaisons tombent juste.
   --------------------------------------------------------------------- */
.sf-ligne-isbn-titre {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

/* Treize chiffres : au-delà, c'est de la place prise au titre. */
.sf-champ-isbn { flex: 0 0 180px; }

/* min-width: 0 casse la largeur minimale intrinsèque d'un élément flex.
   Sans elle, un titre long refuse de rétrécir et pousse les boutons hors
   du cadre — le défaut classique, et il ne se voit qu'avec un titre long. */
.sf-champ-titre { flex: 1 1 auto; min-width: 0; }

.sf-champ-bouton { flex: 0 0 144px; }
.sf-champ-bouton-court { flex: 0 0 116px; }

/* ---------------------------------------------------------------------
   « Mon classement » : la CELLULE occupe toute la largeur, la LISTE non.

   Le champ vivait dans une demi-colonne, ce qui comprimait la phrase de
   repli — « sans choix, cet ouvrage s'affichera dans Bande dessinée » —
   sur deux ou trois lignes serrées. Elle a maintenant la ligne entière ;
   la liste, elle, garde une largeur raisonnable : un nom de rayon tient
   en trois mots, l'étirer sur mille pixels n'apporte rien et éloigne la
   flèche du libellé.
   --------------------------------------------------------------------- */
.sf-champ-classement {
    grid-column: 1 / -1;
}

.sf-boite-classement {
    max-width: 460px;
}

/* ---------------------------------------------------------------------
   Bandeau d'attente pendant l'interrogation des bases publiques.

   Même gabarit que le bandeau de notice, et à la même place : l'un
   remplace l'autre, le formulaire ne se décale donc pas sous le curseur
   au moment où la réponse arrive. Bleu et non ocre — il ne s'est encore
   rien passé qu'il faille vérifier.
   --------------------------------------------------------------------- */
.sf-bandeau-recherche {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #EEF3F8;
    border-left: 3px solid #5478a5;
    border-radius: 0 4px 4px 0;
    padding: 10px 12px;
    margin-bottom: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #2F4763;
}

.sf-bandeau-detail {
    color: #6B7C8F;
}

.sf-spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid #C9D6E4;
    border-top-color: #5478a5;
    border-radius: 50%;
    animation: sf-tourne 0.7s linear infinite;
}

@keyframes sf-tourne {
    to { transform: rotate(360deg); }
}

/* Un indicateur d'attente INDÉTERMINÉ qu'on immobilise n'indique plus
   rien : on le ralentit au lieu de l'arrêter. */
@media (prefers-reduced-motion: reduce) {
    .sf-spinner { animation-duration: 2.4s; }
}

/* ---------------------------------------------------------------------
   Bandeau « notice rapportée d'une base publique ».

   Il remplace un toast : le message demande de VÉRIFIER avant
   d'enregistrer, or un toast s'efface en quelques secondes, c'est-à-dire
   pendant qu'on vérifie. Ocre plutôt que rouge — la notice est utile,
   simplement pas fiable.
   --------------------------------------------------------------------- */
.sf-bandeau-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #FDF6E7;
    border-left: 3px solid #C4881F;
    border-radius: 0 4px 4px 0;
    padding: 6px 12px 6px 12px;
    margin-bottom: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6B4A12;
}

.sf-bandeau-notice > .e-icons {
    color: #C4881F;
    font-size: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.sf-bandeau-notice > div { flex: 1 1 auto; }

.sf-bandeau-fermer {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    color: #9C7526;
    font-size: 13px;
    flex: 0 0 auto;
}

.sf-bandeau-fermer:hover { color: #6B4A12; }

/* Mode opératoire en tête de l'onglet Exemplaires. Encadré discret plutôt
   qu'une alerte : c'est une explication permanente, pas un avertissement — un
   fond rouge ou orange finirait par être ignoré comme du décor. */
.sf-mode-operatoire {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #f1f5f9;
    border-left: 3px solid #64748b;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #334155;
}

.sf-mode-operatoire .e-icons {
    color: #64748b;
    font-size: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

/* Colonne Rangement : affichage + crayon, l'édition n'ouvre qu'à la demande. */
.sf-rangement-edition {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Le champ d'emplacement, seul `<input>` natif de l'application : il remplace
   un SfComboBox dont l'ordre des événements coûtait trop cher (voir
   DocumentDialog.razor). Il doit donc RESSEMBLER aux champs Syncfusion qui
   l'entourent — mêmes bordure, hauteur et couleur de focus — sans quoi la ligne
   se lirait comme une zone d'un autre écran. */
.sf-champ-rangement {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    background: #fff;
}

.sf-champ-rangement:focus {
    outline: none;
    border-color: #5478A5;
    box-shadow: 0 0 0 1px #5478A5;
}

.sf-champ-rangement::placeholder {
    color: #9ca3af;
}

.sf-rangement-vide {
    color: #9ca3af;
    font-style: italic;
}

.sf-lien-crayon,
.sf-lien-valider,
.sf-lien-annuler {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    color: #6b7280;
    font-size: 14px;
}

.sf-lien-valider {
    color: #16a34a;
}

.sf-lien-crayon:hover,
.sf-lien-annuler:hover {
    color: #111827;
}

.sf-lien-crayon:disabled,
.sf-lien-valider:disabled {
    color: #d1d5db;
    cursor: default;
}

/* Liste de suggestions encore vide (rangement) : le message remplace le
   « No Records Found » de Syncfusion, qui est un message de liste FERMÉE sur un
   champ où l'on peut tout écrire. Gris et en retrait — c'est une indication, pas
   un résultat. */
/* Même ligne, une fois le rangement ajouté (LivreDialog). Le rangement porte des
   libellés de phrase — « Salle 1, étagère B » — d'où une colonne aussi large que
   le code-barres, tandis que l'état tient en un mot et les deux boutons en peu
   de place. */
.sf-row-exemplaire {
    display: grid;
    /* Code-barres, État, Emplacement, Acquis le, boutons. La date a rejoint la
       ligne le 11/09/2026 : elle décide d'une nouveauté, elle doit se voir. */
    grid-template-columns: 3fr 2fr 3fr 2fr 2fr;
    gap: 12px;
    /* ⚠️ start, ET NON end. Chaque cellule commence par son étiquette, toutes de
       même hauteur : les champs se retrouvent donc alignés d'eux-mêmes. Avec
       `end`, il suffisait qu'une cellule grandisse — la phrase d'aide sous le
       code-barres, depuis l'identification par l'ISBN le 30/09/2026 — pour que
       les quatre autres descendent se caler sur le bas de la ligne, étiquettes
       comprises. Constaté à l'écran, pas dans le code. */
    align-items: start;
}

/* Trois champs de largeur comparable sur la même ligne (Année/Pages/Public). */
.sf-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

/* Année/Pages étroits (valeurs courtes) pour laisser Public et Catégorie
   plus larges sur la même ligne (LivreDialog). */
.sf-row-1-1-2-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 2fr;
    gap: 12px;
}

/* Cinq champs sur une ligne (LivreDialog) : Année, Pages et Format tiennent
   dans peu de place — un millésime, un nombre de pages, « Broché » — tandis que
   Public et Catégorie portent des libellés longs. Ajoutée quand le Format est
   venu s'échouer seul sur la ligne suivante, sous la couverture, où il n'avait
   rien à faire. */
.sf-row-annee-pages-public-format-categorie {
    display: grid;
    grid-template-columns: .8fr .8fr 1.6fr 1.2fr 1.6fr;
    gap: 12px;
}

/* Aperçu de couverture (largeur fixe, voir .sf-cover-box) sur deux lignes,
   URL puis Résumé empilés à droite (LivreDialog). */
.sf-row-cover-resume {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    align-items: start;
}

.sf-row-cover-resume .sf-cover-field {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.sf-label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
}

/* Texte d'aide sous un champ (valeur déduite, format attendu…) — même usage
   que HelperText côté MudBlazor, en discret. */
.sf-hint {
    font-size: 11px;
    color: #6b7280;
    margin-top: -2px;
}

.sf-required {
    color: #ef4444;
}

.sf-error {
    color: #ef4444;
    font-size: 12px;
    margin-top: -2px;
}

.sf-error-banner {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    margin: 12px 16px 0 16px;
}

/* Groupbox (dialogs à plusieurs blocs logiques) */
.sf-groupbox {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px 12px 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-groupbox-title {
    font-size: 12px;
    font-weight: 700;
    color: #3A786D;
    padding: 0 6px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* SfTab (LivreDialog) : hauteur fixe commune aux deux onglets (Ouvrage /
   Exemplaires) pour que changer d'onglet ne fasse pas sauter le dialog ;
   défilement interne si un onglet dépasse la hauteur réservée. */
.e-tab .e-content {
    overflow-y: auto;
}

/* Aperçu de couverture (LivreDialog) : taille fixe qu'une image soit
   disponible ou non, pour que le dialog ne saute pas selon la notice. */
.sf-cover-box {
    width: 162px;
    height: 204px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sf-cover-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* <InputFile> natif sous l'aperçu de couverture (LivreDialog) : pas de composant
   Syncfusion d'upload disponible ici, on se contente d'aligner taille de police
   et largeur sur le reste des champs du dialog. */
.sf-cover-upload {
    width: 100%;
    font-size: 12px;
    margin-top: 4px;
}

/* Table des exemplaires (LivreDialog) */
.sf-table-exemplaires {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sf-table-exemplaires th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    border-bottom: 1px solid #e5e7eb;
    padding: 6px 8px;
}

.sf-table-exemplaires td {
    padding: 6px 8px;
    border-bottom: 1px solid #f3f4f6;
}

.sf-badge-statut {
    display: inline-block;
    border-radius: 10px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
}

.sf-badge-dispo {
    background: #d1fae5;
    color: #065f46;
}

.sf-badge-indispo {
    background: #f3f4f6;
    color: #6b7280;
}

.sf-lien-retirer {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.sf-lien-retirer:hover {
    text-decoration: underline;
}

.sf-lien-retirer:disabled {
    color: #d1d5db;
    cursor: default;
}

/* Boutons */
.my-cancel-btn {
    background-color: #db0016;
    border-color: #db0016;
    color: white;
}

/* ⚠️ CLASSE MANQUANTE, employée depuis toujours sans jamais avoir été définie.
   « Me prévenir du retour » la portait dès l'origine, et « Réserver » en a
   hérité : faute de règle, Syncfusion appliquait son style par défaut — un
   bouton GRIS, que l'utilisateur lisait comme désactivé. Constaté le 06/09/2026,
   sur la première fiche d'ouvrage entièrement sorti vue par un adhérent.

   Action positive mais SECONDAIRE, distincte de l'enregistrement : contour bleu
   qui se remplit au survol. Réserver un livre ou proposer une correction ne sont
   pas des « Enregistrer », et les peindre à l'identique effacerait la
   différence. */
.my-primary-btn.e-btn {
    background-color: transparent !important;
    border-color: #5478a5 !important;
    color: #5478a5 !important;
}

    .my-primary-btn.e-btn:hover {
        background-color: #5478a5 !important;
        border-color: #5478a5 !important;
        color: #FFFFFF !important;
    }

    .my-primary-btn.e-btn:focus {
        background-color: #5478a5 !important;
        color: #FFFFFF !important;
        box-shadow: 0 0 0 3px rgba(84, 120, 165, 0.35);
    }

    .my-primary-btn.e-btn:disabled {
        border-color: #9db2cc !important;
        color: #9db2cc !important;
        opacity: 0.7;
    }

.my-success-btn.e-btn,
.my-success-btn.e-btn:disabled {
    background-color: #5478a5 !important;
    border-color: #3A786D !important;
    color: #FFFFFF !important;
}

    .my-success-btn.e-btn:hover {
        background-color: #354b66 !important; /* légèrement plus foncé au survol */
        border-color: #2F6459 !important;
    }

    .my-success-btn.e-btn:focus {
        background-color: #354b66 !important;
        box-shadow: 0 0 0 3px rgba(58, 120, 109, 0.35); /* halo focus accessible */
    }

    .my-success-btn.e-btn:disabled {
        background-color: #5478a5 !important;
        opacity: 0.5;
    }
/* Mention d'information RGPD affichée à la création d'une famille ou d'un
   adhérent (art. 13). Encadré discret mais lisible : elle doit être remarquée
   par le bénévole qui saisit, sans occuper la place d'un champ. */
.sf-mention-rgpd {
    background-color: #F1F6F4;
    border-left: 3px solid #5478a5;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #3B4A47;
}

    .sf-mention-rgpd strong {
        display: block;
        margin-bottom: 4px;
        color: #2F6459;
    }

/* Couverture cliquable de LivreDialog : un bouton nu, pour que l'agrandissement
   soit atteignable au clavier sans que rien ne change à l'œil. */
.sf-cover-loupe {
    all: unset;
    cursor: zoom-in;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* La couverture en grand.

   ⚠️ AUCUNE largeur n'est imposée à l'image, seulement des MAXIMA. C'est ce qui
   rend la fonction utilisable pour toutes les couvertures sans trier par
   provenance : une image s'affiche à sa taille naturelle, bornée par l'écran.

   Une vignette Google de 128 px reste donc un petit rectangle net, là où un
   `width: 90vw` en ferait un grand flou. Poser une largeur reviendrait à étirer
   ce qu'on n'a pas — le même travers que remplir une colonne d'une valeur
   inventée. Voir aussi Couverture.HauteResolution, qui demande à Google 300 px
   au lieu de 128. */
/* Le dialogue se plie à l'image, pas l'inverse : sans cela Syncfusion impose sa
   largeur par défaut et une petite couverture flotte au milieu d'un grand vide. */
.lirevia-loupe.e-dialog {
    /* `fit-content` et non une largeur choisie : le dialogue se plie à l'image,
       qui reste la seule à décider de sa taille. Sans cette règle, le thème
       Syncfusion étale la fenêtre sur presque tout l'écran et une couverture de
       400 px flotte au milieu d'un grand vide.

       La spécificité de `.lirevia-loupe.e-dialog` (deux classes) suffit à passer
       devant `.e-dialog` du thème — pas besoin de !important, qui rendrait la
       règle impossible à ajuster ensuite. */
    width: fit-content;
    max-width: 94vw;
}

.lirevia-loupe .e-dlg-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.lirevia-loupe img {
    /* L'image OCCUPE la hauteur de l'écran, quitte à dépasser sa taille d'origine.
       C'est un compromis assumé, et il faut savoir lequel :

       — les couvertures Google sont demandées en 800 px de large (voir
         Couverture.Agrandie), elles ne sont donc jamais étirées ;
       — les couvertures TÉLÉVERSÉES sont ce qu'elles sont. Mesuré sur quatre
         fichiers réels : 600×800, 443×620, 400×620 et 270×390 px. Les deux
         premières supportent l'agrandissement sans qu'on le voie ; la dernière
         est doublée et sera visiblement plus douce.

       Le seul remède durable pour celles-là est de téléverser un fichier plus
       grand — aucun style ne peut inventer des pixels absents. À l'usage, une
       couverture nette mais minuscule au milieu d'un grand écran a paru moins
       satisfaisante qu'une couverture pleine et un peu adoucie ; c'est ce qui a
       tranché. Revenir en arrière tient en une ligne : remplacer `height` par
       `max-height`. */
    height: min(86vh, 1000px);
    width: auto;
    max-width: 92vw;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
    cursor: zoom-out;
}

/* ---------------------------------------------------------------------
   L'écart d'une demande de correction : « Année : 1988 → 1998 ».

   Une liste et non un tableau : il y a le plus souvent UN champ, parfois
   deux, et un tableau à deux colonnes pour une ligne pèse plus qu'il ne
   sert. L'ancienne valeur est barrée et grise, la nouvelle en gras — de
   sorte que le sens se lise sans avoir à chercher où est la flèche.
   --------------------------------------------------------------------- */
.sf-diff {
    margin: 6px 0 0;
    padding-left: 16px;
    list-style: disc;
}

.sf-diff li { margin-bottom: 2px; }

.sf-diff-avant {
    text-decoration: line-through;
    opacity: 0.7;
}

.sf-diff-fleche {
    margin: 0 4px;
    opacity: 0.6;
}

.sf-diff-apres { font-weight: 600; }