/* =====================================================================
   CHARTE DATABOX / DATADEVIS — validée le 08/11/2026
   À charger APRÈS bootstrap.min.css (Bootstrap 5.3) :
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap">
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/charte.css" asp-append-version="true" />
   Surcharge les variables --bs-* et ajoute les composants maison "db-".
   ===================================================================== */
:root {
  /* --- Marque (logo André Box) --- */
  --db-primaire:        #03427a;  /* bleu marine : DataDevis + "ANDRÉ" du logo */
  --db-primaire-fonce:  #022e56;
  --db-primaire-clair:  #e8f0f8;  /* fonds de sélection, en-têtes de tableaux */
  --db-primaire-moyen:  #b4c7e7;
  --db-selection:       #dbe5f5;  /* ligne sélectionnée (repris de DataDevis) */
  --db-ciel:            #3a8fd6;  /* focus, liens survolés */
  --db-rouge:           #d7262f;  /* erreurs, suppression */
  --db-jaune:           #f5c400;  /* alertes, à traiter */

  /* --- Neutres --- */
  --db-fond:            #f4f6f9;
  --db-surface:         #ffffff;
  --db-bordure:         #dde3ea;
  --db-texte:           #1f2937;
  --db-texte-doux:      #6b7280;

  /* --- États métier des box --- */
  --db-libre:           #1f9d55;  --db-libre-fond:   #e6f6ec;
  --db-occupe:          #03427a;  --db-occupe-fond:  #e8f0f8;
  --db-bloque:          #c2410c;  --db-bloque-fond:  #fdeee4;

  /* --- Formes --- */
  --db-rayon:           .75rem;
  --db-rayon-petit:     .375rem;
  --db-ombre:           0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);

  /* --- Surcharges Bootstrap --- */
  --bs-body-font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --bs-body-color: var(--db-texte);
  --bs-body-bg: var(--db-fond);
  --bs-primary: var(--db-primaire);
  --bs-primary-rgb: 3,66,122;
  --bs-link-color: var(--db-primaire);
  --bs-link-color-rgb: 3,66,122;
  --bs-link-hover-color: var(--db-ciel);
  --bs-border-color: var(--db-bordure);
  --bs-danger: var(--db-rouge);
}
body { font-size: .9375rem; }
h1,.h1 { font-size: 1.5rem; font-weight: 500; }
h2,.h2 { font-size: 1.25rem; font-weight: 500; }
h3,.h3 { font-size: 1rem; font-weight: 700; }

/* ---------- Boutons et champs ---------- */
.btn { border-radius: var(--db-rayon-petit); font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--db-primaire); --bs-btn-border-color: var(--db-primaire);
  --bs-btn-hover-bg: var(--db-primaire-fonce); --bs-btn-hover-border-color: var(--db-primaire-fonce);
  --bs-btn-active-bg: var(--db-primaire-fonce); --bs-btn-active-border-color: var(--db-primaire-fonce);
  --bs-btn-disabled-bg: var(--db-primaire); --bs-btn-disabled-border-color: var(--db-primaire); }
.btn-outline-primary { --bs-btn-color: var(--db-primaire); --bs-btn-border-color: var(--db-primaire);
  --bs-btn-hover-bg: var(--db-primaire); --bs-btn-hover-border-color: var(--db-primaire);
  --bs-btn-active-bg: var(--db-primaire-fonce); --bs-btn-active-border-color: var(--db-primaire-fonce); }
.btn-danger { --bs-btn-bg: var(--db-rouge); --bs-btn-border-color: var(--db-rouge); }
.form-control, .form-select { border-radius: var(--db-rayon-petit); }
/* Champs sur fond blanc (Bootstrap prend --bs-body-bg, le gris de la page) ; lecture seule en gris */
.form-control, .form-select { background-color: var(--db-surface); }
.form-control[readonly] { background-color: var(--db-fond); color: var(--db-texte-doux); }
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible {
  border-color: var(--db-ciel); box-shadow: 0 0 0 .2rem rgba(58,143,214,.25); }

/* ---------- Cadre de l'application ---------- */
.db-entete { background: var(--db-surface); border-bottom: 1px solid var(--db-bordure);
  display: flex; align-items: center; gap: 1.5rem; padding: .5rem 1.25rem; }
.db-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.db-logo img { max-height: 48px; }
.db-entete .titre { color: var(--db-texte); line-height: 1.2; }
.db-entete .titre strong { display: block; font-size: 1rem; }
.db-entete .titre span { font-size: .8rem; color: var(--db-texte-doux); text-transform: uppercase; letter-spacing: .5px; }
.db-utilisateur { margin-left: auto; font-size: .85rem; color: var(--db-texte-doux); display: flex; align-items: center; gap: .75rem; }

.db-cadre { display: flex; min-height: calc(100vh - 65px); }
.db-menu { width: 200px; flex-shrink: 0; background: var(--db-surface); border-right: 1px solid var(--db-bordure); padding: .75rem .5rem; }
.db-menu a { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: var(--db-rayon-petit);
  color: var(--db-texte); text-decoration: none; font-weight: 500; margin-bottom: 2px; }
.db-menu a:hover { background: var(--db-fond); }
.db-menu a.actif { background: var(--db-primaire-clair); color: var(--db-primaire); box-shadow: inset 3px 0 0 var(--db-primaire); }
.db-menu svg { width: 18px; height: 18px; flex-shrink: 0; }
.db-contenu { flex: 1; padding: 1.25rem 1.5rem; min-width: 0; }

/* ---------- Onglets ---------- */
.db-onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--db-bordure); margin-bottom: 1rem; overflow-x: auto; overflow-y: hidden; }
.db-onglets a { padding: .55rem 1rem; color: var(--db-texte-doux); text-decoration: none; font-weight: 500;
  border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.db-onglets a:hover { color: var(--db-primaire); }
.db-onglets a.actif, .db-onglets a.active { color: var(--db-primaire); border-bottom-color: var(--db-primaire); }

/* ---------- Cartes ---------- */
.db-carte { background: var(--db-surface); border: 1px solid var(--db-bordure); border-radius: var(--db-rayon); box-shadow: var(--db-ombre); }
.db-carte-entete { padding: .75rem 1rem; border-bottom: 1px solid var(--db-bordure); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.db-carte-corps { padding: 1rem; }

/* ---------- Indicateurs (KPI) ---------- */
.db-kpi { padding: .9rem 1rem; }
.db-kpi .valeur { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--db-primaire); }
.db-kpi .libelle { font-size: .8rem; color: var(--db-texte-doux); text-transform: uppercase; letter-spacing: .4px; }
.db-kpi .part { font-size: .85rem; font-weight: 500; }
.db-kpi.libre .valeur { color: var(--db-libre); }
.db-kpi.bloque .valeur { color: var(--db-bloque); }
.db-horloge .heure { font-size: 1.75rem; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--db-texte); }

/* ---------- Barre d'occupation ---------- */
.db-barre { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--db-fond); }
.db-barre .o { background: var(--db-occupe); }
.db-barre .l { background: var(--db-libre); }
.db-barre .b { background: var(--db-bloque); }
.db-legende { display: flex; gap: 1rem; font-size: .8rem; color: var(--db-texte-doux); flex-wrap: wrap; }
.db-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* ---------- Graphes du Dashboard (SVG dessiné par Donnees/GrapheSvg.cs) ---------- */
.db-graphe { display: block; width: 100%; height: auto; }
.db-graphe .grille { stroke: var(--db-bordure); stroke-width: 1; }
.db-graphe .axe { font-size: 11px; fill: var(--db-texte-doux); font-variant-numeric: tabular-nums; }
.db-graphe .point:hover circle[r="4"] { r: 5; }
.db-graphe .point:hover path, .db-graphe .point:hover rect[fill]:not([fill="transparent"]) { opacity: .8; }
.db-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Pastilles d'état ---------- */
.db-etat { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 500; padding: .15rem .5rem; border-radius: 999px; }
.db-etat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.db-etat.libre  { color: var(--db-libre);  background: var(--db-libre-fond); }
.db-etat.occupe { color: var(--db-occupe); background: var(--db-occupe-fond); }
.db-etat.bloque { color: var(--db-bloque); background: var(--db-bloque-fond); }

/* ---------- Tableaux de données ---------- */
.db-table-cadre { max-height: 70vh; overflow: auto; border: 1px solid var(--db-bordure); border-radius: var(--db-rayon-petit); }
.db-table { width: 100%; font-size: .875rem; border-collapse: separate; border-spacing: 0; }
.db-table thead th { position: sticky; top: 0; z-index: 1; background: var(--db-primaire-clair); color: var(--db-primaire);
  font-weight: 700; font-size: .8rem; padding: .5rem .6rem; border-bottom: 1px solid var(--db-primaire-moyen); white-space: nowrap; }
.db-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--db-bordure); background: var(--db-surface); }
.db-table tbody tr:nth-child(even) td { background: #fafbfc; }
.db-table tbody tr:hover td { background: var(--db-primaire-clair); }
.db-table tbody tr.selection td { background: var(--db-selection); }
.db-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.db-table a { text-decoration: none; font-weight: 500; }
.db-table a:hover { text-decoration: underline; }

/* ---------- Petits écrans ---------- */
@media (max-width: 767px) {
  .db-menu { display: none; }
  .db-entete .titre { display: none; }
  .db-contenu { padding: 1rem; }
}