/* ============================================================
   COMPANIUM Admin — CSS Global v1.0
   Design : professionnel, sobre, productif
   ============================================================ */

/* ─── Polices auto-hebergees ─────────────────────────────────
   21/08/2026. L'administration ne chargeait AUCUNE police : ses ecrans
   retombaient sur celle du systeme, et s'eloignaient des maquettes pour
   cette seule raison. Les neuf fichiers sont les memes que ceux du site
   public, copies dans public/assets/fonts/ sans etre renommes.

   RIEN N'EST DEMANDE A UN TIERS : aucune adresse Google, aucun appel
   sortant. Un ecran d'administration doit s'afficher tout seul.

   Le chemin est RELATIF a cette feuille — « ../fonts/ ». Le site public
   ecrit « /assets/fonts/ » parce qu'il sert sa feuille depuis
   /assets/css/ ; l'administration la sert depuis /public/assets/css/, et
   un chemin absolu tomberait a cote. Le chemin relatif vaut des deux
   cotes et ne fige aucune adresse.
   ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

/* ─── Variables ─────────────────────────────────────────────── */
:root {
  /* Couleurs principales */
  --primary:       #2563eb;
  --primary-dark:  #1d4ed8;
  --primary-light: #eff6ff;
  --primary-50:    #dbeafe;

  /* Couleurs sémantiques */
  --success:   #10b981;
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --info:      #3b82f6;

  /* Neutres */
  --gray-50:   #f8fafc;
  --gray-100:  #f1f5f9;
  --gray-200:  #e2e8f0;
  --gray-300:  #cbd5e1;
  --gray-400:  #94a3b8;
  --gray-500:  #64748b;
  --gray-600:  #475569;
  --gray-700:  #334155;
  --gray-800:  #1e293b;
  --gray-900:  #0f172a;

  /* Sidebar */
  --sidebar-bg:    #0f172a;
  --sidebar-w:     240px;
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active:rgba(37,99,235,.25);

  /* Topbar */
  --topbar-h:      56px;
  --topbar-bg:     #ffffff;

  /* Layout */
  --radius:   8px;
  --radius-lg:12px;
  --shadow:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.1);

  /* Typo */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: var(--font); background: var(--gray-50); color: var(--gray-800);
       line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ─── Layout principal ───────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

/* ─── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: rgba(255,255,255,.75);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-logo {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.sidebar-logo-mark {
  width: 32px; height: 32px;
  background: var(--primary);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; color: #fff; flex-shrink: 0;
}
.sidebar-logo-text { font-weight: 700; font-size: .95rem; color: #fff; }
.sidebar-logo-sub  { font-size: .7rem; color: var(--gray-400); }

.sidebar-nav { flex: 1; padding: .75rem 0; }

.nav-section {
  padding: .5rem 1rem .25rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: .5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.1rem;
  margin: 1px .5rem;
  border-radius: 7px;
  color: rgba(255,255,255,.65);
  font-size: .875rem;
  font-weight: 500;
  transition: background .12s, color .12s;
  cursor: pointer;
  text-decoration: none;
}
.nav-item:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--sidebar-active); color: #fff; }
.nav-item.active .nav-icon { color: var(--primary-50); }

.nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .7; }
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon { opacity: 1; }

.nav-badge {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 20px;
}

.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-user {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem;
  border-radius: 7px;
  transition: background .12s;
  text-decoration: none;
  color: rgba(255,255,255,.75);
}
.sidebar-user:hover { background: var(--sidebar-hover); color: rgba(255,255,255,.9); }
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.avatar-sm { width: 26px; height: 26px; font-size: .7rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; }
.user-info { flex: 1; min-width: 0; }
.user-name  { font-size: .85rem; font-weight: 600; color: #fff;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role  { font-size: .72rem; color: var(--gray-400); }

/* ─── Zone principale ────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── Topbar ─────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-title { font-size: 1rem; font-weight: 600; color: var(--gray-800); flex: 1; }
.topbar-breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--gray-500);
}
.topbar-breadcrumb a { color: var(--gray-500); }
.topbar-breadcrumb a:hover { color: var(--primary); }
.topbar-breadcrumb .sep::before { content: '/'; margin: 0 .1rem; color: var(--gray-300); }

.topbar-actions { display: flex; align-items: center; gap: .5rem; }

.topbar-btn {
  width: 36px; height: 36px;
  border: none; background: none;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--gray-500);
  position: relative;
  transition: background .12s, color .12s;
}
.topbar-btn:hover { background: var(--gray-100); color: var(--gray-700); }
.topbar-btn .badge-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid #fff;
}

/* ─── Page content ───────────────────────────────────────────── */
.page { padding: 1.5rem; flex: 1; }
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}
.page-header h1 { font-size: 1.4rem; font-weight: 700; color: var(--gray-900); }
.page-header p  { color: var(--gray-500); font-size: .875rem; margin-top: .2rem; }
.page-actions   { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.card-header h3 { font-size: .95rem; font-weight: 600; }
.card-body { padding: 1.25rem; }
.card-footer {
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ─── Stats cards ─────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-icon.blue   { background: #dbeafe; color: var(--primary); }
.stat-icon.green  { background: #d1fae5; color: var(--success); }
.stat-icon.orange { background: #fef3c7; color: var(--warning); }
.stat-icon.red    { background: #fee2e2; color: var(--danger); }
.stat-icon.purple { background: #ede9fe; color: #7c3aed; }

.stat-value { font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--gray-900); }
.stat-label { font-size: .8rem; color: var(--gray-500); margin-top: .2rem; }
.stat-change { font-size: .78rem; margin-top: .4rem; }
.stat-change.up   { color: var(--success); }
.stat-change.down { color: var(--danger); }

/* ─── Layout formulaire scindé (Packs de leads, Promo automatique) ──────
   Remplace le style inline `grid-template-columns:1fr 380px` : la
   colonne fixe de 380px dépassait la largeur de l'écran en mobile,
   sans aucune adaptation. Empilement en 1 colonne sous 900px.
   `min-width: 0` sur les enfants directs (04/07/2026, bis) : sans ça,
   une grille ne laisse jamais une case rétrécir en dessous de la largeur
   naturelle de son contenu (ici un <table> large) — la case, et tout ce
   qu'elle contient (cartes en dessous du tableau incluses), se retrouvait
   forcée à dépasser la largeur de l'écran au lieu de laisser le tableau
   scroller dans sa propre largeur via .table-responsive. */
.split-form-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  align-items: start;
}
.split-form-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .split-form-layout { grid-template-columns: 1fr; }
}

/* ─── Layout fiche détail (Fiche lead) ───────────────────────────────────
   Remplace le style inline `grid-template-columns:2fr 1fr` de la fiche
   lead (`admin/leads/show.php`) : colonne droite (Score + Historique) qui
   ne repassait jamais sous la colonne principale sur mobile, débordait de
   l'écran. Empilement en 1 colonne sous 900px, min-width:0 par précaution
   (même principe que .split-form-layout). */
.detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.detail-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; }
}

/* ─── Tables ──────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  padding: .65rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-500);
  border-bottom: 2px solid var(--gray-100);
  white-space: nowrap;
}
tbody tr {
  border-bottom: 1px solid var(--gray-100);
  transition: background .1s;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--gray-50); }
tbody td { padding: .75rem 1rem; font-size: .875rem; vertical-align: middle; }
.td-actions { text-align: right; white-space: nowrap; }
.td-actions a, .td-actions button { margin-left: .25rem; }

/* ─── Badges / Pills ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
}
.badge-blue    { background: #dbeafe; color: #1e40af; }
.badge-green   { background: #d1fae5; color: #065f46; }
.badge-orange  { background: #fef3c7; color: #92400e; }
.badge-red     { background: #fee2e2; color: #991b1b; }
.badge-gray    { background: var(--gray-100); color: var(--gray-600); }
.badge-purple  { background: #ede9fe; color: #5b21b6; }
.badge-cyan    { background: #cffafe; color: #0e7490; }
.badge-dot::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor;
}

/* ─── Boutons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  text-decoration: none;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary   { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-secondary { background: #fff; color: var(--gray-700); border-color: var(--gray-300); }
.btn-secondary:hover { background: var(--gray-50); }
.btn-success   { background: var(--success); color: #fff; border-color: var(--success); }
.btn-danger    { background: var(--danger);  color: #fff; border-color: var(--danger); }
.btn-warning   { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-ghost     { background: transparent; color: var(--gray-600); border-color: transparent; }
.btn-ghost:hover { background: var(--gray-100); }
.btn-sm   { padding: .35rem .75rem; font-size: .8rem; }
.btn-lg   { padding: .75rem 1.5rem; font-size: 1rem; }
.btn-icon { padding: .45rem; }
.btn svg  { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── Formulaires ──────────────────────────────────────────────── */
.form-group { margin-bottom: 1.1rem; }
.form-row { display: grid; gap: 1rem; margin-bottom: 1.1rem; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

label, .form-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: .4rem;
}
.form-label .required { color: var(--danger); margin-left: .2rem; }

.form-control {
  width: 100%;
  padding: .55rem .85rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--gray-800);
  background: #fff;
  transition: border .15s, box-shadow .15s;
  outline: none;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.form-control:disabled, .form-control[readonly] {
  background: var(--gray-100);
  color: var(--gray-500);
}
.form-control.is-invalid { border-color: var(--danger); }
.form-control.is-valid   { border-color: var(--success); }

textarea.form-control { min-height: 90px; resize: vertical; }
select.form-control    { cursor: pointer; }

.form-hint  { font-size: .78rem; color: var(--gray-400); margin-top: .3rem; }
.form-error { font-size: .78rem; color: var(--danger);   margin-top: .3rem; }
.form-valid { font-size: .78rem; color: var(--success);  margin-top: .3rem; }

/* ─── Alertes / Flash ─────────────────────────────────────────── */
.alert {
  padding: .85rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .875rem;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  border: 1px solid transparent;
}
.alert svg     { flex-shrink: 0; margin-top: 1px; }
.alert-success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.alert-error   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.alert-warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.alert-info    { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.alert-close {
  margin-left: auto; background: none; border: none;
  cursor: pointer; color: inherit; opacity: .6; padding: 0;
  font-size: 1.1rem; line-height: 1;
}
.alert-close:hover { opacity: 1; }

/* ─── LES MESSAGES FLOTTANTS ───────────────────────────────────
   26/08/2026 (SEQ3) — UN MESSAGE NE POUSSE PLUS LA PAGE.
   Ce qui existait : le message s'inserait DANS le flux, en haut, et tout
   descendait d'un cran au moment precis ou l'on lisait.

   ⚠️ ON NE TOUCHE PAS A .alert : dans l'administration cette classe sert
   aussi aux encadres d'information qui font partie de la page (l'encadre
   bleu des parametres, par exemple). Les rendre flottants aurait fait
   decoller des blocs qui doivent rester ou ils sont. Les messages ont donc
   leur propre nom : .msg.

   LA CHARTE : aucune bordure, aucun emoji, et une ombre COURTE ET NETTE —
   decalage 2 px, flou 4 px. Jamais un halo. */
.msg-zone { position: fixed; top: 14px; right: 14px; z-index: 4000;
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 28px)); pointer-events: none; }
.msg { position: relative; pointer-events: auto; border: 0;
  border-radius: var(--radius); padding: .8rem 2.3rem .8rem .9rem;
  font-size: .875rem; line-height: 1.45;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .30);
  display: flex; align-items: flex-start; gap: .55rem;
  animation: msg-entre .16s ease-out; }
.msg svg { flex-shrink: 0; margin-top: 2px; }
.msg-success { background: #d1fae5; color: #065f46; }
.msg-error   { background: #fee2e2; color: #991b1b; }
.msg-warning { background: #fef3c7; color: #92400e; }
.msg-info    { background: #dbeafe; color: #1e40af; }
.msg-x { position: absolute; top: 5px; right: 6px; background: none; border: 0;
  cursor: pointer; color: inherit; opacity: .55; padding: 4px 7px;
  font-size: 1.05rem; line-height: 1; border-radius: 6px; }
.msg-x:hover { opacity: 1; background: rgba(15, 23, 42, .07); }
@keyframes msg-entre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }
/*  Telephone : le message prend la largeur, moins les marges. */
@media (max-width: 640px) {
  .msg-zone { left: 14px; right: 14px; width: auto; }
}

/* Bandeau migrations */
.migration-banner {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
  padding: .7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .875rem;
  font-weight: 500;
}
.migration-banner a { color: #fff; font-weight: 700; text-decoration: underline; }

/* ─── Dropdowns ───────────────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 200;
  display: none;
  overflow: hidden;
}
.dropdown-menu.show { display: block; }
.dropdown-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem;
  font-size: .875rem;
  color: var(--gray-700);
  cursor: pointer;
  transition: background .1s;
  text-decoration: none;
  border: none; background: none; width: 100%; text-align: left;
}
.dropdown-item:hover { background: var(--gray-50); color: var(--gray-900); text-decoration: none; }
.dropdown-item.danger:hover { background: #fee2e2; color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--gray-100); margin: .25rem 0; }

/* ─── Pagination ──────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; gap: .3rem;
  justify-content: center; padding: 1rem 0;
}
.page-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1.5px solid var(--gray-200);
  border-radius: 7px;
  font-size: .85rem;
  color: var(--gray-600);
  cursor: pointer;
  text-decoration: none;
  transition: all .1s;
}
.page-btn:hover    { border-color: var(--primary); color: var(--primary); }
.page-btn.active   { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ─── Modales ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  max-width: 520px; width: 100%;
  transform: translateY(12px); transition: transform .2s;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { font-size: 1rem; font-weight: 700; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--gray-400);
               font-size: 1.4rem; line-height: 1; padding: 0; }
.modal-close:hover { color: var(--gray-700); }
.modal-body    { padding: 1.5rem; }
.modal-footer  { padding: 1rem 1.5rem; border-top: 1px solid var(--gray-100);
                 display: flex; justify-content: flex-end; gap: .5rem; background: var(--gray-50);
                 border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ─── Empty states ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--gray-400);
}
.empty-state-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .5; }
.empty-state h3   { font-size: 1rem; font-weight: 600; color: var(--gray-600); margin-bottom: .4rem; }
.empty-state p    { font-size: .875rem; }

/* ─── Toasts ───────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 1.25rem; right: 1.25rem;
  z-index: 1000; display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.toast {
  background: var(--gray-800); color: #fff;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: slideIn .25s ease;
  display: flex; align-items: center; gap: .6rem;
  min-width: 260px; max-width: 360px;
}
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger);  }
.toast.warning { background: var(--warning); color: #fff; }
@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── Utilities ──────────────────────────────────────────────── */
.d-flex    { display: flex; }
.d-grid    { display: grid; }
.d-none    { display: none; }
.flex-1    { flex: 1; }
.gap-1     { gap: .5rem; }
.gap-2     { gap: 1rem; }
.gap-3     { gap: 1.5rem; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-sm   { font-size: .8rem; }
.text-xs   { font-size: .72rem; }
.text-muted{ color: var(--gray-500); }
.text-danger{ color: var(--danger); }
.text-success{ color: var(--success); }
.font-bold { font-weight: 700; }
.font-medium{ font-weight: 500; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.w-100 { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); }
  .main  { margin-left: 0; }
  .topbar { padding: 0 1rem; }
  .page   { padding: 1rem; }
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .page-header { flex-direction: column; }
}