/* =============================================================
   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
   --------------------------------------------------------------- */
:root {
    --app-primary:              #f33939;
    --app-font-size:             16px;
    --app-primary-color:         var(--app-primary);
    --app-primary-light-color:   color-mix(in srgb, var(--app-primary-color) 10%, white);
    --app-primary-text-color:    #212121;
    --app-secondary-text-color:  #a0a0a0;
    --app-border-light-color:    #dee2e6;

    /* 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. */
    --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;


    --app-border-radius-sm:      0.4rem;
    --app-border-radius-md:      0.6rem;
    --app-border-radius-lg:      0.9rem;
    --app-border-radius-pill:    999px;

    --navbar-height: 56px;

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

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

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

body {
    background-color: #f8f9fa;
}

/* Classes Bootstrap « primary » (texte, fonds, boutons) recolorées avec
   la couleur principale de la pharmacie. */
.text-primary {
    color: var(--app-primary) !important;
}
.bg-primary {
    background-color: var(--app-primary) !important;
    color: white !important;
}
.btn-primary {
    background-color: var(--app-primary-light-color) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-primary) !important;
}
.btn-primary:hover {
    background-color: white !important;
}
.btn-outline-primary {
    color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--app-primary-light-color) !important;
    color: var(--app-primary) !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) !important;
}
.form-check-input:checked {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !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;
}


/* ---------------------------------------------------------------
   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;
}

/* 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;
}

/* 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: #fff !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;
}

/* ---------------------------------------------------------------
   4. PAGE D'ACCUEIL : grandes tuiles d'accès aux modules (home.html).
   .is-disabled + .badge-bientot = module pas encore disponible.
   --------------------------------------------------------------- */
.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;
}
.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);
}

/* 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%;
}