/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — branche `design`
   Tokens (CSS variables) + composants (shell, btn, tile…) en haut.
   Les overrides dark mode et règles legacy spécifiques aux pages
   actuelles restent plus bas pour ne pas casser ce qui marche pendant
   la migration page par page.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --brand:           #198754;
  --brand-dark:      #157347;
  --brand-fg:        #fff;
  --accent:          #dc2626;        /* rouge — alertes/danger */
  --accent-warm:     #ea580c;        /* orange — CTAs subtils */
  --accent-warm-soft:#ffedd5;

  /* Surfaces */
  --bg:           #f8fafc;
  --bg-elevated:  #ffffff;
  --bg-muted:     #f1f5f9;
  --bg-overlay:   rgba(15, 23, 42, .5);

  /* Text */
  --text:         #0f172a;
  --text-muted:   #475569;
  --text-subtle:  #64748b;

  /* Borders */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Spacing (4px base) */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* Typography */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;

  /* Motion */
  --t-fast: 100ms;
  --t-base: 160ms;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:            56px;
  --bottomnav-h:         64px;
  --content-max:         1200px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0b1220;
  --bg-elevated: #131c2e;
  --bg-muted:    #1e293b;
  --bg-overlay:  rgba(0, 0, 0, .65);

  --text:        #e2e8f0;
  --text-muted:  #94a3b8;
  --text-subtle: #64748b;

  --border:        #1e293b;
  --border-strong: #334155;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--text); background: var(--bg); }

/* ───────────────────────────────────────────────────────────────────────
   Compatibilité Safari iOS : <select> natif ignore padding et min-height,
   donc rend à ~22px sur iPhone même quand on le style. On désactive
   l'apparence native partout, on dessine un chevron custom et on impose
   une hauteur tactile minimale standard à TOUS les champs (input/select/
   textarea) pour qu'ils cohabitent visuellement alignés dans un même
   formulaire (iOS Human Interface Guidelines : touch target ≥ 44px).
   Les pages avec filtres compacts peuvent surcharger via leur CSS local.
   ─────────────────────────────────────────────────────────────────────── */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px !important;
}
input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]),
select:not([multiple]):not([size]),
textarea {
  min-height: 44px;
}
textarea { min-height: 80px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  .01ms !important;
    transition-duration: .01ms !important;
  }
}

.skip-link {
  position: absolute; top: -40px; left: 0; z-index: 9999;
  background: var(--brand); color: white;
  padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--r-md) 0;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 0; }

/* ═══ APP SHELL (sidebar + topbar + bottom-nav) ════════════════════════ */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  transition: grid-template-columns var(--t-base) var(--ease);
}
.app-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* Sidebar */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: width var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  z-index: 100;
}
.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

.sidebar-brand {
  display: flex; align-items: center; gap: var(--s-3);
  /* Aligné horizontalement sur les nav-items (padding sidebar-nav 12 + nav-item left 16 = 28). */
  padding: 0 calc(var(--s-3) + var(--s-4));
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: var(--fs-md); color: var(--text);
  white-space: nowrap; overflow: hidden;
  text-decoration: none;
}
.sidebar-brand-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-brand-icon img { height: 40px; width: auto; max-width: 100%; display: block; }
.sidebar-brand .brand-text { transition: opacity var(--t-fast); }
.sidebar-collapsed .sidebar-brand { padding: 0; justify-content: center; }
.sidebar-collapsed .brand-text { display: none; }

.sidebar-nav {
  flex: 1; padding: var(--s-3); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}

.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  color: var(--text-muted);
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.nav-item:hover { background: var(--bg-muted); color: var(--text); }
.nav-item.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: var(--brand-fg);
  box-shadow: var(--shadow-sm);
}
.nav-item-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.sidebar-collapsed .nav-item { justify-content: center; padding: var(--s-3); }
.sidebar-collapsed .nav-item .label { display: none; }

/* ── Sous-onglets : dropdown "onglet actif" en haut du contenu (mobile only) ── */
.mobile-tab-dropdown { display: none; }
@media (max-width: 767px) {
  .mobile-tab-dropdown {
    display: flex; align-items: center; gap: var(--s-2);
    width: 100%;
    padding: var(--s-1) var(--s-3);
    margin: 0 0 var(--s-4);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: var(--r-md);
    position: relative;
  }
  .mobile-tab-dropdown .mtd-arrow {
    color: var(--text-muted); font-size: .9rem; flex-shrink: 0; pointer-events: none;
    margin-left: auto;
  }
  .mobile-tab-dropdown .mtd-select {
    appearance: none; -webkit-appearance: none;
    background: transparent; border: none; outline: none;
    font-weight: 700; font-size: var(--fs-md); color: var(--text);
    font-family: inherit;
    padding: var(--s-2) 0; margin: 0;
    flex: 1; min-width: 0;
    cursor: pointer;
    /* Cache la flèche native du select (on garde notre propre .mtd-arrow) */
    background-image: none;
    /* iOS Safari : force la transparence du fond */
    -webkit-background-clip: border-box;
  }
  .mobile-tab-dropdown .mtd-select:focus { outline: none; }
  /* Masque le strip horizontal des onglets sur mobile quand un subnav est rendu */
  .tabs-has-subnav { display: none !important; }
}

.sidebar-toggle {
  margin: var(--s-3); padding: var(--s-2);
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.sidebar-toggle:hover { background: var(--bg-muted); color: var(--text); }
.sidebar-toggle svg { transition: transform var(--t-base) var(--ease); }
.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* Content area */
.content-area { grid-column: 2; min-width: 0; display: flex; flex-direction: column; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-5);
}
.topbar-menu {
  display: none;
  background: transparent; border: none; cursor: pointer;
  padding: var(--s-2); color: var(--text); font-size: 1.3rem;
}
.topbar h1.page-title {
  flex: 1; margin: 0; padding: 0;
  font-size: var(--fs-lg); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { display: flex; align-items: center; gap: var(--s-2); }
.topbar-btn {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  transition: all var(--t-fast);
}
.topbar-btn:hover { background: var(--bg-muted); color: var(--text); border-color: var(--border-strong); }

.topbar .user-menu-btn {
  width: auto; padding: 0 var(--s-3) 0 var(--s-2); gap: var(--s-2);
}
.topbar .user-menu-btn .user-badge {
  background: transparent; padding: 0; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text);
}

/* Main — pleine largeur sur toutes les pages (les pages qui ont besoin
   d'une largeur lisible bornée peuvent borner leur propre conteneur). */
.main { flex: 1; padding: var(--s-6) var(--s-5); width: 100%; }

/* Popover (user menu in topbar) */
.popover {
  position: fixed; z-index: 200;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s-2); min-width: 200px;
  display: none; flex-direction: column; gap: 2px;
  animation: popIn var(--t-base) var(--ease);
}
.popover.open { display: flex; }
.popover a, .popover button {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-sm);
  text-decoration: none; color: var(--text);
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500; text-align: left;
}
.popover a:hover, .popover button:hover { background: var(--bg-muted); }
.popover .danger { color: var(--accent); }
.popover .danger:hover { background: rgba(220, 38, 38, .1); }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Icon + label alignement dans le popover utilisateur (topbar). */
.popover .menu-icon {
  width: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
}
.popover .menu-label { line-height: 1.2; }

/* Responsive */
@media (max-width: 1023px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w); }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .app-shell.sidebar-open::before {
    content: ""; position: fixed; inset: 0; background: var(--bg-overlay);
    z-index: 99; animation: popIn var(--t-fast) var(--ease);
  }
  .topbar-menu { display: flex; }
  .sidebar-collapsed .sidebar { width: var(--sidebar-w); }
  .sidebar-toggle { display: none; }
  .sidebar-collapsed .sidebar-brand { padding: 0 var(--s-5); justify-content: flex-start; }
  .sidebar-collapsed .brand-text { opacity: 1; width: auto; }
  .sidebar-collapsed .nav-item { justify-content: flex-start; padding: var(--s-3) var(--s-4); }
  .sidebar-collapsed .nav-item .label { display: inline; }
}
@media (max-width: 767px) {
  .topbar     { padding: 0 var(--s-3); }
  .topbar h1.page-title { font-size: var(--fs-md); }
  .main       { padding: var(--s-4) var(--s-3); }
  .topbar .user-menu-btn .user-badge { display: none; }

  /* iPhone 12 = 390px viewport. Tuiles d'accueil compactes : 1 colonne,
     padding réduit, icône plus petite, gap inter-tuiles serré. */
  .tile-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .tile      { padding: var(--s-4); gap: var(--s-3); border-radius: var(--r-md); }
  .tile-icon { width: 40px; height: 40px; font-size: 1.4rem; }
  .tile-title { font-size: var(--fs-md); }
  .tile-desc  { font-size: var(--fs-xs); }

  /* Onglets : pas de coupure de mot, label court si fourni via .tab-short */
  .tab-btn, .tab-button { white-space: nowrap; }
}

/* Système universel de labels d'onglet "court / long" :
   - <span class="tab-full">…</span>  visible desktop / tablette
   - <span class="tab-short">…</span> visible uniquement en mobile (≤767px) */
.tab-short { display: none; }
@media (max-width: 767px) {
  .tab-full  { display: none !important; }
  .tab-short { display: inline; }
}

/* ═══ COMPONENTS ════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all var(--t-fast);
  min-height: 40px; white-space: nowrap;
}
.btn-primary   { background: var(--brand); color: var(--brand-fg); }
.btn-primary:hover   { background: var(--brand-dark); }
.btn-secondary { background: var(--bg-muted); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-ghost     { background: transparent; color: var(--text-muted); }
.btn-ghost:hover     { background: var(--bg-muted); color: var(--text); }
.btn-danger    { background: var(--accent); color: white; }
.btn-danger:hover    { background: #b91c1c; }
.btn-sm { padding: var(--s-2) var(--s-3); min-height: 32px; font-size: var(--fs-xs); }
.btn-lg { padding: var(--s-4) var(--s-5); min-height: 48px; font-size: var(--fs-md); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Tile (home dashboard) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}
.tile {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.tile:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.tile-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--bg-muted); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.tile-body  { flex: 1; min-width: 0; }
.tile-title { margin: 0 0 var(--s-1); font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.tile-desc  { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
.tile.tile-danger .tile-icon { background: rgba(220, 38, 38, .1); color: var(--accent); }
.tile.tile-danger:hover { border-color: var(--accent); }
.tile.tile-warm .tile-icon { background: rgba(234, 88, 12, .1); color: var(--accent-warm); }
.tile.tile-warm:hover { border-color: var(--accent-warm); }
.tile.tile-brand .tile-icon { background: rgba(25, 135, 84, .1); color: var(--brand); }

/* Section header */
.section-h {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 var(--s-4); gap: var(--s-3);
}
.section-h h2 { margin: 0; font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
.section-h .muted { font-size: var(--fs-sm); color: var(--text-muted); }


/* ═══ LEGACY (rules ci-dessous conservées pendant la migration) ═════════ */

[data-theme="dark"] { color-scheme: dark; }

/* ── Bouton toggle ────────────────────────────────────────────────────── */
.dark-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  background: transparent; border: 1px solid #d1d5db; color: #6b7280;
  font-size: 1.1rem; cursor: pointer; transition: background .15s;
}
.dark-toggle.dt-ready { display: flex; }
.dark-toggle:hover { background: #f0f4f8; }

/* menu.php : header vert → variante blanche du bouton */
header .dark-toggle {
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.85);
}
header .dark-toggle:hover { background: rgba(255,255,255,.15); color: white; }

[data-theme="dark"] .dark-toggle { border-color: #4b5563; color: #fbbf24; }
[data-theme="dark"] .dark-toggle:hover { background: #374151; }
[data-theme="dark"] header .dark-toggle { border-color: rgba(255,255,255,.25); color: #fbbf24; }
[data-theme="dark"] header .dark-toggle:hover { background: rgba(255,255,255,.1); }

/* ── Fond & corps ─────────────────────────────────────────────────────── */
[data-theme="dark"] body { background: #111827; color: #f9fafb; }

/* ── En-tête pages intérieures (.page-header) ─────────────────────────── */
/* Unifie le rendu avec les cartes (shadow et rayon), indépendamment du
   CSS inline défini par chaque page. */
.page-header {
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
[data-theme="dark"] .page-header {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .page-header h1 { color: #f9fafb; }
[data-theme="dark"] .user-badge { background: #064e3b; color: #6ee7b7; }

/* ── Cartes ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .card {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
[data-theme="dark"] .card:hover { box-shadow: 0 14px 36px rgba(0,0,0,.65); }
[data-theme="dark"] .card h2 { color: #f9fafb; }
[data-theme="dark"] .card p  { color: #9ca3af; }
[data-theme="dark"] .card-admin h2 { color: #f87171; }

/* ── Conteneurs ───────────────────────────────────────────────────────── */
[data-theme="dark"] .content-wrapper {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .calendar-wrapper {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .calendar-wrapper iframe {
  filter: invert(1) hue-rotate(180deg);
}

/* ── Organisation du CS — liens tel/mail & cartes mobiles ────────────── */
[data-theme="dark"] a.tel-link  { color: #6ee7b7; }
[data-theme="dark"] a.mail-link { color: #9ca3af; }
[data-theme="dark"] a.mail-link:hover { color: #6ee7b7; }
[data-theme="dark"] .empty-cell { color: #4b5563; }
[data-theme="dark"] .search-row input,
[data-theme="dark"] .search-row select {
  background: #111827; color: #f9fafb; border-color: #4b5563;
}
[data-theme="dark"] #agent-count { color: #9ca3af; }

@media (max-width: 640px) {
  [data-theme="dark"] .card table tr {
    background: #273548; border-color: #374151;
  }
  [data-theme="dark"] .card table a.tel-link {
    background: #064e3b; color: #6ee7b7; border-color: #065f46;
  }
  [data-theme="dark"] .card table a.mail-link {
    background: #1f2937; color: #d1d5db; border-color: #374151;
  }
  [data-theme="dark"] #agents-table td:nth-child(3) { color: #9ca3af; }
}

/* ── Calendrier — planning prochains événements ──────────────────────── */
[data-theme="dark"] .planning-group {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .planning-group h2 {
  color: #f9fafb;
  border-bottom-color: #374151;
}
[data-theme="dark"] .planning-group h2 .count {
  background: #374151;
  color: #9ca3af;
}
[data-theme="dark"] .planning-list li { border-bottom-color: #374151; }
[data-theme="dark"] .planning-list .date  { color: #6ee7b7; }
[data-theme="dark"] .planning-list .title { color: #e5e7eb; }
[data-theme="dark"] .planning-list .loc   { color: #9ca3af; }
[data-theme="dark"] .planning-empty       { color: #6b7280; }

/* ── Tableaux ─────────────────────────────────────────────────────────── */
[data-theme="dark"] caption { color: #f9fafb; }
[data-theme="dark"] table th {
  background: #273548; color: #d1d5db; border-color: #374151;
}
[data-theme="dark"] table td { border-color: #374151; color: #e5e7eb; }
[data-theme="dark"] table tr:hover td { background: #162232; }

/* ── Onglets ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .tabs { border-color: #374151; }
[data-theme="dark"] .tab-button { color: #9ca3af; }
[data-theme="dark"] .tab-button:hover { background: #374151; color: #f9fafb; }
[data-theme="dark"] .tab-button.active:hover { background: #198754; color: white; }
[data-theme="dark"] .tab-btn { color: #9ca3af; }
[data-theme="dark"] .tab-btn:hover:not(.active) { background: #374151; color: #f9fafb; }

/* ── Statistiques ─────────────────────────────────────────────────────── */
[data-theme="dark"] .stat-box { background: #273548; border-color: #374151; }
[data-theme="dark"] .stat-box h3 { color: #f9fafb; }
[data-theme="dark"] .stat-item { border-color: #374151; color: #e5e7eb; }
[data-theme="dark"] .stat-bar { background: #374151; }

/* ── Navigation flottante (nav.php) ───────────────────────────────────── */
[data-theme="dark"] .user-menu {
  background: #1f2937;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
[data-theme="dark"] .user-menu a { color: #e5e7eb; }
[data-theme="dark"] .user-menu a:hover { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .user-menu .menu-danger { color: #f87171; }
[data-theme="dark"] .user-menu .menu-danger:hover { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .user-menu-sep { border-color: #374151; }

[data-theme="dark"] .nav-panel {
  background: #1f2937;
  box-shadow: 0 8px 32px rgba(0,0,0,.65);
}
[data-theme="dark"] .nav-panel a { color: #e5e7eb; }
[data-theme="dark"] .nav-panel a:hover { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .nav-panel a.nav-active { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .nav-title { color: #6b7280; }
[data-theme="dark"] .nav-sep  { border-color: #374151; }

/* ── Saisie FMPA & liste FMPA du centre ──────────────────────────────── */
[data-theme="dark"] .saisie-desc-oblig { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .saisie-desc-compl { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .th-oblig { background: #064e3b !important; color: #6ee7b7; }
[data-theme="dark"] .th-suppl  { background: #1e3a5f !important; color: #93c5fd; }
[data-theme="dark"] .fmpa-card { border-color: #374151; }
[data-theme="dark"] .fmpa-card-header { background: #1f2937; }
[data-theme="dark"] .fmpa-card-header:hover { background: #273548; }
[data-theme="dark"] .fmpa-card-body { border-color: #374151; }
[data-theme="dark"] .badge-geef    { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .badge-pending { background: #451a03; color: #fde68a; }
[data-theme="dark"] .fmpa-date, [data-theme="dark"] .fmpa-theme,
[data-theme="dark"] .fmpa-saisi { color: #e5e7eb; }
[data-theme="dark"] .btn-geef   { border-color: #34d399; color: #34d399; }
[data-theme="dark"] .btn-geef:hover   { background: #34d399; color: #064e3b; }
[data-theme="dark"] .btn-ungeef { border-color: #f87171; color: #f87171; }
[data-theme="dark"] .btn-ungeef:hover { background: #f87171; color: #1f2937; }

/* ── Admin — modals ───────────────────────────────────────────────────── */
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.75); }
[data-theme="dark"] .modal-box {
  background: #1f2937;
  box-shadow: 0 20px 50px rgba(0,0,0,.7);
}
[data-theme="dark"] .modal-box h3    { color: #f9fafb; }
[data-theme="dark"] .modal-box label { color: #d1d5db; }
[data-theme="dark"] .modal-box input,
[data-theme="dark"] .modal-box select,
[data-theme="dark"] .modal-box textarea {
  background: #111827; color: #f9fafb; border-color: #4b5563;
}

/* ── Admin — labels & boutons annuler/sauver ──────────────────────────── */
[data-theme="dark"] .btn-annuler { background: #374151; color: #d1d5db; }
[data-theme="dark"] .btn-annuler:hover { background: #4b5563; }

/* ── Formulaires (reservation.php) ───────────────────────────────────── */
[data-theme="dark"] label { color: #d1d5db; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #111827; color: #f9fafb; border-color: #4b5563;
}

/* ── Alertes & messages ───────────────────────────────────────────────── */
[data-theme="dark"] .alert-success { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .alert-error   { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .alert-info    { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .empty         { color: #9ca3af; }
[data-theme="dark"] .cal-status    { color: #9ca3af; }
[data-theme="dark"] .conflit-warn  { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .pw-box        { background: #064e3b; color: #6ee7b7; }

/* =====================================================================
   RESPONSIVE — Tablettes (≤ 900px) et mobiles (≤ 640px / ≤ 480px)
   ===================================================================== */

/* ── Utilitaire : conteneur scrollable pour les tables larges ─────── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  margin-top: 1.5rem;
}
.table-scroll table { margin-top: 0; }

/* min-width par contexte pour garantir la lisibilité */
#tableaux      .table-scroll table { min-width: 640px; }
#tab-agents    .table-scroll table { min-width: 860px; }
#tab-reservations .table-scroll table { min-width: 560px; }
.card          .table-scroll table { min-width: 480px; }

/* Tables en mode cartes mobiles : annule les min-width imposés plus haut
   pour éviter un débordement horizontal qui fait zoomer la viewport iOS. */
@media (max-width: 640px) {
  .card .table-scroll table { min-width: 0; }
}

/* iOS zoom automatiquement au focus sur un <input>/<select>/<textarea>
   dont la font-size est inférieure à 16px. Plusieurs pages définissent
   font-size:.95rem ; on force 16px en mobile pour éviter cet effet. */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ── En-tête commun ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-header { padding: .9rem 1rem; gap: .5rem; margin-bottom: 1rem; }
  .page-header h1 {
    font-size: 1.15rem; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .header-actions { gap: .4rem; flex-shrink: 0; }
  .user-badge { font-size: .8rem; padding: .35rem .65rem; }
  .nav-fab, .dark-toggle { width: 38px; height: 38px; font-size: 1.05rem; }
  .btn-setup { font-size: .82rem; padding: .45rem .8rem; }
}
@media (max-width: 480px) {
  /* Badge masqué sur très petits écrans — visible dans le menu nav */
  .user-badge { display: none; }
}

/* ── Onglets ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tabs { gap: .2rem; }
  .tab-button, .tab-btn { padding: .55rem .85rem; font-size: .85rem; }
  .content-wrapper { padding: 1rem; border-radius: 10px; }
}
@media (max-width: 380px) {
  .tab-button, .tab-btn { padding: .5rem .55rem; font-size: .8rem; }
}

/* ── Cartes intérieures ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .card { padding: 1.25rem; border-radius: 10px; }
  .card h2 { font-size: 1rem; }
  /* Admin : contenu (max-width 1100px) avec padding body suffit */
  .content { gap: 1rem; }
}

/* ── Dashboard — statistiques ─────────────────────────────────────── */
@media (max-width: 700px) {
  .stats-container { grid-template-columns: 1fr !important; }
}

/* ── Admin — boutons d'action dans les tables ─────────────────────── */
@media (max-width: 900px) {
  .actions { flex-direction: column; align-items: flex-start; }
}

/* ── Admin — modals ───────────────────────────────────────────────── */
@media (max-width: 560px) {
  .modal-box { padding: 1.5rem 1.25rem; }
  .grid-2 { grid-template-columns: 1fr !important; gap: 0; }
  .modal-actions { flex-direction: column-reverse; gap: .5rem; }
  .modal-actions > * { width: 100%; text-align: center; }
}

/* ── Réservation — grilles de formulaire ──────────────────────────── */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr !important; gap: 0; }
  /* Empile date et heure : l'input time iOS a une taille intrinsèque qui
     fait déborder la grille quand on force une colonne à 110px. */
  .date-time-pair { grid-template-columns: 1fr !important; }
  /* iOS donne aux <input type="date|time"> une min-width intrinsèque qui
     dépasse la colonne 1fr et fait déborder la carte à droite. */
  .form-row > *, .date-time-pair > * { min-width: 0; }
  .date-time-pair > input { width: 100%; max-width: 100%; }
}

/* ── Menu principal — grille de cartes ────────────────────────────── */
@media (max-width: 360px) {
  .grid { grid-template-columns: 1fr !important; }
}

/* ── Calendrier — hauteur de l'iframe ─────────────────────────────── */
@media (max-width: 768px) {
  .calendar-wrapper { padding: 1rem; }
  .calendar-wrapper iframe { min-height: 450px; }
}
@media (max-width: 480px) {
  .calendar-wrapper iframe { min-height: 340px; }
}

/* ── Navigation flottante — pleine largeur sur mobile ─────────────── */
@media (max-width: 400px) {
  .nav-panel {
    left: 8px !important;
    right: 8px !important;
    min-width: unset;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Help system (dev only) — bouton "?" à droite du titre + drawer latéral
   contenant workflow + commentaires utilisateurs.
   Cf. lib/help.php
   ──────────────────────────────────────────────────────────────────── */
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-left: .65rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  padding: 0;
  transition: all .15s ease;
  vertical-align: middle;
}
.help-btn:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
}

.help-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 999;
  animation: helpBackdropIn .2s ease;
}
@keyframes helpBackdropIn { from { opacity: 0; } to { opacity: 1; } }

.help-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.help-drawer.open { transform: translateX(0); }

.help-drawer-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-muted);
}
.help-drawer-head h3 { margin: 0; font-size: 1rem; }
.help-page-ref {
  font-size: 11px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  display: block;
  margin-top: 2px;
}
.help-close {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 6px;
}
.help-close:hover { background: var(--border); color: var(--text); }

.help-drawer .help-section-title {
  font-size: 1rem;
  margin: 1rem 1.25rem 0;
  color: var(--text);
}
.help-drawer .help-block {
  padding: .75rem 1.25rem;
  border-bottom: 1px dashed var(--border);
}
.help-drawer .help-block h5 {
  margin: 0 0 .35rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.help-drawer .help-block p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }

/* Flow compact : étapes en cards avec arrow connectrice verticale */
.help-drawer .help-flow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.help-flow-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .5rem;
  position: relative;
  padding-bottom: 1.1rem;
  align-items: start;
}
.help-flow-step[data-last="1"] { padding-bottom: 0; }

/* Trait vertical reliant les numéros consécutifs */
.help-flow-step:not([data-last="1"])::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: 2px;
  width: 2px;
  background: var(--border);
  z-index: 0;
}
/* Flèche en bas du trait */
.help-flow-step:not([data-last="1"])::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -1px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--border);
  z-index: 0;
}

.help-flow-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #b22222;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.help-flow-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid #555;
  border-radius: 6px;
  padding: .4rem .55rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Couleurs par acteur (numéro + bordure gauche de la card) */
.help-flow-step.help-actor-admin   .help-flow-num { background: #1B3A57; }
.help-flow-step.help-actor-admin   .help-flow-card{ border-left-color: #1B3A57; }
.help-flow-step.help-actor-system  .help-flow-num { background: #6b7280; }
.help-flow-step.help-actor-system  .help-flow-card{ border-left-color: #6b7280; background: var(--bg-muted); }
.help-flow-step.help-actor-vsav    .help-flow-num { background: #B22222; }
.help-flow-step.help-actor-vsav    .help-flow-card{ border-left-color: #B22222; }
.help-flow-step.help-actor-tech    .help-flow-num { background: #3D478C; }
.help-flow-step.help-actor-tech    .help-flow-card{ border-left-color: #3D478C; }
.help-flow-step.help-actor-garde   .help-flow-num { background: #0F766E; }
.help-flow-step.help-actor-garde   .help-flow-card{ border-left-color: #0F766E; }
.help-flow-step.help-actor-default .help-flow-num { background: #555; }

.help-flow-actor {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: #555;
  line-height: 1.1;
}
.help-flow-step.help-actor-admin   .help-flow-actor { color: #1B3A57; }
.help-flow-step.help-actor-system  .help-flow-actor { color: #6b7280; }
.help-flow-step.help-actor-vsav    .help-flow-actor { color: #B22222; }
.help-flow-step.help-actor-tech    .help-flow-actor { color: #3D478C; }
.help-flow-step.help-actor-garde   .help-flow-actor { color: #0F766E; }

.help-flow-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
}

.help-empty {
  margin: 1rem 1.25rem;
  padding: .85rem;
  background: var(--bg-muted);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.help-empty code { background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }
.help-empty-small {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 .75rem;
}

.help-comments {
  padding: 1rem 1.25rem 1.5rem;
  background: var(--bg);
  flex: 1;
  overflow-y: auto;
}
.help-comments h5 {
  margin: 0 0 .65rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.help-comments-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.help-comments-list li {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .75rem;
}
.help-comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.help-comment-meta strong { color: var(--text); font-size: 12.5px; }
.help-comments-list p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); }

.help-comment-form {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem;
}
.help-comment-form label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: .35rem;
}
.help-comment-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .55rem;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 70px;
  background: var(--bg);
  color: var(--text);
}
.help-comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5rem;
  gap: .5rem;
  flex-wrap: wrap;
}
.help-comment-author { font-size: 12px; color: var(--text-muted); }
.help-comment-actions button {
  background: #b22222;
  color: #fff;
  border: none;
  padding: .45rem .9rem;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.help-comment-actions button:hover { background: #991b1b; }

/* Mobile : drawer plein écran */
@media (max-width: 600px) {
  .help-drawer { width: 100vw; }
}