:root{
  --primary: #2563eb;
  --primary-dark: #1e40af;
  --sidebar-bg: #0f172a;
  --sidebar-hover: #1e293b;
  --sidebar-active: #2563eb;
  --sidebar-text: #cbd5e1;
  --sidebar-text-active: #ffffff;
  --topbar-bg: #ffffff;
  --body-bg: #f1f5f9;
}
body{ background: var(--body-bg); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.app{ display:flex; min-height:100vh; }

.sidebar{
  width: 260px; background: var(--sidebar-bg); color: var(--sidebar-text);
  position: fixed; inset: 0 auto 0 0; overflow-y:auto; transition: .25s;
  z-index: 1040;
}
.sidebar .brand{ padding:20px 22px; color:#fff; font-weight:700; font-size:1.15rem; letter-spacing:.5px; border-bottom: 1px solid rgba(255,255,255,.06);}
.sidebar .brand small{ font-weight:400; opacity:.7; display:block; font-size:.72rem; text-transform:uppercase; }
.sidebar .nav-section{ padding: 14px 22px 6px; color:#64748b; text-transform:uppercase; font-size:.68rem; letter-spacing:1px;}
.sidebar a{ color: var(--sidebar-text); padding: 10px 18px; display:flex; align-items:center; gap:12px; text-decoration:none; border-left:3px solid transparent; margin: 1px 0; font-size:.93rem;}
.sidebar a:hover{ background: var(--sidebar-hover); color:#fff; }
.sidebar a.active{ background: rgba(37,99,235,.12); color:#fff; border-left-color: var(--primary); }
.sidebar a i{ width:20px; text-align:center; opacity:.85;}

.main{ margin-left: 260px; width:100%; display:flex; flex-direction:column;}
.topbar{ background: var(--topbar-bg); padding: 12px 24px; display:flex; align-items:center; gap:12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); position:sticky; top:0; z-index:1030;}
.topbar .page-title{ font-weight:600; color:#0f172a; margin:0;}
.topbar .user-menu{ margin-left:auto;}

.content{ padding: 24px; flex:1;}

.card{ border: 0; box-shadow: 0 1px 3px rgba(15,23,42,.06); border-radius:12px;}
.card .card-header{ background: transparent; border-bottom: 1px solid #e2e8f0; font-weight:600;}
.stat-card{ border-radius:12px; padding:18px; color:#fff; background: linear-gradient(135deg, #3b82f6, #2563eb);}
.stat-card.green{ background: linear-gradient(135deg,#22c55e,#16a34a);}
.stat-card.orange{ background: linear-gradient(135deg,#fb923c,#ea580c);}
.stat-card.red{ background: linear-gradient(135deg,#ef4444,#b91c1c);}
.stat-card.purple{ background: linear-gradient(135deg,#a855f7,#7e22ce);}
.stat-card.teal{ background: linear-gradient(135deg,#14b8a6,#0f766e);}
.stat-card.slate{ background: linear-gradient(135deg,#64748b,#334155);}
.stat-card .stat-icon{ float:right; font-size:2.1rem; opacity:.4;}
.stat-card .stat-value{ font-size:1.75rem; font-weight:700; margin:.25rem 0; }
.stat-card .stat-label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.8px; opacity:.9;}

.table thead th{ background:#f8fafc; font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; color:#64748b; font-weight:600;}
.table td, .table th{ vertical-align:middle;}
.badge-statut{ font-size:.73rem; padding:.4em .6em;}

.btn-primary{ background:var(--primary); border-color:var(--primary);}
.btn-primary:hover{ background: var(--primary-dark); border-color:var(--primary-dark);}

.sidebar-toggle-btn{ display:none; border:0; background: transparent; font-size:1.3rem; color:#334155;}
@media (max-width: 991.98px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.show{ transform:translateX(0);}
  .main{ margin-left:0;}
  .sidebar-toggle-btn{ display:inline-block;}
}

.form-label{ font-weight:500; color:#334155; font-size:.9rem;}
.required::after{ content:" *"; color:#ef4444;}

.flash{ border-radius:8px; padding:12px 16px; margin-bottom:16px; border:0;}
.flash.ok{ background:#dcfce7; color:#166534;}
.flash.err{ background:#fee2e2; color:#991b1b;}

.page-actions{ display:flex; gap:8px; align-items:center; margin-bottom:16px;}

.table-actions a, .table-actions button{ padding:4px 8px; font-size:.82rem; }

.auth-wrapper{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#1e3a8a,#2563eb); padding:20px;}
.auth-card{ background:#fff; border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.18); max-width:440px; width:100%; padding:34px;}
.auth-card .brand{ text-align:center; font-weight:700; font-size:1.5rem; color:var(--primary); margin-bottom:6px;}
.auth-card .sub{ text-align:center; color:#64748b; margin-bottom:24px;}