/* ═══════════════════════════════════════════
   OPCELERATE THEME TOGGLE — Shared Module
   Include in any demo page for light/dark mode
   ═══════════════════════════════════════════ */

/* Toggle button */
.theme-switch {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 20, 30, .85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all .3s;
    font-size: 12px;
    user-select: none
}

.theme-switch:hover {
    border-color: rgba(232, 132, 42, .3);
    transform: scale(1.04)
}

.theme-switch .ts-icon {
    font-size: 14px;
    transition: transform .4s
}

.theme-switch .ts-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ca3af;
    transition: color .3s
}

/* LIGHT MODE OVERRIDES */
body.light {
    --bg: #f5f5f7 !important;
    --card: #ffffff !important;
    --card2: #f0f0f3 !important;
    --border: rgba(0, 0, 0, .08) !important;
    --border-h: rgba(0, 0, 0, .14) !important;
    --text: #1a1a2e !important;
    --text2: #4a4a5e !important;
    --text3: #7a7a8e !important;
    --orange-dim: rgba(232, 132, 42, .08) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* Light mode toggle button */
body.light .theme-switch {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(0, 0, 0, .1)
}

body.light .theme-switch .ts-label {
    color: #4a4a5e
}

/* Light mode: common pattern overrides */
body.light .topbar,
body.light .sidebar,
body.light nav {
    background: rgba(255, 255, 255, .95) !important;
    border-color: rgba(0, 0, 0, .06) !important
}

body.light .panel,
body.light .stat,
body.light .card,
body.light .qs,
body.light .product-card,
body.light .result-card,
body.light .how-step {
    background: #fff !important;
    border-color: rgba(0, 0, 0, .06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
}

body.light .agent-task,
body.light .bill-item,
body.light .score-card,
body.light .funnel-step,
body.light .flow-node,
body.light .detail-item,
body.light .drop-zone {
    background: #f8f8fb !important;
    border-color: rgba(0, 0, 0, .06) !important
}

body.light .config-panel,
body.light .results,
body.light .user-card {
    background: #fff !important;
    border-color: rgba(0, 0, 0, .06) !important
}

/* Light mode inputs */
body.light input[type=range] {
    background: rgba(0, 0, 0, .06) !important
}

body.light .topbar-search,
body.light input[type=text] {
    background: #f8f8fb !important;
    border-color: rgba(0, 0, 0, .08) !important;
    color: #1a1a2e !important
}

body.light .exp-table thead th {
    background: #fff !important;
    color: #7a7a8e !important;
    border-color: rgba(0, 0, 0, .06) !important
}

body.light .exp-table td {
    border-color: rgba(0, 0, 0, .04) !important
}

/* Light mode misc */
body.light .score-bar,
body.light .progress-bar,
body.light .break-bar {
    background: rgba(0, 0, 0, .06) !important
}

body.light .pipeline thead th {
    background: #fff !important
}

body.light .pipeline tbody tr:hover {
    background: rgba(232, 132, 42, .04) !important
}

body.light .mini-bar {
    opacity: .7
}

body.light .detail-overlay {
    background: rgba(255, 255, 255, .7) !important
}

body.light .cal-day:hover {
    background: rgba(0, 0, 0, .04) !important
}

body.light .layout {
    background: rgba(0, 0, 0, .06) !important
}

/* Light mode hero gradient */
body.light .hero::before {
    background: radial-gradient(circle, rgba(232, 132, 42, .04) 0%, transparent 60%) !important
}

/* Mobile: reposition theme toggle to avoid hamburger overlap */
@media(max-width:1024px) {
    .theme-switch {
        top: 12px;
        right: 54px;
    }
}