/* ═══════════════════════════════════════════════════════════════════════
   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; }

/* iOS Safari rend les inputs date/time/month/week avec un chrome natif
   (date affichée centrée style bouton + spinners) qui impose un min-content
   nettement plus large que width:100%. Cela fait déborder le conteneur sur
   iPhone alors que tout est OK en headless WebKit. On retire ce chrome natif
   pour que ces inputs se comportent comme des inputs texte ordinaires.
   Le picker s'ouvre toujours au tap. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

@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; }
  /* Sans ce override, .content-area garde grid-column: 2 (défini pour desktop) ce
     qui force la grille à créer une 2e colonne implicite et pousse tout le contenu
     d'une ~27px vers la droite. */
  .content-area { grid-column: 1; }
  .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); }

/* ── Container "tuile" englobant onglets + contenu ───────────────────────
   Pattern unifié pour les pages à sous-onglets : tabs + panels dans un
   seul wrapper (fond bg-elevated, bordure, radius, padding). Aligné avec
   dashboard.php. Override mobile en bas du fichier. */
.content-wrapper {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
/* Les cards internes (.card / .resa-card / .vsav-card / .inv-card /
   .saisir-card / .ctrl-card) sont aplaties pour éviter le double-fond quand
   on les imbrique dans une .content-wrapper qui sert déjà de tuile. La
   structure HTML reste inchangée — c'est uniquement leur rendu visuel qui
   passe en transparent. Layout préservé (overflow, min-width). */
.content-wrapper .card,
.content-wrapper .resa-card,
.content-wrapper .vsav-card,
.content-wrapper .inv-card,
.content-wrapper .saisir-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* ── Onglets : hauteur unifiée (desktop) ─────────────────────────────────
   Chaque page (admin, dashboard, vsav, organisation, …) définit son propre
   .tab-btn / .tab-button / .vsav-tab avec des paddings hétérogènes (de
   .65rem à .75rem en vertical → 40-42px de haut). On force une hauteur
   homogène un peu plus compacte (~34px) sur tous les onglets, en desktop.
   Les overrides mobile (.55rem) gardent la main grâce au media query. */
@media (min-width: 768px) {
  .tabs .tab-btn,
  .tabs .tab-button,
  .vsav-tabs .vsav-tab {
    padding: var(--s-2) var(--s-4) !important;
    min-height: 34px;
    font-size: var(--fs-sm);
  }
}


/* ═══ 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; }
}