/*
 * batch20-fix.css — Tab Switching Isolation + Viewport No-Scroll
 * Batch 20: Fixes all 3 tabs rendering simultaneously.
 *
 * Root cause: ID selectors (#lf-tab-intel etc.) with display:flex
 * were overriding the .lf-tab-panel { display:none } class rule
 * (IDs have higher specificity than classes).
 *
 * Fix: use !important on the hide rule, only show active panel.
 * Zero hardcoded colors.
 */

/* ============================================================
   VIEWPORT LOCK — no page scroll ever
   ============================================================ */
html, body {
    height: 100% !important;
    overflow: hidden !important;
}

#lf-app-frame {
    height: 100vh !important;
    display: flex !important;
    overflow: hidden !important;
}

#lf-shell-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* ============================================================
   TAB PANEL BASE — hidden by default, beats ID specificity
   Batch 26: 2 tabs only — intel + comps
   ============================================================ */
#lf-tab-intel,
#lf-tab-comps {
    display: none !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Legacy panels — keep hidden (content stored in lf-calc-surfaces-store) */
#lf-tab-calculators,
#lf-tab-reports {
    display: none !important;
}

/* ============================================================
   ACTIVE TAB — show, using the JS-toggled class
   ============================================================ */
#lf-tab-intel.lf-tab-panel--active {
    display: flex !important;
    flex-direction: column;
}

#lf-tab-comps.lf-tab-panel--active {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   PI TAB — internal layout when active
   ============================================================ */
#lf-tab-intel.lf-tab-panel--active .pi-header {
    display: flex;
    flex-shrink: 0;
}

#lf-tab-intel.lf-tab-panel--active .pi-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   CALCULATORS TAB — internal layout when active
   ============================================================ */
#lf-tab-calculators.lf-tab-panel--active #lf-intel-bar,
#lf-tab-calculators.lf-tab-panel--active #lf-snapshot,
#lf-tab-calculators.lf-tab-panel--active #lf-strategy {
    flex-shrink: 0;
}

#lf-tab-calculators.lf-tab-panel--active #lf-workspace {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   MAIN TABS BAR — hidden in STATE A, flex in B/C
   ============================================================ */
#lf-main-tabs {
    display: none;
}

body.lf-state-intel #lf-main-tabs,
body.lf-state-workspace #lf-main-tabs {
    display: flex !important;
    flex-shrink: 0;
    height: 46px;
}