/* ============================================
   CRITICAL CSS - Above the Fold Styles
   Load inline or synchronously for fast FCP
   Must stay in sync with style.css and menu.css
   ============================================ */

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

/* Vue v-cloak - CRITICAL for preventing FOUC */
[v-cloak]{display:none!important}

/* Body base - matches style.css body */
body{
    font-family:-apple-system,BlinkMacSystemFont,'Trebuchet MS',Roboto,Ubuntu,sans-serif;
    background:var(--bg-primary);
    min-height:100vh;
    color:var(--text-primary);
    padding:0;
    margin:0;
    overscroll-behavior-y:none;
    overflow-x:hidden
}

/* Main Grid Layout - matches style.css .grid-container */
.grid-container{
    display:grid;
    grid-template-columns:55% 10% 35%;
    grid-template-rows:40fr 60fr;
    gap:1px;
    height:calc(100vh - 44px);
    width:100vw;
    margin-top:44px;
    background:var(--bg-primary);
    box-sizing:border-box
}

/* Block Base - matches style.css .block */
.block{
    background:var(--bg-secondary);
    border-radius:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border-primary)
}

/* Graph Block Position */
.block-graph{grid-column:1;grid-row:1}

/* Block Header - matches style.css .block-header */
.block-header{
    background:var(--bg-secondary);
    padding:clamp(3px,0.42vh,5px) 12px;
    border-bottom:1px solid var(--border-primary)
}

/* Controls Row - matches style.css .controls */
.controls{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-left:5%
}

/* Ticker Search Group */
.ticker-search-group{display:flex;gap:4px;align-items:center}
.ticker-search-wrapper{position:relative}

/* Ticker Input - matches style.css .ticker-input */
.ticker-input{
    padding:5px 10px;
    border:1px solid var(--border-primary);
    border-radius:var(--radius-md);
    font-size:11px;
    background:var(--bg-tertiary);
    color:var(--text-primary);
    width:180px;
    height:var(--toolbar-btn-height);
    transition:all var(--transition-normal)
}
.ticker-input::placeholder{color:#666}

/* Select Inputs - matches style.css .model-select, .time-select */
.model-select,
.time-select{
    padding:6px 10px;
    border:1px solid var(--border-primary);
    border-radius:var(--radius-md);
    font-size:13px;
    background:var(--bg-tertiary);
    color:var(--text-primary);
    cursor:pointer;
    transition:all var(--transition-normal)
}
.model-select{min-width:130px}
.time-select{min-width:80px}

/* Period Select - matches style.css .period-select */
.period-select{
    padding:5px 8px;
    border:1px solid var(--border-primary);
    border-radius:var(--radius-md);
    font-size:11px;
    background:var(--bg-tertiary);
    color:var(--text-primary);
    cursor:pointer;
    min-width:60px;
    height:var(--toolbar-btn-height);
    transition:all var(--transition-normal)
}

/* Load Ticker Button - matches style.css .load-ticker-btn */
.load-ticker-btn{
    padding:5px 12px;
    background:var(--accent-primary);
    color:white;
    border:none;
    border-radius:var(--radius-md);
    font-size:11px;
    font-weight:500;
    cursor:pointer;
    height:var(--toolbar-btn-height);
    transition:all var(--transition-normal)
}
.load-ticker-btn:disabled{opacity:0.4;cursor:not-allowed}

/* Generate Button - matches style.css .generate-btn */
.generate-btn{
    padding:5px 16px;
    background:var(--accent-primary);
    color:var(--text-white);
    border:none;
    border-radius:var(--radius-md);
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    height:var(--toolbar-btn-height);
    transition:background 0.2s;
    white-space:nowrap
}
.generate-btn:disabled{opacity:0.5;cursor:not-allowed}

/* Model Settings Button - matches style.css .model-settings-btn */
.model-settings-btn{
    padding:5px 18px;
    background:var(--accent-primary);
    color:var(--text-white);
    border:none;
    border-radius:var(--radius-md);
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    height:var(--toolbar-btn-height);
    transition:all var(--transition-normal) ease;
    min-width:150px
}

/* Button Groups - matches style.css .button-group */
.button-group{
    display:flex;
    gap:0;
    background:var(--bg-primary);
    border-radius:var(--radius-md);
    overflow:hidden
}

/* Timeframe Buttons - matches style.css .tf-btn */
.tf-btn{
    padding:6px 12px;
    background:var(--bg-tertiary);
    border:none;
    border-right:1px solid var(--bg-primary);
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:all var(--transition-fast);
    color:var(--text-secondary)
}
.tf-btn:last-child{border-right:none}
.tf-btn.active{
    background:var(--accent-primary);
    color:var(--text-white);
    font-weight:600
}

/* Chart Type Buttons - matches style.css .chart-type-btn */
.chart-type-btn{
    padding:6px 14px;
    background:var(--bg-tertiary);
    border:none;
    border-right:1px solid var(--bg-primary);
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:all var(--transition-fast);
    color:var(--text-secondary)
}
.chart-type-btn:last-child{border-right:none}
.chart-type-btn.active{
    background:var(--accent-primary);
    color:var(--text-white);
    font-weight:600
}

/* Chart Container */
.chart-container{
    flex:1;
    position:relative;
    background:var(--bg-primary);
    min-height:200px
}

/* Sidebar Blocks */
.block-simulator{grid-column:3;grid-row:1/3}
.block-options{grid-column:1/3;grid-row:2}
.block-playback{grid-column:2;grid-row:1}

/* Tabs Container */
.tabs-container{display:flex;flex-direction:column;height:100%}
.tabs{
    display:flex;
    background:var(--bg-secondary);
    border-bottom:1px solid var(--border-primary);
    gap:4px;
    padding:8px
}
.tab-btn{
    padding:8px 16px;
    background:var(--bg-tertiary);
    border:none;
    border-radius:var(--radius-md);
    color:var(--text-secondary);
    font-size:12px;
    cursor:pointer
}
.tab-btn.active{
    background:var(--accent-primary);
    color:white
}

/* Tab Content */
.tab-content{flex:1;overflow:auto;padding:12px}

/* Info Panel - matches style.css .info-panel */
.info-panel{
    background:var(--bg-primary);
    padding:0;
    border-bottom:1px solid var(--border-primary);
    font-size:10px;
    color:var(--text-secondary);
    height:18px;
    line-height:18px;
    overflow:hidden
}

/* Loading placeholder for chart */
.chart-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    color:var(--text-secondary);
    font-size:14px
}

/* Desktop: Hide mobile-only elements */
.mobile-only,.menu-hamburger,.menu-slide-out,.menu-slide-out-overlay{display:none}

/* Page Footer - hidden until Vue mounts (prevents FOUC flash at top) */
.page-footer{
    display:none;
    background:var(--bg-secondary);
    border-top:1px solid var(--border-primary);
    padding:8px 20px;
    text-align:center;
    font-size:12px;
    color:var(--text-secondary)
}
.footer-content{display:flex;justify-content:center;align-items:center;gap:8px}

/* Mobile grid override - prevents layout shift (CLS) before style-mobile.css loads */
@media(max-width:767px){
    body{padding-top:60px}
    .grid-container{
        display:flex!important;
        flex-direction:column!important;
        margin-top:60px!important;
        height:auto!important;
        min-height:calc(100vh - 60px)!important;
        width:100%!important;
        gap:0!important;
        padding:0!important
    }
    .block-graph{width:100%!important;min-height:300px!important;max-height:50vh!important}
    .block-options{grid-column:auto;grid-row:auto}
    .block-simulator{grid-column:auto;grid-row:auto}
    .block-playback{grid-column:auto;grid-row:auto}
    .top-menu{height:60px!important;padding:0 15px!important;position:relative!important}
    .menu-items{display:none!important}
    button.menu-hamburger{display:flex!important;flex-direction:column!important;justify-content:space-around!important;width:20px!important;height:16px!important;min-height:16px!important;min-width:20px!important}
    .menu-hamburger span{display:block!important;width:100%!important;height:2px!important;background:var(--text-primary)!important}
    .menu-slide-out,.menu-slide-out-overlay{display:block!important}
    .menu-logo{position:absolute!important;left:50%!important;transform:translateX(-50%)!important}
    #theme-toggle-wrapper{display:none!important}
    .controls{margin-left:0}
    .desktop-only{display:none!important}
    .mobile-only{display:block!important}
}

/* Playback Controls Block */
.playback-controls{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px
}

/* Portfolio Section Placeholder */
.portfolio-section{padding:12px}
.portfolio-summary{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-bottom:12px
}
.portfolio-card{
    background:var(--bg-tertiary);
    padding:12px;
    border-radius:var(--radius-md);
    text-align:center
}
.portfolio-value{
    font-size:18px;
    font-weight:600;
    color:var(--text-primary)
}
.portfolio-label{
    font-size:11px;
    color:var(--text-secondary);
    margin-top:4px
}

/* ============================================
   CRITICAL MENU STYLES - Matches menu.css
   ============================================ */
.menu-wrapper{position:relative}
.top-menu-container{
    position:fixed;
    top:0;left:0;right:0;
    z-index:10000
}
/* Menu uses CSS grid (matches menu.css) */
.top-menu{
    background:var(--bg-secondary);
    height:44px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:0 30px;
    border-bottom:none;
    box-shadow:0 1px 4px rgba(0,0,0,0.06)
}
[data-theme="dark"] .top-menu{
    background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
    border-bottom:1px solid rgba(255,255,255,0.1);
    box-shadow:none
}
.menu-logo{height:36px;display:flex;align-items:center;text-decoration:none}
.menu-logo-img{height:32px;width:auto}
/* Hide placeholder until settings are loaded - prevents FOUC */
.menu-logo-placeholder{display:none}
.menu-items{display:flex;gap:8px;align-items:center;justify-content:center}
/* Menu items - matches menu.css (underline style, no bg) */
.menu-item{
    color:var(--text-secondary);
    text-decoration:none;
    padding:8px 12px;
    font-size:13px;
    font-weight:500;
    border-radius:0;
    position:relative;
    background:transparent
}
.menu-item:hover,.menu-item.active{color:var(--text-primary);background:transparent}
/* Auth section - matches menu.css .menu-auth */
.menu-auth{display:flex;gap:12px;align-items:center;justify-content:flex-end}
/* Login button - matches style.css .login-btn */
.login-btn{
    padding:8px 16px;
    background:var(--accent-primary);
    color:white;
    border:none;
    border-radius:6px;
    font-size:13px;
    font-weight:500;
    cursor:pointer
}