/* ── Quantoshi Web App — custom styles ─────────────────────────────────────── */

/* Force light rendering — prevents browser dark-mode (and Dark Reader etc.)
   from inverting or recoloring charts and UI. Plotly SVG backgrounds are
   already explicitly white; this stops extensions overriding them. */
:root {
    color-scheme: only light;
    --btc-orange: #f7931a;
    --nav-dark: #2c3e50;
    --nav-darker: #1a252f;
    --nav-lighter: #34495e;
}

/* Light theme base */
body {
    font-size: 13px;
    background-color: #f0f2f5 !important;
    color: #212529 !important;
}

/* ── #1: Navbar gradient ──────────────────────────────────────────────────── */
.navbar {
    background: linear-gradient(135deg, var(--nav-darker) 0%, var(--nav-dark) 50%, var(--nav-lighter) 100%) !important;
    overflow: visible !important;
    z-index: 1040;
    position: relative;
    border-radius: 10px;
}

/* Tab bar */
.nav-tabs {
    background-color: var(--nav-dark) !important;
    border-bottom: none !important;
    padding: 4px 8px 0;
    border-radius: 10px;
    margin-top: 4px;
}
.nav-tabs .nav-link {
    color: rgba(255,255,255,0.75) !important;
    border: none !important;
    border-radius: 4px 4px 0 0;
    padding: 4px 10px;
    font-size: 13px;
    transition: color 0.2s, background-color 0.2s;
}
.nav-tabs .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255,255,255,0.15) !important;
}

/* ── #2: Active tab orange accent ─────────────────────────────────────────── */
.nav-tabs .nav-link.active {
    color: var(--nav-dark) !important;
    background-color: #f0f2f5 !important;
    font-weight: 600;
    border-top: 3px solid var(--btc-orange) !important;
}

/* Export row */
.export-row {
    background-color: var(--nav-dark) !important;
    border-top: none !important;
    padding: 6px 12px !important;
}
.export-row .btn { color: #fff !important; border-color: rgba(255,255,255,0.4) !important; }

/* ── #3: Card elevation on hover ──────────────────────────────────────────── */
.ctrl-card {
    border: 1px solid #dee2e6 !important;
    background: #f8f9fa !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    border-radius: 8px !important;
}
.ctrl-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #c8ccd0 !important;
}
.ctrl-card .card-body { padding: 8px !important; }

/* ── #4: Bitcoin-orange accent for primary actions ────────────────────────── */
.btn-share-accent {
    background-color: var(--btc-orange) !important;
    border-color: var(--btc-orange) !important;
    color: #fff !important;
    font-weight: 600;
    transition: filter 0.15s;
}
.btn-share-accent:hover {
    filter: brightness(1.1);
    color: #fff !important;
}
.btn-generate-accent {
    background-color: var(--btc-orange) !important;
    border-color: var(--btc-orange) !important;
    color: #fff !important;
}
.btn-generate-accent:hover {
    filter: brightness(1.1);
    color: #fff !important;
}

/* ── Splash quote modal ───────────────────────────────────────────────────── */
.splash-modal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    background: linear-gradient(160deg, #fff 0%, #f8f6f0 100%);
}
.splash-modal .modal-body {
    border-radius: 16px;
}

/* ── #6: Smooth tab content fade-in ───────────────────────────────────────── */
.tab-content > .tab-pane {
    animation: fadeInTab 0.2s ease-in;
}
@keyframes fadeInTab {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── #7: Price ticker pulse on update ─────────────────────────────────────── */
.price-pulse {
    animation: pricePulse 0.6s ease-out;
}
@keyframes pricePulse {
    0%   { text-shadow: 0 0 8px rgba(247,147,26,0.8); }
    100% { text-shadow: none; }
}

/* ── #8: Better typography hierarchy — section headers ────────────────────── */
.form-label { font-size: 11px; color: #555; margin-bottom: 2px !important; }
.ctrl-section-header {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid #e0e0e0;
}

/* ── #9: Export row polish ─────────────────────────────────────────────────── */
.export-row-polished {
    background: #ebeef1;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 4px;
}
.export-row-polished .btn {
    background-color: var(--nav-dark) !important;
    border-color: var(--nav-dark) !important;
    color: #fff !important;
    font-weight: 500;
}
.export-row-polished .btn:hover {
    filter: brightness(1.15);
}

/* Compact sliders */
.rc-slider { margin-top: 4px; }

/* Compact checklists */
.form-check-label { font-size: 12px; }

/* Graph container — no excess padding, rounded corners */
.js-plotly-plot { width: 100%; border-radius: 8px; overflow: hidden; }

/* ── #10: Controls column scrollbar — navy themed ─────────────────────────── */
.controls-col {
    padding-right: 6px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--nav-dark) #f0f2f5;
}
.controls-col::-webkit-scrollbar { width: 6px; }
.controls-col::-webkit-scrollbar-track { background: #f0f2f5; }
.controls-col::-webkit-scrollbar-thumb { background: var(--nav-dark); border-radius: 3px; }
.controls-col::-webkit-scrollbar-thumb:hover { background: var(--nav-lighter); }

/* Export row (legacy — overridden by polished variant) */
.export-row { border-top: 1px solid #dee2e6; padding-top: 4px; }

/* DataTable tweaks — already styled inline but reinforce */
.dash-table-container .dash-spreadsheet-container { font-size: 12px; }

/* FAQ links — slightly muted vs default bright blue */
.accordion a { color: #1a6fa8 !important; }
.accordion a:hover { color: #154e78 !important; }

/* ── #11: Loading skeleton shimmer ────────────────────────────────────────── */
.chart-loading-skeleton {
    background: linear-gradient(90deg, #e8eaed 25%, #f0f2f5 50%, #e8eaed 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    min-height: 400px;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Mobile nav drawer — auto-collapse row 2 after 3s ─────────────────── */
.mobile-nav-drawer {
    overflow: hidden;
    max-height: 40px;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}
.mobile-nav-drawer.collapsed {
    max-height: 0;
    opacity: 0;
}
.mobile-nav-toggle {
    transition: opacity 0.3s ease;
}
.mobile-nav-toggle-hidden {
    opacity: 0;
    pointer-events: none;
}
.mobile-nav-toggle.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Desktop nav drawer — auto-collapse after 4s ─────────────────────── */
.desktop-nav-drawer {
    overflow: hidden;
    max-height: 50px;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    position: relative;
    z-index: 1050;
}
.desktop-nav-drawer.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}
.desktop-nav-toggle {
    transition: opacity 0.3s ease;
}
.desktop-nav-toggle-hidden {
    opacity: 0;
    pointer-events: none;
}
.desktop-nav-toggle.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── #12: Logo glow + pulsing orange accents ─────────────────────────── */
.logo-glow {
    filter: drop-shadow(0 0 6px rgba(247,147,26,0.5));
    transition: filter 0.4s ease;
}
.logo-glow:hover {
    filter: drop-shadow(0 0 12px rgba(247,147,26,0.8))
            drop-shadow(0 0 24px rgba(247,147,26,0.3));
}

/* Gentle breathing pulse on the active tab's orange accent */
.nav-tabs .nav-link.active {
    animation: accentBreath 3s ease-in-out infinite;
}
@keyframes accentBreath {
    0%, 100% { border-top-color: var(--btc-orange); }
    50%      { border-top-color: #fbb034; }
}

/* ── #10: Parallax depth — navbar responds to mouse ──────────────────── */
.navbar-parallax {
    transition: transform 0.15s ease-out;
    will-change: transform;
}

/* ── Mobile navbar touch targets — min 44px per Apple HIG ─────────────── */
.nav-touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Mobile: stack controls below chart ─────────────────────────────────── */
@media (max-width: 767px) {
    .controls-col {
        order: 2;
        max-height: none !important;
        width: 100% !important;
    }
    .tab-content .row.g-0 {
        flex-direction: column;
    }
    .tab-content .row.g-0 > .col-9,
    .tab-content .row.g-0 > .col-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100%;
    }
    /* Constrain both the dcc.Graph wrapper and the inner Plotly div.
       Without this the wrapper stays at 78vh while the plot is only 55vw,
       leaving a large blank gap that makes controls appear unreachable. */
    [id$="-graph"] {
        height: 55vw !important;
        min-height: 280px !important;
    }
    .js-plotly-plot {
        height: 55vw !important;
        min-height: 280px !important;
    }
}