/* =====================================================================
   CraftBazart ERP — THÈME CENTRAL (source unique de vérité)
   ---------------------------------------------------------------------
   Tout le design commun se règle ICI. Modifier une variable ci-dessous
   se répercute sur TOUTES les pages (couleurs, tailles, polices, rayons).
   Chargé dans partials/layouts/layoutTop.php (une seule fois, partout).
   ===================================================================== */

:root{
  /* ----- PALETTE ----- */
  --cream:#faf9f7;
  --sand:#e8e0d5;
  --gold:#9a7a3f;          /* OR — fonds / canvas (boutons, bannières, cartes KPI) */
  --gold-d:#7c6230;        /* or foncé — hover des fonds or */
  --gold-text:#5e4621;     /* MARRON FONCÉ — écriture / accents texte (liens, labels, KPI) */
  --gold-text-d:#43331a;   /* marron très foncé — hover des liens */
  --dark:#1c1917;
  --warm:#78716c;
  --bg:#f5f4f1;

  /* ----- TYPOGRAPHIE (régler TOUTES les tailles ici) ----- */
  --font-sans:'Inter',sans-serif;
  --font-serif:'Cormorant Garamond',serif;
  --fs-base:.92rem;         /* texte courant */
  --fs-meta:.8rem;          /* texte secondaire / méta (sous-titres, légendes) */
  --fs-label:.75rem;        /* labels MAJUSCULES / eyebrows */
  --fs-nav:.86rem;          /* liens de la barre de navigation */
  --fs-dropdown:.84rem;     /* liens des menus déroulants */
  --fs-card-title:1rem;     /* titres de carte (ex. "Top 5 catégories", "Actions rapides") */
  --fs-section:1.6rem;      /* titres de section */
  --fs-page-title:2.1rem;   /* gros titre de page */
  --fs-kpi:2.1rem;          /* valeur des KPI (dashboard) */

  /* ----- FORMES & ESPACEMENTS ----- */
  --radius:10px;
  --radius-sm:7px;
  --pad-x:24px;             /* marge horizontale du contenu */

  /* ----- MAPPING BOOTSTRAP (pilote les composants natifs) ----- */
  --bs-primary:#9a7a3f;
  --bs-primary-rgb:154,122,63;
  --bs-link-color:#5e4621;
  --bs-link-color-rgb:94,70,33;
  --bs-link-hover-color:#43331a;
}

/* ===== Base ===== */
body{
  background:var(--bg)!important;
  font-family:var(--font-sans)!important;
  font-size:var(--fs-base);
  color:var(--dark);
  min-height:100vh;
}

/* Conteneur de contenu pleine largeur */
.container-xxl{max-width:none!important;width:100%!important;padding-left:var(--pad-x)!important;padding-right:var(--pad-x)!important;}
@media(max-width:1199.98px){.container-xxl{padding-left:16px!important;padding-right:16px!important;}}

/* =====================================================================
   FIX ICÔNES : webfont Tabler (.ti .ti-xxx) vs système SVG iconify
   (.ti .tabler-xxx). On neutralise le masque/fond UNIQUEMENT pour la
   webfont (classe contenant "ti-"), sans toucher aux icônes "tabler-xxx".
   ===================================================================== */
.ti[class*="ti-"]{
  font-family:"tabler-icons"!important;
  background-color:transparent!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  width:auto!important;height:auto!important;
  font-style:normal;line-height:1;
}

/* =====================================================================
   TOPNAV (barre de navigation)
   ===================================================================== */
.topnav{background:var(--dark);position:sticky;top:0;z-index:200;}
.topnav-inner{display:flex;align-items:center;width:100%;padding:0 var(--pad-x);}
.nav-brand{display:flex;align-items:center;gap:10px;padding:12px 0;margin-right:20px;border-right:1px solid #292524;padding-right:20px;flex-shrink:0;text-decoration:none;}
.nav-brand img{height:22px;}
.nav-brand .brand-name{color:#e7e5e4;font-size:.82rem;font-weight:600;}
.nav-brand .brand-tag{color:var(--gold);font-size:.55rem;font-weight:700;letter-spacing:.08em;border:1px solid rgba(154,122,63,.45);border-radius:4px;padding:1px 5px;text-transform:uppercase;line-height:1.4;}
.nav-menu{display:flex;align-items:center;flex:1;}
.nav-item{position:relative;display:flex;align-items:center;}
.nav-link{display:flex;align-items:center;gap:6px;padding:14px 13px;color:#a8a29e;font-size:var(--fs-nav);font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;transition:color .15s;border-bottom:2px solid transparent;user-select:none;}
.nav-link:hover{color:#e7e5e4;}
.nav-link.active{color:#fff;border-bottom-color:var(--gold);}
.nav-link i{font-size:.85rem;}
.caret{font-size:.6rem;margin-left:1px;opacity:.5;}
.nav-dropdown{position:absolute;top:100%;left:0;background:#1c1917;border:1px solid #292524;border-radius:8px;min-width:200px;padding:6px 0;opacity:0;pointer-events:none;transform:translateY(-6px);transition:all .18s;z-index:300;box-shadow:0 8px 28px rgba(0,0,0,.45);}
.nav-item:hover .nav-dropdown{opacity:1;pointer-events:all;transform:translateY(0);}
.nav-dropdown a{display:flex;align-items:center;gap:9px;padding:8px 14px;color:#a8a29e;font-size:var(--fs-dropdown);text-decoration:none;transition:all .12s;}
.nav-dropdown a:hover{background:#292524;color:#e7e5e4;}
.nav-dropdown a.active{color:#fff;background:#292524;}
.nav-dropdown a i{font-size:.82rem;color:#57534e;flex-shrink:0;}
.dd-sep{height:1px;background:#292524;margin:4px 0;}
.dd-label{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:#44403c;padding:8px 14px 3px;font-weight:600;}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;padding-left:16px;border-left:1px solid #292524;flex-shrink:0;}
.user-info{font-size:var(--fs-meta);color:#a8a29e;}
.alert-chip{display:flex;align-items:center;gap:4px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.25);border-radius:20px;padding:3px 9px;font-size:.66rem;color:#fca5a5;font-weight:600;}
.alert-chip.ok{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.2);color:#86efac;}
.alert-chip.warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#fcd34d;}
.btn-gold{background:var(--gold);color:#fff;padding:6px 14px;border-radius:5px;font-size:.72rem;font-weight:600;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;}

/* =====================================================================
   HELPERS DE CONTENU (réutilisables sur toutes les pages)
   ===================================================================== */
.page-eyebrow{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;color:var(--gold-text);margin-bottom:4px;}
.page-title{font-family:var(--font-serif);font-size:var(--fs-page-title);font-weight:400;color:var(--dark);margin-bottom:16px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:22px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--sand);}
.section-title{font-family:var(--font-serif);font-size:var(--fs-section);font-weight:600;color:var(--dark);}
.section-subtitle{font-size:var(--fs-meta);color:var(--warm);margin-top:2px;}

/* Footer */
.erp-footer{padding:18px var(--pad-x);color:var(--warm);font-size:.72rem;border-top:1px solid var(--sand);margin-top:20px;}
.erp-footer strong{color:var(--dark);}

/* =====================================================================
   PONT DE THÈME BOOTSTRAP / TABLER
   Re-skinne les composants natifs des corps de page vers la palette.
   ===================================================================== */

/* Titres -> Cormorant Garamond */
.container-xxl h1,.container-xxl h2,.container-xxl h3,.container-xxl h4,
.container-xxl .h1,.container-xxl .h2,.container-xxl .h3,.container-xxl .h4,
.card-title,.totals-title{font-family:var(--font-serif)!important;color:var(--dark)!important;}

/* Cartes / conteneurs blancs -> crème */
.card{background:var(--cream)!important;border:1px solid var(--sand)!important;border-radius:var(--radius)!important;box-shadow:0 1px 2px rgba(28,25,23,.04)!important;}
.card-header,.card-footer{background:transparent!important;border-color:var(--sand)!important;}
.bg-white,.bg-body,.bg-light{background:var(--cream)!important;}

/* Boutons primaires -> or */
.btn-primary{--bs-btn-bg:var(--gold);--bs-btn-border-color:var(--gold);--bs-btn-hover-bg:var(--gold-d);--bs-btn-hover-border-color:var(--gold-d);--bs-btn-active-bg:var(--gold-d);--bs-btn-active-border-color:var(--gold-d);--bs-btn-disabled-bg:var(--gold);--bs-btn-disabled-border-color:var(--gold);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;}
.btn-outline-primary{--bs-btn-color:var(--gold);--bs-btn-border-color:var(--gold);--bs-btn-hover-bg:var(--gold);--bs-btn-hover-border-color:var(--gold);--bs-btn-active-bg:var(--gold);--bs-btn-active-border-color:var(--gold);}
.btn-secondary{--bs-btn-bg:#a8a29e;--bs-btn-border-color:#a8a29e;--bs-btn-hover-bg:#8a847f;--bs-btn-hover-border-color:#8a847f;--bs-btn-active-bg:#8a847f;}

/* Liens (hors topnav) */
.container-xxl a:not(.btn):not(.nav-link):not(.page-link){color:var(--gold-text);}
.container-xxl a:not(.btn):not(.nav-link):not(.page-link):hover{color:var(--gold-text-d);}

/* Formulaires */
.form-control,.form-select{border-color:var(--sand)!important;border-radius:var(--radius-sm)!important;}
.form-control:focus,.form-select:focus{border-color:var(--gold)!important;box-shadow:0 0 0 .18rem rgba(154,122,63,.2)!important;}

/* Tableaux */
.table{--bs-table-hover-bg:rgba(154,122,63,.06);}
.table>thead th,.table>thead td{color:var(--warm)!important;text-transform:uppercase;font-size:var(--fs-label);letter-spacing:.04em;border-color:var(--sand)!important;background:transparent!important;}
.table td,.table th{border-color:var(--sand)!important;}

/* Badges / onglets / pagination */
.badge.bg-primary,.badge.text-bg-primary,.bg-label-primary{background:rgba(154,122,63,.16)!important;color:var(--gold-text)!important;}
.nav-tabs .nav-link.active{color:var(--gold-text)!important;border-bottom-color:var(--gold)!important;}
.nav-pills .nav-link.active{background:var(--gold)!important;color:#fff!important;}
.page-link{color:var(--gold);}
.page-item.active .page-link{background:var(--gold);border-color:var(--gold);}

/* Modales */
.modal-content{background:var(--cream)!important;border:1px solid var(--sand)!important;}
.modal-header,.modal-footer{border-color:var(--sand)!important;}

/* Accents divers */
.form-check-input:checked{background-color:var(--gold)!important;border-color:var(--gold)!important;}
.text-primary{color:var(--gold-text)!important;}