/* =============================================================
   FEUILLE DE STYLES PRINCIPALE (chargée sur toutes les pages)
   Complète Bootstrap 5. Voir aussi :
     nav.css     navigation (barre latérale, tiroir, onglets mobiles)
     mobile.css  ajustements sous 768px

   Sommaire
     1. Variables (couleurs, rayons) et thème Bootstrap
     2. Titres, cartes de contenu, widgets de statistiques, pied de page
     3. Composants généraux (.app-card)
     4. Page d'accueil (tuiles des modules)
     5. Tableaux (.app-table)
     6. Listes en cartes (_liste_cartes.html)
     7. Module Péremption (cartes de lots, pose d'action)
     8. Hauteur des widgets

   La couleur principale et la couleur d'accent sont choisies dans
   Paramètres > Application : base.html réécrit --app-primary et
   --app-accent-color après ce fichier.
   ============================================================= */

/* ---------------------------------------------------------------
   1. VARIABLES ET THÈME
   --------------------------------------------------------------- */
/* Variables communes à toute l'appli, modules compris (le Planning ne
   définit que ses couleurs métier, voir app/planning/css_source/styles.css). */
:root {
    /* --- Jetons de design (refonte UX, docs/PLAN_REFONTE_UX.md phase 1).
       À utiliser pour tout nouveau style. --- */

    /* Fonds et textes */
    --app-fond:      #F4F6F3;   /* fond de page */
    --app-surface:   #FFFFFF;   /* cartes, tableaux, formulaires */
    --app-bordure:   #DDE3DE;
    --app-texte:     #14231F;
    --app-texte-2:   #52605A;   /* texte secondaire (contraste 6,3:1 sur la surface) */

    /* Police : Figtree embarquée (static/vendor/figtree), police système en repli. */
    --app-police: 'Figtree', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Statuts, identiques dans tous les modules : couple fond / texte (contraste
       ≥ 4,5:1) + couleur franche (pastilles, liserés). Toujours accompagnés
       d'un libellé, jamais la couleur seule. Voir .statut plus bas. */
    --statut-a-traiter-fond: #ECEFED; --statut-a-traiter-texte: #3F4A45; --statut-a-traiter: #7A8580;
    --statut-en-cours-fond:  #E3EDFB; --statut-en-cours-texte:  #1E4E8C; --statut-en-cours:  #2F6FD0;
    --statut-en-retard-fond: #FDEBD8; --statut-en-retard-texte: #8A4100; --statut-en-retard: #E07A10;
    --statut-clos-fond:      #DFF1E6; --statut-clos-texte:      #1D6B3C; --statut-clos:      #2E9457;
    --statut-critique-fond:  #FBE1E0; --statut-critique-texte:  #A3201B; --statut-critique:  #D63A33;

    /* Rayons */
    --app-rayon-sm:   0.4rem;
    --app-rayon-md:   0.6rem;
    --app-rayon-lg:   0.9rem;
    --app-rayon-pill: 999px;

    /* Espacements (échelle de 4 px) */
    --app-espace-1: 4px;
    --app-espace-2: 8px;
    --app-espace-3: 12px;
    --app-espace-4: 16px;
    --app-espace-5: 24px;
    --app-espace-6: 32px;

    /* Hauteur minimale d'une zone cliquable sur écran tactile. */
    --app-zone-tactile: 44px;

    /* Couleur du module en cours (réglable par module en phase 2 ; d'ici là,
       couleur principale de Paramètres > Application). --m-soft : fond
       léger, --m-ink : texte dans la teinte du module sur fond clair. */
    --m:      var(--app-primary);
    --m-soft: color-mix(in srgb, var(--m) 12%, white);
    --m-ink:  color-mix(in srgb, var(--m) 70%, black);

    /* --- Variables historiques (gardées pour l'existant). --- */
    --app-primary:              #f33939;
    --app-font-size:             16px;
    /* Couleur « principale » de l'existant (boutons primary, tableaux,
       onglets...) = couleur du module en cours (phase 4) ; hors module,
       --m vaut la couleur principale de Paramètres > Application. */
    --app-primary-color:         var(--m);
    --app-primary-light-color:   color-mix(in srgb, var(--app-primary-color) 10%, white);
    --app-primary-dark-color:    color-mix(in srgb, var(--app-primary-color) 85%, black);
    /* OBSOLÈTES (phase 6) : alias des nouveaux jetons, utiliser --app-texte,
       --app-texte-2, --app-bordure, --app-surface. */
    --app-primary-text-color:    var(--app-texte);
    --app-secondary-text-color:  var(--app-texte-2);
    --app-border-color:          var(--bs-border-color);
    --app-border-light-color:    var(--app-bordure);
    --app-divider-color:         var(--app-bordure);
    --app-card-bg-color:         var(--app-surface);

    /* Couleur d'accent (valeur réelle injectée par base.html) : éléments
       mis en avant hors boutons/badges principaux (liens...). */
    --app-accent-color:          #3f91e9;

    /* Palette de mise en avant pour les stat-cards (widgets) : chaque
       widget d'une même page prend une couleur différente, dans l'ordre.
       OBSOLÈTE pour les tuiles de l'accueil (couleur du module, phase 2). */
    --widget-accent-1: #0EA5E9;
    --widget-accent-2: #F59E0B;
    --widget-accent-3: #10B981;
    --widget-accent-4: #EF4444;
    --widget-accent-5: #2d4e72;
    --widget-accent-6: #cdd242;
    --widget-accent-7: #68afd7;


    /* OBSOLÈTES (phase 6) : utiliser --app-rayon-*. */
    --app-border-radius-sm:      var(--app-rayon-sm);
    --app-border-radius-md:      var(--app-rayon-md);
    --app-border-radius-lg:      var(--app-rayon-lg);
    --app-border-radius-pill:    var(--app-rayon-pill);

    /* --navbar-height (hauteur de l'en-tête collé en haut) : voir nav.css. */

    /* --- Thème Bootstrap recoloré à partir des jetons. --- */
    --bs-body-font-family:  var(--app-police);
    --bs-body-bg:           var(--app-fond);
    --bs-body-color:        var(--app-texte);
    --bs-emphasis-color:    var(--app-texte);
    --bs-secondary-color:   var(--app-texte-2);
    --bs-border-color:      var(--app-bordure);
    --bs-heading-color:     var(--app-texte);
    --bs-link-color:        var(--app-accent-color);
    --bs-focus-ring-color:  color-mix(in srgb, var(--m) 25%, transparent);

    --bs-border-radius:    var(--app-rayon-lg);
    --bs-border-radius-sm: var(--app-rayon-sm);
    --bs-border-radius-lg: var(--app-rayon-md);
    --bs-border-radius-xl: var(--app-rayon-lg);

    --bs-btn-disabled-opacity: 0.55;
}

html {
    font-size: var(--app-font-size);
}

body {
    font-family: var(--app-police);
    background-color: var(--app-fond);
    color: var(--app-texte);
}
/* Les champs de formulaire n'héritent pas de la police par défaut. */
button, input, select, textarea, .btn, .form-control, .form-select {
    font-family: inherit;
}
.text-muted, .text-secondary, .form-text {
    color: var(--app-texte-2) !important;
}
.btn {
    font-weight: 600;
}

/* Formulaires : bordure et halo de focus dans les jetons. */
.form-control, .form-select {
    border-color: var(--app-bordure);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: color-mix(in srgb, var(--m) 60%, white);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

/* Zones cliquables d'au moins 44 px sur écran tactile (téléphone, tablette).
   Les variantes « sm » des tableaux denses ne sont pas concernées. */
@media (pointer: coarse) {
    .btn:not(.btn-sm):not(.btn-link),
    .form-control:not(.form-control-sm):not(.form-control-plaintext),
    .form-select:not(.form-select-sm) {
        min-height: var(--app-zone-tactile);
    }
}

/* Statuts communs à tous les modules : <span class="statut statut-en-cours">En cours</span>.
   Les badges Bootstrap existants (.badge.bg-*) prennent les mêmes couleurs,
   pour que tout l'existant adopte les statuts sans être réécrit :
   secondary = À traiter, info = En cours, warning/orange = En retard,
   success = Clos, danger = Critique. */
.statut {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25em 0.65em;
    border-radius: var(--app-rayon-pill);
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--statut-fond);
    color: var(--statut-texte);
}
.statut::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--statut-couleur);
    flex: none;
}
.statut-a-traiter { --statut-fond: var(--statut-a-traiter-fond); --statut-texte: var(--statut-a-traiter-texte); --statut-couleur: var(--statut-a-traiter); }
.statut-en-cours  { --statut-fond: var(--statut-en-cours-fond);  --statut-texte: var(--statut-en-cours-texte);  --statut-couleur: var(--statut-en-cours); }
.statut-en-retard { --statut-fond: var(--statut-en-retard-fond); --statut-texte: var(--statut-en-retard-texte); --statut-couleur: var(--statut-en-retard); }
.statut-clos      { --statut-fond: var(--statut-clos-fond);      --statut-texte: var(--statut-clos-texte);      --statut-couleur: var(--statut-clos); }
.statut-critique  { --statut-fond: var(--statut-critique-fond);  --statut-texte: var(--statut-critique-texte);  --statut-couleur: var(--statut-critique); }

.badge { font-weight: 600; }
.badge.bg-secondary { background-color: var(--statut-a-traiter-fond) !important; color: var(--statut-a-traiter-texte) !important; }
.badge.bg-info      { background-color: var(--statut-en-cours-fond)  !important; color: var(--statut-en-cours-texte)  !important; }
.badge.bg-warning,
.badge.bg-orange    { background-color: var(--statut-en-retard-fond) !important; color: var(--statut-en-retard-texte) !important; }
.badge.bg-success   { background-color: var(--statut-clos-fond)      !important; color: var(--statut-clos-texte)      !important; }
.badge.bg-danger    { background-color: var(--statut-critique-fond)  !important; color: var(--statut-critique-texte)  !important; }

/* Classes Bootstrap « primary » (texte, fonds, boutons) recolorées avec
   la couleur du module en cours (--app-primary-color = --m). */
.text-primary {
    color: var(--m-ink) !important;
}
.bg-primary {
    background-color: var(--app-primary-color) !important;
    color: white !important;
}
.btn-primary {
    background-color: var(--app-primary-color) !important;
    border-color: var(--app-primary-color) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: color-mix(in srgb, var(--app-primary-color) 88%, black) !important;
    border-color: color-mix(in srgb, var(--app-primary-color) 88%, black) !important;
}
.btn-outline-primary {
    color: var(--m-ink) !important;
    border-color: var(--app-primary-color) !important;
}
.btn-outline-primary:hover {
    background-color: var(--m-soft) !important;
    color: var(--m-ink) !important;
}
/* Bouton "Enregistrer" d'un formulaire suivi (data-dirty-guard) : neutre
   tant qu'aucun champ n'a changé, mis en avant dès qu'il y a quelque chose
   à enregistrer. */
form[data-dirty-guard] [type="submit"]:disabled {
    opacity: 0.55;
}
form[data-dirty-guard] [type="submit"].btn-dirty-actif {
    box-shadow: 0 0 0 0.2rem var(--app-primary-light-color);
}
.border-primary {
    border-color: var(--app-primary-color) !important;
}
/* Onglets Bootstrap (.nav-tabs) : onglet actif souligné dans la couleur du module. */
.nav-tabs .nav-link {
    color: var(--app-texte-2);
}
.nav-tabs .nav-link.active {
    border-bottom: 3px solid var(--app-primary-color);
    color: var(--m-ink);
    font-weight: bold;
}
.form-check-input:checked {
    background-color: var(--app-primary-color) !important;
    border-color: var(--app-primary-color) !important;
}

a {
    color: var(--app-accent-color);
}
a:hover {
    color: color-mix(in srgb, var(--app-accent-color) 80%, black);
}
.text-accent {
    color: var(--app-accent-color) !important;
}
/* Boutons dans la couleur d'accent (ex. type d'absence choisi dans la
   demande du Planning) : même principe que .btn-primary / .btn-outline-primary. */
.btn-accent-color {
    background-color: color-mix(in srgb, var(--app-accent-color) 10%, white) !important;
    border-color: var(--app-accent-color) !important;
    color: var(--app-accent-color) !important;
}
.btn-accent-color:hover {
    background-color: white !important;
    color: var(--app-accent-color) !important;
}
.btn-outline-accent-color {
    color: var(--app-accent-color) !important;
    border-color: var(--app-accent-color) !important;
}
.btn-outline-accent-color:hover {
    background-color: var(--app-accent-color) !important;
    color: white !important;
}


/* ---------------------------------------------------------------
   2. TITRES, CARTES DE CONTENU, WIDGETS, PIED DE PAGE
   (navigation : voir nav.css)
   --------------------------------------------------------------- */

/* Titre de page */
.page-title {
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    white-space: nowrap !important;
    color: var(--app-primary-text-color);
}


/* Carte de contenu standard (.card-custom : même rendu, nom historique
   encore utilisé par plusieurs templates) */
.page-card,
.card-custom {
    background: #ffffff;
    border: 0 !important;
    border-radius: var(--app-border-radius-lg);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.06);
}

/* Widgets de statistiques (bandeau en haut des modules) : liseré coloré à
   gauche, une couleur par widget (.stat-card-accent-N), cliquables via
   .stat-card-link. */
.stat-card {
    border-left: 5px solid var(--app-primary-color) !important;
}

.stat-card-accent-1, .stat-card-accent-2, .stat-card-accent-3,
.stat-card-accent-4, .stat-card-accent-5 {
    border-left-color: var(--widget-accent) !important;
}
.stat-card-accent-1 { --widget-accent: var(--widget-accent-1); }
.stat-card-accent-2 { --widget-accent: var(--widget-accent-2); }
.stat-card-accent-3 { --widget-accent: var(--widget-accent-3); }
.stat-card-accent-4 { --widget-accent: var(--widget-accent-4); }
.stat-card-accent-5 { --widget-accent: var(--widget-accent-5); }

/* Bandeau d'une instance d'essai (LAPPLI_INSTANCE, ex. beta). */
.bandeau-instance {
    background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 12px, #fbbf24 12px, #fbbf24 24px);
    color: #1f2937;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.25rem 0.75rem;
    position: sticky;
    top: 0;
    z-index: 1100;
}
/* Instance de la refonte UX (LAPPLI_INSTANCE=ux) : violet, distinct de la bêta. */
.bandeau-instance-ux {
    background: repeating-linear-gradient(45deg, #6d28d9, #6d28d9 12px, #7c3aed 12px, #7c3aed 24px);
    color: #fff;
}

/* Criticité « élevée » d'un dysfonctionnement (entre warning et danger). */
.bg-orange { background-color: #f97316 !important; color: #fff; }

.stat-card-value,
.stat-card-icon {
    color: var(--widget-accent);
    
}

.stat-card-link {
    display: block;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card-link:hover,
.stat-card-link:focus {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.12);
}

/* Fait ressortir une carte imbriquée (ex : fiche d'amélioration dans une
   anomalie) sans casser card-custom, qui force border:0 sur .card. */
.card-encart {
    background-color: color-mix(in srgb, var(--app-primary-color) 10%, white) !important;
    border: 1px solid color-mix(in srgb, var(--app-primary-color) 30%, white) !important;
    border-radius: var(--app-border-radius-lg);
}

.cursor-pointer {
    cursor: pointer;
}

/* Modales en appli installée sur iPhone (plein écran, viewport-fit=cover) :
   une modale haute défile jusqu'en haut de l'écran, sous l'encoche et les
   icônes système qui interceptent le toucher. Ce retrait réserve la zone
   (0 partout ailleurs). */
.modal {
    padding-top: env(safe-area-inset-top);
}

/* Pied de page : nom de la pharmacie + numéro de version (base.html) */
.app-footer {
    padding: 1rem 1rem 1.5rem;
    color: #adb5bd;
    font-size: 0.8rem;
    text-align: center;
}

/* ---------------------------------------------------------------
   3. COMPOSANTS GÉNÉRAUX
   --------------------------------------------------------------- */

/* Carte blanche encadrée qui regroupe un bloc de contenu ; .title = son titre */
.app-card{
    background-color: var(--app-card-bg-color) !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.05) !important;
    border-radius: var(--app-border-radius-lg)  !important;
    border: 1px solid var(--app-border-light-color) !important;
}

.app-card .title {
    font-size: 1.05rem !important;
    text-transform: none !important;
    letter-spacing: normal ;
    color: var(--app-primary-text-color) !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
}

/* Variante "flush" de .app-card : mêmes ombre/rayon/marge/fond que
   .app-card, mais sans le padding interne — pour un contenu qui doit
   occuper toute la carte plutôt que d'être encadré par elle (typiquement
   un <table class="app-table">). overflow:hidden pour que les coins
   carrés du contenu (table, image...) restent coupés par le rayon arrondi
   de la carte au lieu de déborder dessus.
   Usage : <div class="app-card app-card-flush"><table class="app-table">...
   remplace le couple .app-card + .app-table-card imbriqués quand la carte
   ne contient QUE le tableau (pas de titre/texte au-dessus à mettre en
   retrait) — sinon garder .app-table-card imbriquée comme ailleurs. */
.app-card.app-card-flush {
    padding: 0 !important;
    overflow: hidden;

}
/* Liste affichée en cartes (data-list-view="cards", section 6) : le cadre
   s'efface (ni fond, ni bordure, ni ombre) pour que chaque carte se
   détache sur le fond de la page ; il reste visible en vue tableau. Sous
   768px la vue cartes est forcée (mobile.css) : cadre toujours effacé. */
.app-card.app-card-flush:has([data-list-view="cards"]) {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}
@media (max-width: 768px) {
    .app-card.app-card-flush:has([data-list-view]) {
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible;
    }
}

/* ---------------------------------------------------------------
   4. PORTAIL D'ACCUEIL (socle/home.html) : une tuile par module, dans
   sa couleur (--m posée sur la tuile). .is-disabled = « Bientôt ».
   --------------------------------------------------------------- */
.portail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--app-espace-3);
}
.portail-tuile {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--app-espace-4);
    min-height: 88px;
    padding: var(--app-espace-4);
    background: var(--app-surface);
    border: 1px solid var(--app-bordure);
    border-radius: var(--app-rayon-lg);
    color: var(--app-texte);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
a.portail-tuile:hover {
    color: var(--app-texte);
    border-color: color-mix(in srgb, var(--m) 45%, white);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--m) 14%, transparent);
    transform: translateY(-1px);
}
a.portail-tuile:focus-visible { outline: 3px solid color-mix(in srgb, var(--m) 45%, white); outline-offset: 2px; }
.portail-icone {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--m);
    color: #fff;
    font-size: 1.6rem;
}
/* Pastille du module (compteur « à traiter ») sur son icône. */
.portail-pastille {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--app-surface);
    color: var(--m-ink, var(--m));
    box-shadow: 0 0 0 2px var(--m);
}
.portail-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portail-titre { font-weight: 800; font-size: 1.05rem; }
.portail-desc { font-size: 0.85rem; color: var(--app-texte-2); line-height: 1.35; }
.portail-fleche { margin-left: auto; font-size: 1.4rem; color: var(--app-texte-2); }
.portail-tuile.is-disabled { background: transparent; border-style: dashed; }
.portail-tuile.is-disabled .portail-icone { background: var(--app-bordure); color: var(--app-texte-2); }
.portail-bientot {
    margin-left: 4px;
    padding: 0.1em 0.55em;
    border-radius: var(--app-rayon-pill);
    background: var(--statut-a-traiter-fond);
    color: var(--statut-a-traiter-texte);
    font-size: 0.68rem;
    font-weight: 600;
    vertical-align: middle;
}

/* OBSOLÈTES (phase 6) : anciennes grandes tuiles de l'accueil, remplacées
   par .portail-tuile. */
.dashboard-grid-widget-lg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.dashboard-widget-lg {
    display: block;
    text-align: left;
    padding: 1.5rem;
    background: white;
    border: 1px solid color-mix(in srgb, var(--widget-accent, var(--app-primary-color)) 30%, white);
    border-radius: var(--app-border-radius-lg);
    box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    position: relative;
}
.dashboard-widget-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.08);
    color: inherit;
}
.dashboard-widget-lg .icon {
    font-size: 28px;
    font-weight: 800;
    color: var(--widget-accent, var(--app-primary-color));
    line-height: 1;
}
/* OBSOLÈTES (phase 6) : les tuiles prennent la couleur du module
   (style="--widget-accent: …" dans home.html). */
.dashboard-widget-lg-accent-1 { --widget-accent: var(--widget-accent-1); }
.dashboard-widget-lg-accent-2 { --widget-accent: var(--widget-accent-2); }
.dashboard-widget-lg-accent-3 { --widget-accent: var(--widget-accent-3); }
.dashboard-widget-lg-accent-4 { --widget-accent: var(--widget-accent-4); }
.dashboard-widget-lg-accent-5 { --widget-accent: var(--widget-accent-5); }
.dashboard-widget-lg-accent-6 { --widget-accent: var(--widget-accent-6); }
.dashboard-widget-lg-accent-7 { --widget-accent: var(--widget-accent-7); }
.dashboard-widget-lg .title {
    font-size: 1.05rem;
    color: var(--app-primary-text-color);
    margin-top: 0.75rem;
    font-weight: 700;
}
.dashboard-widget-lg .desc {
    font-size: 0.83rem;
    color: var(--app-secondary-text-color);
    margin-top: 0.3rem;
    font-weight: 400;
}

.dashboard-widget-lg.is-disabled {
    cursor: default;
    background: #f8f9fa;
    border-color: var(--app-border-light-color);
    box-shadow: none;
}
.dashboard-widget-lg.is-disabled:hover {
    transform: none;
    box-shadow: none;
}
.dashboard-widget-lg.is-disabled .icon {
    color: #adb5bd;
}
.dashboard-widget-lg.is-disabled .title {
    color: #adb5bd;
}
.dashboard-widget-lg .badge-bientot {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.25em 0.6em;
    border-radius: var(--app-border-radius-pill);
    background: #e9ecef;
    color: #6c757d;
}

/* ---------------------------------------------------------------
   5. TABLEAUX PARTAGÉS (.app-table-card / .app-table)
   Système unique pour tous les tableaux de données de l'appli (listes,
   récapitulatifs...) : même en-tête, mêmes bordures, même survol partout.

   Recette :
     <div class="app-table-card">
       <table class="app-table [is-zebra]">…</table>
     </div>
   Alignement/marges : utiliser les utilitaires Bootstrap existants
   (text-center, align-middle, mb-0) directement sur <table> —
   .app-table ne gère que l'habillage (en-tête, bordures, survol, rayon).
   Tri et filtre par colonne : classe .table-triable (table-triable.js).
   --------------------------------------------------------------- */
.app-table-card {
    background: #fff;
    border-radius: var(--app-border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--app-border-light-color);
    box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.05);
    /*padding: 1rem;*/
}

.title-card{
    font-size: 1.25rem;
    font-weight: 700; 
    color: var(--app-primary-color);
    padding: 0.1rem 0.5rem;
    border-bottom: 1px solid var(--app-border-light-color);
}

table.app-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}
/* Ligne d'en-tête : fond couleur principale très claire, bordure inférieure
   (le contour du tableau est géré par .app-table-card). */
table.app-table thead th {
    border: none;
    font-weight: 500;
    background: var(--app-primary-light-color);
    color: var(--app-primary-text-color);
    vertical-align: middle;
    padding: 0.5rem 0.9rem;
    border-bottom: solid 2px;
}
/* Lignes : fond blanc, bordure fine entre les lignes, survol teinté (voir plus bas). */
table.app-table tbody td {
    border: none;
    border-top: 1px solid var(--app-border-light-color);
    vertical-align: middle;
    padding: 0.1rem 0.5rem; /* padding des lignes des tableaux*/
}

/* 1re cellule de chaque ligne (l'identifiant de la ligne : nom, n°...) :
   largeur ajustée au contenu, légèrement teintée. */
table.app-table tbody tr td:first-child {
    background:  color-mix(in srgb, var(--app-primary-color) 1%, white);
    width: 1%;
    white-space: nowrap;
    font-weight: 500 !important;
    text-align: left !important;
    border-right: 1px solid #f1f3f5 !important;
}
table.app-table tbody tr:hover td:first-child {
    background:  color-mix(in srgb, var(--app-primary-color) 5%, white);
}

table.app-table tbody tr:first-child td {
    border-top: none; /* pas de bordure sur la première ligne du tableau */
}

table.app-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--app-primary-color) 7%, white);
}

table.app-table tfoot td {
    border-top: 2px solid var(--app-border-light-color);
    background: var(--app-primary-light-color);
    font-weight: 600;
    color: var(--app-primary-color);
}

/* Sous-en-tête de groupe (ex. catégorie de motifs) : ligne pleine largeur
   <tr class="app-table-group"><td colspan="…">…</td></tr>. */
tr.app-table-group td {
    background: color-mix(in srgb, var(--app-primary-color) 5%, white);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-primary-color);
    padding: 0.4rem 0.9rem;
    border-top: 1px solid var(--app-border-light-color);
}

/* Modificateur : lignes zébrées, pour les tableaux denses où on veut
   pouvoir suivre une ligne des yeux sans le survol (remplace
   table-striped, incompatible avec le rendu propre à .app-table). */
table.app-table.is-zebra tbody tr:nth-child(even) td {
    background-color: color-mix(in srgb, var(--app-primary-color) 3%, white);
}
table.app-table.is-zebra tbody tr:nth-child(even):hover td {
    background-color: color-mix(in srgb, var(--app-primary-color) 6%, white);
}

/* ---------------------------------------------------------------
   6. LISTES EN CARTES (_liste_cartes.html) : remplace les tableaux
   par des cartes (titre, sous-titre, statut, donnée libre, actions —
   voir list_display_service.py). Vue par défaut sur tous les écrans ;
   sur grand écran, un bouton (_list_view_toggle.html) permet de
   repasser en tableau pour retrouver le tri/filtre par colonne. Sous
   768px, mobile.css force la vue cartes quel que soit ce choix.
   --------------------------------------------------------------- */
.liste-cartes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.app-table-view {
    display: none;
}
[data-list-view="table"] .liste-cartes {
    display: none;
}
[data-list-view="table"] .app-table-view {
    display: block;
}
.carte-liste {
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 11px 13px;
}
.carte-liste-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.carte-liste-headers {
    min-width: 0;
}
.carte-liste-primary {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--app-primary-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.carte-liste-primary a {
    color: inherit;
    text-decoration: none;
}
.carte-liste-secondary {
    font-size: 12px;
    color: var(--app-secondary-text-color);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.carte-liste-badge {
    flex-shrink: 0;
    font-size: 10.5px;
}
.carte-liste-bottom {
    border-top: 1px solid #eee;
    margin-top: 8px;
    padding-top: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.carte-liste-data {
    font-size: 11.5px;
    color: var(--app-secondary-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.carte-liste-actions {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    gap: 6px;
}
.carte-liste-actions form {
    display: contents;
}
.carte-liste-action {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid #eee;
    background: #f8f9fa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    font-size: 13px;
    padding: 0;
}

/* ---------------------------------------------------------------
   7. PÉREMPTIONS : cartes de lots par défaut, bascule vers le tableau
   sur grand écran (data-list-view, voir _peremption_affichage.html).
   Sous 768px, mobile.css force les cartes. Les numéros de lot sont
   masqués tant que le conteneur porte .per-lots-masques.
   --------------------------------------------------------------- */
.per-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}
.per-cards-vide { grid-column: 1 / -1; }
.per-table { display: none; }
[data-list-view="table"] .per-cards { display: none; }
[data-list-view="table"] .per-table { display: block; }
.per-lots-masques .per-lot { display: none; }
[data-list-view="cards"] .per-lots-toggle { display: none; }
.per-card {
    background: #fff;
    border-radius: 10px;
    border-left: 5px solid var(--per-couleur, #adb5bd);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 11px 13px;
}
/* Couleur du liseré selon le statut du lot (classes posées par le template
   et mises à jour par peremption-action-inline.js). */
.per-card-perime { --per-couleur: rgba(var(--bs-danger-rgb)); }
.per-card-a_surveiller { --per-couleur: #ffc107; }
.per-card-surveille { --per-couleur: #0dcaf0; }
.per-card-en_stock { --per-couleur: #198754; }
.per-card-sorti { --per-couleur: #adb5bd; }
.per-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.per-card-produit {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--app-primary-text-color);
}
.per-card-top .badge { flex: none; }
.per-card-infos,
.per-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 4px;
    font-size: 0.85rem;
}
.per-card-meta { font-size: 0.78rem; color: #6c757d; margin-top: 2px; }
.per-card-valid {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
.per-card-valid .form-select { flex: 1; min-width: 0; min-height: 44px; }
/* Enregistrement à la volée : l'état s'affiche sur le menu (bordure + halo)
   et non en texte, pour ne pas décaler les colonnes. Le texte reste pour les
   lecteurs d'écran. Voir static/js/peremption-action-inline.js. */
.per-action-etat {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.per-action-select { transition: border-color 0.4s, box-shadow 0.4s, opacity 0.2s; }
.per-action-select.is-saving { opacity: 0.6; }
.per-action-select.is-saved { border-color: #198754; box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.3); }
.per-action-select.is-error { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.3); }

/* ---------------------------------------------------------------
   8. HAUTEUR DES WIDGETS : toutes les cartes d'une rangée ont la même
   hauteur, même si un libellé passe sur deux lignes.
   --------------------------------------------------------------- */
.stats-widget-col > .stat-card-link,
.stats-widget-col .stat-card {
    height: 100%;
}
.stats-widget-col .stat-card > .d-flex {
    height: 100%;
}