/* CABIGEST — design system partagé */

:root {
  --ink-900: #101828;
  --ink-700: #344054;
  --ink-500: #667085;
  --ink-300: #98a2b3;
  --line: #e4e7ec;
  --line-soft: #eef1f5;
  --surface: #ffffff;
  --canvas: #f7f8fa;

  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #4f46e5;
  --brand-600: #4338ca;
  --brand-700: #3730a3;

  --teal-50:  #ecfdf5;
  --teal-500: #10b981;
  --teal-600: #059669;

  --amber-50:  #fffbeb;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  --rose-50:  #fef2f2;
  --rose-500: #ef4444;
  --rose-600: #dc2626;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Garantit que [hidden] masque toujours l'élément, même si une règle (ou un style inline)
   lui donne par ailleurs "display: flex/grid/block" pour son état visible — sans ce
   !important, un sélecteur plus spécifique que l'attribut (ID, style inline) l'emporte et
   l'élément reste affiché malgré l'attribut "hidden" posé par le JS. Bug réel trouvé sur
   "#pageWrap"/"#consultWrap" (constantes/bio/rx/documents/numerisation/ordonnances/
   vaccinations/consultations) : la fiche restait visible et modifiable (champs mémo compris)
   même quand le message "Aucun patient sélectionné" s'affichait. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--canvas);
  color: var(--ink-900);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- Nav shell ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-nav {
  width: 220px;
  flex: none;
  background: linear-gradient(180deg, var(--brand-700), var(--brand-600));
  color: #fff;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.app-nav .brand {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  padding: 0 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-nav .brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.25);
}

.app-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  transition: background 0.15s ease, color 0.15s ease;
  flex: none;
}

.nav-divider {
  height: 2px; margin: 3px -14px; flex: none;
  background: rgba(255,255,255,0.22);
}

/* Pas de barre de défilement verticale dans le menu (demandé explicitement : elle apparaissait
   quand la fenêtre est peu haute, portable / mode application). D'abord on resserre les
   espaces entre les entrées selon la hauteur disponible ; en dernier recours le menu reste
   défilable à la molette mais la barre est masquée. */
.app-nav { scrollbar-width: none; }
.app-nav::-webkit-scrollbar { width: 0; height: 0; }
@media (max-height: 860px) {
  .app-nav { padding-top: 8px; padding-bottom: 8px; gap: 1px; }
  .app-nav a { padding: 5px 12px; }
  .nav-divider { margin: 2px -14px; }
  .nav-top-logo img { max-width: 84px; }
  .nav-user-name-top { padding-top: 6px; }
}
@media (max-height: 740px) {
  .app-nav a { padding: 3px 12px; font-size: 13px; }
  .nav-divider { margin: 1px -14px; }
  .nav-top-logo img { max-width: 64px; }
  .nav-version { padding-top: 6px; font-size: 11px; }
}

.app-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.app-nav a.active { background: rgba(255,255,255,0.16); color: #fff; }
.app-nav a .ic { font-size: 19px; width: 22px; text-align: center; }
.app-nav a .ic svg { width: 18px; height: 18px; vertical-align: middle; }
/* Icône image (SVG servi en fichier, ex. assets/icon-scanner.svg) : même gabarit que les émojis. */
.app-nav a .ic img { width: 19px; height: 19px; vertical-align: -4px; }
/* Seringue penchée, aiguille pointant vers le bas (demandé explicitement — "garde la inclinée
   mais seringue incliné vers le bas") : aucun émoji Unicode dédié pour une orientation
   différente, rotation CSS du glyphe 💉 (par défaut dessiné aiguille en haut à gauche, piston en
   bas à droite) — angle choisi pour rester penché (pas vertical pur) tout en pointant vers le
   bas plutôt que vers le haut. */
.ic-rotate-down { display: inline-block; transform: rotate(165deg); }
/* Stéthoscope 🩺 recoloré du bleu d'origine vers rouge/corail (demandé explicitement — "stetho
   mai pas bleu") : aucune variante de couleur native pour cet émoji en Unicode, filtre CSS
   hue-rotate (+ saturate pour compenser le ternissement que hue-rotate cause souvent). */
.ic-recolor-coral { display: inline-block; filter: hue-rotate(160deg) saturate(1.6); }

/* Nouveau logo : fond dégradé bleu foncé déjà intégré à l'image, trop proche du violet
   de la nav pour se détacher tout seul ("bleu sur bleu"). Au lieu de retoucher les
   couleurs de marque du logo ou le thème violet de toute l'appli, un liseré clair
   (anneau) autour de la carte suffit à créer une séparation nette. (Un essai de fondu/
   vignette sans cadre a été fait puis annulé — "remets ça" — retour à ce style d'origine.) */
.nav-top-logo { padding: 2px 6px 6px; text-align: center; flex: none; }
.nav-top-logo .card {
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  border: 2px solid rgba(255,255,255,0.45);
}
.nav-top-logo img { width: 100%; max-width: 110px; display: block; margin: 0 auto; }

/* Praticien connecté + déconnexion (réplique lbCurrentUser/BtnDeconnect côté Delphi) : la
   déconnexion est un lien de nav comme les autres (icône + libellé), pas un bouton à part,
   pour rester cohérente visuellement avec le reste de la barre latérale. */
.nav-user-name {
  font-size: 12px; font-weight: 650; color: rgba(255,255,255,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 6px 12px 0;
}
.nav-user-name-top { text-align: center; padding: 10px 8px 0; }

/* Critère HAS LAPv A8 : immatriculation de version affichable depuis le LAP. Mise en évidence
   demandée explicitement ("mettre en évidence... gras") : plus discrète à l'origine, elle
   passait inaperçue au pied d'une longue barre de nav. */
.nav-version {
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.85);
  text-align: center; padding: 10px 8px 4px; margin-top: auto; flex: none;
}

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

.app-topbar {
  padding: 16px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-topbar h1 { font-size: 18px; margin: 0; font-weight: 650; color: var(--ink-900); }

/* Bande "patient" centrée DANS la barre de titre plutôt qu'une bande séparée en dessous
   (demandé explicitement — "supprimer la bande ou il y a le nom du patient... deplace le nom
   vers la bande de tout en haut en centrant le nom") : Constantes, Bio/Rx, Ordonnance,
   Documents, Numérisation, Vaccinations, Consultations. Modificateur (.app-topbar-patient),
   pas .app-topbar directement : les pages sans contexte patient (Patients, Statistiques,
   Comptabilité...) gardent le flex/space-between à 2 enfants d'origine, inchangé.
   grid-column EXPLICITE (pas l'ordre naturel des 3 zones) sur chacune des 3 zones : quand
   .patient-header est "hidden" (aucun patient sélectionné), la grille garde son 1fr/auto/1fr
   (titre à gauche, actions à droite) au lieu d'un repli à 2 colonnes qui aurait recollé les
   actions au centre. */
.app-topbar-patient { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.app-topbar-patient .topbar-title { grid-column: 1; min-width: 0; }
.app-topbar-patient .patient-header { grid-column: 2; margin: 0; background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; }
.app-topbar-patient .topbar-actions { grid-column: 3; justify-self: end; display: flex; gap: 8px; }
.app-topbar .sub { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }

.app-content { flex: 1; padding: 24px 28px; min-height: 0; }

/* ---------- Primitives ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

input, select, textarea {
  font: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: 100%;
  background: #fff;
  color: var(--ink-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
input:disabled, select:disabled { background: var(--line-soft); color: var(--ink-500); }
textarea { resize: vertical; min-height: 64px; }

label.field-label {
  display: block;
  font-size: 12px;
  font-weight: 750;
  color: var(--ink-700);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--brand-500);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
button:hover { background: var(--brand-600); }
button:active { transform: translateY(1px); }
button.secondary { background: var(--line-soft); color: var(--ink-700); }
button.secondary:hover { background: var(--line); }
button.ghost { background: transparent; color: var(--brand-600); padding: 8px 10px; }
button.ghost:hover { background: var(--brand-50); }
button.danger { background: var(--rose-50); color: var(--rose-600); }
button.danger:hover { background: #fee2e2; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
}

.toast {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 0;
}
.toast.ok { color: var(--teal-600); }
.toast.err { color: var(--rose-600); }

/* ---------- Segmented toggle (PEC, filtres...) ---------- */

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.segmented button { border-radius: 0; background: #fff; color: var(--ink-700); box-shadow: none; padding: 8px 18px; }
.segmented button:hover { background: var(--canvas); }
.segmented button.active { background: var(--brand-500); color: #fff; }
.segmented button.active:hover { background: var(--brand-600); }

/* ---------- Chip radio: <label class="chip"><input type=radio>Texte</label> ---------- */

label.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-700); cursor: pointer;
  background: #fff; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
label.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
label.chip:hover { border-color: var(--brand-500); }
label.chip:has(input:checked) { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-700); }

/* ---------- Card section (remplace fieldset/legend) ---------- */

.card-section { border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 16px; overflow: hidden; background: #fff; }
.card-section-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 18px;
  background: linear-gradient(90deg, var(--brand-50), #fff); border-left: 4px solid var(--brand-500); border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 800; color: var(--brand-700);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.card-section-head .ic { font-size: 13px; }
.card-section-body { padding: 18px; }

/* ---------- Avatar ---------- */

.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #fff;
}
.avatar.sm { width: 30px; height: 30px; font-size: 11.5px; }

/* ---------- Autocomplétion (ville, médecin traitant, patient...) ---------- */

.autocomplete { position: relative; }
.autocomplete-list {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); max-height: 220px; overflow-y: auto; z-index: 30;
}
.autocomplete-list div { padding: 7px 10px; font-size: 13px; cursor: pointer; }
.autocomplete-list div:hover { background: var(--brand-50); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* ---------- Éditeur de texte enrichi (Documents / Ordonnances) — public/js/richtext.js ---------- */

/* flex:1/min-height:0 (demandé explicitement — "verifie si ca depasse hauteur" sur le mémo
   Ordonnance/Document) : .rte-wrap n'était qu'un bloc normal dans son parent flex-colonne
   (.ordo-editor/.doc-editor, déjà correctement flex:1/min-height:0), donc sans hauteur bornée
   propre — un texte long agrandissait toute la carte au lieu de faire défiler .rte-editor
   (qui a pourtant dejà overflow-y:auto, mais ça ne sert à rien sans hauteur bornée). */
.rte-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rte-toolbar {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap; flex: none;
  padding: 5px 6px; background: var(--line-soft); border-bottom: 1px solid var(--line);
}
.rte-btn {
  width: 28px; height: 26px; padding: 0; font-size: 12.5px; font-weight: 600;
  background: #fff; color: var(--ink-700); border: 1px solid transparent; border-radius: 5px;
}
.rte-btn:hover { background: var(--brand-50); }
.rte-btn.active { background: var(--brand-100); border-color: var(--brand-500); color: var(--brand-700); }
.rte-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 3px; }
.rte-toolbar select.rte-font { max-width: 130px; }
.rte-toolbar select.rte-size { max-width: 78px; }
.rte-toolbar select { height: 26px; font-size: 12px; padding: 0 4px; }
.rte-toolbar input[type=color] { width: 28px; height: 26px; padding: 1px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.rte-editor {
  flex: 1; min-height: 160px; padding: 10px 12px; font-size: 13px; line-height: 1.6;
  outline: none; overflow-y: auto;
}
.rte-editor:empty::before { content: attr(data-placeholder); color: var(--ink-300); }

/* ---------------- Changer de patient depuis n'importe quelle page clinique (demandé
   explicitement — "changer de patient sans revenir à la queue") : un petit ▾ injecté à côté du
   nom dans .patient-header (cf. public/js/patient-switcher.js, chargé sur chaque page clinique)
   ouvre la liste des patients actuellement en salle d'attente (même source que index.php) ;
   cliquer en choisit un autre et recharge la MÊME page pour lui. Styles centralisés ici (plutôt
   que dupliqués par page comme .patient-header lui-même) car injectés par un seul script
   partagé, pas par du HTML par page. ---------------- */
.patient-switch-wrap { position: relative; display: inline-block; margin-left: 4px; }
.patient-switch-btn {
  background: none; border: none; box-shadow: none; padding: 2px 5px; margin: 0;
  color: var(--brand-600); font-size: 11px; cursor: pointer; border-radius: var(--radius-sm);
}
.patient-switch-btn:hover { background: var(--brand-50); }
.patient-switch-panel {
  position: absolute; top: 100%; left: 0; z-index: 60; width: 300px; max-height: 340px;
  overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 6px; margin-top: 4px;
}
.patient-switch-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 12.5px; color: var(--ink-900);
}
.patient-switch-row:hover { background: var(--brand-50); }
.patient-switch-row.current { background: var(--brand-100); font-weight: 650; }
.patient-switch-row .psw-wait { margin-left: auto; flex: none; font-size: 10.5px; color: var(--ink-500); }
.patient-switch-empty { padding: 12px; text-align: center; color: var(--ink-500); font-size: 12px; }