/* VetConnect — Vet Consultation: Examen step
   Zoodiag interaction model + VetConnect premium design system.
   Uses tokens from tokens-premium.css for color/type/spacing/shadow/motion. */

:root {
  /* Scoped accent for the exam — reuses our brand primary so it stays
     consistent with the rest of the app. We keep these as named tokens
     so any future re-skin lands in one place. */
  --exam-accent:        var(--color-primary);
  --exam-accent-hover:  var(--color-primary-hover);
  --exam-accent-soft:   var(--color-primary-50);
  --exam-accent-glow:   var(--color-primary-glow);
  --exam-bg-soft:       var(--color-neutral-100);
  --exam-favorite:      #E0A500;
  --exam-favorite-soft: rgba(224, 165, 0, 0.10);
}

/* The root .exam wraps everything — make it full-width-friendly */
.exam {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ─── Sub-tabs (Clinique / Labo) — compact chip style ───────── */
.exam-subtabs {
  display: inline-flex;
  align-self: center;
  gap: 2px;
  padding: 3px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-pill);
  margin: 0 auto var(--space-2);
}
.exam-subtab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  padding: 6px 14px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.exam-subtab svg {
  width: 14px;
  height: 14px;
  color: currentColor;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.exam-subtab:hover {
  color: var(--color-text-strong);
}
.exam-subtab.active {
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-xs);
}
.exam-subtab.active svg { color: var(--color-primary); }

/* ─── Main grid (rail + content) ────────────────────────────── */
/* Inside the consultation workspace, we already have a 240px patient rail on
   the left, so the inner "Synthèse" rail is no longer needed — drop it and
   let the viewer + regions take the full canvas width. */
.exam-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  width: 100%;
  margin: 0 auto;
}
/* Hide the legacy "Synthèse" rail — patient rail already exists in workspace */
body.consultation-mode .exam-rail { display: none; }

/* ─── Left rail (Synthèse / Vues) ───────────────────────────── */
.exam-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-self: start;
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-3));
}
.exam-rail-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 48px;
  min-height: 88px;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  box-shadow: var(--shadow-xs), var(--inset-highlight);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-base),
    transform var(--transition-spring);
}
.exam-rail-btn:hover {
  color: var(--exam-accent);
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-sm), var(--inset-highlight);
}
.exam-rail-btn.active {
  color: var(--color-primary-contrast);
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 35%, var(--color-primary-hover));
  border-color: transparent;
  box-shadow:
    0 4px 10px -3px var(--color-primary-glow),
    var(--inset-highlight-strong);
}
.exam-rail-btn.exam-rail-btn--icon {
  writing-mode: horizontal-tb;
  transform: none;
  min-height: 48px;
  text-transform: none;
  letter-spacing: var(--tracking-normal);
}

/* ─── Main content area ─────────────────────────────────────── */
/* Tight stack between viewer and regions for a dense, premium feel */
.exam-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* ─── 3D viewer panel ───────────────────────────────────────── */
.exam-viewer {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: var(--space-2);
  align-items: stretch;
  box-shadow: var(--shadow-sm), var(--inset-highlight);
}
.exam-3d-host {
  position: relative;
  min-height: 380px;
  max-height: 500px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 33, 0.04);
}
.exam-3d-host .anatomy-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: var(--radius-xl);
  aspect-ratio: auto;
  box-shadow: none;
  /* Softer background gradient when nested inside the white exam card */
  background:
    radial-gradient(ellipse at 50% 35%, #FAFAF8 0%, #EFEFEB 65%, #E5E5E0 100%);
}
/* Compact the in-viewer pills to match the exam card's tighter visual rhythm */
.exam-3d-host .anatomy-3d-layers,
.exam-3d-host .anatomy-3d-controls,
.exam-3d-host .anatomy-3d-hint {
  box-shadow: var(--shadow-sm);
}
.exam-3d-host .anatomy-3d-hint {
  font-size: var(--text-2xs);
  padding: var(--space-1) var(--space-3);
}
/* Attribution chip — smaller inside the exam card */
.exam-3d-host .sf-credit {
  font-size: 9px;
  padding: 3px 8px;
}
.exam-viewer-rail-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.exam-3d-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ─── Region accordion ──────────────────────────────────────── */
.exam-regions {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm), var(--inset-highlight);
  padding: 0 var(--space-3);
}
.exam-region {
  border-top: 1px solid var(--color-border-subtle);
  transition: background-color var(--transition-fast);
}
.exam-region:first-child { border-top: 0; }
.exam-region.is-active { background: var(--exam-accent-soft); }

.exam-region-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-strong);
  font-weight: var(--font-semibold);
  transition: color var(--transition-fast);
  border-radius: var(--radius-md);
}
.exam-region-header:hover { color: var(--exam-accent); }
.exam-region-header:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.exam-region-chevron {
  color: var(--color-text-tertiary);
  transition: transform var(--transition-base);
  flex-shrink: 0;
}
.exam-region.is-open .exam-region-chevron {
  transform: rotate(180deg);
  color: var(--exam-accent);
}

.exam-region-label { font-weight: var(--font-semibold); }

.exam-region-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: 11px;
  font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-normal);
  box-shadow: none;
}
.exam-region.is-open .exam-region-count,
.exam-region.is-active .exam-region-count {
  color: var(--color-primary);
}

.exam-region-spacer { flex: 1; }

.exam-region-favorites {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-tertiary);
  transition: color var(--transition-fast);
}
.exam-region-fav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-text-strong);
  color: var(--color-text-inverse);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
}

/* ─── Region body (collapsed by default) ────────────────────── */
.exam-region-body {
  display: none;
  padding: 0 var(--space-2) var(--space-3);
  flex-direction: column;
  gap: 0;
}
.exam-region.is-open .exam-region-body {
  display: flex;
  animation: exam-region-in var(--duration-base) var(--ease-out-expo);
}
@keyframes exam-region-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Field row ─────────────────────────────────────────────── */
/* Wider label column on full-width layout for a more spacious / premium feel */
.exam-field {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr 32px;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border-subtle);
}
.exam-region-body .exam-field:first-child { border-top: 0; }

.exam-field-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  transition: color var(--transition-fast);
}
.exam-field.is-filled .exam-field-label {
  color: var(--exam-accent);
}

.exam-field-control { min-width: 0; }

/* Favorite star */
.exam-field-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-border-default);
  border-radius: var(--radius-circle);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-spring);
}
.exam-field-star:hover {
  color: var(--exam-favorite);
  background: var(--exam-favorite-soft);
  transform: scale(1.08);
}
.exam-field-star.is-fav { color: var(--exam-favorite); }
.exam-field-star:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ─── Segmented button group ────────────────────────────────── */
.exam-field-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.exam-segment {
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--inset-highlight);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--duration-fast) var(--ease-spring-firm),
    box-shadow var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.exam-segment:hover {
  border-color: var(--exam-accent);
  color: var(--exam-accent);
}
.exam-segment:active { transform: scale(0.97); transition-duration: var(--duration-instant); }
.exam-segment:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.exam-segment.is-active {
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 35%, var(--color-primary-hover));
  border-color: transparent;
  color: var(--color-primary-contrast);
  box-shadow:
    0 4px 10px -3px var(--color-primary-glow),
    var(--inset-highlight-strong);
}

/* ─── Slider ────────────────────────────────────────────────── */
.exam-field-slider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.exam-field-slider input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(to right, var(--color-neutral-200), var(--color-neutral-200));
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
  margin: 0;
}
.exam-field-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
  border: 4px solid var(--color-surface);
  cursor: pointer;
  box-shadow:
    0 4px 10px -3px var(--color-primary-glow),
    0 1px 2px rgba(15, 23, 33, 0.08);
  transition: transform var(--transition-spring);
}
.exam-field-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
.exam-field-slider input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
  border: 4px solid var(--color-surface);
  cursor: pointer;
  box-shadow:
    0 4px 10px -3px var(--color-primary-glow),
    0 1px 2px rgba(15, 23, 33, 0.08);
}
.exam-field-slider input[type="range"]:focus-visible {
  box-shadow: var(--shadow-focus);
}

.exam-slider-bubble {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-0_5);
  min-width: 80px;
  justify-content: flex-end;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.exam-slider-unit {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-normal);
}

/* ─── Text input ────────────────────────────────────────────── */
.exam-field-text {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-text-strong);
  box-shadow: var(--inset-highlight);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.exam-field-text:focus {
  outline: none;
  border-color: var(--exam-accent);
  box-shadow: var(--shadow-focus);
}
.exam-field-text::placeholder { color: var(--color-text-tertiary); }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .exam-grid {
    grid-template-columns: 1fr;
  }
  .exam-rail {
    flex-direction: row;
    position: static;
    flex-wrap: wrap;
  }
  .exam-rail-btn {
    writing-mode: horizontal-tb;
    transform: none;
    min-height: 44px;
    width: auto;
    padding: var(--space-2) var(--space-4);
  }
  .exam-viewer { grid-template-columns: 1fr; }
  .exam-viewer-rail-right { flex-direction: row; }
  .exam-field {
    grid-template-columns: 1fr 32px;
    gap: var(--space-2);
    row-gap: var(--space-2);
  }
  .exam-field-label { grid-column: 1 / span 2; }
  .exam-field-control { grid-column: 1; }
  .exam-field-star { grid-row: 1; grid-column: 2; }
  .exam-3d-host { min-height: 280px; max-height: 360px; }
  .exam-subtabs { gap: var(--space-6); }
}

@media (max-width: 480px) {
  .exam-regions { padding: 0 var(--space-1); }
  .exam-region-header { padding: var(--space-3) var(--space-2); }
  /* Shrink the body-map viewer so the exam form is visible without scrolling */
  .exam-3d-host { min-height: 200px; max-height: 260px; }
  /* Allow the workspace to take the full viewport so nothing is cut off */
  .exam-main { max-width: 100vw; overflow-x: hidden; }
  /* The center column of the field grid (label + control + star) collapses
     fully: label and control on row 1, star button floats on row 2 to keep
     the layout breathable */
  .exam-field {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
  }
  .exam-field-label,
  .exam-field-control { grid-column: 1; }
  .exam-field-star { position: absolute; top: var(--space-2); right: var(--space-2); }
  .exam-field { position: relative; }
}