/*
 * mobile-v2.css — Mobile Responsive Pass V2
 * Batch 62: Sidebar drawer, bottom tab bar, PI tab mobile layout,
 *           comps single-column, modal full-screen, touch targets,
 *           iOS zoom prevention, overflow control.
 *
 * Loads after responsive.css and mobile-quick.css.
 * responsive.css already handles: sidebar off-canvas, lf-sidebar-open,
 *   #lf-mobile-overlay, #lf-bottom-tabs, lf-sidebar-collapse.
 * mobile-quick.css handles: Quick Mode, landing, strategy subtabs,
 *   deal progress collapse, snapshot strip.
 *
 * This file targets:
 *   - Hamburger button (#lf-mobile-menu-btn)
 *   - Bottom tab bar restyling (main tabs → bottom, gold active)
 *   - PI tab layout (header stacking, summary row, timeline, market pulse)
 *   - Strategy panel KPI grid (2-col)
 *   - Decision Hero single-column
 *   - AI panel single-column
 *   - Comps tab single-column + map below
 *   - Scenario modal full-screen
 *   - Dashboard table column pruning
 *   - New Property modal bottom-sheet
 *   - General tap targets + font-size + overflow
 *   - Remove hover on touch devices (supplemental)
 *
 * Zero hardcoded colors except rgba shadows and white (#ffffff) where required.
 * !important used only where specificity battles are unavoidable.
 */

/* ============================================================
   GLOBAL OVERFLOW CONTROL
   ============================================================ */
body,
#lf-app-frame,
#lf-shell-content {
    overflow-x: hidden;
}

/* ============================================================
   ≤ 768px — HAMBURGER BUTTON
   #lf-mobile-menu-btn injected by index.html inline script
   Position: fixed top-left, gold, z-index 200
   ============================================================ */
@media (max-width: 768px) {

    #lf-mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 200;
        width: 44px;
        height: 44px;
        background: var(--gold-500);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        flex-direction: column;
        gap: 5px;
        padding: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
        transition: background 0.15s ease;
        flex-shrink: 0;
    }

    #lf-mobile-menu-btn:hover {
        background: var(--gold-600, var(--gold-500));
    }

    /* Hamburger lines via child spans (injected by inline script) */
    #lf-mobile-menu-btn .lf-ham-line {
        display: block;
        width: 20px;
        height: 2px;
        background: #ffffff;
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease;
        flex-shrink: 0;
    }

    /* X state when sidebar open */
    body.lf-sidebar-open #lf-mobile-menu-btn .lf-ham-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    body.lf-sidebar-open #lf-mobile-menu-btn .lf-ham-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    body.lf-sidebar-open #lf-mobile-menu-btn .lf-ham-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* Hide hamburger on desktop */
@media (min-width: 769px) {
    #lf-mobile-menu-btn {
        display: none !important;
    }
}

/* ============================================================
   ≤ 768px — SIDEBAR OPEN STATE
   responsive.css handles translateX(-100%) / open toggle.
   This adds the sidebar open class on body to show overlay.
   ============================================================ */
@media (max-width: 768px) {

    /* When sidebar open: show the mobile overlay */
    body.lf-sidebar-open #lf-mobile-overlay {
        display: block;
    }

    /* Sidebar open — slide in */
    body.lf-sidebar-open #lf-sidebar {
        transform: translateX(0) !important;
    }

    /* Push shell content slightly to show edge — optional, subtle */
    /* (no transform on shell to avoid z-index stacking issues) */

    /* Sidebar gets fixed positioning + proper z-index */
    #lf-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px !important;
        z-index: 150;
        transition: transform 0.25s ease;
    }

    /* Overlay for sidebar: clickable dark veil */
    #lf-mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 140;
        background: rgba(0, 0, 0, 0.40);
        display: none;
        cursor: pointer;
    }

    body.lf-sidebar-open #lf-mobile-overlay {
        display: block !important;
    }
}

/* ============================================================
   ≤ 768px — BOTTOM TAB BAR (main tabs restyled)
   #lf-main-tabs moves to bottom, icon-over-label, gold active
   responsive.css already has #lf-bottom-tabs (a separate element).
   Here we restyle #lf-main-tabs to act as bottom nav on mobile.
   ============================================================ */
@media (max-width: 768px) {

    #lf-main-tabs {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        z-index: 500;
        height: 56px;
        display: flex !important;
        flex-direction: row;
        align-items: stretch;
        background: #ffffff;
        border-top: 1px solid var(--glass-border);
        border-bottom: none !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
        padding: 0;
    }

    /* Pad shell content so tabs don't cover content */
    #lf-shell-content {
        padding-bottom: 56px !important;
    }

    .lf-main-tab {
        flex: 1;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        height: 56px !important;
        min-height: 44px !important;
        padding: 6px 4px !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.03em !important;
        border-bottom: none !important;
        border-top: 2px solid transparent;
        color: var(--text-muted);
        background: none !important;
    }

    .lf-main-tab i {
        font-size: 1.1rem;
        display: block;
        margin-bottom: 1px;
    }

    /* Active tab — gold */
    .lf-main-tab.lf-main-tab--active {
        color: var(--gold-600, var(--gold-500)) !important;
        border-top: 2px solid var(--gold-500) !important;
        border-bottom: none !important;
        background: none !important;
    }

    .lf-main-tab.lf-main-tab--active i {
        color: var(--gold-500);
    }
}

/* ============================================================
   ≤ 768px — PI HEADER STACKING
   Row 1: address + compact score chip
   Row 2: strategy subtabs (handled by mobile-quick.css)
   Row 3: run button full-width, reports hidden
   ============================================================ */
@media (max-width: 768px) {

    .pi-header {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 8px 44px 8px 12px !important; /* left padding for hamburger */
        gap: 6px !important;
        align-items: flex-start;
    }

    /* Row 1: address + score chip side by side */
    .pi-header__left {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        display: flex;
        align-items: center;
        gap: 8px;
        order: 1;
        width: 100%;
    }

    .pi-header__address {
        font-size: 0.85rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 60px);
    }

    /* Compact score: number only, no ring */
    #lf-deal-score-header {
        display: flex !important;
        width: auto !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 4px 8px !important;
        background: transparent !important;
        border: none !important;
        flex-shrink: 0 !important;
    }

    #lf-deal-score-header .deal-score__ring {
        display: none !important;
    }

    #lf-deal-score-header .deal-score__number {
        font-size: 0.9rem !important;
        font-family: var(--font-display) !important;
        color: var(--gold-500) !important;
        position: static !important;
    }

    #lf-deal-score-header .deal-score__label,
    #lf-deal-score-header .deal-score__signals {
        display: none !important;
    }

    /* Row 2: strategy subtabs — handled by mobile-quick.css (.pi-header__center, order 10) */

    /* Row 3: right-side actions */
    .pi-header__right {
        order: 2;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
    }

    /* Run Scenario button: full width gold on mobile */
    .pi-run-btn {
        flex: 1 !important;
        height: 44px !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
    }

    /* Reports button: hide on mobile */
    .pi-reports-btn {
        display: none !important;
    }

    /* Mode toggle: compact */
    .lf-mode-toggle {
        flex-shrink: 0;
    }

    .lf-mode-toggle__btn {
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 0.72rem !important;
    }
}

/* ============================================================
   ≤ 768px — PROPERTY SUMMARY ROW
   Stack photo + facts vertically
   ============================================================ */
@media (max-width: 768px) {

    .pi-summary-row {
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        padding: 12px !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .pi-summary-photo {
        width: 100% !important;
        height: 160px !important;
        border-radius: 10px !important;
        object-fit: cover;
        flex-shrink: 0 !important;
    }

    .pi-summary-facts {
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100%;
    }

    .pi-summary-ai-status {
        margin-left: 0 !important;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

/* ============================================================
   ≤ 768px — DEAL TIMELINE STRIP
   2 fields per row grid, height auto
   ============================================================ */
@media (max-width: 768px) {

    #lf-deal-timeline {
        height: auto !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
    }

    /* Timeline fields container — 2-col grid */
    /* from deal-timeline.css: .dt-fields or direct children */
    #lf-deal-timeline > *,
    .dt-fields {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100%;
    }

    .dt-field {
        min-height: 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Remove pseudo-element dividers between fields */
    .dt-field + .dt-field::before {
        display: none !important;
    }
}

/* ============================================================
   ≤ 768px — MARKET PULSE STRIP
   Horizontal scroll, 140px min per chip
   ============================================================ */
@media (max-width: 768px) {

    #lf-market-pulse {
        padding: 0 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: flex;
        align-items: center;
        flex-wrap: nowrap !important;
    }

    #lf-market-pulse::-webkit-scrollbar {
        display: none;
    }

    .mp-chip {
        min-width: 140px !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   ≤ 768px — STRATEGY PANELS
   KPI cards: 2-col grid, Decision Hero: single column,
   DNA chart: centered, AI panel: single column
   ============================================================ */
@media (max-width: 768px) {

    /* Strategy panel: full viewport scroll */
    .pi-strategy-panel {
        padding: 12px !important;
        gap: 12px !important;
    }

    /* KPI cards row: 2-column grid */
    .dash-kpi-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 8px 0 !important;
    }

    .dash-metric-card {
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Decision Hero: single column */
    .dash-hero {
        flex-direction: column !important;
        border-radius: 10px !important;
        border-left-width: 0 !important;
        border-top: 4px solid var(--gold-500) !important;
    }

    .dash-hero--strong   { border-top-color: var(--gold-500) !important; border-left: none !important; }
    .dash-hero--caution  { border-top-color: #f59e0b !important;          border-left: none !important; }
    .dash-hero--pass     { border-top-color: var(--color-negative) !important; border-left: none !important; }

    .dash-hero__left,
    .dash-hero__right {
        flex: none !important;
        width: 100% !important;
        padding: 14px !important;
    }

    .dash-hero__right {
        border-left: none !important;
        border-top: 1px solid var(--glass-border) !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        gap: 16px !important;
    }

    /* Action buttons: wrap */
    .dash-hero__actions {
        flex-wrap: wrap !important;
    }

    .dash-hero-btn {
        flex: 1 1 auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Deal DNA chart: centered, 120px */
    .lf-dna-card {
        width: 100% !important;
    }

    .dna-card__chart {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto !important;
    }

    .dna-card__chart-inner {
        width: 120px !important;
        height: 120px !important;
    }

    /* AI agent panel: single column */
    .pi-ai-panel__grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* pi-strategy-bottom: stack vertically */
    .pi-strategy-bottom {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .pi-strategy-bottom .pi-decision-box {
        flex: none !important;
        width: 100% !important;
    }

    .pi-strategy-bottom .pi-ai-panel {
        width: 100% !important;
    }

    /* PI KPI grid: 2 columns */
    .pi-kpi-grid-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Cash flow indicator: compact */
    .dash-cashflow-indicator {
        padding: 10px !important;
    }

    .dash-cashflow-indicator__value {
        font-size: var(--text-2xl) !important;
    }
}

/* ============================================================
   ≤ 768px — COMPS TAB
   Single column: comps list on top, map below
   ============================================================ */
@media (max-width: 768px) {

    #lf-tab-comps.lf-tab-panel--active {
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    .comps-col-left,
    .comps-col-right {
        flex: none !important;
        width: 100% !important;
    }

    .comps-col-left {
        max-height: 55vh;
        border-right: none !important;
        border-bottom: 1px solid var(--glass-border) !important;
    }

    .comps-col-right {
        min-height: 0;
    }

    /* Map: 240px fixed height */
    .fdcc-map-container,
    .comps-map-placeholder {
        height: 240px !important;
        min-height: 240px !important;
        flex: none !important;
    }

    .fdcc-map-container .leaflet-container {
        height: 240px !important;
        min-height: 240px !important;
    }

    /* Comps map wrap: no flex:1 stretch */
    .comps-map-wrap {
        flex: none !important;
        padding: 8px !important;
    }

    /* Suggested comp cards */
    .comp-suggest-card {
        padding: 12px !important;
    }

    /* Confirm/Dismiss buttons: equal width, full row */
    .comp-suggest-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100%;
    }

    .comp-suggest-btn--confirm,
    .comp-suggest-btn--dismiss {
        height: 44px !important;
        flex: 1 !important;
        width: 100% !important;
    }
}

/* ============================================================
   ≤ 768px — RUN SCENARIO MODAL
   Full screen, fixed header + footer, scrollable content
   ============================================================ */
@media (max-width: 768px) {

    /* Full screen overlay */
    .sm-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    /* Full screen card */
    .sm-card {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Fixed header */
    .sm-card .sm-header {
        flex-shrink: 0 !important;
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--surface-dark, #ffffff);
    }

    /* Scrollable body */
    .sm-card .sm-body {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 80px !important; /* space for fixed footer */
    }

    /* Fixed footer */
    .sm-card .sm-footer {
        flex-shrink: 0 !important;
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: var(--surface-dark, #ffffff);
        border-top: 1px solid var(--glass-border);
        padding: 12px 16px !important;
    }

    /* Step progress bar: horizontal scroll */
    #sm-progress {
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }

    #sm-progress::-webkit-scrollbar { display: none; }

    /* Step circles: 28px */
    .sm-step__num {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.72rem !important;
        flex-shrink: 0 !important;
    }

    /* Step labels: hidden, show only for active step */
    .sm-step__label {
        display: none !important;
    }

    .sm-step--active .sm-step__label {
        display: block !important;
        font-size: 0.62rem !important;
    }

    /* Back/Next buttons: equal width */
    .sm-btn-back,
    .sm-btn-next,
    .sm-btn-save {
        flex: 1 !important;
        height: 48px !important;
        font-size: 0.88rem !important;
    }

    /* Step panels: full width inputs */
    .sm-step-panel {
        padding: 12px !important;
    }

    /* Preset buttons: wrap to 2 rows */
    .sm-presets {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .sm-preset-btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        min-height: 44px !important;
    }
}

/* ============================================================
   ≤ 768px — DASHBOARD TABLE
   Keep: Address, Strategy, ROI, Score. Hide others.
   from css/dashboard.css: .db-table thead th / tbody td
   ============================================================ */
@media (max-width: 768px) {

    /* Dashboard full-screen on mobile */
    #lf-dashboard-panel {
        position: fixed !important;
        inset: 0 !important;
        z-index: 100 !important;
        overflow-y: auto !important;
        padding-bottom: 60px !important;
    }

    /* Row height for easy tapping */
    .db-table tbody tr {
        height: 52px !important;
    }

    /* Hide less important columns:
       keep col 1 (address), col 3 (strategy), col 5 (ROI), last (score/actions)
       Column indices vary — hide by content: Conf, ARV, Profit, Date columns */
    .db-table th:nth-child(2),
    .db-table td:nth-child(2),
    .db-table th:nth-child(4),
    .db-table td:nth-child(4),
    .db-table th:nth-child(6),
    .db-table td:nth-child(6) {
        display: none !important;
    }

    /* Allow horizontal scroll on table if needed */
    .db-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   ≤ 768px — NEW PROPERTY MODAL — BOTTOM SHEET
   Slides up from bottom, 85vh, rounded top corners
   ============================================================ */
@media (max-width: 768px) {

    .np-modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .np-card {
        width: 100vw !important;
        height: 85vh !important;
        max-width: 100vw !important;
        border-radius: 16px 16px 0 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
    }

    /* Slide-up animation for bottom sheet */
    .np-modal.np-open .np-card {
        animation: lfBottomSheetEnter 0.28s cubic-bezier(0.32, 0.72, 0, 1) both !important;
    }

    @keyframes lfBottomSheetEnter {
        from { transform: translateY(100%); opacity: 0.8; }
        to   { transform: translateY(0);    opacity: 1;   }
    }

    /* Strategy chips: 2 per row */
    .np-strategy-chips {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .np-strategy-chip {
        min-height: 44px !important;
        justify-content: center !important;
    }

    /* Address input: 16px minimum font to prevent iOS zoom */
    #np-address-input {
        font-size: 1rem !important;
        min-height: 44px !important;
    }
}

/* ============================================================
   GENERAL MOBILE RULES — ≤ 768px
   Tap targets, font sizes, iOS zoom, overflow
   ============================================================ */
@media (max-width: 768px) {

    /* All interactive elements: minimum 44px tap target */
    button,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"],
    select,
    .lf-main-tab,
    .pi-strategy-tab,
    .lf-property-item,
    .comp-card__remove,
    .comps-add-btn,
    .dp-item,
    .dash-hero-btn,
    .sm-btn-back,
    .sm-btn-next,
    .sm-btn-save {
        min-height: 44px;
        min-width: 44px;
    }

    /* Body text: minimum 14px */
    body,
    p,
    span,
    label,
    .comp-input,
    .comps-add-btn,
    .pi-summary-chip,
    .lf-comps-tip {
        font-size: max(0.875rem, 14px);
    }

    /* Inputs: 16px minimum to prevent iOS zoom */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 1rem !important;
        min-height: 44px;
    }

    /* Range sliders: 48px thumb area */
    input[type="range"] {
        height: 48px;
        width: 100%;
    }

    /* Allow horizontal scroll ONLY in designated containers */
    #pi-strategy-subtabs,
    #lf-market-pulse,
    #lf-snapshot,
    #sm-progress,
    .comps-method-toggle {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Snapshot strip: 4 tiles horizontal scroll */
    #lf-snapshot {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }

    #lf-snapshot::-webkit-scrollbar { display: none; }

    .lf-kpi-tile {
        min-width: 90px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   ≤ 480px — PHONE ONLY ADDITIONS
   ============================================================ */
@media (max-width: 480px) {

    /* PI header: even tighter */
    .pi-header {
        padding: 6px 48px 6px 8px !important;
    }

    /* PI summary row: tighter */
    .pi-summary-row {
        padding: 8px !important;
    }

    /* KPI cards: stack to 1 column on very small screens */
    .dash-kpi-row {
        grid-template-columns: 1fr 1fr !important; /* keep 2-col even at 375px */
    }

    /* Decision Hero values: smaller */
    .dash-hero__offer {
        font-size: 1.6rem !important;
    }

    /* Section cards: tighter padding */
    .dash-card {
        padding: 10px 10px !important;
    }

    /* Comps cards: compact */
    .comp-card {
        padding: 8px 10px !important;
    }

    /* Modal footer buttons: stacked on very small */
    .sm-card .sm-footer {
        padding: 10px 12px !important;
    }

    /* Bottom sheet: taller on small phones */
    .np-card {
        height: 92vh !important;
    }

    /* Dashboard: single visible column */
    .db-table th:nth-child(3),
    .db-table td:nth-child(3) {
        display: none !important;
    }
}

/* ============================================================
   REMOVE HOVER EFFECTS ON TOUCH DEVICES (supplemental)
   Extends responsive.css @media (hover: none) block
   ============================================================ */
@media (hover: none) {

    .dash-metric-card:hover,
    .pi-kpi-card:hover,
    .comp-card:hover,
    .lf-dna-card:hover,
    .dash-hero:hover,
    .pi-ai-card:hover,
    .pi-summary-chip:hover,
    .lf-property-item:hover {
        transform: none !important;
        box-shadow: none !important;
        background: inherit !important;
        border-color: inherit !important;
    }

    /* Keep active states for visual feedback */
    button:active,
    [role="button"]:active {
        opacity: 0.75;
    }
}