/*
 * strategy.css — Strategy Switcher & Surface Styles
 * Created: Batch 06 — Strategy Switcher
 *
 * Covers:
 *   - Tab active/hover/inactive states
 *   - Strategy surface swap transitions
 *   - Per-strategy accent overlays
 *   - Tile hidden state (.lf-tile-hidden)
 *   - Surface placeholder layout
 *
 * Depends on: css/base.css (must load first)
 * Zero hardcoded hex values — all CSS custom properties.
 */

/* ============================================================
   TAB OVERRIDES — supersede shell.css defaults
   ============================================================ */

/* Inactive tab */
.lf-strategy-tab {
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease, text-shadow 0.18s ease;
}

/* Hover */
.lf-strategy-tab:hover {
    color: var(--cyan-400);
    border-bottom-color: transparent;
}

/* Active tab — gold underline + gold text + subtle glow */
.lf-strategy-tab.lf-strategy-tab--active,
.lf-strategy-tab[aria-selected="true"] {
    color: var(--gold-500);
    border-bottom: 3px solid var(--gold-500);
    font-weight: var(--weight-semibold);
    text-shadow: 0 0 12px var(--gold-alpha-30);
}

/* ============================================================
   STRATEGY SURFACE CONTAINER
   All 5 surfaces live in DOM at all times.
   Visibility controlled by data-active-strategy on #lf-panel-center.
   ============================================================ */

/* Base surface — hidden by default */
.lf-strategy-surface {
    display: none;
    flex-direction: column;
    gap: var(--space-inner-sm);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-inner-sm);
    opacity: 0;
    transform: translateX(8px);
    /* No transition on hidden→display change; JS adds .lf-surface-enter */
}

/* Active surface — JS sets data-active-strategy, CSS shows matching surface */
#lf-panel-center[data-active-strategy="wholesale"] .lf-strategy-surface[data-strategy="wholesale"],
#lf-panel-center[data-active-strategy="flip"]      .lf-strategy-surface[data-strategy="flip"],
#lf-panel-center[data-active-strategy="rental"]    .lf-strategy-surface[data-strategy="rental"],
#lf-panel-center[data-active-strategy="brrrr"]     .lf-strategy-surface[data-strategy="brrrr"],
#lf-panel-center[data-active-strategy="financing"] .lf-strategy-surface[data-strategy="financing"] {
    display: flex;
}

/* Enter animation — applied by JS on the incoming surface */
.lf-strategy-surface.lf-surface-enter {
    animation: surfaceEnter 0.2s ease forwards;
}

/* Exit animation — applied by JS on the outgoing surface */
.lf-strategy-surface.lf-surface-exit {
    animation: surfaceExit 0.08s ease forwards;
    pointer-events: none;
}

@keyframes surfaceEnter {
    from {
        opacity: 0;
        transform: translateX(8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes surfaceExit {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-8px);
    }
}

/* ============================================================
   PROPERTY INTEL SURFACE — shown when no strategy selected
   (data-strategy="none") or before deal loaded
   ============================================================ */
#lf-property-intel {
    /* Visible when no active-strategy attribute set */
}

/* When a strategy is active, hide the intel surface */
#lf-panel-center[data-active-strategy] #lf-property-intel {
    display: none;
}

/* ============================================================
   SURFACE PLACEHOLDER LAYOUT
   ============================================================ */
.lf-surface-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.lf-surface-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lf-surface-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
    /* Color set per-strategy via modifier classes */
}

.lf-surface-title-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lf-surface-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    margin: 0;
}

.lf-surface-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: var(--leading-normal);
}

/* 2-column input/output placeholder grid */
.lf-surface-zones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-inner-sm);
    flex-shrink: 0;
}

.lf-surface-zone {
    padding: var(--space-inner-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
}

.lf-surface-zone__label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    color: var(--text-dim);
    text-transform: uppercase;
    margin: 0;
}

.lf-surface-zone__placeholder {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin: 0;
    font-style: italic;
}

/* Accent bar — top border highlight per strategy */
.lf-surface-accent-bar {
    height: 3px;
    border-radius: var(--radius-full);
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* ============================================================
   PER-STRATEGY ACCENT COLORS
   All via CSS vars — zero hardcoded hex
   ============================================================ */

/* Wholesale — gold */
.lf-strategy-surface[data-strategy="wholesale"] .lf-surface-accent-bar {
    background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
    box-shadow: var(--glow-gold-sm);
}
.lf-strategy-surface[data-strategy="wholesale"] .lf-surface-icon {
    background: var(--gold-alpha-10);
    border: 1px solid var(--gold-alpha-30);
    color: var(--gold-400);
}

/* Fix & Flip — cyan */
.lf-strategy-surface[data-strategy="flip"] .lf-surface-accent-bar {
    background: linear-gradient(90deg, var(--cyan-500), var(--cyan-300));
    box-shadow: var(--glow-cyan-sm);
}
.lf-strategy-surface[data-strategy="flip"] .lf-surface-icon {
    background: var(--cyan-alpha-10);
    border: 1px solid var(--cyan-alpha-30);
    color: var(--cyan-500);
}

/* Rental — green-tinted cyan */
.lf-strategy-surface[data-strategy="rental"] .lf-surface-accent-bar {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-positive) 90%, transparent), var(--cyan-400));
    box-shadow: 0 0 8px var(--color-positive-border);
}
.lf-strategy-surface[data-strategy="rental"] .lf-surface-icon {
    background: var(--color-positive-bg);
    border: 1px solid var(--color-positive-border);
    color: var(--color-positive);
}

/* BRRRR — purple-tinted (rgba overlay on cyan base) */
.lf-strategy-surface[data-strategy="brrrr"] .lf-surface-accent-bar {
    background: linear-gradient(90deg, var(--color-purple-accent), var(--cyan-500));
    box-shadow: 0 0 8px var(--color-purple-border);
}
.lf-strategy-surface[data-strategy="brrrr"] .lf-surface-icon {
    background: var(--color-purple-bg);
    border: 1px solid var(--color-purple-border);
    color: var(--color-purple);
}

/* Financing — amber */
.lf-strategy-surface[data-strategy="financing"] .lf-surface-accent-bar {
    background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
    box-shadow: var(--glow-gold-sm);
}
.lf-strategy-surface[data-strategy="financing"] .lf-surface-icon {
    background: var(--gold-alpha-10);
    border: 1px solid var(--gold-alpha-20);
    color: var(--gold-500);
}

/* ============================================================
   TILE HIDDEN STATE
   Dims tiles without removing from DOM.
   Never use display:none — strip layout must stay intact.
   ============================================================ */
.lf-kpi-tile.lf-tile-hidden {
    opacity: 0.15;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .lf-surface-zones {
        grid-template-columns: 1fr;
    }

    .lf-surface-title {
        font-size: var(--text-lg);
    }
}