/* =========================================================================
   Thème « Recouvrement Centralisé » — surcouche moderne au-dessus de Bootstrap 5
   Police Inter, palette indigo, cartes douces, sidebar à groupes repliables.
   ========================================================================= */
:root {
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --brand: #4f46e5;
  --brand-2: #7c3aed;
  --ink: #0f172a;
  --muted: #64748b;
  --bg: #f4f5fb;
  --card-radius: 16px;
  --bs-border-radius: .65rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #1e293b;
  --sidebar-w: 260px;
}

* { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--bs-body-font-family);
  background: var(--bg);
  color: var(--bs-body-color);
}

/* ---- Layout : sidebar + contenu ---------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, #11152b 0%, #0b0f22 100%);
  color: #cbd5e1; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; transition: margin-left .25s ease;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #ffffff1a; border-radius: 8px; }
.app-main { flex: 1 1 auto; min-width: 0; }

.sidebar .brand {
  display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.05rem; padding: 1.1rem 1.1rem .9rem;
}
.sidebar .brand:hover { color: #fff; }
.sidebar .brand .brand-logo {
  width: 38px; height: 38px; border-radius: 11px; overflow: hidden;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; flex: 0 0 auto;
}
.sidebar .brand .brand-logo-img { width: 100%; height: 100%; object-fit: cover; }

/* Avatar (topbar) */
.avatar-sm {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: .8rem;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.profile-avatar {
  width: 72px; height: 72px; border-radius: 20px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 1.8rem;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 14px 30px -14px var(--brand); flex: 0 0 auto;
}

.sidebar .nav-section { padding: .15rem .55rem; }
.sidebar .nav-group-toggle {
  width: 100%; display: flex; align-items: center; gap: .7rem;
  background: transparent; border: 0; color: #94a3b8; text-align: left;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .7rem .75rem .35rem; cursor: pointer;
}
.sidebar .nav-group-toggle .chev { margin-left: auto; transition: transform .2s ease; font-size: .75rem; }
.sidebar .nav-group-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }

.sidebar .nav-link {
  color: #cbd5e1; text-decoration: none; border-radius: .6rem;
  margin: .12rem .15rem; padding: .55rem .8rem; display: flex; align-items: center;
  gap: .7rem; font-size: .92rem; font-weight: 500; transition: background .15s, color .15s;
}
.sidebar .nav-link i { font-size: 1.05rem; opacity: .9; width: 1.2rem; text-align: center; }
.sidebar .nav-link:hover { color: #fff; background: #ffffff12; }
.sidebar .nav-link.active {
  color: #fff; background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 6px 16px -8px var(--brand);
}
.sidebar .nav-link.active i { opacity: 1; }

/* ---- Topbar ------------------------------------------------------------- */
.topbar {
  background: #ffffffcc; backdrop-filter: blur(8px);
  border-bottom: 1px solid #e7e9f3; position: sticky; top: 0; z-index: 1020;
}
.topbar .btn-icon {
  width: 40px; height: 40px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; color: #475569; border: 1px solid #e7e9f3;
  background: #fff;
}
.topbar .btn-icon:hover { background: #f1f5f9; }
.sidebar-toggle { display: inline-flex; }

/* Repli de la sidebar sur grand écran (bouton hamburger). */
@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-w)); }
}

/* ---- Cards -------------------------------------------------------------- */
.card {
  border: 1px solid #eceef6; border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -18px rgba(16,24,40,.25);
}
.card-header { background: #fff; border-bottom: 1px solid #f0f1f7; font-weight: 600; border-radius: var(--card-radius) var(--card-radius) 0 0 !important; }
.shadow-sm { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -18px rgba(16,24,40,.25) !important; }
.kpi-card .display-6 { font-weight: 700; letter-spacing: -.02em; }

/* ---- Stat cards (KPI avec icône) --------------------------------------- */
.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: 13px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 auto;
}
.stat-card .stat-label { color: var(--muted); font-size: .8rem; font-weight: 600; }
.stat-card .stat-value { font-weight: 800; letter-spacing: -.02em; font-size: 1.6rem; line-height: 1.1; }
.stat-i-indigo { background: #eef0ff; color: #4f46e5; }
.stat-i-green  { background: #e7f7ef; color: #15803d; }
.stat-i-red    { background: #fdecec; color: #dc2626; }
.stat-i-amber  { background: #fdf3e0; color: #d97706; }
.stat-i-cyan   { background: #e3f6fb; color: #0e7490; }
.stat-i-slate  { background: #eef1f6; color: #475569; }
.tile-link { text-decoration: none; color: inherit; display: block; }
.tile-link:hover .card { border-color: #d9ddf0; box-shadow: 0 6px 22px -12px rgba(79,70,229,.45); transform: translateY(-1px); }
.tile-link .card { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }

/* ---- Boutons ------------------------------------------------------------ */
.btn { border-radius: .6rem; font-weight: 600; letter-spacing: .01em; }
.btn-sm { border-radius: .5rem; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: #4338ca; border-color: #4338ca; }
.btn-dark { background: var(--ink); border-color: var(--ink); }
.btn-outline-secondary { border-color: #d8dbe8; color: #475569; }
.btn-outline-secondary:hover { background: #f1f5f9; color: #1e293b; border-color: #cbd2e0; }

/* ---- Formulaires -------------------------------------------------------- */
.form-control, .form-select {
  border-radius: .6rem; border-color: #e2e5f0; padding: .5rem .8rem;
  background-color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(79,70,229,.15);
}
.form-label { font-weight: 600; color: #334155; }
.input-group-text { border-radius: .6rem; background: #f8fafc; border-color: #e2e5f0; }
.form-switch .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* ---- Tables ------------------------------------------------------------- */
.table { --bs-table-hover-bg: #f6f7fd; }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead.table-light th, .table > thead th {
  background: #f7f8fc; color: #64748b; font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #eef0f7;
}
.table tbody td { border-color: #f1f2f8; vertical-align: middle; }

/* ---- Badges & nav-tabs -------------------------------------------------- */
.badge { font-weight: 600; border-radius: .5rem; padding: .35em .6em; }
.nav-tabs { border-bottom: 1px solid #e7e9f3; gap: .15rem; }
.nav-tabs .nav-link {
  border: 0; color: #64748b; font-weight: 600; border-radius: .6rem .6rem 0 0;
  padding: .55rem .9rem;
}
.nav-tabs .nav-link:hover { color: var(--brand); background: #f4f5fb; }
.nav-tabs .nav-link.active {
  color: var(--brand); background: transparent; border-bottom: 2.5px solid var(--brand);
}

/* ---- Alerts / divers ---------------------------------------------------- */
.alert { border: 0; border-radius: .8rem; }
.list-group-item { border-color: #f1f2f8; }
a { color: #4338ca; }
.dropdown-menu { border: 1px solid #eceef6; border-radius: .9rem; box-shadow: 0 12px 32px -16px rgba(16,24,40,.4); }
.dropdown-item { border-radius: .5rem; padding: .5rem .8rem; }
.dropdown-item:hover { background: #f1f5f9; }

/* ---- Responsive sidebar ------------------------------------------------- */
@media (max-width: 991.98px) {
  .sidebar { position: fixed; z-index: 1040; margin-left: calc(-1 * var(--sidebar-w)); box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.sidebar-open .sidebar { margin-left: 0; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(2,6,23,.5); z-index: 1039; display: none; }
  body.sidebar-open .sidebar-backdrop { display: block; }
}