/* =====================================================================
   ERP SYFL — feuille de style unique, zéro framework, zéro JS, zéro CDN.
   Sobre, moderne, imprimable-friendly ; extensible pour les modules
   futurs (tables, formulaires, bannières).
   En cas de modification de ce fichier : incrémenter ?v= dans
   src/Views/layout.php et public/index.php (3 occurrences : 1 dans layout, 2 dans index).
   ===================================================================== */

/* --- Variables ------------------------------------------------------ */
:root {
    --couleur-fond: #f4f5f7;
    --couleur-surface: #ffffff;
    --couleur-texte: #1f2430;
    --couleur-texte-doux: #6b7280;
    --couleur-bordure: #e2e5ea;

    --couleur-primaire: #1e40af;      /* bleu sobre */
    --couleur-primaire-fonce: #1b358f;
    --couleur-sombre: #111827;        /* nav */
    --couleur-sombre-clair: #1f2937;

    --couleur-succes: #15803d;
    --couleur-succes-fond: #ecfdf5;
    --couleur-erreur: #b91c1c;
    --couleur-erreur-fond: #fef2f2;
    --couleur-info: #1d4ed8;
    --couleur-info-fond: #eff6ff;
    --couleur-warn: #b45309;

    --rayon: 8px;
    --ombre: 0 1px 3px rgba(17, 24, 39, 0.08);
    --espacement: calc(1rem + 5px);
    --largeur-max: 1100px;

    --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Base ----------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--police);
    font-size: 16px;
    line-height: 1.55;
    color: var(--couleur-texte);
    background: var(--couleur-fond);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3 {
    line-height: 1.25;
    margin: 0 0 0.5em;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }

a {
    color: var(--couleur-primaire);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
}

/* Journal d'activité : détails lisibles dans une cellule (liste compacte). */
.audit-details {
    margin: 0;
    padding: 0 0 0 1.1em;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 40ch;
    font-size: 0.88em;
    color: var(--couleur-texte-doux);
    list-style-type: '› ';
}

/* Journal d'activité : horodatage sur deux lignes (date + relatif). */
.audit-date { white-space: nowrap; }
.audit-date .audit-date-heure {
    display: block;
    font-variant-numeric: tabular-nums;
}
.audit-date .audit-date-relative {
    display: block;
    font-size: 0.8em;
    color: var(--couleur-texte-doux);
}

/* Journal d'activité : colonne IP discrète. */
.audit-ip {
    color: var(--couleur-texte-doux);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

/* --- Barre de navigation ------------------------------------------- */
.topbar {
    background: var(--couleur-sombre);
    color: #f9fafb;
}

.nav {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 var(--espacement);
    display: flex;
    align-items: center;
    gap: var(--espacement);
    flex-wrap: wrap;
    min-height: 56px;
}

.brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffffff;
    letter-spacing: 0.02em;
}
.brand:hover { text-decoration: none; }

.nav-links {
    list-style: none;
    display: flex;
    gap: calc(0.25rem + 5px);
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.nav-links a {
    display: block;
    padding: calc(0.4rem + 5px) calc(0.7rem + 5px);
    border-radius: var(--rayon);
    color: #d1d5db;
    font-size: 0.95rem;
}
.nav-links a:hover { background: var(--couleur-sombre-clair); text-decoration: none; }

.nav-links a.disabled {
    color: #6b7280;           /* grisé : module à venir */
    cursor: not-allowed;
}
.nav-links a.disabled:hover { background: transparent; }

.nav-user {
    display: flex;
    align-items: center;
    gap: calc(0.75rem + 5px);
    margin-left: auto;
}

.nav-username {
    color: #e5e7eb;
    font-size: 0.9rem;
}

.form-inline { display: inline; margin: 0; }

/* --- Conteneur & pied de page --------------------------------------- */
.container {
    width: 100%;
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: calc(var(--espacement) * 1.5) var(--espacement);
    flex: 1 1 auto;
}

/* --- En-tête de page (titre + action principale) ----------------------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacement);
    flex-wrap: wrap;
    margin-bottom: var(--espacement);
}

/* La marge basse globale des titres créerait un décalage vertical
   entre le h1 et le bouton : on la neutralise ici (voulu). */
.page-header h1 { margin: 0; }

.footer {
    border-top: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte-doux);
    font-size: 0.85rem;
    text-align: center;
    padding: calc(0.75rem + 5px);
}

/* --- Cartes ---------------------------------------------------------- */
.card {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: calc(var(--espacement) * 1.25);
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--espacement);
    margin-top: var(--espacement);
}

.module-card h2 { color: var(--couleur-primaire); }

/* --- Authentification ------------------------------------------------ */
.auth-card {
    max-width: 380px;
    margin: calc(3rem + 5px) auto;
}

/* --- Tableaux (générique, pour les prochains modules) ---------------- */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    font-size: 0.95rem;
}

caption {
    text-align: left;
    font-weight: 600;
    padding: calc(0.5rem + 5px) 0;
}

th, td {
    text-align: left;
    padding: calc(0.6rem + 5px) calc(0.75rem + 5px);
    border-bottom: 1px solid var(--couleur-bordure);
}

thead th {
    background: var(--couleur-fond);
    font-weight: 600;
    color: var(--couleur-texte-doux);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }

td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Boutons ---------------------------------------------------------- */
.btn {
    display: inline-block;
    background: var(--couleur-primaire);
    color: #ffffff;
    border: none;
    border-radius: var(--rayon);
    padding: calc(0.55rem + 5px) calc(1.1rem + 5px);
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--couleur-primaire-fonce); text-decoration: none; }

.btn-danger { background: var(--couleur-erreur); }
.btn-danger:hover { background: #991b1b; }

.btn-sm { padding: calc(0.3rem + 5px) calc(0.7rem + 5px); font-size: 0.85rem; }

button.btn { appearance: none; }

/* --- Formulaires ------------------------------------------------------ */
.form-group {
    margin-bottom: var(--espacement);
}

label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(0.3rem + 5px);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: calc(0.55rem + 5px) calc(0.7rem + 5px);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--couleur-texte);
    background: var(--couleur-surface);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 1px;
    border-color: var(--couleur-primaire);
}

/* --- Bannière / bandeau d'information --------------------------------- */
.banner {
    border: 1px solid var(--couleur-bordure);
    border-left: 4px solid var(--couleur-info);
    background: var(--couleur-info-fond);
    color: var(--couleur-texte);
    border-radius: var(--rayon);
    padding: calc(0.8rem + 5px) var(--espacement);
    margin-bottom: var(--espacement);
}

/* --- Messages flash ---------------------------------------------------- */
.flash {
    border-radius: var(--rayon);
    padding: calc(0.7rem + 5px) var(--espacement);
    margin-bottom: var(--espacement);
    border: 1px solid transparent;
    font-size: 0.95rem;
}

.flash-success {
    background: var(--couleur-succes-fond);
    color: var(--couleur-succes);
    border-color: #bbf7d0;
}

.flash-error {
    background: var(--couleur-erreur-fond);
    color: var(--couleur-erreur);
    border-color: #fecaca;
}

.flash-info {
    background: var(--couleur-info-fond);
    color: var(--couleur-info);
    border-color: #bfdbfe;
}

/* --- Divers ------------------------------------------------------------ */
.muted {
    color: var(--couleur-texte-doux);
    font-size: 0.9rem;
}

/* Erreur de validation d'un champ — visible, rouge (ne pas utiliser muted :
   l'utilisateur doit voir pourquoi son POST a été refusé). */
.form-error {
    color: var(--couleur-erreur);
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: calc(0.2rem + 5px);
}

/* Exemple de valeur d'un champ — discret mais distinct de l'aide. */
.exemple {
    color: var(--couleur-texte-doux);
    font-size: 0.85rem;
    margin-top: calc(0.2rem + 5px);
}

.exemple code {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.85rem;
}

/* Champ figé en production : valeur affichée en texte (aucun input). */
.valeur-figee {
    margin: 0 0 calc(0.3rem + 5px);
    padding: calc(0.55rem + 5px) calc(0.7rem + 5px);
    border: 1px dashed var(--couleur-bordure);
    border-radius: var(--rayon);
    background: var(--couleur-surface);
    font-size: 0.95rem;
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 768px) {
    .nav {
        padding: calc(0.5rem + 5px) var(--espacement);
    }

    .nav-links {
        flex-basis: 100%;
        order: 3;
    }

    .nav-user { margin-left: 0; }

    .container {
        padding: var(--espacement);
    }

    .auth-card { margin: calc(1.5rem + 5px) auto; }

    table {
        display: block;
        overflow-x: auto;
    }
}

/* --- Badges de statut (T13, valeurs alignées sur les vues existantes) --- */
.badge { display: inline-block; padding: 2px calc(8px + 5px); border-radius: 4px; font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.badge-success { background: #dff0d8; color: #2e6b2e; }
.badge-info { background: #d9edf7; color: #1f5b76; }
.badge-danger { background: #f2dede; color: #8b2020; }
.badge-muted { background: #eee; color: #555; }
.badge-warn { background: #fdf3d8; color: #8a5b00; }
.badge-violet { background: #ece8f7; color: #5b3ea6; }

/* --- État d'application (mode test / production) + zone de danger ------ */
.mode-test-banner { border-left-color: #d97706; background: #fef3c7; }
.mode-prod-banner { border-left-color: var(--couleur-succes, #16a34a); background: var(--couleur-succes-fond, #dcfce7); }

.danger-card {
    border: 2px solid var(--couleur-erreur);
    background: var(--couleur-erreur-fond, #fef2f2);
    margin-top: var(--espacement);
}
.danger-card h2 { color: var(--couleur-erreur); }

.btn-danger-big {
    display: inline-block;
    background: var(--couleur-erreur);
    color: #ffffff;
    border: 2px solid #991b1b;
    border-radius: var(--rayon);
    padding: calc(0.9rem + 5px) calc(1.6rem + 5px);
    font-size: 1.15rem;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-decoration: none;
    margin: var(--espacement) 0;
}
.btn-danger-big:hover {
    background: #991b1b;
    text-decoration: none;
}

.kpi-montant { font-variant-numeric: tabular-nums; font-size: 1.1rem; font-weight: 600; }

/* --- Dashboard : accès rapides pleine largeur -------------------------- */
.acces-rapides {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacement);
    margin-top: var(--espacement);
}

.acces-rapides .module-card {
    flex: 1 1 150px;      /* 6 par ligne sur ~1100px, wrap en dessous */
    min-width: 150px;
}

.acces-rapides .module-card h2 {
    font-size: 1rem;      /* cartes compactes : titre plus discret */
    margin: 0;
}

/* --- Dashboard : deux colonnes (stats | documents) --------------------- */

/* Téléphone (≤ 767px) : styles de base, tout empilé sur une colonne
   (ordre DOM : stats puis documents). */
.dashboard-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacement);
    align-items: start;
    margin-top: calc(var(--espacement) * 1.5);
}

.dashboard-colonnes > section {
    min-width: 0;        /* ceinture : navigateurs anciens */
    overflow-x: auto;    /* taille minimale auto = 0 → jamais de débordement */
}

.stat-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espacement);
    margin-top: var(--espacement);
}

/* Tablette (≥ 768px) : deux colonnes, stats ~2fr à gauche,
   documents ~3fr à droite ; cartes KPI côte à côte. */
@media (min-width: 768px) {
    .dashboard-colonnes {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .stat-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ordinateur (≥ 1024px) : mêmes proportions, on reste sobre. */
@media (min-width: 1024px) {
    .stat-list {
        gap: calc(var(--espacement) * 0.75);
    }
}

/* Écran large (≥ 1440px) : le conteneur s'élargit pour le dashboard. */
@media (min-width: 1440px) {
    .container:has(.dashboard) {
        max-width: 1440px;
    }

    .dashboard {
        max-width: 1320px;
        margin: 0 auto;
    }
}

/* Widescreen (≥ 1920px) : dashboard élargi localement (le conteneur
   global --largeur-max n'est pas touché), cartes KPI plus aérées. */
@media (min-width: 1920px) {
    /* Le conteneur s'élargit uniquement pour la page dashboard. */
    .container:has(.dashboard) {
        max-width: 1800px;
    }

    .dashboard {
        max-width: 1600px;
        margin: 0 auto;
    }

    .stat-list {
        gap: var(--espacement);
    }
}

/* --- Dashboard : flashcards avec compteurs ------------------------------ */

/* Flashcard : titre + pastille de compteur côte à côte (marge auto
   poussant le compteur à droite). */
.acces-rapides .module-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(0.5rem + 5px);
}

.flashcard-compteur {
    background: #eee;
    color: #555;
    border-radius: 999px;
    padding: 2px calc(10px + 5px);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

/* --- Dashboard : grille de graphiques SVG (12 derniers mois) ------------ */

/* Grille : 1 colonne par défaut (mobile/tablette), 2 colonnes >= 1100px. */
.chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacement);
    margin-top: var(--espacement);
}

@media (min-width: 1100px) {
    .chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Le visuel de carte (surface blanche, rayon, ombre) est déjà fourni
   par .card — on n'ajoute ici que le nécessaire à la <figure> et au SVG. */
.chart {
    margin: 0;
    min-width: 0;
}

.chart figcaption {
    font-weight: 600;
    margin-bottom: calc(0.5rem + 5px);
}

.chart svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Légende sous le graphique : pastilles carrées rondes + libellés. */
.chart-legende {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.35rem + 5px) calc(1rem + 5px);
    margin-top: calc(0.5rem + 5px);
}

.chart-legende-item {
    display: inline-flex;
    align-items: center;
    gap: calc(0.4rem + 5px);
}

.chart-legende-pastille {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    flex: 0 0 auto;
}

/* --- Autocomplete produits (saisie des lignes devis / facture) ------- */

/* Cellule hôte : référence du positionnement de la liste déroulante. */
.autocomplete-champ {
    position: relative;
}

/* Liste déroulante filtrée (options = produits actifs). */
.autocomplete-liste {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 240px;
    overflow-y: auto;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-top: none;
    border-radius: 0 0 var(--rayon) var(--rayon);
    box-shadow: var(--ombre);
}

.autocomplete-option {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: none;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.autocomplete-option:hover,
.autocomplete-option.est-actif {
    background: var(--couleur-info-fond);
}

/* Fragment correspondant à la saisie : surligné sobre (couleur primaire). */
.autocomplete-option mark {
    background: transparent;
    color: var(--couleur-primaire);
    font-weight: 700;
    padding: 0;
}

.autocomplete-meta {
    color: var(--couleur-texte-doux);
    font-size: 0.85em;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* =====================================================================
   15. Dashboard refondu (2026-09-30) — tabs de période, carte de
       conversion, trésorerie, wernicke de tables opérationnelles.
   ===================================================================== */

/* --- Sélecteur de fenêtre 3/6/12 mois (liens purs, sans JS) ---------- */
.chart-tabs {
    display: flex;
    gap: 0.25rem;
    margin: var(--espacement) 0 0;
    flex-wrap: wrap;
}

.chart-tab {
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
    text-decoration: none;
    color: var(--couleur-texte);
    font-size: 0.9rem;
    background: var(--couleur-surface);
}

.chart-tab:hover {
    background: var(--couleur-info-fond);
}

.chart-tab.actif {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: #ffffff;
    font-weight: 600;
}

/* --- Carte taux de conversion des devis ----------------------------- */
.conversion-card {
    display: flex;
    align-items: baseline;
    gap: var(--espacement);
    margin-top: var(--espacement);
}

.conversion-taux {
    font-size: 2rem;
    font-weight: 700;
    color: var(--couleur-primaire);
}

/* --- Bandeau trésorerie attendue (4 cartes côte à côte) -------------- */
.stat-list-tresorerie {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espacement);
    margin-top: var(--espacement);
}

@media (min-width: 768px) {
    .stat-list-tresorerie {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .stat-list-tresorerie {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Carte « > 90 j » accentuée (urgence de recouvrement). */
.stat-list-tresorerie .card:nth-child(4) .kpi-montant,
.stat-list-tresorerie .card:nth-child(4) h2 {
    color: var(--couleur-erreur);
}