/* ============================================
   Options Simulator - Mobile Stylesheet
   ============================================

   Mobile-first responsive design for smartphones
   Breakpoint: max-width 767px

   Layout structure (top to bottom):
   1. Hamburger Menu (60px fixed)
   2. Graf (full-width, 400px min, 55vh max)
   3. Opčný reťazec (swipeable, off-screen right)
   4. Ovládanie (horizontal layout)
   5. Trade sekcia (dátum, cena, nákup/short)
   6. Simulátor + Budget (stacked)
   7. Footer (compact)

   ============================================ */

/* ============================================
   1. MOBILE MENU (Hamburger + Slide-out)
   ============================================ */

/* Hamburger Menu Container */
.top-menu-container {
    height: 60px !important;  /* Larger for touch */
}

.top-menu {
    height: 60px !important;
    padding: 0 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Hide desktop menu items (they're in slide-out instead) */
.top-menu .menu-items {
    display: none !important;
}

/* Mobile menu layout (3-column centered):
   ☰ (left)     [LOGO centered]     Login (right)
*/

/* Left: Hamburger */
.menu-hamburger {
    flex: 0 0 auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    order: 1 !important;
}

/* Center: Logo - absolutely positioned for true centering */
.menu-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex: 0 0 auto;
}

/* Right: Auth (pushed to right) */
.menu-auth {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto !important;
    order: 3 !important;
}

/* Ensure menu bar is relative for logo positioning */
.top-menu {
    position: relative !important;
}

/* Hide floating theme-switcher button on mobile (created by theme-switcher.js) */
#theme-toggle-wrapper {
    display: none !important;
}

/* Hide theme toggle in top menu (only in slide-out) */
.theme-toggle-btn.mobile-only {
    display: none !important;
}

/* Hamburger Icon (☰) - button.menu-hamburger has element+class specificity
   which beats .mobile-only single-class specificity to ensure display:flex wins */
button.menu-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    width: 20px !important;
    height: 16px !important;
    cursor: pointer;
    z-index: 10001;
    min-height: 16px !important;
    min-width: 20px !important;
}

.menu-hamburger span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #e0e0e0 !important;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.menu-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.menu-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Slide-out Menu - !important needed to override style.css which has display:none!important */
.menu-slide-out {
    display: block !important;
    position: fixed !important;
    top: 60px;
    left: -100%;
    width: 280px;
    height: auto;
    max-height: calc(100vh - 60px);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    transition: left 0.3s ease;
    z-index: 9999;
    overflow-y: auto;
    border-radius: 0 0 12px 0;
    padding-bottom: 10px;
}

.menu-slide-out.open {
    left: 0;
}

.menu-slide-out-overlay {
    display: block !important;
    position: fixed !important;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 9998;
}

.menu-slide-out-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Menu Items in Slide-out */
.menu-items {
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 20px 0;
}

.menu-item {
    display: block !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px !important;
}

.menu-item::after {
    display: none !important;
}

/* Logo */
.menu-logo {
    height: 40px !important;
}

.menu-logo img,
.menu-logo-placeholder {
    height: 40px !important;
}

/* Dark/Light Toggle in slide-out menu */
.theme-toggle-mobile {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 10px;
}

.theme-toggle-mobile .theme-toggle-label {
    color: #9ca3af;
    font-size: 14px;
}

.theme-toggle-mobile .theme-toggle-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    color: #9ca3af;
    transition: all 0.2s ease;
    min-height: 36px !important;
    min-width: 36px !important;
}

.theme-toggle-mobile .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #d1d4dc;
}

.theme-toggle-mobile .theme-toggle-btn svg {
    flex-shrink: 0;
}

/* ============================================
   2. GRID LAYOUT - Stacked Mobile
   ============================================ */

.grid-container {
    display: flex !important;
    flex-direction: column !important;
    margin-top: 60px !important;  /* Space for fixed menu */
    height: auto !important;
    min-height: calc(100vh - 60px) !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}

/* CRITICAL: Override overflow:hidden/auto from .block and inner containers.
   Any element with overflow:auto/hidden creates a scroll container that
   traps touch events and prevents page-level scrolling. */
.block,
.block-content,
.simulation-content,
.portfolio-content,
.tab-content {
    overflow: visible !important;
}

/* ============================================
   3. GRAF BLOCK (Full-width)
   ============================================ */

.block-graph {
    order: 1;
    width: 100% !important;
    min-height: 400px !important;
    max-height: 55vh !important;
    overflow: hidden !important;  /* Clip chart content within max-height */
}

.block-header {
    padding: 8px 10px !important;
    flex-wrap: wrap !important;
}

.controls {
    flex-wrap: wrap !important;
    gap: 5px !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 10px !important;
}

/* Ticker group full width - single row */
.ticker-search-group {
    width: 100% !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    display: flex !important;
}

/* Wrapper must shrink to fit alongside other elements */
.ticker-search-wrapper {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.ticker-input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
}

.period-select {
    flex: 0 0 auto !important;
    font-size: 10px !important;
    padding: 4px 4px !important;
}

.load-ticker-btn {
    font-size: 11px !important;
    padding: 4px 10px !important;
    min-height: 32px !important;
    height: 32px !important;
    flex: 0 0 auto !important;
}

.info-ticker-btn {
    font-size: 16px !important;
    padding: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.ticker-input,
.period-select {
    min-height: 32px !important;
    height: 32px !important;
}

/* Hide AUTOMAT button on mobile */
.btn-automat,
.automat-stats {
    display: none !important;
}

/* Model settings + Generate on second row */
.model-settings-btn,
.generate-btn {
    flex: 1 !important;
    min-width: 80px !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    min-height: 32px !important;
    height: 32px !important;
}

/* Náhodne button (scenario selector) */
.btn-nahodne {
    font-size: 11px !important;
    padding: 6px 10px !important;
}

/* ============================================
   4. OPČNÝ REŤAZEC (Swipeable, Off-screen)
   ============================================ */

.block-options {
    order: 2;
    position: fixed !important;
    top: 60px;
    right: -100vw;  /* Off-screen initially */
    width: 100vw;
    height: calc(100vh - 60px);
    z-index: 9000;
    transition: right 0.3s ease;
    overflow-y: auto;
    pointer-events: none;
}

.block-options.visible {
    right: 0;  /* Slide in */
    pointer-events: auto;
}

/* Opčný reťazec overlay (darken background) */
.option-chain-overlay {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 8999;
}

.option-chain-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Swipe toggle button */
.option-chain-toggle {
    position: fixed;
    top: 70px;
    right: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 20px 0 0 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    z-index: 9001;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.3);
}

.option-chain-toggle.open {
    right: calc(100vw - 50px);
}

/* Option chain table - touch optimized */
.option-chain-table {
    font-size: 11px !important;
}

.option-chain-table td,
.option-chain-table th {
    padding: 8px 4px !important;
}

/* Buy/Sell buttons in option chain */
.option-buy-btn,
.option-sell-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-width: 50px !important;
}

/* ============================================
   5. OVLÁDANIE (Horizontal Layout)
   ============================================ */

.block-control {
    order: 3;
    width: 100% !important;
    min-height: auto !important;
    display: none !important;  /* Hidden on mobile, integrated into controls below */
}

.block-trade {
    display: none !important;  /* Hidden, integrated into mobile-controls */
}

/* New mobile controls section */
.mobile-controls {
    order: 3;
    width: 100%;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    padding: 8px 10px;
}

.mobile-controls-row {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    align-items: center;
    justify-content: center;
}

.mobile-controls-row:last-child {
    margin-bottom: 0;
}

/* Slider + Speed in one row - same width as playback buttons, centered */
.mobile-slider-speed-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    width: auto !important;
    max-width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Match slider row width to playback row (7 buttons × 36px + 6 gaps × 5px = ~282px + play btn wider) */
.mobile-slider-speed-row .mobile-slider-group {
    width: 220px !important;
    flex: 0 0 220px !important;
}

.mobile-slider-group {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mobile-slider-group .progress-slider {
    flex: 1;
    min-width: 0;
}

.mobile-slider-group .progress-info {
    flex: 0 0 auto;
    font-size: 10px;
    white-space: nowrap;
}

.mobile-slider-speed-row .speed-select {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 55px;
    font-size: 11px !important;
    padding: 4px 4px !important;
    height: 28px !important;
    min-height: 28px !important;
}

/* Playback controls - horizontal */
.playback-controls-mobile {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.control-btn {
    padding: 4px 8px !important;
    font-size: 16px !important;
    flex: 0 0 auto !important;
    min-width: 36px !important;
    height: 32px !important;
    min-height: 32px !important;
}

.control-btn.play-btn {
    flex: 0 0 auto !important;
    min-width: 50px !important;
}

/* Progress slider */
.progress-slider {
    width: 100% !important;
}

/* Speed selector */
.speed-select {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
}

/* ============================================
   6. TRADE SEKCIA (Dátum, Cena, Nákup/Short)
   ============================================ */

.mobile-trade {
    order: 4;
    width: 100%;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    padding: 10px;
}

.mobile-trade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mobile-trade-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.mobile-trade-price {
    font-size: 16px;
    color: var(--accent-primary);
    font-weight: 700;
}

.mobile-trade-buttons {
    display: flex;
    gap: 10px;
}

.mobile-trade-buttons button {
    flex: 1;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 32px;
    min-height: 32px;
}

.mobile-trade-buy {
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
    color: white;
}

.mobile-trade-buy:active {
    transform: scale(0.98);
}

.mobile-trade-short {
    background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
    color: white;
}

.mobile-trade-short:active {
    transform: scale(0.98);
}

/* ============================================
   7. SIMULÁTOR + BUDGET (Stacked)
   ============================================ */

.block-simulation {
    order: 5;
    width: 100% !important;
    min-height: auto !important;
    max-height: none !important;
}

.block-title {
    padding: 10px 15px !important;
    font-size: 13px !important;
}

/* Budget section - stacked vertically */
.budget-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

.budget-input-row {
    flex-direction: column !important;
    gap: 8px !important;
}

.budget-input {
    padding: 10px 12px !important;
    font-size: 13px !important;
}

.budget-btn,
.budget-btn-vklad {
    padding: 10px 15px !important;
    font-size: 13px !important;
}

/* Portfolio tabs - horizontal scroll */
.portfolio-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
}

.portfolio-tab {
    padding: 10px 15px !important;
    font-size: 12px !important;
    display: inline-block !important;
}

/* ============================================
   8. FOOTER (Compact)
   ============================================ */

.page-footer {
    order: 6;
    padding: 15px 10px !important;
    min-height: 60px !important;
    font-size: 12px !important;
    text-align: center !important;
}

/* ============================================
   9. MODÁLNE OKNÁ (Mobile)
   Pravidlo: 5% margin top/left/right, 90% width,
   výška podľa obsahu, thin scrollbar, padding 3vw
   ============================================ */

/* All modal overlays - no blur on mobile for performance */
.trade-modal-overlay,
.strategy-detail-modal-overlay,
.ai-mentor-modal-overlay,
.model-settings-modal-overlay,
.save-dashboard-modal-overlay,
.add-strategy-modal-overlay,
.deposit-modal-overlay,
.company-info-modal-overlay,
.error-modal-overlay,
.notification-modal-overlay,
.confirm-modal-overlay {
    backdrop-filter: none !important;
}

/* All modal windows - 5% margin, 90% width, content height */
.trade-modal,
.strategy-detail-modal,
.ai-mentor-modal,
.model-settings-modal,
.save-dashboard-modal,
.add-strategy-modal,
.deposit-modal,
.company-info-modal,
.volatility-chart-modal,
.error-modal,
.notification-modal,
.confirm-modal {
    position: fixed !important;
    top: 5vh !important;
    left: 5% !important;
    right: auto !important;
    bottom: auto !important;
    width: 90% !important;
    height: auto !important;
    max-width: none !important;
    max-height: 85vh !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    opacity: 1 !important;
    transform: none !important;
    cursor: default !important;
    padding: 3vw !important;
    /* Touch-friendly scroll when content overflows */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Thin scrollbar */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
}

/* Webkit thin scrollbar for all modals */
.trade-modal::-webkit-scrollbar,
.strategy-detail-modal::-webkit-scrollbar,
.ai-mentor-modal::-webkit-scrollbar,
.model-settings-modal::-webkit-scrollbar,
.save-dashboard-modal::-webkit-scrollbar,
.add-strategy-modal::-webkit-scrollbar,
.deposit-modal::-webkit-scrollbar,
.company-info-modal::-webkit-scrollbar,
.volatility-chart-modal::-webkit-scrollbar,
.error-modal::-webkit-scrollbar,
.notification-modal::-webkit-scrollbar,
.confirm-modal::-webkit-scrollbar {
    width: 4px !important;
}

.trade-modal::-webkit-scrollbar-track,
.strategy-detail-modal::-webkit-scrollbar-track,
.ai-mentor-modal::-webkit-scrollbar-track,
.model-settings-modal::-webkit-scrollbar-track,
.save-dashboard-modal::-webkit-scrollbar-track,
.add-strategy-modal::-webkit-scrollbar-track,
.deposit-modal::-webkit-scrollbar-track,
.company-info-modal::-webkit-scrollbar-track,
.volatility-chart-modal::-webkit-scrollbar-track,
.error-modal::-webkit-scrollbar-track,
.notification-modal::-webkit-scrollbar-track,
.confirm-modal::-webkit-scrollbar-track {
    background: transparent !important;
}

.trade-modal::-webkit-scrollbar-thumb,
.strategy-detail-modal::-webkit-scrollbar-thumb,
.ai-mentor-modal::-webkit-scrollbar-thumb,
.model-settings-modal::-webkit-scrollbar-thumb,
.save-dashboard-modal::-webkit-scrollbar-thumb,
.add-strategy-modal::-webkit-scrollbar-thumb,
.deposit-modal::-webkit-scrollbar-thumb,
.company-info-modal::-webkit-scrollbar-thumb,
.volatility-chart-modal::-webkit-scrollbar-thumb,
.error-modal::-webkit-scrollbar-thumb,
.notification-modal::-webkit-scrollbar-thumb,
.confirm-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 2px !important;
}

/* Trade modal container - stack vertically */
.trade-modal-container {
    position: fixed !important;
    top: 5vh !important;
    left: 5% !important;
    right: auto !important;
    bottom: auto !important;
    width: 90% !important;
    max-height: 85vh !important;
    transform: none !important;
    flex-direction: column !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Trade mentor panel - stack below trade modal on mobile */
.trade-mentor-panel {
    width: 100% !important;
    min-height: auto !important;
    max-height: 50vh !important;
    border-radius: 0 0 12px 12px !important;
}

/* Analytics panel - same 5%/90% pattern */
.analytics-panel {
    position: fixed !important;
    top: 5vh !important;
    left: 5% !important;
    right: auto !important;
    bottom: auto !important;
    width: 90% !important;
    height: auto !important;
    max-width: none !important;
    max-height: 85vh !important;
    border-radius: 12px !important;
    transform: none !important;
    cursor: default !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}

/* Modal close button - always visible top-right */
.modal-close-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 24px !important;
    z-index: 1000 !important;
}

/* ============================================
   10. UTILITIES & HELPERS
   ============================================ */

/* Hide desktop-only elements */
.desktop-only {
    display: none !important;
}

/* Show mobile-only elements */
.mobile-only {
    display: block !important;
}

/* Touch-friendly tap targets - only for auth buttons in modals/forms */
.oauth-btn,
.email-auth-btn {
    min-height: 44px;
}

/* Menu auth buttons - match menu height */
.menu-login-btn,
.menu-auth-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
}

/* Prevent text selection during touch */
.no-select {
    -webkit-user-select: none;
    user-select: none;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ============================================
   11. PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Hardware acceleration for animations */
.menu-slide-out,
.block-options,
.option-chain-overlay {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   12. GLOBAL OVERFLOW PREVENTION
   ============================================ */

/* Prevent horizontal scrollbar on mobile, ensure vertical scroll works.
   CRITICAL: body must NOT be overflow-y:auto - that creates a nested scroll
   container that traps touch events. Only html (viewport) should scroll.
   overscroll-behavior:auto allows scroll chaining from child to viewport. */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: auto !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
    max-width: 100vw !important;
}

/* Allow vertical scroll (pan-y) on all layout elements.
   Without this, touch events on buttons/controls get captured
   and prevent page scrolling on mobile. */
.grid-container,
.block,
.block-header,
.controls,
.ticker-search-group,
.block-simulator,
.block-playback,
.tabs-container,
.tab-content,
.portfolio-section,
.playback-controls {
    touch-action: pan-y !important;
}

/* Chart area - allow vertical scroll, Plotly handles horizontal pan.
   scrollZoom is disabled on mobile (see app.js), so touch-action: pan-y
   lets vertical swipe = page scroll while Plotly still handles tap/drag. */
.chart-area-wrapper,
.tradingview-charts,
#chart,
#volume-chart,
.chart-main,
.chart-volume {
    touch-action: pan-y !important;
}

/* Override Plotly.js internal inline touch-action:none on drag layers.
   Plotly adds touch-action:none to .nsewdrag and .drag elements which
   blocks ALL touch events including page scroll. */
#chart .nsewdrag,
#chart .drag,
#volume-chart .nsewdrag,
#volume-chart .drag,
.draglayer rect {
    touch-action: pan-y !important;
}

/* ============================================
   13. ANALYTICS PANEL - Mobile Overrides
   ============================================ */

/* IV metrics grid - 2 columns on mobile */
.iv-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

/* Portfolio greeks - 2 columns on mobile */
.portfolio-greeks-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

/* Analytics tabs - wrappable */
.analytics-tabs {
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.analytics-tab {
    font-size: 12px !important;
    padding: 6px 10px !important;
}

/* Risk metrics - stack vertically */
.risk-metrics-row {
    flex-direction: column !important;
    gap: 8px !important;
}

/* Breakeven display - stack vertically */
.breakeven-display {
    flex-direction: column !important;
    gap: 8px !important;
}

/* Scenario table - smaller font */
.scenario-table {
    font-size: 11px !important;
}

.scenario-table th,
.scenario-table td {
    padding: 4px !important;
}

/* PL diagram - smaller height */
.pl-diagram-chart {
    height: 200px !important;
}

/* ============================================
   14. VOLATILITY CHART MODAL - Mobile
   ============================================ */

.volatility-chart-controls {
    padding: 4px 10px !important;
    gap: 3px !important;
}

.vol-toggle-btn {
    font-size: 10px !important;
    padding: 3px 6px !important;
}

.vol-tab {
    font-size: 11px !important;
    padding: 5px 6px !important;
}

.volatility-chart-container {
    min-height: 220px !important;
    height: 220px !important;
}

.volatility-chart-status {
    font-size: 10px !important;
    padding: 4px 10px !important;
}

/* ============================================
   15. COMPANY INFO MODAL - Mobile
   ============================================ */

.company-info-header {
    padding: 12px 16px !important;
}

.company-info-header h2 {
    font-size: 16px !important;
}

.company-info-content {
    padding: 12px !important;
}

.info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

.info-item {
    padding: 8px !important;
}

.info-item-value {
    font-size: 14px !important;
}

.company-description {
    font-size: 13px !important;
    padding: 12px !important;
}

/* ============================================
   16. TRADE MODAL - Mobile Overrides
   ============================================ */

.trade-modal-body {
    padding: 12px !important;
}

.option-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}

.option-greeks-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
}

.pnl-analysis-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}

/* ============================================
   17. STRATEGY DETAIL MODAL - Mobile
   ============================================ */

.strategy-metrics,
.pl-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

.strategy-modal-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.strategy-detail-modal {
    padding: 12px !important;
}

/* ============================================
   18. AI MENTOR MODAL - Mobile
   ============================================ */

.ai-quick-actions {
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 6px !important;
}

.quick-action-btn {
    flex: 1 1 45% !important;
    font-size: 11px !important;
    padding: 8px 8px !important;
}

.ai-chat-input-area {
    padding: 10px 12px !important;
}

/* ============================================
   19. MODEL SETTINGS MODAL - Mobile
   ============================================ */

/* Selectors stacked vertically, with space for action buttons */
.modal-selectors-row {
    flex-direction: column !important;
    margin-right: 60px !important;
    gap: 8px !important;
}

.modal-time-select {
    max-width: none !important;
}

/* Action buttons - positioned relative to modal padding */
.model-settings-modal .modal-action-buttons {
    top: 3vw !important;
    right: 3vw !important;
}

.scenario-button {
    width: 100px !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
}

.scenario-description {
    font-size: 11px !important;
}

.scenarios-title {
    font-size: 14px !important;
    margin-bottom: 10px !important;
}

.scenario-item {
    gap: 8px !important;
    padding: 3px !important;
}

.modal-scenarios-section {
    margin-top: 12px !important;
}

/* ============================================
   20. LOGIN MODAL - Mobile
   ============================================ */

.login-modal {
    width: 90% !important;
    max-width: none !important;
    padding: 3vw !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
    left: 5% !important;
    top: 5vh !important;
}

.login-modal-title {
    font-size: 18px !important;
}

/* User dropdown - wider on mobile */
.user-dropdown {
    min-width: 180px !important;
    right: -10px !important;
}

/* ============================================
   21. SAVE DASHBOARD MODAL - Mobile
   ============================================ */

.summary-grid {
    grid-template-columns: 1fr !important;
}

.summary-stats {
    flex-direction: column !important;
    gap: 6px !important;
}

.save-dashboard-actions {
    flex-direction: column !important;
    gap: 8px !important;
}

.save-dashboard-btn {
    width: 100% !important;
    text-align: center !important;
}