/* ==========================================================================
   Gunung Kawi — Unified Strategy Builder Stylesheet
   Standardizes panels, typography, buttons, and colors across all strategy cards
   (Atlas, Polaris, Pegasus, Mobius, Ursa)
   ========================================================================== */

/* 1. Panel Container Consistency */
html:not([data-theme="light"]) .panel.atlas-panel,
html:not([data-theme="light"]) .panel.polaris-panel,
html:not([data-theme="light"]) .panel.breaksolid-panel,
html:not([data-theme="light"]) .panel.scanner-runtime,
html:not([data-theme="light"]) .panel.strategy-panel{background: !important; border: 1px solid !important; border-radius: 6px !important; margin-bottom: 20px !important; overflow: hidden !important}
/* ==========================================================================
   Gunung Kawi — Unified Strategy Builder Stylesheet
   Standardizes panels, typography, buttons, and colors across all strategy cards
   (Atlas, Polaris, Pegasus, Mobius, Ursa)
   ========================================================================== */

/* 1. Panel Container Consistency */
html:not([data-theme="light"]) .panel.atlas-panel, html:not([data-theme="light"]) .panel.polaris-panel, html:not([data-theme="light"]) .panel.breaksolid-panel, html:not([data-theme="light"]) .panel.scanner-runtime, html:not([data-theme="light"]) .panel.strategy-panel{background-color: #0b1118; border-color: #1c2a36; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important}
/* 2. Header Layout & Backgrounds */
.atlas-head,
.polaris-head,
.breaksolid-head,
.scanner-runtime-head{display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 16px 20px !important}
html:not([data-theme="light"]) .atlas-head,
html:not([data-theme="light"]) .polaris-head,
html:not([data-theme="light"]) .breaksolid-head,
html:not([data-theme="light"]) .scanner-runtime-head{background: !important; border-bottom: 1px solid !important}
html:not([data-theme="light"]) .atlas-head, html:not([data-theme="light"]) .polaris-head, html:not([data-theme="light"]) .breaksolid-head, html:not([data-theme="light"]) .scanner-runtime-head{background-color: #0e1620; border-bottom-color: #1c2a36}
/* 3. Title Typography */
.atlas-head h2,
.polaris-head h2,
.breaksolid-head h2,
.scanner-runtime-head h3{font-family: Manrope, system-ui, sans-serif !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: 0.04em !important; margin: 0 !important}
/* 3. Title Typography */ html:not([data-theme="light"]) .atlas-head h2, html:not([data-theme="light"]) .polaris-head h2, html:not([data-theme="light"]) .breaksolid-head h2, html:not([data-theme="light"]) .scanner-runtime-head h3{color: #e5edf5 !important}
/* 4. Kicker (Badge/Subheader Label) */
.atlas-head span,
.polaris-head span,
.breaksolid-head > div:first-child > span,
.scanner-runtime-head span{font-family: "IBM Plex Mono", monospace !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; margin-bottom: 3px !important; display: block !important}
/* Engine Accent Colors on Kickers */ html:not([data-theme="light"]) .atlas-head span{color: #29c7d8 !important}
html:not([data-theme="light"]) .polaris-head span{color: #1fbab0 !important}
html:not([data-theme="light"]) .breaksolid-panel:not(.mobius-panel) .breaksolid-head > div:first-child > span{color: #21d09d !important}
html:not([data-theme="light"]) .mobius-panel .breaksolid-head > div:first-child > span{color: #b49eff !important}
html:not([data-theme="light"]) .scanner-runtime-head span{color: #e7b84b !important}
/* 5. Subtitle & Description */
.atlas-head p,
.polaris-head p,
.breaksolid-head p{font-family: Manrope, system-ui, sans-serif !important; font-size: 12px !important; line-height: 1.45 !important; margin: 4px 0 0 !important}
/* 5. Subtitle & Description */ html:not([data-theme="light"]) .atlas-head p, html:not([data-theme="light"]) .polaris-head p, html:not([data-theme="light"]) .breaksolid-head p{color: #8c9ea9 !important}
/* 6. Action Button Containers */
.strategy-actions,
.atlas-actions,
.polaris-actions,
.breaksolid-head-actions{display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; width: auto !important}
/* 7. Button Standard Form & Dimensions */
.strategy-actions button,
.atlas-actions button,
.polaris-actions button,
.breaksolid-head-actions > button,
.scanner-runtime-row button{height: 34px !important; min-height: 34px !important; max-height: 34px !important; width: auto !important; min-width: 90px !important; padding: 0 14px !important; border-radius: 4px !important; font-family: "IBM Plex Mono", monospace !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; cursor: pointer !important; transition: all 0.15s ease-in-out !important; box-sizing: border-box !important}
html:not([data-theme="light"]) .strategy-actions button,
html:not([data-theme="light"]) .atlas-actions button,
html:not([data-theme="light"]) .polaris-actions button,
html:not([data-theme="light"]) .breaksolid-head-actions > button,
html:not([data-theme="light"]) .scanner-runtime-row button{border: 1px solid}
html:not([data-theme="light"]) .strategy-actions button, html:not([data-theme="light"]) .atlas-actions button, html:not([data-theme="light"]) .polaris-actions button, html:not([data-theme="light"]) .breaksolid-head-actions > button, html:not([data-theme="light"]) .scanner-runtime-row button{background: #111a24; border-color: #233342; color: #b8c8d4}
.strategy-actions button:hover:not(:disabled),
.atlas-actions button:hover:not(:disabled),
.polaris-actions button:hover:not(:disabled),
.breaksolid-head-actions > button:hover:not(:disabled),
.scanner-runtime-row button:hover:not(:disabled){background: !important}
html:not([data-theme="light"]) .strategy-actions button:hover:not(:disabled), html:not([data-theme="light"]) .atlas-actions button:hover:not(:disabled), html:not([data-theme="light"]) .polaris-actions button:hover:not(:disabled), html:not([data-theme="light"]) .breaksolid-head-actions > button:hover:not(:disabled), html:not([data-theme="light"]) .scanner-runtime-row button:hover:not(:disabled){background-color: #172432; border-color: #2f4559 !important; color: #e2edf5 !important}
/* Primary / Save / Action Highlights */
.strategy-actions button.activate,
.atlas-actions button:last-child,
.polaris-actions button:last-child{background: !important}
/* Primary / Save / Action Highlights */ html:not([data-theme="light"]) .strategy-actions button.activate, html:not([data-theme="light"]) .atlas-actions button:last-child, html:not([data-theme="light"]) .polaris-actions button:last-child{background-color: #112822; border-color: #21d09d !important; color: #38e2b1 !important}
.strategy-actions button.activate:hover:not(:disabled),
.atlas-actions button:last-child:hover:not(:disabled),
.polaris-actions button:last-child:hover:not(:disabled){background: !important}
html:not([data-theme="light"]) .strategy-actions button.activate:hover:not(:disabled), html:not([data-theme="light"]) .atlas-actions button:last-child:hover:not(:disabled), html:not([data-theme="light"]) .polaris-actions button:last-child:hover:not(:disabled){background-color: #16362e; border-color: #4eedc2 !important; color: #72f3ce !important}
/* 8. Master Toggle Switch Pill (● ON / ● OFF) */
.engine-state,
.atlas-actions button.engine-state,
.polaris-actions button.engine-state,
.breaksolid-head-actions .engine-state{min-width: 86px !important; padding: 0 12px !important; font-family: "IBM Plex Mono", monospace !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; border-radius: 4px !important}
/* 8. Master Toggle Switch Pill (● ON / ● OFF) */ html:not([data-theme="light"]) .engine-state, html:not([data-theme="light"]) .atlas-actions button.engine-state, html:not([data-theme="light"]) .polaris-actions button.engine-state, html:not([data-theme="light"]) .breaksolid-head-actions .engine-state{box-shadow: none !important}
.engine-state.on,
.atlas-actions button.engine-state.on,
.polaris-actions button.engine-state.on,
.breaksolid-head-actions .engine-state.on{background: !important}
html:not([data-theme="light"]) .engine-state.on, html:not([data-theme="light"]) .atlas-actions button.engine-state.on, html:not([data-theme="light"]) .polaris-actions button.engine-state.on, html:not([data-theme="light"]) .breaksolid-head-actions .engine-state.on{border-color: #21d09d !important; color: #38e2b1 !important; background-color: #0b221a; box-shadow: 0 0 10px rgba(33, 208, 157, 0.12) !important}
.engine-state.off,
.atlas-actions button.engine-state.off,
.polaris-actions button.engine-state.off,
.breaksolid-head-actions .engine-state.off{background: !important}
html:not([data-theme="light"]) .engine-state.off, html:not([data-theme="light"]) .atlas-actions button.engine-state.off, html:not([data-theme="light"]) .polaris-actions button.engine-state.off, html:not([data-theme="light"]) .breaksolid-head-actions .engine-state.off{border-color: #f05268 !important; color: #f77083 !important; background-color: #240e14; box-shadow: 0 0 10px rgba(240, 82, 104, 0.12) !important}
/* 9. Metrics & Stat Grids */
.atlas-stat-grid,
.polaris-metric-grid,
.breaksolid-kpis,
.breaksolid-period-stats{background: !important; border: 1px solid !important; border-radius: 4px !important; margin: 14px 20px !important}
/* 9. Metrics & Stat Grids */ html:not([data-theme="light"]) .atlas-stat-grid, html:not([data-theme="light"]) .polaris-metric-grid, html:not([data-theme="light"]) .breaksolid-kpis, html:not([data-theme="light"]) .breaksolid-period-stats{background-color: #0d151e; border-color: #1c2a36}
/* 10. Form Labels, Inputs & Selects */
.atlas-config-grid,
.polaris-config-grid,
.breaksolid-config,
.mobius-config{padding: 0 20px 18px !important}
.atlas-config-grid label > span,
.polaris-config-grid label > span,
.breaksolid-block h3,
.mobius-config label > span{font-family: "IBM Plex Mono", monospace !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important}
html:not([data-theme="light"]) .atlas-config-grid label > span, html:not([data-theme="light"]) .polaris-config-grid label > span, html:not([data-theme="light"]) .breaksolid-block h3, html:not([data-theme="light"]) .mobius-config label > span{color: #7a8e9e !important}
.atlas-config-grid select,
.atlas-config-grid input,
.polaris-config-grid select,
.polaris-config-grid input,
.breaksolid-config select,
.breaksolid-config input,
.mobius-config select,
.mobius-config input{background: !important; border: 1px solid !important; border-radius: 4px !important; font-family: "IBM Plex Mono", monospace !important; font-size: 11px !important; height: 34px !important; padding: 0 10px !important; transition: border-color 0.15s ease !important}
html:not([data-theme="light"]) .atlas-config-grid select, html:not([data-theme="light"]) .atlas-config-grid input, html:not([data-theme="light"]) .polaris-config-grid select, html:not([data-theme="light"]) .polaris-config-grid input, html:not([data-theme="light"]) .breaksolid-config select, html:not([data-theme="light"]) .breaksolid-config input, html:not([data-theme="light"]) .mobius-config select, html:not([data-theme="light"]) .mobius-config input{background-color: #080d12; border-color: #1f2e3d; color: #dbe6ee !important}
.atlas-config-grid select:focus,
.atlas-config-grid input:focus,
.polaris-config-grid select:focus,
.polaris-config-grid input:focus,
.breaksolid-config select:focus,
.breaksolid-config input:focus,
.mobius-config select:focus,
.mobius-config input:focus{outline: none !important}
html:not([data-theme="light"]) .atlas-config-grid select:focus, html:not([data-theme="light"]) .atlas-config-grid input:focus, html:not([data-theme="light"]) .polaris-config-grid select:focus, html:not([data-theme="light"]) .polaris-config-grid input:focus, html:not([data-theme="light"]) .breaksolid-config select:focus, html:not([data-theme="light"]) .breaksolid-config input:focus, html:not([data-theme="light"]) .mobius-config select:focus, html:not([data-theme="light"]) .mobius-config input:focus{border-color: #29c7d8 !important}
/* 11. Extra Filters Switches in Pegasus */
html:not([data-theme="light"]) .breaksolid-switch{background: !important; border: 1px solid !important; border-radius: 4px !important; padding: 6px 10px !important; font-family: "IBM Plex Mono", monospace !important; font-size: 10px !important; transition: all 0.15s ease !important}
/* 11. Extra Filters Switches in Pegasus */
html:not([data-theme="light"]) .breaksolid-switch{background-color: #0a1118; border-color: #1b2834; color: #a8bcc9 !important}
html:not([data-theme="light"]) .breaksolid-switch:hover{border-color: #2a3d4e !important; color: #dbe6ee !important}
/* Unified Listing Expand/Collapse Toggle (Like ATLAS) */
.atlas-map-toggle{width: 100% !important; min-height: 48px !important; max-height: 52px !important; margin: 16px 0 0 0 !important; padding: 12px 20px !important; border-left: none !important; border-right: none !important}
html:not([data-theme="light"]) .atlas-map-toggle{border-top: 1px solid !important; border-bottom: 1px solid !important; background: !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; text-align: left !important; cursor: pointer !important; transition: all 0.15s ease !important; box-sizing: border-box !important}
html:not([data-theme="light"]) .atlas-map-toggle{border-top-color: #1c2a36; border-bottom-color: #1c2a36; background-color: #0e1620; color: #d9e3ec !important}
.atlas-map-toggle:hover{background: !important}
html:not([data-theme="light"]) .atlas-map-toggle:hover{background-color: #131e2b; border-color: #2b3e50 !important}
.atlas-map-toggle span{display: flex !important; flex-direction: column !important; gap: 3px !important}
.atlas-map-toggle strong{font-family: "IBM Plex Mono", monospace !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.09em !important}
html:not([data-theme="light"]) .atlas-map-toggle strong{color: #e5edf5 !important}
.atlas-map-toggle small{font-family: Manrope, system-ui, sans-serif !important; font-size: 11px !important}
html:not([data-theme="light"]) .atlas-map-toggle small{color: #8294a5 !important}
.atlas-map-toggle b{font-family: "IBM Plex Mono", monospace !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; background: !important; padding: 5px 10px !important; border-radius: 4px !important; border: 1px solid !important; white-space: nowrap !important}
html:not([data-theme="light"]) .atlas-map-toggle b{color: #38e2b1 !important; background-color: #0c221a; border-color: #1b4034}
/* Ensure expanded ledgers sit cleanly under toggle bar */
.breaksolid-ledger,
.polaris-ledger{margin: 0 !important; padding: 12px 20px 20px !important; border: none !important; background: !important}
/* Ensure expanded ledgers sit cleanly under toggle bar */ html:not([data-theme="light"]) .breaksolid-ledger, html:not([data-theme="light"]) .polaris-ledger{background-color: transparent}
html:not([data-theme="light"]) .breaksolid-row-head,
html:not([data-theme="light"]) .polaris-ledger-head{background: !important; border: 1px solid !important; border-radius: 4px !important; font-family: "IBM Plex Mono", monospace !important; font-size: 10px !important; font-weight: 800 !important; padding: 8px 12px !important}
html:not([data-theme="light"]) .breaksolid-row-head, html:not([data-theme="light"]) .polaris-ledger-head{background-color: #111a24; border-color: #1c2a36; color: #7d90a0 !important}
/* Quick Indicator Preset Buttons */
.indicator-strip .preset-btn{background: !important; font-weight: 700 !important; padding: 0 8px !important}
/* Quick Indicator Preset Buttons */ html:not([data-theme="light"]) .indicator-strip .preset-btn{background-color: #0f1c26; border-color: #274559 !important; color: #72bce2 !important}
.indicator-strip .preset-btn:hover{background: !important}
html:not([data-theme="light"]) .indicator-strip .preset-btn:hover{background-color: #172d3d; border-color: #386786 !important; color: #9fe2ff !important}
/* PHOENIX Engine Styling */ html:not([data-theme="light"]) .phoenix-panel .breaksolid-head > div:first-child > span{color: #ff7849 !important}
html:not([data-theme="light"]) .phoenix-panel .breaksolid-head h2{color: #fff0eb !important}
/* Sleek textarea for manual pairs */
.breaksolid-block textarea{width: 100%; min-height: 64px}
html:not([data-theme="light"]) .breaksolid-block textarea{background: !important; border: 1px solid !important; border-radius: 4px; padding: 8px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.4; resize: vertical}
html:not([data-theme="light"]) .breaksolid-block textarea{background-color: #070b10; color: #e2e8f0 !important; border-color: #1e293b}
.breaksolid-block textarea:focus{outline: none}
html:not([data-theme="light"]) .breaksolid-block textarea:focus{border-color: #ff7849 !important}
/* RSI Switch 2-line formatting */
.rsi-switch{display: flex !important; align-items: center !important; gap: 10px !important; padding: 6px 10px !important; min-height: 38px !important; margin-top: 6px !important}
.rsi-switch .switch-text{display: flex !important; flex-direction: column !important; gap: 1px !important}
.rsi-switch .switch-text strong{font-family: 'IBM Plex Mono', monospace !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; white-space: nowrap !important}
html:not([data-theme="light"]) .rsi-switch .switch-text strong{color: #dbe6ee !important}
.rsi-switch .switch-text small{font-family: 'IBM Plex Mono', monospace !important; font-size: 9.5px !important; letter-spacing: 0.02em !important; white-space: nowrap !important}
html:not([data-theme="light"]) .rsi-switch .switch-text small{color: #8fa0b0 !important}
/* Ensure phoenix switch text never wraps */
.phoenix-panel .breaksolid-switch{white-space: nowrap !important; font-size: 10px !important; line-height: 1 !important}