/* ============================================
   CRITICAL CSS - Above the Fold Styles
   Load inline or synchronously for fast FCP
   ============================================ */

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

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

/* Body base */
body{
    font-family:-apple-system,BlinkMacSystemFont,'Trebuchet MS',Roboto,Ubuntu,sans-serif;
    background:var(--bg-primary);
    min-height:100vh;
    color:var(--text-primary);
    padding-top:44px /* Space for fixed menu */
}

/* Main Grid Layout */
.grid-container{
    display:grid;
    grid-template-columns:55% 10% 35%;
    grid-template-rows:55vh 45vh;
    gap:1px;
    height:calc(100vh - 44px); /* Subtract menu height */
    width:100vw;
    background:var(--bg-primary)
}

/* Block Base */
.block{
    background:var(--bg-secondary);
    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 */
.block-header{
    background:var(--bg-secondary);
    padding:10px 12px;
    border-bottom:1px solid var(--border-primary)
}

/* Controls Row */
.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}

/* Input Base Styles */
.ticker-input,
.period-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
}
.ticker-input{width:180px}
.ticker-input::placeholder{color:#666}

/* Button Base Styles */
.load-ticker-btn,
.model-settings-btn,
.generate-btn{
    padding:6px 12px;
    border:none;
    border-radius:var(--radius-md);
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all .2s
}

.load-ticker-btn,
.generate-btn{
    background:var(--accent-primary);
    color:white
}
.model-settings-btn{
    background:var(--accent-primary);
    color:var(--text-white);
    min-width:150px
}

.load-ticker-btn:disabled,
.generate-btn:disabled{opacity:.4;cursor:not-allowed}

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

/* Timeframe/Chart Type Buttons */
.tf-btn,
.chart-type-btn{
    padding:6px 12px;
    background:var(--bg-tertiary);
    border:none;
    color:var(--text-secondary);
    font-size:12px;
    cursor:pointer
}
.tf-btn.active,
.chart-type-btn.active{
    background:var(--accent-primary);
    color:white
}

/* 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 (below header) */
.info-panel{
    background:#1a1d28;
    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
}

/* 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 - Prevent FOUC
   ============================================ */
.menu-wrapper{position:relative}
.top-menu-container{
    position:fixed;
    top:0;left:0;right:0;
    z-index:10000
}
.top-menu{
    background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
    height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 30px;
    border-bottom:1px solid rgba(255,255,255,0.1)
}
.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-logo-text{
    color:var(--text-primary);
    font-size:14px;
    font-weight:600;
    padding:6px 12px;
    background:var(--accent-primary);
    border-radius:var(--radius-md)
}
.menu-items{display:flex;gap:8px;align-items:center}
.menu-item{
    color:#9ca3af;
    text-decoration:none;
    padding:8px 16px;
    font-size:13px;
    border-radius:var(--radius-md)
}
.menu-item:hover,.menu-item.active{color:#fff;background:rgba(255,255,255,0.1)}
.menu-actions{display:flex;gap:12px;align-items:center}
.login-btn{
    background:var(--accent-primary);
    color:#fff;
    border:none;
    padding:8px 20px;
    border-radius:var(--radius-md);
    font-size:13px;
    cursor:pointer
}