/* ─── StarMed Modern UI — v1.0 ─────────────────────────────────────────────
   Loaded after bs_custom.min.css and lap_page_custom.css.
   Override strategy: higher specificity or !important only where Bootstrap
   uses !important internally (bg-dark).
────────────────────────────────────────────────────────────────────────── */

/* ── CSS Custom Properties ───────────────────────────────────────────────── */
:root {
  --sm-primary:       #004aad;
  --sm-primary-dark:  #003580;
  --sm-primary-hover: #0056b3;
  --sm-primary-light: #e6f0ff;
  --sm-shadow-sm:     0 2px 8px rgba(0, 0, 0, .07);
  --sm-shadow-md:     0 4px 16px rgba(0, 0, 0, .12);
  --sm-radius:        8px;
  --sm-radius-sm:     4px;
}

/* ── Global ──────────────────────────────────────────────────────────────── */
html {
  /* Global base. Every size in this file is rem, so this single value scales the
     whole UI proportionally and identically on web and mobile — keeping text
     homogeneous across every page. */
  font-size: 15px;
}
body {
  font-family: 'Inter', sans-serif;
  background: #fff;
}

/* Bootstrap's .form-control-sm and .form-select-sm default to .875rem — override globally */
.form-control,
.form-control-sm,
.form-select,
.form-select-sm {
  font-size: 1rem;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar.bg-dark {
  background: linear-gradient(135deg, #003a8c 0%, #0052cc 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,.18);
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* Brand */
.navbar-brand {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.5px;
  color: #fff !important;
  margin-right: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
/* All nav links — base */
.navbar-nav .nav-link,
.navbar-nav .dropdown-toggle {
  font-size: 1rem;
  font-weight: 500;
  padding: .4rem .65rem;
  border-radius: 8px;
  white-space: nowrap;
  color: rgba(255,255,255,.88) !important;
  transition: background .15s, color .15s;
}

/* Left main-nav hover & open */
.navbar-nav.me-auto .nav-link:hover,
.navbar-nav.me-auto .nav-link.show,
.navbar-nav.me-auto .dropdown-toggle:hover,
.navbar-nav.me-auto .dropdown-toggle.show {
  background: rgba(255,255,255,.13);
  color: #fff !important;
}

/* Active page indicator */
.navbar-nav.me-auto .nav-link.sm-active,
.navbar-nav.me-auto .dropdown-toggle.sm-active {
  background: rgba(255,255,255,.18);
  color: #fff !important;
  font-weight: 600;
  position: relative;
}
.navbar-nav.me-auto .nav-link.sm-active::after,
.navbar-nav.me-auto .dropdown-toggle.sm-active::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px;
  background: #fff;
  border-radius: 2px;
}

/* Separator before right utilities */
.navbar-nav.ms-md-auto {
  border-left: 1px solid rgba(255,255,255,.18);
  padding-left: .85rem;
  margin-left: .5rem;
}

/* Right side — utility pill buttons (Fonctionnalités + Centre d'aide) */
.navbar-nav.ms-md-auto .nav-link:not(.dropdown-toggle) {
  font-size: .93rem;
  font-weight: 500;
  padding: .35rem .9rem;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.9) !important;
  margin-right: .25rem;
}
.navbar-nav.ms-md-auto .nav-link:not(.dropdown-toggle):hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.4);
  color: #fff !important;
}
/* Icon-only at narrow viewports to keep everything on one row */
@media (max-width: 1500px) {
  .navbar-nav.ms-md-auto .nav-link:not(.dropdown-toggle) {
    font-size: 0;
    padding: .35rem .6rem;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .navbar-nav.ms-md-auto .nav-link:not(.dropdown-toggle) i {
    font-size: 1rem;
    margin-right: 0 !important;
  }
}

/* User dropdown — distinct pill */
.navbar-nav.ms-md-auto .nav-item.dropdown > .dropdown-toggle {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 24px;
  padding: .3rem .85rem .3rem .45rem;
  margin-left: .25rem;
}
.navbar-nav.ms-md-auto .nav-item.dropdown > .dropdown-toggle:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.38);
  color: #fff !important;
}

/* ── Desktop topbar: stay on one row across all laptop widths ──────────────
   Only applies ≥992px. Mobile (≤991.98px) is handled separately — untouched.
   The right utilities already collapse to icons ≤1500px; these rules give the
   LEFT module menu the same progressive breathing room so it never overflows
   or gets pushed off-screen on smaller laptops (1280 / 1366 / 1440). */
@media (min-width: 992px) {
  /* Keep the expanded navbar on a single row. The left module menu keeps its
     default min-width:auto so its items can NEVER shrink below their own text
     and spill over the right-side utilities (Fonctionnalités / Aide / user
     menu). The right group never shrinks, so it always stays fully visible. */
  .navbar-expand-lg > .container-fluid { flex-wrap: nowrap; }
  .navbar-nav.ms-md-auto { flex-shrink: 0; }
}

/* Large laptops / smaller desktops (≈1200–1399px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar-brand { font-size: 1.15rem; margin-right: 1rem; }
  .navbar-nav .nav-link,
  .navbar-nav .dropdown-toggle { font-size: .94rem; padding: .38rem .52rem; }
  .navbar-nav.ms-md-auto { padding-left: .6rem; margin-left: .35rem; }
}

/* Small laptops (≈992–1199px: 1024, 1280, 1366) — tighten the most while
   keeping the topbar on one row and the labels comfortably legible. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar.bg-dark { padding-left: .4rem; padding-right: .4rem; }
  .navbar-brand { font-size: 1.1rem; margin-right: .65rem; gap: .3rem; }
  .sm-brand-mark { width: 22px; height: 22px; }
  .navbar-nav .nav-link,
  .navbar-nav .dropdown-toggle { font-size: .88rem; padding: .35rem .42rem; }
  .navbar-nav.ms-md-auto { padding-left: .5rem; margin-left: .25rem; }
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid #e3e8ef;
  border-radius: var(--sm-radius);
}
.card-header {
  background: #f8f9fa;
  border-bottom: 2px solid #e9ecef;
  font-weight: 600;
  border-radius: var(--sm-radius) var(--sm-radius) 0 0 !important;
}

/* Bootstrap 3 panels still present in some templates */
.panel {
  border-radius: var(--sm-radius);
  border: 1px solid #e3e8ef;
}
.panel-heading {
  font-weight: 600;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #004aad 0%, #0056b3 100%);
  border-color: #004aad;
  transition: transform .15s ease, filter .15s ease;
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #003580 0%, #004aad 100%);
  border-color: #003580;
  transform: translateY(-2px);
  filter: brightness(1.03);
}
.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(0, 74, 173, .3);
}

/* Bootstrap laisse .btn-outline-primary sur son propre bleu (#0d6efd) : à côté
   d'un .btn-primary déjà repeint en #004aad, deux bleus se côtoyaient sur la même
   page. On repeint par les variables de Bootstrap 5.3 plutôt que par des règles
   concurrentes, pour que survol, focus, actif et désactivé restent cohérents
   sans lutte de spécificité. Gain mesurable au passage : le libellé passe de
   4,5:1 (gris #6c757d) à 8,1:1 sur blanc. */
.btn-outline-primary {
  --bs-btn-color:                #004aad;
  --bs-btn-border-color:         #004aad;
  --bs-btn-hover-color:          #fff;
  --bs-btn-hover-bg:             #004aad;
  --bs-btn-hover-border-color:   #004aad;
  --bs-btn-focus-shadow-rgb:     0, 74, 173;
  --bs-btn-active-color:         #fff;
  --bs-btn-active-bg:            #003580;
  --bs-btn-active-border-color:  #003580;
  --bs-btn-disabled-color:       #004aad;
  --bs-btn-disabled-border-color:#004aad;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
/* Unified label treatment app-wide: .93rem / 600 / #374151, no uppercase */
label,
.form-label,
.col-form-label {
  font-size: .93rem;
  font-weight: 600;
  color: #374151;
}
.form-check-label {
  font-weight: 500;
}
.form-control:focus {
  border-color: #004aad;
  box-shadow: 0 0 0 3px rgba(0, 74, 173, .18);
}

/* ── Nav Tabs ────────────────────────────────────────────────────────────── */
.nav-tabs .nav-link {
  color: #495057;
  transition: color .15s;
}
.nav-tabs .nav-link:hover {
  color: #004aad;
}
.nav-tabs .nav-link.active {
  color: #004aad;
  font-weight: 600;
  background: #eff6ff;
  border-bottom: 3px solid #004aad;
  border-radius: 6px 6px 0 0;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
/* No uppercase/letter-spacing: keeps the effective readability of .93rem */
.table thead th {
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
  font-size: .93rem;
  color: #495057;
}
.table-hover tbody tr:hover {
  background: #f0f4ff;
}

/* ── Badges & List Groups ────────────────────────────────────────────────── */
.badge {
  border-radius: 4px;
  font-weight: 600;
}
.list-group-item.active {
  background-color: var(--sm-primary);
  border-color: var(--sm-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Dental Arcade — extracted from patientDentalArcade.html.twig
   ═══════════════════════════════════════════════════════════════════════════ */

.dental-arcade-page {
  font-family: 'Inter', sans-serif;
  color: #333;
  position: relative;
}

.dental-arcade-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  margin-top: 8px;
  padding-bottom: 8px;
}

.svg-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.svg-container {
  max-width: 360px;
  height: auto;
  position: relative;
  overflow: visible;
  margin: 0 auto;
}

/* Tooth base styles */
#Spots polygon,
#Spots path {
  fill: #ffffff;
  stroke: #cccccc;
  stroke-width: 1px;
  transition: fill 0.25s, stroke 0.25s;
  cursor: pointer;
}

#Spots polygon:hover,
#Spots path:hover {
  fill: #dddddd;
  stroke: #999999;
}

#Spots polygon.selected,
#Spots path.selected {
  stroke: #f39c12;
  stroke-width: 2px;
  filter: drop-shadow(0 0 5px rgba(243, 156, 18, 0.7));
}

/* Touch devices — slightly thicker stroke for easier targeting */
@media (pointer: coarse) {
  #Spots polygon,
  #Spots path {
    stroke-width: 3px;
  }
}

/* Info Panels */
.status-info,
.legend {
  background: white;
  padding: 14px;
  border-radius: var(--sm-radius);
  border: 1px solid #e3e8ef;
  width: 100%;
  box-sizing: border-box;
}
.legend   { max-width: 220px; }
.status-info { max-width: 280px; }

.status-info p {
  margin: 5px 0;
  font-size: .93rem;
}

.status-info kbd {
  background: #eef2ff;
  color: #004aad;
  border: 1px solid #c7d4f7;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .85rem;
}

#selected-tooth,
#current-status {
  font-weight: bold;
  color: #2c3e50;
}

/* Legend */
.legend h3 {
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #2c3e50;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 4px 0;
  font-size: .88rem;
}

.legend-color {
  width: 18px;
  height: 18px;
  margin-right: 9px;
  border-radius: 3px;
  border: 1px solid #ddd;
  flex-shrink: 0;
}

/* Status Summary Bar */
.dental-summary {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-size: .88rem;
  color: #666;
}
.dental-summary strong {
  display: block;
  margin-bottom: 6px;
}
.dental-summary-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.dental-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  background: #f0f2f5;
  color: #333;
}
.dental-summary-badge .badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Save feedback */
.dental-save-feedback {
  display: none;
  position: absolute;
  top: -8px;
  right: 0;
  font-size: .85rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  background: #e6f4ea;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  z-index: 10;
  pointer-events: none;
}
.dental-save-feedback.saving {
  background: #fff8e1;
  color: #e65100;
  border-color: #ffe082;
}

/* Context Menu */
.context-menu {
  position: fixed;
  display: none;
  background: white;
  border: 1px solid #ddd;
  border-radius: var(--sm-radius-sm);
  box-shadow: var(--sm-shadow-md);
  z-index: 1000;
  min-width: 160px;
}
.context-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: .93rem;
  font-weight: 500;
}
.context-item:hover {
  background-color: var(--sm-primary-light);
}
.context-divider {
  height: 1px;
  background: #eee;
  margin: 3px 0;
}

/* Responsive */
@media (max-width: 900px) {
  .dental-arcade-layout {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .legend,
  .status-info {
    width: 100%;
    max-width: 450px;
  }
}

@media (max-width: 767px) {
  .svg-container {
    aspect-ratio: 1 / 1.5;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .svg-container {
    aspect-ratio: 1 / 1.5;
  }
  .status-info p,
  .legend-item {
    font-size: .88rem;
  }
}

/* ── Bascule Antécédents / Dossier (mobile) ──────────────────────────────── */
.sm-atcd-switch {
  margin: 2px 0 12px;
  border: 1px solid var(--sm-primary);
  border-radius: 9px;
  overflow: hidden;
}
.sm-atcd-switch__btn {
  flex: 1 1 0;
  border: 0;
  background: #fff;
  color: var(--sm-primary);
  font-weight: 600;
  font-size: .92rem;
  padding: .5rem .4rem;
  cursor: pointer;
}
.sm-atcd-switch__btn + .sm-atcd-switch__btn {
  border-left: 1px solid var(--sm-primary);
}
.sm-atcd-switch__btn.is-active {
  background: var(--sm-primary);
  color: #fff;
}

/* ── Multi-select indicator ──────────────────────────────────────────────── */
.dental-multiselect-indicator {
  display: none;
  font-size: .88rem;
  color: var(--sm-primary);
  font-weight: 600;
  margin-top: 6px;
  padding: 3px 8px;
  background: var(--sm-primary-light);
  border-radius: 10px;
  text-align: center;
}
.dental-multiselect-indicator.active {
  display: block;
}

/* ── Per-tooth note textarea ─────────────────────────────────────────────── */
#tooth-note-section {
  margin-top: 10px;
}
#tooth-note-section label {
  font-size: .88rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#tooth-note-input {
  font-size: .93rem;
  resize: vertical;
  min-height: 56px;
}

/* ── History panel ───────────────────────────────────────────────────────── */
.dental-history-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 270px;
  background: white;
  border-radius: var(--sm-radius);
  z-index: 200;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}
.dental-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  font-size: .93rem;
  font-weight: 600;
}
.dental-history-close {
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  color: #666;
  line-height: 1;
  padding: 0 2px;
}
.dental-history-list {
  max-height: 320px;
  overflow-y: auto;
}
.dental-history-item {
  padding: 9px 14px;
  border-bottom: 1px solid #f3f3f3;
  cursor: pointer;
  font-size: .93rem;
}
.dental-history-item:hover {
  background: var(--sm-primary-light);
}
.dental-history-date {
  font-weight: 600;
  color: #333;
  margin-bottom: 3px;
}
.dental-history-changes {
  color: #666;
  line-height: 1.4;
}
.dental-history-restore {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-size: .85rem;
  /* Ambre : le seul geste du panneau défait quelque chose. Il l'annonce par sa
     couleur autant que par son libellé, sans virer au rouge d'une suppression
     définitive — l'instantané n'est que retiré de la liste. */
  color: #b45309;
  font-weight: 600;
  cursor: pointer;
}
.dental-history-restore:hover { text-decoration: underline; }

.dental-history-item--actuelle { border-left: 3px solid var(--sm-primary); }

/* Mobile : le panneau d'historique passe en flux normal, juste sous le bouton
   « Historique ». En absolute (top/right) il s'ancrait en haut à droite de la
   page, donc loin du bouton une fois la mise en page empilée en colonne. */
@media (max-width: 900px) {
  .dental-history-panel {
    position: static;
    width: 100%;
    max-width: 450px;
    margin: 12px auto 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  }
  /* Au doigt : le seul geste du panneau ne doit pas se viser au pixel près.
     Le lien nu mesurait 19 px de haut, la moitié d'une pulpe de doigt, et il
     défait quelque chose — se tromper de ligne coûte cher. */
  .dental-history-restore {
    padding: 8px 2px;
    margin-top: 2px;
  }
}

/* ── Dentition toggle ────────────────────────────────────────────────────── */
.dental-mode-toggle {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 0;
}
.dental-mode-toggle .btn {
  font-size: .93rem;
  padding: 4px 12px;
}

/* ── Synthèse dentiste ───────────────────────────────────────────────────── */
#synthesePatient .btn { font-size: .93rem; }
/* baseSynthese textarea has no Bootstrap class — override browser default */
#synthesePatient textarea {
  font-size: .93rem;
  font-family: inherit;
  width: 100%;
}

/* ── Historique complet — year & date headers ────────────────────────────── */
.historiqueMedicalComplet .anneeHistorique {
  background: linear-gradient(90deg, #dbeafe 0, #e8f0fe 100%) !important;
  cursor: pointer;
  user-select: none;
  border-top: 2px solid #bfdbfe !important;
}
.historiqueMedicalComplet .anneeHistorique td {
  background: linear-gradient(90deg, #dbeafe 0, #e8f0fe 100%) !important;
  box-shadow: none !important;
  font-size: .93rem;
  font-weight: 700;
  color: #1e3a5f;
  padding-top: .5rem;
  padding-bottom: .5rem;
  letter-spacing: .03em;
}
.historiqueMedicalComplet .anneeHistorique:hover {
  background: linear-gradient(90deg, #bfdbfe 0, #dbeafe 100%) !important;
}
.historiqueMedicalComplet .anneeHistorique .far {
  color: #3b82f6;
  font-size: .85rem;
}
.historiqueMedicalComplet .dateHistorique {
  border-top: 2px solid #93c5fd !important;
}
.historiqueMedicalComplet .dateHistorique td {
  background: #e2ecff !important;
  box-shadow: none !important;
  font-size: .93rem;
  font-weight: 600;
  color: #1e3a5f;
  padding-top: .4rem;
  padding-bottom: .4rem;
}
.historiqueMedicalComplet .dateHistorique td:last-child {
  padding-left: 1.4rem;
}
.historiqueMedicalComplet .histoHead th {
  font-size: .93rem;
  color: #4b5563;
  font-weight: 600;
  background: #f8fafc;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI Polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* Icon utility */
.icon-blue { color: var(--sm-primary); }

/* Page headings */
h1 {
  font-size: 1.55rem;
  font-weight: 700;
  color: #1a2433;
  padding-bottom: .4rem;
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 1.25rem;
}
h1 .fas, h1 .far, h1 .fab { color: var(--sm-primary); }

/* Dropdown menus */
.dropdown-menu {
  border: none;
  box-shadow: var(--sm-shadow-md);
  border-radius: var(--sm-radius);
  padding: .4rem 0;
}
.dropdown-item { padding: .45rem 1rem; font-size: 1rem; transition: background .12s, color .12s; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sm-primary-light); color: var(--sm-primary); }
.dropdown-item i { color: var(--sm-primary) !important; }

/* User avatar initial (in navbar dropdown toggle) */
.user-avatar-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, .22);
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  font-size: .85rem;
  font-weight: 700;
  margin-right: 7px;
  vertical-align: middle;
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: -.5px;
}

/* Search / filter card */
.card.card-body.bg-light { background: #fff !important; border: 1px solid #e9ecef !important; }

/* Form controls */
.form-control, .custom-select { border-radius: var(--sm-radius-sm); }
.input-group-text { background: var(--sm-primary-light); border-color: #ced4da; color: var(--sm-primary); }

/* Nav-tab icon opacity */
.nav-tabs .nav-link i { opacity: .7; transition: opacity .15s; }
.nav-tabs .nav-link.active i, .nav-tabs .nav-link:hover i { opacity: 1; }

/* Navbar notification badge */
.navbar .badge { background: #e74c3c; border-radius: 10px; font-size: .85rem; padding: 2px 6px; vertical-align: super; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #c5cee0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sm-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
   Patient / Practitioner Listing
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card shell — JS injects the <table> directly into #listing */
#listing {
  border-radius: var(--sm-radius);
  border: 1px solid #e3e8ef;
  background: #fff;
}
#listing .table { margin-bottom: 0; background: #fff; border-radius: var(--sm-radius); overflow: hidden; }

/* Natural-size text, moderate padding, vertical centering.
   Row height is driven by the action buttons below, not by the cell padding. */
#listing .table td,
#listing .table th { padding: .4rem .7rem; vertical-align: middle; line-height: 1.35; }

/* Column headers */
#listing .table thead th { white-space: nowrap; }

/* Row hover with smooth transition */
#listing .table-hover tbody tr { transition: background .1s; }
#listing .table-hover tbody tr:hover { background: var(--sm-primary-light); }

/* Keyboard-selected row */
#listing .table-active td { background: var(--sm-primary-light) !important; }
#listing .table-active td:first-child { border-left: 3px solid var(--sm-primary); padding-left: calc(.7rem - 3px); }

/* Deceased patient rows */
#listing tr.dcd td { color: #adb5bd; }
#listing tr.dcd td:nth-child(2) { text-decoration: line-through; }

/* First-column icon button — patient (secondary → ghost) */
#listing .table td:first-child .btn-secondary {
  background: transparent;
  border-color: #dee2e6;
  color: #6c757d;
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#listing .table td:first-child .btn-secondary:hover {
  background: var(--sm-primary-light);
  border-color: var(--sm-primary);
  color: var(--sm-primary);
}

/* First-column icon button — practitioner (info → soft blue) */
#listing .table td:first-child .btn-info {
  background: rgba(0, 74, 173, .1);
  border-color: transparent;
  color: var(--sm-primary);
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#listing .table td:first-child .btn-info:hover { background: rgba(0, 74, 173, .2); }

/* First-column icon button — user-practitioner (danger → soft red) */
#listing .table td:first-child .btn-danger {
  background: rgba(231, 76, 60, .1);
  border-color: transparent;
  color: #e74c3c;
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#listing .table td:first-child .btn-danger:hover { background: rgba(231, 76, 60, .18); }

/* Last-column action buttons — ghost with brand hover */
#listing .table td:last-child .btn-light {
  background: transparent;
  border-color: transparent;
  color: var(--sm-primary);
  padding: .3rem .5rem;
  line-height: 1.2;
}
#listing .table td:last-child .btn-light:hover { background: var(--sm-primary-light); }

/* Pagination caption */
#listing caption {
  caption-side: bottom;
  padding: .45rem 1rem;
  font-size: .88rem;
  background: #fff8e1;
  color: #856404;
  border-bottom: 1px solid #ffe08a;
}

/* Empty-state */
/* Listing footer: count + load-more */
.sm-listing-footer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem;
  padding: .7rem 1rem; background: #f8fafc;
  border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 10px 10px;
  font-size: .9rem; color: #6b7280;
}
.sm-listing-count { display: flex; align-items: center; font-weight: 500; }
.sm-listing-more-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem 1rem; font-size: .88rem; font-weight: 600;
  color: #004aad; background: #eff6ff; border: 1.5px solid #bfdbfe;
  border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s;
}
.sm-listing-more-btn:hover { background: #dbeafe; border-color: #93c5fd; color: #003a8c; }
.sm-listing-table { border-radius: 10px 10px 0 0; overflow: hidden; }

.listing-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 24px;
  background: #fff;
  border-radius: var(--sm-radius);
  border: 1px solid #e3e8ef;
}
.listing-empty-icon { font-size: 3.5rem; color: #dee2e6; margin-bottom: 1rem; }
.listing-empty-title { font-size: 1.05rem; font-weight: 600; color: #6c757d; margin: 0 0 .3rem; }
.listing-empty-sub { font-size: .85rem; color: #adb5bd; margin: 0; }

/* Print layout */
@media print {
  .navbar,
  .container-fluid > .row.fixed-top,
  #alert_section,
  .context-menu,
  .status-info,
  .dental-save-feedback,
  .sm-bottomnav,
  .btn,
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  .dental-arcade-layout {
    flex-direction: row;
    justify-content: flex-start;
    gap: 24px;
  }

  .svg-container {
    max-width: 300px;
  }

  .legend {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Typography alignment
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* Override Bootstrap's default blue focus ring on all interactive elements */
a:focus,
button:focus,
.btn:focus,
.form-control:focus,
.custom-select:focus {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Skeleton loading
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes sm-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.sm-skeleton {
  pointer-events: none;
  min-height: 120px;
  border-radius: var(--sm-radius);
  background: linear-gradient(90deg, #f0f2f5 25%, #e4e8ef 50%, #f0f2f5 75%);
  background-size: 1200px 100%;
  animation: sm-shimmer 1.4s infinite linear;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Configuration page
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tab panel container */
.tab-content.border-left {
  border-left: 3px solid var(--sm-primary) !important;
  border-radius: 0 var(--sm-radius) var(--sm-radius) 0;
  background: #fafbfc;
}

/* Section headings */
.tab-content h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sm-primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.tab-content h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1em;
  background: var(--sm-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* List group items */
.tab-content .list-group { border-radius: var(--sm-radius); border: 1px solid #e3e8ef; }
.tab-content .list-group-item {
  border-color: #edf0f5;
  padding: .6rem 1rem;
  background: #fff;
  transition: background .12s, padding-left .12s;
}
.tab-content .list-group-item:hover { background: var(--sm-primary-light); padding-left: 1.25rem; }
.tab-content .list-group-item a {
  color: #2c3e50;
  font-weight: 500;
  font-size: .93rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.tab-content .list-group-item a::after {
  content: '\f054'; /* fa-chevron-right */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: .65rem;
  color: #b0bec5;
  margin-left: auto;
  transition: color .12s, transform .12s;
}
.tab-content .list-group-item:hover a { color: var(--sm-primary); }
.tab-content .list-group-item:hover a::after { color: var(--sm-primary); transform: translateX(2px); }
.tab-content .list-group-item a i { color: var(--sm-primary); opacity: .8; width: 1.1em; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   Patient sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section labels inside sidebar panels */
#patientInfo .nav-tabs { border-bottom: 1px solid #e9ecef; }

/* Sidebar group spacing — loose enough to scan (E8) */
#patientInfo .form-group,
#patientInfo .formBloc {
  margin-bottom: .65rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid #f5f6f8;
}
#patientInfo .form-group:last-child,
#patientInfo .formBloc:last-child { border-bottom: none; }

/* Sidebar field labels — unified label style (no uppercase, .93rem/600) */
#patientInfo label,
#patientInfo .formBlocLabel {
  font-size: .93rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .2rem;
  display: block;
}

/* Sidebar field values */
#patientInfo .formBlocValue,
#patientInfo p:not(.formBlocLabel) {
  font-size: .93rem;
  color: #1e293b;
  font-weight: 500;
  margin-bottom: 0;
}

/* Sidebar form controls */
#patientInfo .form-control,
#patientInfo .form-control-sm,
#patientInfo .form-select,
#patientInfo .form-select-sm {
  font-size: .93rem;
}
/* Sidebar placeholders */
#patientInfo input::placeholder,
#patientInfo textarea::placeholder {
  color: #94a3b8;
  font-style: italic;
}

/* Panel tab content padding */
#patientFormTab { padding: .75rem !important; }

/* ── Agenda ─────────────────────────────────────────────────────────────── */

#calendar {
  background: #fff;
  border-radius: var(--sm-radius);
  border: 1px solid #e3e8ef;
  overflow: hidden;
}

#calendar .fc-toolbar {
  padding: .75rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 0 !important;
}
#calendar .fc-toolbar h2 {
  font-size: 1.1rem !important;
  font-weight: 700;
  color: #1a2433;
}
/* Lock the small (btn-sm) size onto every toolbar button via the persistent
   .btn selector. agenda.js adds `btn-sm` with jQuery once at init, but with the
   bootstrap5 theme FullCalendar re-renders the center chunk on every view switch
   and resets the button className to `btn btn-primary` — dropping `btn-sm`, so
   the Semaine/Mois buttons grew to the default .btn padding after toggling.
   Styling .btn directly survives the re-render, keeping the size constant. */
#calendar .fc-toolbar .btn {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: var(--sm-radius-sm) !important;
}

/* Keep the Semaine/Mois view-toggle buttons a constant, equal size so the
   highlighted button doesn't differ between views (longer "Semaine" vs "Mois"). */
#calendar .fc-toolbar .fc-toolbar-chunk:nth-child(2) .btn {
  min-width: 5.5rem;
}

/* FC v5 bootstrap5 theme: buttonIcons renders <span class="bi bi-{name}">.
   The BI font is not loaded — bridge fa-* icon names to FontAwesome here. */
.fc .bi-fa-calendar-alt::before,
.fc .bi-fa-angle-double-left::before,
.fc .bi-fa-angle-left::before,
.fc .bi-fa-sync-alt::before,
.fc .bi-fa-angle-right::before,
.fc .bi-fa-angle-double-right::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-style: normal;
  display: inline-block;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
}
.fc .bi-fa-calendar-alt::before       { content: "\f073"; }
.fc .bi-fa-angle-double-left::before  { content: "\f100"; }
.fc .bi-fa-angle-left::before         { content: "\f104"; }
.fc .bi-fa-sync-alt::before           { content: "\f2f1"; }
.fc .bi-fa-angle-right::before        { content: "\f105"; }
.fc .bi-fa-angle-double-right::before { content: "\f101"; }

#calendar .fc-today { background: var(--sm-primary-light) !important; }
#calendar .fc-day-today { background: rgba(67,153,228,.06) !important; }

#calendar .fc-day-header {
  padding: .45rem 0 !important;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #fafbfc;
  border-bottom: 1px solid #e9ecef;
}

#calendar .fc-time-grid .fc-slats td { border-color: #f1f3f5; }

#calendar .fc-event:hover { filter: brightness(0.9); }

/* ── FC5 timegrid — card-style events ───────────────────────────────────── */
#calendar .fc-timegrid .fc-v-event:not(.fc-nonbusiness) {
  background-color: #ffffff !important;
  border-width: 0 0 0 6px !important;
  border-style: solid !important;
  border-radius: 3px;
  outline: 1px solid #eceff3;
  padding: 0 3px !important;
}

#calendar .fc-timegrid .fc-v-event:not(.fc-nonbusiness) .fc-event-time {
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: #6c757d !important;
  padding: 0;
  line-height: 1.3;
  /* Time + appended consultation type share this line; truncate inside the box */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#calendar .fc-timegrid .fc-v-event:not(.fc-nonbusiness) .fc-event-title {
  font-size: .875rem !important;
  font-weight: 600 !important;
  color: var(--sm-primary) !important;
  line-height: 1.25;
}

/* Consultation type — shown inline after the time, muted to read as secondary */
#calendar .fc-timegrid .fc-v-event .sm-event-type {
  color: #8a929c;
  font-weight: 400;
}

/* Mobile : réduire le texte des événements pour que le nom du patient tienne
   dans la case (le .875rem déborde et devient illisible sur petit écran). */
@media (max-width: 767.98px) {
  #calendar .fc-timegrid .fc-v-event:not(.fc-nonbusiness) .fc-event-title {
    font-size: .62rem !important;
    line-height: 1.15;
  }
  #calendar .fc-timegrid .fc-v-event:not(.fc-nonbusiness) .fc-event-time {
    font-size: .58rem !important;
  }
}

/* Clean timegrid slot lines */
#calendar .fc-timegrid-slot {
  height: 2.5rem;
  border-top-color: #f1f3f5;
}

#calendar .fc-timegrid-slot-minor {
  border-top-style: dashed;
  border-top-color: #f5f7f9;
}

#calendar .fc-timegrid-slot-label {
  font-size: .85rem !important;
  color: #6b7280;
  font-weight: 500;
  vertical-align: middle;
}

#calendar .fc-scrollgrid td,
#calendar .fc-scrollgrid th {
  border-color: #e9ecef;
}
#calendar .fc-daygrid-week-number {
  color: #004aad !important;
  background-color: #eff6ff !important;
  font-weight: 700; border-radius: 0 0 5px 0;
}
#calendar .fc-daygrid-week-number:hover {
  background-color: #dbeafe !important;
  text-decoration: underline;
}

/* ── Accès rapide mini-calendar (jQuery UI datepicker override) ──────────── */
/* Outer wrapper: blue gap visible between month cards */
#smallCalendar .ui-datepicker {
  background: #bfdbfe;
  border: none; border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,74,173,.22);
  padding: 6px; font-family: inherit; font-size: .92rem;
  overflow: visible;
}
/* Each month = its own white card */
#smallCalendar .ui-datepicker-group {
  background: #fff;
  border-radius: 10px !important;
  overflow: hidden;
  width: calc(25% - 6px) !important;
  margin: 3px !important;
  border: 1px solid #e3e8ef;
}
/* Flat solid blue header — no gradient */
#smallCalendar .ui-widget-header {
  background: #004aad;
  border: none; padding: .5rem .45rem;
}
#smallCalendar .ui-datepicker-title {
  color: #fff; font-size: .88rem; font-weight: 700;
}
/* Prev / Next — icon only (prevText/nextText are '' in JS) */
#smallCalendar .ui-datepicker-prev,
#smallCalendar .ui-datepicker-next {
  top: .45rem; cursor: pointer;
  border: none !important; background: transparent !important;
  border-radius: 6px; width: 24px; height: 24px;
  transition: background .15s;
}
#smallCalendar .ui-datepicker-prev:hover,
#smallCalendar .ui-datepicker-next:hover { background: rgba(255,255,255,.2) !important; }
#smallCalendar .ui-datepicker-prev .ui-icon,
#smallCalendar .ui-datepicker-next .ui-icon {
  background-image: none !important; text-indent: 0 !important;
  overflow: visible; font-size: 0;
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
}
#smallCalendar .ui-datepicker-prev .ui-icon::before,
#smallCalendar .ui-datepicker-next .ui-icon::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  font-size: .75rem; color: rgba(255,255,255,.95);
}
#smallCalendar .ui-datepicker-prev .ui-icon::before { content: "\f053"; }
#smallCalendar .ui-datepicker-next .ui-icon::before { content: "\f054"; }
/* Calendar table */
#smallCalendar .ui-datepicker-calendar { margin: 0; border-collapse: collapse; width: 100%; }
#smallCalendar .ui-datepicker-calendar thead th {
  background: #eff6ff; color: #1d4ed8;
  font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: .32rem .15rem; border: none;
}
#smallCalendar .ui-datepicker-calendar td { padding: 1px; border: none; }
/* Day cells */
#smallCalendar .ui-widget-content .ui-state-default {
  display: block; text-align: center; padding: .26rem .1rem;
  border-radius: 6px; font-size: .85rem; font-weight: 500;
  border: none !important; background: none; color: #1e293b;
  text-decoration: none;
}
#smallCalendar .ui-widget-content .ui-state-hover,
#smallCalendar .ui-widget-content .ui-state-focus {
  background: #dbeafe !important; color: #004aad !important; border: none !important;
}
#smallCalendar .ui-widget-content .ui-state-active {
  background: #004aad !important; color: #fff !important;
  border: none !important; font-weight: 700;
}
/* Today */
#smallCalendar .ui-datepicker-today .ui-state-default {
  background: #eff6ff !important; color: #004aad !important;
  border: 2px solid #93c5fd !important; font-weight: 700;
}
#smallCalendar .ui-datepicker-today .ui-state-active {
  background: #004aad !important; color: #fff !important; border: none !important;
}
/* Other-month days */
#smallCalendar .ui-datepicker-other-month .ui-state-default {
  color: #cbd5e1 !important; font-weight: 400;
}

/* ── Transmissions page ──────────────────────────────────────────────────── */
.sm-trans-header,
.sm-page-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem;
}
.sm-trans-icon-wrap,
.sm-page-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: #eff6ff; color: #004aad;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.sm-trans-title,
.sm-page-title { font-size: 1.35rem; font-weight: 800; color: #1e293b; margin: 0; line-height: 1.2; }
.sm-trans-sub,
.sm-page-sub   { font-size: .88rem; color: #64748b; margin: .15rem 0 0; }
.sm-trans-new-btn,
.sm-btn-primary {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.1rem; font-size: .93rem; font-weight: 600;
  color: #fff !important; background: #004aad !important; border: none !important; border-radius: 10px !important;
  cursor: pointer; transition: background .15s; text-decoration: none;
}
.sm-trans-new-btn:hover,
.sm-btn-primary:hover { background: #003a8c !important; }
/* Toolbar */
.sm-trans-toolbar,
.sm-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.25rem;
}
.sm-trans-tabs,
.sm-tabs {
  display: inline-flex; flex-wrap: wrap; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px;
}
.sm-trans-tab,
.sm-tab {
  display: inline-flex !important; align-items: center; gap: .45rem;
  padding: .42rem 1rem !important; font-size: .93rem !important; font-weight: 600 !important;
  border: none !important; border-radius: 8px !important; cursor: pointer;
  /* Même cas que .sm-stat-tabs .nav-link : la barre d'onglets est teintée
     (#f1f5f9), où #64748b ne donne que 4,34:1. */
  background: transparent !important; color: #475569 !important; text-decoration: none !important;
  transition: background .15s, color .15s; box-shadow: none !important;
}
.sm-tab:hover { color: #004aad !important; }
.sm-trans-tab.btn-secondary,
.sm-tab.active {
  background: #fff !important; color: #004aad !important;
  border: 1px solid #d4ddea !important;
}
.sm-trans-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: #ef4444; color: #fff; border-radius: 10px;
  font-size: .85rem; font-weight: 700;
}
.sm-trans-filters { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.sm-trans-chip,
.sm-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem !important; font-size: .85rem !important; font-weight: 500 !important;
  border: 1.5px solid #e2e8f0 !important; border-radius: 20px !important;
  background: #fff !important; color: #64748b !important; cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s; box-shadow: none !important;
}
.sm-trans-chip:hover,
.sm-chip:hover { background: #eff6ff !important; border-color: #bfdbfe !important; color: #004aad !important; }
.sm-chip.disabled, .sm-chip:disabled { opacity: .5; pointer-events: none; }
.sm-trans-chip.btn-secondary,
.sm-chip.active {
  background: #eff6ff !important; border-color: #004aad !important;
  color: #004aad !important; font-weight: 600 !important;
}
/* Table */
.sm-trans-table-wrap,
.sm-data-table-wrap {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  overflow: hidden; overflow-x: auto;
}
/* Generic data-table styling (reused by log/history pages) */
.sm-data-table-wrap + .sm-data-table-wrap { margin-top: 1rem; }
.sm-data-section-title {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap;
  padding: .8rem 1rem; margin: 0; font-size: 1rem; font-weight: 700; color: #1e293b;
  border-bottom: 1px solid #eef2f7;
}
.sm-data-table-wrap table { margin: 0 !important; }
.sm-data-table-wrap table thead th {
  background: #f8fafc; color: #64748b; font-size: .9rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 2px solid #e2e8f0; padding: .65rem 1rem; white-space: nowrap;
}
.sm-data-table-wrap table tbody td {
  padding: .7rem 1rem; vertical-align: middle; font-size: .93rem;
  border-top: none; border-bottom: none;
  background: transparent;            /* override Bootstrap --bs-table-bg */
  box-shadow: none;                   /* override Bootstrap striping shadow */
}
.sm-data-table-wrap table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .12s; }
.sm-data-table-wrap table tbody tr:last-child { border-bottom: none; }
.sm-data-table-wrap table.table-hover tbody tr:hover > * { background: #f6f9ff; }
/* #64748b donne 4,76:1 sur le blanc de la carte et 4,51:1 sur la ligne
   survolée (#f6f9ff) — au-dessus du seuil dans les deux états, mais la marge y
   est mince : assombrir le survol ferait repasser ce texte sous la barre. */
.sm-data-table-wrap table tbody td small { color: #64748b; }

/* Label/value summary list */
.sm-data-list { margin: 0; }
.sm-data-list .list-group-item {
  border: none !important; border-bottom: 1px solid #f1f5f9 !important;
  font-size: .93rem; padding: .65rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sm-data-list .list-group-item:last-child { border-bottom: none !important; }
.sm-data-list .list-group-item > span:first-child { color: #64748b; }
.sm-data-list .list-group-item > span:last-child {
  font-weight: 700; color: #1e293b;
  background: #eff6ff; border-radius: 8px; padding: .1rem .6rem; min-width: 2.4rem; text-align: center;
}

/* Status pills (reused by log/history status cells) */
.sm-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .6rem; border-radius: 20px;
  font-size: .85rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
/* Chaque pilule pose son texte sur SON fond teinté, pas sur du blanc : le ratio
   s'y calcule donc contre ce fond. Deux des quatre échouaient — succès 3,70:1 et
   muette 4,20:1. « Muette » est porté par le fond pâle, pas par un texte qu'on
   ne lit pas. */
.sm-pill-success { background: #e7f6ec; color: #157347; }  /* 3,70 → 5,26 */
.sm-pill-danger  { background: #fdecea; color: #b03a2e; }  /* 5,26 ✓ */
.sm-pill-muted   { background: #eef1f5; color: #475569; }  /* 4,20 → 6,69 */
.sm-pill-info    { background: #eff6ff; color: #004aad; }  /* 7,47 ✓ */
/* Empty state */
.sm-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3rem 1rem; min-height: 240px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
}
.sm-empty-state i { font-size: 3rem; color: #cbd5e1; margin-bottom: 1rem; }
.sm-empty-state p { font-size: .95rem; color: #64748b; margin: 0; }

/* KPI summary cards */
.sm-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .85rem; margin-bottom: 1.1rem;
}
.sm-kpi-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem 1.1rem;
}
.sm-kpi-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; margin-bottom: .6rem;
}
.sm-kpi-value { font-size: 1.55rem; font-weight: 800; color: #1e293b; line-height: 1.05; }
.sm-kpi-value small { font-size: .9rem; font-weight: 600; color: #64748b; }
.sm-kpi-label { font-size: .85rem; color: #64748b; margin-top: .2rem; }
/* Inline bar gauge (table cells) */
.sm-bar { display: flex; align-items: center; gap: .6rem; }
.sm-bar-track {
  flex: 1; height: 8px; min-width: 50px;
  background: #eef2f7; border-radius: 999px; overflow: hidden;
}
.sm-bar-fill { height: 100%; border-radius: 999px; }
.sm-bar-val { min-width: 4rem; text-align: right; font-weight: 600; color: #1e293b; font-variant-numeric: tabular-nums; }
.sm-data-note { font-size: .85rem; color: #64748b; margin: .7rem 0 0; }

/* Section sub-heading (left-aligned, used inside stat tabs etc.) */
.sm-section-heading {
  font-size: 1.05rem; font-weight: 700; color: #1e293b;
  margin: 1.5rem 0 1rem; display: flex; align-items: center; gap: .55rem;
}
.sm-section-heading i { color: #004aad; }

/* Section card — groups a whole stats section (heading + content) for clear separation.
   Light grey background so the inner white cards (KPIs, charts, tables) stand out. */
.sm-section-card {
  background: #f8fafc; border: 1px solid #e8edf3; border-radius: 16px;
  padding: 1.25rem 1.4rem 1.4rem; margin-bottom: 1.5rem;
}
.sm-section-card:last-child { margin-bottom: 0; }
.sm-section-card > .sm-section-heading:first-child { margin-top: 0; }

/* Sub-section title (separates blocks within a section, e.g. KPIs vs. table) */
.sm-subsection-title {
  font-size: .95rem; font-weight: 700; color: #334155;
  margin: 1.1rem 0 .7rem; display: flex; align-items: center; gap: .5rem;
}
.sm-subsection-title i { color: #004aad; }

/* Inline form label + period dropdown used in toolbars (period filter) */
.sm-field-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; color: #64748b; }
.sm-field-label i { color: #004aad; }
.sm-period-select {
  width: auto !important; min-width: 190px;
  font-size: .93rem !important; font-weight: 600; color: #1e293b;
  border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important;
  padding: .42rem 2rem .42rem .85rem !important; cursor: pointer;
}
.sm-period-select:focus { border-color: #004aad !important; box-shadow: none !important; }
.sm-toolbar-hint { margin-left: auto; font-size: .9rem; color: #64748b; font-weight: 500; }

/* Content tabs styled like the transmissions pill tabs (keeps Bootstrap tab JS) */
.sm-stat-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 2px;
  background: #f1f5f9; border-radius: 10px; padding: 3px; border: none;
}
.sm-stat-tabs .nav-link {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem 1rem; font-size: .93rem; font-weight: 600;
  /* #475569 et non #64748b : sur le fond teinté de la barre d'onglets
     (#f1f5f9) ce dernier ne donne que 4,34:1, sous le seuil de 4,5. */
  border: none; border-radius: 8px; color: #475569; background: transparent;
  transition: background .15s, color .15s;
}
.sm-stat-tabs .nav-link:hover { color: #004aad; }
.sm-stat-tabs .nav-link.active {
  background: #fff; color: #004aad; border: 1px solid #d4ddea;
}
#listeTransmissions thead th {
  background: #f8fafc; color: #64748b; font-size: .93rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid #e2e8f0; padding: .5rem 1rem; white-space: nowrap;
}
#listeTransmissions tbody td { padding: .4rem 1rem; vertical-align: middle; font-size: .93rem; line-height: 1.35; }
/* Keep the in-row folder button from inflating row height */
#listeTransmissions tbody td .btn-sm { padding: .3rem .5rem; line-height: 1.2; }
#listeTransmissions tbody tr { border-bottom: 1px solid #f1f5f9; }
#listeTransmissions tbody tr:last-child { border-bottom: none; }
#listeTransmissions tbody tr.fw-bold { border-left: 3px solid #004aad; background: #f8fbff; }
#listeTransmissions tbody tr.fw-bold td:first-child { padding-left: calc(1rem - 3px); }
/* Pagination */
.sm-trans-pagination {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  margin-top: 1.25rem;
}
.sm-trans-page-info { font-size: .9rem; color: #64748b; font-weight: 500; min-width: 80px; text-align: center; }
.sm-trans-page-btn {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1.5px solid #e2e8f0; background: #fff; color: #004aad;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; cursor: pointer; transition: background .15s, border-color .15s;
}
.sm-trans-page-btn:hover { background: #eff6ff; border-color: #bfdbfe; }

/* ── Appointment type legend ─────────────────────────────────────────────── */

#typesRdv {
  background: #fff;
  border-radius: var(--sm-radius);
  border: 1px solid #e3e8ef;
  padding: .75rem 1rem;
  margin-top: 1rem;
}
#typesRdv h5 {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6c757d;
  margin: 0 0 .5rem;
}
#typesRdv .table td { padding: .28rem 0; font-size: .88rem; border: none; }

/* ── Sidebar panels ──────────────────────────────────────────────────────── */

#patientInfo, #historiquePatient, #patientLinksPro {
  border-radius: var(--sm-radius);
  border: 1px solid #e3e8ef;
  overflow: hidden;
  margin-bottom: .75rem;
}
#patientInfo .nav-tabs,
#historiquePatient .nav-tabs,
#patientLinksPro .nav-tabs { background: #fafbfc; }
#patientFormTab,
#historiquePatient > div:last-child { background: #fff !important; }

/* ── Patient header ──────────────────────────────────────────────────────── */

.patient-header-card {
  background: #fff;
  border-radius: var(--sm-radius);
  border: 1px solid #e3e8ef;
  padding: 1rem 1.25rem;
  margin-bottom: .5rem;
}

.patient-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
  letter-spacing: -.5px;
}
.patient-avatar--m { background: linear-gradient(135deg, #004aad, #0056b3); }
.patient-avatar--f { background: linear-gradient(135deg, #c2185b, #e91e63); }
.patient-avatar--u { background: linear-gradient(135deg, #546e7a, #78909c); }

.patient-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a2433;
  line-height: 1.2;
}
.patient-birthname {
  font-size: .95rem;
  font-weight: 400;
  color: #6c757d;
}

.patient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
}
.patient-chip {
  display: inline-flex;
  align-items: center;
  background: #f1f3f5;
  border-radius: 20px;
  padding: .2rem .65rem;
  font-size: .93rem;
  color: #495057;
  white-space: nowrap;
  /* Jamais plus large que sa ligne : `.patient-chips` sait passer un badge à la
     ligne suivante, mais pas rétrécir un badge qui, à lui seul, dépasse. */
  max-width: 100%;
}
.patient-chip--birthday {
  background: #fff3cd;
  color: #856404;
}
.patient-chip-btn {
  display: inline-flex;
  align-items: center;
  background: #f1f3f5;
  border: none;
  border-radius: 20px;
  padding: .2rem .65rem;
  font-size: .93rem;
  color: #495057;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.patient-chip-btn:hover,
.patient-chip-btn:focus { background: #dee2e6; outline: none; }

/* ── Patient action toolbar ──────────────────────────────────────────────── */

.patient-action-toolbar {
  background: #fff;
  border-radius: var(--sm-radius);
  border: 1px solid #e5e7eb;
  padding: .5rem .75rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}
.patient-action-toolbar .btn {
  font-size: .88rem;
  padding: .38rem .68rem;
  line-height: 1.4;
}
.patient-action-toolbar .btn-sm {
  font-size: .85rem;
  padding: .25rem .5rem;
}
.patient-action-toolbar .dropdown-toggle-split {
  padding-left: .45rem;
  padding-right: .45rem;
}
.patient-action-toolbar .vr {
  height: 28px;
  opacity: .18;
  margin: 0 .2rem;
}

/* Document upload button — outlined, distinct from the action cluster */
.patient-action-toolbar .btn-doc-upload {
  border-style: dashed;
  border-width: 1.5px;
  font-weight: 600;
}
.patient-action-toolbar .btn-doc-upload:hover {
  background: #eff6ff;
  border-style: solid;
}

/* ── Content area section dividers ───────────────────────────────────────── */

.sm-section-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #8898aa;
  margin: 1.5rem 0 .6rem;
}
.sm-section-header::before,
.sm-section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e9ecef;
}

/* ── Lateral column ATCD form ────────────────────────────────────────────── */

#latForm {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
}
#latForm .formBloc,
#latForm .mb-3 {
  padding: .55rem .85rem;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 0 !important;
}
#latForm .formBloc:hover,
#latForm .mb-3:hover {
  background: #f8fafc;
}
#latForm .form-control,
#latForm .form-control-sm,
#latForm .form-select,
#latForm .form-select-sm,
#latForm .input-group-text {
  font-size: .93rem;
}
#latForm .formBloc:last-child,
#latForm .mb-3:last-child { border-bottom: none; }
#latForm .formBlocLabel,
#latForm label {
  font-size: .93rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .2rem;
  display: block;
}
#latForm .formBlocValue,
#latForm p:not(.formBlocLabel) {
  font-size: .93rem;
  color: #1e293b;
  font-weight: 500;
  margin-bottom: 0;
}
/* Placeholders */
#latForm input::placeholder,
#latForm textarea::placeholder {
  color: #94a3b8;
  font-style: italic;
}
/* Section label + add button on same line */
#latForm .mb-3:has(> button.float-end) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: .25rem;
}
#latForm .mb-3:has(> button.float-end) > label {
  margin-bottom: 0;
}
#latForm .mb-3:has(> button.float-end) > button.float-end {
  float: none !important;
}
#latForm .mb-3:has(> button.float-end) > textarea,
#latForm .mb-3:has(> button.float-end) > table {
  grid-column: 1 / -1;
}

/* ── Agenda event popover */
.sm-agenda-popover {
  min-width: 200px;
  max-width: 260px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
}
.sm-agenda-popover > :first-child { border-radius: 10px 10px 0 0; }
.sm-agenda-popover > :last-child  { border-radius: 0 0 10px 10px; }
.sm-agenda-popover .popover-header {
  background: var(--sm-primary);
  color: #fff;
  font-weight: 600;
  font-size: .875rem;
  padding: .5rem .75rem;
  border-bottom: none;
}
.sm-agenda-popover .popover-header::before { display: none; }
.sm-agenda-popover .popover-body {
  padding: .5rem .75rem .4rem;
  font-size: .88rem;
  line-height: 1.45;
}
.sm-agenda-popover .sm-pop-type {
  font-weight: 500;
  color: #343a40;
  margin-bottom: .2rem;
}
.sm-agenda-popover .sm-pop-type .fas.fa-circle {
  font-size: .5rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.sm-agenda-popover .sm-pop-motif {
  color: #6c757d;
  font-size: .85rem;
  margin-top: .2rem;
  white-space: pre-wrap;
}
.sm-agenda-popover .popover-footer {
  padding: .3rem .5rem;
  border-top: 1px solid rgba(0,0,0,.07);
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
}
.sm-agenda-popover .popover-footer .btn {
  padding: .28rem .38rem;
  font-size: .85rem;
  color: #495057;
  border: none;
  background: transparent;
  border-radius: 5px;
}
.sm-agenda-popover .popover-footer .btn:hover {
  background: var(--sm-primary-light, #e6f0ff);
  color: var(--sm-primary);
}
.sm-agenda-popover .popover-footer .btn.btn-primary {
  background: var(--sm-primary);
  color: #fff;
}
.sm-agenda-popover .popover-footer .btn.btn-primary:hover {
  filter: brightness(.9);
}
.sm-agenda-popover .popover-footer .fc-enattente-button,
.sm-agenda-popover .popover-footer .fc-dossier-button,
.sm-agenda-popover .popover-footer .fc-editer-button,
.sm-agenda-popover .popover-footer .fc-editer-off-button,
.sm-agenda-popover .popover-footer .fc-deplacer-button,
.sm-agenda-popover .popover-footer .fc-cloner-button,
.sm-agenda-popover .popover-footer .fc-honorer-button { color: var(--sm-primary); }
.sm-agenda-popover .popover-footer .fc-enattente-button:hover,
.sm-agenda-popover .popover-footer .fc-dossier-button:hover,
.sm-agenda-popover .popover-footer .fc-editer-button:hover,
.sm-agenda-popover .popover-footer .fc-editer-off-button:hover,
.sm-agenda-popover .popover-footer .fc-deplacer-button:hover,
.sm-agenda-popover .popover-footer .fc-cloner-button:hover,
.sm-agenda-popover .popover-footer .fc-honorer-button:hover { background: var(--sm-primary-light, #e6f0ff); color: var(--sm-primary); }
/* delete = destructive: red, not primary */
.sm-agenda-popover .popover-footer .fc-supprimer-button { color: #b03a2e; }
.sm-agenda-popover .popover-footer .fc-supprimer-button:hover { background: #fdecea; color: #922b21; }
/* arrow colour matches header */
.sm-agenda-popover.bs-popover-end > .popover-arrow::after { border-right-color: var(--sm-primary); }
.sm-agenda-popover.bs-popover-start > .popover-arrow::after { border-left-color: var(--sm-primary); }
.sm-agenda-popover.bs-popover-top > .popover-arrow::after  { border-top-color:   var(--sm-primary); }
.sm-agenda-popover.bs-popover-bottom > .popover-arrow::after { border-bottom-color: var(--sm-primary); }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .22);
}
.modal-header {
  background: linear-gradient(135deg, var(--sm-primary) 0%, var(--sm-primary-hover, #0056b3) 100%);
  border-bottom: none;
  padding: .85rem 1.25rem;
}
.modal-header .modal-title {
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
}
.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: .85;
}
.modal-header .btn-close:hover {
  opacity: 1;
}
.modal-body {
  padding: 1.25rem;
  background: #fff;
}
.modal-footer {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: .75rem 1.25rem;
  gap: .5rem;
}
.modal-footer .btn-light,
.modal-footer .btn-secondary {
  background: #fff;
  border-color: #dee2e6;
  color: #495057;
}
.modal-footer .btn-light:hover,
.modal-footer .btn-secondary:hover {
  background: #f0f4ff;
  border-color: var(--sm-primary);
  color: var(--sm-primary);
}
/* Destructive actions: visually distinct from Cancel (.btn-light) */
.btn-danger,
.modal-footer .btn-danger {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.btn-danger:hover,
.btn-danger:focus,
.modal-footer .btn-danger:hover,
.modal-footer .btn-danger:focus {
  background: #a93226;
  border-color: #a93226;
  color: #fff;
}
.btn-outline-danger {
  border-color: #c0392b;
  color: #b03a2e;
  background: transparent;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background: #fdecea;
  border-color: #a93226;
  color: #922b21;
}

/* ── Public pages (landing + contact) ────────────────────────────────────── */
/* Shared by login.html.twig and contact.html.twig */
.sm-public [role="main"] { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Nav */
.main-header { position:sticky; top:0; z-index:1000; background:#fff; box-shadow:0 1px 0 #e9ecef; padding:0 !important; }
.main-header .container { display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:.9rem 2rem; }
.main-header .logo { font-size:2rem; font-weight:800; text-decoration:none; letter-spacing:-.02em; }
.main-header .logo .logo-star { color:#004aad; }
.main-header .logo .logo-med  { color:#1a2433; }
.main-header .logo .logo-pro  { color:#6c757d; font-weight:600; font-size:1.5rem; }
.main-header nav a { color:#495057; font-size:1.05rem; font-weight:500; text-decoration:none; margin-left:2rem; transition:color .15s; }
.main-header nav a:hover { color:#004aad; }
.main-header nav a:last-child { background:#004aad; color:#fff; padding:.5rem 1.25rem; border-radius:8px; }
.main-header nav a:last-child:hover { background:#003a8c; color:#fff; }

/* Section commons */
.sm-section { padding:5rem 2rem; }
.sm-section--grey { background:#f4f7fb; }
.sm-section__head { text-align:center; margin-bottom:3rem; }
.sm-section__title { font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; color:#1a2433; margin-bottom:.6rem; }
.sm-section__sub { color:#6c757d; max-width:560px; margin:0 auto; font-size:1rem; line-height:1.6; }
.sm-inner { max-width:1160px; margin:0 auto; }

/* CTA buttons (used in hero + contact page) */
.sm-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.65rem; border-radius:10px; font-weight:700; font-size:.92rem; text-decoration:none; transition:all .2s; cursor:pointer; border:none; }
.sm-btn--primary { background:#004aad; color:#fff; }
.sm-btn--primary:hover { background:#003a8c; transform:translateY(-2px); }

/* Contact form */
.sm-contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:3rem; align-items:start; }
.sm-contact-info h2 { font-size:1.7rem; font-weight:800; color:#1a2433; margin-bottom:.75rem; }
.sm-contact-info p { color:#6c757d; line-height:1.65; margin-bottom:1.5rem; }
.sm-contact-details { list-style:none; padding:0; margin:0 0 1.75rem; }
.sm-contact-details li { display:flex; align-items:center; gap:.6rem; color:#495057; font-size:.95rem; margin-bottom:.6rem; }
.sm-contact-details li i { color:#004aad; width:16px; flex-shrink:0; }
.sm-contact-types { display:flex; flex-direction:column; gap:.5rem; }
.sm-contact-types span { display:flex; align-items:center; gap:.55rem; font-size:.9rem; font-weight:600; color:#004aad; }
.sm-contact-types span i { font-size:.85rem; }
.sm-contact-form-card { background:#fff; border-radius:18px; padding:2.25rem; border:1px solid #e3e8ef; }
.sm-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.sm-mb-3 { margin-bottom:1rem; }
.sm-mb-3 label { display:block; font-size:.88rem; font-weight:600; color:#495057; margin-bottom:.35rem; }
.sm-mb-3 input, .sm-mb-3 select, .sm-mb-3 textarea {
  width:100%; padding:.65rem .9rem; border:1px solid #dee2e6; border-radius:9px;
  font-size:.95rem; font-family:inherit; color:#1a2433;
  transition:border-color .15s, box-shadow .15s; background:#fff; box-sizing:border-box;
}
.sm-mb-3 input:focus, .sm-mb-3 select:focus, .sm-mb-3 textarea:focus {
  outline:none; border-color:#004aad; box-shadow:0 0 0 3px rgba(0,74,173,.12);
}
.sm-mb-3 textarea { resize:vertical; }
.sm-submit-btn {
  width:100%; padding:.8rem; background:#004aad; color:#fff; border:none; border-radius:10px;
  font-size:.95rem; font-weight:700; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:.5rem; transition:all .2s; margin-top:.5rem;
}
.sm-submit-btn:hover:not(:disabled) { background:#003a8c; transform:translateY(-1px); }
.sm-submit-btn:disabled { opacity:.65; cursor:not-allowed; }
.sm-form-error { margin-top:.75rem; padding:.7rem 1rem; background:#fff5f5; border:1px solid #fed7d7; border-radius:8px; color:#9b2c2c; font-size:.93rem; } /* #9b2c2c on #fff5f5 = 6.3:1, passes WCAG AA */
.sm-form-success { text-align:center; padding:2rem 1rem; }
.sm-form-success i { font-size:3rem; color:#38a169; margin-bottom:1rem; display:block; }
.sm-form-success h3 { font-weight:700; color:#1a2433; margin-bottom:.5rem; }
.sm-form-success p { color:#6c757d; font-size:.93rem; }

/* Footer */
.sm-footer { background:#1a2433; color:rgba(255,255,255,.7); padding:2.75rem 2rem; text-align:center; }
.sm-footer__brand { font-size:1.2rem; font-weight:800; color:#fff; margin-bottom:.4rem; }
.sm-footer__tagline { font-size:.93rem; margin-bottom:1.5rem; }
.sm-footer__links { display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.sm-footer__links a { color:rgba(255,255,255,.55); font-size:.93rem; text-decoration:none; }
.sm-footer__links a:hover { color:#fff; }
.sm-footer__copy { font-size:.88rem; color:rgba(255,255,255,.35); }

/* Contact page hero banner */
.sm-contact-hero {
  background: linear-gradient(135deg, var(--sm-primary) 0%, #0056b3 100%);
  color: #fff;
  padding: 4rem 2rem 4.5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.sm-contact-hero::after {
  content: ''; position:absolute; bottom:-2px; left:0; right:0;
  height:48px; background:#f4f7fb;
  clip-path: ellipse(55% 100% at 50% 100%);
}
.sm-contact-hero h1 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; margin:0 0 .75rem; color:#fff; }
.sm-contact-hero p { font-size:1.05rem; color:rgba(255,255,255,.82); max-width:520px; margin:0 auto; line-height:1.65; }

/* Responsive */
@media (max-width: 900px) {
  .sm-contact-grid { grid-template-columns:1fr; }
  .sm-contact-info { text-align:center; }
  .sm-contact-details { justify-content:center; }
  .sm-contact-types { align-items:center; }
}
@media (max-width: 640px) {
  .sm-form-row { grid-template-columns:1fr; }
  /* On mobile keep only the "Connexion" CTA visible in the header, styled as
     the blue button — a returning practitioner can log in in one tap without
     scrolling to the login card at the bottom of the landing page. */
  .main-header nav a { display:none; }
  .main-header nav a.nav-login-cta {
    display:inline-block; margin-left:0;
    background:#004aad; color:#fff; padding:.5rem 1.25rem; border-radius:8px;
  }
  .main-header nav a.nav-login-cta:hover { background:#003a8c; color:#fff; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile bottom navigation
   ═══════════════════════════════════════════════════════════════════════════ */

.sm-bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1049;
  background: #fff;
  border-top: 1px solid #d8e0ea;
  padding-bottom: env(safe-area-inset-bottom);
}
.sm-bottomnav__inner {
  display: flex;
  /* .sm-bottomnav is display:flex (see media query below), so this inner is a flex
     item: without flex:1 it shrinks to its content width and the buttons bunch up on
     one side, leaving an empty gap (visible e.g. on the secretary account, which has
     fewer buttons). flex:1 1 auto + min-width:0 makes it fill the bar so the buttons
     spread evenly, while still shrinking to the bar width and scrolling internally
     (overflow-x) when there are too many buttons to fit. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: .2rem .3rem;
}
.sm-bottomnav__inner::-webkit-scrollbar { display: none; }

.sm-bottomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
  min-width: 64px;
  padding: .45rem .55rem .35rem;
  color: #004aad;
  text-decoration: none;
  border-radius: 10px;
  margin: .15rem .1rem;
  transition: color .15s, background .15s;
  gap: .18rem;
}
.sm-bottomnav__item:hover { background: #eff6ff; text-decoration: none; }
.sm-bottomnav__item.sm-active {
  color: #004aad;
  background: #dbeafe;
  text-decoration: none;
  font-weight: 600;
}
.sm-bottomnav__item i { font-size: 1.2rem; line-height: 1; }
.sm-bottomnav__item span { font-size: .85rem; font-weight: 600; white-space: nowrap; line-height: 1; color: #374151; }
.sm-bottomnav__item.sm-active span { color: #004aad; }

/* Always-visible icon buttons in mobile top bar */
.sm-topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(255,255,255,.88);
  font-size: 1rem;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.25);
  transition: background .15s, color .15s;
  text-decoration: none;
  flex-shrink: 0;
}
.sm-topbar-icon-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.sm-mobile-avatar-dropdown .nav-link::after { display: none; }

/* On mobile: hide main nav from collapse (bottom nav handles it),
   hide duplicate utility pills from collapse (they're in the always-visible top bar) */
@media (max-width: 991.98px) {
  .navbar-nav.me-auto { display: none !important; }
  .navbar-nav.ms-md-auto .nav-link:not(.dropdown-toggle) { display: none !important; }
  /* Push page content above the bottom nav */
  body { padding-bottom: 70px !important; }
  /* Prevent any container from hiding the fixed bottom nav */
  .sm-bottomnav { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Comptabilité page
   ═══════════════════════════════════════════════════════════════════ */
.sm-compta-header {
  display: flex; align-items: center; padding: 1.25rem 0 .75rem; gap: 1rem;
}
.sm-compta-icon-wrap {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: #eff6ff; display: flex; align-items: center; justify-content: center;
}
.sm-compta-icon-wrap i { color: #004aad; font-size: 1.1rem; }
.sm-compta-title { font-size: 1.35rem; font-weight: 800; color: #1e293b; margin: 0; line-height: 1.2; }

#periodeForm {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 14px; padding: .875rem 1.25rem;
}
#periodeForm .input-group { flex: none; width: auto; }
#periodeForm .input-group > .form-select { flex: none; width: auto; min-width: 140px; }
#periodeForm .input-group > .form-control { flex: none; width: 8rem; }
#periodeForm .input-group-text { background: #fff; }

/* Filter chips */
.sm-compta-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .875rem; }
.sm-compta-chip {
  display: inline-flex; align-items: center;
  padding: .32rem .85rem; border-radius: 20px; font-size: .88rem; font-weight: 600;
  border: 1.5px solid #e2e8f0; background: #fff; color: #64748b;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.sm-compta-chip:hover { background: #eff6ff; border-color: #bfdbfe; color: #004aad; }
.sm-compta-chip.sm-compta-chip-active { background: #004aad; border-color: #004aad; color: #fff; }
.sm-compta-chip.sm-compta-chip-active:hover { background: #003a8c; border-color: #003a8c; }

/* Table wrap card */
.sm-compta-table-wrap { border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; margin-bottom: 0; }
.sm-compta-table-scroll { overflow-x: auto; }

/* Column separators (moved from inline style block) */
#recettes { border: none; }
#recettes thead:first-child th { background: #f8fafc; }
#recettes td:nth-child(6), #recettes th:nth-child(6) { border-left: 2px solid #e2e8f0; }
#recettes td:nth-child(7), #recettes th:nth-child(7) { border-left: 2px solid #e2e8f0; }
#recettes td:nth-child(11), #recettes th:nth-child(11) { border-left: 2px solid #e2e8f0; }
#recettes td:nth-child(13), #recettes th:nth-child(13) { border-left: 2px solid #e2e8f0; }
/* Totals rows */
#recettes thead:last-child tr:first-child th {
  background: #f1f5f9; border-top: 2px solid #e2e8f0; font-size: .88rem; color: #475569;
}
#recettes thead:last-child tr:last-child th {
  background: #eff6ff; color: #004aad; font-weight: 700; border-top: 1px solid #bfdbfe;
}

/* Bandeau de résumé — les trois chiffres de la page, avant tout tableau.
   Grille auto-fit : trois de front sur un écran large, empilées sur téléphone,
   sans media query. Bordure + fond, jamais d'ombre : la page défile. */
.sm-compta-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem; margin: 0 0 .25rem;
}
.sm-compta-stat {
  border: 1px solid #e2e8f0; border-radius: 14px; background: #fff;
  padding: .8rem 1rem; min-width: 0;
}
.sm-compta-stat-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #64748b; margin-bottom: .15rem;
}
.sm-compta-stat-value {
  font-size: 1.45rem; font-weight: 800; color: #1e293b; line-height: 1.15;
  overflow-wrap: anywhere;
}
/* #64748b et non #94a3b8 : ce dernier donne 2,56:1 sur blanc, sous le minimum
   de 4,5:1 — la ligne était à l'écran sans se lire. #64748b (4,76:1) est déjà
   le gris de .sm-compta-stat-label et d'une quinzaine d'autres règles du
   fichier : on reste dans la palette. */
.sm-compta-stat-sub {
  font-size: .78rem; color: #64748b; margin-top: .15rem; overflow-wrap: anywhere;
}
/* Détail du résultat net : une ligne par terme, libellé à gauche et montant à
   droite — l'idiome de la carte d'origine, à l'échelle de la tuile. */
.sm-compta-stat-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  font-size: .78rem; color: #64748b; margin-top: .2rem;
}
.sm-compta-stat-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Section heading (« Reste à encaisser ») — même idiome que .sm-compta-header,
   une taille en dessous : pastille bleutée, libellé slate, compteur discret.
   Bordure + fond plutôt qu'une ombre : la page défile (cf. règle de perf). */
.sm-compta-section {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  margin: 1.75rem 0 .75rem;
}
.sm-compta-section-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: #eff6ff; display: inline-flex; align-items: center; justify-content: center;
}
.sm-compta-section-icon i { color: #004aad; font-size: .85rem; }
.sm-compta-section-title {
  font-size: 1.05rem; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.2;
}
.sm-compta-section-count {
  padding: .1rem .6rem; border-radius: 20px;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  font-size: .78rem; font-weight: 600; color: #64748b; white-space: nowrap;
}

.sm-compta-footer { display: flex; justify-content: flex-end; padding: .75rem 0 0; }
.sm-compta-csv-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .9rem; border-radius: 8px; font-size: .88rem; font-weight: 600;
  border: 1.5px solid #e2e8f0; background: #fff; color: #64748b;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.sm-compta-csv-btn:hover { border-color: #004aad; color: #004aad; }

/* ═══════════════════════════════════════════════════════════════════
   Transmission detail page (.sm-tv-*)
   ═══════════════════════════════════════════════════════════════════ */
.sm-tv-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem;
}
.sm-tv-back-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .9rem; border-radius: 10px; font-size: .93rem; font-weight: 600;
  border: 1.5px solid #e2e8f0; background: #fff; color: #475569; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.sm-tv-back-btn:hover { border-color: #004aad; color: #004aad; }
.sm-tv-action-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .9rem; border-radius: 10px; font-size: .88rem; font-weight: 600;
  border: 1.5px solid; cursor: pointer; transition: all .15s;
}
.sm-tv-action-outline { border-color: #e2e8f0; background: #fff; color: #475569; }
.sm-tv-action-outline:hover { border-color: #004aad; color: #004aad; }
.sm-tv-action-success { border-color: #10b981; background: #ecfdf5; color: #059669; }
.sm-tv-action-success:hover { background: #d1fae5; }
/* Marquer traitée — prominent in both states */
.sm-tv-marquer {
  border-color: #059669; background: #059669; color: #fff;
  font-size: .93rem; padding: .5rem 1.1rem;
}
.sm-tv-marquer:hover { background: #047857; border-color: #047857; }
.sm-tv-marquer-done {
  background: #fff; color: #059669; border-color: #059669;
}
.sm-tv-marquer-done:hover { background: #ecfdf5; }
.sm-tv-action-danger { border-color: #fee2e2; background: #fff; color: #dc2626; }
.sm-tv-action-danger:hover { background: #fee2e2; }

.sm-tv-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.sm-tv-icon-wrap {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: #eff6ff; color: #004aad;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.sm-tv-icon-danger  { background: #fee2e2; color: #dc2626; }
.sm-tv-icon-warning { background: #fef3c7; color: #d97706; }
.sm-tv-title { font-size: 1.25rem; font-weight: 800; color: #1e293b; margin: 0 0 .3rem; line-height: 1.2; }
.sm-tv-meta { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .88rem; color: #64748b; }
.sm-tv-meta i { color: #94a3b8; margin-right: .25rem; }

.sm-tv-info-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.sm-tv-info-chip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: .42rem .9rem; font-size: .93rem; color: #475569;
}
.sm-tv-desti { display: inline-flex; align-items: center; gap: .2rem; }
.sm-tv-desti + .sm-tv-desti::before { content: '·'; color: #cbd5e1; margin: 0 .2rem; }


.sm-tv-message {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  border-left: 4px solid #004aad; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  font-size: .93rem; line-height: 1.7; color: #374151;
}

/* Replies */
.sm-tv-reply { display: flex; gap: .875rem; margin-bottom: 1rem; align-items: flex-start; }
.sm-tv-reply-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #004aad, #0056cc);
  color: #fff; font-size: .85rem; font-weight: 700; letter-spacing: -.3px;
  display: flex; align-items: center; justify-content: center;
}
.sm-tv-reply-body {
  flex: 1; min-width: 0; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: .875rem 1rem;
}
.sm-tv-reply-header {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap;
}
.sm-tv-reply-author { font-weight: 700; font-size: .93rem; color: #1e293b; }
.sm-tv-reply-date   { font-size: .85rem; color: #94a3b8; }
.sm-tv-reply-actions { margin-left: auto; display: flex; gap: .2rem; }
.sm-tv-reply-action-btn {
  background: none; border: none; padding: .2rem .4rem; border-radius: 6px;
  color: #94a3b8; cursor: pointer; font-size: .88rem; transition: all .15s;
}
.sm-tv-reply-action-btn:hover { background: #e2e8f0; color: #475569; }
.sm-tv-reply-action-danger:hover { background: #fee2e2 !important; color: #dc2626 !important; }
.sm-tv-reply-text { font-size: .93rem; line-height: 1.65; color: #374151; }

/* Reply form */
.sm-tv-reply-wrap { margin-top: 1.5rem; }
.sm-tv-reply-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: 10px; font-size: .93rem; font-weight: 600;
  border: 1.5px solid #004aad; background: #eff6ff; color: #004aad;
  cursor: pointer; transition: background .15s, color .15s; margin-bottom: .75rem;
}
.sm-tv-reply-toggle:hover { background: #004aad; color: #fff; }
.sm-tv-reply-form {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.25rem;
}
.sm-tv-reply-label { display: block; font-size: .88rem; font-weight: 600; color: #475569; margin-bottom: .4rem; }
.sm-tv-reply-textarea { border-radius: 10px; resize: vertical; }
.sm-tv-send-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.25rem; border-radius: 10px; font-size: .93rem; font-weight: 600;
  background: #004aad; border: none; color: #fff; cursor: pointer; transition: background .15s;
}
.sm-tv-send-btn:hover { background: #003a8c; }

/* ── Formulaire de consultation (nouvelleCs / form CS) ───────────────────── */
#nouvelleCs .p-4 {
  position: relative;
  border: 1px solid #dbeafe;
  border-radius: 14px !important;
  background: #f8fbff !important;
}
#nouvelleCs h3,
#nouvelleCs h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e3a5f;
  border-bottom: 2px solid #dbeafe;
  padding-bottom: .35rem;
  margin-bottom: .9rem;
}
#nouvelleCs label,
#nouvelleCs .form-label {
  font-size: .93rem;
  font-weight: 600;
  color: #374151;
}
#nouvelleCs .form-control,
#nouvelleCs .form-control-sm,
#nouvelleCs .form-select,
#nouvelleCs input[type="text"],
#nouvelleCs input[type="number"],
#nouvelleCs textarea {
  font-size: 1rem;
  border-radius: 8px;
}
#nouvelleCs .btn[type="submit"] {
  font-size: 1rem;
  padding: .45rem 1.4rem;
  border-radius: 8px;
}

/* close button row — sticky so the × stays visible while the form is scrolled */
#nouvelleCs .p-4 > .row:first-child {
  position: sticky;
  top: 60px;
  z-index: 10;
  margin-bottom: .25rem;
  text-align: right;
}

/* close button */
#cleanNewCS {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid #fca5a5;
  background: #fff5f5;
  color: #dc2626;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  opacity: 1;
}
#cleanNewCS:hover {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}

/* ── Keyboard accessibility: visible focus on custom components (E12) ────── */
/* Dental arcade SVG teeth */
#Spots polygon:focus-visible,
#Spots polygon:focus {
  outline: 3px solid #004aad;
  outline-offset: 2px;
}
/* Context menu entries */
.context-menu [role="menuitem"]:focus-visible,
.context-menu li:focus-visible,
.context-menu a:focus-visible {
  outline: 2px solid #004aad;
  outline-offset: -2px;
  background: #eff6ff;
}
/* Calendar events (FullCalendar anchors) */
#calendar .fc-event:focus-visible {
  outline: 2px solid #004aad;
  outline-offset: 1px;
}
/* Generic interactive customs: rows, chips, tabs, bottom nav */
.openPatient:focus-visible,
.extAsPatient:focus-visible,
.sm-compta-chip:focus-visible,
.sm-trans-tab:focus-visible,
.sm-bottomnav__item:focus-visible,
.list-group-item-action:focus-visible {
  outline: 2px solid #004aad;
  outline-offset: -2px;
}
/* Never suppress outlines globally; keep ring for buttons without box-shadow */
.btn:focus-visible {
  outline: 2px solid #004aad;
  outline-offset: 2px;
}

/* ── Utility classes replacing repeated inline styles (E14) ──────────────── */
.sm-pointer { cursor: pointer; }
.sm-indent  { padding-left: 20px; }

/* ── Alertes flottantes (alert_popup) ────────────────────────────────────────
   Toast affiché en haut de page par general.js. Profondeur obtenue par
   bordure + aplat plutôt que par ombre portée, conformément à la règle de
   performance : pas d'ombre sur des éléments qui se superposent au défilement.
   L'ancien markup utilisait des classes Bootstrap 4 (.close, .pl-*) qui
   n'existent plus en Bootstrap 5 : la croix de fermeture n'était pas stylée. */
#alert_section {
  max-width: min(34rem, calc(100vw - 1.5rem));
  padding: 0 .75rem;
}
.sm-alert {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-top: .75rem;
  padding: .7rem .85rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--sm-radius);
  background: #fff;
  color: #1f2933;
  font-size: .9rem;
  line-height: 1.35;
  /* Entrée discrète : opacité + léger glissement, sans reflow. */
  transform: translateY(-.4rem);
  transition: opacity .18s ease, transform .18s ease;
}
.sm-alert.show { transform: translateY(0); }

.sm-alert__icon  { flex: 0 0 auto; margin-top: .1rem; font-size: 1rem; }
.sm-alert__body  { flex: 1 1 auto; min-width: 0; }
.sm-alert__title { display: block; font-size: .78rem; font-weight: 700;
                   text-transform: uppercase; letter-spacing: .03em; }
.sm-alert__msg   { overflow-wrap: anywhere; }
.sm-alert__list  { margin: .15rem 0 0; padding-left: 1.1rem; }
.sm-alert__close { flex: 0 0 auto; margin-top: .05rem; padding: .35rem;
                   font-size: .65rem; opacity: .45; }
.sm-alert__close:hover { opacity: .9; }

/* Palette par sévérité : fond très clair, bordure et titre saturés. */
.sm-alert--danger  { border-color: #f0c2c2; border-left-color: #c0392b; background: #fdf4f3; }
.sm-alert--danger  .sm-alert__icon,
.sm-alert--danger  .sm-alert__title { color: #c0392b; }

.sm-alert--warning { border-color: #f2ddb0; border-left-color: #b7791f; background: #fdf9f0; }
.sm-alert--warning .sm-alert__icon,
.sm-alert--warning .sm-alert__title { color: #8a5d12; }

.sm-alert--success { border-color: #bfe3cd; border-left-color: #1e8449; background: #f3faf6; }
.sm-alert--success .sm-alert__icon,
.sm-alert--success .sm-alert__title { color: #1e8449; }

.sm-alert--info    { border-color: #c3d7f2; border-left-color: var(--sm-primary); background: var(--sm-primary-light); }
.sm-alert--info    .sm-alert__icon,
.sm-alert--info    .sm-alert__title { color: var(--sm-primary); }

/* Mobile : pleine largeur utile, texte légèrement plus compact. */
/* Bootstrap 5 ne fournit PAS cette utilitaire, que le gabarit de l'en-tête du
   dossier emploie pourtant (`flex-grow-1 min-w-0`). Sans elle, l'élément flex
   garde son `min-width: auto` et refuse de se réduire sous la largeur de son
   contenu : l'en-tête s'élargissait pour loger un badge d'adresse un peu long,
   et toute la page partait en défilement horizontal. Une classe qui a l'air de
   faire quelque chose et ne fait rien coûte plus cher qu'une classe absente. */
.min-w-0 { min-width: 0; }

/* Sur un téléphone, l'adresse tient rarement sur une ligne : insécable, ce
   badge-là imposait sa largeur et poussait TOUTE la page en défilement
   horizontal. Les badges courts — « 6 ans », « Femme » — n'ont de toute façon
   pas où se couper. */
@media (max-width: 575.98px) {
  .patient-chip { white-space: normal; }
}

@media (max-width: 767.98px) {
  #alert_section { max-width: 100%; padding: 0 .5rem; }
  .sm-alert { font-size: .85rem; padding: .6rem .7rem; margin-top: .5rem; }
}

/* Respect des préférences système de réduction d'animation. */
@media (prefers-reduced-motion: reduce) {
  .sm-alert { transition: none; transform: none; }
}

/* ── Facturation CNAM dentaire (Nouveau règlement) ───────────────────────────
   Colonnes héritées de la facturation française (code d'association,
   modificateurs CCAM, dépassement, qualificatif) : masquées, mais laissées
   dans le DOM car les fonctions de calcul de reglement.js les lisent. */
.cnam-facturation .cnam-hide { display: none !important; }

.cnam-actes th {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.cnam-actes .cnam-unit { font-weight: 400; text-transform: none; opacity: .65; }

/* Une seule taille de texte dans la ligne d'acte, et la taille de LECTURE.
   Elle en portait quatre. Les champs « Honoraires » et « Qté » vivent dans un
   `.input-group-sm`, où Bootstrap impose .875rem ; le champ « Dent », posé seul,
   ne recevait que l'override global (`.form-control-sm { font-size: 1rem }`) —
   trois champs côte à côte, deux tailles. Le code de l'acte, sa désignation et
   le total en ajoutaient deux autres.
   Tout est ramené à 1rem, la taille du reste du formulaire : aligner par le bas
   sur le .875rem des champs rendait le tableau uniforme mais trop petit, et
   c'est un tableau qu'on lit à distance de bras, penché au fauteuil.
   La hiérarchie passe par la graisse et la couleur, pas par la taille. Seule la
   cotation reste en dessous : c'est une légende sous la désignation, pas une
   valeur de la ligne. */
.cnam-actes td { vertical-align: middle; font-size: 1rem; }
.cnam-actes .cnam-dent input,
.cnam-actes .baseActeValue,
.cnam-actes .quantiteActe,
.cnam-actes .totalLigne { font-size: 1rem; }

/* Le champ de recherche et « Acte libre » sont deux entrées vers la même
   facture : ils partagent donc une ligne. Le bouton vivait dans une colonne à
   part, aligné sur le bas de la RANGÉE — c'est-à-dire sur la fin du texte
   d'aide, deux lignes sous le champ auquel il répond.
   Le `flex-basis` du champ, et non un `min-width`, décide du passage à la
   ligne : sous ~15rem utiles le bouton descend, mais le champ reste libre de
   se comprimer plutôt que de déborder sur les très petits écrans. */
.cnam-recherche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.cnam-recherche .form-control { flex: 1 1 15rem; min-width: 0; }
.cnam-recherche .btn          { flex: 0 0 auto; white-space: nowrap; }

.cnam-actes .cnam-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                         color: var(--sm-primary); white-space: nowrap; }
.cnam-actes .cnam-code .acteEditable { display: inline; }
/* Une ligne LIBRE porte un nom, pas un code : ni chasse fixe ni `nowrap`, qui
   feraient déborder « Radiographie panoramique » hors de la colonne. Le pointillé
   dit que la cellule se saisit — elle est la seule de la colonne à l'être. */
.cnam-actes .cnam-libre { color: #374151; }
.cnam-actes .cnam-libre .acteEditable {
  display: inline-block;
  min-width: 6rem;
  border-bottom: 1px dashed #b3b9c2;
  cursor: text;
}
.cnam-actes .cnam-libre .acteEditable:focus { outline: none; border-bottom-color: var(--sm-primary); }
/* Hors nomenclature : dit d'un coup d'œil pourquoi cette ligne ne figurera pas
   sur le bulletin de remboursement. */
.cnam-actes .cnam-ligne-libre .cnam-label {
  font-size: .82rem; font-style: italic; color: #6b7280;
}
.cnam-actes .cnam-designation { line-height: 1.3; }
.cnam-actes .cnam-label    { display: block; }
.cnam-actes .cnam-cotation { display: block; font-size: .82rem; color: #6b7280; }
/* La colonne « Dent » porte souvent PLUSIEURS numéros : un même acte se fait sur
   plusieurs dents dans la séance, et les trois numéros tiennent sur une ligne.
   Assez large pour quatre (« 16, 17, 26, 27 »), sinon le praticien ne voit plus
   ce qu'il facture — le champ défile sous le curseur et la dernière dent sort du
   cadre. */
.cnam-actes .cnam-dent input { padding-left: .3rem; padding-right: .3rem; min-width: 8.5rem; }
/* Le repère de saisie doit se lire comme un exemple, jamais comme une valeur.
   Centré, à la taille de la ligne et dans le gris par défaut de Bootstrap, il
   ressemblait trait pour trait à une dent facturée : les lignes d'actes sans
   dent paraissaient en porter une. */
.cnam-actes .cnam-dent input::placeholder {
  color: #b3b9c2; font-style: italic; opacity: 1;
}

/* La devise est déjà dans l'en-tête de colonne : on retire les pastilles "DT"
   répétées à chaque ligne, qui alourdissaient la lecture des montants. */
.cnam-actes td .input-group-append,
.cnam-actes td .input-group-text { display: none; }
.cnam-actes td .input-group > .form-control { border-radius: var(--sm-radius-sm); }
.cnam-actes .baseActeValue { text-align: right; }
.cnam-actes .totalLigne { font-weight: 600; }

/* ── Bandeau « Reste dû » ─────────────────────────────────────────────────── */
.cnam-reste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem;
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--sm-primary);
  border-radius: var(--sm-radius);
  background: #fbfcfd;
}
.cnam-reste__lignes { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.cnam-reste__k { display: block; font-size: .72rem; text-transform: uppercase;
                 letter-spacing: .04em; color: #6b7280; }
.cnam-reste__v { font-size: 1rem; font-weight: 600; color: #1f2933; }
.cnam-reste__total { display: flex; align-items: baseline; gap: .4rem; }
.cnam-reste__total .cnam-reste__k { align-self: center; }
.cnam-reste__montant { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.cnam-reste__dt { font-size: .85rem; color: #6b7280; }

.cnam-reste--du      { border-left-color: #c0392b; }
.cnam-reste--du      .cnam-reste__montant { color: #c0392b; }
.cnam-reste--solde   { border-left-color: #1e8449; }
.cnam-reste--solde   .cnam-reste__montant { color: #1e8449; }
.cnam-reste--trop    { border-left-color: #b7791f; }
.cnam-reste--trop    .cnam-reste__montant { color: #8a5d12; }

/* ── Mobile : une carte par acte plutôt qu'un tableau qui déborde ─────────── */
@media (max-width: 767.98px) {
  .cnam-actes, .cnam-actes tbody, .cnam-actes tr, .cnam-actes td { display: block; width: 100%; }
  .cnam-actes thead { display: none; }
  .cnam-actes tr {
    margin: .5rem .5rem .75rem;
    padding: .6rem .7rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--sm-radius);
    background: #fff;
  }
  .cnam-actes td { border: 0 !important; padding: .15rem 0 !important; }

  /* Étiquette de champ devant chaque valeur, sinon la carte est illisible. */
  .cnam-actes .cnam-dent::before,
  .cnam-actes td:has(.baseActeValue)::before,
  .cnam-actes td:has(.quantiteActe)::before,
  .cnam-actes td:has(.totalLigne)::before {
    display: inline-block; min-width: 6.5rem;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280;
  }
  .cnam-actes .cnam-dent::before              { content: "Dent"; }
  .cnam-actes td:has(.baseActeValue)::before  { content: "Honoraires"; }
  .cnam-actes td:has(.quantiteActe)::before   { content: "Quantité"; }
  .cnam-actes td:has(.totalLigne)::before     { content: "Total"; }

  .cnam-actes .cnam-dent,
  .cnam-actes td:has(.baseActeValue),
  .cnam-actes td:has(.quantiteActe),
  .cnam-actes td:has(.totalLigne) { display: flex; align-items: center; gap: .5rem; }
  .cnam-actes .cnam-dent input { max-width: 9.5rem; }
  .cnam-actes td:has(.baseActeValue) .input-group { max-width: 9rem; }
  .cnam-actes .removeActe { text-align: right; }

  .cnam-reste { flex-direction: column; align-items: stretch; }
  .cnam-reste__total { justify-content: space-between; }
}

/* ── Règlement : la croix qui referme le formulaire ────────────────────────
   Fermer un règlement en cours abandonne la saisie : la croix mérite la même
   couleur que les autres gestes destructeurs de ce formulaire (#dc3545, celui
   des corbeilles ci-dessous), plutôt que le noir à 50 % d'opacité de Bootstrap
   qui la faisait passer pour un ornement.

   Bootstrap 5.3 dessine cette croix par une image de fond SVG dont la couleur
   est FIGÉE dans l'URL : ni `color` ni `fill` ne l'atteignent. On redéfinit donc
   la variable --bs-btn-close-bg avec le même tracé, teinté — et l'opacité passe
   à 1, sans quoi le rouge serait délavé de moitié.

   Le sélecteur porte sur l'id, présent à l'identique dans le gabarit de base et
   dans la surcharge medge : les deux modules suivent sans duplication. */
#cleanNewReglement.btn-close {
  /* La croix precede le titre dans le gabarit, donc elle se posait en haut A
     GAUCHE, au-dessus de « Nouveau reglement ». Un flottant a droite la remet
     ou on la cherche sans toucher aux deux gabarits concernes ; le titre, qui
     suit, remonte a cote d'elle. */
  float: right;
  margin-left: .75rem;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);
}
#cleanNewReglement.btn-close:hover,
#cleanNewReglement.btn-close:focus {
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b02a37'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* ── Règlement : le bouton qui supprime une ligne ──────────────────────────
   Il efface une ligne de facturation ou un encaissement : il l'annonce par sa
   couleur autant que par son icône. En gris `btn-light`, il se lisait comme une
   commande neutre parmi les autres. Même rouge que la corbeille du Bulletin
   CNAM, pour que le même geste ait la même couleur d'un écran à l'autre. */
#newReglement .removeActe .btn,
#newReglement .removeRegle .btn {
  color: #dc3545;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
#newReglement .removeActe .btn:hover,
#newReglement .removeActe .btn:focus,
#newReglement .removeRegle .btn:hover,
#newReglement .removeRegle .btn:focus {
  color: #a71d2a;
  background: #f8d7da;
  border-color: transparent;
}

/* ── Règlement CNAM : détails du chèque, à la demande ──────────────────────
   La ligne n'existe que dans le formulaire `dentisteReglementCnam` (classe
   posée par la migration 0017), aucun autre formulaire n'est concerné.
   Masquée en CSS plutôt qu'en JS : la ligne ne doit jamais apparaître le
   temps que le script s'exécute. `--on` est ajoutée dès qu'un montant en
   chèque est saisi — ou, en édition, si les champs portent déjà une valeur. */
.cnam-cheque { display: none; }
.cnam-cheque.cnam-cheque--on { display: flex; }

.cnam-cheque__titre {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  margin-bottom: .35rem;
  padding-top: .6rem;
  border-top: 1px solid #e5e7eb;
}

/* Action principale : taille normale. Le contrôleur commun impose
   `btn-lg btn-block` à tous les modules ; le JS retire ces classes, cette
   règle fige le résultat pour qu'aucun sursaut ne soit visible. */
.cnam-submit {
  width: auto;
  padding: .45rem 1.15rem;
  font-size: .95rem;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  /* Pleine largeur au doigt, mais sans revenir à la hauteur d'origine. */
  .cnam-submit { width: 100%; }
  .cnam-cheque__titre { padding-top: .4rem; }
}

/* ── Règlement CNAM : tableau « Paiements encaissés » ──────────────────────
   Colonne « Tiers » masquée. C'est le tiers payant français (part réglée par
   l'assurance maladie), calculé par calcResteDu() à partir de la « situation
   du patient » — un champ qui n'existe pas dans le formulaire CNAM. La
   colonne était donc toujours vide, et son champ désactivé : elle n'affichait
   rien tout en poussant le tableau hors de l'écran sur mobile.
   Masquée par POSITION, en-tête et corps ensemble : reglement.js émet toujours
   la cellule, retirer le seul <th> décalerait toutes les colonnes. */
/* ── Le calendrier de la maison (TempusDominus v6) ──────────────────────────
   Le composant expose son thème en variables : on repeint, on ne surcharge pas
   ses sélecteurs. Il arrivait en bleu Bootstrap (#0d6efd), à côté du bleu
   StarMed de toute l'application — le seul endroit où la marque changeait.
   Ces variables valent pour TOUS les champs date : agenda, dépenses,
   formulaires, encaissements. C'est le but : un seul calendrier, partout. */
/* Les variables sont posées sur le WIDGET, pas sur `:root` : page.html.twig
   charge tempus-dominus.min.css APRÈS cette feuille, et son propre `:root`
   l'emporterait à spécificité égale. Les portées ici, c'est aussi ne rien
   redéfinir globalement pour un composant. Même raison au `body` devant le
   sélecteur : la règle du fournisseur, plus tardive, gagnerait sinon. */
body .tempus-dominus-widget {
  --td-active-bg:           var(--sm-primary);
  --td-active-border-color: var(--sm-primary);
  --td-range-bg:            var(--sm-primary-dark);
  --td-btn-hover-bg:        #eef4ff;
  --td-dow-color:           #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: var(--sm-radius);
}
/* Le jour d'aujourd'hui quand il n'est PAS celui qui est choisi : un cerne,
   sans quoi il se confond avec la sélection. */
body .tempus-dominus-widget .date-container-days .day.today:not(.active) {
  box-shadow: inset 0 0 0 1px var(--sm-primary);
  color: var(--sm-primary);
}

/* ── « Paiements encaissés » ────────────────────────────────────────────────
   Les champs de ce tableau sortaient en `input-group-sm` : 0,875rem, plus
   petits que ceux du tableau des actes juste au-dessus alors qu'ils portent
   des montants qui pèsent autant, et plus petits que le texte de la page.
   Même taille des deux côtés — c'est de l'argent qu'on relit.
   La cellule de date passe par la même règle : c'est désormais un champ, il
   doit peser comme ses voisins. */
#histPaiementFacture td { vertical-align: middle; }
#histPaiementFacture .form-control,
#histPaiementFacture .input-group-text,
#histPaiementFacture .total,
#histPaiementFacture .totalLigne { font-size: 1rem; }
/* Plancher de largeur, mais jamais plus que la place disponible : sur la carte
   mobile, le libellé « DATE » mange déjà 8rem, et un plancher fixe faisait
   déborder le champ hors de sa cellule sous 360px. */
/* Plancher de largeur : « jj/mm/aaaa » plus le bouton calendrier. Sans lui,
   la colonne Date se fait écraser à 67px par le tableau autour de 768px et
   la date devient illisible. Il est levé sur la carte mobile, où la cellule
   fait toute la largeur (voir le bloc @media plus bas). */
#histPaiementFacture .paymentDateGroup { min-width: 10rem; }
/* Le bouton calendrier se donne pour cliquable : c'est lui qui ouvre le
   sélecteur, et il portait le gris passif d'un simple libellé d'unité. */
#histPaiementFacture .paymentDateGroup .input-group-text {
  cursor: pointer;
  color: var(--sm-primary);
  background: #eef4ff;
  border-color: #ced4da;
}
#histPaiementFacture .paymentDateGroup:hover .input-group-text { background: #dbe7ff; }
#histPaiementFacture .paymentDate { cursor: pointer; background: #fff; }

.cnam-paiements thead th:nth-child(5),
.cnam-paiements tbody td:nth-child(5) { display: none; }

@media (max-width: 767.98px) {
  /* Même parti pris que le tableau des actes : une carte par encaissement
     plutôt qu'un tableau qui déborde. */
  .cnam-paiements table,
  .cnam-paiements tbody,
  .cnam-paiements tr,
  .cnam-paiements td { display: block; width: 100%; }
  .cnam-paiements thead { display: none; }

  .cnam-paiements tr {
    margin: .5rem .5rem .75rem;
    padding: .6rem .7rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--sm-radius);
    background: #fff;
  }
  .cnam-paiements td { padding: .2rem 0; border: 0; }

  /* Libellé devant chaque champ, l'en-tête n'étant plus là pour le porter.
     La date en fait partie depuis qu'elle est un champ et non plus le simple
     texte qui tenait lieu de titre à la carte. */
  .cnam-paiements td:nth-child(1)::before { content: "Date"; }
  .cnam-paiements td:nth-child(2)::before { content: "Carte bancaire"; }
  .cnam-paiements td:nth-child(3)::before { content: "Chèque"; }
  .cnam-paiements td:nth-child(4)::before { content: "Espèces"; }
  .cnam-paiements td:nth-child(6)::before { content: "Total"; }
  .cnam-paiements td:nth-child(1)::before,
  .cnam-paiements td:nth-child(2)::before,
  .cnam-paiements td:nth-child(3)::before,
  .cnam-paiements td:nth-child(4)::before,
  .cnam-paiements td:nth-child(6)::before {
    display: inline-block;
    min-width: 8rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
  }
  .cnam-paiements td:nth-child(1),
  .cnam-paiements td:nth-child(2),
  .cnam-paiements td:nth-child(3),
  .cnam-paiements td:nth-child(4),
  .cnam-paiements td:nth-child(6) { display: flex; align-items: center; gap: .5rem; }
  /* Le libellé prend déjà 8rem ; sous ~360px il ne reste pas la largeur d'un
     champ date. Il passe alors SOUS son libellé plutôt que de déborder de
     la carte — le plancher de largeur reste tenu dans les deux cas. */
  .cnam-paiements td:nth-child(1) { flex-wrap: wrap; }
  /* Le plancher de 10rem est levé ici : la cellule prend toute la largeur de
     la carte, et un plancher fixe la ferait déborder sous 360px. */
  #histPaiementFacture .paymentDateGroup { min-width: 0; }
  .cnam-paiements td:nth-child(1) .paymentDateGroup { flex: 1 1 auto; width: auto; }
  .cnam-paiements td:nth-child(2) .input-group,
  .cnam-paiements td:nth-child(3) .input-group,
  .cnam-paiements td:nth-child(4) .input-group { max-width: 9rem; }

  .cnam-paiements td:first-child { font-weight: 600; margin-bottom: .35rem; }
  .cnam-paiements .removeRegle { text-align: right; }
}