/* APPLI CHAI VR 2 - mouvements-historique.css
 * CSS specifique a la page mouvements-historique.html.
 * Extrait de la balise <style> inline (CSP style-src 'self').
 */

.hist-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}
.hist-filters .filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hist-filters label {
  font-size: 0.85rem;
  color: var(--c-muted);
}
.hist-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.session-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
}
.session-meta {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-date {
  font-weight: 700;
  color: var(--c-primary);
}
.session-user {
  color: var(--c-muted);
  font-size: 0.85rem;
}
.session-notes {
  color: var(--c-text);
  font-size: 0.9rem;
  font-style: italic;
}
.session-count {
  flex: 0 0 auto;
  color: var(--c-muted);
  font-size: 0.85rem;
}
.hist-loadmore {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3);
}

/* Detail session
   Bug C (2026-05-07) + fix specificite (2026-05-19) : il faut
   `dialog.modal.session-detail-modal` (specificite 0,2,1) pour battre
   `dialog.modal { width: 480px }` (0,1,1) du base CSS. Sinon le modal
   reste a 480px et le SVG est minuscule.
   Snapshots empiles verticalement par defaut, cote-a-cote uniquement
   sur tres grand ecran (>=1400px). SVG dimensionnes pour scaler le
   contenu, pas juste agrandir une box vide. */
dialog.modal.session-detail-modal {
  max-width: 1600px;
  width: 95vw;
}
.session-detail-modal .modal-body {
  max-height: 85vh;
  overflow-y: auto;
}
.session-snapshots {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
@media (min-width: 1400px) {
  .session-snapshots { grid-template-columns: 1fr 1fr; }
}
.snapshot-box {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.snapshot-box h3 {
  margin: 0 0 var(--space-2) 0;
  font-size: 1.15rem;
  color: var(--c-primary);
}
.snapshot-svg {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}
.snapshot-svg .cuve .cuve-bg-circle { fill: #cccccc; }
.snapshot-svg .cuve .cuve-border {
  fill: none;
  stroke: #1c1c1c;
  stroke-width: 2;
}
.snapshot-svg .cuve .cuve-numero {
  font-weight: 700;
  font-size: 18px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #ffffff;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.snapshot-svg .cuve .cuve-volume {
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
  fill: #2a2a2a;
}
.session-mvts {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.session-mvts th, .session-mvts td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
.session-mvts th {
  font-weight: 600;
  color: var(--c-muted);
  background: var(--c-bg);
}
.session-meta-block {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}
.session-meta-block dt {
  color: var(--c-muted);
  font-size: 0.85rem;
  margin-top: 4px;
}
.session-meta-block dd { margin: 2px 0 4px 0; font-weight: 500; }

@media (max-width: 720px) {
  .session-snapshots { grid-template-columns: 1fr; }
}

/* Badges annulation / annulation-de (Phase 7 - 2026-05-19) */
.session-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.session-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.session-badge.badge-cancelled {
  background: #fde2e2;
  color: #7a1c1c;
  border-color: #f3b8b8;
}
.session-badge.badge-cancellation {
  background: #fff3cd;
  color: #715108;
  border-color: #ffe69c;
}
.btn-cancel-session {
  flex: 0 0 auto;
}
.btn-cancel-session.btn-danger {
  background: #b71c1c;
  color: #fff;
  border-color: #7a1c1c;
}
.btn-cancel-session.btn-danger:hover:not(:disabled) {
  background: #9a1717;
}