/*
 * batch19-compact.css — Tab Isolation + No-Scroll Compact Layout
 * Batch 19: All 3 tabs fit in viewport. Internal scroll per section only.
 * Zero hardcoded colors — CSS vars only.
 */

/* ============================================================
   GLOBAL: lf-shell-content must not scroll
   ============================================================ */
#lf-shell-content {
    overflow: hidden !important;
}

/* Tab panels fill remaining height, no page scroll */
.lf-tab-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.lf-tab-panel--active {
    display: flex;
}

/* ============================================================
   PROPERTY INTELLIGENCE TAB (#lf-tab-intel)
   ============================================================ */
#lf-tab-intel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Compact header bar — 36px */
.pi-header {
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.pi-header__address {
    font-size: var(--text-sm);
    max-width: 280px;
    margin: 0;
}

#pi-scenario-trigger {
    padding: 4px 10px;
    font-size: var(--text-xs);
    height: 28px;
}

.pi-save-btn {
    padding: 4px 12px;
    font-size: var(--text-xs);
    height: 28px;
}

.pi-share-btn {
    width: 28px;
    height: 28px;
    font-size: var(--text-xs);
}

/* PI body: fills remaining, no overflow on container */
.pi-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 10px 14px;
    gap: 12px;
}

/* Left col: 55%, internal scroll */
.pi-col-left {
    flex: 55;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}

/* Right col: 45%, internal scroll */
.pi-col-right {
    flex: 45;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}

/* Photo: max 220px, no taller */
.pi-photo {
    max-height: 220px;
    aspect-ratio: unset;
    height: 220px;
    flex-shrink: 0;
}

/* AI agent panel: flexible remaining space */
.pi-ai-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pi-ai-panel__grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pi-ai-card {
    padding: 10px 12px;
}

.pi-ai-card__text {
    font-size: var(--text-xs);
    line-height: 1.45;
}

/* Key facts compact — 2×3 grid, 8px padding, 0.75rem font */
.pi-facts-card {
    padding: 10px 12px;
    flex-shrink: 0;
}

.pi-facts-card__title {
    margin-bottom: 8px;
    font-size: 9px;
}

.pi-fact-chip {
    padding: 5px 8px;
    gap: 6px;
}

.pi-fact-chip__label {
    font-size: 8px;
}

.pi-fact-chip__value {
    font-size: 0.75rem;
}

.pi-fact-chip__icon {
    width: 18px;
    height: 18px;
    font-size: 10px;
}

/* KPI grid: 2×4, each card max 52px */
.pi-kpi-section {
    flex-shrink: 0;
}

.pi-kpi-section__title {
    font-size: 9px;
    margin-bottom: 4px;
}

#pi-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.pi-kpi-card {
    max-height: 52px;
    padding: 7px 9px;
    gap: 2px;
}

.pi-kpi__label {
    font-size: 0.65rem;
    letter-spacing: 0.04em;
}

.pi-kpi__value {
    font-size: 0.82rem;
    text-shadow: none;
    letter-spacing: -0.01em;
}

/* Decision box compact */
.pi-decision-box {
    padding: 10px 12px;
    gap: 8px;
    flex-shrink: 0;
}

.pi-decision-box__label {
    font-size: 9px;
}

.pi-suggested-offer {
    font-size: var(--text-xl);
    line-height: 1;
}

.pi-confidence-label {
    font-size: 9px;
}

.pi-confidence-bar {
    height: 4px;
}

.pi-verdict-badge {
    padding: 3px 10px;
    font-size: 9px;
}

/* ============================================================
   CALCULATORS TAB (#lf-tab-calculators)
   ============================================================ */
#lf-tab-calculators {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Compact intel bar */
#lf-intel-bar.lf-intel-bar--open {
    max-height: 48px;
}

.lf-intel-bar__inner {
    height: 48px;
    padding: 0 16px;
    gap: 10px;
}

.lf-intel-thumb {
    width: 34px;
    height: 34px;
    font-size: var(--text-sm);
}

/* Compact snapshot strip: 48px */
#lf-snapshot {
    min-height: 48px;
    max-height: 48px;
}

.lf-kpi-tile {
    min-width: 100px;
    padding: 6px 12px;
}

.lf-kpi-tile__label {
    font-size: 9px;
}

.lf-kpi-tile__value {
    font-size: var(--text-sm);
}

.lf-confidence-chip {
    font-size: 9px;
    padding: 3px 10px;
}

/* Strategy switcher: 36px */
#lf-strategy {
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
}

.lf-strategy-tab {
    font-size: var(--text-xs);
    padding: 0 12px;
}

/* Workspace fills remaining — no outer scroll */
#lf-workspace {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Panels: internal scroll only */
#lf-panel-left,
#lf-panel-right {
    overflow-y: auto;
    overflow-x: hidden;
}

#lf-panel-center {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Panel card headers: 32px */
.lf-panel-card__header {
    padding: 6px 12px;
    min-height: 32px;
}

.lf-panel-card__title {
    font-size: 10px;
}

/* ============================================================
   REPORTS TAB (#lf-tab-reports)
   ============================================================ */
#lf-tab-reports {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.lf-tab-placeholder {
    overflow: hidden;
}

/* ============================================================
   SIDEBAR: Property list items — single line, 36px max
   ============================================================ */
.lf-property-item {
    min-height: unset;
    height: 36px;
    max-height: 36px;
    padding: 0 8px;
    align-items: center;
}

/* Old two-line card layout — hide if still present */
.lf-property-card {
    display: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .pi-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .pi-col-left,
    .pi-col-right {
        flex: unset;
        width: 100%;
        overflow: visible;
    }

    .pi-photo {
        height: 180px;
        max-height: 180px;
    }

    #pi-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
}