/* ─────────────────────────────────────────────────────────────────────────
   Mol* light-mode overrides — SHARED across every page that embeds a viewer
   (/app, /leaderboard, /run).

   Why this file exists: molstar-dark.css hardcodes dark hex values (#0c0d11,
   #111318, #1f222b, #0d1222) deep inside the plugin's chrome. Each page used to
   re-patch a handful of those selectors by hand, so light mode was fixed in one
   viewer and broken in another. Put every Mol* light rule HERE, once.

   Load order: after molstar-dark.css (and after the page's own styles).
   Palette: surface #ffffff, panel #f1f5f9, panel-2 #e2e8f0, border #cbd5e1,
            text #0f172a, muted #475569.
   ───────────────────────────────────────────────────────────────────────── */

/* ── shells / viewport ─────────────────────────────────────────────────── */
[data-theme="light"] .msp-plugin,
[data-theme="light"] .msp-plugin .msp-layout-standard,
[data-theme="light"] .msp-viewport,
[data-theme="light"] .msp-layout-main,
[data-theme="light"] .msp-layout-top,
[data-theme="light"] .msp-layout-right,
[data-theme="light"] .msp-layout-bottom { background: #ffffff !important; }

[data-theme="light"] .msp-plugin,
[data-theme="light"] .msp-plugin * { scrollbar-color: #cbd5e1 #f1f5f9; }

/* ── sequence panel (incl. the CONTENT div Mol* paints #0c0d11) ─────────── */
[data-theme="light"] .msp-sequence,
[data-theme="light"] .msp-sequence-wrapper,
[data-theme="light"] .msp-sequence-wrapper-non-empty,
[data-theme="light"] .msp-sequence-select,
[data-theme="light"] .msp-sequence-select > select { background: #f1f5f9 !important; color: #0f172a !important; }
[data-theme="light"] .msp-sequence,
[data-theme="light"] .msp-sequence * { color: #0f172a !important; fill: #0f172a !important; }

/* ── scrollbars inside the plugin ──────────────────────────────────────── */
[data-theme="light"] .msp-plugin ::-webkit-scrollbar,
[data-theme="light"] .msp-plugin ::-webkit-scrollbar-track { background: #f1f5f9 !important; }
[data-theme="light"] .msp-plugin ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 5px; }
[data-theme="light"] .msp-plugin ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }

/* ── viewport buttons (right cluster) ──────────────────────────────────── */
[data-theme="light"] .msp-viewport-controls-buttons .msp-btn,
[data-theme="light"] .msp-viewport-controls-buttons .msp-btn-icon {
  background: #f1f5f9 !important; color: #0f172a !important; border-color: #cbd5e1 !important;
}
[data-theme="light"] .msp-viewport-controls-buttons .msp-btn:hover,
[data-theme="light"] .msp-viewport-controls-buttons .msp-btn-icon:hover { background: #e2e8f0 !important; }

/* ── top-left cluster: trajectory + animation ──────────────────────────────
   `.msp-semi-transparent-background` is a solid dark plate rendered BEHIND the
   (transparent) play/stop button — that's the black square in light mode. */
[data-theme="light"] .msp-viewport-top-left-controls,
[data-theme="light"] .msp-viewport-top-left-controls > div { background: transparent !important; }
[data-theme="light"] .msp-semi-transparent-background { background: #f1f5f9 !important; opacity: .92 !important; }
[data-theme="light"] .msp-viewport-top-left-controls .msp-traj-controls,
[data-theme="light"] .msp-viewport-top-left-controls .msp-state-snapshot-viewport-controls > button,
[data-theme="light"] .msp-viewport-top-left-controls .msp-btn,
[data-theme="light"] .msp-viewport-top-left-controls button {
  background: #f1f5f9 !important; color: #0f172a !important; border-color: #cbd5e1 !important;
}
[data-theme="light"] .msp-viewport-top-left-controls .msp-btn:hover,
[data-theme="light"] .msp-viewport-top-left-controls button:hover { background: #e2e8f0 !important; }
[data-theme="light"] .msp-viewport-top-left-controls svg { fill: #0f172a !important; }
[data-theme="light"] .msp-traj-controls .msp-traj-label,
[data-theme="light"] .msp-traj-controls span,
[data-theme="light"] .msp-traj-controls small { color: #0f172a !important; }

/* ── the Animation popover (Animation / Mode / Duration / Start) ────────── */
[data-theme="light"] .msp-animation-viewport-controls,
[data-theme="light"] .msp-animation-viewport-controls-select,
[data-theme="light"] .msp-animation-viewport-controls-select .msp-control-group-wrapper,
[data-theme="light"] .msp-animation-viewport-controls-select .msp-control-group-header {
  background: #ffffff !important; color: #0f172a !important;
  border: 1px solid #cbd5e1 !important; box-shadow: 0 8px 26px rgba(15,23,42,.12) !important;
}
/* every control row + its inputs */
[data-theme="light"] .msp-plugin .msp-control-row,
[data-theme="light"] .msp-plugin .msp-control-row > button.msp-control-button-label,
[data-theme="light"] .msp-plugin .msp-control-row > span.msp-control-row-label,
[data-theme="light"] .msp-plugin .msp-control-row .msp-control-row-ctrl { background: #f1f5f9 !important; color: #0f172a !important; }
[data-theme="light"] .msp-plugin .msp-control-row select,
[data-theme="light"] .msp-plugin .msp-control-row button,
[data-theme="light"] .msp-plugin .msp-control-row input[type=text],
[data-theme="light"] .msp-plugin .msp-form-control,
[data-theme="light"] .msp-plugin .msp-btn {
  background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .msp-plugin .msp-control-row select:focus,
[data-theme="light"] .msp-plugin .msp-control-row button:focus,
[data-theme="light"] .msp-plugin .msp-control-row input[type=text]:focus,
[data-theme="light"] .msp-plugin .msp-form-control:focus,
[data-theme="light"] .msp-plugin .msp-btn:focus,
[data-theme="light"] .msp-plugin .msp-btn:active {
  background: #e2e8f0 !important; color: #0f172a !important; outline: none !important;
}
[data-theme="light"] .msp-plugin .msp-control-row button[disabled],
[data-theme="light"] .msp-plugin .msp-btn[disabled] { background: #e2e8f0 !important; opacity: .5 !important; }
/* slider / numeric rows */
[data-theme="light"] .msp-plugin .msp-slider > div,
[data-theme="light"] .msp-plugin .msp-slider input[type=text] { background: #ffffff !important; color: #0f172a !important; }
[data-theme="light"] .msp-plugin .msp-slider-base-track { background: #cbd5e1 !important; }
/* generic text + labels anywhere in the plugin chrome */
[data-theme="light"] .msp-plugin .msp-control-label,
[data-theme="light"] .msp-plugin label,
[data-theme="light"] .msp-plugin .msp-help-text,
[data-theme="light"] .msp-plugin .msp-description { color: #0f172a !important; }
[data-theme="light"] .msp-plugin .msp-help-text { background: #f1f5f9 !important; }

/* ── misc panels ───────────────────────────────────────────────────────── */
[data-theme="light"] .msp-viewport-controls-panel,
[data-theme="light"] .msp-selection-viewport-controls-actions { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; }
[data-theme="light"] [class^="msp-layout"],
[data-theme="light"] [class*=" msp-layout"],
[data-theme="light"] .msp-viewport,
[data-theme="light"] .msp-sequence-wrapper { border-color: #e2e8f0 !important; }