/* =========================================================================
   STYLE PRINCIPAL - Interface simple, gros boutons, mobile-first
   (conforme section 1 du cahier des charges : utilisateurs peu instruits)
   ========================================================================= */

:root {
    --couleur-primaire: #2f9e44;      /* vert */
    --couleur-primaire-fonce: #237032;
    --couleur-succes: #2b8a3e;
    --couleur-danger: #c92a2a;
    --couleur-attention: #b08900;
    --couleur-info: #1971c2;
    --fond-page: #f4f1ee;
    --fond-carte: #ffffff;
    --fond-input: #ffffff;
    --texte-principal: #212529;
    --texte-secondaire: #6c757d;
    --bordure: #dee2e6;
    --rayon: 14px;
    --ombre: 0 2px 8px rgba(0,0,0,0.08);

    --alerte-erreur-fond: #ffe3e3;    --alerte-erreur-texte: #9a1414;
    --alerte-succes-fond: #d3f9d8;    --alerte-succes-texte: #1e5c2b;
    --alerte-info-fond: #d0ebff;      --alerte-info-texte: #0c4a86;
    --alerte-attention-fond: #fff3bf; --alerte-attention-texte: #7a5c00;
}

/* ---- Mode sombre --------------------------------------------------------
   Basculé en ajoutant data-theme="dark" sur <html> (voir includes/header.php).
   La préférence est mémorisée dans localStorage et appliquée avant l'affichage
   pour éviter tout effet de clignotement (flash) au chargement de la page. */
html[data-theme="dark"] {
    --couleur-primaire: #37b24d;
    --couleur-primaire-fonce: #2f9e44;
    --couleur-succes: #51cf66;
    --couleur-danger: #ff6b6b;
    --couleur-attention: #fcc419;
    --couleur-info: #4dabf7;
    --fond-page: #15171a;
    --fond-carte: #1f2226;
    --fond-input: #262a2f;
    --texte-principal: #e8e6e3;
    --texte-secondaire: #9aa0a6;
    --bordure: #383c42;
    --ombre: 0 2px 10px rgba(0,0,0,0.45);

    --alerte-erreur-fond: #3d1a1a;    --alerte-erreur-texte: #ff9b9b;
    --alerte-succes-fond: #16351f;    --alerte-succes-texte: #7ee299;
    --alerte-info-fond: #13293d;      --alerte-info-texte: #82c4f8;
    --alerte-attention-fond: #3a3016; --alerte-attention-texte: #ffd873;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--fond-page);
    color: var(--texte-principal);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.4;
    transition: background-color 0.15s ease, color 0.15s ease;
    overflow-x: hidden; /* empêche toute la page de défiler horizontalement (filet de sécurité) */
    max-width: 100vw;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }

a { color: var(--couleur-info); text-decoration: none; }

/* ---- Layout général ---------------------------------------------------- */

.conteneur {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
    padding-bottom: 90px; /* place pour barre de navigation basse mobile */
}

.entete-app {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--couleur-primaire);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--ombre);
}
.entete-app h1 { color: #fff; font-size: 1.15rem; margin: 0; }
.entete-app .utilisateur-info { font-size: 0.85rem; opacity: 0.9; }
.entete-app a.deconnexion { color: #fff; font-size: 1.4rem; }
.entete-app .bouton-theme {
    background: none; border: none; color: #fff; font-size: 1.25rem;
    cursor: pointer; padding: 0; line-height: 1; display: flex; align-items: center;
}

/* ---- Cartes -------------------------------------------------------------*/

.carte {
    background: var(--fond-carte);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 18px;
    margin-bottom: 16px;
}

.carte-auth {
    max-width: 420px;
    margin: 40px auto;
    background: var(--fond-carte);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 28px 22px;
}
.page-auth { display: flex; align-items: center; min-height: 100vh; }

/* ---- Grille de gros boutons (tableau de bord) --------------------------*/

.grille-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}
@media (min-width: 600px) {
    .grille-actions { grid-template-columns: repeat(3, 1fr); }
}

.bouton-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--fond-carte);
    border: 2px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 20px 8px;
    min-height: 100px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--texte-principal);
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.bouton-action:active { transform: scale(0.96); }
.bouton-action .icone { font-size: 2rem; line-height: 1; }

.bouton-action.couleur-vente     { border-color: var(--couleur-succes); }
.bouton-action.couleur-stock     { border-color: var(--couleur-info); }
.bouton-action.couleur-paiement  { border-color: var(--couleur-attention); }
.bouton-action.couleur-perte     { border-color: var(--couleur-danger); }

/* ---- Boutons standards ---------------------------------------------------*/

.btn-principal, button.btn-principal {
    display: inline-block;
    width: 100%;
    background: var(--couleur-primaire);
    color: #fff;
    border: none;
    border-radius: var(--rayon);
    padding: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    margin-top: 8px;
}
.btn-principal:active { background: var(--couleur-primaire-fonce); }

.btn-secondaire {
    display: inline-block;
    width: 100%;
    background: var(--fond-carte);
    color: var(--texte-principal);
    border: 2px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.btn-danger { background: var(--couleur-danger); }

/* ---- Formulaires simples --------------------------------------------------*/

label {
    display: block;
    font-weight: 600;
    margin: 14px 0 6px;
    font-size: 0.95rem;
}

.bloc-monnaie-locale {
    margin: 4px 0 10px;
    padding: 8px 10px;
    background: var(--fond-carte-alt, rgba(47, 158, 68, 0.08));
    border: 1px dashed var(--couleur-primaire);
    border-radius: 8px;
}
.label-monnaie-locale {
    margin: 0 0 4px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: var(--texte-secondaire);
    display: flex !important;
    align-items: center;
    gap: 6px;
}
.drapeau-mali {
    display: inline-block;
    width: 18px;
    height: 12px;
    flex-shrink: 0;
    background: linear-gradient(to right,
        #14b53a 0%, #14b53a 33.33%,
        #fcd116 33.33%, #fcd116 66.66%,
        #ce1126 66.66%, #ce1126 100%);
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.15);
}
.champ-monnaie-locale { margin: 0 !important; }

input[type=text], input[type=number], input[type=password],
input[type=date], input[type=tel], select, textarea {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    border: 2px solid var(--bordure);
    border-radius: 10px;
    background: var(--fond-input);
    color: var(--texte-principal);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--couleur-primaire);
}

/* ---- Alertes ---------------------------------------------------------- */

.alerte {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 0.95rem;
}
.alerte-erreur  { background: var(--alerte-erreur-fond); color: var(--alerte-erreur-texte); }
.alerte-succes  { background: var(--alerte-succes-fond); color: var(--alerte-succes-texte); }
.alerte-info    { background: var(--alerte-info-fond); color: var(--alerte-info-texte); }
.alerte-attention { background: var(--alerte-attention-fond); color: var(--alerte-attention-texte); }

/* ---- Sélecteur visuel de produit (image + nom, au lieu d'une liste déroulante) --------
   Utilisé partout où on choisit un produit : avec image si disponible, sinon une pastille
   avec la première lettre, pour que les utilisateurs peu à l'aise avec la lecture puissent
   reconnaître le produit sans confusion (section 1 du cahier des charges). */

.grille-produits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
    margin: 8px 0 4px;
}
.carte-produit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 2px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.1s ease, transform 0.1s ease;
}
.carte-produit:active { transform: scale(0.95); }
.carte-produit.selectionne { border-color: var(--couleur-primaire); border-width: 3px; }
.carte-produit img, img.vignette-produit {
    width: 56px; height: 56px; min-width: 56px; object-fit: cover; object-position: center;
    border-radius: 12px; background: #fff; display: block;
}
.carte-produit .icone-produit-defaut {
    width: 52px; height: 52px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 800; color: #fff;
    background: var(--couleur-primaire);
}
.carte-produit .nom-produit { font-size: 0.8rem; font-weight: 600; line-height: 1.15; color: var(--texte-principal); }
.carte-produit .info-produit { font-size: 0.68rem; color: var(--texte-secondaire); }

/* ---- Tableaux simples ---------------------------------------------------*/

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: max-content; /* le tableau garde sa largeur naturelle... */
}
.table-scroll-wrapper {
    overflow-x: auto;              /* ...et c'est cette enveloppe qui défile, pas la page */
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
th, td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--bordure); }
/* Tableaux de plus de 3 colonnes (rapports, arrivages, ventes...) : contenu centré horizontalement et verticalement.
   La classe est ajoutée automatiquement (voir includes/footer.php). Les petits tableaux restent comme avant. */
table.tableau-centre th, table.tableau-centre td { text-align: center !important; vertical-align: middle !important; }
/* ...sauf les petits formulaires qui s'ouvrent dans une cellule (✏️, 💵 Gérer) : plus lisibles alignés normalement */
table.tableau-centre td details > form, table.tableau-centre td details > div { text-align: start; }
table.tableau-centre th .fx-titre { justify-content: center !important; }
th { color: var(--texte-secondaire); font-weight: 600; }

/* ---- Navigation basse (mobile) ------------------------------------------*/

.nav-basse {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(180deg, #2f9e44 0%, #1e6b30 100%); /* vert foncé, plus sombre que l'en-tête */
    box-shadow: 0 -4px 14px rgba(0,0,0,.18);
    border-radius: 18px 18px 0 0;
    display: flex;
    justify-content: center;          /* boutons regroupés au centre, même sur grand écran */
    gap: 4px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    z-index: 20;
}
.nav-basse a {
    flex: 1 1 0;
    max-width: 110px;                 /* sur ordinateur, les boutons ne s'étalent pas sur toute la largeur */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 4px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
    transition: background .15s ease;
}
.nav-basse a:hover { background: rgba(255,255,255,.12); }
/* Icônes dans un cercle blanc */
.nav-basse .icone {
    width: 42px; height: 42px; border-radius: 50%;
    background: #d3e9d7;              /* vert clair grisé : doux, se détache sur le vert foncé */
    border: 2px solid #69db7c;        /* fin liseré vert, un ton au-dessus du cercle */
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    transition: transform .15s ease;
}
.nav-basse a:active .icone { transform: scale(0.92); }
/* Page en cours : bouton surligné et icône légèrement soulevée */
.nav-basse a.actif { background: rgba(255,255,255,.22); }
.nav-basse a.actif .icone { transform: translateY(-3px); background: #b2f2bb; border-color: #fff; box-shadow: 0 5px 10px rgba(0,0,0,.3); }
/* Libellés centrés, sur 2 lignes si besoin (6 boutons pour le PDG et le gérant) */
.nav-basse a { min-width: 0; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
@media (max-width: 420px) {
    .nav-basse { gap: 0; padding-left: 2px; padding-right: 2px; }
    .nav-basse a { padding: 5px 1px; font-size: 0.6rem; letter-spacing: 0; gap: 4px; }
    .nav-basse .icone { width: 36px; height: 36px; font-size: 1.1rem; }
}

.note { font-size: 0.85rem; color: var(--texte-secondaire); margin-top: 16px; }

/* ---- Cartes chiffres tableau de bord PDG ---------------------------------*/

.stat-carte {
    background: var(--fond-carte);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 16px;
    text-align: center;
}
.stat-carte .valeur { font-size: 1.5rem; font-weight: 800; color: var(--couleur-primaire); }
.stat-carte .libelle { font-size: 0.8rem; color: var(--texte-secondaire); }
.grille-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 600px) {
    .grille-stats { grid-template-columns: repeat(4, 1fr); }
}
/* Écrans larges (ordinateur, tablette) : le contenu profite de la largeur de l'écran */
@media (min-width: 1024px) {
    .conteneur { max-width: 1280px; }
    .conteneur.conteneur-large { max-width: none; width: 100%; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
}

/* ===== Cartes de chiffres : petite bande de couleur à gauche (tous les comptes) ===== */
.stat-carte { border-left: 4px solid #0d6efd; background: #f8f9fa; }
.stat-carte .valeur { color: #0d6efd; }
[data-theme="dark"] .stat-carte { background: var(--fond-carte); border-left-color: #4dabf7; }
[data-theme="dark"] .stat-carte .valeur { color: #4dabf7; }

/* ===== Compte PDG (consultation) : couleurs façon Electro ; en-tête, pied de page et titres de tableaux restent verts ===== */
:root:not([data-theme="dark"]) body.role-visiteur { background: #fcfcfd; }
body.role-visiteur .conteneur a:not([class]) { color: #0d6efd; }
body.role-visiteur .carte { border: 1px solid rgba(0,0,0,.05); box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
[data-theme="dark"] body.role-visiteur .carte { border-color: var(--bordure); }
/* Titres de tableaux : verts */
body.role-visiteur th { background: var(--couleur-primaire); color: #fff; }
body.role-visiteur tr:first-child th:first-child { border-top-left-radius: 8px; }
body.role-visiteur tr:first-child th:last-child { border-top-right-radius: 8px; }
body.role-visiteur th a { color: #fff; }
body.role-visiteur th .fx-btn { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.5); }
body.role-visiteur th .fx-btn.actif { background: #ffc107; color: #212529; }
/* Boutons */
body.role-visiteur .btn-principal, body.role-visiteur button.btn-principal { background: #0d6efd; }
body.role-visiteur .btn-principal:active { background: #0b5ed7; }
body.role-visiteur .acc-periodes a { color: #0d6efd; }
body.role-visiteur .acc-periodes a.actif { background: #0d6efd; color: #fff; }
/* Chiffres de l'accueil : fond teinté + bande de couleur à gauche */
body.role-visiteur .acc-kpi { background: #f8f9fa; border: 0; border-left: 4px solid #6c757d; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
body.role-visiteur .acc-kpi.vert { background: rgba(25,135,84,.1); border-left-color: #198754; }
body.role-visiteur .acc-kpi.rouge { background: rgba(220,53,69,.1); border-left-color: #dc3545; }
body.role-visiteur .acc-kpi.orange { background: rgba(255,193,7,.18); border-left-color: #ffc107; }
body.role-visiteur .acc-kpi.bleu { background: rgba(13,110,253,.1); border-left-color: #0d6efd; }
body.role-visiteur .acc-kpi.vert .v { color: #198754; } body.role-visiteur .acc-kpi.rouge .v { color: #dc3545; }
body.role-visiteur .acc-kpi.orange .v { color: #997404; } body.role-visiteur .acc-kpi.bleu .v { color: #0d6efd; }
body.role-visiteur a.acc-kpi:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); }
[data-theme="dark"] body.role-visiteur .acc-kpi { background: rgba(255,255,255,.04); }
[data-theme="dark"] body.role-visiteur .acc-kpi.vert .v { color: #51cf66; } [data-theme="dark"] body.role-visiteur .acc-kpi.rouge .v { color: #ff6b6b; }
[data-theme="dark"] body.role-visiteur .acc-kpi.orange .v { color: #fcc419; } [data-theme="dark"] body.role-visiteur .acc-kpi.bleu .v { color: #4dabf7; }
/* Carrés des groupes / points de vente : couleurs pleines */
body.role-visiteur .acc-carre { border: 0; color: #fff; border-radius: 1rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); transition: transform .3s, box-shadow .3s; }
body.role-visiteur .acc-carre:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.12); }
body.role-visiteur .acc-carre:nth-child(6n+1) { background: #0d6efd; }
body.role-visiteur .acc-carre:nth-child(6n+2) { background: #198754; }
body.role-visiteur .acc-carre:nth-child(6n+3) { background: #ffc107; color: #212529; }
body.role-visiteur .acc-carre:nth-child(6n+4) { background: #dc3545; }
body.role-visiteur .acc-carre:nth-child(6n+5) { background: #0aa2c0; }
body.role-visiteur .acc-carre:nth-child(6n+6) { background: #6c757d; }
body.role-visiteur .acc-carre * { color: inherit !important; }
body.role-visiteur .acc-carre .acc-barre { background: rgba(255,255,255,.3); }
body.role-visiteur .acc-carre .acc-barre span { background: #fff; }
/* Graphiques */
body.role-visiteur .graph-barres .b i, body.role-visiteur .graph-parts .piste span, body.role-visiteur .acc-courbe div { background: #0d6efd; }
/* Compte PDG (consultation) : lignes colorées (même date = même couleur), voir couleurs-lignes.js */
body.role-visiteur tr.lc-0 > td { background: rgba(13,110,253,.09); }
body.role-visiteur tr.lc-1 > td { background: rgba(25,135,84,.11); }
body.role-visiteur tr.lc-2 > td { background: rgba(255,193,7,.17); }
body.role-visiteur tr.lc-3 > td { background: rgba(220,53,69,.09); }
body.role-visiteur tr.lc-4 > td { background: rgba(13,202,240,.13); }
body.role-visiteur tr.lc-5 > td { background: rgba(253,126,20,.12); }
body.role-visiteur tr.lc-6 > td { background: rgba(108,117,125,.12); }