/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  Unify — Charte graphique                                        ║
 * ║  Chargé APRÈS style.css pour overrider les couleurs du template  ║
 * ╚══════════════════════════════════════════════════════════════════╝
 *
 * Variables centralisées : modifier ici suffit pour toute l'app.
 * Palette "Orbite" :
 *   Indigo   #4F46E5  — marque, actions primaires
 *   Emerald  #10B981  — accent, croissance, validé, encaissé
 *   Amber    #F59E0B  — avertissement
 *   Red      #EF4444  — critique
 *   Ink      #1E293B  — texte principal
 *   Slate    #F8FAFC  — fond global
 *   Border   #E2E8F0  — séparateurs
 */

/* ══ 1. Variables ════════════════════════════════════════════════════ */
:root {
  /* Marque */
  --u-primary:        #4F46E5;
  --u-primary-dark:   #3730A3;
  --u-primary-light:  #C7D2FE;
  --u-primary-soft:   #EEF2FF;
  --u-primary-rgb:    79, 70, 229;

  /* Accents */
  --u-emerald:        #10B981;
  --u-emerald-dark:   #059669;
  --u-emerald-soft:   #D1FAE5;
  --u-indigo-mid:     #818CF8;

  /* Statuts */
  --u-warning:        #F59E0B;
  --u-warning-soft:   #FEF3C7;
  --u-danger:         #EF4444;
  --u-danger-soft:    #FEE2E2;

  /* Typographie & fond */
  --u-ink:            #1E293B;
  --u-muted:          #64748B;
  --u-subtle:         #94A3B8;
  --u-bg:             #F8FAFC;
  --u-border:         #E2E8F0;
  --u-white:          #FFFFFF;

  /* Re-câble les variables Bootstrap utilisées par le template */
  --bs-primary:       #4F46E5;
  --bs-primary-rgb:   79, 70, 229;
  --bs-success:       #10B981;
  --bs-warning:       #F59E0B;
  --bs-danger:        #EF4444;
  --bs-body-color:    #1E293B;
  --bs-body-bg:       #F8FAFC;
  --bs-border-color:  #E2E8F0;

  /* Variable utilisée par style.css pour les tableaux, badges, etc. */
  --primary-rgb:      79, 70, 229;
}

/* ══ 2. Typographie — Inter ══════════════════════════════════════════ */
body,
.form-control,
.form-select,
.btn,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.fw-semibold, .fw-bold {
  color: var(--u-ink);
}

/* ══ 3. Boutons principaux ═══════════════════════════════════════════ */
.btn-submit {
  background: var(--u-primary) !important;
  border-color: var(--u-primary) !important;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .18s, box-shadow .18s;
}
.btn-submit:hover,
.btn-submit:focus {
  background: var(--u-primary-dark) !important;
  border-color: var(--u-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(var(--u-primary-rgb), .35) !important;
  color: #fff !important;
}

.btn-cancel {
  background: #E2E8F0 !important;
  border-color: #E2E8F0 !important;
  color: var(--u-ink) !important;
  border-radius: 6px;
}
.btn-cancel:hover {
  background: #CBD5E1 !important;
  border-color: #CBD5E1 !important;
  color: var(--u-ink) !important;
}

/* ══ 4. Sidebar ══════════════════════════════════════════════════════ */

/* Lien actif — couleur texte */
.sidebar .sidebar-menu > ul > li.submenu ul li a.active,
.sidebars .sidebar-menu > ul > li.submenu ul li a.active,
.sidebar .sidebar-menu > ul > li.submenu ul li a:hover,
.sidebars .sidebar-menu > ul > li.submenu ul li a:hover {
  color: var(--u-primary) !important;
}

/* Point bullet actif */
.sidebar .sidebar-menu > ul > li.submenu ul li a.active:after,
.sidebars .sidebar-menu > ul > li.submenu ul li a.active:after,
.sidebar .sidebar-menu > ul > li.submenu ul li a:hover:after,
.sidebars .sidebar-menu > ul > li.submenu ul li a:hover:after {
  background: var(--u-emerald) !important;
  border-color: var(--u-emerald-soft) !important;
}

/* Icône feather de la section active */
.sidebar .sidebar-menu > ul > li.active svg,
.sidebars .sidebar-menu > ul > li.active svg {
  color: var(--u-emerald) !important;
}

/* Header de section (ex: "Tour de contrôle") */
.sidebar-menu .submenu-hdr {
  color: var(--u-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ══ 5. Header ═══════════════════════════════════════════════════════ */
.header {
  background: var(--u-white);
  border-bottom: 1px solid var(--u-border);
}

/* ══ 6. Liens & texte primaire ═══════════════════════════════════════ */
a {
  color: var(--u-primary);
}
a:hover {
  color: var(--u-primary-dark);
}

.text-primary { color: var(--u-primary) !important; }
.bg-primary   { background-color: var(--u-primary) !important; }
.border-primary { border-color: var(--u-primary) !important; }

/* ══ 7. Badges & statuts ═════════════════════════════════════════════ */
.badge.bg-success,
.badge-success { background-color: var(--u-emerald) !important; }

.badge.bg-warning,
.badge-warning { background-color: var(--u-warning) !important; color: #fff !important; }

.badge.bg-danger,
.badge-danger  { background-color: var(--u-danger)  !important; }

/* ══ 8. Fond global & cartes ═════════════════════════════════════════ */
body {
  background-color: var(--u-bg);
  color: var(--u-ink);
}

.card {
  border: 1px solid var(--u-border);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(30, 41, 59, .06);
}
.card-header {
  background: var(--u-white);
  border-bottom: 1px solid var(--u-border);
  font-weight: 600;
  color: var(--u-ink);
}

/* ══ 9. Formulaires ══════════════════════════════════════════════════ */
.form-control:focus,
.form-select:focus {
  border-color: var(--u-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--u-primary-rgb), .15) !important;
}

/* ══ 10. Tableaux ════════════════════════════════════════════════════ */
.table thead th {
  background: var(--u-bg);
  color: var(--u-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--u-border);
}

/* ══ 11. Override couleurs dures du template (#002C80, #ff8510) ══════ */

/* Backgrounds bleu marine du template */
[style*="background:#002C80"],
[style*="background: #002C80"] {
  background: var(--u-primary) !important;
}

/* Gradient de la page login */
.login-wrapper.bg-img {
  background: linear-gradient(135deg, var(--u-primary-soft) 0%, #F0F4FF 100%) !important;
}

/* Bouton connexion */
.btn-login {
  background: var(--u-primary) !important;
  border-color: var(--u-primary) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  transition: background .18s, box-shadow .18s;
}
.btn-login:hover,
.btn-login:focus {
  background: var(--u-primary-dark) !important;
  box-shadow: 0 4px 14px rgba(var(--u-primary-rgb), .40) !important;
}

/* Page de connexion — conteneur */
.login-content {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(30, 41, 59, .10);
}

/* ══ 12. Page titre & breadcrumb ═════════════════════════════════════ */
.page-header .page-title h4 {
  color: var(--u-ink);
  font-weight: 600;
}

/* ══ 13. Alertes ═════════════════════════════════════════════════════ */
.alert-success {
  background: var(--u-emerald-soft);
  border-color: var(--u-emerald);
  color: #065F46;
}
.alert-warning {
  background: var(--u-warning-soft);
  border-color: var(--u-warning);
  color: #92400E;
}
.alert-danger {
  background: var(--u-danger-soft);
  border-color: var(--u-danger);
  color: #991B1B;
}

/* ══ 14. Photos articles ══════════════════════════════════════════════ */

/* Miniature dans la liste articles et le POS */
.article-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder SVG — centré dans son conteneur */
img[src*="placeholders/article.svg"] {
  object-fit: contain;
  padding: 6px;
  background: var(--u-bg);
}

/* ══ 16. Favicon / logo zone header ══════════════════════════════════ */
.header-left .logo img {
  height: 38px;
  width: auto;
}
.header-left .logo-small img {
  height: 32px;
  width: auto;
}