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

/* ---- extracted from apps/templates/modals/image_modal.html ---- */
/* [REMOVAL-1226] DS migration: raw z-index -> --z-* ladder tokens. */

/* =====================================================================
   RGB Image Viewer — viewer-scoped design tokens (2026-06-28 visual refresh)
   Maps the DS palette tokens onto viewer-local surface names so all
   component rules below consume tokens, not raw hex.  The accent tokens
   hook into the active DS palette so the viewer stays theme-safe.
   ===================================================================== */
#imageModal {
  --accent-ink:       var(--accent-active, var(--accent));   /* accent fg on soft bg */
  /* viewer-local surfaces */
  --win-bg:           #eef2f6;
  --win-header:       #e7edf2;
  --win-border:       #d7dfe8;
  --win-text:         #0f2c3a;
  --win-muted:        #67788a;
  --chip-bg:          #dde5ed;
  --divider:          #d9e0e8;
  --btn-hover:        #dde5ee;
  --btn-color:        #566879;
  --canvas-bg:        #0b1b2b;
  --status-bg:        #e9eef3;
  --tb-btn:           38px;
}

    /* body {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    } */


    .image-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 60%; /* Calculate the height based on the width */
      /* height: 100%; */
      overflow: hidden;
    }

    .image-wrapper img {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover; /* Set the background size to cover the container */
        background-position: center; /* Set the background position to center */
    }


    .zoomed {
        cursor: zoom-out;
    }

    img {
      max-width: 100%;
      max-height: 100%;
    }



    /* Legacy button styles - kept for compatibility but not used in new sidebar design */
    .buttons {
      display: flex;
      justify-content: center;
      margin: 0 auto;
    }

    .buttons button {
      cursor: pointer;
    }

    .buttons button i {
      display: block;
      margin: 0 auto;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      color: white;
    }

    .modal-body .image-wrapper {
      position: relative;
    }

    .modal-body .buttons {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px 20px;
      background-color: var(--dark-2);
    }

    /* [REMOVAL-1118] Wave-3 viewers re-sequence: the RGB Image Viewer modal is
       re-skinned into the DS dark viewer shell (matches viewers.css .vw family).
       Structure, every control id and the #openseadragon-annotations stage are
       unchanged so image-handler.js behavior (OSD, measure, annotations, VARI,
       north-up) keeps working. Legacy Bootstrap hex literals migrated to
       aerosophia-ds.css --dark-* tokens. */
    /* [REMOVAL-1514] Dark-chrome shell (#dark-1 bg, white-alpha borders, dark
       text) replaced by soft cool-grey light panel per 2026-06-28 visual refresh.
       All dark-* token literals moved to token block above (#imageModal {...}). */
    #imageModal .modal-content{
      background:var(--win-bg); color:var(--win-text);
      border:1px solid var(--win-border); border-radius:14px; overflow:hidden;
      box-shadow:0 24px 60px -18px rgba(8,22,38,.45),0 4px 14px rgba(8,22,38,.12);
    }
    #imageModal .modal-header{
      border-bottom:1px solid var(--win-border); padding:11px 16px;
    }
    #imageModal .imageModal-title{ color:var(--win-text); font-size:14px; font-weight:600; font-family:var(--font-mono); }
    #imageModal .modal-header .close{ color:var(--btn-color); text-shadow:none; opacity:1; background:none; border:none; }
    #imageModal .modal-header .close:hover{ color:var(--win-text); }
    #imageModal .card{ background:transparent; border:none; box-shadow:none; }
    #imageModal .card-body{ background:transparent; }

    .modal-body .buttons button {
      float: left;
      margin-right: 10px;
    }

    .modal-body .buttons .previous-image {
      float: left;
      margin-right: 10px;
    }

    .modal-body .buttons .next-image {
      float: right;
    }

    .modal-body .buttons .previous-image i,
    .modal-body .buttons .next-image i {
      font-size: 2em;
    }
    
    /* Hide old footer buttons since they're now in sidebar */
    .card-footer {
      display: none !important;
    }

    .modal-body .loading-div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: var(--dark-0);
      opacity: 0.5;
      border-radius: 50%;
      text-align: center;
      padding-top: 20px;
      z-index:var(--z-sidepanel);
    }

    @media (max-width: 768px) {
      .dataTables_wrapper {
        width: 100%;
      }
      .dataTables_scrollHead {
        display: none;
      }
      .dataTables_scrollFoot {
        display: none;
      }
    }
    #openseadragon-annotations {
          cursor: grab;
          /* [REMOVAL-1515] --dark-0 canvas bg → viewer token --canvas-bg per 2026-06-28 refresh */
          background: var(--canvas-bg);
      }
    
    /* Compass overlay for north direction */
    /* [REMOVAL-1543] Compass overlay: 60×60 → 58×58 dial + room for north-up button */
    /* [REMOVAL-1557] width:58px → width:max-content + right:15px → right:24px (FIX C Correction
       Round 1): the North-up pill is wider than 58px so a fixed 58px width clipped its
       right edge against the viewer border. */
    /* [REMOVAL-1560] width:auto → width:max-content: on a right-anchored absolutely-positioned
       flex column, auto width did not reliably shrink-wrap to the pill, so the 58px dial was
       not centering over the wider pill. max-content hugs the widest child (the pill) so
       align-items:center centers the dial directly above it. */
    /* [REMOVAL-1561] Removed fixed height:100px (→ auto) so the column sizes to its content,
       and gap:9px → gap:14px for clearer vertical separation between the dial and the
       North-up pill. */
    /* [REMOVAL-1563] gap:14px → gap:20px for more vertical space between dial and pill. */
    .wm-compass-overlay {
      position: absolute;
      top: 15px;
      right: 24px;
      width: max-content;
      height: auto;
      z-index: var(--z-sidepanel);
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    
    /* [REMOVAL-1516] Compass dial: --surface-0 bg + CSS triangle needle +
       .wm-compass-label as text replaced by redesigned soft grey dial with
       inline two-tone SVG needle and N/S labels per 2026-06-28 refresh. */
    /* [REMOVAL-1562] Added margin-left/right:auto: flex auto-margins center a flex item
       regardless of align-items, forcing the 58px dial to sit centered within the overlay's
       max-content width (= the pill width), i.e. directly above the pill's center. */
    .wm-compass-container {
      position: relative;
      width: 58px;
      height: 58px;
      flex-shrink: 0;
      margin-left: auto;
      margin-right: auto;
      background: #eef2f6;
      border: 1px solid #d7dfe8;
      border-radius: 50%;
      box-shadow: 0 6px 18px rgba(8,22,38,.18);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* N label */
    .wm-compass-container::before {
      content: "N";
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 8.5px;
      font-weight: 700;
      color: #67788a;
      letter-spacing: .06em;
      line-height: 1;
      z-index: 3;
      pointer-events: none;
    }
    /* S label */
    .wm-compass-container::after {
      content: "S";
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 8.5px;
      font-weight: 700;
      color: #9aa9b8;
      letter-spacing: .06em;
      line-height: 1;
      z-index: 3;
      pointer-events: none;
    }

    /* [REMOVAL-1544] Compass needle: position:relative flex-child → position:absolute
       centered in the dial via top/left 50% so JS translate(-50%,-50%) lands it at
       the exact dial center and the rotation pivots about the needle midpoint. */
    .wm-compass-needle {
      display: block;
      width: 18px;
      height: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: 50% 50%;
      z-index: 2;
    }

    /* [REMOVAL-1517] .wm-compass-label "N" text element replaced by
       ::before/::after pseudo on the container; element kept in DOM for
       backwards-compat but visually hidden. */
    .wm-compass-label {
      display: none;
    }

    .wm-compass-north-up-btn {
      pointer-events: auto;
    }

    /* [REMOVAL-1518] Compass north-up button: white/border/radius:4px pill
       replaced by accent-filled pill matching the design handoff. */
    .wm-compass-north-up-btn {
      display: inline-flex !important;
      align-items: center;
      gap: 7px;
      height: 32px;
      padding: 0 13px !important;
      border: none !important;
      border-radius: 8px !important;
      background: var(--accent) !important;
      color: #fff !important;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(8,22,38,.2);
      white-space: nowrap;
      /* Position is now controlled by the flex overlay container */
      position: static;
      transform: none;
      font-family: var(--font);
      z-index: 1001;
      pointer-events: auto;
    }

    .wm-compass-north-up-btn:hover {
      background: var(--accent-hover, var(--accent)) !important;
      box-shadow: 0 2px 8px rgba(8,22,38,.28);
    }

    .wm-compass-north-up-btn.active {
      background: var(--accent) !important;
      color: #fff !important;
    }

    .north-up.active {
      background-color: var(--accent-soft);
      color: var(--accent-ink);
    }
    
    /* Sidebar Styles */
    /* [REMOVAL-1519] Sidebar: --dark-1 bg + white-alpha border → viewer-local
       --win-bg surface token per 2026-06-28 refresh. */
    .image-modal-sidebar {
      width: 210px;
      min-width: 200px;
      background-color: var(--win-bg);
      border-right: 1px solid var(--win-border);
      display: flex;
      flex-direction: column;
      transition: all 0.3s ease;
      overflow: hidden;
    }

    .image-modal-sidebar.collapsed {
      width: 55px;
      min-width: 55px;
    }

    /* [REMOVAL-1520] Sidebar header: --dark-2 bg + white-alpha border → viewer tokens. */
    .sidebar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background-color: var(--win-header);
      border-bottom: 1px solid var(--win-border);
    }

    .sidebar-header h6 {
      margin: 0;
      font-size: 0.9rem;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--win-text);
    }

    .image-modal-sidebar.collapsed .sidebar-header h6 {
      display: none;
    }

    .sidebar-header button {
      color: var(--btn-color);
      font-size: 18px;
      border: none !important;
      text-decoration: none !important;
      box-shadow: none !important;
      background: transparent !important;
      padding: 0 !important;
      margin: 0;
      transition: transform 0.3s ease;
    }

    .sidebar-header button:hover {
      color: var(--win-text);
      text-decoration: none !important;
      border: none !important;
    }

    .sidebar-header button:focus {
      box-shadow: none !important;
      outline: none !important;
    }

    .sidebar-header button i {
      transition: transform 0.3s ease;
      display: inline-block;
    }

    .image-modal-sidebar.collapsed .sidebar-header button i {
      transform: rotate(180deg) !important;
    }

    .sidebar-content {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }

    .sidebar-buttons {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    /* [REMOVAL-1521] Sidebar button: dark-chrome colors → viewer tokens per 2026-06-28 refresh */
    .sidebar-button {
      display: flex !important;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 10px 10px;
      background-color: transparent;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: left;
      font-size: 0.9rem;
      color: var(--btn-color);
    }

    .sidebar-button:hover {
      background-color: var(--btn-hover);
      border-color: var(--win-border);
      color: var(--win-text);
    }

    .sidebar-button:active {
      transform: translateX(0);
    }

    /* QA Analysis_04_06_2026 BUG-032 / BUG-033: the base .sidebar-button rule
       uses `display: flex !important`, which silently defeated the JS that
       hides context-specific buttons via `el.style.display = 'none'`
       (e.g. _hideOverlayControls() for the Plant Health Index overlay and the
       Show-Original / TIFF-crop toggle). As a result those buttons stayed
       visible on raw drone images where they do nothing. This higher-specificity
       rule lets the inline `display:none` win again so the hide logic works. */
    .image-modal-sidebar .sidebar-button[style*="display: none"],
    .image-modal-sidebar .sidebar-button[style*="display:none"] {
      display: none !important;
    }

    .sidebar-button.active {
      background-color: var(--accent-soft);
      border-color: var(--accent);
      color: var(--accent-ink);
    }

    .sidebar-button i {
      font-size: 18px;
      min-width: 20px;
      text-align: center;
    }
    
    .sidebar-button .button-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .image-modal-sidebar.collapsed .sidebar-button {
      justify-content: center;
      padding: 10px;
    }
    
    .image-modal-sidebar.collapsed .sidebar-button .button-text {
      display: none;
    }
    
    .image-modal-sidebar.collapsed .sidebar-button i {
      margin: 0;
    }
    
    .image-viewer-container {
      transition: all 0.3s ease;
    }
    
    /* Active state for buttons */
    .sidebar-button.active,
    .north-up.active {
      background-color: var(--accent-soft);
      border-color: var(--accent);
      color: var(--accent-ink);
    }
    
    /* Scrollbar styling for sidebar */
    /* [REMOVAL-1522] Scrollbar: white-alpha colors → neutral viewer border tones */
    .sidebar-content::-webkit-scrollbar {
      width: 6px;
    }

    .sidebar-content::-webkit-scrollbar-track {
      background: transparent;
    }

    .sidebar-content::-webkit-scrollbar-thumb {
      background: var(--win-border);
      border-radius: 3px;
    }

    .sidebar-content::-webkit-scrollbar-thumb:hover {
      background: var(--win-muted);
    }

    /* Group label separators */
    /* [REMOVAL-1523] Group labels: --dark-muted + white-alpha border → viewer tokens */
    .sidebar-group-label {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--win-muted);
      padding: 8px 10px 2px;
      margin-top: 4px;
      border-top: 1px solid var(--divider);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sidebar-buttons .sidebar-group-label:first-child {
      margin-top: 0;
      border-top: none;
    }
    .image-modal-sidebar.collapsed .sidebar-group-label {
      font-size: 0;
      padding: 0;
      margin: 4px 10px 0;
      border-top: 1px solid var(--divider);
      height: 0;
      overflow: hidden;
    }

    /* Brightness / Contrast inline panel */
    /* [REMOVAL-1524] BC panel: dark-chrome tokens → viewer-local light tokens */
    .bc-adjust-panel {
      display: none;
      padding: 8px 10px;
      background: var(--win-header);
      border-radius: 8px;
      border: 1px solid var(--win-border);
    }
    .bc-adjust-panel.visible { display: block; }
    .bc-adjust-panel label {
      font-size: 0.78rem;
      color: var(--win-muted);
      margin-bottom: 2px;
      display: flex;
      justify-content: space-between;
    }
    .bc-adjust-panel input[type="range"] {
      width: 100%;
      margin-bottom: 6px;
      accent-color: var(--accent);
    }
    .bc-adjust-panel .bc-reset-btn {
      font-size: 0.75rem;
      padding: 2px 8px;
      cursor: pointer;
      background: var(--btn-hover);
      border: 1px solid var(--win-border);
      border-radius: 6px;
      color: var(--win-text);
    }
    .bc-adjust-panel .bc-reset-btn:hover { background: var(--chip-bg); }
    .image-modal-sidebar.collapsed .bc-adjust-panel { display: none !important; }

    /* Image info overlay */
    /* [REMOVAL-1525] Info overlay: black bg + white-alpha border/text → viewer
       light panel tokens. Overlay sits on the dark canvas so it still reads. */
    .image-info-overlay {
      display: none;
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(238,242,246,.96);
      color: var(--win-text);
      font-family: var(--font-mono);
      font-size: 12px;
      padding: 12px 16px;
      border-radius: 10px;
      z-index: var(--z-sidepanel);
      min-width: 220px;
      max-width: 320px;
      pointer-events: auto;
      border: 1px solid var(--win-border);
      box-shadow: 0 6px 18px rgba(8,22,38,.18);
    }
    .image-info-overlay.visible { display: block; }
    .image-info-overlay .info-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 2px 0;
    }
    .image-info-overlay .info-label { color: var(--win-muted); }
    .image-info-overlay .info-value { color: var(--win-text); text-align: right; }
    .image-info-overlay .info-title {
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 6px;
      color: var(--win-text);
      border-bottom: 1px solid var(--divider);
      padding-bottom: 4px;
    }
    .image-info-overlay .info-close {
      position: absolute;
      top: 6px;
      right: 8px;
      background: none;
      border: none;
      color: var(--win-muted);
      cursor: pointer;
      font-size: 14px;
      padding: 2px 4px;
    }
    .image-info-overlay .info-close:hover { color: var(--win-text); }

    /* =====================================================================
       [REMOVAL-1158] Image Viewer re-skin -> Point Cloud Viewer parity.
       The Bootstrap #imageModal harness is preserved (modal('show') and all
       shown/hidden.bs.modal hooks keep firing) and every control id plus the
       #openseadragon-annotations stage are unchanged. This block restyles the
       modal into a draggable floating WINDOW: the former left vertical sidebar
       is re-laid-out as a horizontal grouped toolbar, the header becomes a
       window title bar (event context + prev/next stepper + pop-out / minimize
       / close) and a bottom status strip is added. No new hex literals: DS
       --dark-* / --accent tokens and the file's existing rgba() translucency
       are reused.
       ===================================================================== */
    /* window shell + lighter backdrop while the viewer is open */
    body.iv-open .modal-backdrop.show { opacity: .32; }
    /* (shadow + border now come from the token-driven .modal-content rule above) */

    /* title bar (window chrome) */
    /* [REMOVAL-1526] Title bar: dark-chrome gradient bg + white-alpha rules →
       viewer token --win-header surface per 2026-06-28 refresh. */
    #imageModal .iv-titlebar {
      display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px;
      min-height: 54px; cursor: grab;
      background: var(--win-header);
      border-bottom: 1px solid var(--win-border);
    }
    #imageModal .iv-titlebar.iv-dragging { cursor: grabbing; }
    /* [REMOVAL-1527] Left accent rail ::before removed; replaced by the icon tile */
    #imageModal .iv-tb-icon {
      width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft);
      color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    }
    #imageModal .iv-tb-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    #imageModal .imageModal-title { white-space: nowrap; flex: 0 0 auto; font-size: 14.5px; font-weight: 600; color: var(--win-text); font-family: var(--font-mono); }
    #imageModal .iv-tb-ctx {
      display: flex; align-items: center; gap: 7px; min-width: 0;
      padding-left: 12px; border-left: 1px solid var(--divider);
    }
    #imageModal .iv-ctx-sev {
      width: 9px; height: 9px; border-radius: 50%; background: var(--danger-500);
      box-shadow: 0 0 0 3px rgba(220,38,38,.18); flex: 0 0 auto;
    }
    #imageModal .iv-ctx-meta {
      font-size: 11px; color: var(--win-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #imageModal .iv-tb-step { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; margin-left: 4px; }
    #imageModal .iv-tb-step button {
      width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--win-border);
      background: var(--win-bg); color: var(--btn-color);
      display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    }
    #imageModal .iv-tb-step button:hover { background: var(--btn-hover); color: var(--win-text); }
    #imageModal .iv-tb-step button:disabled { opacity: .35; cursor: default; }
    #imageModal .iv-tb-step button svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
    #imageModal .iv-tb-step .iv-step-pos {
      font-size: 11.5px; color: var(--win-muted); padding: 0 5px; font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    #imageModal .iv-tb-spacer { flex: 1; }
    #imageModal .iv-tb-ctl {
      width: 34px; height: 34px; padding: 0; margin: 0; flex: 0 0 auto; box-sizing: border-box;
      border-radius: 8px; border: none; background: none; color: var(--btn-color);
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      opacity: 1; text-shadow: none; font-size: 18px; line-height: 1;
    }
    #imageModal .iv-tb-ctl:hover { background: var(--btn-hover); color: var(--win-text); }
    /* [REMOVAL-1979] Legacy BS4 .close class dropped from the viewer close
       button — the .iv-tb-ctl--close modifier carries the overrides. */
    /* [REMOVAL-1528] Close hover: --danger-500 fill → soft red #fdecec/#e0524d per refresh */
    #imageModal .iv-tb-ctl--close:hover { background: #fdecec; color: #e0524d; }
    #imageModal .iv-tb-ctl svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    #imageModal .iv-tb-ctl--close { margin: 0; padding: 0; float: none; }

    /* card body becomes a vertical stack: toolbar / viewport / status */
    #imageModal .card-body { flex-direction: column; }

    /* horizontal toolbar (formerly the left vertical sidebar) */
    /* [REMOVAL-1529] Toolbar border: white-alpha → viewer token --win-border */
    #imageModal #image-modal-sidebar.image-modal-sidebar {
      width: 100%; min-width: 0; flex-direction: row; overflow: visible;
      border-right: none; border-bottom: 1px solid var(--win-border); position: relative;
      background: var(--win-bg);
    }
    #imageModal #image-modal-sidebar .sidebar-header { display: none; }
    #imageModal #image-modal-sidebar .sidebar-content {
      flex: 1; flex-direction: row; flex-wrap: wrap; overflow: visible; padding: 6px 12px;
    }
    #imageModal #image-modal-sidebar .sidebar-buttons {
      flex-direction: row; flex-wrap: wrap; align-items: center; gap: 3px;
    }
    #imageModal #image-modal-sidebar .sidebar-button { width: auto; gap: 7px; padding: 0; font-size: .82rem;
      width: var(--tb-btn); height: var(--tb-btn); justify-content: center; border-radius: 8px; }
    #imageModal #image-modal-sidebar .sidebar-button .button-text { display: none; }
    /* [REMOVAL-1554] #activate-annotations ("Create manual event") no longer painted
       blue unconditionally. It is now a plain 38px toolbar icon button (transparent bg,
       --btn-color icon) matching its map-pin/info/help neighbors, and turns accent-soft
       only when the tool is active (.active class toggled by image-handler.js). FIX A. */
    /* keep the label on the annotation-mode CTA so it reads as a CTA */
    #imageModal #hide-annotations .button-text { display: inline; }
    #imageModal #activate-annotations.active { background: var(--accent-soft); color: var(--accent-ink); }
    #imageModal #activate-annotations.active svg,
    #imageModal #activate-annotations.active i { color: var(--accent-ink); }
    #imageModal #hide-annotations { border: 1px solid var(--win-border); width: auto; padding: 0 12px; }
    /* inline group labels become thin vertical dividers */
    /* [REMOVAL-1530] Group labels in toolbar: white-alpha left border → --divider token */
    #imageModal #image-modal-sidebar .sidebar-group-label {
      border-top: none; border-left: none;
      background: none; width: 1px; height: 26px; padding: 0; margin: 0 4px;
      font-size: 0; align-self: center; overflow: hidden;
      background: var(--divider);
    }
    #imageModal #image-modal-sidebar .sidebar-buttons .sidebar-group-label:first-child { display: none; }
    /* brightness / contrast inline panel floats as a popover under the toolbar */
    #imageModal #bc-adjust-panel.bc-adjust-panel {
      position: absolute; top: calc(100% + 4px); right: 12px; width: 230px; z-index: var(--z-sidepanel);
      box-shadow: 0 12px 30px rgba(8,22,38,.18);
    }

    /* bottom status strip */
    /* [REMOVAL-1531] Status strip: --dark-0 bg + white-alpha rules → viewer token --status-bg */
    #imageModal .iv-status-strip {
      display: flex; align-items: center; height: 40px; padding: 0 14px; flex: 0 0 auto;
      background: var(--status-bg); border-top: 1px solid var(--win-border); color: var(--win-muted); font-size: 12px;
    }
    #imageModal .iv-status-strip .iv-stat {
      display: flex; align-items: center; gap: 8px; padding: 0 12px;
      border-right: 1px solid var(--divider); white-space: nowrap;
    }
    #imageModal .iv-status-strip .iv-stat:first-child { padding-left: 0; }
    #imageModal .iv-status-strip .iv-stat i { font-size: 13px; color: var(--win-muted); }
    #imageModal .iv-status-strip .iv-stat b { color: var(--win-text); font-weight: 500; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12px; }
    #imageModal .iv-status-strip .iv-stat-spacer { flex: 1; border: none; padding: 0; }
    #imageModal .iv-status-strip .iv-stat:empty { display: none; }

    /* Warning chip in status strip (shown when measurement unavailable) */
    #imageModal #iv-stat-measure {
      display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px;
      border-radius: 7px; background: rgba(196,129,46,.12); color: #a96a1f;
      font-size: 12px; font-weight: 500; border: none;
    }
    #imageModal #iv-stat-measure:empty { display: none; }

    /* Geo coords — accent dot + muted mono coords */
    #imageModal #iv-stat-geo-wrap { border-right: none; }
    #imageModal #iv-stat-geo-wrap::before {
      content: ""; display: inline-block; width: 8px; height: 8px;
      border-radius: 50%; background: var(--accent); flex-shrink: 0;
    }
    #imageModal #iv-stat-geo { font-family: var(--font-mono); font-size: 12px; color: var(--win-muted); }

    /* minimized window collapses to the title bar */
    #imageModal .modal-content.iv-min .card { display: none; }

    /* Inline SVG inside toolbar buttons — size + color inheritance */
    #imageModal #image-modal-sidebar .sidebar-button svg {
      width: 19px; height: 19px; fill: none; stroke: currentColor;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
      flex-shrink: 0;
    }

    /* Zoom chip in toolbar (zoom percentage display) */
    #imageModal .iv-zoom-chip {
      display: inline-flex; align-items: center; justify-content: center;
      height: 30px; min-width: 58px; padding: 0 10px;
      border-radius: 7px; background: var(--chip-bg);
      font-family: var(--font-mono); font-size: 12px; font-weight: 500;
      color: var(--win-text); flex-shrink: 0; user-select: none;
    }

    /* [FIX 3 / Correction Round 1 2026-06-28] Ensure SVG icons inside toolbar
       buttons are optically centered and inherit stroke color from the button. */
    #imageModal #image-modal-sidebar .sidebar-button svg {
      display: block; flex-shrink: 0;
    }

    /* Red clear-measurements button hover */
    #imageModal #measure-clear:hover {
      background: #fdecec !important;
      color: #d8443e !important;
    }
    #imageModal #measure-clear {
      color: #c2675f;
    }

    /* [REMOVAL-1556] .iv-measure-btn combined-CTA treatment removed (FIX B Correction Round 1):
       #measure-distance is now a plain icon-only button like its neighbors. */
    /* [REMOVAL-1559] .iv-measure-label rule removed — the leading "Measure" text label
       was dropped per user review; the measure tools are icon-only. */

/* ---- extracted from apps/templates/modals/image_modal_old.html ---- */
/* [REMOVAL-1227] DS migration: raw z-index -> --z-* ladder tokens. */

    /* body {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    } */


    .image-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 60%; /* Calculate the height based on the width */
      /* height: 100%; */
      overflow: hidden;
    }

    .image-wrapper img {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover; /* Set the background size to cover the container */
        background-position: center; /* Set the background position to center */
    }


    .zoomed {
        cursor: zoom-out;
    }

    img {
      max-width: 100%;
      max-height: 100%;
    }



    .buttons {
      display: flex;
      justify-content: center;
      margin: 0 auto;
    }

    .buttons button {
      /* width: 40px;
      height: 40px;
      border-radius: 5px;
      background-color: transparent;
      color: blue;
      font-size: 18px;
      font-weight: 500; */
      cursor: pointer;
    }

    .buttons button i {
      display: block;
      margin: 0 auto;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      /* background-color: transparent; */
      color: white;
    }

    .modal-body .image-wrapper {
      position: relative;
    }

    .modal-body .buttons {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px 20px;
      background-color: var(--dark-2);
    }

    /* Dashboard quick-image preview re-skinned into the DS dark viewer shell
       so it matches the working-map RGB Image Viewer (aerosophia-ds.css
       --dark-* tokens). Structure and ids are unchanged so the lightweight
       Panzoom preview on #image-area keeps working. */
    #imageModal .modal-content{
      background:var(--dark-1); color:var(--dark-text);
      border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden;
    }
    #imageModal .modal-header{
      border-bottom:1px solid rgba(255,255,255,.1); padding:11px 16px;
    }
    #imageModal .imageModal-title{ color:var(--text-inverse); font-size:14px; font-weight:800; }
    #imageModal .modal-header .close{ color:var(--dark-muted); text-shadow:none; opacity:1; background:none; border:none; }
    #imageModal .modal-header .close:hover{ color:var(--text-inverse); }
    #imageModal .card{ background:transparent; border:none; box-shadow:none; }
    #imageModal .card-body{ background:var(--dark-0); }
    #imageModal .card-footer{ background:var(--dark-2); border-top:1px solid rgba(255,255,255,.1); }
    #imageModal .card-footer .custom-icon-button{ color:var(--dark-text); background:transparent; border:none; }
    #imageModal .card-footer .custom-icon-button:hover{ color:var(--text-inverse); }

    .modal-body .buttons button {
      float: left;
      margin-right: 10px;
    }

    .modal-body .buttons .previous-image {
      float: left;
      margin-right: 10px;
    }

    .modal-body .buttons .next-image {
      float: right;
    }

    .modal-body .buttons .previous-image i,
    .modal-body .buttons .next-image i {
      font-size: 2em;
    }

    .modal-body .loading-div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: var(--dark-0);
      opacity: 0.5;
      border-radius: 50%;
      text-align: center;
      padding-top: 20px;
      z-index:var(--z-sidepanel);
    }

    @media (max-width: 768px) {
      .dataTables_wrapper {
        width: 100%;
      }
      .dataTables_scrollHead {
        display: none;
      }
      .dataTables_scrollFoot {
        display: none;
      }
    }

/* ---- D5 inline style extraction from apps/templates/modals/image_modal.html ---- */
#imageModalLabel { margin:0; }
#measure-clear { color:#c2675f; }
#measure-approx-wrap { margin-top:6px; }
#measure-approx-altitude { width:90px; }
#openseadragon-annotations { width: 100%; flex: 1; min-height: 0; }
#iv-stat-geo-wrap { border-right:none; margin-left:auto; }

/* ---- D5 inline style extraction from apps/templates/modals/image_modal_old.html ---- */
#modal-nav-btns { width: 10%; }