/* [REMOVAL-1980] D5 sweep: rules extracted from template <style> blocks.
   Each section header names its source template. */

/* ---- extracted from apps/templates/modals/multitemporal_comparison_viewer.html ---- */
/* [REMOVAL-1230] DS migration: raw z-index -> --z-* ladder tokens. */
/* [REMOVAL-1194] DS migration: hex literals replaced with design-system tokens. */
/* [REMOVAL-1194] DS migration: file-private tokens for feature-specific hues with no matching global design-system token (rule design-system.mdc S1). */
:root{ --c-0d6efd:#0d6efd; --c-4a7cf5:#4a7cf5; }

  /* ── Layout ───────────────────────────────────────────────────── */
  #mtComparisonViewerModal .modal-body { min-height: 0; }
  #mtcv-viewer-phase { min-height: 0; }
  .mtcv-toolbar-row1 .form-range { margin-bottom: 0; }

  /* ── Selection phase cards ──────────────────────────────────── */
  #mtcv-nearby-grid .mtcv-candidate-card {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  #mtcv-nearby-grid .mtcv-candidate-card:hover {
    border-color: var(--c-0d6efd);
    box-shadow: 0 0 0 2px rgba(13,110,253,0.2);
  }
  #mtcv-nearby-grid .mtcv-candidate-card.selected {
    border-color: var(--success-600);
    box-shadow: 0 0 0 3px rgba(25,135,84,0.25);
  }
  #mtcv-nearby-grid .mtcv-candidate-card img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
  }

  /* ── Detection list cards ───────────────────────────────────── */
  .mtcv-det-card {
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    padding: 5px 7px;
    margin-bottom: 4px;
    background: var(--surface-0);
    transition: background 0.12s, border-color 0.12s;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
  }
  .mtcv-det-card:hover { background: var(--surface-2); border-color: var(--neutral-300); }
  .mtcv-det-card.active { background: var(--info-50); border-color: var(--c-4a7cf5); }
  .mtcv-det-card.validated { border-left: 3px solid var(--success-600); }
  .mtcv-det-card.rejected  { border-left: 3px solid var(--danger-500); opacity: 0.65; }

  .mtcv-det-thumb {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle);
    background: var(--border-subtle);
  }
  .mtcv-det-thumb-canvas {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle);
    background: var(--border-subtle);
  }
  .mtcv-det-card .mtcv-det-body { min-width: 0; flex-grow: 1; }
  .mtcv-det-card .mtcv-det-status { flex-shrink: 0; font-size: 0.9rem; }

  /* ── Bbox SVG overlay ───────────────────────────────────────── */
  .mtcv-bbox-overlay rect, .mtcv-bbox-overlay polygon {
    pointer-events: all;
    cursor: pointer;
  }
  .mtcv-bbox-overlay rect:hover { stroke-width: 3 !important; }

  @keyframes mtcv-pulse {
    0%, 100% { stroke-opacity: 1; }
    50%       { stroke-opacity: 0.35; }
  }
  .mtcv-bbox-selected { animation: mtcv-pulse 1.2s ease-in-out infinite; }

  /* ── img-comparison-slider ──────────────────────────────────── */
  img-comparison-slider {
    --divider-width: 2px;
    --divider-color: var(--c-0d6efd);
    --default-handle-opacity: 0.85;
    --default-handle-width: 38px;
  }

  /* ── Algorithm toggle pills ─────────────────────────────────── */
  .mtcv-algo-toggle {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid;
    cursor: pointer;
    transition: opacity 0.15s;
    user-select: none;
    white-space: nowrap;
  }
  .mtcv-algo-toggle.off { opacity: 0.35; }

  /* ── SVG tooltip ────────────────────────────────────────────── */
  .mtcv-svg-tooltip {
    position: fixed;
    background: rgba(0,0,0,0.78);
    color: var(--surface-0);
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: var(--z-tweaks);
    white-space: nowrap;
    transition: opacity 0.1s;
  }

  /* ── Right panel crop canvases ──────────────────────────────── */
  #mtcv-crop-before, #mtcv-crop-after {
    display: block;
    width: 100%;
    max-height: 100px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    background: var(--border-subtle);
  }

  /* ── Panel collapse toggles ────────────────────────────────── */
  .mtcv-panel-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    opacity: 0.6;
    padding: 4px 3px;
    border-radius: 4px;
    font-size: 0.7rem;
    line-height: 1;
  }
  .mtcv-panel-toggle:hover { opacity: 1; }
  .mtcv-toggle-left  { left: 2px; }
  .mtcv-toggle-right { right: 2px; }
  #mtcv-left-panel.collapsed  { width: 0 !important; min-width: 0 !important; overflow: hidden; padding: 0 !important; border: none !important; }
  #mtcv-right-panel.collapsed { width: 0 !important; min-width: 0 !important; overflow: hidden; padding: 0 !important; border: none !important; }
  #mtcv-left-panel.collapsed > *,
  #mtcv-right-panel.collapsed > * { display: none !important; }

  /* ── Mask overlay ────────────────────────────────────────── */
  .mtcv-mask-overlay { image-rendering: pixelated; }

  /* ── Responsive: collapse side panels on small screens ─────── */
  @media (max-width: 900px) {
    #mtcv-left-panel  { width: 180px !important; min-width: 140px !important; }
    #mtcv-right-panel { width: 200px !important; min-width: 160px !important; }
  }
  @media (max-width: 680px) {
    #mtcv-left-panel, #mtcv-right-panel { display: none !important; }
  }

/* ---- D5 inline style extraction from apps/templates/modals/multitemporal_comparison_viewer.html ---- */
#mtcv-pair-info { max-width:400px; }
#mtcv-selection-phase { overflow:auto; }
#mtcv-ref-image { max-height:50vh; object-fit:contain; }
#mtcv-algorithm-select { width:auto; }
#mtcv-init-threshold { width:90px; }
#mtcv-init-threshold-val { min-width:2rem; }
#mtcv-viewer-phase { overflow:hidden; min-height:0; }
#mtcv-threshold-slider { width:110px; }
#mtcv-threshold-val { min-width:2rem; }
#mtcv-fade-opacity { width:90px; }
#mtcv-algo-row { border-bottom:1px solid var(--border-subtle); background:var(--surface-0); flex-shrink:0; }
#mtcv-processing-overlay { top:0; bottom:0; left:0; background:rgba(255,255,255,0.88); z-index:20; }
#mtcv-left-panel { width:220px; min-width:180px; max-width:260px; background:var(--surface-1); overflow:hidden; flex-shrink:0; transition:width 0.2s ease; }
#mtcv-filter-algo { flex:1; }
#mtcv-sort-detections { width:auto; }
#mtcv-btn-export-csv { font-size:0.7rem; padding:1px 6px; }
#mtcv-viewer-container { overflow:hidden; background:#1a1a1a; min-width:0; }
#mtcv-slider-tab { overflow:hidden; }
#mtcv-img-comparison-slider { width:100%; height:100%; }
#mtcv-slider-img1 { width:100%; height:100%; object-fit:contain; }
#mtcv-slider-img2 { width:100%; height:100%; object-fit:contain; }
#mtcv-slider-bbox-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:5; }
#mtcv-slider-mask-overlay { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:4; opacity:0.7; object-fit:contain; }
#mtcv-fade-tab { overflow:hidden; }
#mtcv-fade-img-base { width:100%; height:100%; object-fit:contain; }
#mtcv-fade-img-overlay { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.5; object-fit:contain; }
#mtcv-fade-bbox-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:5; }
#mtcv-fade-mask-overlay { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:4; opacity:0.7; object-fit:contain; }
#mtcv-split-tab { overflow:hidden; }
#mtcv-split-img1 { width:100%; height:100%; object-fit:contain; }
#mtcv-split-bbox-svg1 { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:5; }
#mtcv-split-mask-overlay1 { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:4; opacity:0.7; object-fit:contain; }
#mtcv-split-img2 { width:100%; height:100%; object-fit:contain; }
#mtcv-split-bbox-svg2 { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:5; }
#mtcv-split-mask-overlay2 { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:4; opacity:0.7; object-fit:contain; }
#mtcv-center-empty { pointer-events:none; }
#mtcv-right-panel { width:240px; min-width:200px; max-width:280px; background:var(--surface-1); overflow:hidden; flex-shrink:0; transition:width 0.2s ease; }
#mtcv-detail-content { overflow:hidden; height:100%; }
#mtcv-crop-before { width:100%; max-height:100px; object-fit:contain; }
#mtcv-crop-after { width:100%; max-height:100px; object-fit:contain; }
/* Nested event-preview modal rides one tier above the fullscreen parent
   (Bootstrap modal 1055): backdrop on the raised-map-chrome rung, dialog on
   the map-popover rung — preserves the original 1064/1065 ordering. */
#mtcvEventPreviewModal { z-index: var(--z-map-popover, 1070); }
#mtcv-event-preview-img { max-width:100%; max-height:300px; object-fit:contain; }
#mtcv-event-preview-crosshair { pointer-events:none; z-index:2; }
#mtcv-event-preview-backdrop { z-index: var(--z-map-chrome-raised, 1060); }