/* ═══ THEMES: Dark / Light / Touch & Mobile ═══ */ /* ── DARK THEME OVERRIDES ── */ /* ============================================ COMMAND CENTER DARK THEME ============================================ */ [data-theme="dark"] body { background: var(--bg) !important; overflow-x: hidden; overflow-y: auto } [data-theme="dark"] .fixed-header { background: transparent; backdrop-filter: blur(12px); [data-theme="dark"] .top-tabs { [data-theme="dark"] .top-tab { color: var(--txt3) } [data-theme="dark"] .top-tab.on { color: #fff !important; background: var(--blue) !important; border-bottom: 2px solid var(--blue) !important } [data-theme="dark"] .top-tab.on .tab-step { background: rgba(255,255,255,0.2) !important; color: #fff !important } [data-theme="dark"] .tep-box-input.error { border-color: var(--red) !important } [data-theme="dark"] .btn-primary { background: var(--accent-bg-3); color: var(--blue); border-color: var(--accent-bg-5) } [data-theme="dark"] .btn-primary:hover { background: transparent } [data-theme="dark"] .btn-calc { color: var(--blue); font-weight: var(--fw-semi); border: 1px solid var(--blue); height: 36px; padding: 0 20px; font-size: var(--fs-md) } [data-theme="dark"] .btn-calc:hover { background: var(--accent-bg-2) } [data-theme="dark"] .btn-optimize { background: var(--accent-bg-3); color: var(--blue); border: 1px solid var(--accent-bg-5) } [data-theme="dark"] .btn-optimize:hover { background: transparent } [data-theme="dark"] .add:hover { border-color: var(--blue); color: var(--blue) } [data-theme="dark"] .del:hover { color: var(--red) } [data-theme="dark"] .queue-btn.on, [data-theme="dark"] .queue-btn.active { color: var(--blue); background: var(--accent-bg-2); border-color: var(--accent-bg-4) } [data-theme="dark"] .zone-btn:hover { border-color: var(--accent-bg-4) } [data-theme="dark"] .zone-btn.on, [data-theme="dark"] .zone-btn.active { color: var(--blue); background: var(--accent-bg-2) } [data-theme="dark"] .tbl-wrap { overflow-x: auto; padding: 12px 16px } [data-theme="dark"] table.main-tbl { border-collapse: collapse } [data-theme="dark"] table.main-tbl th { color: var(--txt3); border-bottom: 1px solid var(--brd); font-size: var(--fs-base); padding: 6px 8px } [data-theme="dark"] table.main-tbl td { border-bottom: 1px solid var(--accent-bg-1); padding: 10px 8px } [data-theme="dark"] table.main-tbl tr:hover td { background: var(--accent-bg-0) } [data-theme="dark"] table.main-tbl tr.row-lk td:first-child { box-shadow: inset 4px 0 0 } [data-theme="dark"] table.main-tbl tr.row-lk.ta td { background: transparent !important } [data-theme="dark"] table.main-tbl tr.row-lk.ta .rn { color: var(--type-a) } [data-theme="dark"] table.main-tbl tr.row-lk.tb td { background: transparent !important } [data-theme="dark"] table.main-tbl tr.row-lk.tb .rn { color: var(--type-b) } [data-theme="dark"] table.main-tbl tr.tot td { font-weight: var(--fw-semi); color: var(--txt2) } [data-theme="dark"] .sec-apt-tbl th { background: var(--accent-bg-1) } [data-theme="dark"] .comp-glossary { background: var(--accent-bg-0) } [data-theme="dark"] .project-select, [data-theme="dark"] .theme-slider { background: var(--bg3) } [data-theme="dark"] .theme-slider:before { background: var(--bg4) } [data-theme="dark"] .tep-panel-header { [data-theme="dark"] .tep-panel-formulas { [data-theme="dark"] .tep-panel-formulas span { color: var(--txt3) } [data-theme="dark"] .tep-panel-formulas.green span { color: var(--type-a) } [data-theme="dark"] .balance-slider-main { background: var(--bg3) } [data-theme="dark"] .tinp.lkd { background: transparent; border-color: rgba(240,160,48,0.3) } [data-theme="dark"] table.main-tbl th.lkd { background: transparent; color: var(--type-b) } /* ============================================ NEUMORPHIC LIGHT THEME — FULL REDESIGN Soft UI • Orange Accent • Tactile Depth ============================================ */ /* --- Base & Body --- */ /* ========== WARM EDITORIAL FLAT LIGHT THEME (split-screen.jsx) ========== */ /* --- Tabs --- */ /* --- Header Bar --- */ /* --- Cards & Panels --- */ /* Queue cards */ /* --- Inputs (command center light) --- */ /* --- Buttons (command center light) --- */ /* --- Selects --- */ /* --- Tables --- */ /* --- Vertical Bars (flat tracks) --- */ /* --- Proportion Bars --- */ /* --- Stacked Bars --- */ /* --- Area Bars --- */ /* --- Gauges --- */ /* --- Result Cards --- */ /* --- Apt Distribution --- */ /* --- Type Bars (Results) --- */ /* --- Compensation Panel --- */ /* --- Deviation & History --- */ /* --- Hints --- */ /* --- Balance Slider --- */ /* --- Checkboxes --- */ /* --- Stat Cards --- */ /* --- Progress Bars --- */ /* --- Shares Detail --- */ /* --- Section Detail Cards --- */ /* Result section table colors */ /* Apt area chips */ /* --- Buildings Viz --- */ /* --- Sections Toggle --- */ /* --- Queue & Filter --- */ /* --- Areas Grid --- */ /* --- Misc --- */ /* Shares detail table cell backgrounds */ /* ========== END WARM EDITORIAL FLAT LIGHT THEME ========== */ /* Fine Tune Light Theme */ /* ── LIGHT THEME OVERRIDES ── */ /* ═══════════════════════════════════════════════════════════ */ /* ─── LIGHT THEME OVERRIDES ─── */ /* ═══════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #f4f5f7; --bg2: #ebedf0; --bg3: transparent; --bg4: #dddfe4; --brd: rgba(0,40,80,0.08); --txt: #4a5568; --txt2: #8c96a4; --txt3: #a8b2bf; --red: #d42b5a; --green: #0a8f6c; --yellow: #c07a18; --blue: #6a6db8; --orange: #c05600; --purple: #7b2d8e; --cyan: #0a8f6c; --type-a: #0a8f6c; --type-a-light: #12b088; --type-a-bg: transparent; --type-b: #c07a18; --type-b-light: #d99a30; --type-b-bg: transparent; --type-t: #0077cc; --type-t-light: #2094e6; --type-t-bg: transparent; --card-bg: #fff; --shadow: 0 1px 4px rgba(0,0,0,0.05); --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.03); --shadow-btn: 0 1px 3px rgba(0,0,0,0.05); --ease: cubic-bezier(.52, 0, .08, 1); --inp-radius: var(--radius-sm); --inp-shadow: none } [data-theme="light"] .add { color: var(--txt2); border: 2px dashed var(--brd) } [data-theme="light"] .add:hover { border-color: var(--blue); color: var(--blue) } [data-theme="light"] .ainp, [data-theme="light"] .ainp2, [data-theme="light"] .ainp-avg { font-size: 15px; height: 42px; padding: 9px 11px } [data-theme="light"] .ainp-total { font-size: 15px; height: 42px; padding: 9px 11px } [data-theme="light"] .ainp-total.ta { color: var(--type-a) !important; border-color: var(--type-a) !important; background: transparent !important } [data-theme="light"] .ainp-total.tb { color: var(--type-b) !important; border-color: var(--type-b) !important; background: transparent !important } [data-theme="light"] .apt-area.c1 { background: transparent; color: var(--red) } [data-theme="light"] .apt-area.c2 { background: transparent; color: #3aab6a } [data-theme="light"] .apt-area.c3 { background: transparent; color: var(--yellow) } [data-theme="light"] .apt-area.c4 { background: transparent; color: var(--blue) } [data-theme="light"] .apt-area.cp { background: transparent; color: var(--purple) } [data-theme="light"] .apt-detail-tip { background: var(--bg3); border: 1px solid var(--overlay-2); box-shadow: 0 4px 16px var(--overlay-1) } [data-theme="light"] .apt-dist .aq1 { background: transparent; color: var(--red) } [data-theme="light"] .apt-dist .aq2 { background: transparent; color: var(--green) } [data-theme="light"] .apt-dist .aq3 { background: transparent; color: var(--yellow) } [data-theme="light"] .apt-dist .aq4 { background: transparent; color: var(--blue) } [data-theme="light"] .apt-dist .aqp { background: transparent; color: var(--purple) } [data-theme="light"] .apt-dist-fill.c1 { background: var(--room-1k) !important } [data-theme="light"] .apt-dist-fill.c2 { background: var(--room-2k) !important } [data-theme="light"] .apt-dist-fill.c3 { background: var(--room-3k) !important } [data-theme="light"] .apt-dist-fill.c4 { background: var(--room-4k) !important } [data-theme="light"] .apt-dist-fill.cp { background: var(--room-p) !important } [data-theme="light"] .apt-v.v1 { background: transparent; color: var(--green) } [data-theme="light"] .apt-v.v2 { background: transparent; color: var(--red) } [data-theme="light"] .apt-v.v3 { background: transparent; color: var(--blue) } [data-theme="light"] .area-bar-col.ta .area-bar-avg { color: var(--type-a) !important } [data-theme="light"] .area-bar-col.tb .area-bar-avg { color: var(--type-b) !important } [data-theme="light"] .area-bar-col.tot .area-bar-avg { color: var(--blue) !important } [data-theme="light"] .area-bar-fill.ta { background: var(--type-a) !important } [data-theme="light"] .area-bar-fill.tb { background: var(--type-b) !important } [data-theme="light"] .area-bar-fill.tot { background: var(--blue) !important } [data-theme="light"] .area-bar-tot { color: var(--blue) !important; border-color: transparent !important; background: transparent !important } [data-theme="light"] .area-inp-avg.ta { color: var(--type-a) !important; border-color: var(--type-a) !important; background: transparent !important } [data-theme="light"] .area-inp-avg.tb { color: var(--type-b) !important; border-color: var(--type-b) !important; background: transparent !important } [data-theme="light"] .area-total-disp.tot { color: var(--blue) !important; background: transparent !important; border-color: transparent !important } [data-theme="light"] .areas-avg { background: var(--bg4); color: var(--blue) } [data-theme="light"] .areas-grid { background: var(--bg3); border: 1px solid var(--overlay-1) } [data-theme="light"] .areas-header { background: var(--bg4) } [data-theme="light"] .areas-room.ravg { color: var(--blue) !important; background: transparent !important } [data-theme="light"] .areas-row.ta { background: transparent !important } [data-theme="light"] .areas-row.ta .areas-type { color: var(--type-a) !important } [data-theme="light"] .areas-row.tb { background: transparent !important } [data-theme="light"] .areas-row.tb .areas-type { color: var(--type-b) !important } [data-theme="light"] .auto-badge { background: var(--txt) } [data-theme="light"] .auto-gen-banner { background: rgba(0,0,0,0.03); border: 1px solid var(--overlay-2) } [data-theme="light"] .bal-dual-fill-left { background: linear-gradient(90deg, var(--green), rgba(10,143,108,0.2)) } [data-theme="light"] .bal-dual-fill-right { background: linear-gradient(90deg, rgba(212,43,90,0.2), var(--red)) } [data-theme="light"] .bal-dual-slider::-webkit-slider-thumb { background: var(--txt); box-shadow: 0 0 0 3px rgba(0,119,204,0.25), 0 2px 8px rgba(0,0,0,0.15) } [data-theme="light"] .bal-dual-slider::-moz-range-thumb { background: var(--txt); box-shadow: 0 0 0 3px rgba(0,119,204,0.25), 0 2px 8px rgba(0,0,0,0.15); border: none } [data-theme="light"] .bal-end-left .bal-end-name { color: var(--green) } [data-theme="light"] .bal-end-right .bal-end-name { color: var(--red) } [data-theme="light"] .bal-end-badge.v1 { background: transparent; color: var(--green) } [data-theme="light"] .bal-end-badge.v2 { background: transparent; color: var(--red) } [data-theme="light"] .btn { color: var(--txt2); transition: all var(--t-slow) } [data-theme="light"] .btn-calc { background: transparent; color: var(--blue); font-weight: var(--fw-semi); border: 1px solid rgba(0,119,204,0.2) } [data-theme="light"] .btn-calc:active { transform: none } [data-theme="light"] .btn-calc:hover { background: transparent; transform: none } [data-theme="light"] .btn-excel { background: var(--bg3); border: 1px solid var(--overlay-2); color: var(--txt2) } [data-theme="light"] .btn-excel:hover { background: var(--bg4) } [data-theme="light"] .btn-optimize { background: transparent; color: var(--blue); border: 1px solid rgba(0,119,204,0.2) } [data-theme="light"] .btn-optimize:hover { background: transparent; transform: none } [data-theme="light"] .btn-primary { background: transparent; color: var(--blue); border-color: rgba(0,119,204,0.2) } [data-theme="light"] .btn-primary:hover { background: transparent; color: var(--blue) } [data-theme="light"] .btn:active { transform: none } [data-theme="light"] .btn:hover { background: transparent; border-color: rgba(0,40,80,0.15); transform: none } [data-theme="light"] .building-bar.c1 { background: var(--room-1k) } [data-theme="light"] .building-bar.c2 { background: var(--room-2k) } [data-theme="light"] .building-bar.c3 { background: var(--room-3k) } [data-theme="light"] .building-bar.c4 { background: var(--room-4k) } [data-theme="light"] .building-bar.cp { background: var(--room-p) } [data-theme="light"] .building-type.ta { background: transparent; color: var(--green) } [data-theme="light"] .building-type.tb { background: transparent; color: var(--red) } [data-theme="light"] .card-t .icon.blue { color: var(--blue) } [data-theme="light"] .card-t .icon.green { color: var(--green) } [data-theme="light"] .card-t .icon.red { color: var(--red) } [data-theme="light"] .card-t .icon.yellow { color: var(--yellow) } [data-theme="light"] .card:hover { border-color: rgba(0,40,80,0.12) } [data-theme="light"] .chk-box { background: #ddd; border: none; border-radius: var(--radius-lg) } [data-theme="light"] .chk-item { background: var(--bg3) } [data-theme="light"] .chk-item input:checked + .chk-box { background: var(--txt) } [data-theme="light"] .chk-item:hover { background: var(--bg4) } [data-theme="light"] .comp-glossary { background: rgba(0,0,0,0.03) } [data-theme="light"] .comp-panel { border: none; overflow: hidden } [data-theme="light"] .comp-panel-amount.zero { color: var(--green) } [data-theme="light"] .comp-panel-amount.zero span { color: var(--green) } [data-theme="light"] .comp-panel-card { background: transparent } [data-theme="light"] .comp-panel-cards { background: transparent } [data-theme="light"] .comp-panel-delta.down { background: transparent; color: var(--green) } [data-theme="light"] .comp-panel-delta.up { background: transparent; color: var(--red) } [data-theme="light"] .comp-panel-footer { background: var(--bg4) } [data-theme="light"] .comp-panel-ok-icon { background: transparent; color: var(--green) } [data-theme="light"] .del:hover { color: var(--red); background: var(--bg4) } [data-theme="light"] .deviation-chart { background: var(--bg3); border: 1px solid var(--overlay-1) } [data-theme="light"] .deviation-fill.negative { background: var(--green) } [data-theme="light"] .deviation-fill.positive { background: var(--red) } [data-theme="light"] .deviation-track { background: var(--bg4); border-radius: var(--radius-md) } [data-theme="light"] .fine-tune-panel { background: var(--bg3); border: 1px solid var(--overlay-1); box-shadow: 0 4px 16px var(--overlay-1) } [data-theme="light"] .fine-tune-toggle { background: var(--bg3); border: 1px solid var(--overlay-2) } [data-theme="light"] .fine-tune-toggle:hover { background: var(--bg4) } [data-theme="light"] .fixed-header { background: transparent; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); [data-theme="light"] .form-input { border: 1px solid var(--overlay-1); background: var(--bg3) } [data-theme="light"] .gauge-bg { stroke: var(--bg4) } [data-theme="light"] .gauge-fill.blue { stroke: var(--blue) } [data-theme="light"] .gauge-fill.green { stroke: var(--green) } [data-theme="light"] .gauge-fill.purple { stroke: var(--purple) } [data-theme="light"] .gauge-fill.red { stroke: var(--red) } [data-theme="light"] .gauge-fill.yellow { stroke: var(--yellow) } [data-theme="light"] .hint-icon { background: var(--bg4); color: var(--txt3) } [data-theme="light"] .hint-icon:hover::after { background: var(--bg); border: 1px solid var(--overlay-2); box-shadow: 0 4px 16px var(--overlay-1) } [data-theme="light"] .history-item { background: var(--bg3); border: none } [data-theme="light"] .history-item:hover { background: var(--bg4) } [data-theme="light"] .history-panel { background: var(--bg3); border: 1px solid var(--overlay-1) } [data-theme="light"] .hlp-ok { background: transparent; border-left-color: var(--green) } [data-theme="light"] .hlp-warn { background: transparent; border-left-color: var(--red) } [data-theme="light"] .lock-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") } [data-theme="light"] .lock-icon.locked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4a017' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") } [data-theme="light"] .pm-btn.minus { color: #C04040 } [data-theme="light"] .pm-btn.plus { color: #2D8060 } [data-theme="light"] .pm-btn:active { box-shadow: inset 1px 1px 3px #b8c0cc, inset -1px -1px 3px #ffffff } [data-theme="light"] .pm-btn:hover { background: transparent } [data-theme="light"] .pm-ctrl { background: #E0E5EC; box-shadow: 2px 2px 5px #b8c0cc, -2px -2px 5px #ffffff } [data-theme="light"] .pm-divider { background: transparent } [data-theme="light"] .progress-bar { background: var(--overlay-1) } [data-theme="light"] .progress-fill.blue { background: var(--blue) } [data-theme="light"] .progress-fill.green { background: var(--green) } [data-theme="light"] .progress-fill.purple { background: var(--purple) } [data-theme="light"] .progress-fill.red { background: var(--red) } [data-theme="light"] .progress-fill.yellow { background: var(--yellow) } [data-theme="light"] .prop-bar-card.type-a .prop-bar-fill { background: var(--type-a) } [data-theme="light"] .prop-bar-card.type-a .prop-bar-input { color: var(--type-a) } [data-theme="light"] .prop-bar-card.type-a .prop-bar-letter-top { color: var(--type-a) } [data-theme="light"] .prop-bar-card.type-b .prop-bar-fill { background: var(--type-b) } [data-theme="light"] .prop-bar-card.type-b .prop-bar-input { color: var(--type-b) } [data-theme="light"] .prop-bar-card.type-b .prop-bar-letter-top { color: var(--type-b) } [data-theme="light"] .prop-bar-input-wrap.type-a { background: transparent; border: 1px solid rgba(45,138,94,0.2) } [data-theme="light"] .prop-bar-input-wrap.type-b { background: transparent; border: 1px solid rgba(192,57,43,0.2) } [data-theme="light"] .prop-val.ta { background: transparent; color: var(--green) } [data-theme="light"] .prop-val.tb { background: transparent; color: var(--red) } [data-theme="light"] .qs-card-title { [data-theme="light"] .qsel.q1 { color: var(--orange); background: var(--bg3) } [data-theme="light"] .qsel.q2 { color: var(--green); background: var(--bg3) } [data-theme="light"] .qsel.q3 { color: var(--yellow); background: var(--bg3) } [data-theme="light"] .queue-btn:hover { background: transparent } [data-theme="light"] .queue-filter { background: var(--bg3); border: 1px solid var(--overlay-1) } [data-theme="light"] .queue-settings-group input:focus { border-color: var(--blue) } [data-theme="light"] .res-badge.v1 { background: transparent; color: var(--green) } [data-theme="light"] .res-badge.v2 { background: transparent; color: var(--red) } [data-theme="light"] .res-badge.v3 { background: transparent; color: var(--blue) } [data-theme="light"] .res-btn { background: var(--txt); color: var(--bg); box-shadow: 0 2px 12px var(--overlay-2) } [data-theme="light"] .res-btn:hover { box-shadow: 0 4px 20px var(--overlay-3) } [data-theme="light"] .res-card { background: var(--bg3); border: 1px solid var(--overlay-1) } [data-theme="light"] .res-card.rec { border: 2px solid var(--txt) } [data-theme="light"] .res-hd { background: transparent; border-radius: 0 } [data-theme="light"] .res-hd:has(.res-badge.v1) { background: transparent } [data-theme="light"] .res-hd:has(.res-badge.v2) { background: transparent } [data-theme="light"] .res-hd:has(.res-badge.v3) { background: transparent } [data-theme="light"] .res-sec-tbl .c1 { color: var(--red) } [data-theme="light"] .res-sec-tbl .c2 { color: #3aab6a } [data-theme="light"] .res-sec-tbl .c3 { color: var(--yellow) } [data-theme="light"] .res-sec-tbl .c4 { color: var(--blue) } [data-theme="light"] .res-sec-tbl .cp { color: var(--purple) } [data-theme="light"] .res-sec-tbl .sec-tp.ta { color: var(--type-a) } [data-theme="light"] .res-sec-tbl .sec-tp.tb { color: var(--type-b) } [data-theme="light"] .res-sec-tbl th { background: var(--bg4) } [data-theme="light"] .sec-toggle-btn { color: var(--txt3) } [data-theme="light"] .sec-toggle-btn:hover { color: var(--blue) } [data-theme="light"] .res-sections-body { background: var(--bg2); border-color: var(--brd) } [data-theme="light"] .res-tbl td { border-color: var(--overlay-1) } [data-theme="light"] .res-tbl th { background: var(--bg4); color: var(--txt2) } [data-theme="light"] .rn { background: var(--bg4) } [data-theme="light"] .save-toast { background: #111; color: #f5f4f1; box-shadow: 0 4px 20px rgba(0,0,0,0.1) } [data-theme="light"] .sec-apt-tbl .c1 { color: var(--red) } [data-theme="light"] .sec-apt-tbl .c2 { color: #3aab6a } [data-theme="light"] .sec-apt-tbl .c3 { color: var(--yellow) } [data-theme="light"] .sec-apt-tbl .c4 { color: var(--blue) } [data-theme="light"] .sec-apt-tbl .cp { color: var(--purple) } [data-theme="light"] .sec-apt-tbl .match { color: var(--green); background: transparent } [data-theme="light"] .sec-apt-tbl .mismatch { color: var(--red); background: transparent } [data-theme="light"] .sec-apt-tbl th { background: rgba(0,0,0,0.04) } [data-theme="light"] .sec-detail-card { border: none; border-left: none; margin-bottom: 0; padding-bottom: 8px } [data-theme="light"] .sec-detail-card.ta { border-left: none } [data-theme="light"] .sec-detail-card.tb { border-left: none } [data-theme="light"] .sec-detail-card:last-child { border-bottom: none } [data-theme="light"] .sec-detail-header { background: rgba(0,0,0,0.03) } [data-theme="light"] .sec-detail-summary { background: var(--bg4); border: none } [data-theme="light"] .sec-detail-type.ta { background: transparent; color: var(--green) } [data-theme="light"] .sec-detail-type.tb { background: transparent; color: var(--red) } [data-theme="light"] .sec-info-portal { background: var(--bg); box-shadow: 0 8px 32px var(--overlay-3) } [data-theme="light"] .sec-info-tip, [data-theme="light"] .sec-info-portal { background: var(--bg); box-shadow: 0 8px 32px rgba(0,0,0,0.1) } [data-theme="light"] .share-bar-seg { color: #fff } [data-theme="light"] .shares-det-tbl th.c1 { background: var(--red) } [data-theme="light"] .shares-det-tbl th.c2 { background: #3aab6a } [data-theme="light"] .shares-det-tbl th.c3 { background: var(--yellow) } [data-theme="light"] .shares-det-tbl th.c4 { background: var(--blue) } [data-theme="light"] .shares-det-tbl th.cavg { background: var(--txt2) } [data-theme="light"] .shares-det-tbl th.cp { background: var(--purple) } [data-theme="light"] .shares-detail { background: var(--bg3); border: 1px solid var(--overlay-1) } [data-theme="light"] .shares-tbl td { border-color: var(--overlay-1) } [data-theme="light"] .shares-tbl th { background: var(--bg4); color: var(--txt2) } [data-theme="light"] .stacked-bar { background: transparent } [data-theme="light"] .stacked-seg.s1 { background: var(--room-1k) } [data-theme="light"] .stacked-seg.s2 { background: var(--room-2k) } [data-theme="light"] .stacked-seg.s3 { background: var(--room-3k) } [data-theme="light"] .stacked-seg.s4 { background: var(--room-4k) } [data-theme="light"] .stacked-seg.sp { background: var(--room-p) } [data-theme="light"] .stat-badge.down { background: transparent; color: var(--red) } [data-theme="light"] .stat-badge.up { background: transparent; color: var(--green) } [data-theme="light"] .stat-card { background: var(--bg3); border: 1px solid var(--overlay-1) } [data-theme="light"] .ta .ainp-avg { color: var(--type-a) !important; border-color: rgba(45,138,94,0.3) !important; background: transparent !important } [data-theme="light"] .tb .ainp-avg { color: var(--type-b) !important; border-color: rgba(192,57,43,0.3) !important; background: transparent !important } [data-theme="light"] .tbl-wrap { background: var(--bg3); border: 1px solid var(--overlay-1); overflow-x: auto; overflow-y: visible; padding: 12px 16px } [data-theme="light"] .tep-box-input.error { border-color: var(--red) !important; background: transparent !important } [data-theme="light"] .tep-box-input.green { color: var(--green) } [data-theme="light"] .tep-box-input.yellow { color: var(--yellow) } [data-theme="light"] .tep-box-value-wrap .tep-box-input { background: var(--bg4); border: 1px solid transparent !important; cursor: default } [data-theme="light"] .tep-calc-slider { background: rgba(0,0,0,0.1) } [data-theme="light"] .tep-panel-formulas { [data-theme="light"] .tep-panel-formulas span { color: var(--txt3) } [data-theme="light"] .tep-panel-formulas.green span { color: var(--green) } [data-theme="light"] .tep-panel-header { [data-theme="light"] .theme-slider { background: #ddd; border: none } [data-theme="light"] .theme-slider:before { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15) } [data-theme="light"] .tinp.lkd { background: transparent; border-color: rgba(212,160,23,0.3); opacity: 0.85 } [data-theme="light"] .top-tab { color: var(--txt3); font-weight: var(--fw-medium); transition: all var(--t-slow); padding: 10px 12px; letter-spacing: 0 } [data-theme="light"] .top-tab.on { color: var(--blue) !important; background: transparent !important; border-radius: 0 !important } [data-theme="light"] .top-tab.on .tab-step { background: var(--blue); color: #fff } [data-theme="light"] .top-tab:hover { color: var(--txt2); background: rgba(0,0,0,0.02) } [data-theme="light"] .top-tabs { padding: 0 32px; gap: 0; margin: 0 -20px } [data-theme="light"] .tab-divider { background: var(--overlay-1) } [data-theme="light"] .tab-step { background: var(--bg3); color: var(--txt3) } [data-theme="light"] .tsel.ta { color: var(--type-a) } [data-theme="light"] .tsel.tb { color: var(--type-b) } [data-theme="light"] .type-avg-item { background: var(--bg4); color: var(--txt2) } [data-theme="light"] .type-avg-item.err { background: transparent; color: var(--red) } [data-theme="light"] .type-avg-item.ok { background: transparent; color: var(--green) } [data-theme="light"] .type-avg-item.target-val { background: transparent; color: var(--blue) } [data-theme="light"] .type-bar-card.type-a .type-bar-fill { background: var(--type-a) } [data-theme="light"] .type-bar-card.type-a .type-bar-label { color: var(--type-a) } [data-theme="light"] .type-bar-card.type-a .type-bar-value { color: var(--type-a) } [data-theme="light"] .type-bar-card.type-a .type-bar-wrap { background: transparent } [data-theme="light"] .type-bar-card.type-b .type-bar-fill { background: var(--type-b) } [data-theme="light"] .type-bar-card.type-b .type-bar-label { color: var(--type-b) } [data-theme="light"] .type-bar-card.type-b .type-bar-value { color: var(--type-b) } [data-theme="light"] .type-bar-card.type-b .type-bar-wrap { background: transparent } [data-theme="light"] .validation-msg { color: var(--red) } [data-theme="light"] .vbar-fill.ta { background: var(--type-a) !important } [data-theme="light"] .vbar-fill.tb { background: var(--type-b) !important } [data-theme="light"] .vbar-fill.tot { background: var(--blue) !important } [data-theme="light"] .vbar-inp.ta { color: var(--type-a) !important; border-color: rgba(10,143,108,0.3) !important; background: transparent !important } [data-theme="light"] .vbar-inp.tb { color: var(--type-b) !important; border-color: rgba(192,122,24,0.3) !important; background: transparent !important } [data-theme="light"] .vbar-lbl { color: rgba(255,255,255,0.95) } [data-theme="light"] .vbar-pct.ta { color: var(--type-a) !important } [data-theme="light"] .vbar-pct.tb { color: var(--type-b) !important } [data-theme="light"] .vbar-pct.tot { color: var(--blue) !important } [data-theme="light"] .vbar-tot { color: var(--blue) !important; border-color: transparent !important; background: transparent !important } [data-theme="light"] .vbar-total-val.ta { color: var(--type-a) !important; background: transparent !important } [data-theme="light"] .vbar-total-val.tb { color: var(--type-b) !important; background: transparent !important } [data-theme="light"] .vbar-total-val.tot { color: var(--blue) !important; background: transparent !important } [data-theme="light"] .vbar-wrap { background: var(--bg3) } [data-theme="light"] .zone-btn:hover { border-color: rgba(0,40,80,0.15); background: transparent } [data-theme="light"] .apt-dist-bar.bg1, [data-theme="light"] .apt-dist-bar.bg2, [data-theme="light"] .apt-dist-bar.bg3, [data-theme="light"] .apt-dist-bar.bg4, [data-theme="light"] .apt-dist-bar.bgp { background: transparent !important } [data-theme="light"] .area-bar-track.ta, [data-theme="light"] .area-bar-track.tb, [data-theme="light"] .area-bar-track.tot { background: var(--bg4) !important; border: 1px solid var(--overlay-1) !important } [data-theme="light"] .areas-room.r1, [data-theme="light"] .areas-room.r2, [data-theme="light"] .areas-room.r3, [data-theme="light"] .areas-room.r4, [data-theme="light"] .areas-room.rp { color: var(--txt2) !important } [data-theme="light"] .card-t .icon.red, [data-theme="light"] .card-t .icon.green, [data-theme="light"] .card-t .icon.blue, [data-theme="light"] .card-t .icon.yellow { background: var(--bg4) } [data-theme="light"] .project-select option, /* --- Theme Toggle --- */ [data-theme="light"] .theme-toggle { background: var(--bg3); border: 1px solid var(--overlay-1); border-radius: var(--radius-pill) } [data-theme="light"] .project-select, [data-theme="light"] .queue-select { padding: 8px 12px; height: 36px } [data-theme="light"] .project-select:focus, [data-theme="light"] .queue-select:focus { border-color: var(--blue); outline: none } [data-theme="light"] .prop-bar-card.type-a .prop-bar-wrap, [data-theme="light"] .prop-bar-card.type-b .prop-bar-wrap { background: var(--bg4); border: 1px solid var(--overlay-1) } [data-theme="light"] .queue-btn.on, [data-theme="light"] .queue-btn.active { background: transparent; border-color: var(--blue); color: var(--blue) } [data-theme="light"] .shares-det-tbl td:nth-child(10), [data-theme="light"] .shares-det-tbl td:nth-child(11) { background: transparent } [data-theme="light"] .shares-det-tbl.transposed td:nth-child(6), [data-theme="light"] .shares-det-tbl.transposed td:nth-child(7) { background: transparent } [data-theme="light"] .vbar-title.r1, [data-theme="light"] .vbar-title.r2, [data-theme="light"] .vbar-title.r3, [data-theme="light"] .vbar-title.r4, [data-theme="light"] .vbar-title.rp { color: var(--txt2) } [data-theme="light"] .vbar-track.ta, [data-theme="light"] .vbar-track.tb, [data-theme="light"] .vbar-track.tot { background: var(--bg4) !important; border: 1px solid var(--overlay-1) !important } [data-theme="light"] .zone-btn.on, [data-theme="light"] .zone-btn.active { background: transparent; border-color: var(--blue); color: var(--blue) } [data-theme="light"] body { background: var(--bg) !important; overflow-x: hidden; overflow-y: auto } [data-theme="light"] table.main-tbl { border-collapse: collapse } [data-theme="light"] table.main-tbl td { padding: 12px 8px } [data-theme="light"] table.main-tbl th { color: var(--txt3); border-bottom: none; font-size: var(--fs-base); padding: 6px 8px } [data-theme="light"] table.main-tbl th.lkd { background: transparent; color: var(--yellow) } [data-theme="light"] table.main-tbl tr.row-lk td:first-child { box-shadow: inset 4px 0 0 } [data-theme="light"] table.main-tbl tr.row-lk.ta .rn { color: var(--type-a) } [data-theme="light"] table.main-tbl tr.row-lk.ta td { background: transparent !important } [data-theme="light"] table.main-tbl tr.row-lk.tb .rn { color: var(--type-b) } [data-theme="light"] table.main-tbl tr.row-lk.tb td { background: transparent !important } [data-theme="light"] table.main-tbl tr.tot td { font-weight: var(--fw-semi); color: var(--txt2) } [data-theme="light"] table.main-tbl tr:hover td { background: rgba(0,0,0,0.02) } /* ── TOUCH & MOBILE SUPPORT ── */ /* ═══ TOUCH & MOBILE SUPPORT ═══ */ /* Sync indicator */ .sync-ind { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 8px; vertical-align: middle; transition: background 0.3s } .sync-ind.idle { background: var(--txt3); opacity: 0.3 } .sync-ind.syncing { background: var(--blue); animation: sync-pulse 0.8s ease infinite } .sync-ind.ok { background: var(--green) } .sync-ind.err { background: #e74c3c } .sync-ind.offline { background: var(--txt3); opacity: 0.15 } @keyframes sync-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } .btn-sync { font-size: var(--fs-sm); padding: 2px 10px; height: 28px; border: 1px solid var(--brd); background: transparent !important; color: var(--txt3); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all var(--t-base); border-radius: var(--radius-sm); font-family: inherit; box-sizing: border-box; -webkit-appearance: none; appearance: none; } .btn-sync:hover { border-color: var(--blue); color: var(--blue); background: transparent !important } .btn-sync:active { background: transparent !important } /* Prevent double-tap zoom on all interactive elements */ button, a, input, select, label, .top-tab, .mkt-fbtn, .sec-info-btn, .pm-btn, .rlk, .lock-icon, .zone-btn, .scat-zoom-btn, .scat-flt-btn, .scat-flt-opt, .res-sections-toggle, .modal-x, .pm-b, .pm-ab, .chk-box, .tep-calc-slider, .theme-toggle, .split-trigger, .btn, .btn-sm, .btn-calc, .btn-optimize { touch-action: manipulation } /* Active states for touch feedback (mirror hover states) */ .btn:active { background: transparent; color: var(--txt); border-color: var(--accent-bg-4) } .btn-calc:active { background: var(--accent-bg-3) } .mkt-fbtn:active { background: transparent; color: var(--txt); border-color: var(--accent-bg-4) } .top-tab:active { color: var(--blue) } .scat-zoom-btn:active { background: var(--bg3); color: var(--txt); border-color: var(--blue) } .scat-flt-btn:active { border-color: var(--blue); color: var(--txt) } .sec-info-btn:active { border-color: var(--blue); color: var(--blue) } .pm-btn:active { background: var(--bg3) } .zone-btn:active { border-color: var(--blue); color: var(--blue) } .modal-x:active { color: var(--blue) } .rlk:active { opacity: 1 } .pm-b:active { background: var(--bg3) } /* Touch-friendly tap targets — increase sizes on narrow viewports */ @media (pointer: coarse) { .sec-info-btn { width: 32px; height: 32px; font-size: 14px } .pm-btn { width: 36px; min-width: 36px } .pm-bar .pm-btn { width: 28px } .pm-ctrl { height: 36px } .rlk { width: 32px; height: 32px } .rlk-icon { width: 18px; height: 18px } .lock-icon { width: 16px; height: 16px; font-size: 14px } .scat-zoom-btn { width: 36px; height: 36px; font-size: 18px } .scat-flt-btn { height: 36px; padding: 0 14px } .scat-flt-opt { padding: 8px 12px; gap: 10px; font-size: var(--fs-base) } .scat-flt-opt input[type="checkbox"] { width: 18px; height: 18px } .scat-flt-clear { padding: 8px 12px } .scat-flt-dd { max-height: 50vh } .chk-box { width: 24px; height: 24px } .theme-switch { width: 48px; height: 28px } .theme-slider:before { width: 20px; height: 20px } .tep-calc-slider { width: 40px; height: 22px } .tep-calc-slider::after { width: 16px; height: 16px } .tab-step { width: 22px; height: 22px } .top-tab { padding: 10px 14px; font-size: 13px } .modal-x { width: 40px; height: 40px; font-size: 20px } .pm-head .modal-x { width: 36px; height: 36px } .mkt-fbtn { height: 36px } .zone-btn { min-height: 36px; padding: 6px 12px } .btn { height: 36px } .btn-sm { height: 34px; min-width: 36px } input[type="number"], input[type="text"], select { min-height: 36px; font-size: 16px } .ainp, .ainp2 { width: 48px; min-height: 32px; font-size: 14px } .ft-range-inp { width: 36px; min-height: 28px; font-size: 12px } table.main-tbl td, table.main-tbl th { padding: 10px 8px } .apt-v { width: 36px; height: 28px; font-size: 12px } .balance-slider::-webkit-slider-thumb { width: 32px; height: 32px } .balance-slider::-moz-range-thumb { width: 32px; height: 32px } .bal-dual-slider::-webkit-slider-thumb { width: 32px; height: 32px } .bal-dual-slider::-moz-range-thumb { width: 32px; height: 32px } .prop-slider::-webkit-slider-thumb { width: 28px; height: 28px } .prop-slider::-moz-range-thumb { width: 28px; height: 28px } .res-sections-toggle .toggle-arrow { width: 36px; height: 36px } .hint-icon { width: 24px; height: 24px } /* Reveal hover-only controls on touch (no hover available) */ .rlk { opacity: 0.7 } .sec-pm { opacity: 0.7; pointer-events: auto } .pm-row-act { opacity: 0.7 } .ft-cell .pm-bar { opacity: 0.8; pointer-events: auto } .vbar-col .pm-bar, .area-bar-col .pm-bar, .prop-bar-card .pm-bar { opacity: 0.8; pointer-events: auto } .sec-pm-td .sec-pm { opacity: 0.7; pointer-events: auto } } @media (max-width: 600px) { /* Layout */ .wrap { padding: 8px } .dash-hero { grid-template-columns: 1fr; gap: 12px } .dash-hero > div { border-right: none; padding: 12px } .dash-hero.accent-conflict { border-left: none; border-top: 2px solid var(--brd) } .mkt-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px } .mkt-room-row { grid-template-columns: repeat(2, 1fr) } .mkt-kpi-row2 { grid-template-columns: repeat(2, 1fr) } .sec-info-portal { width: calc(100vw - 24px); max-width: 360px; max-height: 60vh } /* Tab bar compact */ .top-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap } .tab-group-label { font-size: 8px } .tab-arrow { display: none } .top-tab { padding: 8px 10px; font-size: 11px; white-space: nowrap } /* Scatter */ .scat-filters { gap: 4px } .scat-flt-btn { height: 32px; padding: 0 10px; font-size: 12px } .scat-flt-dd { min-width: 180px } /* Tables scroll hint */ .res-card .res-bd, .mkt-tbl-wrap, .shares-tbl-wrap { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity } /* Inputs: prevent iOS zoom */ input[type="number"], input[type="text"], select, textarea { font-size: 16px } /* Modal full width */ .pm-dialog { width: calc(100vw - 24px); max-width: 500px } .modal-dialog { width: calc(100vw - 24px) } } @media (max-width: 400px) { .mkt-kpis { grid-template-columns: 1fr } .mkt-room-row { grid-template-columns: 1fr } .top-tab { padding: 6px 8px; font-size: 10px } .tab-step { display: none } .tab-divider { display: none } }