/* ═══════════════════════════════════════════════════════════════
   COPENVI — Système de Gestion des Déchets COPAG
   Thème : Light Professional · Environnement
   Palette : Bleu ciel #0ea5e9 · Teal #0891b2 · Vert doux #10b981
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }

:root {
  /* Couleurs principales */
  --primary:     #0ea5e9;
  --primary-d:   #0284c7;
  --primary-l:   #e0f2fe;
  --teal:        #0891b2;
  --teal-l:      #cffafe;
  --green:       #10b981;
  --green-l:     #d1fae5;

  /* Fond & surface */
  --bg:          #f0f9ff;       /* bleu très pâle */
  --bg2:         #e8f4fd;
  --card:        #ffffff;
  --card-hover:  #f8fbff;
  --sidebar-bg:  #ffffff;

  /* Bordures & ombres */
  --border:      #bae6fd;
  --border-m:    #7dd3fc;
  --shadow-sm:   0 1px 3px rgba(14,165,233,.10), 0 1px 2px rgba(14,165,233,.06);
  --shadow:      0 4px 16px rgba(14,165,233,.12), 0 2px 6px rgba(14,165,233,.08);
  --shadow-lg:   0 10px 32px rgba(14,165,233,.15);

  /* Texte */
  --text:        #0f172a;
  --text-m:      #334155;
  --muted:       #64748b;

  /* Statuts */
  --danger:      #ef4444;
  --warn:        #f59e0b;
  --success:     #10b981;
  --info:        #0ea5e9;
  --purple:      #8b5cf6;

  /* Sidebar */
  --sidebar-w:   265px;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
#sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--sidebar-bg);
  border-right: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left:0; top:0; bottom:0;
  z-index: 200;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  box-shadow: 4px 0 20px rgba(14,165,233,.08);
}

/* Brand */
.sidebar-brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}
.brand-logo {
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: white;
  box-shadow: 0 2px 8px rgba(14,165,233,.2);
  flex-shrink: 0;
}
.brand-logo img {
  width: 100%; height: 100%; object-fit: contain;
}
.brand-name {
  font-size: 17px; font-weight: 800;
  color: var(--primary-d);
  letter-spacing: .5px;
}
.brand-sub {
  font-size: 10px; color: var(--muted);
  font-weight: 500; margin-top: 1px;
}

/* Nav sections */
.nav-section-title {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  padding: 14px 18px 5px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  margin: 1px 10px;
  border-radius: 10px;
  color: var(--text-m);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: all .2s ease;
  position: relative;
}
.sidebar-link i, .sidebar-link .fas, .sidebar-link .far {
  width: 20px; text-align: center;
  font-size: 14px;
  color: var(--muted);
  transition: color .2s;
}
.sidebar-link:hover {
  background: var(--primary-l);
  color: var(--primary-d);
}
.sidebar-link:hover i,
.sidebar-link:hover .fas {
  color: var(--primary);
}
.sidebar-link.active {
  background: linear-gradient(90deg, var(--primary-l), #dbeafe);
  color: var(--primary-d);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}
.sidebar-link.active i,
.sidebar-link.active .fas {
  color: var(--primary);
}
.sidebar-link.danger { color: #ef4444; }
.sidebar-link.danger:hover { background: #fee2e2; }

/* Sidebar footer */
.sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, #f0f9ff);
}
.user-info-bar {
  padding: 10px 12px;
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}
.user-avatar {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--primary), var(--teal));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: white;
  margin-bottom: 6px;
}
.user-name-text { font-size: 12px; font-weight: 600; color: var(--text); }
.user-role-text { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════
   MAIN
   ═══════════════════════════════════════════════════════════════ */
#main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* TOPBAR */
.topbar {
  height: 62px;
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(14,165,233,.06);
}
.topbar-title {
  font-size: 15px; font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.topbar-title i, .topbar-title .fas {
  color: var(--primary);
  font-size: 16px;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.date-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--primary-l);
  border: 1px solid var(--border-m);
  border-radius: 20px;
  font-size: 12px; color: var(--primary-d); font-weight: 500;
}
.date-badge i { font-size: 12px; }

/* CONTENT */
.content-area {
  padding: 28px;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════════ */
.stat-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
}
.stat-card.stat-green::before  { background: linear-gradient(90deg,#10b981,#059669); }
.stat-card.stat-blue::before   { background: linear-gradient(90deg,#0ea5e9,#0284c7); }
.stat-card.stat-warning::before{ background: linear-gradient(90deg,#f59e0b,#d97706); }
.stat-card.stat-danger::before { background: linear-gradient(90deg,#ef4444,#dc2626); }
.stat-card.stat-info::before   { background: linear-gradient(90deg,#0ea5e9,#7dd3fc); }
.stat-card.stat-secondary::before { background: linear-gradient(90deg,#64748b,#cbd5e1); }
.stat-card.stat-gold::before   { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.stat-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}
.stat-icon.green   { background: var(--green-l);  color: var(--green); }
.stat-icon.blue    { background: var(--primary-l); color: var(--primary); }
.stat-icon.warning { background: #fef3c7; color: #d97706; }
.stat-icon.danger  { background: #fee2e2; color: #dc2626; }
.stat-icon.info    { background: #e0f2fe; color: var(--teal); }
.stat-icon.secondary { background: #f1f5f9; color: #475569; }
.stat-label { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.stat-value { font-size: 32px; font-weight: 800; color: var(--text); line-height: 1.1; margin: 4px 0; }
.stat-sub   { font-size: 11px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   CHARTS
   ═══════════════════════════════════════════════════════════════ */
.chart-card {
  background: white;
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  height: 100%;
}
.chart-card h3 {
  font-size: 14px; font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.chart-card h3 i { color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */
.table-wrap {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.table-wrap table {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px;
}
.table-wrap thead tr {
  background: linear-gradient(90deg, #f0f9ff, #e0f2fe);
  border-bottom: 2px solid var(--border-m);
}
.table-wrap th {
  padding: 13px 16px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--teal);
}
.table-wrap td {
  padding: 12px 16px;
  color: var(--text-m);
  border-bottom: 1px solid #f1f5f9;
}
.table-wrap tbody tr:hover { background: #f8fbff; }
.table-wrap tbody tr:last-child td { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
/* Catégories déchets */
.badge-dd  { background:#fee2e2; color:#dc2626; border:1px solid #fca5a5; }
.badge-dib { background:#dbeafe; color:#1d4ed8; border:1px solid #93c5fd; }
.badge-di  { background:#f1f5f9; color:#475569; border:1px solid #cbd5e1; }
.badge-dm  { background:#fef3c7; color:#d97706; border:1px solid #fcd34d; }
/* Statuts */
.statut-attente  { background:#fef3c7; color:#d97706; border:1px solid #fcd34d; }
.statut-valide   { background:#d1fae5; color:#059669; border:1px solid #6ee7b7; }
.statut-rejete   { background:#fee2e2; color:#dc2626; border:1px solid #fca5a5; }
.statut-brouillon{ background:#e0f2fe; color:#0284c7; border:1px solid #7dd3fc; }

/* ═══════════════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-copag {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  color: white !important;
  border: none;
  border-radius: 10px;
  padding: 9px 20px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 2px 8px rgba(14,165,233,.3);
}
.btn-copag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(14,165,233,.4);
  background: linear-gradient(135deg, var(--primary-d), #0369a1);
}
.btn-copag.btn-sm { padding: 6px 14px; font-size: 12px; }

/* Boutons outline */
.btn-outline-primary {
  border: 1.5px solid var(--primary);
  color: var(--primary) !important;
  background: transparent;
  border-radius: 10px;
}
.btn-outline-primary:hover { background: var(--primary-l); }

/* ═══════════════════════════════════════════════════════════════
   FORMULAIRES
   ═══════════════════════════════════════════════════════════════ */
.form-control, .form-select {
  background: white;
  border: 1.5px solid var(--border-m);
  border-radius: 10px;
  color: var(--text);
  font-size: 13.5px;
  padding: 9px 14px;
  transition: all .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,165,233,.12);
  outline: none;
  background: white;
}
.form-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-m);
  margin-bottom: 5px;
}
.form-section-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--primary-d);
  padding: 8px 12px;
  background: linear-gradient(90deg, var(--primary-l), transparent);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS GÉNÉRIQUES
   ═══════════════════════════════════════════════════════════════ */
.card-box {
  background: white;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}
.card-box-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.card-box-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.card-box-title i { color: var(--primary); font-size: 16px; }

/* Page header */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  padding: 16px 22px;
  background: white;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.page-header-title { font-size: 18px; font-weight: 700; color: var(--text); }
.page-header-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */
.alert {
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 13.5px;
  border: 1.5px solid;
  display: flex; align-items: center; gap: 10px;
}
.alert-success { background:#d1fae5; border-color:#6ee7b7; color:#065f46; }
.alert-danger  { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
.alert-warning { background:#fef3c7; border-color:#fcd34d; color:#92400e; }
.alert-info    { background:#e0f2fe; border-color:#7dd3fc; color:#075985; }

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */
.login-page {
  min-height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 40%, #ecfdf5 100%);
  position: relative;
  overflow: hidden;
}
.login-page::before {
  content: '';
  position: absolute; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(14,165,233,.12) 0%, transparent 70%);
  top: -200px; right: -200px; border-radius: 50%;
}
.login-page::after {
  content: '';
  position: absolute; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(16,185,129,.08) 0%, transparent 70%);
  bottom: -100px; left: -100px; border-radius: 50%;
}
.login-card {
  background: white;
  border-radius: 24px;
  padding: 44px 40px;
  width: 420px; max-width: 95vw;
  box-shadow: 0 20px 60px rgba(14,165,233,.15), 0 4px 16px rgba(0,0,0,.08);
  border: 1px solid var(--border);
  position: relative; z-index: 1;
}
.login-logo {
  text-align: center; margin-bottom: 20px;
}
.login-logo img {
  width: 80px; height: 80px;
  object-fit: contain;
  border-radius: 16px;
  padding: 6px;
  background: var(--primary-l);
  box-shadow: 0 4px 16px rgba(14,165,233,.2);
}
.login-title {
  text-align: center;
  font-size: 26px; font-weight: 800;
  color: var(--primary-d);
  letter-spacing: .5px;
}
.login-sub {
  text-align: center;
  font-size: 12px; color: var(--muted);
  margin-top: 4px; margin-bottom: 24px;
}
.login-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--border-m), transparent);
  margin: 20px 0;
}
.login-card .form-control {
  background: #f8fafc;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center; padding: 48px 20px;
  color: var(--muted);
}
.empty-state i { font-size: 48px; opacity: .3; margin-bottom: 14px; display: block; }
.empty-state p { font-size: 15px; font-weight: 500; }
.empty-state small { font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════
   UTILITAIRES
   ═══════════════════════════════════════════════════════════════ */
.text-primary { color: var(--primary) !important; }
.text-muted   { color: var(--muted) !important; }
.bg-primary-l { background: var(--primary-l) !important; }

/* ═══════════════════════════════════════════════════════════════
   IMPRESSION
   ═══════════════════════════════════════════════════════════════ */
@media print {
  #sidebar, .topbar, .btn, .alert { display: none !important; }
  #main { margin-left: 0 !important; }
  .table-wrap { box-shadow: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  #sidebar {
    transform: translateX(-100%);
    box-shadow: 4px 0 30px rgba(0,0,0,.15);
  }
  #sidebar.show { transform: translateX(0); }
  #main { margin-left: 0; }
  .content-area { padding: 18px; }
}
@media (max-width: 576px) {
  .login-card { padding: 30px 20px; }
  .stat-value { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPOSANTS PARTAGÉS — tables modernes, filtres, actions
   (Registre · BSD · Élimination · KPI)
   ═══════════════════════════════════════════════════════════════ */

/* ── Info banners ──────────────────────────────────────── */
.info-banner {
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; border-radius:12px;
  border:1px solid; font-size:13.5px;
}
.info-banner-orange { background:#fef3c7; border-color:#fcd34d; color:#92400e; }
.info-banner-blue   { background:#e0f2fe; border-color:#7dd3fc; color:#075985; }
.info-banner-green  { background:#d1fae5; border-color:#6ee7b7; color:#065f46; }
.info-banner-red    { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }

/* ── Filter bar ─────────────────────────────────────────── */
.filter-bar {
  background:white; border-radius:14px;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  padding:16px 20px;
}
.filter-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); display:block; margin-bottom:4px;
}

/* ── Data table card ────────────────────────────────────── */
.data-table-card {
  background:white; border-radius:16px;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.data-table-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; color:white; font-size:13.5px;
}
.data-table-header-left  { display:flex; align-items:center; }
.data-table-header-right { display:flex; align-items:center; gap:8px; }
.search-input {
  width:200px !important;
  background:rgba(255,255,255,.15) !important;
  color:white !important;
  border-color:rgba(255,255,255,.3) !important;
  border-radius:8px !important;
}
.search-input::placeholder { color:rgba(255,255,255,.6) !important; }

/* ── Modern table ───────────────────────────────────────── */
.modern-table { width:100%; border-collapse:collapse; font-size:13px; }
.modern-table thead tr {
  background:linear-gradient(90deg,#f0f9ff,#e0f2fe);
  border-bottom:2px solid var(--border-m);
}
.modern-table th {
  padding:11px 14px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; color:#0369a1;
}
.modern-table td {
  padding:10px 14px; border-bottom:1px solid #f1f5f9;
  color:var(--text-m); vertical-align:middle;
}
.modern-table tbody tr:hover { background:#f8fbff; }
.modern-table tbody tr:last-child td { border-bottom:none; }
.cell-date { font-weight:600; color:var(--text); font-size:12.5px; white-space:nowrap; }

/* ── Shared chips ───────────────────────────────────────── */
.code-chip {
  font-size:11.5px; font-weight:700; color:#0369a1;
  background:#e0f2fe; padding:2px 8px; border-radius:6px;
}
.unit-chip {
  font-size:12px; color:var(--muted); background:#f8fafc;
  border:1px solid #e2e8f0; padding:2px 8px; border-radius:6px;
}
.qty-value { font-weight:700; font-size:13.5px; color:var(--text); }
.qty-unit  { font-size:11px; color:var(--muted); margin-left:3px; }

.cat-badge {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.3px;
}
.cat-dd  { background:#fee2e2; color:#dc2626; border:1px solid #fca5a5; }
.cat-dnd { background:#dbeafe; color:#1d4ed8; border:1px solid #93c5fd; }
.cat-dib { background:#d1fae5; color:#059669; border:1px solid #6ee7b7; }

.user-chip { display:inline-flex; align-items:center; gap:6px; }
.user-avatar-mini {
  width:24px; height:24px; border-radius:50%;
  background:var(--primary-l); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--primary-d);
}
.user-name-mini { font-size:12px; color:var(--text-m); }

/* ── Status pills ───────────────────────────────────────── */
.status-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:20px;
  font-size:11px; font-weight:600; white-space:nowrap;
}
.status-green  { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.status-orange { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.status-red    { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.status-blue   { background:#e0f2fe; color:#075985; border:1px solid #7dd3fc; }

/* ── BSD chips ──────────────────────────────────────────── */
.bsd-chip {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 9px; border-radius:8px;
  font-size:11.5px; font-weight:600;
}
.bsd-green  { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.bsd-orange { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.bsd-grey   { background:#f1f5f9; color:#64748b; border:1px solid #cbd5e1; }

/* ── Action buttons ─────────────────────────────────────── */
.action-btn {
  width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; border:none; cursor:pointer;
  transition:all .2s ease; text-decoration:none;
  white-space:nowrap;
}
.action-btn-green  { background:#d1fae5; color:#065f46; }
.action-btn-red    { background:#fee2e2; color:#991b1b; }
.action-btn-orange { background:#fef3c7; color:#92400e; }
.action-btn-blue   { background:#e0f2fe; color:#075985; }
.action-btn-grey   { background:#f1f5f9; color:#64748b; }
.action-btn-green:hover  { background:#059669; color:white; transform:scale(1.05); }
.action-btn-red:hover    { background:#dc2626; color:white; transform:scale(1.05); }
.action-btn-orange:hover { background:#d97706; color:white; transform:scale(1.05); }
.action-btn-blue:hover   { background:#0284c7; color:white; transform:scale(1.05); }
.action-btn-grey:hover   { background:#64748b; color:white; transform:scale(1.05); }



/* ── DTC Stats strip ──────────────────────────────────── */
.dtc-stats { display:flex; gap:1px; background:#e2e8f0; border-bottom:1px solid #e2e8f0; }
.dtc-stat  { flex:1; background:#fff; padding:.85rem 1rem; text-align:center; }
.dtc-stat-val { font-size:1.4rem; font-weight:700; line-height:1; }
.dtc-stat-lbl { font-size:.73rem; color:#64748b; margin-top:.25rem; }
.dtc-stat-green  .dtc-stat-val { color:#16a34a; }
.dtc-stat-orange .dtc-stat-val { color:#d97706; }
.dtc-stat-red    .dtc-stat-val { color:#dc2626; }
.dtc-stat-blue   .dtc-stat-val { color:#2563eb; }
.dtc-stat-purple .dtc-stat-val { color:#7e22ce; }

/* ── Table row coloring ───────────────────────────────── */
.modern-table tbody tr.row-green  { border-left:3px solid #16a34a; }
.modern-table tbody tr.row-orange { border-left:3px solid #d97706; }
.modern-table tbody tr.row-red    { border-left:3px solid #dc2626; }
.modern-table tbody tr.row-blue   { border-left:3px solid #2563eb; }
.modern-table tbody tr.row-grey   { border-left:3px solid #94a3b8; }

/* ── DTC footer legend ────────────────────────────────── */
.dtc-footer { padding:.6rem 1.25rem; background:#f8fafc; border-top:1px solid #e2e8f0; }
.legend-items { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:.77rem; color:#64748b; }
.legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ── Btn action primary ───────────────────────────────── */
.btn-action-primary {
  display:inline-flex; align-items:center; gap:.3rem;
  background:var(--primary,#0ea5e9); color:#fff; border:none;
  padding:.42rem .95rem; border-radius:8px; font-size:.83rem;
  font-weight:600; cursor:pointer; text-decoration:none;
  transition:all .2s ease;
}
.btn-action-primary:hover { background:#0284c7; color:#fff; transform:translateY(-1px); }

/* ── Contrôle / Rapport page specific ────────────────── */
.kpi-card {
  background:#fff; border-radius:12px; padding:1.2rem 1.5rem;
  border:1px solid #e2e8f0; box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.kpi-card .kc-label { font-size:.8rem; color:#64748b; font-weight:500; }
.kpi-card .kc-val   { font-size:1.8rem; font-weight:700; line-height:1.1; }
.kpi-card .kc-sub   { font-size:.78rem; color:#94a3b8; margin-top:.15rem; }
.kpi-card.kc-green  { border-left:4px solid #16a34a; }
.kpi-card.kc-orange { border-left:4px solid #d97706; }
.kpi-card.kc-red    { border-left:4px solid #dc2626; }
.kpi-card.kc-blue   { border-left:4px solid #2563eb; }
.kpi-card.kc-grey   { border-left:4px solid #94a3b8; }

.score-circle {
  width:120px; height:120px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:800; margin:auto;
  border:6px solid currentColor;
}
.score-vert    { color:#16a34a; background:#f0fdf4; }
.score-orange  { color:#d97706; background:#fffbeb; }
.score-rouge   { color:#dc2626; background:#fef2f2; }

.alert-item {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.75rem 1rem; border-radius:8px; margin-bottom:.5rem;
  border:1px solid transparent;
}
.alert-item.ai-red    { background:#fef2f2; border-color:#fca5a5; }
.alert-item.ai-orange { background:#fffbeb; border-color:#fcd34d; }
.alert-item.ai-blue   { background:#eff6ff; border-color:#93c5fd; }
.alert-item .ai-icon  { font-size:1.1rem; flex-shrink:0; margin-top:.1rem; }
.alert-item .ai-body  { flex:1; font-size:.85rem; }
.alert-item .ai-title { font-weight:600; }
.alert-item .ai-desc  { color:#64748b; font-size:.8rem; }

.checklist-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .85rem; border-radius:8px; margin-bottom:.4rem;
  border:1px solid #e2e8f0; background:#fff;
}
.ci-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
.ci-ok     { background:#d1fae5; color:#065f46; }
.ci-warn   { background:#fef3c7; color:#92400e; }
.ci-danger { background:#fee2e2; color:#991b1b; }
.ci-label  { flex:1; font-size:.84rem; font-weight:500; }
.ci-count  { font-size:.78rem; font-weight:700; padding:.2rem .5rem; border-radius:5px; }
.ci-count-ok     { background:#d1fae5; color:#065f46; }
.ci-count-warn   { background:#fef3c7; color:#92400e; }
.ci-count-danger { background:#fee2e2; color:#991b1b; }

.variation-up   { color:#16a34a; font-weight:700; }
.variation-down { color:#dc2626; font-weight:700; }


/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Couleurs principales */
  --primary:     #38bdf8;
  --primary-d:   #7dd3fc;
  --primary-l:   #0c2a3d;
  --teal:        #22d3ee;
  --teal-l:      #0c2b30;
  --green:       #34d399;
  --green-l:     #0a2e20;

  /* Fond & surface */
  --bg:          #0f172a;
  --bg2:         #1e293b;
  --card:        #1e293b;
  --card-hover:  #263548;
  --sidebar-bg:  #0f172a;

  /* Bordures & ombres */
  --border:      #334155;
  --border-m:    #475569;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.3);
  --shadow:      0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:   0 10px 32px rgba(0,0,0,.5);

  /* Texte */
  --text:        #f1f5f9;
  --text-m:      #cbd5e1;
  --muted:       #94a3b8;

  /* Statuts */
  --danger:      #f87171;
  --warn:        #fbbf24;
  --success:     #34d399;
  --info:        #38bdf8;
  --purple:      #a78bfa;
}

/* ── Overrides Dark Mode ──────────────────────────────────── */
[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

[data-theme="dark"] #sidebar {
  background: var(--sidebar-bg);
  border-right-color: var(--border);
  box-shadow: 4px 0 20px rgba(0,0,0,.3);
}

[data-theme="dark"] .sidebar-brand {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .brand-logo {
  background: #1e293b;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

[data-theme="dark"] .sidebar-link {
  color: var(--muted);
}
[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active {
  color: var(--primary);
  background: var(--primary-l);
}

[data-theme="dark"] .nav-section-title {
  color: var(--muted);
}

[data-theme="dark"] .topbar {
  background: var(--card);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .content-area {
  background: var(--bg);
}

[data-theme="dark"] .stat-card {
  background: var(--card);
  border-color: var(--border);
}

[data-theme="dark"] .data-table-card {
  background: var(--card);
  border-color: var(--border);
}

[data-theme="dark"] .table {
  color: var(--text);
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: var(--border);
}
[data-theme="dark"] .table-hover tbody tr:hover {
  background: var(--card-hover);
}

[data-theme="dark"] .alert {
  border-color: var(--border);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .badge {
  border: none;
}

[data-theme="dark"] .progress {
  background: var(--bg2);
}

[data-theme="dark"] .btn-close {
  filter: invert(1);
}

[data-theme="dark"] .sidebar-footer > div {
  background: linear-gradient(135deg, #1e293b, #0f1d2e) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .user-info-bar {
  border-color: var(--border);
}

/* ── Toggle Button ────────────────────────────────────────── */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all .25s ease;
}
.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-l);
  transform: scale(1.05);
}

/* ── Smooth transitions ───────────────────────────────────── */
body, #sidebar, .topbar, .content-area, .stat-card, 
.data-table-card, input, select, textarea, .sidebar-link,
.sidebar-brand, .brand-logo, .table, .alert, .badge {
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}