:root {
  --app-bg: #f4f6f8;
  --app-surface: #ffffff;
  --app-surface-muted: #f8fafc;
  --app-border: #d8dee6;
  --app-text: #17212b;
  --app-muted: #637083;
  --app-primary: #14786f;
  --app-primary-dark: #0f5f58;
  --app-accent: #c98523;
  --app-danger: #b42318;
  --app-shadow: 0 14px 34px rgba(23, 33, 43, 0.08);
}

html {
  font-size: 14px;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(180deg, #eef3f2 0, rgba(244, 246, 248, 0) 240px),
    var(--app-bg);
  color: var(--app-text);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

a {
  color: var(--app-primary);
}

a:hover {
  color: var(--app-primary-dark);
}

.app-navbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: blur(10px);
}

/* ── Lien actif dans la navbar principale ───────── */
.app-navbar .nav-link.nav-active {
  color: var(--app-primary, #14786f) !important;
  font-weight: 600;
  position: relative;
}
.app-navbar .nav-link.nav-active::after {
  content: '';
  position: absolute;
  bottom: -1px;          /* colle au border-bottom de la navbar */
  left: .5rem;
  right: .5rem;
  height: 2px;
  background: var(--app-primary, #14786f);
  border-radius: 2px 2px 0 0;
}

.navbar-brand {
  font-weight: 700;
  color: var(--app-text);
  letter-spacing: 0;
}

.app-navbar .navbar-toggler {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #fff;
  color: var(--app-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.app-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(20, 120, 111, .18);
}

.app-navbar .navbar-toggler-icon {
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2823, 33, 43, 0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.brand-mark {
  display: inline-grid;
  width: 34px;
  height: 34px;
  margin-right: 0.55rem;
  place-items: center;
  border-radius: 8px;
  background: var(--app-primary);
  color: #fff;
  font-weight: 800;
}

.nav-link {
  border-radius: 8px;
  font-weight: 600;
}

.nav-link:hover,
.nav-link:focus {
  background: #eef6f5;
}

.app-main {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.app-page {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: var(--app-shadow);
}

.app-page-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.35rem;
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(180deg, #fff 0, var(--app-surface-muted) 100%);
  border-radius: 8px 8px 0 0;
}

.app-page-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 750;
}

.app-page-subtitle {
  margin: 0.3rem 0 0;
  color: var(--app-muted);
}

.app-page-body {
  padding: 1.35rem;
}

.app-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.8rem;
}

.stat-card {
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.stat-label {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.85rem;
  font-weight: 650;
  text-transform: uppercase;
}

.stat-value {
  margin: 0.35rem 0 0;
  font-size: 1.25rem;
  font-weight: 750;
}

.table {
  margin-bottom: 0;
}

.table thead th {
  color: var(--app-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  background: var(--app-surface-muted);
  border-bottom: 1px solid var(--app-border);
}

.table td,
.table th {
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  padding: 0.85rem 0.9rem;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.form-control,
.form-select {
  border-color: var(--app-border);
  border-radius: 8px;
}

.form-label {
  font-weight: 650;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.22rem rgba(20, 120, 111, 0.16);
}

.btn {
  border-radius: 8px;
  font-weight: 650;
}

/* Un bouton groupé garde le rayon de l'application à ses extrémités.
   Bootstrap pose le sien — plus petit — via `.btn-group-sm > .btn`, à spécificité égale mais
   déclaré avant : les bouts du groupe paraissaient plus carrés que les boutons voisins, et
   deux rangées côte à côte ne s'alignaient plus. Les jointures internes restent droites,
   c'est ce qui fait lire le groupe comme un seul objet. */
.btn-group > .btn,
.btn-group-sm > .btn {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.btn-group > .btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

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

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

.btn-outline-primary {
  color: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-outline-danger {
  color: var(--app-danger);
  border-color: #e6b8b4;
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: #eef6f5;
  color: var(--app-primary-dark);
  font-weight: 700;
}

.badge-warning-soft {
  background: #fff3dd;
  color: #7a4a08;
}

.empty-state {
  padding: 2rem;
  color: var(--app-muted);
  text-align: center;
}

.auth-panel {
  max-width: 480px;
  margin: 2rem auto;
}

.footer {
  padding: 1.2rem 0;
  color: var(--app-muted);
}

@media (max-width: 767px) {
  .app-page-header {
    display: block;
  }

  .app-toolbar {
    justify-content: flex-start;
    margin-top: 1rem;
  }

  .table-actions {
    justify-content: flex-start;
  }
}

/* ===== DASHBOARD ===== */
.dash-greeting {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--app-text);
}
.dash-date {
  font-size: .85rem;
  color: var(--app-muted);
  margin-top: .15rem;
}

/* Bascule entre les deux pages d'accueil (medecins / personnel). Visible seulement
   pour qui a droit aux deux — l'administrateur, notamment, chez qui le tableau
   medecin l'emporte et masquerait l'autre a jamais. */
.tdb-bascule {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .2rem;
  border-radius: 999px;
  background: var(--app-surface-muted);
  box-shadow: inset 0 0 0 1px var(--app-border);
}
.tdb-bascule > * {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  color: var(--app-muted);
  transition: background .15s, color .15s;
}
.tdb-bascule > a:hover {
  background: rgba(20, 120, 111, .08);
  color: var(--app-primary-dark);
}
.tdb-bascule > .tdb-actif {
  background: var(--app-surface);
  color: var(--app-text);
  cursor: default;
  box-shadow: 0 1px 3px rgba(23, 33, 43, .12);
}

/* KPI cards */
.kpi-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: box-shadow .18s, transform .18s;
  box-shadow: 0 0 0 1px rgba(0,0,0,.055), 0 4px 16px rgba(0,0,0,.07);
}
.kpi-card:hover {
  box-shadow: 0 0 0 1px rgba(0,0,0,.055), 0 10px 28px rgba(0,0,0,.11);
  transform: translateY(-2px);
}
.kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.kpi-body {}
.kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--app-text);
}
.kpi-label {
  font-size: .78rem;
  color: var(--app-muted);
  margin-top: .2rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kpi-trend {
  font-size: .75rem;
  font-weight: 600;
  margin-top: .3rem;
}
.kpi-trend.up   { color: #198754; }
.kpi-trend.flat { color: var(--app-muted); }

/* Section cards */
.dash-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.055), 0 4px 16px rgba(0,0,0,.07);
}
.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
  background: #f8fafc;
}
.dash-card-title {
  font-weight: 700;
  font-size: .9rem;
  color: var(--app-text);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.dash-card-body { padding: 1rem 1.25rem; }

/* Availability bars */
.avail-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.avail-row:last-child { border-bottom: none; }
.avail-name { flex: 1; font-size: .85rem; font-weight: 500; }
.avail-bar-wrap {
  flex: 0 0 120px;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}
.avail-bar { height: 100%; border-radius: 4px; background: var(--app-primary); }
.avail-count { font-size: .78rem; color: var(--app-muted); min-width: 42px; text-align: right; }

/* Quick actions */
.quick-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.3rem 1.2rem;
  text-align: center;
  text-decoration: none;
  color: var(--app-text);
  transition: box-shadow .18s, transform .18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 0 0 1px rgba(0,0,0,.055), 0 2px 8px rgba(0,0,0,.06);
}
.quick-card:hover {
  box-shadow: 0 0 0 1.5px var(--app-primary), 0 8px 24px rgba(0,0,0,.10);
  transform: translateY(-2px);
  color: var(--app-primary);
}
.quick-card i { font-size: 1.8rem; }
.quick-card span { font-size: .82rem; font-weight: 600; }

/* Periode badge */
.badge-matin { background: #fff3cd; color: #856404; }
.badge-midi  { background: #fff0e0; color: #8a4700; }
.badge-soir  { background: #e8e0ff; color: #4a1fb8; }

/* ===== PLANNING GRILLE ===================================================== */

/* ── En-tête de centre ─────────────────────────────────────────────────── */
.planning-centre-block {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  border: 1px solid #e3e8ef;
}
.planning-centre-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #eaf0f7 0%, #f0f4fa 100%);
  border-bottom: 1px solid #d0dae8;
  padding: 7px 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.planning-centre-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.planning-centre-title {
  margin: 0;
  color: #2c3e56;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.planning-centre-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.planning-stat {
  display: inline-flex;
  align-items: center;
  font-size: .73rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 30px;
}
.planning-stat--dispo  { background: #d1fae5; color: #065f46; }
.planning-stat--full   { background: #fee2e2; color: #991b1b; }
.planning-stat--salles { background: rgba(44,62,86,.1); color: #3d4f63; }

/* Orange : ce qui reste à faire, sans être une erreur. Le vert disait « des créneaux sont
   libres », ce qui se lisait comme une bonne nouvelle alors que c'est précisément le travail
   qui reste — et « Complet », l'objectif atteint, était en rouge. */
.planning-stat--manque { background: #fef3c7; color: #92400e; }

/* collapse btn */
.collapse-centre-btn {
  background: rgba(44,62,86,.07);
  border: 1px solid rgba(44,62,86,.18);
  border-radius: 5px;
  color: #3d4f63;
  padding: 2px 6px;
  font-size: .75rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s;
}
.collapse-centre-btn:hover { background: rgba(44,62,86,.14); }

/* ── Corps (table) ──────────────────────────────────────────────────────── */
.planning-centre-body { background: #fff; }

.planning-table {
  font-size: .8rem;
  margin-bottom: 0;
}

/* ── En-têtes table ─────────────────────────────────────────────────────── */
.planning-thead-days th {
  border-color: rgba(61,79,99,.15) !important;
}
.planning-thead-periods th {
  border-color: #cdd6e0 !important;
}
/* Ligne 1 — jours */
.planning-thead-days {
  background: #e8edf5;
  color: #3d4f63;
}
.planning-th-day {
  font-size: .67rem;
  letter-spacing: .03em;
  font-weight: 600;
  min-width: 70px;
  white-space: nowrap;
}
.planning-th-day--today   { background: #c5e6e2 !important; color: var(--app-primary, #14786f) !important; }
.planning-th-day--weekend { background: #eff0f4 !important; color: #94a3b8 !important; }

/* Ligne 2 — périodes (fond très clair, texte doux) */
.planning-thead-periods   { background: #f5f7fa; }
.planning-th-salle  {
  background: #e8edf5;
  color: #2c3e56;
  min-width: 110px;
  vertical-align: middle;
  border-color: rgba(61,79,99,.15) !important;
}
.planning-th-periode {
  min-width: 75px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .025em;
  white-space: nowrap;
  color: #5a6a82;
}
.planning-th-periode--today   { background: #e2f2f0 !important; color: var(--app-primary, #14786f) !important; }
.planning-th-periode--weekend { background: #f4f1ec !important; color: #adb5bd !important; }

/* Normalise la casse des labels de période (données en MAJUSCULE en base) */
.periode-label-txt {
  display: inline;
  text-transform: lowercase;
}
.periode-label-txt::first-letter {
  text-transform: uppercase;
}

/* ── Lignes ─────────────────────────────────────────────────────────────── */
/* --spe porte la couleur de la spécialité de la salle, posée par la vue depuis la
   configuration. Absente, les replis ramènent exactement l'ancien gris : une salle sans
   spécialité réglée doit rester telle qu'elle était, pas devenir un trou dans la grille.
   La teinte est tenue très basse — 7 % — parce qu'elle court sur toute une colonne : ce qui
   passe sur un badge devient criard sur vingt lignes. */
.planning-td-salle {
  font-size: .78rem;
  white-space: nowrap;
  border-left: 3px solid transparent;
  border-left-color: var(--spe, transparent);
  border-right: 2px solid #c0c8d0 !important;
  padding: 5px 10px !important;
}

/* Le fond passe par la ligne, et ce n'est pas un caprice : Bootstrap peint chaque cellule
   d'un .table avec « .table > :not(caption) > * > * », qui l'emporte sur une simple classe.
   Le gris posé ici depuis le début ne s'appliquait donc pas — en nommant aussi la ligne, on
   repasse devant sans avoir à sortir un !important. */
.planning-salle-row > .planning-td-salle {
  background: #f8f9fa;
  background: color-mix(in srgb, var(--spe, #c0c8d0) 7%, #fff);
}

.planning-salle-nom {
  display: block;
  font-weight: 700;
  color: var(--app-text);
}

/* Le libellé reprend la teinte, assombri pour rester lisible : l'ambre configuré passe bien
   en liseré et mal en texte de 11 px sur blanc. */
.planning-salle-spe {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-top: 1px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--app-muted);
  color: color-mix(in srgb, var(--spe, #637083) 72%, #111827);
}
.planning-cell {
  min-width: 75px;
  padding: 4px 5px !important;
  vertical-align: middle;
}
/* Disponible : vert vif "brillant" */
.planning-cell-free {
  background: #d1fae5;
  box-shadow: inset 0 0 0 1px #6ee7b7;
}
.planning-cell-today-free {
  background: #a7f3d0;
  box-shadow: inset 0 0 0 1.5px #34d399;
}
/* Cellules réservées : espace extra en haut pour le badge télé-radiologie */
.planning-cell-taken        { background: #faf5ff; padding-top: 12px !important; }
.planning-cell-mine         { background: #eff6ff; padding-top: 12px !important; }
.planning-cell-demande      { background: #fffbeb; padding-top: 12px !important; }
.planning-cell-demande-mine { background: #fef3c7; padding-top: 12px !important; }
.planning-cell-blocked      { background: #fff7ed; padding-top: 12px !important; box-shadow: inset 0 0 0 1px #fed7aa; }
.planning-cell-weekend { background: #f4f2ee; opacity: .85; box-shadow: none; }
/* Jour d'un mois pas encore publié : hachuré, pour qu'il ne se confonde ni avec un créneau
   libre (vert) ni avec un week-end. Rien n'y est cliquable. */
.planning-cell-ferme, .tb-cell-ferme {
  background: repeating-linear-gradient(135deg,
              #f1f5f9 0, #f1f5f9 6px, #e7edf3 6px, #e7edf3 12px);
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Bloc réservation dans la grille ────────────────────────────────────── */
.planning-res-block {
  position: relative;      /* ancre le badge absolu */
  overflow: visible;       /* laisse le badge dépasser */
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  border-radius: 5px;
  padding: 4px 7px;
  background: #e5e7eb;
  color: #374151;
  border-left: 3px solid #9ca3af;
  font-size: .74rem;
  font-weight: 600;
  min-height: 26px;
  box-sizing: border-box;
}
.planning-res-block--mine {
  background: #bfdbfe;
  color: #1e3a8a;
  border-left-color: #2563eb;
}
.planning-res-block--demande {
  background: #fde68a;
  color: #78350f;
  border-left-color: #f59e0b;
  border-left-style: dashed;
}
.planning-res-block--blocked {
  background: #ffedd5;
  color: #7c2d12;
  border-left-color: #f97316;
}
.planning-blocked-badge {
  flex-shrink: 0;
  margin-right: 3px;
  color: #ea580c;
  font-size: .78rem;
}
/* Médecin réservé mais en congé validé ce jour — conflit */
.planning-res-block--absent {
  background: #fee2e2;
  color: #991b1b;
  border-left-color: #dc2626;
}
.planning-res-block--absent .planning-res-name { text-decoration: line-through; text-decoration-color: rgba(153,27,27,.6); }
.planning-absent-badge {
  position: absolute;
  top: -9px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  box-shadow: 0 2px 5px rgba(220,38,38,.5);
  border: 2px solid #fff;
  z-index: 3;
}
.planning-demande-badge {
  position: absolute;
  top: -9px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  box-shadow: 0 2px 5px rgba(245,158,11,.5);
  border: 2px solid #fff;
  z-index: 3;
}
.planning-res-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Badge télé-radiologie coin supérieur gauche (icône statique) ─────────── */
.planning-teletravail-icon,
.tb-teletravail-icon {
  position: absolute;
  top: -9px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0891b2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-style: normal;      /* pour <i> */
  box-shadow: 0 2px 6px rgba(8,145,178,.45);
  border: 2px solid #fff;
  z-index: 3;
  pointer-events: none;
}

/* ── Bouton bascule présence (cliquable pour les éditeurs) ─────────────── */
/* État Présentiel : icône imbriquée dans le flex, discrète */
.presence-toggle-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0 2px;
  font-size: .75rem;
  cursor: pointer;
  opacity: .45;
  transition: opacity .15s, transform .15s, box-shadow .15s;
  line-height: 1;
  color: inherit;
}
.presence-toggle-btn:hover { opacity: 1; }

/* État Télé-radiologie : devient badge absolu, hors du flux flex */
.presence-toggle-btn.is-teletravail {
  position: absolute;
  top: -9px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0891b2;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  padding: 0;
  opacity: 1;
  box-shadow: 0 2px 6px rgba(8,145,178,.45);
  border: 2px solid #fff;
  z-index: 3;
}
.presence-toggle-btn.is-teletravail:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 10px rgba(8,145,178,.7);
  opacity: 1;
}

/* ── Bouton poubelle dans la grille ────────────────────────────────────── */
.planning-del-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0 0 0 3px;
  font-size: .72rem;
  color: inherit;
  opacity: .4;
  cursor: pointer;
  transition: opacity .15s, color .15s;
  line-height: 1;
}
.planning-del-btn:hover { opacity: 1; color: #dc3545; }

/* ── Bouton + (créer) ───────────────────────────────────────────────────── */
.planning-add-btn {
  padding: 1px 5px;
  font-size: .82rem;
  opacity: .4;
  transition: opacity .15s;
  color: var(--app-primary, #14786f);
  text-decoration: none;
  display: inline-block;
}
.planning-add-btn:hover { opacity: 1; }

/* ── Légende points ─────────────────────────────────────────────────────── */
.planning-legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.planning-legend-dot--mine  { background: #bfdbfe; border: 2px solid #2563eb; }
.planning-legend-dot--other { background: #e5e7eb; border: 2px solid #9ca3af; }

/* ── Types de personne : la couleur suit la PERSONNE, pas le créneau ────────
   Le créneau appartient déjà à la spécialité de la salle ; deux codes couleur sur le même
   rectangle ne se lisent plus. Le type se porte donc sur le nom et sur un filet vertical,
   partout de la même façon — grille par salle, par personne, mois, et écran de saisie.

   Tout passe par --pp-type, posé en style en ligne depuis la base. Sans valeur, chaque règle
   retombe sur la couleur d'avant : un type sans couleur n'abîme rien. */
.pp-nom-type {
  color: #1e3a5f;                                     /* repli : les navigateurs sans color-mix */
  color: color-mix(in srgb, var(--pp-type, #1e3a5f) 72%, #0b1220);
  font-weight: 600;
}
.pp-filet-type {
  display: inline-block; width: 3px; border-radius: 2px; flex: none;
  align-self: stretch; min-height: 14px;
  background: var(--pp-type, #93c5fd);
}

/* La légende, montée depuis la table : voir _LegendeTypes.cshtml. */
.pp-legende-types { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pp-legende-type  { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pp-legende-puce {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #94a3b8; flex-shrink: 0;
}

.btn-xs { padding: 1px 6px; font-size: .7rem; line-height: 1.4; }

/* ── Toggle Présence/Télé-radiologie (formulaire de réservation) ────────────── */
.presence-toggle {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dee2e6;
  width: fit-content;
}
.presence-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  cursor: pointer;
  font-weight: 500;
  font-size: .88rem;
  background: #f8f9fa;
  color: #6c757d;
  transition: background .15s, color .15s;
  border: none;
  user-select: none;
}
.presence-option:first-child { border-right: 1px solid #dee2e6; }
.presence-option.active {
  background: var(--app-primary, #14786f);
  color: #fff;
}
.presence-radio { display: none; }

.planning-calendar-page {
  padding: 1.15rem;
}

.planning-calendar-topbar {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.planning-view-tabs {
  border-bottom-color: var(--app-border);
}

.planning-view-tabs .nav-link {
  color: var(--app-muted);
  border-radius: 8px 8px 0 0;
}

.planning-view-tabs .nav-link.active {
  color: var(--app-primary-dark);
  background: #fff;
  border-color: var(--app-border) var(--app-border) #fff;
}

.planning-calendar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: .85rem 1rem;
  background: #fbfcfd;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.planning-centre-filter {
  min-width: 240px;
}

.planning-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .75rem;
  align-items: flex-end;
}

.planning-filter-bar--calendar {
  margin-bottom: 0;
}

.planning-filter-field {
  flex: 0 1 220px;
  min-width: 180px;
}

.planning-filter-field--perimetre {
  flex-basis: 240px;
}

.planning-filter-field--centre {
  flex-basis: 280px;
}

.planning-filter-field--salle {
  flex-basis: 210px;
}

/* Deux pastilles : le bloc ne prend que ce qu'il lui faut, pour que « Réinitialiser » tienne
   sur la même ligne au lieu de sauter à la suivante. */
.planning-filter-field--types {
  flex: 0 0 auto;
  min-width: 0;
}

.pp-pastilles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  /* La hauteur d'un .form-select-sm, pour que la barre reste alignée par le bas. */
  min-height: calc(1.5em + .5rem + 2px);
}

/* Éteinte : creuse et grise. Allumée : teintée de la couleur du thème, avec sa coche.
   Même bordure et même rayon que .form-control — 8 px et --app-border — pour que la pastille
   se lise comme un contrôle de la barre et non comme un badge posé dessus. Un fond plein
   aurait crié plus fort que les listes déroulantes voisines, alors que les deux pastilles
   sont allumées par défaut : c'est l'état normal, pas une alerte. */
.pp-pastille {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: .25rem .7rem;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-muted);
  font-size: .875rem;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.pp-pastille:hover {
  color: var(--app-text);
}

.pp-pastille-coche {
  font-size: .95em;
  /* Réservée dès l'extinction : sans cela la pastille changerait de largeur à chaque clic,
     et les voisines sauteraient avec elle. */
  opacity: 0;
  transition: opacity .12s ease;
}

/* La teinte suit --app-primary, donc la couleur choisie dans la configuration du thème :
   écrite en dur, elle aurait juré le jour où le client change de couleur. La première
   déclaration sert de repli aux navigateurs sans color-mix.

   La bordure, elle, ne change pas : elle reste celle de tous les champs de la barre. Teindre
   aussi le contour donnait à la pastille allumée un cadre que le champ voisin n'a pas, et
   c'est précisément ce qui la faisait sortir du rang. L'état se lit au fond, au texte et à
   la coche — trois signaux, c'est déjà un de plus qu'il n'en faut. */
.btn-check:checked + .pp-pastille {
  background: var(--app-surface-muted);
  background: color-mix(in srgb, var(--app-primary) 12%, #fff);
  color: var(--app-primary);
}

.btn-check:checked + .pp-pastille .pp-pastille-coche {
  opacity: 1;
}

/* Quand la pastille désigne un type de personne, c'est SA couleur qui s'allume, et non celle
   du thème : c'est la même que sur les créneaux, et c'est ce qui relie le filtre à la grille.
   Les pastilles qui ne portent pas de type gardent la teinte du thème, au-dessus. */
.btn-check:checked + .pp-pastille[style*="--pp-type"] {
  background: color-mix(in srgb, var(--pp-type) 14%, #fff);
  color: color-mix(in srgb, var(--pp-type) 72%, #0b1220);
}

.btn-check:focus-visible + .pp-pastille {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}

/* Le champ de recherche est dans un .input-group, et Bootstrap y remet son propre rayon :
   il tombait à 3 px quand tous ses voisins sont à 8. On lui rend les coins de la maison —
   seulement les extérieurs, les deux bords qui se touchent devant rester droits. */
.planning-filter-field .input-group > .form-control:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.planning-filter-field .input-group > .btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* La ligne qui suit la barre : ce qui parle des filtres sans en être un. Alignée à droite,
   elle ne prend aucune place tant qu'il n'y a rien à réinitialiser. */
.planning-filter-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem .75rem;
}

.planning-filter-reset {
  color: var(--app-muted);
  font-size: .8125rem;
  text-decoration: none;
}

.planning-filter-reset:hover {
  color: var(--app-primary);
  text-decoration: underline;
}

.planning-filter-action {
  flex: 0 0 auto;
}

.planning-filter-field .form-label {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

.planning-filter-field .select2-container {
  width: 100% !important;
  min-width: 0;
}

.planning-filter-field .select2-container--bootstrap-5 .select2-selection--single,
.select2-selection--planning-filter {
  min-height: 31px;
  border-radius: 8px;
  font-size: .875rem;
}

.planning-filter-field .select2-container--bootstrap-5 .select2-selection--single {
  display: flex;
  align-items: center;
  padding: .25rem 2rem .25rem .55rem;
}

.planning-filter-field .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  color: #334155;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-filter-field .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  top: 1px;
  right: .45rem;
  height: 29px;
}

.select2-dropdown--planning-filter {
  border-color: var(--app-border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  overflow: hidden;
}

.select2-dropdown--planning-filter .select2-search--dropdown {
  padding: .45rem;
}

.select2-dropdown--planning-filter .select2-search__field {
  min-height: 32px;
  border-color: var(--app-border);
  border-radius: 6px;
  font-size: .875rem;
}

.select2-dropdown--planning-filter .select2-results__option {
  padding: .42rem .65rem;
  font-size: .84rem;
  line-height: 1.25;
}

.select2-dropdown--planning-filter .select2-results__option--highlighted {
  background: rgba(20, 120, 111, .12);
  color: var(--app-primary-dark);
}

.planning-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
  color: var(--app-muted);
  font-size: .84rem;
  font-weight: 650;
}

.planning-legend-item {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  white-space: nowrap;
}

.planning-legend-dot {
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.planning-legend-dot-current { background: var(--app-primary); }
.planning-legend-dot-other   { background: #64748b; }


.planning-calendar-frame {
  min-height: 680px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

#calendar {
  min-width: 860px;
  padding: .85rem;
  transition: opacity .15s ease;
}

#calendar.is-loading {
  opacity: .58;
}

.planning-calendar-frame .fc {
  --fc-border-color: #dde5ed;
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: #f0f4ff;
  --fc-today-bg-color: #eff6ff;
  --fc-now-indicator-color: #dc2626;
  color: var(--app-text);
}

.planning-calendar-frame .fc .fc-toolbar.fc-header-toolbar {
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}

.planning-calendar-frame .fc .fc-toolbar-title {
  color: var(--app-text);
  font-size: 1.08rem;
  font-weight: 750;
}

.planning-calendar-frame .fc .fc-button {
  min-height: 2.15rem;
  padding: .35rem .7rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

.planning-calendar-frame .fc .fc-button-primary {
  color: var(--app-text);
  background: #fff;
  border-color: var(--app-border);
  box-shadow: none;
}

.planning-calendar-frame .fc .fc-button-primary:hover,
.planning-calendar-frame .fc .fc-button-primary:focus {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.planning-calendar-frame .fc .fc-button-primary:not(:disabled).fc-button-active,
.planning-calendar-frame .fc .fc-button-primary:not(:disabled):active {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
}

.planning-calendar-frame .fc .fc-col-header-cell {
  background: #f8fafc;
}

.planning-calendar-frame .fc .fc-col-header-cell-cushion {
  display: block;
  padding: .7rem .35rem;
  color: var(--app-text);
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
  text-transform: capitalize;
}

.planning-calendar-frame .fc .fc-timegrid-slot {
  height: 3.55rem;
}

.planning-calendar-frame .fc .fc-timegrid-slot-label-cushion,
.planning-calendar-frame .fc .fc-timegrid-axis-cushion {
  color: var(--app-muted);
  font-size: .76rem;
  font-weight: 650;
}

.planning-calendar-frame .fc .fc-timegrid-now-indicator-line {
  border-width: 2px 0 0;
}

.planning-calendar-frame .fc .fc-event {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  overflow: hidden;
}

.planning-calendar-frame .fc .fc-event-main {
  color: inherit;
}

/* ── Couleur unique — thème de l'application ────────────────────────────── */
.planning-calendar-frame .fc .planning-calendar-event {
  background: #bfdbfe;
  color: #1e3a8a;
  border-left: 3px solid #2563eb;
}

/* ── Contenu de l'événement ─────────────────────────────────────────────── */
.planning-event-content {
  min-height: 100%;
  padding: .28rem .38rem;
}

.planning-event-head {
  display: flex;
  gap: .28rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  min-width: 0;
}

.planning-event-room {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  font-size: .71rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-event-period {
  flex: 0 0 auto;
  padding: .05rem .28rem;
  color: #1e3a8a;
  font-size: .59rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  background: rgba(37,99,235,.15);
  border-radius: 999px;
  overflow: hidden;
  max-width: 4.2rem;
  text-overflow: ellipsis;
}
.planning-event-tele {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(37,99,235,.18);
  border-radius: 50%;
  border: 1px solid rgba(37,99,235,.35);
  font-size: .56rem;
  color: #1e3a8a;
}

.planning-event-doctor {
  min-width: 0;
  margin-top: .15rem;
  overflow: hidden;
  font-size: .71rem;
  font-weight: 600;
  line-height: 1.2;
  opacity: .92;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .planning-filter-field {
    flex: 1 1 calc(50% - .75rem);
    min-width: 220px;
  }

  .planning-filter-action {
    align-self: flex-end;
  }
}

@media (max-width: 767px) {
  .planning-calendar-page {
    padding: .9rem;
  }

  .planning-calendar-controls {
    display: flex;
  }

  .planning-calendar-legend {
    margin-top: .85rem;
  }

  .planning-centre-filter {
    min-width: 0;
  }

  #calendar {
    min-width: 780px;
  }
}

@media (max-width: 575px) {
  .planning-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
  }

  .planning-filter-field,
  .planning-filter-action {
    width: 100%;
    min-width: 0;
  }

  .planning-filter-action .btn {
    width: 100%;
  }

  .planning-filter-field .select2-container--bootstrap-5 .select2-selection--single {
    min-height: 34px;
  }

  .select2-dropdown--planning-filter {
    max-width: calc(100vw - 1.5rem);
  }
}

/* ===== PERMISSION CARDS ===== */
.perm-card {
  border: 1px solid var(--app-border);
  border-radius: .6rem;
  overflow: hidden;
  transition: box-shadow .15s;
}
.perm-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.perm-card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1rem;
  background: var(--app-surface-muted);
  border-bottom: 1px solid var(--app-border);
}
.perm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.perm-card-title {
  font-weight: 600;
  font-size: .9rem;
  color: var(--app-text);
}
.perm-btn {
  font-size: .78rem;
  padding: .25rem .75rem;
  font-weight: 500;
  transition: all .15s;
}

/* ===== PERMISSION MATRIX ===== */
.permission-section {
  margin-bottom: 1.5rem;
}

.permission-section-header {
  margin-bottom: .85rem;
}

.permission-section-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.permission-section-header p {
  margin: .25rem 0 0;
  color: var(--app-muted);
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .9rem;
}

/* Les cartes s'alignent ligne par ligne : titre et description occupent une hauteur
   fixe, et les boutons sont poussés en bas. Sans cela, chaque carte plaçait ses
   boutons à la hauteur que lui donnait la longueur de son texte, et la grille se
   lisait en escalier. Le texte coupé reste entier au survol. */
.permission-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  overflow: hidden;
}

.permission-card-header {
  display: flex;
  flex: 0 0 auto;
  gap: .8rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: .9rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--app-border);
}

/* Le bloc de gauche ne doit pas déborder sur la pastille de droite. */
.permission-card-header > div {
  min-width: 0;
}

.permission-card-header h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(2 * 1.3em);
  /* Plus de pastille technique à côté : le libellé dispose de toute la largeur. */
  padding-right: 0;
  margin: 0;
  overflow: hidden;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.3;
}

.permission-card-header p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  min-height: calc(3 * 1.35em);
  margin: .25rem 0 0;
  overflow: hidden;
  color: var(--app-muted);
  font-size: .78rem;
  line-height: 1.35;
}

.permission-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: .55rem;
  padding: .9rem 1rem 1rem;
}

.permission-toggle {
  display: inline-flex;
  gap: .42rem;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: .45rem .55rem;
  color: var(--app-muted);
  font-size: .8rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.permission-toggle:hover {
  color: var(--app-text);
  border-color: #b8c5d3;
  box-shadow: 0 4px 12px rgba(23, 33, 43, .08);
}

/* Icône ⓘ : indice visuel que le bouton a une explication au survol */
.permission-info { font-size: .72rem; opacity: .45; }
.permission-toggle:hover .permission-info { opacity: .85; }
.btn-check:checked + .permission-toggle .permission-info { opacity: .8; }

.btn-check:checked + .permission-toggle {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 7px 18px rgba(23, 33, 43, .14);
}

.btn-check:checked + .permission-toggle.permission-read {
  background: #2563eb;
}

.btn-check:checked + .permission-toggle.permission-create {
  background: #16835f;
}

.btn-check:checked + .permission-toggle.permission-update {
  background: #b7791f;
}

.btn-check:checked + .permission-toggle.permission-delete {
  background: #b42318;
}

.btn-check:checked + .permission-toggle.permission-default {
  background: var(--app-primary);
}

/* ===== MAP ===== */
.planning-map-page {
  padding: 1.15rem;
}

.planning-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
}

.planning-map-frame {
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

#centresMap {
  width: 100%;
  height: 620px;
}

.planning-map-list {
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.planning-map-list-title {
  margin: 0 0 .85rem;
  font-size: .95rem;
  font-weight: 800;
}

.planning-map-centres {
  display: grid;
  gap: .65rem;
}

.planning-map-centre {
  display: grid;
  width: 100%;
  gap: .15rem;
  padding: .75rem .8rem;
  text-align: left;
  background: #f8fafc;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.planning-map-centre:hover,
.planning-map-centre:focus {
  border-color: var(--app-primary);
  box-shadow: 0 5px 15px rgba(23, 33, 43, .08);
}

.planning-map-centre-name {
  font-weight: 800;
}

.planning-map-centre-meta {
  color: var(--app-muted);
  font-size: .78rem;
}

.planning-map-centre-status {
  justify-self: start;
  margin-top: .25rem;
  padding: .12rem .45rem;
  color: var(--app-primary-dark);
  font-size: .68rem;
  font-weight: 800;
  background: #eef6f5;
  border-radius: 999px;
}

@media (max-width: 991px) {
  .planning-map-layout {
    grid-template-columns: 1fr;
  }

  .planning-map-frame,
  #centresMap {
    min-height: 520px;
    height: 520px;
  }
}

/* ===== CENTRES — MAP TAB ===== */
.centres-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  height: 580px;
  overflow: hidden;
}

.centres-map-frame {
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--app-border);
}

#centresMapMain {
  width: 100%;
  height: 100%;
}

.centres-map-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

.centres-map-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  font-size: .9rem;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-muted);
}

.centres-map-list {
  flex: 1;
  overflow-y: auto;
}

.centres-map-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  width: 100%;
  gap: .1rem .5rem;
  padding: .7rem 1rem;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f0f3f7;
  cursor: pointer;
  transition: background .12s;
}

.centres-map-item:hover {
  background: #f0f4ff;
}

.centres-map-item-no-coord {
  opacity: .65;
  cursor: default;
}

.centres-map-item-name {
  grid-column: 1;
  font-size: .87rem;
  font-weight: 700;
  color: var(--app-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.centres-map-item-meta {
  grid-column: 1;
  font-size: .75rem;
  color: var(--app-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.centres-map-item-badge {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: .12rem .45rem;
  color: #1d4ed8;
  font-size: .68rem;
  font-weight: 700;
  background: #eff6ff;
  border-radius: 999px;
  white-space: nowrap;
}

.centres-map-item-coord {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  font-size: .78rem;
  text-align: right;
}

@media (max-width: 991px) {
  .centres-map-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 400px auto;
    height: auto;
  }

  .centres-map-frame {
    border-right: 0;
    border-bottom: 1px solid var(--app-border);
  }

  .centres-map-sidebar {
    max-height: 280px;
  }
}

/* ===== CENTRES — GEOCODING AUTOCOMPLETE ===== */
.geocode-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #fff;
  border: 1px solid var(--app-border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(23, 33, 43, .12);
  max-height: 280px;
  overflow-y: auto;
  display: none;
}

.geocode-suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  width: 100%;
  padding: .6rem .85rem;
  font-size: .83rem;
  text-align: left;
  color: var(--app-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f0f3f7;
  cursor: pointer;
  transition: background .1s;
}

.geocode-suggestion-item:last-child {
  border-bottom: 0;
}

.geocode-suggestion-item:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.geocode-suggestion-item span {
  line-height: 1.35;
}

/* ===== CENTRES — MINI MAP PREVIEW ===== */
.centre-mini-map {
  height: 220px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  overflow: hidden;
}

/* La carte de la fiche centre occupe la colonne de droite : elle grandit avec
   l'ecran plutot que de laisser du blanc de chaque cote du formulaire. */
.centre-mini-map-grande { height: 360px; }

@media (min-width: 1400px) {
  .centre-mini-map-grande { height: 460px; }
}

/* Le panneau colle en haut au defilement : sur un formulaire long, la carte
   reste visible pendant qu'on saisit l'adresse. */
@media (min-width: 992px) {
  .centre-carte-panneau { position: sticky; top: 1rem; }
}

/* Salles et responsables en grille : une liste d'une ligne par nom, etiree sur
   toute la largeur d'un grand ecran, serait moins lisible que le vide qu'elle
   remplace. Chaque entree devient une carte, et le nombre de colonnes suit
   l'ecran. */
.centre-grille-cartes {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

.centre-grille-cartes > li {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: .6rem .75rem;
  background: var(--bs-body-bg, #fff);
}

@media (min-width: 992px)  { .centre-grille-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1600px) { .centre-grille-cartes { grid-template-columns: repeat(3, 1fr); } }

.centre-carte-vide {
  border: 1px dashed var(--app-border);
  border-radius: 8px;
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--bs-secondary-color, #6c757d);
  background: var(--bs-tertiary-bg, #f8f9fa);
}

/* ===== LOGO RESPONSIVE ===== */
.app-logo-img {
  display: block;
  max-height: 40px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 576px) {
  .app-logo-img {
    max-height: 32px;
    max-width: 110px;
  }
}

/* ===== THEME CONFIG — PRESETS ===== */
.theme-preset-card {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: #fff;
  border: 2px solid var(--app-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s;
}

.theme-preset-card:hover {
  border-color: var(--app-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.theme-preset-active {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px rgba(20,120,111,.18) !important;
}

.theme-preset-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
  flex-shrink: 0;
}

.theme-preset-label {
  white-space: nowrap;
}

/* ===== PLANNING — COLLAPSE ===== */
.planning-td-centre {
  min-width: 130px;
}

/* ===== PLANNING — VUE TABLEAU ================================================
   Lignes = Date (rowspan 3) × 3 slots fixes | Colonnes = Centres → Salles
   ============================================================================ */

.tb-wrapper { border-radius: 8px; overflow-x: auto; }

.tb-table {
  font-size: .82rem;
  margin-bottom: 0;
  min-width: 600px;
}

/* ── En-têtes niveau 1 (Date, Période, Centres) ─── */
.tb-th-date {
  background: #e8edf5;
  color: #3d4f63;
  width: 68px;
  min-width: 68px;
  text-align: center;
  font-weight: 600;
  vertical-align: middle;
  border-color: rgba(61,79,99,.15) !important;
}
.tb-th-periode {
  background: #e8edf5;
  color: #5a6a82;
  width: 115px;
  min-width: 115px;
  font-weight: 500;
  font-size: .74rem;
  vertical-align: middle;
  border-color: rgba(61,79,99,.15) !important;
}
.tb-th-centre {
  background: #dde4f0;
  color: #2c3e56;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: .01em;
  border-color: rgba(61,79,99,.15) !important;
}

/* ── En-têtes niveau 2 (Salles) ─────────────────── */
.tb-th-salle {
  background: #c8e5e2;
  color: var(--app-primary, #14786f);
  min-width: 110px;
  font-weight: 600;
  font-size: .74rem;
  vertical-align: middle;
  border-color: rgba(20,120,111,.2) !important;
}

/* ── Colonnes Date + Créneau figées pendant le défilement horizontal ── */
.tb-th-date,
.tb-td-date {
  position: sticky;
  left: 0;
  z-index: 3;
}
.tb-th-periode,
.tb-td-slot {
  position: sticky;
  left: 68px;            /* = largeur de la colonne Date */
  z-index: 3;
}
/* En-têtes figés au-dessus des cellules figées du corps */
.tb-th-date,
.tb-th-periode {
  z-index: 6;
}
/* Ombre de séparation à droite de la zone figée (indique le scroll) */
.tb-th-periode::after,
.tb-td-slot::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6px;
  transform: translateX(100%);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 23, 42, .12), rgba(15, 23, 42, 0));
}

/* ── Cellule date ────────────────────────────────── */
.tb-td-date {
  background: #f1f3f5;
  vertical-align: middle;
  border-right: 2px solid #c0c8d0 !important;
  padding: 6px 4px !important;
}
.tb-td-date--today   { background: #d1f0eb !important; }
.tb-td-date--weekend { background: #f4f2ee !important; }

.tb-date-wd {
  font-size: .62rem;
  letter-spacing: .07em;
  color: #6c757d;
  text-transform: uppercase;
}
.tb-td-date--today .tb-date-wd { color: var(--app-primary, #14786f); font-weight: 700; }

.tb-date-num {
  font-size: .88rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.2;
}
.tb-td-date--today .tb-date-num { color: var(--app-primary, #14786f); }

/* ── Cellule slot (Période) ──────────────────────── */
.tb-td-slot {
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 8px !important;
  border-right: 2px solid #c0c8d0 !important;
  color: #495057;
  width: 115px;
}
.tb-slot-matin  { background: #fffbeb; border-left: 3px solid #fbbf24 !important; }
.tb-slot-apm    { background: #f0fdf4; border-left: 3px solid #4ade80 !important; }
.tb-slot-garde  { background: #eff6ff; border-left: 3px solid #60a5fa !important; }
.tb-slot-today  { filter: saturate(1.4); }

/* ── Cellules données ────────────────────────────── */
.tb-cell {
  min-width: 110px;
  padding: 5px 6px !important;
  vertical-align: middle;
}
.tb-cell-free         { background: #fff; }
.tb-cell-taken        { background: #faf5ff; padding-top: 12px !important; }
.tb-cell-mine         { background: #eff6ff; padding-top: 12px !important; }
.tb-cell-demande      { background: #fffbeb; padding-top: 12px !important; }
.tb-cell-demande-mine { background: #fef3c7; padding-top: 12px !important; }
.tb-cell-blocked      { background: #fff7ed; padding-top: 12px !important; box-shadow: inset 0 0 0 1px #fed7aa; }
.tb-cell-weekend { background: #fafaf8; }
/* Aujourd'hui — teinte verte sur TOUTES les cellules (libre, prise, weekend) */
.tb-row-today .tb-cell-free   { background: #e8faf7; }
.tb-row-today .tb-cell-mine   { background: #daf5f0; }
.tb-row-today .tb-cell-taken  { background: #daf5f0; }
.tb-row-today .tb-slot-today  { background: #d1f0eb; }

/* Hover — overlay semi-transparent sur toute la ligne (box-shadow ne touche pas aux backgrounds) */
.tb-table tbody tr:hover td {
    box-shadow: inset 0 0 0 9999px rgba(14, 116, 144, 0.06);
    cursor: pointer;
}
.tb-row-weekend td { opacity: .8; }

/* ── Bloc pleine largeur (remplace badge) ────────── */
.tb-block {
  position: relative;    /* ancre le badge absolu */
  overflow: visible;     /* laisse le badge dépasser */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
  background: #e5e7eb;
  color: #374151;
  border-left: 3px solid #9ca3af;
  box-sizing: border-box;
  min-height: 28px;
}

/* Couleur par identité : neutre par défaut (autre médecin), bleu pour le médecin courant. */
.tb-block--mine   { background: #bfdbfe; color: #1e3a8a; border-left-color: #2563eb; }
/* Demande en attente — override la couleur de slot */
.tb-block--demande { background: #fde68a !important; color: #78350f !important; border-left-color: #f59e0b !important; border-left-style: dashed !important; }
.tb-block--blocked { background: #ffedd5 !important; color: #7c2d12 !important; border-left-color: #f97316 !important; }
.tb-blocked-badge { flex-shrink: 0; margin-right: 3px; color: #ea580c; font-size: .78rem; }

/* Médecin réservé mais en congé validé ce jour — conflit à signaler */
.tb-block--absent { background: #fee2e2 !important; color: #991b1b !important; border-left-color: #dc2626 !important; }
.tb-block--absent .tb-block-name { text-decoration: line-through; text-decoration-color: rgba(153,27,27,.6); }
.tb-absent-badge { flex-shrink: 0; margin-right: 3px; color: #dc2626; font-size: .8rem; }

.tb-block-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 2px;
}

/* ── Bouton poubelle dans le bloc ────────────────── */
.tb-del-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0 0 0 5px;
  font-size: .78rem;
  color: inherit;
  opacity: .45;
  cursor: pointer;
  transition: opacity .15s, color .15s;
  line-height: 1;
}
.tb-del-btn:hover { opacity: 1; color: #dc3545; }

/* ── Bouton + (créer) ────────────────────────────── */
.tb-add-btn {
  padding: 1px 6px;
  font-size: .8rem;
  opacity: .45;
  transition: opacity .15s;
}
.tb-add-btn:hover { opacity: 1; }

/* ── Légende ─────────────────────────────────────── */
.tb-legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tb-legend-dot--mine  { background: #bfdbfe; border: 2px solid #2563eb; }
.tb-legend-dot--other { background: #e5e7eb; border: 2px solid #9ca3af; }

.tb-legend-slot {
  display: inline-block;
  padding: .1em .5em;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 600;
  border-left: 3px solid;
  margin-right: .25rem;
}
.tb-slot-matin.tb-legend-slot  { background: #fffbeb; border-left-color: #fbbf24; color: #92400e; }
.tb-slot-apm.tb-legend-slot    { background: #f0fdf4; border-left-color: #4ade80; color: #166534; }
.tb-slot-garde.tb-legend-slot  { background: #eff6ff; border-left-color: #60a5fa; color: #1e40af; }

/* ── Modal suppression ───────────────────────────── */
.del-modal-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff8e1;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.collapse-centre-btn {
  line-height: 1;
  vertical-align: middle;
}

/* ===== PERIODE OPTIONS ===== */
.periode-option {
  padding: .55rem .85rem;
  border-radius: 8px;
  border: 1px solid var(--app-border);
}

.periode-option.available {
  background: #f0fff4;
  border-color: #86efac;
}

.periode-option.taken {
  background: #fafafa;
  opacity: .65;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN LAYOUT — SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */

.admin-wrapper {
  display: flex;
  min-height: 100vh;
  background: #f1f5f9;
}

/* ── Sidebar ── */
.admin-sidebar {
  width: 256px;
  min-width: 256px;
  background: #0f172a;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1040;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
  transition: transform .25s ease;
}

.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

.admin-content-wrap {
  flex: 1;
  margin-left: 256px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Brand */
.admin-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1.1rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.admin-brand-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--app-primary, #14786f);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}

.admin-brand-logo {
  max-height: 34px; max-width: 120px;
  object-fit: contain;
}

.admin-brand-text { line-height: 1.2; }
.admin-brand-name { font-size: .88rem; font-weight: 700; color: #f1f5f9; display: block; }
.admin-brand-sub  { font-size: .65rem; text-transform: uppercase; letter-spacing: .07em; color: #475569; }

/* Nav section */
.admin-nav-section { padding: .35rem 0; }

.admin-nav-label {
  padding: .6rem 1rem .2rem;
  font-size: .67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: #475569;
}

.admin-nav-link {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .75rem;
  margin: .05rem .5rem;
  border-radius: 6px;
  color: #94a3b8;
  text-decoration: none;
  font-size: .84rem;
  transition: background .14s, color .14s;
}

.admin-nav-link i { font-size: .95rem; width: 1.1rem; flex-shrink: 0; }

.admin-nav-link:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.admin-nav-link.active { background: var(--app-primary, #14786f); color: #fff; font-weight: 600; }
.admin-nav-link.active:hover { background: var(--app-primary-dark, #0f5f58); color: #fff; }

/* Sous-entrées : indentées, sans icône, une puce de la couleur du type. Elles se lisent
   comme des filtres de l'entrée du dessus, pas comme six écrans de plus. */
.admin-nav-sous { margin: .1rem 0 .25rem; }
.admin-nav-link--sous {
  padding-left: 2rem;
  font-size: .79rem;
  gap: .5rem;
}
.admin-nav-puce {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pp-type, #64748b);
  flex-shrink: 0;
}
.admin-nav-link--sous.active .admin-nav-puce { background: #fff; }

.admin-nav-divider { border-color: rgba(255,255,255,.07); margin: .3rem 0; }

/* Sidebar footer */
.admin-sidebar-footer {
  margin-top: auto;
  padding: .75rem;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.admin-user-pill {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  text-decoration: none;
}

.admin-user-pill:hover { background: rgba(255,255,255,.09); }

.admin-avatar-sm {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--app-primary, #14786f);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #fff;
  overflow: hidden;
}
.admin-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }

.admin-user-info { overflow: hidden; }
.admin-user-name  { font-size: .78rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-email { font-size: .7rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Top bar */
.admin-topbar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: .6rem 1.5rem;
  display: flex; align-items: center; gap: .75rem;
  position: sticky; top: 0; z-index: 100;
  min-height: 52px;
}

.admin-topbar-toggle {
  display: none;
  background: none; border: none; padding: .3rem .4rem;
  border-radius: 6px; color: #64748b; cursor: pointer;
}
.admin-topbar-toggle:hover { background: #f1f5f9; color: #0f172a; }

.admin-topbar-title { font-size: .95rem; font-weight: 700; color: #0f172a; flex: 1; }

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

/* Main content */
.admin-main { flex: 1; padding: 1.5rem; }

/* Overlay (mobile) */
.admin-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 1039;
}
.admin-overlay.show { display: block; }

/* Mobile */
@media (max-width: 991.98px) {
  .admin-sidebar { transform: translateX(-256px); }
  .admin-sidebar.show { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,.4); }
  .admin-content-wrap { margin-left: 0; }
  .admin-topbar-toggle { display: flex; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROFIL UTILISATEUR
   ═══════════════════════════════════════════════════════════════════ */

.profile-avatar-wrap {
  position: relative; display: inline-block;
}

.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--app-primary, #14786f);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: #fff;
  overflow: hidden; border: 3px solid #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-avatar-upload {
  position: absolute; bottom: 0; right: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--app-primary, #14786f);
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; font-size: .75rem;
  transition: background .15s;
}
.profile-avatar-upload:hover { background: var(--app-primary-dark, #0f5f58); }

.profile-header-card {
  background: var(--app-primary, #14786f);
  border-radius: 12px 12px 0 0;
  padding: 2rem 1.5rem 1.2rem;
  color: #fff;
}

.profile-body-card {
  background: #fff;
  border-radius: 0 0 12px 12px;
  border: 1px solid var(--app-border);
  border-top: none;
}

.profile-stat-pill {
  background: rgba(255,255,255,.18);
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .78rem;
}

.navbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--app-primary, #14786f);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #fff;
  overflow: hidden; cursor: pointer;
  border: 2px solid rgba(255,255,255,.3);
}
.navbar-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Mobile : icônes navbar avant le burger ──────────────────────────────── */
@media (max-width: 991.98px) {
    /* Séparateur vertical subtil entre les icônes et le burger */
    .navbar-mobile-icons {
        padding-right: 8px;
        margin-right: 4px !important;
        border-right: 1px solid var(--app-border, #e2e8f0);
    }
    /* Avatar : même taille circulaire que les icônes (34×34) */
    .navbar-mobile-icons .dropdown > .nav-link {
        padding: 0 !important;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        justify-content: center;
        transition: background .15s ease;
    }
    .navbar-mobile-icons .dropdown > .nav-link:hover {
        background: #f1f5f9;
    }
}

/* ── Desktop : cluster d'actions navbar (chat · notif · compte) ──────────── */
@media (min-width: 992px) {
    /* Séparateur vertical discret entre les icônes et le bloc compte */
    .nav-vsep {
        width: 1px;
        height: 24px;
        background: var(--app-border);
        margin: 0 6px;
        flex-shrink: 0;
    }
    /* Bloc compte défini : surface légère + bordure, lecture « bouton » */
    .account-chip {
        padding: 4px 12px 4px 5px !important;
        border-radius: 999px;
        background: var(--app-surface-muted);
        border: 1px solid var(--app-border);
        transition: background .15s ease, border-color .15s ease;
    }
    .account-chip:hover,
    .account-chip[aria-expanded="true"] {
        background: #eef2f7;
        border-color: #c5cfdb;
    }
    /* Nom utilisateur : tronqué proprement si trop long */
    .account-chip > span {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════
   Dashboard — Cartes de statistiques
   ═══════════════════════════════════════════════════ */

.dashboard-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow .15s, transform .15s;
  overflow: hidden;
  height: 100%;
}

.dashboard-stat-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.09);
  transform: translateY(-1px);
}

.dashboard-stat-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}

.dashboard-stat-body { flex: 1; min-width: 0; }

.dashboard-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--app-text);
}

.dashboard-stat-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--app-text);
  margin-top: .1rem;
}

.dashboard-stat-sub {
  font-size: .72rem;
  color: var(--app-muted);
  margin-top: .15rem;
}

.dashboard-stat-link {
  text-decoration: none;
}

/* ── Cartes d'accès rapide ───────────────────────── */

.dashboard-quick-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 1.1rem 1rem;
  text-decoration: none;
  color: var(--app-text);
  transition: box-shadow .15s, border-color .15s, transform .15s;
  height: 100%;
}

.dashboard-quick-card:hover {
  border-color: var(--app-primary);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transform: translateY(-2px);
  color: var(--app-primary);
}

.dashboard-quick-icon {
  font-size: 1.4rem;
  color: var(--app-primary);
  margin-bottom: .25rem;
}

.dashboard-quick-title {
  font-size: .85rem;
  font-weight: 600;
}

.dashboard-quick-desc {
  font-size: .75rem;
  color: var(--app-muted);
}

/* ═══════════════════════════════════════════════════
   Onglets vue avec icônes colorées (Planning, Réservations)
   ═══════════════════════════════════════════════════ */

.app-view-tabs {
  gap: .25rem;
  border-bottom: 1px solid var(--app-border);
  flex-wrap: nowrap;
}

.app-view-tabs .nav-link {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-size: .85rem;
  font-weight: 500;
  color: var(--app-muted);
  background: transparent;
  transition: background .15s, color .15s;
}

.app-view-tabs .nav-link:hover {
  background: #f1f5f9;
  color: var(--app-text);
}

.app-view-tabs .nav-link.active {
  background: #fff;
  color: var(--app-text);
  border-color: var(--app-border);
  margin-bottom: -1px;
}

/* Icônes colorées */
.app-tab-icon { font-size: 1rem; flex-shrink: 0; }
.app-tab-icon--blue   { color: #6366f1; }
.app-tab-icon--orange { color: #f59e0b; }
.app-tab-icon--green  { color: #10b981; }
.app-tab-icon--red    { color: #ef4444; }

/* ═══════════════════════════════════════════════════
   Calendrier « Mon planning » — grille maison, jour scindé matin / après-midi
   ═══════════════════════════════════════════════════ */

.mcal { overflow-x: auto; }

.mcal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 720px;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
.mcal-grid > *:nth-child(7n) { border-right: none; }

.mcal-head {
  text-align: center;
  font-weight: 700;
  font-size: .78rem;
  color: #64748b;
  padding: .5rem .3rem;
  background: #f8fafc;
  border-right: 1px solid #eef1f6;
  border-bottom: 1px solid #e6ebf2;
}

.mcal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 138px;
  overflow: hidden;
  padding: 2px 4px 4px;
  border-right: 1px solid #eef1f6;
  border-bottom: 1px solid #eef1f6;
  cursor: pointer;
  transition: background .12s;
}
/* Indice « + » au survol d'une case (suggère l'ajout d'un événement) */
.mcal-cell::after {
  content: "+";
  position: absolute; bottom: 1px; right: 6px;
  font-size: 1rem; font-weight: 700; line-height: 1;
  color: var(--app-primary); opacity: 0;
  transition: opacity .12s; pointer-events: none;
}
.mcal-cell:hover::after { opacity: .5; }
.mcal-cell.mcal-out::after { content: none; }

.mcal-cell.mcal-we { background: #fafbfd; }
.mcal-cell:hover { background: #f4faf8; }
.mcal-cell.mcal-out { background: #fbfcfd; }
.mcal-cell.mcal-out .mcal-daynum { color: #cbd5e1; }
.mcal-cell.mcal-today { background: rgba(20,120,111,.10); box-shadow: inset 0 0 0 2px var(--app-primary); }
.mcal-cell.mcal-today .mcal-daynum {
  background: var(--app-primary); color: #fff;
  min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
}

.mcal-daynum { align-self: flex-end; font-size: .8rem; font-weight: 700; color: #64748b; line-height: 1; flex: 0 0 auto; }

/* Zone défilable des événements : borne la case et évite tout débordement
   (chevauchement des chips) quand une journée est très chargée. */
.mcal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
}
.mcal-body::-webkit-scrollbar { width: 6px; }
.mcal-body::-webkit-scrollbar-thumb { background: #dbe2ec; border-radius: 3px; }

.mcal-journee { display: flex; flex-direction: column; gap: 2px; margin: 1px 0 2px; flex: 0 0 auto; }

.mcal-demi { flex: 0 0 auto; min-height: 22px; }
.mcal-demi-pm { border-top: 1px dashed #e2e8f0; margin-top: 3px; padding-top: 3px; }

.mcal-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 2px 6px;
  font-size: .69rem;
  line-height: 1.25;
  border-radius: 4px;
  background: #b3e0d5;
  color: #083d2d;
  border-left: 3px solid #0b6650;
  overflow: hidden;
}
.mcal-chip:hover { filter: brightness(.97); }
.mcal-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcal-chip-ic { font-size: .62rem; flex-shrink: 0; color: #0e7490; }
.mcal-chip-perso { background: #d3d0f6; color: #251f66; }

.mcal-legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mcal-legend-res   { background: #b3e0d5; border-left: 3px solid #0b6650; }
.mcal-legend-perso { background: #d3d0f6; border-left: 3px solid #6366f1; }

/* ═══════════════════════════════════════════════════
   Barre de filtres
   ═══════════════════════════════════════════════════ */

.filter-bar {
  background: #f8fafc;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: .75rem 1rem;
}

.filter-bar-input {
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════
   Page d'accueil (tableau de bord utilisateur)
   ═══════════════════════════════════════════════════ */

/* Pas de boîte englobante — les cartes flottent sur le fond */
.home-dash {
  padding-bottom: .5rem;
}

/* ═══════════════════════════════════════════════════
   Footer de pagination (toujours visible)
   ═══════════════════════════════════════════════════ */

.pagination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 1rem;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface-muted);
  border-radius: 0 0 7px 7px;
}

/* ── Admin — Page "Rôles utilisateur" ───────────────────────────────── */

.roles-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--app-primary, #14786f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
}

.role-cards-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.role-card-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border: 2px solid #e9ecef;
    border-radius: .625rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .1s ease;
    background: #fff;
    user-select: none;
}
.role-card-item:hover {
    border-color: #ced4da;
    background: #f8fafc;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.role-card-item.is-active {
    border-color: var(--app-primary, #14786f);
    background: #f0faf9;
    box-shadow: 0 0 0 3px rgba(20, 120, 111, .08);
}

.role-card-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: opacity .15s;
}
.role-card-item:not(.is-active) .role-card-icon-wrap {
    filter: grayscale(.4);
    opacity: .7;
}

.role-card-text { min-width: 0; }

.role-card-name {
    font-weight: 600;
    font-size: .92rem;
    color: #1a202c;
    line-height: 1.3;
}
.role-card-item.is-active .role-card-name {
    color: var(--app-primary, #14786f);
}

.role-card-desc {
    font-size: .78rem;
    color: #6c757d;
    margin-top: .2rem;
    line-height: 1.4;
}

.role-card-toggle {
    flex-shrink: 0;
    font-size: 1.3rem;
    transition: color .15s;
    line-height: 1;
}
.role-toggle-on  { display: none; color: var(--app-primary, #14786f); }
.role-toggle-off { display: block; color: #ced4da; }

.role-card-item.is-active .role-toggle-on  { display: block; }
.role-card-item.is-active .role-toggle-off { display: none; }



/* ── Bandeau d'impersonation ──────────────────────────────────── */
.impersonation-banner {
    background: #fff3cd;
    border-bottom: 2px solid #ffc107;
    color: #664d03;
    font-size: .88rem;
    font-weight: 500;
}

/* ── En-têtes de colonnes triables ───────────────────────────── */
.sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    font-weight: 600;
    font-size: inherit;
}
.sort-link:hover { color: var(--app-primary, #14786f); }
.sort-link .si { font-size: .68rem; opacity: .35; transition: opacity .15s; }
.sort-link:hover .si { opacity: .7; }
.sort-link.sort-active { color: var(--app-primary, #14786f); }
.sort-link.sort-active .si { opacity: 1; }

/* ── Carte d'accès utilisateur (AccessMap) ──────────────────────────────── */

/* En-tête de groupe (direct / via rôle) */
.access-group-hdr {
  background: var(--app-surface-muted);
  border-bottom: 1px solid var(--app-border);
  font-size: .85rem;
}

/* Avatar zone */
.access-map-avatar { flex-shrink: 0; line-height: 1; }

/* ── Arbre ── */
.atree-root   { padding: .25rem 0; }

.atree-node   { position: relative; }

/* Conteneur des enfants : indentation + ligne verticale */
.atree-children {
  margin-left: .7rem;
  padding-left: .9rem;
  border-left: 2px solid var(--app-border);
  margin-top: .1rem;
  margin-bottom: .1rem;
}

/* Ligne d'un nœud */
.atree-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .4rem;
  border-radius: 6px;
  transition: background .1s;
  cursor: default;
  user-select: none;
}
.atree-row:hover { background: rgba(0,0,0,.04); }

/* Icône fixe */
.atree-icon {
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
  font-size: .95rem;
}

/* Label du nœud */
.atree-label {
  flex: 1;
  min-width: 0;
  font-size: .88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Couleurs par type */
.atree-perimetre-row .atree-label { color: #1e4db7; }
.atree-centre-row    .atree-label { color: #0d6832; }
.atree-salle-row     .atree-label { color: var(--app-text); }

/* Badges inline de l'arbre */
.atree-badge-type {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 500;
  font-size: .68rem;
  flex-shrink: 0;
}
.atree-badge-count {
  background: #dcfce7;
  color: #14532d;
  font-weight: 500;
  font-size: .68rem;
  flex-shrink: 0;
  margin-left: auto;
}
.atree-badge-empty {
  background: #f1f5f9;
  color: #64748b;
  font-weight: 400;
  font-size: .68rem;
  flex-shrink: 0;
  margin-left: auto;
}
.atree-badge-salles {
  background: #d1fae5;
  color: #065f46;
  font-weight: 500;
  font-size: .68rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Carte d'accès : bandeau récapitulatif des sources ── */
.access-src-band { display: flex; flex-wrap: wrap; gap: .6rem; }
.access-src-card {
  flex: 1 1 190px;
  border: 1px solid var(--app-border);
  border-left-width: 4px;
  border-radius: 10px;
  padding: .6rem .85rem;
  background: #fff;
}
.access-src-card .asc-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: #64748b; font-weight: 600; display: flex; align-items: center; gap: .35rem;
}
.access-src-card .asc-count { font-size: 1.35rem; font-weight: 800; line-height: 1.1; margin-top: .2rem; color: #1f2937; }
.access-src-card .asc-unit  { font-size: .8rem; font-weight: 500; color: #94a3b8; }
.access-src-card .asc-sub   { font-size: .72rem; color: #94a3b8; margin-top: .1rem; }
.access-src-card--direct { border-left-color: #2563eb; }
.access-src-card--role   { border-left-color: #f59e0b; }
.access-src-card--total  { border-left-color: #16a34a; background: #f6fef9; }
.access-src-card--total .asc-count { color: #15803d; }

/* En-tête de groupe : accès direct (bleu) vs hérité d'un rôle (ambre) */
.access-group-hdr--direct { background: #eff6ff; border-bottom-color: #bfdbfe; }
.access-group-hdr--role   { background: #fffbeb; border-bottom-color: #fde68a; }
.access-group-sub { font-size: .72rem; color: #64748b; font-weight: 400; line-height: 1.1; }

/* Arbre repliable (details/summary natif, sans JS) */
.atree-collapsible > summary { list-style: none; cursor: pointer; }
.atree-collapsible > summary::-webkit-details-marker { display: none; }
.atree-collapsible > summary::marker { content: ""; }
.atree-caret { width: 1rem; flex-shrink: 0; text-align: center; color: #94a3b8; font-size: .78rem; transition: transform .15s; }
.atree-collapsible[open] > summary > .atree-caret { transform: rotate(90deg); }
.atree-leaf-spacer { width: 1rem; flex-shrink: 0; display: inline-block; }

/* ════════════════════════════════════════════════════════════════
   Module Absence — design system partagé (abs-*)
   ════════════════════════════════════════════════════════════════ */
.abs-page .app-page-title i { color: var(--app-primary, #14786f); }

/* Soldes */
.abs-solde-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:22px; }
.abs-solde { display:flex; gap:16px; align-items:center; background:var(--app-surface,#fff); border:1px solid var(--app-border,#e2e8f0); border-radius:16px; padding:18px 20px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.abs-solde-ico { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; background:#eef2f6; color:#475569; }
.abs-solde--conge .abs-solde-ico { background:#dcfce7; color:#16a34a; }
.abs-solde--rtt   .abs-solde-ico { background:#dbeafe; color:#2563eb; }
.abs-solde--t2 .abs-solde-ico { background:#ede9fe; color:#7c3aed; }
.abs-solde--t3 .abs-solde-ico { background:#ffedd5; color:#c2410c; }
.abs-solde-main { flex:1; min-width:0; }
.abs-solde-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.abs-solde-label { font-weight:600; color:var(--app-muted,#64748b); font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abs-solde-pris { font-size:.72rem; color:var(--app-muted,#94a3b8); white-space:nowrap; }
.abs-solde-val { font-size:1.7rem; font-weight:800; color:var(--app-text,#0f172a); line-height:1.15; }
.abs-solde-tot { font-size:.85rem; font-weight:600; color:var(--app-muted,#94a3b8); }
.abs-solde-bar { height:7px; border-radius:99px; background:#eef2f6; margin-top:8px; overflow:hidden; }
.abs-solde-bar span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#94a3b8,#64748b); }
.abs-solde--conge .abs-solde-bar span { background:linear-gradient(90deg,#22c55e,#16a34a); }
.abs-solde--rtt   .abs-solde-bar span { background:linear-gradient(90deg,#3b82f6,#2563eb); }
.abs-solde--t2 .abs-solde-bar span { background:linear-gradient(90deg,#a78bfa,#7c3aed); }
.abs-solde--t3 .abs-solde-bar span { background:linear-gradient(90deg,#fb923c,#c2410c); }
.abs-solde--over .abs-solde-bar span { background:linear-gradient(90deg,#f87171,#dc2626) !important; }

/* Panneaux & listes */
.abs-cols { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; }
@media (max-width:992px){ .abs-cols { grid-template-columns:1fr; } }
.abs-panel { background:var(--app-surface,#fff); border:1px solid var(--app-border,#e2e8f0); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.abs-panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--app-border,#eef2f6); }
.abs-panel-head h2 { font-size:.95rem; font-weight:700; margin:0; color:var(--app-text,#1e293b); display:flex; align-items:center; gap:8px; }
.abs-panel-head h2 i { color:var(--app-primary,#14786f); }
.abs-count { background:#eef2f6; color:#475569; font-weight:700; font-size:.78rem; border-radius:99px; padding:2px 10px; }
.abs-count--wait { background:#fef3c7; color:#b45309; }
.abs-list { list-style:none; margin:0; padding:6px; }
.abs-list li a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; text-decoration:none; color:inherit; transition:background .12s; }
.abs-list li a:hover { background:var(--app-surface-muted,#f8fafc); }
.abs-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.abs-avatar { width:34px; height:34px; border-radius:50%; background:var(--app-primary,#14786f); color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.abs-item-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.abs-item-title { font-weight:600; color:var(--app-text,#1e293b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abs-item-sub { font-size:.78rem; color:var(--app-muted,#64748b); display:flex; align-items:center; gap:5px; }
.abs-item-sub i { font-size:.72rem; }

/* Pills de statut */
.abs-pill { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap; }
.abs-pill--ok    { background:#dcfce7; color:#15803d; }
.abs-pill--ko    { background:#fee2e2; color:#b91c1c; }
.abs-pill--wait  { background:#fef3c7; color:#b45309; }
.abs-pill--info  { background:#dbeafe; color:#1d4ed8; }
.abs-pill--muted { background:#eef2f6; color:#64748b; }

/* États vides */
.abs-empty { text-align:center; padding:34px 20px; color:var(--app-muted,#94a3b8); }
.abs-empty i { font-size:2.1rem; display:block; margin-bottom:10px; opacity:.6; }
.abs-empty p { margin:0 0 12px; }
.abs-empty--ok i { color:#22c55e; opacity:.8; }

/* Carte / formulaire */
.abs-card { background:var(--app-surface,#fff); border:1px solid var(--app-border,#e2e8f0); border-radius:16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.abs-card-head { padding:14px 20px; border-bottom:1px solid var(--app-border,#eef2f6); font-weight:700; color:var(--app-text,#1e293b); display:flex; align-items:center; gap:8px; }
.abs-card-head i { color:var(--app-primary,#14786f); }
.abs-card-body { padding:20px; }
.abs-form-label { font-weight:600; font-size:.85rem; color:var(--app-text,#334155); margin-bottom:5px; display:block; }

/* Bandeau de calcul (Nouvelle absence) */
.abs-compute { display:flex; align-items:center; gap:20px; padding:16px 20px; border-radius:14px; background:linear-gradient(135deg,#f0fdf4,#ecfeff); border:1px solid #cdeede; margin:18px 0; }
.abs-compute-nb { text-align:center; }
.abs-compute-nb .n { font-size:1.9rem; font-weight:800; color:var(--app-text,#0f172a); line-height:1; }
.abs-compute-nb .l { font-size:.72rem; color:var(--app-muted,#64748b); text-transform:uppercase; letter-spacing:.04em; }
.abs-compute-sep { width:1px; align-self:stretch; background:#cbe8d8; }
.abs-compute-info { font-size:.9rem; color:#475569; }
.abs-compute-info strong { color:#0f172a; }

/* Circuit de validation (Détails) */
.abs-circuit { display:flex; flex-wrap:wrap; gap:14px; }
.abs-step { flex:1; min-width:200px; border:1px solid var(--app-border,#e2e8f0); border-radius:14px; padding:14px 16px; background:var(--app-surface,#fff); }
.abs-step--current { border-color:#f59e0b; box-shadow:0 0 0 3px #fef3c7; }
.abs-step--done { border-color:#86efac; }
.abs-step--rejected { border-color:#fca5a5; }
.abs-step-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.abs-step-num { width:26px; height:26px; border-radius:50%; background:#eef2f6; color:#475569; font-weight:700; font-size:.85rem; display:inline-flex; align-items:center; justify-content:center; }
.abs-step--current .abs-step-num { background:#f59e0b; color:#fff; }
.abs-step--done .abs-step-num { background:#16a34a; color:#fff; }
.abs-step--rejected .abs-step-num { background:#dc2626; color:#fff; }
.abs-step-title { font-weight:600; color:var(--app-text,#1e293b); }
.abs-step-who { font-size:.8rem; color:var(--app-muted,#64748b); }
.abs-step-comment { font-size:.8rem; font-style:italic; color:#475569; margin-top:6px; padding-top:6px; border-top:1px dashed #e2e8f0; }

/* Récap clés/valeurs */
.abs-kv { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; align-items:center; margin:0; }
.abs-kv dt { color:var(--app-muted,#64748b); font-size:.84rem; }
.abs-kv dd { margin:0; font-weight:600; color:var(--app-text,#1e293b); }

/* Pilotage — tuiles & table */
/* Les filtres de statut, mêmes pastilles que le journal des pointages : un filtre se
   reconnaît d'abord à sa couleur, et la barre tient sur une ligne. Les cinq grandes
   cartes d'avant prenaient la moitié de l'écran pour cinq nombres. */
.abs-page .abs-status-filters { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1rem; }
.abs-page .abs-filter {
    --abs-tone:#475569; --abs-tint:#f1f4f7; --abs-border:#cbd5e1;
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    min-height:42px; max-width:100%; padding:.5rem .8rem;
    border:1px solid var(--abs-border); border-radius:6px;
    background:var(--abs-tint); color:var(--abs-tone);
    font-size:.85rem; font-weight:600; text-decoration:none;
    transition:border-color .12s, box-shadow .12s, background .12s;
}
.abs-page .abs-filter--all  { --abs-tone:#224bd6; --abs-tint:#edf2ff; --abs-border:#bfcefc; }
.abs-page .abs-filter--wait { --abs-tone:#875900; --abs-tint:#fff5dd; --abs-border:#e5c581; }
.abs-page .abs-filter--enc  { --abs-tone:#17687a; --abs-tint:#eaf6f9; --abs-border:#a7d5df; }
.abs-page .abs-filter--ok   { --abs-tone:#20734f; --abs-tint:#eaf7ef; --abs-border:#a9d8be; }
.abs-page .abs-filter--clo  { --abs-tone:#475569; --abs-tint:#f1f4f7; --abs-border:#cbd5e1; }
.abs-page .abs-filter:hover { border-color:var(--abs-tone); box-shadow:0 0 0 1px var(--abs-tone); }
.abs-page .abs-filter:focus-visible { outline:3px solid var(--abs-tone); outline-offset:3px; }
.abs-page .abs-filter.active { background:var(--abs-tone); border-color:var(--abs-tone); color:#fff; box-shadow:0 2px 4px #15274224; }
.abs-page .abs-filter > i { font-size:1rem; flex-shrink:0; }
.abs-page .abs-filter-count {
    display:inline-flex; justify-content:center; align-items:center;
    min-width:26px; height:24px; padding:0 .35rem; border-radius:4px;
    background:#ffffffb3; font-variant-numeric:tabular-nums; flex-shrink:0;
}
.abs-page .abs-filter.active .abs-filter-count { background:#ffffff30; color:#fff; }
.abs-table { width:100%; border-collapse:separate; border-spacing:0; }
.abs-table thead th { font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--app-muted,#64748b); text-align:left; padding:10px 14px; border-bottom:1px solid var(--app-border,#eef2f6); }
.abs-table tbody td { padding:12px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.abs-table tbody tr:hover { background:var(--app-surface-muted,#f8fafc); }
.abs-table tbody tr:last-child td { border-bottom:0; }

/* Admin — cartes de types */
.abs-type { background:var(--app-surface,#fff); border:1px solid var(--app-border,#e2e8f0); border-radius:16px; box-shadow:0 1px 2px rgba(16,24,40,.04); margin-bottom:16px; overflow:hidden; }
.abs-type.is-off { opacity:.7; }
.abs-type-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:16px 20px; }
.abs-type-ico { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff; flex-shrink:0; }
.abs-type-name { font-size:1.05rem; font-weight:700; color:var(--app-text,#1e293b); display:flex; align-items:center; gap:8px; }
.abs-type-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.abs-chip { font-size:.74rem; font-weight:600; padding:3px 9px; border-radius:99px; background:#eef2f6; color:#475569; display:inline-flex; align-items:center; gap:4px; }
.abs-chip--cat { background:#e0f2fe; color:#0369a1; }
.abs-chip--quota { background:#fef3c7; color:#b45309; }
.abs-chip--socle { background:#ede9fe; color:#6d28d9; }
/* Un type sans circuit valide d'office : la pastille le dit, pour qu'on ne le
   decouvre pas le jour ou une demande se valide toute seule. */
.abs-chip--dOffice { background:#fef3c7; color:#b45309; }
.abs-type-body { padding:0 20px 16px; }
.abs-type-steps { list-style:none; margin:0 0 10px; padding:0; }
.abs-type-steps li { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed #eef2f6; }
.abs-type-foot { display:flex; flex-wrap:wrap; gap:6px; padding:12px 20px; border-top:1px solid var(--app-border,#eef2f6); background:var(--app-surface-muted,#f8fafc); }

/* ===== VALIDATION =====
   Le tag helper asp-validation-summary rend toujours son conteneur, même sans
   erreur : sans cette règle, les formulaires qui lui donnent « alert-danger »
   affichent une barre rouge vide au chargement. */
.validation-summary-valid { display: none; }

/* ===== BARRE DE NAVIGATION — les six mises en page ===== */
/* Les entrées sont les mêmes partout ; seul l'agencement change. Le style retenu
   est posé en classe sur le <ul>, ce qui permet d'ajuster une variante sans
   toucher aux autres. */

/* Le trait qui sépare deux familles. */
.nav-separateur {
  align-self: center;
  width: 1px;
  height: 18px;
  margin: 0 .35rem;
  background: var(--app-border);
}

/* La pastille de famille, devant le libellé. */
.nav-pastille {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* Familles sous leur intitulé : la barre gagne une ligne, et l'explicite avec. */
.nav-style-groupes { align-items: flex-end; }

.nav-groupe {
  padding: 0 .55rem;
  border-left: 1px solid var(--app-border);
}
.nav-groupe:first-child { border-left: 0; padding-left: 0; }

.nav-groupe-titre {
  padding-left: .5rem;
  color: var(--app-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* La bascule d'un domaine à l'autre, dans la barre elle-même. */
.nav-bascule {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  margin-right: .25rem;
  padding: .15rem;
  background: var(--app-surface-muted);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--app-border);
}
.nav-bascule > * {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .6rem;
  color: var(--app-muted);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.nav-bascule > a:hover { background: rgba(20, 120, 111, .08); color: var(--app-primary-dark); }
.nav-bascule > .actif {
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: 0 1px 3px rgba(23, 33, 43, .12);
}

/* Sur mobile la barre se replie dans le burger : les traits verticaux et les
   intitulés de groupe n'y ont plus de sens. */
@media (max-width: 991.98px) {
  .nav-groupe { padding: .35rem 0; border-left: 0; }
  .nav-groupe-titre { padding-left: 0; }
}

/* Vignettes du choix de barre, dans la configuration. L'aperçu est schématique :
   des traits pour les entrées, un point ou un trait vertical selon le style. */
.nav-style-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 9.5rem;
  padding: .7rem .8rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.nav-style-card:hover { border-color: var(--app-primary); }
.nav-style-active {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 2px rgba(20, 120, 111, .18);
}
.nav-style-label { font-size: .8rem; font-weight: 700; color: var(--app-text); }

.nav-style-apercu {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 .3rem;
  background: var(--app-surface-muted);
  border-radius: 5px;
}
.nav-style-apercu .t { width: 16px; height: 4px; border-radius: 2px; background: #94a3b8; }
.nav-style-apercu .s { width: 1px; height: 12px; background: #64748b; }
.nav-style-apercu .p { width: 6px; height: 6px; border-radius: 50%; }
.nav-style-apercu .p.b { background: #378ADD; }
.nav-style-apercu .p.v { background: #1D9E75; }
.nav-style-apercu .d { width: 22px; height: 7px; border-radius: 3px; background: #64748b; }
.nav-style-apercu .b2 { width: 26px; height: 9px; border-radius: 999px; background: #14786f; }
.nav-style-apercu .g { display: flex; flex-direction: column; gap: 2px; }
.nav-style-apercu .g i { width: 10px; height: 2px; border-radius: 1px; background: #cbd5e1; }
.nav-style-apercu .g .t { width: 14px; height: 3px; }

/* Une journée dont le mois n'est pas encore publié. Barrée, et non blanche :
   « personne ne travaille » et « pas encore publié » ne se confondent plus. */
.planning-th-day--non-publie { color: #94a3b8; background: #f8fafc; }

.planning-cell-non-publie {
  background: repeating-linear-gradient(
    45deg, #f8fafc, #f8fafc 6px, #eef2f6 6px, #eef2f6 12px);
  cursor: not-allowed;
}

/* ── La vue mois : les personnes en lignes, trente et un jours en colonnes ──
   Partagée par le planning des médecins et celui du personnel. Tout y est dicté par la
   largeur : une journée fait trente-huit pixels, ce qui laisse la place d'une puce de huit
   caractères et de rien d'autre. */
.pm-defilement {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface);
}

.pm-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .72rem;
  width: max-content;
  min-width: 100%;
}

.pm-table th,
.pm-table td {
  border-right: 1px solid #eef2f6;
  border-bottom: 1px solid #eef2f6;
}

/* La colonne des noms reste visible pendant qu'on fait défiler le mois : sans elle, on lit
   une ligne de puces sans savoir de qui elle parle. */
.pm-col-nom {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--app-surface);
  min-width: 132px;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-weight: 600;
  padding: 4px 8px;
  border-right: 2px solid #c0c8d0;
}

.pm-table thead .pm-col-nom {
  z-index: 5;
  background: var(--app-surface-muted);
  vertical-align: bottom;
}

/* Le nom et le filet de son type dans la colonne figée : flex pour que l'ellipse continue de
   jouer sur le nom seul — le filet, lui, ne doit jamais être le premier rogné. */
.pm-nom-ligne {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.pm-nom-ligne .pp-nom-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-nom-ligne .pp-filet-type { min-height: 1.1rem; }

.pm-col-total {
  min-width: 42px;
  text-align: center;
  font-weight: 600;
  color: var(--app-muted);
  background: var(--app-surface-muted);
}

.pm-semaine {
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  color: var(--app-muted);
  background: var(--app-surface-muted);
  padding: 3px 4px;
  border-right: 2px solid #c0c8d0;
  white-space: nowrap;
}

.pm-jour {
  min-width: 38px;
  text-align: center;
  padding: 2px 1px;
  background: var(--app-surface-muted);
  line-height: 1.1;
}

.pm-lettre {
  display: block;
  font-size: .6rem;
  font-weight: 500;
  color: var(--app-muted);
  text-transform: uppercase;
}

.pm-numero {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Le compteur d'occupation : discret tant que la journée est pleine, c'est le trou qu'on
   cherche. Vert quand tout est pourvu, pour que l'œil saute aux autres. */
.pm-occupation {
  text-align: center;
  font-size: .62rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--app-muted);
  background: var(--app-surface-muted);
  padding: 2px 1px;
  border-bottom: 2px solid #c0c8d0;
}

.pm-occupation.complet .pm-occupes {
  color: #15803d;
}

/* Pourvus au-dessus, ouverts en dessous : c'est le premier nombre qu'on compare d'un jour
   a l'autre, le second ne sert qu'a lui donner son echelle. */
.pm-occupes {
  display: block;
  font-weight: 600;
  color: var(--app-text);
  line-height: 1.1;
}

.pm-offerts {
  display: block;
  font-size: .56rem;
  color: var(--app-muted);
  line-height: 1.1;
  border-top: 1px solid #e2e8f0;
  margin: 0 3px;
}

.pm-jour.weekend,
.pm-occupation.weekend,
.pm-case.weekend {
  background: #f8fafc;
}

.pm-jour.aujourdhui,
.pm-case.aujourdhui {
  background: #f0fbfa;
}

.pm-jour.aujourdhui .pm-numero {
  color: var(--app-primary);
}

.pm-case {
  min-width: 38px;
  vertical-align: top;
  padding: 2px;
  text-align: center;
}

/* La puce : le code court de la salle, teinté par sa spécialité. Même --spe que les onglets
   semaine, donc une salle garde sa couleur d'un écran à l'autre. */
.pm-puce {
  display: block;
  border-radius: 3px;
  padding: 1px 2px;
  margin-bottom: 1px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #eff6ff;
  background: color-mix(in srgb, var(--spe, #3b82f6) 14%, #fff);
  color: #1e3a5f;
  color: color-mix(in srgb, var(--spe, #3b82f6) 72%, #111827);
}

.pm-puce:last-child {
  margin-bottom: 0;
}

.pm-absent {
  display: block;
  font-size: .8rem;
  line-height: 1.2;
  color: #cbd5e1;
}

.pm-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.1rem;
  margin-top: .6rem;
  font-size: .72rem;
  color: var(--app-muted);
}

.pm-legende-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Deux familles de couleurs se suivent dans la même légende — les salles, puis les types.
   Le trait les sépare : collées, on croirait une seule échelle. */
.pm-legende-separateur {
  width: 1px;
  height: 1rem;
  background: var(--app-border, #d8dee6);
}

.pm-puce--exemple {
  width: 1.6rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.pm-vide {
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--app-border);
  border-radius: 10px;
  background: var(--app-surface-muted);
}

.pm-vide-icone {
  display: block;
  font-size: 1.6rem;
  color: var(--app-muted);
  margin-bottom: .5rem;
}

/* Une salle retirée du planning qui porte encore des créneaux : barrée, grisée, et sans
   bouton d'ajout. Elle reste visible jusqu'à ce qu'elle soit vide — la faire disparaître
   emporterait silencieusement ce qui y est déjà posé. */
.planning-salle-row > .planning-td-salle.hors-planning {
  background: #f1f5f9;
}

.planning-td-salle.hors-planning .planning-salle-nom {
  text-decoration: line-through;
  color: var(--app-muted);
}

.planning-salle-etat {
  display: inline-flex;
  align-items: center;
  margin-top: 1px;
  font-size: .64rem;
  font-weight: 600;
  color: #b45309;
}

/* Même convention dans le tableau : l'en-tête d'une salle retirée est barré. */
.tb-th-salle.hors-planning {
  text-decoration: line-through;
  color: var(--app-muted);
  background: #f1f5f9;
}

/* ── Réinitialisation d'un mot de passe ────────────────────────────────────
   Les règles sous le champ, la fenêtre de confirmation, et le bandeau qui lui
   survit. */
.pwd-regles {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .9rem;
  margin: 0;
  color: var(--app-muted);
  font-size: .78rem;
}

.pwd-regles li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.pwd-regles li i {
  font-size: .72rem;
  opacity: .5;
}

.pwd-regles li.ok {
  color: #15803d;
}

.pwd-regles li.ok i {
  opacity: 1;
}

.cfp-carte {
  border: 0;
  border-radius: 14px;
}

.cfp-personne {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--app-border);
}

.cfp-initiales {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-surface-muted);
  color: var(--app-primary);
  font-weight: 650;
  font-size: .9rem;
}

.cfp-nom {
  display: block;
  font-weight: 650;
  line-height: 1.25;
}

.cfp-email {
  display: block;
  font-size: .8rem;
  color: var(--app-muted);
}

.cfp-bloc {
  margin-top: .9rem;
  padding: .7rem .85rem;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface-muted);
}

.cfp-etiquette {
  display: block;
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--app-muted);
  margin-bottom: .35rem;
}

.cfp-mdp {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.cfp-mdp code {
  flex: 1 1 auto;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--app-text);
  word-break: break-all;
}

.cfp-note {
  margin: .9rem 0 0;
  font-size: .8rem;
  color: var(--app-muted);
}

.pwd-toasts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1085;          /* au-dessus d'une fenêtre modale (1055) */
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}

.pwd-toast {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1rem;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: .85rem;
  box-shadow: 0 10px 24px rgba(23, 33, 43, .12);
  animation: pwd-toast-entree .18s ease-out;
}

.pwd-toast i {
  font-size: 1.05rem;
}

.pwd-toast.sortie {
  opacity: 0;
  transform: translateX(.6rem);
  transition: opacity .35s ease, transform .35s ease;
}

@keyframes pwd-toast-entree {
  from { opacity: 0; transform: translateX(.8rem); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Carte d'accès : le périmètre humain ──────────────────────────────── */
/* Une équipe encadrée. Celle dont la personne est DIRECTEMENT responsable est marquée :
   les sous-équipes héritées se perdent de vue au fil des réorganisations. */
.access-equipe {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid #d8dee6; background: #f8fafc;
  font-size: .8rem; color: #334155;
}
.access-equipe--directe { border-color: #93c5fd; background: #eff6ff; color: #1e3a5f; font-weight: 600; }
.access-equipe-n {
  font-variant-numeric: tabular-nums; font-size: .72rem;
  padding: 0 .35rem; border-radius: 999px; background: #e2e8f0; color: #475569;
}
.access-equipe--directe .access-equipe-n { background: #dbeafe; color: #1d4ed8; }

/* La liste des personnes reste consultable sans faire défiler toute la page. */
.access-personnes { max-height: 320px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: .5rem; }
.access-personnes thead th {
  position: sticky; top: 0; background: #f8fafc; z-index: 1;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: #64748b;
}

/* ── Types d'absence : à qui le type est proposé ──────────────────────── */
.abs-publics {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  padding: .55rem .7rem; border: 1px solid #e2e8f0; border-radius: .5rem;
  background: #fcfdfe;
}
.abs-publics-actions { font-size: .8rem; display: inline-flex; align-items: center; gap: .4rem; }
.abs-public {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; font-weight: 400; cursor: pointer;
}
.abs-public .form-check-input { margin: 0; }
/* La pastille de la carte : même famille que les autres, un ton plus sobre puisqu'elle
   dit une restriction et non une catégorie. */
.abs-chip--public { background: #eef3f8; color: #2d5a87; }

/* ── Barre de filtre : des champs qui occupent la place disponible ─────── */
/* En "col-auto", ils restaient à leur largeur minimale — 172 px pour un nom de centre sur
   un écran de 1280, soit deux mots tronqués, pendant que les trois quarts de la ligne
   restaient vides. Ils se partagent désormais la largeur, dans des bornes raisonnables. */
.filter-bar-champ { min-width: 200px; }
.filter-bar-champ .form-control,
.filter-bar-champ .form-select { max-width: 360px; }
@media (max-width: 575.98px) {
  .filter-bar-champ .form-control,
  .filter-bar-champ .form-select { max-width: none; }
}