/* Design system admin.newfarah / app.newfarah — refonte FARAH (teal),
   inspirée de design_newfarahgroupe/admin.css. Pas de framework CSS :
   variables + classes utilitaires, partagées par les deux espaces. */

@import url("/assets/vendor/fonts/fonts.css");

:root {
  --nf-bg: #f1f7f7;
  --nf-surface: #ffffff;
  --nf-text: #0F3D3E;
  --nf-text-2: #2c4d4e;
  --nf-text-muted: #5a7475;
  --nf-border: #d8e6e6;
  --nf-border-2: #e7efef;

  --nf-primary: #007F82;
  --nf-primary-dark: #0F3D3E;
  --nf-primary-soft: #e0f1f1;
  --nf-primary-tint: #b9dede;

  --nf-gold: #c08a3e;
  --nf-gold-ink: #946a23;
  --nf-emerald: #2d6a4f;
  --nf-danger: #b6402a;
  --nf-urgent: #d94a2d;
  --nf-success: #2d6a4f;

  --nf-radius: 14px;
  --nf-radius-lg: 16px;
  --nf-radius-sm: 8px;
  --nf-shadow: 0 8px 24px -10px rgba(14, 31, 36, 0.16), 0 2px 6px rgba(14, 31, 36, 0.05);
  --nf-shadow-lg: 0 30px 60px -25px rgba(14, 31, 36, 0.28);
  --nf-transition: 160ms ease;

  --nf-font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --nf-font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --nf-sidebar-w: 252px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--nf-font-sans);
  background: var(--nf-bg);
  color: var(--nf-text);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
}

/* ---------- Écrans de connexion ---------- */

.nf-center-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--nf-primary-dark);
  background-image: radial-gradient(circle at 20% 20%, rgba(0, 127, 130, 0.35), transparent 55%);
}

.nf-card {
  background: var(--nf-surface);
  border-radius: var(--nf-radius-lg);
  box-shadow: var(--nf-shadow-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  animation: nf-fade-in 220ms ease;
}

@keyframes nf-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.nf-logo-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

.nf-logo-row svg { color: var(--nf-primary); }

.nf-logo-row h1 {
  font-family: var(--nf-font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0;
}

.nf-field { margin-bottom: 0.5rem; }

.nf-field label {
  display: block;
  font-size: 0.85rem;
  color: var(--nf-text-muted);
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.nf-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

/* Enfant DIRECT uniquement : en sélecteur de descendance, cette règle
   attrapait aussi l'icône imbriquée dans .nf-toggle-visibility. Cette icône
   passait alors en absolute à left: 0.75rem dans un bouton lui-même en
   absolute — donc vidé de tout contenu en flux, large de ses seuls 0.6rem de
   padding — et l'œil débordait du champ par la droite. */
.nf-input-group > svg {
  position: absolute;
  left: 0.75rem;
  color: var(--nf-text-muted);
  pointer-events: none;
}

.nf-input {
  width: 100%;
  padding: 0.65rem 0.75rem 0.65rem 2.4rem;
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--nf-text);
  background: var(--nf-surface);
  transition: border-color var(--nf-transition), box-shadow var(--nf-transition);
}

/* Les champs des pages d'authentification (.nf-input-group, sans grille de
   formulaire derrière) et les champs explicitement marqués pleine largeur
   (.nf-field-full, ex. notes/descriptions) gardent 100% à toutes les tailles. */
.nf-input-group .nf-input,
.nf-field-full .nf-input {
  width: 100%;
}

.nf-input:focus {
  outline: none;
  border-color: var(--nf-primary);
  box-shadow: 0 0 0 3px var(--nf-primary-soft);
}

.nf-toggle-visibility {
  position: absolute;
  right: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nf-text-muted);
  padding: 0.3rem;
  display: flex;
}

/* Le bouton recouvre la droite du champ : sans réserve de place, un mot de
   passe long passerait dessous. */
.nf-input-group:has(.nf-toggle-visibility) .nf-input {
  padding-right: 2.4rem;
}

.nf-btn {
  width: 100%;
  padding: 0.75rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: var(--nf-primary-dark);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--nf-transition), transform var(--nf-transition);
}

.nf-btn:hover { background: var(--nf-primary); transform: translateY(-1px); }
.nf-btn:active { transform: scale(0.98); }

/* ---------- Layout général (sidebar + topbar) ---------- */

.nf-shell {
  display: grid;
  grid-template-columns: var(--nf-sidebar-w) 1fr;
  min-height: 100vh;
}

.nf-sidebar {
  background: var(--nf-primary-dark);
  color: #eaf6f6;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 14px;
  overflow-y: auto;
}

.nf-sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nf-sb-logo h1 {
  font-family: var(--nf-font-display);
  font-weight: 400;
  font-size: 17px;
  margin: 0;
  color: #fff;
}

.nf-sb-logo .tag {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12);
  padding: 3px 7px;
  border-radius: 5px;
  font-weight: 700;
}

.nf-sb-section {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  padding: 14px 10px 6px;
}

.nf-sb-nav { display: flex; flex-direction: column; gap: 2px; }

.nf-sb-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.18s, color 0.18s;
  text-decoration: none;
}

.nf-sb-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nf-sb-item.nf-sb-active { background: color-mix(in srgb, var(--nf-primary) 30%, rgba(255, 255, 255, 0.08) 30%) !important; color: #fff; font-weight: 600; }

.nf-sb-item .nf-sb-badge {
  margin-left: auto;
  background: var(--nf-urgent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.nf-sb-spacer { flex: 1; }

/* ---------- Bloc utilisateur en pied de sidebar (admin) ---------- */

.nf-sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nf-sb-user .nf-avatar {
  background: var(--nf-primary);
  color: #fff;
  flex-shrink: 0;
}

/* Div texte (nom + rôle) — prend l'espace restant */
.nf-sb-user > div:not(.nf-avatar) {
  flex: 1;
  min-width: 0;
}

.nf-sb-user .nm {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nf-sb-user .rl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le <form> est le flex child direct — c'est lui qu'on pousse à droite */
.nf-sb-user form {
  margin-left: auto;
  flex-shrink: 0;
}

.nf-sb-user .out {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.45);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s, color 0.16s;
}

.nf-sb-user .out:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nf-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--nf-primary-soft);
  color: var(--nf-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

/* ---------- Menu Paramètres (sidebar) : profil + Utilisateurs/Rôles/Déconnexion ---------- */

.nf-sb-settings { position: relative; }

.nf-sb-settings-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font: inherit;
  cursor: pointer;
  transition: background 0.18s;
}
.nf-sb-settings-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.nf-sb-settings-toggle.nf-sb-active { border-color: var(--nf-primary); background: rgba(255, 255, 255, 0.1); }
.nf-sb-settings-toggle .nf-avatar { background: var(--nf-primary); color: #fff; }
.nf-sb-settings-toggle .nm { font-size: 13px; font-weight: 600; line-height: 1.2; color: #fff; }
.nf-sb-settings-toggle .rl { font-size: 11px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }
.nf-sb-chevron { color: rgba(255, 255, 255, 0.55); flex-shrink: 0; transition: transform 0.18s; }

.nf-sb-submenu {
  margin-top: 6px;
  padding: 6px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nf-sb-submenu-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 4px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
}
.nf-sb-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.nf-sb-subitem:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nf-sb-subitem-active { color: #fff; font-weight: 600; }

/* Dans la barre latérale, « blanc et gras » ne se distinguait pas d'un simple
   survol : la page sélectionnée à l'intérieur d'un groupe reçoit donc la même
   mise en évidence que celle d'un élément de premier niveau
   (.nf-sb-item.nf-sb-active ci-dessus) — même couleur, même graisse, aucun
   style nouveau. Limité à .nf-sidebar : en barre horizontale, ce même
   sous-élément s'affiche sur fond clair et garde son style propre
   (.nf-tb-dropdown .nf-sb-subitem-active). */
.nf-sidebar .nf-sb-subitem.nf-sb-subitem-active {  background:  color-mix(in srgb, var(--nf-primary) 30%, rgba(255, 255, 255, 0.08) 30%) !important;}
.nf-sb-divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 4px 4px; }

.nf-main { display: flex; flex-direction: column; min-width: 0; }

.nf-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--nf-border);
  padding: 14px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.nf-topbar .nf-ttl h1 {
  font-family: var(--nf-font-display);
  font-weight: 400;
  font-size: 24px;
  margin: 0;
  line-height: 1;
}
.nf-topbar .nf-ttl p { margin: 4px 0 0; font-size: 12.5px; color: var(--nf-text-muted); }

.nf-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--nf-bg);
  border: 1px solid var(--nf-border);
  border-radius: 11px;
  padding: 9px 14px;
  width: 240px;
  color: var(--nf-text-muted);
}
.nf-search input {
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  outline: none;
  width: 100%;
  color: var(--nf-text);
}

.nf-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--nf-bg);
  border: 1px solid var(--nf-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nf-text-2);
  position: relative;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.nf-icon-btn:hover { background: var(--nf-primary-soft); color: var(--nf-primary); }

.nf-btn-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--nf-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 13.5px;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.nf-btn-new:hover { background: var(--nf-primary-dark); transform: translateY(-1px); }

/* Variante discrète de .nf-btn-new, pour les accès secondaires d'une barre
   d'outils : fond blanc au repos, couleur principale du site au survol.
   Le rembourrage est réduit de 1px par rapport à .nf-btn-new pour compenser
   la bordure, afin que les deux gardent exactement la même hauteur côte à côte. */
.nf-btn-soft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--nf-surface);
  color: var(--nf-text-2);
  padding: 9px 15px;
  border: 1px solid var(--nf-border);
  border-radius: 11px;
  font-weight: 600;
  font-size: 13.5px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  text-decoration: none;
  cursor: pointer;
}
.nf-btn-soft:hover {
  background: var(--nf-primary);
  border-color: var(--nf-primary);
  color: #fff;
  transform: translateY(-1px);
}

.nf-content { padding: 26px; flex: 1; }

/* ---------- Menu burger (mobile/tablette, quand le menu complet ne tient plus) ---------- */

.nf-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--nf-border);
  background: var(--nf-bg);
  color: var(--nf-text-2);
  cursor: pointer;
  flex-shrink: 0;
}
.nf-shell--topbar .nf-burger { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: #fff; }

.nf-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 30, 0.45);
  z-index: 90;
}

@media (max-width: 900px) {
  .nf-shell { grid-template-columns: 1fr; }
  .nf-burger { display: flex; }
  .nf-mobile-backdrop { display: block; }

  .nf-sidebar { display: none; }
  .nf-sidebar.nf-sidebar--open {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 300px;
    z-index: 100;
  }

  .nf-tb-nav { display: none; }
  .nf-tb-nav.nf-tb-nav--open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--nf-primary-dark);
    padding: 10px 16px 16px;
    z-index: 100;
    box-shadow: var(--nf-shadow-lg);
  }
  .nf-tb-nav.nf-tb-nav--open .nf-tb-item { width: 100%; justify-content: flex-start; }
  .nf-tb-nav.nf-tb-nav--open .nf-tb-group { width: 100%; flex-direction: column; align-items: stretch; }
  .nf-tb-nav.nf-tb-nav--open .nf-tb-dropdown { position: static; box-shadow: none; margin-top: 4px; }

  .nf-search { width: 160px; }
}

/* ---------- Variante menu_position = topbar (sans sidebar) ---------- */

.nf-shell--topbar { grid-template-columns: 1fr; }
.nf-shell--topbar .nf-topbar {
  flex-wrap: wrap;
  gap: 24px;
  background: var(--nf-primary-dark);
  background-image:
    radial-gradient(120% 140% at 78% -10%, rgba(120, 130, 160, 0.34) 0%, rgba(40, 44, 60, 0.10) 34%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(90% 120% at 8% 0%, rgba(90, 98, 120, 0.18) 0%, rgba(0, 0, 0, 0) 45%);
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nf-tb-logo { display: flex; align-items: center; flex-shrink: 0; }
.nf-tb-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nf-tb-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.nf-tb-item:hover { background: color-mix(in oklab, var(--nf-primary) 22%, transparent); color: #fff; }
.nf-tb-active { background: color-mix(in oklab, var(--nf-primary) 38%, transparent); color: #fff; font-weight: 600; }

/* ---------- Groupes de menu personnalisés (topbar) ---------- */

.nf-tb-group { position: relative; display: flex; align-items: center; }

/* ---------- Menu Paramètres (topbar) : profil + dropdown ---------- */

.nf-tb-settings { position: relative; }

.nf-tb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 11px;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  transition: background 0.18s;
}
.nf-tb-user:hover { background: color-mix(in oklab, var(--nf-primary) 18%, transparent); }
.nf-tb-user.nf-tb-active { background: color-mix(in oklab, var(--nf-primary) 30%, transparent); }
.nf-tb-user .nf-avatar { background: color-mix(in oklab, var(--nf-primary) 55%, transparent); color: #fff; }
.nf-tb-user .nm { font-size: 13px; font-weight: 600; line-height: 1.2; color: #fff; }
.nf-tb-user .rl { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
.nf-tb-user > i { color: rgba(255, 255, 255, 0.6); flex-shrink: 0; transition: transform 0.18s; }

.nf-tb-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 220px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-lg);
  box-shadow: var(--nf-shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nf-tb-dropdown .nf-sb-submenu-title { color: var(--nf-text-muted); padding: 6px 8px 4px; }
.nf-tb-dropdown .nf-sb-subitem { color: var(--nf-text-2); }
.nf-tb-dropdown .nf-sb-subitem:hover { background: var(--nf-bg); color: var(--nf-text); }
.nf-tb-dropdown .nf-sb-subitem-active { color: var(--nf-primary); }
.nf-tb-dropdown .nf-sb-divider { background: var(--nf-border); }

[x-cloak] { display: none !important; }

@media (max-width: 900px) {
  .nf-tb-nav { display: none; }
}

.nf-fadein { animation: nf-fadein 0.35s ease; }
@keyframes nf-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Page (sans shell, ex. pages d'erreur) ---------- */

.nf-page { padding: 1.5rem; }

.nf-link-muted {
  color: var(--nf-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--nf-transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nf-link-muted:hover { color: var(--nf-text); }
.nf-link-active { color: var(--nf-primary); font-weight: 700; }

/* ---------- KPI ---------- */

.nf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 1100px) { .nf-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nf-kpi-grid { grid-template-columns: 1fr; } }

.nf-kpi {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-lg);
  padding: 20px;
}
.nf-kpi .top { display: flex; align-items: center; justify-content: space-between; }
.nf-kpi .ic {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.nf-kpi .delta {
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 999px;
}
.nf-kpi .delta.up { color: var(--nf-emerald); background: rgba(45, 106, 79, 0.12); }
.nf-kpi .delta.down { color: var(--nf-urgent); background: rgba(217, 74, 45, 0.12); }
.nf-kpi .num { font-family: var(--nf-font-display); font-size: 42px; line-height: 1; margin-top: 16px; }
.nf-kpi .lbl { font-size: 13px; color: var(--nf-text-muted); margin-top: 6px; }

/* ---------- Hero (tableau de bord) : même traitement visuel sombre que le
   menu_position=topbar, indépendant du mode de menu choisi par l'établissement. ---------- */

.nf-hero {
  position: relative;
  background: var(--nf-primary-dark);
  background-image:
    radial-gradient(120% 140% at 78% -10%, rgba(120, 130, 160, 0.34) 0%, rgba(40, 44, 60, 0.10) 34%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(90% 120% at 8% 0%, rgba(90, 98, 120, 0.18) 0%, rgba(0, 0, 0, 0) 45%);
  color: #fff;
  border-radius: var(--nf-radius-lg);
  padding: 26px 28px 30px;
  margin-top: 22px;
  margin-bottom: 22px;
  overflow: hidden;
}


.nf-hero-greeting {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 13px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
.nf-hero-title {
  margin: 16px 0 0;
  font-family: var(--nf-font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.nf-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.nf-hero-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.nf-hero-stat {
  width: 140px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 15px;
}
.nf-hero-stat .top { display: flex; align-items: flex-start; justify-content: space-between; }
.nf-hero-stat .num { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; }
.nf-hero-stat .ic {
  width: 30px; height: 30px; border-radius: 9px;
  background: color-mix(in oklab, var(--nf-primary) 45%, transparent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nf-hero-stat .lbl { margin-top: 10px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.78); line-height: 1.3; }
@media (max-width: 900px) { .nf-hero-row { flex-direction: column; align-items: stretch; } .nf-hero-stats { width: 100%; } .nf-hero-stat { flex: 1; width: auto; } }

/* ---------- Panels ---------- */

.nf-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .nf-cols { grid-template-columns: 1fr; } }

.nf-cols-60-40 { display: grid; grid-template-columns: 60% 40%; gap: 16px; }
@media (max-width: 1000px) { .nf-cols-60-40 { grid-template-columns: 1fr; } }

.nf-panel {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.nf-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--nf-border);
  flex-wrap: wrap; gap: 10px;
}
.nf-panel-head h3 { margin: 0; font-size: 15.5px; font-weight: 700; }
.nf-panel-head .nf-link-muted { font-size: 13px; color: var(--nf-primary); font-weight: 600; }
.nf-panel-body { padding: 8px 20px 18px; }

/* ---------- Calendrier des jours fériés (/feries) ---------- */

.nf-fcal { background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-lg); padding: 1.25rem; }
.nf-fcal-head, .nf-fcal-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.nf-fcal-head { margin-bottom: 6px; }
.nf-fcal-head span { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nf-text-muted); }
.nf-fcal-cell { position: relative; min-height: 96px; border: 1px solid var(--nf-border-2); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nf-fcal-cell.vide { border: none; }
.nf-fcal-cell.weekend { background: var(--nf-bg); }
.nf-fcal-cell.aujourdhui { border-color: var(--nf-primary); box-shadow: inset 0 0 0 1px var(--nf-primary); }
.nf-fcal-cell .j { position: relative; pointer-events: none; font-size: 12px; font-weight: 600; color: var(--nf-text-2); }
.nf-fcal-cell.aujourdhui .j { color: var(--nf-primary); }
/* Lien qui couvre toute la case (ajout d'un férié) ; les puces sont posées au-dessus. */
.nf-fcal-add { position: absolute; inset: 0; border-radius: 8px; transition: background 0.12s; }
.nf-fcal-add:hover { background: var(--nf-primary-soft); opacity: 0.55; }
.nf-fcal-chip { position: relative; display: block; background: var(--nf-primary-soft); color: var(--nf-primary-dark); border-radius: 6px; padding: 2px 6px; font-size: 11.5px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
a.nf-fcal-chip:hover { background: var(--nf-primary); color: #fff; }
@media (max-width: 700px) {
  .nf-fcal { padding: 0.75rem; }
  .nf-fcal-cell { min-height: 64px; padding: 4px; }
  .nf-fcal-chip { font-size: 10.5px; padding: 1px 4px; }
}

/* ---------- Alerte de formulaire (erreur renvoyée par le serveur : chevauchement, saisie refusée…) ----------
   Un bandeau rouge avec icône, qui se secoue une fois à l'affichage pour attirer l'œil (sauf si l'utilisateur
   demande moins d'animation). `role="alert"` : les lecteurs d'écran l'annoncent. */
.nf-alerte { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.nf-alerte[hidden] { display: none; }
.nf-alerte svg { flex: none; margin-top: 1px; }
.nf-alerte--erreur {
  background: rgba(217, 74, 45, 0.08); border: 1px solid rgba(217, 74, 45, 0.35); border-left: 4px solid var(--nf-danger);
  color: var(--nf-danger); animation: nf-alerte-secousse 0.4s ease;
}
.nf-alerte--attention { background: rgba(217, 138, 27, 0.1); border: 1px solid rgba(217, 138, 27, 0.4); border-left: 4px solid #d98a1b; color: #8a5a0b; }
@keyframes nf-alerte-secousse { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .nf-alerte--erreur { animation: none; } }

/* ---------- Créneaux d'un rendez-vous (modale « Nouveau rendez-vous / insertion / rattrapage ») ----------
   Une grille de pastilles d'heure : autant par ligne que la place le permet. Le créneau choisi se remplit ;
   le bouton radio couvre toute la pastille (invisible) pour que la validation du formulaire reste ancrée dessus. */
.nf-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 0.5rem; }
.nf-slot {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.6rem;
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--nf-text);
  background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: 10px; cursor: pointer;
  transition: border-color var(--nf-transition), background var(--nf-transition);
}
.nf-slot:hover { border-color: var(--nf-primary); }
.nf-slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nf-slot:has(input:checked) { background: var(--nf-primary-soft); border-color: var(--nf-primary); color: var(--nf-primary-dark); font-weight: 700; }
.nf-slot:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--nf-primary-soft); }
.nf-slot--actuel { border-style: dashed; }
.nf-slots-vide { grid-column: 1 / -1; font-size: 12.5px; color: var(--nf-text-muted); }

/* Jours de consultation d'un médecin : une étiquette par jour, celle du jour de la date choisie est remplie. */
.nf-jours { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--nf-text-muted); }
.nf-jours-titre { margin-right: 2px; font-weight: 600; }
.nf-tag { display: inline-flex; align-items: center; padding: 2px 10px; font-size: 12px; font-weight: 600; color: var(--nf-text-2); background: var(--nf-bg); border: 1px solid var(--nf-border); border-radius: 999px; }
.nf-tag--on { color: var(--nf-primary-dark); background: var(--nf-primary-soft); border-color: var(--nf-primary); }

/* Fiche du patient choisi (patient-fiche-rdv.js, dans un formulaire de rendez-vous ou d'entente) : ses champs se
   rangent sur autant de colonnes que la place le permet (150 px au moins) au lieu des deux colonnes du formulaire. */
#patient-fiche-box .nf-form-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#patient-fiche-box .nf-form-grid > .nf-field { grid-column: auto; }
#patient-fiche-box .nf-form-grid > .nf-field.nf-field-full { grid-column: 1 / -1; }

/* ---------- Détails d'un rendez-vous (modale) ---------- */

.nf-rdv-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--nf-border); }
.nf-rdv-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* Cartes d'action (accueil du patient, SMS, annulation) : autant par ligne que la place le permet. */
.nf-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; }
.nf-carte-action { margin: 0; padding: 0.8rem 0.9rem; background: var(--nf-bg); border: 1px solid var(--nf-border); border-radius: 12px; min-width: 0; }
.nf-carte-action--danger { border-color: rgba(217, 74, 45, 0.3); }
.nf-carte-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.55rem; font-size: 12.5px; font-weight: 700; color: var(--nf-text-2); }
.nf-carte-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.nf-carte-ligne .nf-input { width: auto; flex: 1 1 110px; min-width: 0; padding: 0.35rem 0.5rem; font-size: 13px; }
.nf-carte-action .nf-btn { width: auto; padding: 0.35rem 0.85rem; font-size: 12.5px; }

/* ---------- Mini chart (barres) ---------- */

.nf-chart-legend { display: flex; gap: 18px; padding: 0 4px 10px; flex-wrap: wrap; }
.nf-chart-legend span { font-size: 12px; color: var(--nf-text-2); display: inline-flex; align-items: center; gap: 7px; }
.nf-chart-legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- Schedule list ---------- */

.nf-sched-list { display: flex; flex-direction: column; }
.nf-sched-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--nf-border); }
.nf-sched-item:last-child { border-bottom: 0; }
.nf-sched-item .who { flex: 1; min-width: 0; }
.nf-sched-item .who .p { font-weight: 600; font-size: 14px; }
.nf-sched-item .who .d { font-size: 12px; color: var(--nf-text-muted); margin-top: 2px; }

/* ---------- Badges de statut ---------- */

.nf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--nf-border);
  color: var(--nf-text-muted);
}

.nf-badge--present {
  background: var(--nf-primary-soft);
  color: var(--nf-primary);
}

.nf-badge--en_cours {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}

.nf-badge--actif,
.nf-badge--confirme,
.nf-badge--payee,
.nf-badge--publie,
.nf-badge--honore,
.nf-badge--arrive,
.nf-badge--disponible {
  background: rgba(45, 106, 79, 0.13);
  color: var(--nf-emerald);
}

.nf-badge--suspendu,
.nf-badge--annule,
.nf-badge--annulee,
.nf-badge--absent,
.nf-badge--rejetee,
.nf-badge--maintenance {
  background: rgba(182, 64, 42, 0.12);
  color: var(--nf-danger);
}

.nf-badge--en_provisionnement,
.nf-badge--en_attente,
.nf-badge--brouillon,
.nf-badge--occupee {
  background: rgba(192, 138, 62, 0.16);
  color: var(--nf-gold-ink);
}

.nf-badge--termine,
.nf-badge--inactif,
.nf-badge--cloturee,
.nf-badge--standard {
  background: var(--nf-bg);
  color: var(--nf-text-muted);
}

/* Entente « nouvelle » : aucun agent n'a encore ouvert son détail. */
.nf-badge--nouveau {
  background: var(--nf-primary-soft);
  color: var(--nf-primary);
  box-shadow: inset 0 0 0 1px var(--nf-primary-tint);
}

.nf-badge--insertion {
  background: rgba(192, 138, 62, 0.16);
  color: var(--nf-gold-ink);
}

.nf-badge--rattrapage {
  background: var(--nf-primary-soft);
  color: var(--nf-primary);
}

/* ---------- Tabs ---------- */

.nf-tabs { display: flex; gap: 1.1rem; border-bottom: 1px solid var(--nf-border); margin-bottom: 0.85rem; }
.nf-tab {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0.55rem;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nf-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--nf-transition), border-color var(--nf-transition);
}
.nf-tab:hover { color: var(--nf-text); }
.nf-tab.is-active { color: var(--nf-primary); border-bottom-color: var(--nf-primary); }
/* Onglets d'une page (activité du patient) : plus grands, avec icône et compteur, et défilement si l'écran est étroit. */
.nf-tabs--grands { gap: 1.5rem; margin-bottom: 1.1rem; overflow-x: auto; }
.nf-tabs--grands .nf-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 0 0.7rem; font-size: 14px; white-space: nowrap; }
.nf-tabs--grands .nf-tab svg { flex: none; }
section[hidden] { display: none; }

/* ---------- Switch ---------- */

.nf-switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.nf-switch input { opacity: 0; width: 0; height: 0; }
.nf-switch .nf-slider {
  position: absolute; inset: 0; cursor: pointer;
  background-color: var(--nf-border);
  transition: background-color var(--nf-transition);
  border-radius: 999px;
}
.nf-switch .nf-slider::before {
  position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: #fff; transition: transform var(--nf-transition); border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.nf-switch input:checked + .nf-slider { background-color: var(--nf-emerald); }
.nf-switch input:checked + .nf-slider::before { transform: translateX(18px); }

.nf-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.nf-meta-grid dt { font-size: 0.78rem; color: var(--nf-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.nf-meta-grid dd { margin: 0; font-size: 0.95rem; }

/* ---------- Toolbar / filtres / pagination ---------- */

.nf-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.nf-toolbar .nf-search { width: 240px; margin-left: 0; }

.nf-seg { display: flex; gap: 4px; background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: 11px; padding: 4px; flex-wrap: wrap; }
.nf-seg button, .nf-seg a {
  padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--nf-text-muted);
  transition: all 0.15s; border: none; background: none; cursor: pointer; text-decoration: none;
}
.nf-seg button.on, .nf-seg a.on { background: var(--nf-primary-soft); color: var(--nf-primary); }

.nf-sel {
  font: inherit; font-size: 13.5px; padding: 9px 13px; border-radius: 11px;
  border: 1px solid var(--nf-border); background: var(--nf-surface); color: var(--nf-text-2); font-weight: 600;
}

/* Ligne de filtres compacte : tous les champs sur une seule ligne tant que la
   largeur le permet, puis retour à la ligne propre sur écran étroit.
   Les champs gardent une largeur modérée (ni étirés à 100 % ni démesurés) et
   une hauteur commune, boutons compris, pour s'aligner côte à côte.
   .nf-input porte un rembourrage gauche de 2,4rem prévu pour une icône : il
   est ramené à celui des listes ici, sans quoi les dates paraissent décalées.

   select.js remplace chaque <select> par un .nf-select-wrap (largeur 100 %)
   contenant un bouton qui recopie la classe .nf-sel : c'est ce conteneur, et
   non le <select>, qui est l'élément de la ligne — d'où les règles dédiées. */
.nf-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.nf-filter-row .nf-sel,
.nf-filter-row .nf-input,
.nf-filter-row .nf-btn-new {
  box-sizing: border-box; height: 38px; margin: 0;
}
.nf-filter-row .nf-sel { width: auto; max-width: 165px; padding: 0 10px; }
.nf-filter-row .nf-input { width: 124px; padding: 0 8px; font-size: 13px; }
.nf-filter-row .nf-btn-new { padding: 0 14px; }
/* Largeur fixe : le bouton ne doit pas changer de taille selon l'option choisie. */
.nf-filter-row .nf-select-wrap { width: auto; flex: 0 0 auto; }
.nf-filter-row .nf-select-wrap .nf-select-trigger { width: 156px; max-width: none; }
/* Le panneau suit la largeur du bouton par défaut : trop étroit pour lire les options. */
.nf-filter-row .nf-select-wrap .nf-select-panel { right: auto; min-width: 220px; }
/* Réinitialiser : simple icône (pour ne pas allonger la ligne), teintée de la
   couleur d'alerte et cerclée pour rester bien visible. */
.nf-filter-reset {
  box-sizing: border-box; width: 38px; height: 38px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; border: 1px solid rgba(217, 74, 45, 0.35);
  background: rgba(217, 74, 45, 0.08); color: var(--nf-urgent);
  text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nf-filter-reset:hover { background: var(--nf-urgent); border-color: var(--nf-urgent); color: #fff; }
.nf-filter-reset svg { stroke-width: 2.75; }
.nf-filter-date { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--nf-text-muted); }
/* Champ avec son libellé au-dessus (ex. Statut, Statut modalité). Quand une ligne en contient
   (.nf-filter-row--labels), les champs s'alignent par le bas : les dates et le bouton restent
   sur la ligne des listes, sans être remontés vers les libellés. */
.nf-filter-row--labels { align-items: flex-end; }
.nf-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nf-filter-field > label { font-size: 12px; font-weight: 600; color: var(--nf-text-muted); line-height: 1.2; }
/* Dans un champ en colonne, la liste ne doit pas hériter du flex-basis de la ligne (il jouerait sur la hauteur). */
.nf-filter-row .nf-filter-field .nf-select-wrap { flex: 0 0 auto; }

/* Zone de filtre en grille (beaucoup de champs, ex. statistiques d'imagerie) : chaque champ avec son
   libellé au-dessus, autant de colonnes que la largeur en offre (170 px au minimum, 1 colonne sur
   mobile), puis une barre d'actions : le résumé à gauche, les boutons à droite. Sous 560 px les
   boutons passent sous le résumé et se partagent la ligne. */
.nf-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 0.85rem 1rem; }
.nf-filter-grid .nf-input,
.nf-filter-grid .nf-sel,
.nf-filter-grid .nf-select-trigger { box-sizing: border-box; width: 100%; max-width: none; height: 38px; margin: 0; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 13px; }
.nf-filter-grid .nf-select-wrap { width: 100%; }
.nf-filter-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--nf-border); }
.nf-filter-resume { font-size: 12.5px; color: var(--nf-text-muted); }
.nf-filter-actions-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.nf-filter-actions-btns .nf-btn-soft,
.nf-filter-actions-btns .nf-btn-new { box-sizing: border-box; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; }
@media (max-width: 560px) {
  .nf-filter-actions-btns { width: 100%; margin-left: 0; }
  .nf-filter-actions-btns .nf-btn-soft,
  .nf-filter-actions-btns .nf-btn-new { flex: 1 1 0; }
}

/* Sous 760px les champs se partagent la ligne deux par deux, le bouton prend
   le reste de la ligne : rien ne déborde et les zones de saisie restent assez
   larges pour le doigt. */
@media (max-width: 760px) {
  .nf-filter-row { width: 100%; }
  .nf-filter-row .nf-select-wrap,
  .nf-filter-row .nf-filter-date,
  .nf-filter-row .nf-filter-field { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .nf-filter-row .nf-select-wrap .nf-select-trigger { width: 100%; }
  .nf-filter-row .nf-sel { max-width: none; }
  .nf-filter-row .nf-filter-date .nf-input { flex: 1; width: auto; min-width: 0; }
  .nf-filter-row .nf-btn-new { flex: 1 1 0; justify-content: center; }
  .nf-filter-row .nf-select-wrap .nf-select-panel { min-width: 0; right: 0; }
}


/* ---------- Pages de statistiques (imagerie, laboratoire) ---------- */
/* Grille de graphiques : deux colonnes, une seule sous 900px. Les toiles
   Chart.js ont besoin d'une hauteur fixe côté conteneur, sinon elles
   grandissent indéfiniment (maintainAspectRatio: false). */
.nf-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; margin-top: 1rem; }
.nf-stats-grid > .nf-panel { margin: 0; min-width: 0; }
.nf-stats-grid .nf-pleine-largeur { grid-column: 1 / -1; }
.nf-stats-canvas { position: relative; height: 260px; padding: 0.35rem 0.25rem 0.5rem; }
.nf-stats-canvas.haut { height: 320px; }
.nf-stats-vide { color: var(--nf-text-muted); font-size: 12.5px; padding: 1.25rem 0.25rem; margin: 0; text-align: center; }
.nf-stats-legende { display: flex; flex-direction: column; padding: 0 0.25rem 0.5rem; margin-top: 0.25rem; border-top: 1px solid var(--nf-border); font-size: 12.5px; color: var(--nf-text-2); }
.nf-stats-legende > span { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--nf-border); }
.nf-stats-legende > span:last-child { border-bottom: 0; }
.nf-stats-legende i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.nf-stats-legende .lib { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nf-stats-legende .val { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--nf-text); }
.nf-stats-legende .pct { margin-left: 0.6rem; min-width: 3.4em; display: inline-block; text-align: right; font-weight: 500; color: var(--nf-text-muted); }
@media (max-width: 900px) { .nf-stats-grid { grid-template-columns: 1fr; } }
/* Rangées à proportions fixes : --tiers = 1/3 + 2/3, --moitie = 1/2 + 1/2. Une seule colonne sous 900 px. */
.nf-stats-grid--tiers, .nf-stats-grid--moitie { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) {
  .nf-stats-grid--tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .nf-stats-grid--moitie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Accordéons : un summary en display:flex perd son triangle natif, d'où un
   chevron explicite, orienté par l'état ouvert/fermé. */
.nf-stats-accordeon > summary { list-style: none; }
.nf-stats-accordeon > summary::-webkit-details-marker { display: none; }
.nf-stats-accordeon > summary .nf-stats-chevron { margin-left: auto; transition: transform var(--nf-transition); }
.nf-stats-accordeon[open] > summary .nf-stats-chevron { transform: rotate(180deg); }

/* ---------- Table ---------- */

/* overflow-x: auto et non hidden. Avec « hidden », un tableau plus large que
   son conteneur était rogné SANS barre de défilement : la dernière colonne —
   celle des actions — devenait inatteignable. « auto » conserve le découpage
   des coins arrondis (toute valeur autre que « visible » crée un contexte de
   rognage) tout en rendant le débordement défilable. */
.nf-table-wrap {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nf-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--nf-surface);
}
.nf-table-wrap .nf-table { border-radius: 0; box-shadow: none; }

.nf-table th, .nf-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--nf-border-2); font-size: 14px; vertical-align: middle; }
.nf-table th {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nf-text-muted); font-weight: 700;
  background: var(--nf-bg); border-bottom: 1px solid var(--nf-border);
  white-space: nowrap;
}
.nf-table tbody tr:last-child td { border-bottom: 0; }
.nf-table tbody tr { transition: background var(--nf-transition); }
.nf-table tbody tr:hover { background: var(--nf-bg); }

/* Écran étroit : on resserre les cellules avant de recourir au défilement, ce
   qui suffit souvent à faire tenir une colonne d'actions de plus. Sans effet
   au-delà de ces largeurs. */
@media (max-width: 1200px) {
  .nf-table th, .nf-table td { padding: 12px 12px; }
}
@media (max-width: 760px) {
  .nf-table th, .nf-table td { padding: 10px 9px; font-size: 13px; }
}

/* Tableaux posés directement dans un panneau ou une carte, sans
   .nf-table-wrap : leur conteneur les rognait (.nf-panel porte
   « overflow: hidden ») ou les laissait déborder hors de l'écran, sans
   défilement possible dans les deux cas. Le sélecteur ne vise que les
   conteneurs qui contiennent réellement un tableau — la carte de connexion,
   par exemple, n'est pas concernée. */
.nf-panel-body:has(> table),
.nf-card:has(> table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nf-cell-avatar { display: flex; align-items: center; gap: 12px; }
.nf-cell-avatar .nm { font-weight: 600; }
.nf-cell-avatar .sub { font-size: 12px; color: var(--nf-text-muted); }

.nf-cell-dt .d { font-weight: 600; }
.nf-cell-dt .t { font-size: 12.5px; color: var(--nf-text-muted); }

.nf-row-act { display: flex; gap: 4px; justify-content: flex-end; }
.nf-row-act button, .nf-row-act a {
  width: 32px; height: 32px; border-radius: 8px; color: var(--nf-text-muted);
  transition: background 0.15s, color 0.15s; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; text-decoration: none;
}
.nf-row-act button:hover, .nf-row-act a:hover { background: var(--nf-primary-soft); color: var(--nf-primary); }
.nf-row-act .danger:hover { background: rgba(217, 74, 45, 0.14); color: var(--nf-urgent); }

/* ── Action chips (espace médecin) ──────────────────────────────── */
.nf-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.28rem 0.65rem; border-radius: 999px;
  border: 1px solid var(--nf-border); background: var(--nf-surface);
  color: var(--nf-text-2); font-size: 11.5px; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.nf-chip:hover { background: var(--nf-primary-soft); border-color: var(--nf-primary-tint); color: var(--nf-primary); }
.nf-chip--primary { background: var(--nf-primary-dark); border-color: transparent; color: #fff; }
/* Le texte reste blanc au survol : sans cette couleur, .nf-chip:hover (texte en couleur principale) s'appliquait aussi aux variantes
   pleines et le texte devenait invisible sur le fond de même teinte. */
.nf-chip--primary:hover, .nf-chip--primary:focus-visible { background: var(--nf-primary); border-color: transparent; color: #fff; }
.nf-chip--success { background: #059669; border-color: transparent; color: #fff; }
.nf-chip--success:hover, .nf-chip--success:focus-visible { background: #047857; border-color: transparent; color: #fff; }

.nf-table-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--nf-border); font-size: 13px; color: var(--nf-text-muted); flex-wrap: wrap; gap: 10px; }

/* Le pied (compteur + pagination) est à l'intérieur du conteneur devenu
   défilable : sans cela, défiler vers la droite pour atteindre la colonne
   d'actions l'emmenait hors de l'écran. Il reste donc collé au bord gauche du
   cadre visible.
   « sticky » plutôt qu'« absolute » : en absolute il quitterait le flux, ne
   donnerait plus sa hauteur au conteneur et viendrait recouvrir la dernière
   ligne du tableau — et il défilerait malgré tout avec le contenu, un élément
   positionné restant dans la zone de défilement de son conteneur. */
.nf-table-wrap .nf-table-foot {
  position: sticky;
  left: 0;
  background: var(--nf-surface);
}
.nf-pager { display: flex; gap: 4px; }
.nf-pager button, .nf-pager a {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--nf-border); color: var(--nf-text-2); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--nf-surface);
}
.nf-pager .on { background: var(--nf-primary); color: #fff; border-color: var(--nf-primary); }
/* « disabled » n'a aucun effet natif sur un <a> : sans pointer-events, une
   flèche grisée en bord de plage restait cliquable. */
.nf-pager [disabled] { opacity: 0.4; cursor: default; pointer-events: none; }
.nf-pager a:not(.on):not([disabled]):hover { background: var(--nf-primary-soft); border-color: var(--nf-primary-tint); color: var(--nf-primary); }
/* Ellipse entre deux plages de numéros : repère visuel, pas un lien — ni
   bordure ni fond, et de la même largeur qu'un numéro pour garder le rythme. */
.nf-pager .gap {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--nf-text-muted); font-weight: 600; user-select: none;
}

/* ---------- Agenda ---------- */

.nf-agenda { background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-lg); overflow: hidden; }
.nf-agenda-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--nf-border); flex-wrap: wrap; }
.nf-agenda-head .today-lbl { font-weight: 700; font-size: 15px; text-transform: capitalize; }
/* Type de machine : largeur minimale pour lire « Échographie » ou un type plus long sans le tronquer.
   select.js remplace le <select> par un .nf-select-wrap (largeur 100 %) : c'est lui qu'on dimensionne. */
.nf-agenda-head select.nf-agenda-type { min-width: 210px; }
.nf-agenda-head .nf-select-wrap { width: auto; flex: 0 0 auto; min-width: 210px; }
.nf-agenda-head .nf-select-wrap .nf-select-trigger { width: 100%; max-width: none; }
.nf-agenda-grid { display: grid; overflow-x: auto; }
.nf-agenda-grid .corner { border-bottom: 1px solid var(--nf-border); border-right: 1px solid var(--nf-border); }
.nf-ag-doc { padding: 12px; border-bottom: 1px solid var(--nf-border); border-right: 1px solid var(--nf-border-2); text-align: center; }
.nf-ag-doc .nm { font-weight: 600; font-size: 13px; }
.nf-ag-doc .sp { font-size: 11px; color: var(--nf-text-muted); }
.nf-ag-time { padding: 8px; font-size: 11px; color: var(--nf-text-muted); text-align: right; border-right: 1px solid var(--nf-border); border-bottom: 1px solid var(--nf-border-2); font-weight: 600; }
.nf-ag-cell { border-right: 1px solid var(--nf-border-2); border-bottom: 1px solid var(--nf-border-2); padding: 4px; min-height: 56px; position: relative; }
.nf-ag-appt {
  border-radius: 8px; padding: 6px 8px; font-size: 11.5px; line-height: 1.3; height: 100%;
  border-left: 3px solid var(--nf-primary); background: var(--nf-primary-soft); color: var(--nf-primary-dark);
  overflow: hidden;
}
.nf-ag-appt .p { font-weight: 700; }
.nf-ag-appt .m { opacity: 0.8; }
.nf-ag-appt.att { border-left-color: var(--nf-gold); background: rgba(192, 138, 62, 0.14); color: var(--nf-gold-ink); }
.nf-ag-appt.term { border-left-color: var(--nf-text-muted); background: var(--nf-bg); color: var(--nf-text-muted); }

/* ---------- Calendrier de planning (liste de travail) ---------- */

.nf-planning-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--nf-border); flex-wrap: wrap; }
.nf-planning-toolbar .day-lbl { font-weight: 700; font-size: 14px; text-transform: capitalize; }
.nf-planning-day-nav { display: flex; align-items: center; gap: 4px; }
.nf-planning-day-nav button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--nf-border); background: var(--nf-surface); color: var(--nf-text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nf-planning-day-nav button:hover { background: var(--nf-bg); }
.nf-planning-grid { display: flex; overflow-x: auto; background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-lg); }
.nf-planning-time-axis { flex: 0 0 56px; position: relative; border-right: 1px solid var(--nf-border); }
.nf-planning-time-axis .t { position: absolute; left: 0; right: 6px; text-align: right; font-size: 10.5px; color: var(--nf-text-muted); transform: translateY(-6px); }
.nf-planning-col { flex: 0 0 200px; border-right: 1px solid var(--nf-border-2); }
.nf-planning-col-head { padding: 10px; text-align: center; border-bottom: 1px solid var(--nf-border); }
.nf-planning-col-head .nm { font-weight: 600; font-size: 13px; }
/* Jour courant (vue semaine) : colonne teintée, en-tête plus marqué. */
.nf-planning-col.aujourdhui { background: var(--nf-primary-soft); }
.nf-planning-col.aujourdhui .nf-planning-col-head { background: var(--nf-primary-tint, var(--nf-primary-soft)); border-bottom-color: var(--nf-primary); }
.nf-planning-col.aujourdhui .nf-planning-col-head .nm { color: var(--nf-primary-dark, var(--nf-primary)); }
.nf-planning-track { position: relative; background-image: repeating-linear-gradient(to bottom, var(--nf-border-2) 0, var(--nf-border-2) 1px, transparent 1px, transparent 60px); }
.nf-plan-block {
  position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 5px 7px; font-size: 11px; line-height: 1.3;
  border-left: 3px solid var(--nf-primary); background: var(--nf-primary-soft); color: var(--nf-primary-dark);
  overflow: hidden; cursor: pointer; transition: filter 0.12s;
}
.nf-plan-block:hover { filter: brightness(0.97); }
.nf-plan-block .h { font-weight: 700; }
.nf-plan-block .m { opacity: 0.85; }
.nf-plan-block.no-salle { border-left-color: var(--nf-gold); background: rgba(192, 138, 62, 0.14); color: var(--nf-gold-ink); }

/* ---------- Carrousel des machines d'imagerie ---------- */

.nf-machine-carousel { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.nf-machine-card {
  flex: 0 0 150px; border: 1px solid var(--nf-border); border-left: 4px solid var(--nf-primary); border-radius: var(--nf-radius-lg);
  background: var(--nf-surface); padding: 10px; cursor: pointer; transition: box-shadow 0.12s, transform 0.12s;
}
.nf-machine-card:hover { box-shadow: var(--nf-shadow-sm); transform: translateY(-1px); }
.nf-machine-card.on { box-shadow: 0 0 0 2px var(--nf-primary) inset; }
.nf-machine-card img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.nf-machine-card-noimg { width: 100%; height: 80px; border-radius: 8px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; background: var(--nf-bg); color: var(--nf-text-muted); }
.nf-machine-card .nm { font-weight: 600; font-size: 12.5px; margin-bottom: 4px; }

/* ---------- Grille de cartes (imagerie) ---------- */

.nf-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

/* Carte d'une demande dans la vue Grille : un corps cliquable (lien vers la fiche) et, en bas, un pied
   séparé par un trait avec les icônes d'action. Le corps prend toute la hauteur restante, le pied reste
   donc collé en bas quelle que soit la hauteur de la carte (toutes les cartes d'une ligne ont la même). */
.nf-demande-carte { padding: 0; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: hidden; border: 1px solid var(--nf-primary-tint); }
.nf-demande-carte-corps { flex: 1; display: flex; flex-direction: column; padding: 1.5rem; color: inherit; text-decoration: none; }
.nf-demande-carte-pied { border-top: 1px solid var(--nf-primary-tint); background: var(--nf-bg); padding: 0.4rem 0.75rem; }
/* Survol : la carte grossit à peine, sa bordure passe à la couleur primaire et son ombre prend une teinte primaire. */
.nf-demande-carte { position: relative; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.nf-demande-carte:hover, .nf-demande-carte:focus-within { transform: scale(1.02); z-index: 1; border-color: var(--nf-primary); box-shadow: 0 14px 30px -14px rgba(0, 127, 130, 0.4); }
@media (prefers-reduced-motion: reduce) {
  .nf-demande-carte { transition: none; }
  .nf-demande-carte:hover, .nf-demande-carte:focus-within { transform: none; }
}

/* ---------- Mini-calendrier mensuel ---------- */

.nf-mois-grid { background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-lg); padding: 12px; }
.nf-mois-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.nf-mois-cell { min-height: 64px; border: 1px solid var(--nf-border-2); border-radius: 8px; padding: 6px; cursor: pointer; transition: background 0.12s; }
.nf-mois-cell:hover { background: var(--nf-bg); }
.nf-mois-cell.vide { border: none; cursor: default; }
/* Jour courant (vue mois) : case teintée et cerclée. */
.nf-mois-cell.aujourdhui { background: var(--nf-primary-soft); border-color: var(--nf-primary); }
.nf-mois-cell.aujourdhui .j { color: var(--nf-primary-dark, var(--nf-primary)); }
.nf-mois-cell.aujourdhui .n { background: var(--nf-primary); color: #fff; }
.nf-mois-cell .j { font-size: 12px; font-weight: 600; color: var(--nf-text-2); }
.nf-mois-cell .n { margin-top: 6px; display: inline-block; background: var(--nf-primary-soft); color: var(--nf-primary-dark); border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700; }

/* ---------- Toasts ---------- */

#nf-toast-region {
  position: fixed; top: 1.25rem; right: 1.25rem;
  display: flex; flex-direction: column; gap: 0.6rem; z-index: 1000;
}
.nf-toast {
  background: var(--nf-text); color: #fff; padding: 0.75rem 1rem; border-radius: 10px;
  box-shadow: var(--nf-shadow); font-size: 0.9rem; min-width: 240px; animation: nf-toast-in 200ms ease;
}
.nf-toast--error { background: var(--nf-danger); }
.nf-toast--success { background: var(--nf-emerald); }

@keyframes nf-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nf-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(16px); } }

/* ---------- Modales (public/assets/js/modal.js) ---------- */

.nf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 5vh 1.5rem;
  animation: nf-modal-fade 150ms ease;
}
/* Fond assombri et flouté porté par un pseudo-élément, et non par l'overlay :
   un backdrop-filter sur l'overlay en faisait le repère de tous les éléments
   en position fixe qu'il contient (par exemple le panneau des listes
   déroulantes, select.js). Ce panneau se retrouvait alors rattaché à
   l'overlay — dont le défilement et la barre de défilement le décalaient —
   au lieu de la fenêtre. Ici l'overlay ne filtre rien : un élément fixe y est
   positionné par rapport à la fenêtre, comme partout ailleurs. */
.nf-modal-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(15, 31, 36, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
@keyframes nf-modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* Largeur proportionnelle au contenu. modal.js pose sm / md / lg selon ce que
   la modale contient (nombre de champs, présence d'un tableau) ; une vue peut
   forcer une taille avec data-modal-size. Sans classe : « md ».
     sm  460px  — 1 à 3 champs (une colonne)
     md  680px  — jusqu'à 8 champs (deux colonnes)
     lg  940px  — formulaires longs, tableaux (trois colonnes)
     xl  90vw   — agendas, dossiers, fiches (demandé explicitement par la vue)
   Le min(100%, …) laisse la boîte rétrécir sur un petit écran au lieu de
   déborder. */
.nf-modal-box {
  background: var(--nf-surface);
  border-radius: var(--nf-radius-lg);
  box-shadow: var(--nf-shadow-lg);
  width: min(100%, 680px);
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: nf-modal-pop 180ms ease;
}
.nf-modal-box.nf-modal-sm { width: min(100%, 460px); }
.nf-modal-box.nf-modal-md { width: min(100%, 680px); }
.nf-modal-box.nf-modal-ml { width: min(100%, 820px); }   /* entre md et lg : deux colonnes serrées (détails d'un rendez-vous) */
.nf-modal-box.nf-modal-lg { width: min(100%, 940px); }
@keyframes nf-modal-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.nf-modal-box.nf-modal-xl { width: 90vw; max-width: 90vw; }
/* w80 : 80 % de la fenêtre (fiche d'une facture), entre lg (940 px) et xl (90 %). */
.nf-modal-box.nf-modal-w80 { width: 80vw; max-width: 80vw; }

/* Le titre et le bouton de fermeture restent visibles pendant le défilement :
   c'est .nf-modal-box qui défile (max-height: 90vh + overflow-y: auto), donc
   « sticky » se cale sur elle. Un fond opaque est indispensable — sans lui le
   contenu défilerait en transparence derrière le titre — et le z-index place
   l'en-tête au-dessus du contenu non positionné du corps. Le rognage aux coins
   arrondis reste assuré par l'overflow de la boîte. */
.nf-modal-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--nf-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--nf-border);
}
.nf-modal-head h3 { margin: 0; font-family: var(--nf-font-display); font-weight: 800; font-size: 22px; }
.nf-modal-close {
  background: var(--nf-bg);
  border: 1px solid var(--nf-border);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--nf-text-muted);
  flex-shrink: 0;
}
.nf-modal-close:hover { background: var(--nf-border); color: var(--nf-text); }

.nf-modal-body { padding: 1.5rem; }
.nf-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--nf-border);
}

.nf-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
.nf-form-grid .nf-field-full { grid-column: 1 / -1; }

/* Dans une modale, le nombre de colonnes suit la largeur de la boîte : une
   colonne en sm, deux en md, trois en lg (colonnes d'au moins 230px). Les
   champs qui ont besoin de place — zone de texte, dépôt de fichier — occupent
   toute la ligne ; les autres (date, nombre, liste, texte court) se rangent
   côte à côte au lieu d'étirer chacun sur une ligne. */
.nf-modal-box .nf-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.nf-modal-box .nf-form-grid .nf-field:has(textarea),
.nf-modal-box .nf-form-grid .nf-field:has(input[type="file"]),
.nf-modal-box .nf-form-grid .nf-field:has(.nf-file-drop) {
  grid-column: 1 / -1;
}
.nf-modal-box .nf-form-grid .nf-field-full { grid-column: 1 / -1; }
.nf-modal-box textarea.nf-input { resize: vertical; }

/* Place de chaque champ d'un formulaire de modale selon son type et la largeur de la boîte.
   La grille compte 12 colonnes et la boîte (sm / md / lg posée par modal.js) fixe la part de chaque type :
     court  (date, heure, nombre, .nf-field-court) sm 6   md 4   lg 3   → 2, 3 ou 4 par ligne
     moyen  (texte, liste, e-mail, téléphone) sm 12  md 6   lg 4   → 1, 2 ou 3 par ligne
     long   (zone de texte, fichier, cases à cocher, .nf-field-full) → toute la ligne
   Sous 700 px de fenêtre la modale occupe tout l'écran : deux champs courts par ligne, un seul champ moyen ;
   sous 480 px, un seul champ par ligne. Les formulaires .nf-form-champs gardent leur grille de 6 colonnes
   (classes .nf-w-2 / .nf-w-4), et .nf-form-grid--dense sa propre grille. Pas de container query : elle
   rendrait le formulaire « contenant » des éléments fixes, et le panneau des listes déroulantes (select.js,
   position: fixed) serait mal placé.
   S'applique à la grille .nf-form-grid et à un formulaire dont les champs sont directement dans le <form>. */
.nf-modal-box { --nf-span-court: 4; --nf-span-moyen: 6; }
.nf-modal-box.nf-modal-sm { --nf-span-court: 6; --nf-span-moyen: 12; }
.nf-modal-box.nf-modal-lg, .nf-modal-box.nf-modal-xl, .nf-modal-box.nf-modal-w80 { --nf-span-court: 3; --nf-span-moyen: 4; }
@media (max-width: 700px) {
  .nf-modal-box, .nf-modal-box.nf-modal-sm, .nf-modal-box.nf-modal-md, .nf-modal-box.nf-modal-lg, .nf-modal-box.nf-modal-xl, .nf-modal-box.nf-modal-w80 { --nf-span-court: 6; --nf-span-moyen: 12; }
}
@media (max-width: 480px) {
  .nf-modal-box, .nf-modal-box.nf-modal-sm, .nf-modal-box.nf-modal-md, .nf-modal-box.nf-modal-lg, .nf-modal-box.nf-modal-xl, .nf-modal-box.nf-modal-w80 { --nf-span-court: 12; --nf-span-moyen: 12; }
}
/* Un champ de modale a le même retrait intérieur partout, sans style en ligne ; l'icône d'un .nf-input-group garde sa place. */
.nf-modal-box .nf-input { padding-left: 0.75rem; }
.nf-modal-box .nf-input-group > .nf-input { padding-left: 2.4rem; }
.nf-modal-box form:not(.nf-form-champs) .nf-form-grid:not(.nf-form-grid--dense),
.nf-modal-box form:not(.nf-form-champs):has(> .nf-field) {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.85rem 1rem; align-items: start;
}
/* Un champ qui reçoit peu de texte sans être une date (jour de la semaine, statut…) se déclare .nf-field-court. */
.nf-modal-box form:not(.nf-form-champs) .nf-form-grid:not(.nf-form-grid--dense) > .nf-field.nf-field-court,
.nf-modal-box form:not(.nf-form-champs):has(> .nf-field) > .nf-field.nf-field-court { grid-column: span var(--nf-span-court); }
/* Ce qui n'est pas un champ (titre, message, rangée de boutons) occupe toute la ligne. */
.nf-modal-box form:not(.nf-form-champs) .nf-form-grid:not(.nf-form-grid--dense) > :not(.nf-field),
.nf-modal-box form:not(.nf-form-champs):has(> .nf-field) > :not(.nf-field) { grid-column: 1 / -1; }
.nf-modal-box form:not(.nf-form-champs) .nf-form-grid:not(.nf-form-grid--dense) > .nf-field,
.nf-modal-box form:not(.nf-form-champs):has(> .nf-field) > .nf-field { grid-column: span var(--nf-span-moyen); margin: 0; min-width: 0; }
.nf-modal-box form:not(.nf-form-champs) .nf-form-grid:not(.nf-form-grid--dense) > .nf-field:not(.nf-field-full):has(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="number"]),
.nf-modal-box form:not(.nf-form-champs):has(> .nf-field) > .nf-field:not(.nf-field-full):has(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="number"]) { grid-column: span var(--nf-span-court); }
.nf-modal-box form:not(.nf-form-champs) .nf-form-grid:not(.nf-form-grid--dense) > .nf-field:has(textarea, input[type="file"], input[type="checkbox"], input[type="radio"], .nf-file-drop),
.nf-modal-box form:not(.nf-form-champs):has(> .nf-field) > .nf-field:has(textarea, input[type="file"], input[type="checkbox"], input[type="radio"], .nf-file-drop),
.nf-modal-box form:not(.nf-form-champs) .nf-form-grid:not(.nf-form-grid--dense) > .nf-field.nf-field-full,
.nf-modal-box form:not(.nf-form-champs):has(> .nf-field) > .nf-field.nf-field-full { grid-column: 1 / -1; }

/* ---------- Formulaire en sections (ex. modale « Nouveau rendez-vous » d'imagerie) ----------
   Chaque section regroupe des informations de même nature, sous un titre, et se sépare
   de la suivante par un .nf-divider. La grille .nf-form-grid ajuste le nombre de colonnes
   à la largeur de la modale ; la place de chaque champ dépend de son type (liste, texte
   court, zone de texte, fichier). */
.nf-form-section { margin: 0; }
.nf-form-section-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 0.85rem; font-size: 14px; font-weight: 700; color: var(--nf-primary-dark);
}
.nf-form-section-title svg { color: var(--nf-primary); flex: none; }
.nf-form-section .nf-field { margin-bottom: 0.75rem; }
.nf-form-section .nf-input { padding-left: 0.75rem; }
.nf-form-section textarea.nf-input { padding: 0.65rem 0.75rem; min-height: 80px; }
.nf-modal-box .nf-divider { margin: 1.25rem 0; }
.nf-form-info {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 1.1rem; padding: 0.65rem 0.85rem;
  font-size: 12.5px; line-height: 1.45; color: var(--nf-primary-dark);
  background: var(--nf-primary-soft); border-left: 3px solid var(--nf-primary); border-radius: var(--nf-radius-sm);
}
.nf-form-info svg { color: var(--nf-primary); flex: none; margin-top: 1px; }
.nf-form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }

/* « Examens à programmer » : un card de saisie (fond doux, couleur primaire) — machine et
   examen sur une ligne, date et heure sur la suivante, bouton centré — puis un tableau des
   examens déjà ajoutés. Les champs du card n'ont pas de name : seuls les champs cachés des
   lignes du tableau partent avec le formulaire. */
.nf-examen-card {
  padding: 1rem; background: var(--nf-primary-soft);
  border: 1px solid var(--nf-primary-tint); border-radius: var(--nf-radius-sm);
}
.nf-examen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.nf-examen-grid .nf-field { margin-bottom: 0.75rem; }
.nf-examen-actions { display: flex; justify-content: center; margin-top: 0.25rem; }
.nf-examen-erreur { margin: 0.6rem 0 0; font-size: 12.5px; font-weight: 600; color: var(--nf-danger); text-align: center; }
.nf-examen-erreur:empty { display: none; }
.nf-examens-titre { display: flex; align-items: center; gap: 8px; margin: 1.1rem 0 0.5rem; font-size: 13px; font-weight: 700; color: var(--nf-text-2); }
.nf-examens-titre .nf-examens-nb {
  min-width: 20px; padding: 1px 7px; font-size: 11.5px; text-align: center;
  color: var(--nf-primary-dark); background: var(--nf-primary-soft); border-radius: 999px;
}
.nf-examens-vide { margin: 0.9rem 0 0; font-size: 12.5px; color: var(--nf-text-muted); text-align: center; }
.nf-examens-table th, .nf-examens-table td { padding: 10px 14px; font-size: 13px; }
.nf-ligne-supprimer {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--nf-text-muted); background: var(--nf-surface); border: 1px solid var(--nf-border);
  border-radius: 8px; cursor: pointer;
}
.nf-ligne-supprimer:hover { color: var(--nf-danger); border-color: var(--nf-danger); }
@media (max-width: 480px) {
  .nf-examen-grid { grid-template-columns: 1fr; }
}

/* Modale « Demande » d'imagerie : le patient à gauche, les onglets à droite, séparés par un trait
   vertical. Sous 860 px de fenêtre (la modale n'a plus la place pour deux colonnes), les deux blocs
   s'empilent et le trait devient horizontal. La fiche patient (dix champs courts) se range sur
   autant de colonnes que son bloc en offre, à partir de 170 px par champ. */
.nf-demande { display: grid; grid-template-columns: minmax(0, 1fr); }
.nf-demande .nf-divider { margin: 1.1rem 0; }
.nf-demande-onglets { font-size: 13.5px; min-width: 0; }
@media (min-width: 860px) {
  .nf-demande { grid-template-columns: minmax(0, 5fr) 1px minmax(0, 7fr); column-gap: 1.5rem; align-items: start; }
  .nf-demande > hr.nf-divider { align-self: stretch; width: 0; height: auto; margin: 0; border: 0; border-left: 1px solid var(--nf-border); }
}
.nf-modal-box .nf-form-grid.nf-form-grid--dense { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }

/* Page complète d'une demande d'imagerie : deux colonnes (le dossier et le compte-rendu à gauche, les
   détails, documents et actions à droite), un seul espacement de 1 rem entre toutes les cards, dans
   les deux sens. Sous 900 px, les colonnes s'empilent.
   La page est plus large que le reste de l'application (1 360 px au plus) et centrée ; les deux colonnes
   sont presque égales (6/5) pour que les cards se retrouvent côte à côte. */
.nf-page--demande { max-width: 1360px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
.nf-fiche-demande { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.nf-fiche-demande-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (min-width: 900px) {
  .nf-fiche-demande { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* Parcours d'une demande en étapes (ex. laboratoire) : une ligne par étape, reliées par un trait vertical.
   .fait = terminée (disque plein), .courante = en cours (anneau, ses formulaires sont dépliés dessous),
   .a-venir = pas encore atteinte (grisée). .annulee grise l'ensemble et signale l'arrêt du traitement. */
.nf-etapes { list-style: none; margin: 0; padding: 0; }
.nf-etape { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 0.9rem; padding-bottom: 1.15rem; }
.nf-etape:last-child { padding-bottom: 0; }
.nf-etape::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--nf-border); }
.nf-etape:last-child::before { display: none; }
.nf-etape.fait::before { background: var(--nf-primary); }
.nf-etape-marque { z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nf-surface); border: 2px solid var(--nf-border); color: var(--nf-text-muted); }
.nf-etape.fait .nf-etape-marque { background: var(--nf-primary); border-color: var(--nf-primary); color: #fff; }
.nf-etape.courante .nf-etape-marque { background: var(--nf-primary-soft); border-color: var(--nf-primary); color: var(--nf-primary); box-shadow: 0 0 0 4px var(--nf-primary-soft); }
.nf-etape-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; min-height: 36px; font-size: 14.5px; font-weight: 700; color: var(--nf-text); }
.nf-etape.a-venir .nf-etape-titre, .nf-etapes--annulee .nf-etape-titre { color: var(--nf-text-muted); font-weight: 600; }
.nf-etape-sous { margin: -0.35rem 0 0; font-size: 12.5px; color: var(--nf-text-muted); }
.nf-etape-formulaires { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.nf-etape-formulaires span { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px dashed var(--nf-border); color: var(--nf-text-muted); }
.nf-etape-actions { margin-top: 0.8rem; padding: 1rem 1.1rem; border: 1px solid var(--nf-primary-tint); border-radius: 12px; background: var(--nf-bg); }
.nf-etape-actions form + form, .nf-etape-actions .nf-etape-bloc + .nf-etape-bloc { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--nf-border); }
.nf-etape-actions .nf-etape-bloc-titre { margin: 0 0 0.6rem; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nf-text-muted); }
.nf-etapes--annulee .nf-etape-marque { opacity: 0.55; }

/* Étiquettes de prélèvement (laboratoire) : 70 × 35 mm par examen, code-barres du numéro d'accession.
   À l'impression, seule la planche copiée dans #nf-etiq-print (voir laboratoire/etiquettes.php) reste visible,
   une étiquette par page. */
.nf-etiquettes-zone { display: grid; grid-template-columns: repeat(auto-fit, 70mm); justify-content: center; gap: 10px; }
.nf-etiquette { box-sizing: border-box; width: 70mm; height: 35mm; padding: 2.5mm 3mm 2mm; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #000; border: 1px solid var(--nf-border); border-radius: 4px; font-family: Arial, Helvetica, sans-serif; }
.nf-etiq-patient { font-size: 10.5pt; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-etiq-infos { font-size: 6.5pt; color: #333; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-etiq-examen { margin-top: 0.6mm; font-size: 7.5pt; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-etiq-examen span { margin-left: 1.5mm; color: #333; }
.nf-etiq-code { flex: 1; min-height: 0; margin-top: 0.8mm; display: flex; align-items: stretch; justify-content: center; }
.nf-etiq-code svg { width: 100%; height: 100%; display: block; }
.nf-etiq-bas { display: flex; justify-content: space-between; align-items: baseline; font-size: 8pt; line-height: 1.2; }
.nf-etiq-bas span { font-size: 6.5pt; color: #333; }
#nf-etiq-print { display: none; }
@media print {
  body.nf-imprime-etiquettes > *:not(#nf-etiq-print) { display: none !important; }
  body.nf-imprime-etiquettes { margin: 0; padding: 0; background: #fff; }
  body.nf-imprime-etiquettes #nf-etiq-print { display: block; }
  body.nf-imprime-etiquettes .nf-etiquette { border: 0; border-radius: 0; break-after: page; page-break-after: always; }
  body.nf-imprime-etiquettes .nf-etiquette:last-child { break-after: auto; page-break-after: auto; }
}

/* Nouvelle entente d'assurance : patient et assurance à gauche, détails de l'entente à droite, empilés
   sous 900 px. L'assurance vient du dossier du patient ; la liste des quatre points à réunir (assuré,
   assurance, couverture, carte) et l'alerte s'affichent sous le choix du patient. */
.nf-entente-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.nf-entente-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 1.25rem 1.5rem; }
.nf-entente-col--patient { border-bottom: 1px solid var(--nf-border); }
@media (min-width: 900px) {
  .nf-entente-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .nf-entente-col--patient { border-bottom: 0; border-right: 1px solid var(--nf-border); }
}
.nf-entente-col [hidden] { display: none !important; }
.nf-entente-aide { margin: 0 0 0.75rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: var(--nf-primary-soft); color: var(--nf-primary-dark); font-size: 12.5px; line-height: 1.4; }
.nf-entente-titre { margin: 0; font-size: 12px; font-weight: 700; color: var(--nf-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.nf-entente-assurance { padding: 0.8rem 0.95rem; border: 1px solid var(--nf-border); border-radius: 12px; background: var(--nf-bg); }
.nf-entente-assurance[hidden], .nf-entente-alerte[hidden] { display: none; }
.nf-entente-requis { margin-top: 0; }
.nf-entente-requis .nf-entente-checks li { align-items: flex-start; line-height: 1.35; }
.nf-entente-requis .nf-entente-checks li i { margin-top: 1px; }
.nf-entente-assurance-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 0.8rem; font-size: 13.5px; }
.nf-entente-assurance-tete span { color: var(--nf-text-muted); font-size: 12.5px; }
.nf-entente-checks { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.3rem; font-size: 13px; }
.nf-entente-checks li { display: flex; align-items: center; gap: 0.55rem; }
.nf-entente-checks li i { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; background: var(--nf-border); color: var(--nf-text-muted); }
.nf-entente-checks li.ok i { background: var(--nf-emerald); color: #fff; }
.nf-entente-checks li.ko i { background: var(--nf-danger); color: #fff; }
.nf-entente-checks li.ko { color: var(--nf-danger); }
.nf-entente-alerte { margin: 0.65rem 0 0; padding: 0.55rem 0.75rem; border-radius: 10px; background: rgba(217, 74, 45, 0.08); border: 1px solid rgba(217, 74, 45, 0.35); color: var(--nf-danger); font-size: 12.5px; font-weight: 600; }
.nf-entente-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
.nf-entente-actions .nf-btn-new:disabled { opacity: 0.5; cursor: not-allowed; }
/* Champs de la modale : texte, nombre, date et listes (le bouton généré par select.js, qui reprend la classe
   .nf-input mais a ses propres marges et sa propre police) partagent la même hauteur, la même police et le même
   retrait. !important sur le retrait gauche : la fiche patient (patient-fiche-rdv.js) pose le sien en ligne. */
.nf-entente-layout .nf-input:not(textarea),
.nf-entente-layout .nf-select-trigger,
form.nf-form-champs .nf-input:not(textarea),
form.nf-form-champs .nf-select-trigger {
  box-sizing: border-box; width: 100%; height: 40px; margin: 0;
  padding: 0 0.75rem !important; font-size: 13.5px; line-height: 1.2; border-radius: 11px;
}
.nf-entente-layout textarea.nf-input,
form.nf-form-champs textarea.nf-input { box-sizing: border-box; padding: 0.6rem 0.75rem !important; font-size: 13.5px; border-radius: 11px; }

/* Formulaires en modale (rendez-vous, imagerie, laboratoire, hospitalisation) : la grille compte 6 colonnes et
   chaque champ prend la part que son contenu demande — 2 pour une date, une heure ou une liste courte, 3 par
   défaut (nom, liste de médecins…), 4 pour un libellé long, toute la ligne pour un patient, un motif, une note ou
   un fichier (.nf-field-full). Classes de largeur : .nf-w-2 et .nf-w-4.
   Repli selon la fenêtre (une modale fait au plus 680 ou 940 px et rétrécit avec l'écran) : sous 700 px, deux
   champs par ligne ; sous 480 px, un seul. Pas de container query : elle rendrait le formulaire « contenant » des
   éléments fixes, et le panneau des listes déroulantes (select.js, position: fixed) serait mal placé. */
form.nf-form-champs .nf-form-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.85rem 1rem; align-items: start;
}
form.nf-form-champs .nf-form-grid > .nf-field { grid-column: span 3; margin: 0; min-width: 0; }
form.nf-form-champs .nf-form-grid > .nf-field.nf-w-2 { grid-column: span 2; }
form.nf-form-champs .nf-form-grid > .nf-field.nf-w-4 { grid-column: span 4; }
form.nf-form-champs .nf-form-grid > .nf-field.nf-field-full { grid-column: 1 / -1; }
/* Case à cocher rangée dans la grille, à hauteur des champs voisins */
form.nf-form-champs .nf-form-grid > .nf-field.nf-field-case { align-self: end; display: flex; align-items: center; min-height: 40px; }
form.nf-form-champs .nf-form-grid > .nf-field.nf-field-case label:not(.nf-check-item) { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
form.nf-form-champs .nf-form-actions { margin-top: 1.25rem; }
/* Aide d'un champ rangée à côté de lui (mot de passe) : même ligne, trois colonnes, alignée sur le bas du champ ; toute la ligne en étroit. */
form.nf-form-champs .nf-form-grid > .nf-aide-champ { grid-column: span 3; align-self: end; margin: 0; padding-bottom: 0.55rem; font-size: 12px; line-height: 1.45; color: var(--nf-text-muted); }
@media (max-width: 700px) { form.nf-form-champs .nf-form-grid > .nf-aide-champ { grid-column: 1 / -1; padding-bottom: 0; } }
form.nf-form-champs .nf-examen-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem 1rem; }
form.nf-form-champs .nf-examen-grid .nf-field { margin-bottom: 0; }
@media (max-width: 700px) {
  form.nf-form-champs .nf-form-grid > .nf-field.nf-w-2 { grid-column: span 3; }
  form.nf-form-champs .nf-form-grid > .nf-field.nf-w-4 { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  form.nf-form-champs .nf-form-grid > .nf-field,
  form.nf-form-champs .nf-form-grid > .nf-field.nf-w-2 { grid-column: 1 / -1; }
}

/* Nouveau médecin (modale) : photo, grille des spécialités et lignes de types de consultation. Une spécialité
   cochée prend toute la ligne pour afficher ses types (nom large, durée et prix courts) ; sous 560 px, le nom
   passe seul sur sa ligne et la durée et le prix se partagent la suivante. */
.nf-photo-champ { display: flex; gap: 1rem; align-items: flex-end; }
/* Photo d'une machine d'imagerie : aperçu plus large que haut (modale Modifier) et miniature du tableau du catalogue. */
.nf-photo-vignette.nf-photo-vignette--machine { width: 96px; height: 72px; }
/* Photo déjà enregistrée (modale Modifier) : aperçu agrandi, à côté du champ de remplacement. */
img.nf-photo-vignette.nf-photo-vignette--machine { width: 220px; height: 165px; max-width: 100%; border-style: solid; }
.nf-photo-champ:has(img.nf-photo-vignette--machine) { align-items: center; flex-wrap: wrap; }
/* Logo d'une assurance déjà enregistré (modale Modifier) : aperçu à gauche du champ de remplacement. */
img.nf-photo-vignette.nf-photo-vignette--logo { width: 140px; height: 72px; max-width: 100%; object-fit: contain; padding: 6px; background: var(--nf-surface); border-style: solid; }
.nf-photo-champ:has(img.nf-photo-vignette--logo) { align-items: center; flex-wrap: wrap; }
/* Modification d'une actualité : contenu à gauche, publication et image à droite ; empilés sous 900 px. */
.nf-actu-edition { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1.5rem; align-items: start; }
.nf-actu-cotes { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
@media (max-width: 900px) { .nf-actu-edition { grid-template-columns: 1fr; } }
.nf-actu-image { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid var(--nf-border); background: var(--nf-bg); }
.nf-actu-image--vide { height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; color: var(--nf-text-muted); font-size: 12.5px; border-style: dashed; }

/* Fiche d'une demande d'imagerie (page) : titres de cartes, liste de données du patient, en-tête à repères. */
/* Les cartes de la fiche prennent toute la largeur de leur colonne (la carte de connexion, elle, est limitée à 420 px) :
   même cadre que les panneaux, sans l'ombre portée ni le grand rembourrage de la carte de connexion. */
.nf-fiche-demande .nf-card { max-width: none; padding: 1.25rem 1.5rem; box-shadow: none; border: 1px solid var(--nf-border); border-radius: 16px; animation: none; }
.nf-fiche-titre { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; font-weight: 700; color: var(--nf-text); margin: 0 0 0.85rem; }
.nf-fiche-titre i { color: var(--nf-primary); flex: none; }
.nf-fiche-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem 1.25rem; }
.nf-fiche-dl > div { min-width: 0; }
.nf-fiche-dl dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nf-text-muted); margin-bottom: 2px; }
.nf-fiche-dl dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.nf-fiche-dl .nf-fiche-dl-large { grid-column: span 2; }
.nf-fiche-hero { margin: 0 0 1rem; }
.nf-fiche-reperes { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin-top: 0.6rem; }
.nf-fiche-reperes > span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--nf-bg); border: 1px solid var(--nf-border); font-size: 12px; color: var(--nf-text-2); max-width: 100%; }
.nf-fiche-reperes > span i { color: var(--nf-primary); flex: none; }
.nf-machine-vignette { flex: none; width: 44px; height: 36px; border-radius: 8px; object-fit: cover; border: 1px solid var(--nf-border); background: var(--nf-bg); }
.nf-machine-vignette--vide { display: inline-flex; align-items: center; justify-content: center; color: var(--nf-text-muted); border-style: dashed; }
.nf-photo-vignette { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: var(--nf-bg); border: 1px dashed var(--nf-border); display: flex; align-items: center; justify-content: center; color: var(--nf-text-muted); overflow: hidden; }
.nf-spe-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; align-items: start; }
.nf-spe { border: 1px solid var(--nf-border-2); border-radius: 11px; padding: 0.6rem 0.75rem; min-width: 0; }
.nf-spe:has(> .nf-spe-choix input:checked) { grid-column: 1 / -1; border-color: var(--nf-primary); background: var(--nf-primary-soft); }
.nf-spe-choix { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; margin: 0; cursor: pointer; }
.nf-tc-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.6rem; align-items: end; margin-bottom: 0.6rem; }
.nf-tc-row .nf-field { margin: 0; min-width: 0; }
.nf-tc-retirer { background: none; border: none; color: var(--nf-danger); cursor: pointer; height: 40px; padding: 0 0.5rem; }
@media (max-width: 560px) {
  .nf-tc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .nf-tc-row .nf-field:first-child { grid-column: 1 / -1; }
}

/* Page Patients : recherche par IPP, nom et prénom ou téléphone, résultats en cartes (un patient par carte, avec
   l'accès à son dossier). Rien n'est listé tant qu'aucun critère n'est saisi. */
.nf-patient-vide { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 2.25rem 1rem; text-align: center; color: var(--nf-text-muted); }
.nf-patient-vide p { margin: 0; max-width: 460px; font-size: 14px; line-height: 1.5; }
.nf-patient-compte { margin: 0 0 0.9rem; font-size: 13px; color: var(--nf-text-muted); }
.nf-patient-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0.9rem; }
.nf-patient-carte { display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 1.1rem; background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: 14px; min-width: 0; transition: border-color 0.2s, box-shadow 0.2s; }
.nf-patient-carte:hover { border-color: var(--nf-primary); box-shadow: var(--nf-shadow-sm, 0 2px 10px rgba(15, 31, 36, 0.06)); }
.nf-patient-tete { display: flex; align-items: center; gap: 0.75rem; }
.nf-patient-nom { font-weight: 700; font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.nf-patient-ipp { font-size: 12.5px; color: var(--nf-text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.nf-patient-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; margin: 0; }
.nf-patient-infos dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nf-text-muted); }
.nf-patient-infos dd { margin: 2px 0 0; font-size: 13.5px; }
.nf-patient-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; }
.nf-patient-actions .nf-btn-new { flex: 1; justify-content: center; }

/* Fiche patient (/patients/{id}) : les cartes (identité, indicateurs, actions rapides, données, dossier médical,
   rendez-vous) sont séparées par un même espace de 1,5 rem, y compris la grille à deux colonnes qui n'en avait pas. */
.nf-patient-page > .nf-panel,
.nf-patient-page > .nf-kpi-grid,
.nf-patient-page > .nf-cols { margin-bottom: 1.5rem; }
.nf-patient-page > .nf-panel:first-of-type { margin-top: 1rem; }
.nf-modal-body .nf-patient-page > .nf-panel:first-of-type { margin-top: 0; }
.nf-patient-page .nf-kpi-grid,
.nf-patient-page .nf-cols { gap: 1.5rem; }
.nf-patient-page .nf-panel-body { padding-top: 1.1rem; padding-bottom: 1.25rem; }

/* Fiche patient : activité par pôle (rendez-vous et demandes, factures, ententes filtrés par le segment du haut). */
.nf-pole-titre { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem; font-size: 14px; font-weight: 700; }
.nf-pole-titre svg { color: var(--nf-primary); flex: none; }
.nf-pole-compte { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--nf-primary-soft); color: var(--nf-primary); font-size: 11.5px; font-weight: 700; text-align: center; }
.nf-pole-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--nf-bg); border: 1px solid var(--nf-border); font-size: 12px; font-weight: 600; white-space: nowrap; }
.nf-seg button { display: inline-flex; align-items: center; gap: 6px; }

/* Pages Chambres, Lits (types de lit) et Services d'hospitalisation : la liste (segment + tableau) et les formulaires (nouvelle chambre, nouvel étage) occupent toute la largeur.
   Grand écran : liste à gauche (2/3), formulaires à droite (1/3). En dessous de 1100 px : une seule colonne, formulaires
   d'abord puis liste. */
.nf-chambres, .nf-types-lit, .nf-services { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 1.5rem; align-items: start; width: 100%; }
.nf-chambres > :only-child, .nf-types-lit > :only-child, .nf-services > :only-child { grid-column: 1 / -1; }
.nf-chambres-liste, .nf-types-lit-liste, .nf-services-liste { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.nf-chambres-formulaires, .nf-types-lit-formulaire, .nf-services-formulaire { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.nf-chambres-formulaires .nf-card, .nf-types-lit-formulaire .nf-card, .nf-services-formulaire .nf-card { max-width: none; width: 100%; box-sizing: border-box; }
@media (max-width: 1100px) {
  .nf-chambres, .nf-types-lit, .nf-services { grid-template-columns: minmax(0, 1fr); }
  .nf-chambres-formulaires, .nf-types-lit-formulaire, .nf-services-formulaire { order: -1; }
}

/* Tableau de bord : un même espace de 1,5 rem entre toutes les cartes (seules, ou en deux colonnes), cartes d'une même ligne
   de même hauteur. Les graphiques Chart.js sont dans un conteneur de hauteur fixe : posé directement sur la carte, un canvas
   responsive grossit à chaque recalcul de sa largeur (hauteur démesurée, rendu long à se stabiliser). */
/* !important : certaines cartes portent margin-bottom:0 en ligne (prévu pour leur usage en colonnes). */
.nf-dashboard > .nf-panel,
.nf-dashboard > .nf-cols,
.nf-dashboard > .nf-kpi-grid { margin-bottom: 1.5rem !important; }
.nf-dashboard .nf-cols { gap: 1.5rem; }
.nf-dashboard .nf-cols > .nf-panel { margin-bottom: 0; height: 100%; }
.nf-dash-graphique { position: relative; width: 100%; height: 220px; }

/* Vue Semaine de l'espace médecin : sept cartes (une par jour) dans la carte de navigation, défilement horizontal si l'écran est
   étroit. Au survol, la carte du jour se détache (cadre de la couleur principale, ombre) ; le rendez-vous survolé se teinte. */
.nf-semaine-grille { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 0.75rem; overflow-x: auto; padding: 4px; margin: -4px; }
.nf-semaine-jour { transition: border-color .15s, box-shadow .15s, transform .15s; }
.nf-semaine-jour:hover { border-color: var(--nf-primary); box-shadow: 0 10px 22px -14px rgba(0, 127, 130, 0.45); transform: translateY(-2px); }
.nf-semaine-jour--aujourdhui { border-color: var(--nf-primary); }
.nf-semaine-rdv { display: block; text-decoration: none; color: inherit; border: 1px solid var(--nf-border); border-radius: 8px; padding: 0.4rem 0.5rem; font-size: 12px; transition: background .15s, border-color .15s; }
.nf-semaine-rdv:hover, .nf-semaine-rdv:focus-visible { background: var(--nf-primary-soft); border-color: var(--nf-primary); outline: none; }
@media (prefers-reduced-motion: reduce) { .nf-semaine-jour { transition: none; } .nf-semaine-jour:hover { transform: none; } }

/* Vue Jour de l'espace médecin, période de plusieurs jours : un accordéon par jour (date, nombre de rendez-vous, chevron). */
.nf-jour-accordeon { border: 1px solid var(--nf-border); border-radius: 12px; background: var(--nf-surface); overflow: hidden; }
.nf-jour-accordeon > summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--nf-text-2); user-select: none; }
.nf-jour-accordeon > summary::-webkit-details-marker { display: none; }
.nf-jour-accordeon > summary:hover { background: var(--nf-primary-soft); }
.nf-jour-accordeon > summary:focus-visible { outline: 2px solid var(--nf-primary); outline-offset: -2px; }
.nf-jour-accordeon-chevron { margin-left: auto; color: var(--nf-text-muted); transition: transform var(--nf-transition); }
.nf-jour-accordeon[open] > summary .nf-jour-accordeon-chevron { transform: rotate(180deg); }
.nf-jour-accordeon[open] > summary { border-bottom: 1px solid var(--nf-border); }
.nf-jour-accordeon-contenu { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.9rem; }

/* Dossier médical d'un patient (fiche patient et modale de l'espace médecin) : une carte par rubrique, rangées sur autant de
   colonnes que la place le permet (300 px au moins), de même hauteur sur une rangée ; les examens (laboratoire, imagerie) occupent une ligne entière, côte à côte. */
.nf-dossier-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; align-items: stretch; }
.nf-dm-carte { display: flex; flex-direction: column; min-width: 0; background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: 14px; overflow: hidden; }
.nf-dm-duo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; align-items: stretch; }
.nf-dm-tete { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; background: var(--nf-bg); border-bottom: 1px solid var(--nf-border); }
.nf-dm-tete h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--nf-text); }
.nf-dm-icone { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--nf-primary-soft); color: var(--nf-primary); flex: none; }
.nf-dm-voir { flex: none; margin-left: auto; padding: 3px 11px; border: 1px solid var(--nf-primary); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--nf-primary); text-decoration: none; background: var(--nf-surface); transition: background var(--nf-transition), color var(--nf-transition); }
.nf-dm-voir:hover { background: var(--nf-primary); color: #fff; }
.nf-dm-compte { margin-left: auto; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--nf-primary-soft); color: var(--nf-primary); font-size: 11.5px; font-weight: 700; text-align: center; }
.nf-dm-corps { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; max-height: 340px; overflow-y: auto; }
.nf-dm-liste { margin: 0; display: grid; gap: 0.7rem; }
.nf-dm-liste dt, .nf-dm-detail dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nf-text-muted); }
.nf-dm-liste dd { margin: 2px 0 0; font-size: 13.5px; white-space: pre-line; }
.nf-dm-alerte { display: flex; gap: 0.55rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: rgba(217, 74, 45, 0.08); border: 1px solid rgba(217, 74, 45, 0.3); color: var(--nf-danger); font-size: 13px; line-height: 1.4; }
.nf-dm-item { padding: 0.65rem 0.8rem; border: 1px solid var(--nf-border-2); border-radius: 10px; background: var(--nf-surface); }
.nf-dm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 0.45rem; font-size: 12px; color: var(--nf-text-muted); }
.nf-dm-action { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border: 1px solid var(--nf-primary); border-radius: 999px; color: var(--nf-primary); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.nf-dm-action:hover { background: var(--nf-primary); color: #fff; }
.nf-dm-detail { margin: 0; display: grid; gap: 0.35rem; font-size: 13px; }
.nf-dm-detail dd { margin: 0; }
.nf-dm-texte { padding: 0.5rem 0.65rem; border-radius: 8px; background: var(--nf-bg); font-size: 13px; white-space: pre-wrap; }
.nf-dm-ligne { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.8rem; border: 1px solid var(--nf-border-2); border-radius: 10px; font-size: 13px; }
/* Examen cliquable : le survol détache la ligne (cadre et fond de la couleur principale), le clavier a le même rendu. */
a.nf-dm-ligne--lien { color: inherit; text-decoration: none; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
a.nf-dm-ligne--lien:hover, a.nf-dm-ligne--lien:focus-visible { border-color: var(--nf-primary); background: var(--nf-primary-soft); box-shadow: 0 8px 18px -14px rgba(0, 127, 130, 0.5); transform: translateY(-1px); outline: none; }
@media (prefers-reduced-motion: reduce) { a.nf-dm-ligne--lien { transition: none; } a.nf-dm-ligne--lien:hover { transform: none; } }
.nf-dm-exam { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.nf-dm-sous { font-size: 11.5px; color: var(--nf-text-muted); margin-top: 1px; }
.nf-dm-puces { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.nf-dm-puce { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--nf-primary-soft); color: var(--nf-primary-dark); font-size: 12.5px; font-weight: 600; text-decoration: none; }
a.nf-dm-puce:hover { background: var(--nf-primary); color: #fff; }
.nf-dm-vide { margin: 0; padding: 0.75rem 0; text-align: center; font-size: 13px; color: var(--nf-text-muted); }

/* Détail d'une entente (modale ou page) : en-tête patient / état / montant, blocs d'informations en « libellé /
   valeur » (seules les valeurs renseignées s'affichent), et, pour une entente en attente, le formulaire de décision
   à droite — deux boutons radio (Approuver / Rejeter) qui n'affichent que les champs de la décision choisie.
   Sous 900 px de fenêtre, le formulaire passe sous les informations. */
.nf-ent [hidden] { display: none !important; }
.nf-ent-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-bottom: 1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--nf-border); }
.nf-ent-patient { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.nf-ent-nom { font-size: 17px; font-weight: 700; line-height: 1.25; }
.nf-ent-sous { font-size: 12.5px; color: var(--nf-text-muted); margin-top: 2px; }
.nf-ent-etat { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.nf-ent-montant { font-family: var(--nf-font-display); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nf-ent-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 1.75rem; }
.nf-ent-infos { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.nf-ent-bloc > .nf-entente-titre { margin-bottom: 0.55rem; }
.nf-ent-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem 1.25rem; margin: 0; }
.nf-ent-dl > div { min-width: 0; }
.nf-ent-dl dt { font-size: 11.5px; color: var(--nf-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.nf-ent-dl dd { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.nf-ent-dl .nf-ent-large { grid-column: 1 / -1; }
.nf-ent-decision { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--nf-border); border-radius: 14px; background: var(--nf-bg); align-self: start; }
.nf-ent-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.nf-ent-choix-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 0.5rem; border: 1.5px solid var(--nf-border); border-radius: 12px; background: var(--nf-surface); font-size: 13.5px; font-weight: 600; color: var(--nf-text-muted); cursor: pointer; transition: border-color var(--nf-transition), background var(--nf-transition), color var(--nf-transition); }
.nf-ent-choix-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nf-ent-choix-item:hover { border-color: var(--nf-primary-tint); }
.nf-ent-choix-item:has(input:focus-visible) { outline: 2px solid var(--nf-primary); outline-offset: 2px; }
.nf-ent-choix--ok:has(input:checked) { border-color: var(--nf-emerald); background: rgba(45, 106, 79, 0.13); color: var(--nf-emerald); }
.nf-ent-choix--ko:has(input:checked) { border-color: var(--nf-danger); background: rgba(182, 64, 42, 0.12); color: var(--nf-danger); }
.nf-ent-aide { margin: 0; font-size: 12.5px; color: var(--nf-text-muted); }
/* Cartes de la fiche : informations de l'entente (colonne de gauche) et historique (toute la largeur, sous les colonnes). */
.nf-ent-carte { padding: 1rem 1.1rem; border: 1px solid var(--nf-border); border-radius: 14px; background: var(--nf-surface); min-width: 0; }
.nf-ent-historique { margin-top: 1.25rem; }
.nf-ent-historique > .nf-entente-titre { margin-bottom: 0.75rem; }
.nf-ent-liens { display: flex; flex-direction: column; gap: 0.6rem; }
.nf-ent-lien { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.65rem 0.8rem; border: 1px solid var(--nf-border); border-radius: 12px; background: var(--nf-bg); }
.nf-ent-lien-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.65rem; }
.nf-ent-lien .nf-ent-dl { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem 1rem; }
/* Éléments concernés (approbation / couverture) : une ligne par élément lié, case à gauche, couverture à droite. */
.nf-ent-items { display: flex; flex-direction: column; gap: 0.35rem; }
.nf-ent-items .nf-ent-item-tout { display: flex; align-items: center; gap: 0.5rem; font-size: 12.5px; font-weight: 600; color: var(--nf-primary); cursor: pointer; padding: 0 0.1rem 0.3rem; border-bottom: 1px solid var(--nf-border); }
.nf-ent-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.75rem; padding: 0.45rem 0.6rem; border: 1px solid var(--nf-border); border-radius: 10px; background: var(--nf-surface); transition: opacity var(--nf-transition); }
.nf-ent-item.is-off { opacity: 0.55; }
.nf-ent-items .nf-ent-item-nom { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 13px; cursor: pointer; margin: 0; min-width: 0; flex: 1 1 auto; }
.nf-ent-item-nom input { margin-top: 3px; flex: none; }
.nf-ent-item-nom .nf-ent-sous { display: block; margin-top: 1px; }
.nf-ent-items .nf-ent-item-pec { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; padding: 0.15rem 0 0 1.55rem; font-size: 12.5px; }
.nf-ent-items .nf-ent-item-pec > label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; cursor: pointer; font-size: 12.5px; }
.nf-ent-items .nf-ent-item-val { display: inline-flex; align-items: center; gap: 0.35rem; }
form.nf-form-champs .nf-ent-items .nf-ent-item-val .nf-input:not(textarea) { width: 7rem; height: 34px; }
.nf-ent-items .nf-ent-item-calc { color: var(--nf-text-muted); }
.nf-ent-items .nf-ent-item-calc.est-erreur { color: var(--nf-danger); font-weight: 600; }
/* Prix, prise en charge et part patient d'un élément (carte du bloc Pôle) et totaux. */
.nf-ent-pec { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; align-items: center; font-size: 13px; padding-top: 0.45rem; border-top: 1px dashed var(--nf-border); }
.nf-ent-pec strong { font-variant-numeric: tabular-nums; }
.nf-ent-pec--total { margin-bottom: 0.5rem; padding: 0.5rem 0.8rem; border: 1px solid var(--nf-primary-tint); border-radius: 10px; background: var(--nf-primary-soft); }
.nf-ent-histo-item.maj::before { background: var(--nf-primary); }
/* Historique : une ligne verticale, un point par évènement (vert : approuvée, rouge : rejetée, ocre : dossier rouvert).
   Sur grand écran, chaque évènement se lit en trois colonnes : quoi et quand / motif / pièce jointe. */
.nf-ent-histo { list-style: none; margin: 0; padding: 0 0 0 0.35rem; }
.nf-ent-histo-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem 1.25rem; padding: 0 0 1.1rem 1.2rem; border-left: 2px solid var(--nf-border); }
.nf-ent-histo-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.nf-ent-histo-item::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--nf-text-muted); border: 2px solid var(--nf-surface); }
.nf-ent-histo-item.ok::before { background: var(--nf-emerald); }
.nf-ent-histo-item.ko::before { background: var(--nf-danger); }
.nf-ent-histo-item.relance::before { background: var(--nf-gold-ink); }
.nf-ent-histo-titre { font-size: 13.5px; font-weight: 600; }
.nf-ent-histo-meta { font-size: 12px; color: var(--nf-text-muted); margin-top: 1px; line-height: 1.4; }
.nf-ent-histo-motif, .nf-ent-histo-doc { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; min-width: 0; }
.nf-ent-histo-lbl { display: block; font-size: 11.5px; color: var(--nf-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.nf-ent-histo-vide { color: var(--nf-text-muted); font-style: italic; }
@media (min-width: 720px) {
  .nf-ent-histo-item { grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.6fr) minmax(120px, 0.8fr); }
}
@media (min-width: 900px) {
  .nf-ent-corps--deux { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* Liste de cases à cocher (ex. « Examens autorisés » d'une machine) : chaque
   choix est une ligne cliquable ; coché, elle prend la couleur primaire du site.
   `.nf-field .nf-check-item` l'emporte sur `.nf-field label`.
   Style commun à toutes les cases à cocher de formulaire : la bordure épouse son texte (une case isolée ne
   s'étire pas sur toute la ligne), seule une liste `.nf-check-list` remplit sa largeur. */
.nf-check-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 240px; overflow-y: auto;
  padding: 8px; background: var(--nf-bg);
  border: 1px solid var(--nf-border); border-radius: var(--nf-radius-sm);
}
.nf-field .nf-check-item, .nf-check-item {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 8px 10px;
  font-size: 13px; line-height: 1.3; color: var(--nf-text);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border); border-radius: var(--nf-radius-sm);
  width: fit-content; max-width: 100%;
  cursor: pointer; user-select: none;
  transition: background var(--nf-transition), border-color var(--nf-transition), color var(--nf-transition);
}
.nf-check-list .nf-check-item, .nf-field .nf-check-list .nf-check-item { width: auto; max-width: none; }
.nf-field .nf-check-item:hover, .nf-check-item:hover { background: var(--nf-primary-soft); border-color: var(--nf-primary-tint); }
.nf-check-item input[type="checkbox"] {
  flex: none; width: 16px; height: 16px; margin: 0;
  accent-color: var(--nf-primary); cursor: pointer;
}
.nf-field .nf-check-item:has(input:checked), .nf-check-item:has(input:checked) {
  background: var(--nf-primary-soft); border-color: var(--nf-primary);
  color: var(--nf-primary-dark); font-weight: 600;
}
.nf-check-item:has(input:focus-visible) { outline: 2px solid var(--nf-primary); outline-offset: 1px; }
/* Dans une grille de champs, la case se cale sur la hauteur des champs voisins. */
form.nf-form-champs .nf-field-case .nf-check-item { min-height: 40px; box-sizing: border-box; }

@media (max-width: 600px) {
  .nf-form-grid { grid-template-columns: 1fr; }
  .nf-modal-overlay { padding: 0; align-items: stretch; }
  /* Plein écran, sans coins arrondis — inchangé. En revanche la hauteur est
     bornée à 100vh au lieu d'être libre : le défilement se fait ainsi DANS la
     boîte et non dans l'overlay, seule façon pour que l'en-tête « sticky »
     reste pinné ici aussi. Rendu identique, seul le conteneur qui défile
     change. */
  .nf-modal-box,
  .nf-modal-box.nf-modal-sm, .nf-modal-box.nf-modal-md, .nf-modal-box.nf-modal-lg, .nf-modal-box.nf-modal-xl, .nf-modal-box.nf-modal-w80 { width: 100%; max-width: none; max-height: 100vh; min-height: 100vh; border-radius: 0; }
  .nf-input { width: 100%; }
}

/* ---------- Éditeur glisser-déposer de l'organisation du menu ---------- */

.nf-menu-cols { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; }
@media (max-width: 800px) { .nf-menu-cols { grid-template-columns: 1fr; } }

.nf-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 44px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#nf-menu-palette.nf-menu-list { background: var(--nf-bg); border: 1px dashed var(--nf-border); padding: 8px; }
#nf-menu-canvas.nf-menu-list { background: var(--nf-bg); border: 1px solid var(--nf-border); padding: 8px; min-height: 120px; }
.nf-menu-children.nf-menu-list { margin: 6px 0 2px 26px; min-height: 30px; }
.nf-menu-list.nf-menu-dragover { outline: 2px dashed var(--nf-primary); outline-offset: 2px; background: var(--nf-primary-soft); }

.nf-menu-node { border-radius: 10px; }
.nf-menu-node.nf-menu-dragging { opacity: 0.4; }
.nf-menu-node-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 13px;
}
.nf-menu-node-row .nf-menu-drag-handle { cursor: grab; color: var(--nf-text-muted); flex-shrink: 0; }
.nf-menu-node-row .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nf-menu-node-row input.nf-menu-libelle-input {
  flex: 1; min-width: 0; border: 1px solid var(--nf-border); border-radius: 7px;
  padding: 4px 7px; font: inherit; font-size: 13px;
}
.nf-menu-node-row select.nf-menu-icone-select {
  border: 1px solid var(--nf-border); border-radius: 7px; padding: 3px 4px; font-size: 12px; color: var(--nf-text-2);
}
.nf-menu-node-row .nf-select-wrap { width: auto; flex-shrink: 0; }
.nf-menu-node-row .nf-select-wrap .nf-select-trigger { padding: 4px 8px; font-size: 12px; border-radius: 7px; width: max-content; }
.nf-menu-node-row .nf-select-wrap .nf-select-panel { width: 180px; }
.nf-menu-node-row button {
  background: none; border: none; cursor: pointer; color: var(--nf-text-muted);
  display: flex; align-items: center; justify-content: center; padding: 3px; border-radius: 7px; flex-shrink: 0;
}
.nf-menu-node-row button:hover { background: var(--nf-bg); color: var(--nf-text); }
.nf-menu-node-row .nf-menu-hide-btn.is-hidden { color: var(--nf-danger); }
.nf-menu-node.nf-menu-hidden .nf-menu-node-row { opacity: 0.5; }
.nf-menu-node[data-type="groupe"] > .nf-menu-node-row { background: var(--nf-primary-soft); border-color: var(--nf-primary-tint); }

/* ---------- Select recherchable (modèle unique de tous les champs select) ---------- */

.nf-select-wrap { position: relative; display: inline-block; width: 100%; }
.nf-select-wrap select { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.nf-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  padding: 9px 13px;
  border-radius: 11px;
  border: 1px solid var(--nf-border);
  background: var(--nf-surface);
  color: var(--nf-text);
  cursor: pointer;
}
.nf-select-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.nf-select-trigger:hover:not(:disabled) { border-color: var(--nf-primary-tint); }
.nf-select-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-select-chevron { width: 15px; height: 15px; color: var(--nf-text-muted); flex-shrink: 0; transition: transform 0.15s; }
.nf-select-wrap.nf-select-open .nf-select-chevron { transform: rotate(180deg); }
.nf-select-wrap.nf-select-open .nf-select-trigger { border-color: var(--nf-primary); }

/* Position fixe, calculée par select.js à l'ouverture (variables --nf-select-*) :
   un panneau absolu à l'intérieur d'une modale était rogné par le défilement de
   la boîte (overflow-y: auto). z-index 700 : au-dessus des modales (500) et des
   en-têtes collants, sous la confirmation (800) et l'écran de chargement (900). */
.nf-select-panel {
  position: fixed;
  top: var(--nf-select-top, auto);
  bottom: var(--nf-select-bottom, auto);
  left: var(--nf-select-left, 0);
  right: auto;
  width: var(--nf-select-w, auto);
  z-index: 700;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  box-shadow: var(--nf-shadow-lg);
  padding: 8px;
  display: none;
}
.nf-select-wrap.nf-select-open .nf-select-panel { display: block; }
.nf-select-filter {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--nf-border);
  background: var(--nf-bg);
  margin-bottom: 6px;
  outline: none;
}
.nf-select-filter:focus { border-color: var(--nf-primary); }
.nf-select-options { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.nf-select-option { padding: 8px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.nf-select-option:hover { background: var(--nf-primary-soft); }
.nf-select-option-active { font-weight: 600; color: var(--nf-primary); }
.nf-select-option-disabled { color: var(--nf-text-muted); cursor: not-allowed; }
.nf-select-option-empty { color: var(--nf-text-muted); text-align: center; cursor: default; }
.nf-select-option-empty:hover { background: none; }

/* ---------- Input fichier moderne (glisser-déposer) ---------- */

.nf-file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 22px 14px;
  border: 1.5px dashed var(--nf-border);
  border-radius: var(--nf-radius);
  background: var(--nf-bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.nf-file-drop:hover, .nf-file-drop.nf-file-dragover { border-color: var(--nf-primary); background: var(--nf-primary-soft); }
.nf-file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.nf-file-icon { width: 26px; height: 26px; color: var(--nf-text-muted); }
.nf-file-drop:hover .nf-file-icon, .nf-file-drop.nf-file-dragover .nf-file-icon { color: var(--nf-primary); }
.nf-file-label { display: flex; flex-direction: column; gap: 2px; }
.nf-file-cta { font-size: 12.5px; font-weight: 600; color: var(--nf-text-2); }
.nf-file-hint { font-size: 11px; color: var(--nf-text-muted); }
.nf-file-name { font-size: 12px; color: var(--nf-primary); font-weight: 600; word-break: break-all; }
.nf-file-remove {
  display: none;
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  color: var(--nf-text-muted);
  cursor: pointer;
}
.nf-file-drop.nf-file-has-value .nf-file-remove { display: flex; }

/* ── File d'attente dynamique ─────────────────────────────────── */
.nf-queue-widget { background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.nf-queue-header { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-bottom: 1px solid var(--nf-border-2); }
.nf-queue-title { font-size: 11px; font-weight: 700; color: var(--nf-text-2); letter-spacing: .05em; text-transform: uppercase; }
.nf-queue-meta { font-size: 10.5px; color: var(--nf-text-muted); margin-left: auto; }
.nf-queue-refresh-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--nf-text-muted); padding: 2px; border-radius: 4px; transition: color .15s; }
.nf-queue-refresh-btn:hover { color: var(--nf-primary); }
/* « Consulter la liste » : discret au repos pour ne pas concurrencer le
   contenu de la file, couleur principale du site au survol. */
.nf-queue-liste-btn {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 3px 9px; border: 1px solid var(--nf-border); border-radius: 999px;
  background: var(--nf-surface); color: var(--nf-text-2);
  font-size: 10.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.nf-queue-liste-btn:hover { background: var(--nf-primary); border-color: var(--nf-primary); color: #fff; }
.nf-queue-body { padding: 8px 10px; overflow-x: auto; }
.nf-queue-list { display: flex; gap: 5px; min-width: min-content; }
.nf-queue-empty { font-size: 12px; color: var(--nf-text-muted); padding: 2px 0; display: block; }
.nf-queue-item { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; background: var(--nf-bg); border: 1px solid var(--nf-border-2); min-width: 165px; flex-shrink: 0; }
.nf-queue-item--current { background: var(--nf-primary-soft); border-color: var(--nf-primary-tint); }
.nf-queue-item--past { opacity: .5; }
.nf-queue-num { font-size: 10px; font-weight: 700; color: var(--nf-text-muted); min-width: 14px; text-align: center; }
.nf-queue-time { font-size: 11px; font-weight: 700; color: var(--nf-primary); min-width: 34px; flex-shrink: 0; }
.nf-queue-info { flex: 1; min-width: 0; overflow: hidden; }
.nf-queue-patient { font-size: 11.5px; font-weight: 600; color: var(--nf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-queue-sub { font-size: 10px; color: var(--nf-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.nf-queue-badge { font-size: 9.5px !important; padding: 1px 5px !important; flex-shrink: 0; }
.nf-queue-link { color: var(--nf-text-muted); display: flex; align-items: center; flex-shrink: 0; margin-left: 2px; }
.nf-queue-link:hover { color: var(--nf-primary); }
/* Élément cliquable (alertes de l'espace médecin) : un lien qui reprend l'aspect d'un élément de la file, un peu plus large. */
a.nf-queue-item--lien { text-decoration: none; color: inherit; min-width: 220px; max-width: 320px; transition: border-color .15s, background .15s; }
a.nf-queue-item--lien:hover, a.nf-queue-item--lien:focus-visible { border-color: var(--nf-primary); background: var(--nf-primary-soft); outline: none; }
.nf-queue-emoji { font-size: 15px; flex-shrink: 0; line-height: 1; }
.nf-queue-info > .nf-queue-patient, .nf-queue-info > .nf-queue-sub { display: block; }
.nf-file-remove:hover { color: var(--nf-danger); border-color: var(--nf-danger); }

/* ---------- Page en deux sections (liste + formulaire) ---------- */

/* .nf-card vient de l'écran de connexion : max-width 420px et 2,5rem de
   rembourrage. Posée telle quelle dans une page, elle ne dépasse jamais 420px
   — d'où des sections qui ne remplissaient pas l'écran. Ici la carte prend
   toute la place de sa colonne.

   Grand écran (≥ 1280px, « xl ») : deux colonnes, la liste à gauche (2/3) et
   le formulaire à droite (1/3). En dessous : une seule colonne, les deux
   sections pleine largeur l'une sous l'autre.
   .nf-split--form-first inverse l'ordre en une colonne : le formulaire
   d'ajout passe avant la liste. minmax(0, …) laisse les tableaux se
   rétrécir au lieu d'élargir la colonne. */
.nf-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.nf-split > .nf-card { max-width: none; width: 100%; padding: 1.5rem; box-shadow: var(--nf-shadow); }
.nf-split > .nf-card > h2:first-child,
.nf-split > .nf-card > h3:first-child { margin-top: 0; }
@media (min-width: 1280px) {
  .nf-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (max-width: 1279.98px) {
  .nf-split--form-first > :nth-child(2) { order: -1; }
}
/* Une seule section (ex. pas le droit de créer) : elle prend toute la largeur
   au lieu des 2/3 réservés à la liste. */
.nf-split > :only-child { grid-column: 1 / -1; }
/* Sections posées dans une autre carte : un simple cadre, sans ombre portée. */
.nf-split--flat > .nf-card { box-shadow: none; border: 1px solid var(--nf-border); background: var(--nf-surface); }

/* Séparateur horizontal entre deux cartes. */
.nf-divider { border: 0; border-top: 1px solid var(--nf-border); margin: 1.75rem 0; }

/* ---------- Boutons : variantes d'état de .nf-btn-soft ---------- */

.nf-btn-soft--danger {
  color: var(--nf-danger);
  border-color: rgba(217, 74, 45, 0.45);
  background: rgba(217, 74, 45, 0.08);
}
.nf-btn-soft--danger:hover { background: var(--nf-urgent); border-color: var(--nf-urgent); color: #fff; }
.nf-btn-soft--ok {
  color: var(--nf-emerald);
  border-color: rgba(45, 106, 79, 0.45);
  background: rgba(45, 106, 79, 0.08);
}
.nf-btn-soft--ok:hover { background: var(--nf-emerald); border-color: var(--nf-emerald); color: #fff; }
.nf-btn-soft--sm { padding: 6px 11px; font-size: 12.5px; gap: 6px; }
.nf-btn-soft--block { display: flex; justify-content: center; width: 100%; }

/* ---------- Liste de questions (FAQ) ---------- */

.nf-faq-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--nf-border); }
.nf-faq-item:last-child { border-bottom: 0; }
.nf-faq-rank {
  flex: 0 0 auto; min-width: 48px; padding: 5px 8px; border-radius: 10px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--nf-primary-soft); color: var(--nf-primary); line-height: 1.1;
}
.nf-faq-rank span { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.nf-faq-rank b { font-size: 16px; font-weight: 800; }
.nf-faq-item--off .nf-faq-rank { background: var(--nf-border-2); color: var(--nf-text-muted); }
.nf-faq-body { flex: 1 1 auto; min-width: 0; }
.nf-faq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.nf-faq-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.75rem; }
.nf-faq-actions form { margin: 0; }

/* ---------- Écran de chargement (public/assets/js/loading.js) ---------- */

/* Recouvre toute la page, la floute et capte les clics : tant qu'un appel au
   serveur est en cours, l'action ne peut pas être relancée. Au-dessus des
   modales (500). */
.nf-loading {
  position: fixed; inset: 0; z-index: 900;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(241, 247, 247, 0.5);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  cursor: progress;
}
.nf-loading.on { display: flex; animation: nf-loading-in 0.18s ease; }
@keyframes nf-loading-in { from { opacity: 0; } to { opacity: 1; } }
.nf-loading-spin {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(0, 127, 130, 0.22); border-top-color: var(--nf-primary);
  animation: nf-spin 0.8s linear infinite;
}
@keyframes nf-spin { to { transform: rotate(360deg); } }
.nf-loading-msg { font-size: 13px; font-weight: 700; color: var(--nf-primary-dark); letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) {
  .nf-loading-spin { animation-duration: 2.4s; }
  .nf-loading.on { animation: none; }
}

/* ---------- Fenêtre de confirmation (public/assets/js/confirm-dialog.js) ---------- */

/* Au-dessus des modales de page (500), sous l'écran de chargement (900) : on
   peut confirmer une suppression depuis une modale. */
.nf-confirm-overlay {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(15, 31, 36, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: nf-modal-fade 150ms ease;
}
.nf-confirm {
  width: min(100%, 480px); max-height: 100%; overflow-y: auto;
  background: var(--nf-surface); border-radius: var(--nf-radius-lg); box-shadow: var(--nf-shadow-lg);
  animation: nf-modal-pop 180ms ease;
}
.nf-confirm-head { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px 6px; }
.nf-confirm-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.nf-confirm-icon svg, .nf-confirm-icon i { width: 20px; height: 20px; }
.nf-confirm--danger .nf-confirm-icon { background: rgba(217, 74, 45, 0.12); color: var(--nf-urgent); }
.nf-confirm--warning .nf-confirm-icon { background: rgba(192, 138, 62, 0.16); color: var(--nf-gold-ink); }
.nf-confirm-title { margin: 2px 0 0; font-family: var(--nf-font-display); font-weight: 800; font-size: 19px; line-height: 1.25; }
.nf-confirm-sub { margin: 4px 0 0; font-size: 13px; color: var(--nf-text-muted); }

/* Récapitulatif : une ligne par information, le libellé à gauche. */
.nf-confirm-recap { margin: 14px 24px 4px; border: 1px solid var(--nf-border); border-radius: 12px; background: var(--nf-bg); overflow: hidden; }
.nf-confirm-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--nf-border-2); }
.nf-confirm-row:last-child { border-bottom: 0; }
.nf-confirm-row dt { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--nf-text-muted); padding-top: 2px; }
.nf-confirm-row dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--nf-text); overflow-wrap: anywhere; }
.nf-confirm-row:last-child dd { font-weight: 500; color: var(--nf-text-2); }

.nf-confirm-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 22px; }
.nf-confirm-ok {
  border: 1px solid transparent; border-radius: 11px; padding: 9px 18px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--nf-urgent);
  transition: background 0.2s, transform 0.15s;
}
.nf-confirm-ok:hover { background: #b83c22; transform: translateY(-1px); }
.nf-confirm--warning .nf-confirm-ok { background: var(--nf-primary); }
.nf-confirm--warning .nf-confirm-ok:hover { background: var(--nf-primary-dark); }
.nf-confirm-ok:focus-visible, .nf-confirm-foot .nf-btn-soft:focus-visible { outline: 3px solid var(--nf-primary-tint); outline-offset: 2px; }

@media (max-width: 480px) {
  .nf-confirm-row { grid-template-columns: 1fr; gap: 2px; }
  .nf-confirm-foot { flex-direction: column-reverse; }
  .nf-confirm-foot > * { width: 100%; justify-content: center; }
}