/* ═══════════════════════════════════════════════════════════════
   VERSIONARY — Tool panels light-mode overrides

   The delivered tool-panel templates are dark-only (inline styles
   with rgba(255,255,255,x) text on rgba(19,19,24,0.95) surface).
   These rules override the inline styles when body.dark-mode is
   absent (simple view + daytime). Values mirror the light palette
   from glass-modals.css so the panels sit in the same visual family
   as the modal system.

   Uses !important because inline styles otherwise win specificity.
   Ugly but pragmatic — restructuring the delivered template to use
   classes would create merge conflicts with future designer deliveries.

   Wrapper: .reframe-panel-root (added by reframePanel.js). All
   selectors are additionally scoped to `#verneSliderPanel .*` so
   that pipeline view — which mounts the same panel outside the
   simple-view sidebar — is NEVER affected. Pipeline canvas is
   always dark; body.dark-mode is time-based; without this scoping
   a daytime pipeline session would render a light panel on the
   dark canvas.

   Future tool panels should use their own analogous wrapper
   (.batch-panel-root, .titles-panel-root, etc.) and get their own
   overrides here, all scoped inside #verneSliderPanel.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- REFRAME PANEL — light mode ---------- */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root {
    background: rgba(255,255,255,0.7) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
}

/* Header strip */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root .reframe-panel-head {
    background: rgba(0,0,0,0.02) !important;
    border-bottom-color: rgba(0,0,0,0.05) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_shotLabel {
    color: rgba(0,0,0,0.3) !important;
}

/* Format tabs — inactive text */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root .reframe-tabs {
    background: rgba(0,0,0,0.02) !important;
    border-color: rgba(0,0,0,0.05) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root .reframe-tabs > div[style*="transparent"] {
    color: rgba(0,0,0,0.35) !important;
}

/* Labels ("Pan", "Zoom") */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root .reframe-label {
    color: rgba(0,0,0,0.6) !important;
}

/* Pad lock chip — resting */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_padLockBtn {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_padLockLabel {
    color: rgba(0,0,0,0.35) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_padLockIcon {
    stroke: rgba(0,0,0,0.35) !important;
}
/* When lock is toggled to free, the JS sets green stroke/text inline —
   don't override that; only override the resting state above. */

/* X/Y readouts at rest */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_padXVal,
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_padYVal {
    color: rgba(0,0,0,0.35) !important;
}
/* Active X/Y (JS sets #7c6aef) — leave alone, purple reads fine on both bgs */

/* Pan pad surface */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_panPad {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root .reframe-pad-grid {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root .reframe-pad-hline {
    background: rgba(124,106,239,0.15) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root .reframe-pad-vline {
    background: rgba(124,106,239,0.1) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root .reframe-pad-bar {
    background: rgba(124,106,239,0.1) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root .reframe-pad-edge {
    color: rgba(0,0,0,0.2) !important;
}
/* Pan dot — the purple circle. Its border was rgba(255,255,255,0.2) on dark;
   swap to a light border with a subtle dark ring so it doesn't disappear on light bg. */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_panDot {
    border-color: rgba(255,255,255,0.9) !important;
    box-shadow: 0 0 10px rgba(124,106,239,0.4), 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* Zoom slider */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_zVal {
    color: rgba(0,0,0,0.35) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_zTrack {
    background: rgba(0,0,0,0.05) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_zFill {
    background: linear-gradient(90deg, rgba(124,106,239,0.35), rgba(124,106,239,0.1)) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_zThumb {
    border-color: #f4f4f6 !important;
    box-shadow: 0 0 6px rgba(124,106,239,0.35), 0 1px 3px rgba(0,0,0,0.15) !important;
}
/* 100% / 150% zoom track edge labels */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_zTrack ~ div > span {
    color: rgba(0,0,0,0.3) !important;
}

/* Reset button */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_resetBtn {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: rgba(0,0,0,0.55) !important;
}
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_resetBtn:hover {
    background: rgba(0,0,0,0.07) !important;
}

/* Apply button — the purple call-to-action. Keep as-is; #7c6aef on white
   still holds contrast (AA on white is ~3.5:1 which is borderline, but the
   white text over #7c6aef is 4.5+). The delivered box-shadow already
   works on light. */

/* Override status — inactive resting state */
body:not(.dark-mode) #verneSliderPanel .reframe-panel-root #reframe_overrideStatus:not([style*="color: rgb(251, 191, 36)"]) {
    color: rgba(0,0,0,0.35) !important;
}