/* ==========================================================================
   AgriERP — assets/css/common.css
   Feuille de style commune a toutes les pages (Sprint 0, tache 0.4 / 0.4bis).
   Remplace le <style> duplique dans chacun des 91 fichiers HTML.
   A charger dans le <head> :  <link rel="stylesheet" href="assets/css/common.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   0.4bis — Police d'icones Material Symbols Outlined hebergee EN LOCAL
   (Offline-First). Fichier binaire : assets/fonts/MaterialSymbolsOutlined.woff2
   Aucune requete vers fonts.googleapis.com / fonts.gstatic.com au chargement.
   Police variable complete (axes FILL 0..1, wght 100..700, GRAD, opsz),
   compatible avec les regles font-variation-settings deja utilisees dans
   le prototype (ex: icone remplie sur l'onglet actif de la bottom-nav).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2");
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --------------------------------------------------------------------------
   Base / Typographie
   -------------------------------------------------------------------------- */
body {
  font-family: 'Inter', sans-serif;
}
.text-xs {
  font-size: 0.85rem !important;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.sidebar-gradient {
  background: linear-gradient(180deg, #052e16 0%, #00210d 100%);
}
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #284f33;
  border-radius: 10px;
}
.submenu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease;
}
.submenu.open {
  max-height: 600px;
  opacity: 1;
}
.chev {
  transition: transform .2s ease;
}
.chev.rot {
  transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Formulaires / Validation
   -------------------------------------------------------------------------- */
.is-invalid {
  border-color: #BA1A1A !important;
  background-color: #FFF5F5;
}
.invalid-feedback {
  color: #BA1A1A;
  font-size: 11px;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */
.toast-in {
  animation: toastIn .3s ease-out;
  transition: opacity .3s, transform .3s;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   Mode Sombre
   -------------------------------------------------------------------------- */
body.dark-mode {
  background: #121212;
  color: #e8e8e8;
}
body.dark-mode .bg-white {
  background-color: #1e1e1e !important;
  color: #e8e8e8;
}
body.dark-mode .bg-surface-bg {
  background-color: #121212 !important;
}
body.dark-mode .text-on-surface {
  color: #e8e8e8 !important;
}
body.dark-mode .border-outline-variant {
  border-color: #3a3a3a !important;
}

/* --------------------------------------------------------------------------
   Accordeon KPI (mobile ET desktop — toggleKpiPanel, voir common.js)
   Applique sur TOUTES les pages contenant des cartes KPI (directive stricte).
   -------------------------------------------------------------------------- */
.kpi-mobile-collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease, opacity .2s ease;
}
.kpi-mobile-collapsed.open {
  max-height: 900px;
  opacity: 1;
}
@media (min-width: 768px) {
  .kpi-mobile-collapsed {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
}
.kpi-chev {
  transition: transform .2s ease;
}
.kpi-chev.rot {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   DataTable responsive (table.rtable) — mobile : tableau -> cartes empilees
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  table.rtable thead {
    display: none;
  }
  table.rtable,
  table.rtable tbody,
  table.rtable tr,
  table.rtable td {
    display: block;
    width: 100%;
  }
  table.rtable tr.rrow {
    border: 1px solid #bec9c2;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 6px 0;
  }
  table.rtable td {
    text-align: right;
    padding: 6px 12px !important;
    position: relative;
    padding-left: 46% !important;
    white-space: normal !important;
  }
  table.rtable td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    color: #6f7973;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   Impression (fiches journalieres, exports print natif du navigateur)
   -------------------------------------------------------------------------- */
@media print {
  #sidebar, #sidebar-overlay, header, nav.fixed.bottom-0, .no-print {
    display: none !important;
  }
  body, .flex-1 {
    overflow: visible !important;
    height: auto !important;
  }
  #print-fiche-header {
    display: block !important;
  }
  table {
    font-size: 8px !important;
  }
  th, td {
    padding: 3px !important;
  }
}

/* ==========================================================================
   10. ANTI-FLASH SIDEBAR MOBILE (defense en profondeur)
   Renforce en CSS pur (charge avant que Tailwind CDN ne compile ses classes
   en JS, ce qui peut accuser un leger retard) l'etat initial correct du
   sidebar mobile et de son overlay, pour eliminer tout flash visuel pendant
   la navigation entre pages (chaque page est un rechargement complet).
   ========================================================================== */
#sidebar-overlay.hidden { display: none !important; }
@media (max-width: 1023px) {
  #sidebar.-translate-x-full { transform: translateX(-100%) !important; }
}