/* Partogramme - styles de base */

/* Zéro persistance : un « tirer pour rafraîchir » effacerait la saisie en cours */
html {
  overscroll-behavior-y: contain;
}

.partogramme-body {
  background: var(--bg-main);
}

.partogramme-main {
  padding: 12px 16px 16px;
  gap: 12px;
}

.partogramme-main .nav-tabs {
  /* Style identique à Senologie - pas de carte, juste la ligne en bas */
  background: rgba(249, 245, 240, 0.5);
}

.partogramme-main .nav-tabs-track {
  width: min(100%, 1200px);
}

/* Titre h1 de la page (SEO-07) : hors écran visuellement, mais lu par les aides
   techniques ; les titres des panneaux sont des h2. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.partogramme-main .nav-connector {
  width: 36px;
}

.partogramme-main .dot-label {
  font-size: 10px;
  letter-spacing: 0.3px;
}

.partogramme-main .panels-container {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  /* Aucun défilement, même par un focus posé pendant le glissement d'un panneau
     (lot ZC-A11Y, point 0 ; cf. shared/css/navigation-tabs.css) */
  overflow: clip;
}

/* Panneau inactif : visibility: hidden le sort de l'ordre de tabulation
   (masqué seulement une fois la transition de sortie terminée) */
.partogramme-main .workflow-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.2s ease-out,
              visibility 0s linear 0.3s;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-canvas);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-light);
  padding: 20px 24px;
  overflow: auto;
}

.partogramme-main .workflow-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.2s ease-out,
              visibility 0s;
  pointer-events: auto;
  z-index: 1;
}

.partogramme-main .workflow-panel.slide-out-left {
  transform: translateX(-30%);
  opacity: 0;
  z-index: 0;
}

.partogramme-main .workflow-panel.slide-out-right {
  transform: translateX(30%);
  opacity: 0;
  z-index: 0;
}

/* Panneau entrant : visible dès switchStep, sans attendre le `.active` posé au double
   requestAnimationFrame (lot ZC-A11Y, point 0 ; même règle que
   shared/css/navigation-tabs.css) */
.partogramme-main .workflow-panel.enter-from-left {
  transform: translateX(-30%);
  opacity: 0;
  visibility: visible;
  transition: none;
}

.partogramme-main .workflow-panel.enter-from-right {
  transform: translateX(30%);
  opacity: 0;
  visibility: visible;
  transition: none;
}

/* L'impression affiche tous les panneaux (css/print.css) */
@media print {
  .partogramme-main .workflow-panel {
    visibility: visible;
    transition: none;
  }
}

.panel-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}

.panel-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.panel-header p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.identification-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-status {
  min-height: 18px;
  font-size: 12px;
  color: var(--text-secondary);
}

.form-status.is-error {
  color: var(--accent-danger);
}

.form-status.is-ok {
  color: var(--accent-success);
}

.form-section {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  padding: 16px;
  background: var(--bg-sidebar);
}

.form-section legend {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 0 6px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}

.form-grid:last-child {
  margin-bottom: 0;
}

/* display: grid l'emporte sur l'attribut hidden (champs RPM de l'admission) */
.form-grid[hidden] {
  display: none;
}

.inline-fields {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inline-fields input[type="number"] {
  width: 70px;
}

.inline-unit {
  font-size: 11px;
  color: var(--text-muted);
}

.identification-form textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-medium);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 11px;
  resize: vertical;
  box-sizing: border-box;
}

.identification-form textarea:focus {
  border-color: var(--accent-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.15);
}

.identification-form .is-invalid {
  border-color: var(--accent-danger);
  box-shadow: 0 0 0 2px rgba(196, 92, 92, 0.2);
}

/* --- Bebe Section Styles --- */

.bebe-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bebe-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bebe-rcf-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  background: var(--bg-sidebar);
  flex-wrap: wrap;
}

.bebe-rcf-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bebe-rcf-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

.bebe-rcf-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.bebe-rcf-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.bebe-reanimation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 12px;
}

/* --- Decision (modale) --- */

.decision-summary {
  white-space: normal;
  min-width: 180px;
}

/* --- Postpartum Section Styles --- */

.postpartum-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.postpartum-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.postpartum-help {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--text-secondary);
}

.postpartum-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.postpartum-subsection {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-light);
}

.postpartum-subsection-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  font-weight: 600;
}

.postpartum-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.postpartum-history-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.postpartum-history-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.postpartum-history-header p {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
}

.postpartum-table .chrono-table td {
  vertical-align: top;
}

.postpartum-hemorragie-card {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-light);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.postpartum-hemorragie-card.is-normal {
  border-color: var(--accent-success);
}

.postpartum-hemorragie-card.is-vigilance {
  border-color: var(--accent-primary);
}

.postpartum-hemorragie-card.is-alerte {
  border-color: var(--accent-danger);
}

/* HPP sévère (≥ 1 000 mL, CLIN-PAR-11) : bordure épaisse et bandeau latéral,
   distincts de l'alerte HPP */
.postpartum-hemorragie-card.is-severe {
  border: 2px solid var(--rcf-risque-majeur-text);
  box-shadow: inset 4px 0 0 var(--rcf-risque-majeur-text);
}

.postpartum-hemorragie-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.postpartum-hemorragie-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

.postpartum-hemorragie-score {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.postpartum-hemorragie-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.postpartum-hemorragie-status.is-normal {
  color: var(--accent-success);
}

.postpartum-hemorragie-status.is-vigilance {
  color: var(--accent-primary);
}

.postpartum-hemorragie-status.is-alerte {
  color: var(--accent-danger);
}

.postpartum-hemorragie-status.is-severe {
  color: var(--rcf-risque-majeur-text);
  font-weight: 700;
}

.postpartum-hemorragie-details {
  font-size: 11px;
  color: var(--text-secondary);
}

.postpartum-hemorragie-protocol summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--text-secondary);
}

.postpartum-hemorragie-protocol p {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-secondary);
}

/* --- Progression Module Styles --- */

.progression-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 16px;
}

.progression-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 12px;
}

.progression-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.view-controls {
  display: flex;
  gap: 16px;
  align-items: center;
}

.history-controls {
  display: flex;
  gap: 6px;
}

.view-toggles {
  display: flex;
  background: var(--bg-sidebar);
  border-radius: var(--border-radius-md);
  padding: 2px;
  border: 1px solid var(--border-light);
}

.btn-toggle {
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-toggle.active {
  background: #fff;
  color: var(--accent-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  font-weight: 500;
}

/* .btn-primary - Styles dans shared/css/components.css */

.progression-content {
  flex: 1;
  position: relative;
  min-height: 0;
}

.progression-content[data-view="hybrid"] {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
}

.view-container {
  display: none;
  height: 100%;
}

.view-container.active {
  display: flex;
  flex-direction: column;
}

#graph-container {
  background: var(--bg-canvas);
}

.graph-wrapper {
  flex: 1;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  background: #fff;
  position: relative;
  overflow: auto;
  min-height: 0;
  cursor: grab;
}

.graph-wrapper.is-dragging {
  cursor: grabbing;
}

#partogram-svg {
  display: block;
}

.graph-legend {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.legend-item {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.legend-toggle {
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
}

.legend-toggle.is-active {
  background: var(--bg-sidebar);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.symbol-dilatation { color: var(--accent-primary); }
.symbol-descente { color: var(--text-primary); }
.symbol-alert { color: var(--accent-danger); display: inline-flex; align-items: center; }
.symbol-alert svg { vertical-align: middle; }

/* Marqueur d'alerte LCG sur le graphe : même symbole et même couleur que la légende */
.lcg-alert-marker { color: var(--accent-danger); cursor: default; }

/* Icônes SVG dans les toggles de vue */
.icon-graph,
.icon-table,
.icon-hybrid {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

.icon-graph svg,
.icon-table svg {
  vertical-align: middle;
}

/* Boutons d'action dans le tableau chronologique */
.table-responsive .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color 0.15s;
}

.table-responsive .btn-icon:hover {
  background: var(--bg-hover);
}

.table-responsive .btn-icon svg {
  width: 14px;
  height: 14px;
}

.graph-wrapper .obs-node.is-highlight {
  stroke: var(--accent-primary);
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.rcf-classification {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--border-radius-md);
  background: var(--bg-sidebar);
  font-size: 12px;
  color: var(--text-secondary);
  min-height: 20px;
}

/* Table - Styles de base dans shared/css/components.css */

.table-input-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 6px;
}

.table-inline-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Modal Form */
.observation-panel {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.observation-panel[hidden] {
  display: none;
}

.panel-inner {
  background: var(--bg-canvas);
  width: 90%;
  max-width: 600px;
  max-height: 90%;
  overflow-y: auto;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 12px;
}

.panel-head h2 {
  margin: 0;
  font-size: 18px;
}

.btn-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

/* .btn-secondary - Styles dans shared/css/components.css */

@media (max-width: 768px) {
  .partogramme-main {
    padding: 10px;
  }

  .partogramme-main .nav-connector {
    width: 24px;
  }

  .partogramme-main .workflow-panel {
    border-radius: 0;
    border: none;
    padding: 16px;
  }

  .form-section {
    padding: 12px;
  }

  .inline-fields input[type="number"] {
    width: 60px;
  }

  .bebe-rcf-card {
    flex-direction: column;
    align-items: flex-start;
  }

  /* minmax(0, 1fr) : avec 1fr, la colonne prenait la largeur du SVG et le panneau
     défilait en largeur au lieu du seul cadre du graphe (D3, L3-PAR) */
  .progression-content[data-view="hybrid"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* En-tête du Partogramme : titre, modes d'affichage, Annuler / Rétablir et
     « Nouvelle observation » passent à la ligne au lieu de déborder (390 px) */
  .progression-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .view-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ============================================
   PANEL HEADER ROW (titre + bouton de thème)
   ============================================ */

.panel-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.panel-header-text {
  flex: 1;
}

@media (max-width: 768px) {
  .panel-header-row {
    flex-direction: column;
  }
}

/* Toast des chronomètres (QUAL-16, js/main.js) : composant partagé .gf-toast
   (shared/css/components.css) aux couleurs des bandeaux d'alerte (js/alerts.js),
   jetons RCF et texte d'alerte de css/dark-theme.css, redéfinis en thème sombre.
   Contraste du texte (A11Y-05) : thème clair 5,05 (info), 9,08 (warning), 6,21
   (caution), 4,62:1 (danger) ; thème sombre 6,23, 10,43, 7,69, 6,29:1. */
.timer-alert-toast.gf-toast--info {
  --gf-toast-bg: var(--accent-secondary);
  --gf-toast-fg: var(--alert-info-text);
}

.timer-alert-toast.gf-toast--warning {
  --gf-toast-bg: var(--rcf-faible-risque);
  --gf-toast-fg: var(--alert-text);
}

.timer-alert-toast.gf-toast--caution {
  --gf-toast-bg: var(--rcf-risque-intermediaire);
  --gf-toast-fg: var(--alert-text);
}

.timer-alert-toast.gf-toast--danger {
  --gf-toast-bg: var(--rcf-risque-majeur);
  --gf-toast-fg: var(--alert-text);
}

/* D4 : au téléphone, bandeaux d'alerte et toast des chronomètres sont dans le flux,
   entre les onglets et les panneaux (js/alerts.js, js/main.js) : ils poussent le
   contenu vers le bas au lieu de recouvrir un contrôle. !important : les positions
   des bandeaux sont posées en style en ligne pour l'ordinateur, où ils restent
   superposés ; celle du toast l'est par .gf-toast--top-end, et seul !important
   l'emporte sur la translation de son animation d'entrée et de sortie. */
@media (max-width: 768px) {
  /* Pile plafonnée à 35 % de l'écran, qui défile (relecture L3-PAR, B1) : les
     avertissements restent jusqu'à la croix, et six d'entre eux réduisaient le panneau
     à 0 px. pointer-events : le style en ligne pose none, il faut pouvoir la faire défiler */
  .alert-container {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0;
    max-height: 35vh;
    max-height: 35dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto !important;
  }

  .alert-container:empty {
    display: none !important;
  }

  .alert-container .timer-alert-toast {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    max-width: none !important;
    transform: none !important;
    pointer-events: auto;
  }

  /* Bandeau compact : icône, niveau et message en un seul paragraphe sur toute la
     largeur (en colonnes flex, le message tenait sur 150 px) ; croix en haut à droite */
  .alert-container .alert-item {
    display: block !important;
    position: relative;
    padding-right: 40px !important;
  }

  .alert-container .alert-icon {
    display: inline-flex !important;
    vertical-align: -4px;
    margin-right: 6px;
  }

  .alert-container .alert-section {
    display: block;
    margin-top: 8px;
  }

  .alert-container .alert-close {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  /* Bandeaux affichés, le panneau Partogramme perd de la hauteur : le cadre du graphe
     garde sa hauteur habituelle (243 px à 393×727, écrasé à 0 avec trois bandeaux) et
     le panneau défile au lieu de l'écraser */
  .graph-wrapper {
    min-height: 240px;
  }
}