/* ===========================================
   RESPONSIVE OVERRIDES - Valhalla Trading Platform
   Force desktop layout on all screen sizes
   =========================================== */

/* ===========================================
   TOUCH TOOLBAR - ALWAYS HIDDEN
   =========================================== */
#quick-chart-touch-toolbar,
.quick-chart-touch-toolbar {
    display: none !important;
}

/* Stock Card mobile nav dropdown - hidden on desktop */
#sc-nav-mobile {
    display: none;
}

/* ===========================================
   MOBILE OVERRIDES (< 768px)
   Mobile-optimized layout with hamburger navigation
   =========================================== */
@media (max-width: 768px) {
    /* Remove all max-width constraints */
    .container,
    .container.mx-auto,
    main .container,
    [class*="max-w-"] {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Header: compact, no horizontal scroll */
    header {
        overflow: hidden !important;
        padding: 0.5rem !important;
    }

    header > .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Hide desktop navigation on mobile - use hamburger sidebar instead */
    .navigation-container {
        display: none !important;
    }

    /* Hide non-essential header buttons on mobile */
    #shortcuts-btn,
    #guides-dropdown-container {
        display: none !important;
    }

    /* Mobile footer: copyright + dot menu */
    #footer-desktop {
        display: none !important;
    }
    #footer-mobile {
        display: flex !important;
    }

    /* Mobile sidebar overlay backdrop */
    .mobile-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 29;
    }

    .mobile-sidebar-overlay.active {
        display: block;
    }

    /* Mobile sidebar styling enhancements */
    .mobile-sidebar {
        z-index: 30 !important;
    }

    .mobile-sidebar nav button {
        font-size: 1rem !important;
        padding: 0.75rem 1rem !important;
        border-radius: 0.5rem;
        color: inherit;
    }

    .mobile-sidebar nav button:active {
        background-color: rgba(59, 130, 246, 0.2) !important;
    }

    .mobile-sidebar nav button.active {
        background-color: rgba(59, 130, 246, 0.15) !important;
        color: #3b82f6 !important;
        font-weight: 600;
    }

    /* Berserker filters scroll horizontally */
    #panel-berserker .bg-gray-800 {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    #panel-berserker .bg-gray-800 > div {
        flex-shrink: 0 !important;
    }

    /* Bigger touch targets for chart buttons */
    .stock-chart-header button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem !important;
        justify-content: center !important;
    }

    /* Give header info section some breathing room */
    #stock-chart-info {
        margin-right: 0 !important;
    }

    /* ---- QuickChart: hide header items on mobile ---- */
    #overlays-dropdown,
    #indicators-dropdown,
    #preset-dropdown-container,
    #layout-dropdown-container,
    #stock-chart-type-select,
    #display-settings-dropdown,
    #stock-chart-popout,
    #chart-shortcuts-btn,
    #multi-chart-controls,
    #scalper-mode-toggle,
    .scalper-mode-badge,
    .scalper-help-btn,
    .scalper-timeframe-btns,
    #add-to-watchlist-btn,
    #options-picker-btn,
    .chart-ohlcv-legend {
        display: none !important;
    }

    /* Tighten left-side header spacing to make room for close button */
    .stock-chart-header > div:first-child {
        gap: 0.4rem !important;
    }

    .stock-chart-header .qc-header-separator {
        margin: 0 2px !important;
    }

    #stock-chart-info {
        gap: 0.35rem !important;
    }

    /* ---- QuickChart: compact period/timeframe selects in header ---- */
    .stock-chart-header .qc-btn-group:has(#stock-chart-period-select) {
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .stock-chart-header .qc-btn-group:has(#stock-chart-period-select) select {
        width: auto !important;
        min-width: 0 !important;
        height: 28px !important;
        min-height: 28px !important;
        font-size: 0.75rem !important;
        padding: 0 4px !important;
    }

    /* Hide second separator (after hidden compat buttons, before scalper) */
    .stock-chart-header .qc-btn-group ~ .qc-header-separator {
        display: none !important;
    }

    /* Hide the right-side controls group (all children hidden on mobile) */
    .stock-chart-header > .qc-btn-group[style*="margin-left"] {
        display: none !important;
    }

    /* Close button: pinned to header top-right */
    .stock-chart-header {
        position: relative !important;
    }

    .stock-chart-header > .stock-chart-close {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        font-size: 1.2rem !important;
        background: #2a2e39 !important;
        border-radius: 4px !important;
        color: #d1d4dc !important;
    }

    /* ---- QuickChart: mobile slide-in panel ---- */
    #qc-mobile-tools-panel {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 10001;
        background: rgba(30, 34, 45, 0.95);
        border: 1px solid #363a45;
        border-left: none;
        border-radius: 0 10px 10px 0;
        padding: 8px 6px;
        transform: translateY(-50%) translateX(-100%);
        transition: transform 0.2s ease;
    }

    #qc-mobile-tools-panel.open {
        transform: translateY(-50%) translateX(0);
    }

    #qc-mobile-tools-panel button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        color: #9598a1;
        cursor: pointer;
        padding: 0 !important;
        transition: background 0.15s, color 0.15s;
    }

    #qc-mobile-tools-panel button:active,
    #qc-mobile-tools-panel button.active,
    #qc-mobile-tools-panel button.tap-highlight {
        background: rgba(41, 98, 255, 0.2) !important;
        color: #d1d4dc !important;
    }

    /* Reposition dropdown menus when opened from mobile panel */
    #stock-chart-overlay .qc-overlays-dropdown.open .qc-overlays-menu {
        position: fixed !important;
        left: 60px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: auto !important;
        max-height: 70vh !important;
        max-width: calc(100vw - 80px) !important;
        overflow-y: auto !important;
        z-index: 10001 !important;
    }

    /* ---- Scanner control bars: mobile-friendly wrapping ---- */

    /* Force flex-wrap on scanner header/filter rows that are missing it */
    #panel-penny > div > .flex.justify-between,
    #panel-penny .flex.justify-between > .flex {
        flex-wrap: wrap !important;
    }

    /* Hide vertical divider lines in composite config/filter bars */
    #composite-dashboard-widget .h-6.border-l {
        display: none !important;
    }

    /* Remove border-left on inline separator sections (BB Extreme etc.) */
    #composite-dashboard-widget .border-l.pl-3 {
        border-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Remove empty flex-1 spacers that push action buttons off-screen */
    #composite-dashboard-widget .flex-1:empty {
        display: none !important;
    }

    /* Darkpool: result count flows naturally instead of pushing right */
    #darkpool-trades-tab .ml-auto {
        margin-left: 0 !important;
    }

    /* Reduce padding in scanner config/filter bars */
    #composite-dashboard-widget > .rounded-lg,
    #darkpool-trades-tab > .rounded-lg,
    #panel-penny .bg-gray-800.rounded-lg {
        padding: 0.5rem !important;
    }

    /* Tighten gaps in scanner filter bars */
    #composite-dashboard-widget > .gap-3,
    #composite-dashboard-widget > .gap-4,
    #darkpool-trades-tab > .gap-3,
    #panel-penny .gap-4 {
        gap: 0.375rem 0.5rem !important;
    }

    /* Remove min-width constraints on scanner dropdowns */
    #composite-dashboard-widget select,
    #composite-dashboard-widget .multi-select-btn,
    #darkpool-trades-tab select {
        min-width: 0 !important;
    }
}

/* ===========================================
   QUICKCHART LOADING SCREEN
   =========================================== */
@keyframes qc-gear-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes qc-progress-fill {
    0% { width: 0%; }
    60% { width: 70%; }
    80% { width: 85%; }
    95% { width: 92%; }
    100% { width: 92%; }
}

#qc-loading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: #131722;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

#qc-loading.active {
    display: flex;
}

#qc-loading.fade-out {
    opacity: 0;
}

#qc-loading .qc-load-gear {
    width: 48px;
    height: 48px;
    color: #787b86;
    animation: qc-gear-spin 2s linear infinite;
}

#qc-loading .qc-load-text {
    color: #787b86;
    font-size: 0.85rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#qc-loading .qc-load-bar {
    width: 140px;
    height: 3px;
    background: #2a2e39;
    border-radius: 2px;
    overflow: hidden;
}

#qc-loading .qc-load-bar-fill {
    height: 100%;
    background: #2962ff;
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease-out;
}

#qc-loading .qc-load-pct {
    color: #5d606b;
    font-size: 0.7rem;
    font-family: monospace;
}

/* ===========================================
   DESKTOP - HIDE MOBILE-ONLY ELEMENTS
   =========================================== */
@media (min-width: 769px) {
    #mobile-menu-toggle,
    #mobile-sidebar,
    #mobile-sidebar-overlay,
    #landing-mobile-actions,
    #qc-mobile-tools-panel,
    #footer-mobile {
        display: none !important;
    }
}

/* ===========================================
   MOBILE - MARKET HEALTH BANNER
   =========================================== */
@media (max-width: 768px) {
    .regime-banner .regime-banner-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem;
        padding: 0.5rem 0.75rem !important;
    }

    .regime-banner .regime-banner-content > div {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #sector-breadth-toggle {
        display: none !important;
    }

    /* Briefing panel: stack columns on mobile */
    .regime-briefing-columns {
        flex-direction: column !important;
    }

    /* Landing page header - wrap so session indicator drops to row 2 */
    #landing-view > .flex.justify-between {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem;
    }

    /* Session indicator (Pre-Market, After Hours, Holiday) - full width row 2 */
    #market-session-indicator {
        order: 10 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    #landing-view > .flex.justify-between > .flex {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #landing-view > .flex.justify-between h1 {
        font-size: 1.125rem !important;
    }

    #landing-view > .flex.justify-between button {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
    }

    /* Prevent horizontal overflow on landing view */
    #landing-view {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* Dashboard grid - single column stack on mobile */
    #landing-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 8px !important;
        padding: 4px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #landing-grid .landing-grid-item {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: 200px;
        height: auto !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Let widget content determine height */
    #landing-grid .landing-widget {
        height: auto !important;
        min-height: 180px;
    }

    #landing-grid .widget-content {
        min-height: 150px;
        max-height: 400px;
    }

    /* Market Pulse widget - 2-column grid instead of 8-column */
    [data-widget-id="market-pulse"] .widget-content .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        height: auto !important;
    }

    [data-widget-id="market-pulse"] .widget-content .grid > div {
        flex-direction: column !important;
        padding: 8px 4px !important;
        min-height: 48px;
        gap: 2px;
    }

    [data-widget-id="market-pulse"] .widget-content .grid > div span {
        margin-left: 0 !important;
    }

    /* Hide desktop dashboard buttons but keep container for dropdown menus */
    .landing-desktop-actions {
        position: absolute !important;
        right: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: visible !important;
    }

    /* Hide the trigger buttons (Edit Layout, +Add, Theme btn, Layouts btn) */
    .landing-desktop-actions > button,
    #landing-theme-dropdown > button,
    #landing-preset-dropdown > button {
        display: none !important;
    }

    /* Position dropdown menus centered on mobile (moved to body via JS) */
    #landing-theme-menu:not(.hidden),
    #landing-preset-menu:not(.hidden) {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999 !important;
        max-height: 70vh !important;
        max-width: calc(100vw - 32px) !important;
        width: 300px !important;
        overflow-y: auto !important;
    }

    /* Show mobile gear dropdown, push to right */
    #landing-mobile-actions {
        display: block !important;
        margin-left: auto !important;
    }
}

/* ===========================================
   QUICK CHART - ALWAYS FIT VIEWPORT
   =========================================== */

/* Prevent body scroll when chart overlay is visible */
body:has(#stock-chart-overlay[style*="display: flex"]),
body:has(#stock-chart-overlay[style*="display:flex"]) {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Mobile-specific chart adjustments */
@media (max-width: 768px) {
    #stock-chart-overlay {
        /* Ensure no transform or margin offsets */
        transform: none !important;
    }

    .stock-chart-modal {
        /* Force full screen on mobile */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    /* Prevent any inner scrolling */
    .stock-chart-content {
        position: relative !important;
    }
}
#stock-chart-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for mobile */
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.stock-chart-modal {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.stock-chart-content,
#stock-chart-content {
    height: calc(100vh - 44px) !important;
    height: calc(100dvh - 44px) !important;
    max-height: calc(100vh - 44px) !important;
    max-height: calc(100dvh - 44px) !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#tv-chart-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Lightweight Charts canvas must fit container */
#tv-chart-container canvas,
#tv-chart-container > div {
    max-width: 100% !important;
    max-height: 100% !important;
}

.stock-chart-header {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ===========================================
   POPUPS - CENTER ON SCREEN
   (Settings modals use .qc-settings-modal in quick-chart.css)
   =========================================== */
#stock-chart-indicators-popup,
#display-settings-popup,
#chart-shortcuts-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000 !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* ===========================================
   MOBILE - STOCK CARD HEADER
   =========================================== */
@media (max-width: 768px) {
    /* Make the Stock Card full screen on mobile */
    #stock-card-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

    /* Header: top-align so buttons stay at top when content wraps below */
    #stock-card-drag-handle {
        align-items: flex-start !important;
        padding: 8px 12px !important;
    }

    /* Right buttons: vertically center with ticker input box */
    #stock-card-drag-handle > .flex.items-center.gap-2 {
        padding-top: 4px !important;
    }

    /* Left group: grid layout for 3-row mobile header */
    #stock-card-drag-handle > .flex.items-center.gap-3 {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 2px 8px !important;
    }

    /* Ticker input: row 1, spans full width */
    #stock-card-drag-handle > .flex.items-center.gap-3 > div:first-child {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* Flatten company wrapper so children become grid items */
    #stock-card-drag-handle > .flex.items-center.gap-3 > .flex-1,
    #stock-card-drag-handle > .flex.items-center.gap-3 > .flex-1 > div {
        display: contents !important;
    }

    /* Company name: row 2, left — next to price */
    #sc-company-name {
        grid-column: 1;
        grid-row: 2;
        font-weight: 600 !important;
        margin-top: 6px !important;
    }

    /* Industry/sector: row 3, full viewport width */
    #sc-industry {
        grid-column: 1 / -1;
        grid-row: 3;
        width: calc(100vw - 24px) !important;
    }

    /* Price + change: row 2, right — next to company name */
    #sc-price-info {
        grid-column: 2 !important;
        grid-row: 2 !important;
        white-space: nowrap !important;
        margin-top: 6px !important;
    }

    /* Shrink price text on mobile */
    #sc-price {
        font-size: 1rem !important;
    }

    /* Hide nav buttons on mobile, show dropdown instead */
    #sc-quick-nav > .flex-1 {
        display: none !important;
    }
    #sc-nav-mobile {
        display: block !important;
        flex: 1;
    }

    /* Remove the left border on lookback since buttons are gone */
    #sc-quick-nav > .shrink-0 {
        border-left: none !important;
        padding-left: 0 !important;
    }

    /* Activity section headers: prevent "(30 days)" wrapping */
    #sc-section-options h3 {
        white-space: nowrap !important;
    }
    /* Compact legend on mobile */
    #sc-section-options .flex.items-center.gap-4 {
        gap: 0.5rem !important;
    }

    /* Activity charts: reduce Y-axis width and container padding so bars fit */
    #sc-section-options .bg-gray-900\/50 {
        padding: 0.5rem !important;
        overflow: hidden !important;
    }
    #sc-section-options .pr-3 {
        padding-right: 0.25rem !important;
    }
    #sc-section-options .pr-3 span[style*="min-width: 60px"] {
        min-width: 36px !important;
        font-size: 9px !important;
    }
    /* Bars: remove min-width so they shrink to fit */
    #sc-section-options div[style*="min-width: 6px"] {
        min-width: 0 !important;
    }
    /* Date label row: reduce offset and hide labels to save space */
    #sc-section-options div[style*="padding-left: 63px"] {
        padding-left: 39px !important;
    }
    #sc-section-options div[style*="padding-left: 63px"] span {
        font-size: 8px !important;
    }
    /* Section padding */
    #sc-section-options {
        padding: 0.5rem !important;
    }

    /* Moneyness section: stack header on mobile */
    #sc-section-moneyness {
        padding: 0.5rem !important;
    }
    #sc-section-moneyness > .flex.items-center.justify-between {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }
    #sc-section-moneyness > .flex.items-center.justify-between > h3 {
        width: 100% !important;
        white-space: nowrap !important;
        font-size: 0.75rem !important;
    }
    /* Moneyness table: compact for mobile */
    #sc-moneyness-content th,
    #sc-moneyness-content td {
        padding: 0.25rem 0.35rem !important;
        font-size: 0.65rem !important;
    }

    /* Summary section: stack header rows on mobile */
    #sc-section-summary {
        padding: 0.5rem !important;
    }
    /* Summary header: timestamp below title, badges stacked on right */
    #sc-section-summary > .flex.items-center.justify-between > h3 > span {
        display: block !important;
        margin-left: 0 !important;
    }
    #sc-section-summary > .flex.items-center.justify-between > .flex.items-center {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 0.25rem !important;
    }

}