/* ============================================================
   css/style.css — Feuille de style de l'application ABS Mines
   Chaque bloc est commenté pour expliquer son rôle.
   ============================================================ */

/* On importe les 3 polices utilisées dans toute l'application depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* On définit des variables CSS réutilisables (palette de couleurs de l'application) */
:root {
  --ink: #20242B;         /* couleur encre foncée : fonds sombres (barre latérale) */
  --ink-soft: #2C313A;    /* variante un peu plus claire de l'encre */
  --stone: #E3E1D8;       /* couleur pierre claire : fond général de page */
  --stone-deep: #D6D2C4;  /* variante plus foncée de la pierre */
  --card: #FBFAF7;        /* couleur des cartes/blocs blancs */
  --copper: #B5651D;      /* couleur cuivre : boutons principaux */
  --cobalt: #2A4A73;      /* couleur cobalt : accents bleus */
  --gold: #AD8A28;        /* couleur or : accents dorés (TORA, navigation active) */
  --gold-raw: #8C7A45;    /* couleur or brut (amalgame avec mercure) */
  --zinc: #7E838A;        /* couleur zinc : gris neutre */
  --germanium: #5C6B4F;   /* couleur germanium : vert olive */
  --manganese: #6B4E3D;   /* couleur manganèse : brun */
  --rust: #A13D2E;        /* couleur rouille : alertes et suppressions */
  --sage: #5F7052;        /* couleur sauge : succès / validations */
  --text: #26241F;        /* couleur du texte principal */
  --text-muted: #847F73;  /* couleur du texte secondaire, plus discret */
  --border: #CFCABC;      /* couleur des bordures */
}

/* On applique un modèle de boîte cohérent à tous les éléments */
* { box-sizing: border-box; }

/* Style de base appliqué à toute la page */
body {
  margin: 0;                          /* on retire la marge par défaut du navigateur */
  font-family: 'Inter', sans-serif;   /* police de texte principale */
  background: var(--stone);           /* couleur de fond générale */
  color: var(--text);                 /* couleur de texte par défaut */
  font-size: 14px;                    /* taille de texte de base */
}

/* Les titres et éléments marqués .fdisplay utilisent la police "display" */
h1, h2, h3, .fdisplay { font-family: 'Space Grotesk', sans-serif; }
/* Les éléments marqués .fmono utilisent une police à chasse fixe (chiffres, montants) */
.fmono { font-family: 'IBM Plex Mono', monospace; }
/* Tous les boutons héritent de la police principale et du curseur "main" */
button { cursor: pointer; font-family: 'Inter', sans-serif; }
/* Les champs de formulaire héritent aussi de la police principale */
input, select { font-family: 'Inter', sans-serif; }
/* Style visuel quand un champ reçoit le focus (accessibilité) */
input:focus, select:focus { outline: 2px solid var(--copper); outline-offset: 1px; }
/* Les liens héritent de la couleur du texte environnant */
a { color: inherit; }

/* Petit carré coloré utilisé pour représenter un minerai ou une catégorie */
.swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; /* petit carré arrondi */
  margin-right: 6px; flex-shrink: 0; vertical-align: middle;             /* espacement + alignement */
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; /* icône + texte alignés */
  border: none; border-radius: 8px; padding: 9px 16px;  /* forme générale du bouton */
  font-size: 13px; font-weight: 600;                      /* taille et graisse du texte */
}
.btn-dark { background: var(--ink); color: #F5F2E9; }        /* bouton foncé principal */
.btn-copper { background: var(--copper); color: #fff; }      /* bouton cuivre (valider/ajouter) */
.btn-gold { background: var(--gold); color: var(--ink); }    /* bouton doré (imprimer) */
.btn-outline { background: none; border: 1px solid var(--border); color: var(--ink); font-weight: 500; } /* bouton contour (annuler) */
.btn-icon { background: none; border: none; padding: 4px; color: var(--text-muted); } /* petit bouton icône (modifier) */
.btn-icon.danger { color: var(--rust); }                       /* variante rouge (supprimer) */
.btn:disabled { opacity: .5; cursor: not-allowed; }              /* état désactivé */

/* ---------- Cartes / statistiques ---------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; /* carte blanche standard */
}
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; /* carte d'indicateur chiffré */
  padding: 14px 16px; flex: 1; min-width: 150px;
}
.stat-card .stat-label {
  font-size: 11px; color: var(--text-muted); font-weight: 600;     /* étiquette au-dessus du chiffre */
  letter-spacing: .3px; text-transform: uppercase; display:flex; justify-content:space-between; align-items:flex-start;
}
.stat-card .stat-value { font-size: 23px; font-weight: 700; color: var(--ink); margin-top: 6px; } /* le chiffre lui-même */
.stat-card .stat-value .unit { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 4px; font-family:'Inter',sans-serif;} /* unité (t, g, %...) */

/* Badges colorés pour les statuts (agents, paiements) */
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; display:inline-flex; align-items:center; }
.badge-actif { background:#DDE5D6; color:var(--sage); }     /* agent actif : vert */
.badge-conge { background:#EFDFB8; color:var(--gold); }     /* agent en congé : doré */
.badge-inactif { background:#EAD6D1; color:var(--rust); }   /* agent inactif : rouge */
.badge-paye { background:#DDE5D6; color:var(--sage); }      /* paiement effectué : vert */
.badge-attente { background:#EFDFB8; color:var(--gold); }   /* paiement en attente : doré */

/* ---------- Mise en page générale ---------- */
.app-shell { display: flex; min-height: 100vh; }  /* conteneur global : barre latérale + contenu */
.sidebar {
  width: 210px; background: var(--ink); padding: 20px 12px;  /* barre latérale sombre à gauche */
  display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
}
.sidebar-brand { display:flex; align-items:center; gap:8px; padding: 4px 10px 18px 10px; } /* zone logo + nom du site */
.sidebar-brand .icon-box {
  width: 30px; height: 30px; border-radius: 7px; background: var(--ink-soft); /* pastille icône du site */
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.sidebar-brand .name { color:#F5F2E9; font-size:16px; font-weight:700; } /* nom du site connecté */
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;      /* bouton de navigation générique */
  padding: 10px 14px; border-radius: 8px; border: none; text-align: left;
  font-size: 13.5px; font-weight: 500; background: transparent; color: #D8D4C8;
}
.nav-item.active { background: var(--gold); color: var(--ink); }         /* onglet actuellement actif */
.nav-item.muted { color: #8D9099; }                                      /* boutons secondaires (imprimer, déconnexion) */
.nav-item:hover:not(.active) { background: rgba(255,255,255,0.06); }      /* survol de la souris */
.sidebar-bottom { margin-top: auto; display:flex; flex-direction:column; gap:4px; } /* pousse les boutons en bas */
.main { flex: 1; padding: 24px 28px; overflow-y: auto; } /* zone de contenu principal, à droite */

/* ---------- Tableaux de données ---------- */
.table-wrap { overflow-x: auto; }                          /* permet le défilement horizontal sur petit écran */
.data-table { width: 100%; border-collapse: collapse; min-width: 700px; } /* tableau générique */
.data-table thead th {
  text-align: left; padding: 10px 16px; background: var(--stone);        /* en-tête de colonne */
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .3px;
}
.data-table tbody td { padding: 11px 16px; border-top: 1px solid var(--border); font-size: 13px; } /* cellule de données */
.data-table tbody tr.editing { background: var(--stone); } /* ligne actuellement en cours de modification */

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: 4px; }             /* bloc "étiquette + champ" */
.field label { font-size: 12px; color: var(--text-muted); font-weight: 500; } /* étiquette du champ */
.field input, .field select {
  padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border); font-size: 13px; width: 100%; /* style des champs */
}
.inline-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } /* formulaire sur une ligne */

/* ---------- Fenêtre modale (popup) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(32,36,43,0.45);           /* fond assombri derrière la modale */
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal-box {
  background: var(--card); border-radius: 14px; padding: 22px;          /* boîte blanche de la modale */
  width: 420px; max-width: 92vw; max-height: 85vh; overflow-y: auto;
}
.modal-box .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; } /* titre + croix de fermeture */
.modal-box .modal-title { font-size: 17px; font-weight: 700; }           /* titre de la modale */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* grille 2 colonnes pour les champs */
.form-grid .span-2 { grid-column: span 2; }                              /* un champ qui prend toute la largeur */
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }           /* zone des boutons Annuler / Enregistrer */
.modal-actions .btn { flex: 1; justify-content: center; }                /* boutons de même largeur */

/* ---------- Page d'accueil / connexion ---------- */
.hero {
  position: relative; background: var(--ink); padding: 48px 32px 56px; overflow: hidden; /* bandeau d'en-tête sombre */
}
.hero-content { position: relative; max-width: 720px; }                  /* texte du bandeau, largeur limitée */
.hero-kicker { color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; } /* petite mention "Groupe minier — ABS" */
.hero-title { color: #F5F2E9; font-size: 34px; font-weight: 700; line-height: 1.15; margin: 0 0 12px; } /* grand titre d'accroche */
.hero-sub { color: #C7C2B3; font-size: 14px; max-width: 480px; line-height: 1.6; } /* sous-titre explicatif */

.home-wrap { max-width: 1000px; margin: 0 auto; padding: 36px 24px 56px; display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; } /* conteneur de la page d'accueil */
.sites-col { flex: 2; min-width: 320px; }                                /* colonne de gauche : cartes des sites */
.sites-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } /* grille responsive des cartes */
.site-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; /* carte de présentation d'un site */
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.site-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(32,36,43,0.12); } /* effet au survol */
.site-card-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; } /* icône + nom du site */
.site-card-icon { width:34px; height:34px; border-radius:8px; background:var(--stone-deep); display:flex; align-items:center; justify-content:center; } /* pastille icône */
.site-card-name { font-size:16px; font-weight:700; color:var(--ink); }   /* nom du site */
.site-card-tagline { font-size:12.5px; color:var(--text-muted); margin-bottom:12px; line-height:1.5; } /* phrase de présentation */
.mineral-pill { font-size:11px; display:flex; align-items:center; background:var(--stone); padding:3px 8px; border-radius:20px; color:var(--text); } /* étiquette d'un minerai suivi */
.site-card-cta { display:flex; align-items:center; gap:4px; margin-top:12px; font-size:12px; color:var(--copper); font-weight:600; } /* appel à l'action "Se connecter" */

.login-card { flex: 1; min-width: 280px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; } /* carte du formulaire de connexion */
.login-error {
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--rust);   /* message d'erreur de connexion */
  background:#EAD6D1; padding:8px 10px; border-radius:8px;
}

/* ---------- Classes utilitaires diverses ---------- */
.text-muted { color: var(--text-muted); }                                /* texte grisé secondaire */
.mb-4 { margin-bottom: 4px; } .mb-16 { margin-bottom: 16px; } .mb-18 { margin-bottom: 18px; } .mb-20 { margin-bottom: 20px; } .mb-22 { margin-bottom: 22px; } /* marges basses */
.flex { display:flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items:center; } .justify-between { justify-content:space-between; } /* utilitaires flexbox */
.gap-8 { gap:8px; } .gap-10 { gap:10px; } .gap-12 { gap:12px; }           /* espacements entre éléments flexbox */

/* ---------- Règles spécifiques à l'impression ---------- */
@media print {

  body {
    background:white;
  }

  body * {
    visibility:hidden;
  }

  #print-root,
  #print-root * {
    visibility:visible;
  }

  #print-root {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    padding:20px;
  }

  .no-print {
    display:none !important;
  }

}
/* Hors impression, la zone d'impression est positionnée hors de l'écran visible */
#print-root { 
  position: absolute; 
  left: 0;
  top: 0;
  background: #fff; 
  color: #1A1A1A; 
  width: 100%; 
}
/* Tableau utilisé uniquement dans le rapport imprimé */
.print-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 20px; }
.print-table th, .print-table thead tr { 
  background: #EFEDE6; 
}

/* ===============================
   RESPONSIVE MOBILE
================================ */

@media (max-width: 768px) {

  .app-shell {
    flex-direction: column;
  }

  .sidebar {
    width:100%;
    height:auto;
    padding:10px;
    flex-direction:row;
    overflow-x:auto;
    align-items:center;
  }

  .sidebar-brand {
    min-width:max-content;
    padding:5px 10px;
  }

  .nav-item {
    width:auto;
    white-space:nowrap;
    padding:8px 12px;
  }

  .sidebar-bottom {
    margin-top:0;
    flex-direction:row;
  }

  .main {
    padding:15px;
  }

  h1.fdisplay {
    font-size:18px !important;
  }

  .stat-card {
    min-width:100%;
  }

  .inline-form {
    flex-direction:column;
  }

  .inline-form .field {
    width:100% !important;
  }

  .form-grid {
    grid-template-columns:1fr;
  }

  .form-grid .span-2 {
    grid-column:auto;
  }

  .btn {
    width:100%;
    justify-content:center;
  }

  .data-table {
    min-width:650px;
  }

  canvas {
    max-width:100%;
    height:auto !important;
  }

}