/* ==================================== */
/* SENOLOGIE - STYLES SPECIFIQUES       */
/* ==================================== */

/* Import shared styles */
@import url('../../../shared/css/design-system.css');
@import url('../../../shared/css/layout.css');
@import url('../../../shared/css/components.css');
@import url('../../../shared/css/forms.css');
@import url('../../../shared/css/document-sidebar.css');
@import url('../../../shared/css/multi-select-dropdown.css');

/* ==================================== */
/* SENOLOGIE - Collapsed state overrides*/
/* ==================================== */
.sidebar.collapsed .tumor-content,
.sidebar.collapsed .anatomy-card {
  display: none;
}

/* ==================================== */
/* SVG CANVAS                           */
/* ==================================== */
#main-svg {
  background: var(--bg-canvas);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  touch-action: none;
}

/* svg user-select now in shared/layout.css */

/* ==================================== */
/* SVG ELEMENT STYLES                   */
/* ==================================== */
.title-zone {
  font-size: 20px;
  font-weight: bold;
  fill: var(--text-primary);
  text-anchor: middle;
  pointer-events: none;
}

.subtitle {
  font-size: 14px;
  fill: var(--text-secondary);
  text-anchor: middle;
  font-style: italic;
  pointer-events: none;
}

.lines {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rib-lines {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rib-occluded-bg {
  fill: none;
  /* Surface visuelle = var(--anatomy-surface) (rgba 210,180,160,0.12) sur fond blanc → ≈ #FAF6F4.
     Sous-couche solide qui masque les côtes originales sous la translucide debug-surface
     pour que les espaces entre les pointillés correspondent exactement à la couleur du sein.
     stroke-width identique au rib (3) pour ne pas créer de halo crème à la jonction. */
  stroke: #FAF6F4;
  stroke-width: 3;
  stroke-linecap: butt;
  pointer-events: none;
}

.rib-occluded {
  /* butt → bouts de dash francs, alignés avec la frontière de clip (pas de "pilules" qui
     dépassent ou semblent flotter à la jonction avec la côte solide externe). */
  stroke-linecap: butt;
  stroke-dasharray: 5, 10;
  pointer-events: none;
}

/* Debug surfaces - tons chair neutres */
.debug-surface {
  fill: var(--anatomy-surface);
  stroke: none;
  pointer-events: visible;
}

.debug-surface.right {
  fill: var(--anatomy-surface);
}

/* Axis and thorax lines */
.axis-line {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-dasharray: 8, 8;
  pointer-events: none;
}

.thorax-line {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 4;
  stroke-linecap: square;
  pointer-events: none;
}

.point-dot {
  fill: var(--accent-danger);
  stroke: white;
  stroke-width: 1;
  pointer-events: none;
}

/* Interactive elements - tons chauds uniformes */
.interactive {
  cursor: grab;
  transition: fill 0.2s, stroke 0.2s;
}

.interactive:hover {
  stroke: var(--accent-primary);
  stroke-width: 2px;
}

.interactive:active {
  cursor: grabbing;
}

.interactive-xy {
  cursor: move;
  fill: var(--anatomy-handle);
  stroke: var(--text-primary);
}

.interactive-xy:hover {
  fill: var(--accent-primary);
}

/* Handle lines and points - tons chauds uniformes */
.handle-line {
  stroke: var(--anatomy-handle);
  stroke-width: 1;
  stroke-dasharray: 4, 4;
  pointer-events: none;
  opacity: 0.6;
}

.handle-point {
  fill: var(--anatomy-handle);
  stroke: white;
  stroke-width: 1.5;
  cursor: crosshair;
  opacity: 0.9;
}

.handle-point:hover {
  fill: var(--anatomy-handle-hover);
}

/* End point */
.end-point {
  fill: var(--accent-danger);
  stroke: white;
  stroke-width: 2;
  cursor: move;
}

.end-point:hover {
  fill: var(--accent-danger-hover);
}

/* Right side controls - meme style que gauche */
.right-side-ctrl {
  fill: var(--anatomy-handle);
  stroke: white;
}

.right-side-ctrl:hover {
  fill: var(--anatomy-handle-hover);
}

.right-side-line {
  stroke: var(--anatomy-handle);
}

/* Resize handles */
.resize-handle {
  fill: var(--accent-success);
  stroke: white;
  stroke-width: 1.5;
  cursor: e-resize;
  opacity: 0.9;
}

.resize-handle:hover {
  fill: var(--accent-success-hover);
}

/* Areola styling - tons chair */
#front-left-areola-outer,
#front-right-areola-outer {
  fill: rgba(210, 170, 150, 0.25);
}

#front-left-areola-inner,
#front-right-areola-inner {
  fill: rgba(190, 140, 120, 0.5);
}

/* ==================================== */
/* TUMORS SECTION - ACCORDION           */
/* ==================================== */

.tumor-count {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: normal;
  margin-left: auto;
}

/* Tumor content visibility */
.tumor-content {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.tumor-content.hidden {
  display: none;
}

/* ==================================== */
/* TUMOR LIST (Senologie-specific)      */
/* ==================================== */
/* Base styles from shared/css/components.css (.accordion-item, etc.) */

/* Side badge override (smaller padding for D/G) */
.tumor-item-side {
  padding: 2px 4px;
}

/* Tumor name in list */
.tumor-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ==================================== */
/* SVG ADENOPATHY STYLES                */
/* ==================================== */
.adenopathy-shape {
  cursor: move;
  transition: stroke-width 0.2s, r 0.2s;
}

.adenopathy-shape:hover {
  stroke-width: 2;
  r: 7;
}

.adenopathy-label {
  pointer-events: none;
  user-select: none;
  font-family: Arial, sans-serif;
}

.berg-zones-container {
  pointer-events: none;
}

.berg-zone {
  fill-opacity: 0.15;
  stroke-width: 1;
  stroke-dasharray: 3, 2;
  pointer-events: none;
}

.berg-zone-1 {
  fill: #d97757;
  stroke: #d97757;
}

.berg-zone-2 {
  fill: #5b8def;
  stroke: #5b8def;
}

.berg-zone-3 {
  fill: #6cbf75;
  stroke: #6cbf75;
}

/* ==================================== */
/* ADENOPATHY GLOBAL BLOCK (rapport)    */
/* ==================================== */
/* Les blocs Adénopathies / Adénopathie biopsiée sont des form-group siblings
   au même niveau que Tumeurs / Examens / Bilan, pour partager le rythme
   vertical (pas de fond / bordure / margin spécifique).
   Note : la liste `#adeno-list` est stylée dans rapportPanel.css pour
   profiter de la cascade `.rapport-panel`. */

#add-adeno-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  background: var(--bg-sidebar);
}

#add-adeno-mode .input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

/* Labels du formulaire d'ajout : alignés sur le style des autres labels du
   panneau Rapport (uppercase, fin, secondary). */
#add-adeno-mode .input-group label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
}

#add-adeno-mode .btn-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
/* Note : `.hidden { display: none !important; }` est déjà fourni par
   `.rapport-panel .hidden` dans rapportPanel.css ; tous les blocs
   ci-dessus vivent à l'intérieur de `.rapport-panel`. */

/* ==================================== */
/* SVG TUMOR STYLES                     */
/* ==================================== */
.tumor-shape {
  cursor: move;
  transition: stroke-width 0.2s;
}

.tumor-shape:hover {
  stroke-width: 3;
}

.tumor-group.selected .tumor-shape {
  stroke-dasharray: 4, 2;
}

.tumor-handles {
  pointer-events: all;
}

.handle {
  fill: white;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  cursor: pointer;
}

.handle:hover {
  r: 7;
}

.handle-length {
  cursor: ew-resize;
}

.handle-width {
  cursor: ns-resize;
}

.handle-rotate {
  cursor: crosshair;
  fill: var(--accent-primary);
}

/* ==================================== */
/* TUMOR DIMENSION AXES                 */
/* ==================================== */

/* Groupe d'axes - ne doit pas interferer avec le drag */
.tumor-axes {
  pointer-events: none;
}

/* Lignes d'axes */
.tumor-axes .axis-line {
  stroke: rgba(60, 60, 60, 0.7);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 3, 2;
  pointer-events: none;
}

/* Couleurs distinctes par type d'axe */
.axis-longueur {
  stroke: rgba(210, 50, 50, 0.75);
}

.axis-largeur {
  stroke: rgba(50, 120, 210, 0.75);
}

.axis-epaisseur {
  stroke: rgba(80, 170, 80, 0.75);
}

/* Etiquettes de dimensions */
.axis-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-primary);
  pointer-events: none;
  user-select: none;
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white,
    0 0 3px white;
}

/* Couleurs optionnelles pour les labels (assortir aux lignes) */
.axis-label-longueur {
  fill: #b71c1c;
}

.axis-label-largeur {
  fill: #0d47a1;
}

.axis-label-epaisseur {
  fill: #2e7d32;
}

/* Transition douce lors de la selection */
.tumor-group .tumor-axes {
  transition: opacity 0.2s;
}

/* Optionnel : attenuer legerement les axes au hover pour voir la tumeur */
.tumor-group:hover .tumor-axes {
  opacity: 0.7;
}

/* ==================================== */
/* SURGERY SECTION                      */
/* ==================================== */

.surgery-content {
  margin-top: 0;
}

.surgery-content.hidden {
  display: none;
}

/* ==================================== */
/* SVG SCAR STYLES                      */
/* ==================================== */
.scar-line {
  cursor: move;
  transition: stroke-width 0.2s, opacity 0.2s;
}

.scar-line:hover {
  stroke-width: 4;
  opacity: 1;
}

.scar-group.selected .scar-line {
  stroke-dasharray: 6, 3;
}

.scar-handle {
  fill: white;
  stroke: #8B4513;
  stroke-width: 2;
  cursor: pointer;
  r: 5;
}

.scar-handle:hover {
  r: 7;
  fill: #F5DEB3;
}

.scar-handle-curve {
  fill: #4a90d9;
  stroke: white;
  stroke-width: 1.5;
  cursor: move;
}

.scar-handle-curve:hover {
  r: 6;
  fill: #6aa8e8;
}

/* Periareolar scar (circle) */
.scar-periareolar {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.85;
}

/* Axillary scar */
.scar-axillary {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.8;
}

/* Mastectomy scar */
.scar-mastectomy {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.9;
}

/* ==================================== */
/* SCAR LIST IN SIDEBAR                 */
/* ==================================== */

#scar-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.scar-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.scar-item:hover {
  background: var(--bg-sidebar-hover);
  border-color: var(--border-medium);
}

.scar-item.selected {
  background: rgba(139, 69, 19, 0.08);
  border-color: #8B4513;
}

.scar-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.scar-color-dot:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.scar-item-number {
  font-size: 11px;
  font-weight: 600;
  color: #8B4513;
  min-width: 22px;
  flex-shrink: 0;
}

.scar-item-side {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-sidebar-hover);
  padding: 2px 2px;
  border-radius: 4px;
  flex-shrink: 0;
}

.scar-item-quadrant {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
}

.scar-item-label {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.btn-delete-scar {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0;
  transition: all var(--transition-fast);
}

.scar-item:hover .btn-delete-scar {
  opacity: 1;
}

.btn-delete-scar:hover {
  color: var(--accent-danger);
}

.scar-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: normal;
}

/* ==================================== */
/* LIPOFILLING SECTION                  */
/* ==================================== */

.lipofilling-content {
  margin-top: 0;
}

.lipofilling-content.hidden {
  display: none;
}

.lipofilling-section .control-group {
  margin-bottom: 12px;
}

.lipofilling-section .btn-secondary {
  margin-top: 4px;
}

/* ==================================== */
/* SVG LIPOFILLING STYLES               */
/* ==================================== */
.lipofilling-stroke {
  pointer-events: none;
}

/* ==================================== */
/* SVG T4 ZONES (lasso, polygones fillés) */
/* ==================================== */
.tumor-t4-zone {
  pointer-events: none;
  fill-opacity: 0.3;
  stroke-width: 1.5;
  stroke-opacity: 0.75;
  stroke-dasharray: none;
}

/* T4a — paroi thoracique : bleu froid */
.t4-zone--paroi {
  fill: #2563eb;
  stroke: #1d4ed8;
}

/* T4b — ulcération / nodules cutanés : rouge foncé */
.t4-zone--peau {
  fill: #b91c1c;
  stroke: #991b1b;
}

/* T4b — peau d'orange : orange */
.t4-zone--peau-orange {
  fill: #f97316;
  stroke: #c2410c;
}

/* T4d — cancer inflammatoire : rouge vif (plus translucide pour signifier
   l'aspect diffus du tableau inflammatoire). */
.t4-zone--inflammatoire {
  fill: #ef4444;
  stroke: #dc2626;
  fill-opacity: 0.22;
}

/* ==================================== */
/* RAPPORT — bloc T4 dans carte tumeur  */
/* ==================================== */
.t4-block {
  margin: 8px 14px 12px;
  padding: 10px 12px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 13px;
}

/* Bloc replié quand la case maître "Stade T4" est décochée. */
.t4-block.hidden {
  display: none;
}

.t4-block-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.t4-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.t4-checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 6px 6px;
  border-radius: 4px;
  transition: background-color 0.12s ease;
}

.t4-checkbox-option:hover {
  background: rgba(0, 0, 0, 0.03);
}

.t4-checkbox-option input[type="checkbox"] {
  margin: 2px 0 0 0; /* aligner visuellement avec la 1re ligne du libellé */
  cursor: pointer;
  flex-shrink: 0;
}

.t4-checkbox-text-stack {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  flex: 1;
}

.t4-checkbox-label {
  line-height: 1.3;
}

.t4-checkbox-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.t4-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.t4-paint-btn.active {
  background: var(--accent-primary);
  color: white;
}

.t4-paint-btn.hidden,
.t4-clear-btn.hidden {
  display: none;
}

.t4-stroke-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ==================================== */
/* IMPLANT SECTION                      */
/* ==================================== */

.implant-section {
  position: relative;
}

.implant-content {
  margin-top: 4px;
}

/* Implant controls */
#implant-controls .control-group {
  margin-bottom: 12px;
}

#implant-controls .control-group:last-child {
  margin-bottom: 0;
}

#implant-controls .help-text {
  font-size: 11px;
  color: var(--text-muted);
  margin: 8px 0 0 0;
  padding: 8px;
  background: var(--bg-sidebar-hover);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-style: italic;
}

/* ==================================== */
/* SVG IMPLANT STYLES                   */
/* ==================================== */

.implant-container {
  pointer-events: all;
}

.implant-group {
  cursor: move;
  transition: opacity 0.2s;
}

.implant-group:hover {
  opacity: 0.85;
}

.implant-shape {
  transition: stroke-width 0.2s, fill 0.2s;
}

.implant-group:hover .implant-shape {
  stroke-width: 2;
}

.implant-group.selected .implant-shape {
  stroke-width: 2.5;
  stroke-dasharray: none;
}

/* Resize handle for implants */
.implant-resize-handle {
  fill: var(--accent-success);
  stroke: white;
  stroke-width: 2;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.2s, r 0.2s;
}

.implant-group:hover .implant-resize-handle {
  opacity: 1;
}

.implant-resize-handle:hover {
  r: 7;
  fill: var(--accent-success-hover);
}

/* Valve icon for expandeur */
.valve-icon {
  pointer-events: none;
}

/* Pectoral muscle line */
.muscle-layer {
  pointer-events: none;
}

.pectoral-muscle {
  transition: opacity 0.3s;
}

/* Pattern fills for autologous reconstruction */
.implant-shape[fill^="url(#pattern-"] {
  stroke-dasharray: none;
}

/* ==================================== */
/* TOUCH OPTIMIZATION                   */
/* ==================================== */

/* Larger hit zones for touch devices */
@media (pointer: coarse) {
  .resize-handle,
  .handle-point,
  .end-point {
    r: 12;
  }

  .interactive,
  .interactive-xy {
    r: 10;
  }

  .tumor-shape {
    stroke-width: 4;
  }

  .handle {
    r: 10;
  }

  .scar-handle {
    r: 8;
  }
}

/* ==================================== */
/* RESPONSIVE - TABLET (768px)          */
/* ==================================== */
@media (max-width: 768px) {
  #main-svg {
    max-height: 55vh;
  }
}

/* ==================================== */
/* RESPONSIVE - MOBILE (480px)          */
/* ==================================== */
@media (max-width: 480px) {
  .sidebar:not(.expanded) .anatomy-card {
    display: none;
  }

  #main-svg {
    max-height: calc(100vh - 90px);
  }

  /* SVG view switching */
  #main-svg.view-face-only #profile-left-section,
  #main-svg.view-face-only #profile-right-section {
    display: none;
  }

  #main-svg.view-profil-only #group-left,
  #main-svg.view-profil-only #group-right {
    display: none;
  }
}