/* ============================================================================
   ORION INSTITUTIONAL TERMINAL | STYLESHEET v2.0
   "The Flux Interface"
   ============================================================================ */

:root {
    --orion-bg: #050505;        /* Void Black */
    --orion-panel: #0f1112;     /* Radar Panel */
    --orion-border: #222222;    /* Subtle dividers */
    --orion-text: #8b9bb4;      /* Tactical Grey */
    --orion-bright: #ffffff;    /* Signal White */

    /* Signal Colors */
    --signal-buy: #00FF99;      /* Matrix Green */
    --signal-sell: #FF3333;     /* Defcon Red */
    --signal-neutral: #445566;  /* Stealth Blue */
    --signal-gold: #FFD700;     /* Warning/Structure */

    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Inter', sans-serif;
}

/* --- THE TERMINAL GRID (Desktop Default) --- */
#orion-terminal {
    display: grid;
    grid-template-columns: 7fr 3fr; /* 70% Chart, 30% Intel */
    grid-template-rows: 1fr 1fr;    /* Right side split evenly */
    gap: 8px;
    height: 80vh;
    padding: 10px;
    background: var(--orion-bg);
    color: var(--orion-text);
    font-family: var(--font-mono);
    overflow: hidden;
}

/* ZONE A: The Main Chart */
.orion-zone-chart {
    grid-column: 1;
    grid-row: 1 / span 2;
    background: var(--orion-panel);
    border: 1px solid var(--orion-border);
    position: relative;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

/* CHART LOADING STATE (New for v2) */
.chart-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--signal-gold);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.4; }
    50% { opacity: 1; text-shadow: 0 0 10px var(--signal-gold); }
    100% { opacity: 0.4; }
}

/* ZONE B: Vector Card (Top Right) */
.orion-zone-vector {
    grid-column: 2;
    grid-row: 1;
    background: var(--orion-panel);
    border: 1px solid var(--orion-border);
    border-top: 2px solid var(--signal-gold);
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ZONE C: Analyst Briefing (Bottom Right) */
.orion-zone-briefing {
    grid-column: 2;
    grid-row: 2;
    background: var(--orion-panel);
    border: 1px solid var(--orion-border);
    border-top: 2px solid var(--signal-buy);
    padding: 15px;
    overflow-y: auto;
}

/* --- CUSTOM SCROLLBARS (Dark Mode) --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--orion-bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* --- HUD OVERLAYS (The Boxes on the Chart) --- */
.orion-hud-strip {
    position: absolute;
    top: 15px;
    left: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    gap: 15px;
    pointer-events: none; /* Click-through to chart */
}

.hud-box {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--orion-border);
    padding: 8px 12px;
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    min-width: 100px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.hud-label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--orion-text);
    margin-bottom: 2px;
}

.hud-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--orion-bright);
}

/* CRT Glow Effects */
.hud-value.buy, .signal-badge.BUY {
    color: var(--signal-buy);
    text-shadow: 0 0 8px rgba(0, 255, 153, 0.3);
}
.hud-value.sell, .signal-badge.SELL {
    color: var(--signal-sell);
    text-shadow: 0 0 8px rgba(255, 51, 51, 0.3);
}

/* --- VECTOR METRICS (Right Panel) --- */
.vector-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--orion-border);
    padding-bottom: 10px;
}

.vector-ticker {
    font-size: 24px;
    font-weight: 900;
    color: var(--orion-bright);
    letter-spacing: 1px;
}

.vector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.metric-cell {
    background: #08090a;
    padding: 10px;
    border-left: 2px solid var(--orion-border);
    transition: background 0.2s;
}

.metric-cell:hover {
    background: #111;
}

.metric-cell small { display: block; font-size: 9px; opacity: 0.7; }
.metric-cell span { display: block; font-size: 16px; font-weight: bold; margin-top: 4px; }

/* The "GOD SIGNAL" Badge */
.signal-badge {
    text-align: center;
    padding: 15px;
    font-size: 20px;
    font-weight: 900;
    border: 1px solid #333;
    background: #1a1a1a;
    margin-top: auto;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.signal-badge.BUY { background: rgba(0, 255, 153, 0.05); border-color: var(--signal-buy); }
.signal-badge.SELL { background: rgba(255, 51, 51, 0.05); border-color: var(--signal-sell); }
.signal-badge.HOLD { color: var(--orion-text); }

/* --- BRIEFING TYPOGRAPHY --- */
/* Note: The HTML structure is injected via JS, but these rules style it */
.briefing-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #ccc;
}
#orion-briefing-body h4 {
    color: var(--signal-gold);
    margin-top: 0;
    text-transform: uppercase;
    border-bottom: 1px dashed #333;
    padding-bottom: 5px;
    font-size: 11px;
    letter-spacing: 1px;
}
#orion-briefing-body p { margin-bottom: 10px; }

/* ============================================================================
   RESPONSIVE LOGIC (MOBILE & TABLET)
   ============================================================================ */

/* Deck Controls */
.orion-deck {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    padding: 0 10px;
}

@media screen and (max-width: 1024px) {
    #orion-terminal {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow-y: visible;
        padding: 5px;
    }

    .orion-zone-chart {
        width: 100%;
        height: 50vh;
        min-height: 350px;
        order: 1;
    }

    .orion-zone-vector {
        width: 100%;
        height: auto;
        min-height: 250px;
        order: 2;
    }

    .orion-zone-briefing {
        width: 100%;
        height: auto;
        min-height: 300px;
        order: 3;
    }

    /* SCROLLABLE HUD (Mobile Upgrade) */
    .orion-hud-strip {
        left: 10px;
        right: 10px;
        top: 10px;
        flex-wrap: nowrap;          /* Force single row */
        overflow-x: auto;           /* Enable horizontal scroll */
        padding-bottom: 5px;        /* Spacing for scrollbar */
        /* Smooth fade effect on the right edge */
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    }

    .hud-box {
        flex: 0 0 auto;             /* Don't shrink */
        width: 110px;               /* Fixed readable width */
    }

    .hud-value { font-size: 13px; }
    .vector-ticker { font-size: 20px; }
    .signal-badge { font-size: 16px; padding: 12px; }
}

.sub-label {
    display: block;
    font-size: 9px;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 4px;
    opacity: 0.9;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif; /* Clean sans-serif for readability */
}

/* Update the brief text to be more readable */
.briefing-text div {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}