/* ==============================================
   RESPONSIVE — OmniFlow
   xs  < 360px
   sm  360–599  (phone)
   md  600–899  (tablet)
   lg  900–1199 (laptop/sidebar)
   xl  1200+    (desktop)
   ============================================== */

/* ── GLOBAL ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; display: block; }
body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
input, select, textarea, button { max-width: 100%; }

.algo-insight, .spc-name, .spc-email,
.transaction-category, .account-name, .debt-person,
.admin-user-name, .admin-user-email {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── XS — tiny phones < 360px ────────────────── */
@media (max-width: 359px) {
    :root { --nav-height: 60px; }

    .main-content { padding: 10px 10px 80px; }

    /* Top bar */
    .app-logo { font-size: 15px; gap: 6px; }
    .logo-svg { width: 22px; height: 22px; }
    .top-btn { width: 30px; height: 30px; font-size: 14px; }
    .top-bar { padding: 8px 10px; }
    .top-bar-right { gap: 4px; }

    /* Nav */
    .nav-btn { font-size: 9px; padding: 5px 2px; }
    .nav-btn i { font-size: 15px; }

    /* Home cards */
    .greeting-card, .time-left-card, .finance-card { padding: 12px; }
    .time-value { font-size: 24px; }
    .greeting-text h2 { font-size: 17px; }
    .pillars-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pillar-card { padding: 12px 8px; }
    .pillar-card h4 { font-size: 12px; }
    .pillar-card p { font-size: 10px; }

    /* Finance */
    .fin-actions { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .fin-action-btn { padding: 10px 4px; font-size: 10px; }
    .fin-action-btn i { font-size: 15px; }
    .algo-header { flex-wrap: wrap; gap: 8px; }
    .algo-badge { margin-left: 0; font-size: 11px; }
    .algo-title { font-size: 13px; }
    .budget-row-label { width: 76px; font-size: 10px; }
    .budget-pct { width: 28px; font-size: 11px; }
    .fire-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .fire-stat-val { font-size: 14px; }
    .fire-input-row { flex-direction: column; gap: 8px; }
    .fire-input-group { width: 100%; }
    .ef-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
    .ef-stat-val { font-size: 12px; }
    .strategy-toggle { flex-direction: column; gap: 4px; }
    .strat-btn { font-size: 10px; padding: 4px 8px; }
    .spending-cat { width: 80px; font-size: 11px; }
    .spending-amount { width: 55px; font-size: 11px; }
    .transaction-item-card { padding: 10px 12px; gap: 8px; }
    .txn-icon { width: 30px; height: 30px; font-size: 12px; }
    .transaction-category { font-size: 13px; }
    .transaction-amount-income,
    .transaction-amount-expense { font-size: 12px; }
    .form-row { flex-direction: column; gap: 0; }
    .quick-add-grid { grid-template-columns: 1fr 1fr; }

    /* Panels */
    .panel-body { padding: 12px 14px 28px; }
    .txn-type-btn { font-size: 11px; padding: 8px 4px; gap: 3px; }
    .cat-btn { padding: 5px 8px; font-size: 11px; }
    .quick-amounts button { padding: 4px 8px; font-size: 11px; }
    .panel-submit-btn { font-size: 14px; padding: 12px; }

    /* Plan */
    .diary-compose-row { grid-template-columns: 1fr; }
    .diary-filter-select { width: 70px; }
    .diary-stats-row { grid-template-columns: 1fr 1fr 1fr; }

    /* Calculator */
    .numpad { grid-template-columns: repeat(3, 64px); gap: 8px; }
    .numpad-btn { width: 64px; height: 64px; font-size: 20px; border-radius: 16px; }
    .passcode-title { font-size: 22px; }
    .calc-btn { padding: 12px 8px; font-size: 16px; }
    .calculator-display { font-size: 28px; }

    /* Settings */
    .settings-stats-row { grid-template-columns: repeat(2, 1fr); }
    .ss-val { font-size: 18px; }
    .settings-profile-card { padding: 14px 12px; gap: 10px; }
    .spc-avatar { width: 44px; height: 44px; font-size: 20px; }
    .spc-name { font-size: 14px; }
    .settings-signin-banner { flex-direction: column; align-items: stretch; gap: 8px; }
    .spc-google-btn { width: 100% !important; }
    .settings-item { padding: 12px; gap: 10px; }
    .settings-icon { width: 30px; height: 30px; font-size: 13px; }
    .about-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .about-modal { padding: 12px 14px 32px; }
    .dev-contact-item { padding: 10px 12px; gap: 10px; }

    /* PWA banner */
    .pwa-banner { padding: 10px 12px; gap: 8px; }
    .pwa-banner-text strong { font-size: 12px; }
}

/* ── SM — phones 360–599px ───────────────────── */
@media (min-width: 360px) and (max-width: 599px) {
    .fire-grid { grid-template-columns: 1fr 1fr; }
    .ef-stats { grid-template-columns: 1fr 1fr; }
    .settings-signin-banner { flex-wrap: wrap; }
    .spending-cat { width: 95px; }
    .about-feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── MD — tablets 600–899px ──────────────────── */
@media (min-width: 600px) {

    /* Layout */
    .main-content {
        max-width: 640px;
        margin: 0 auto;
        padding: 20px 24px 100px;
    }
    .bottom-nav {
        max-width: 640px;
        left: 50%;
        transform: translateX(-50%);
    }
    .fab { right: calc(50% - 304px); }
    .top-bar { padding: 12px 20px; }

    /* Home */
    .pillars-grid { grid-template-columns: repeat(3, 1fr); }

    /* Finance */
    .fin-actions { grid-template-columns: repeat(4, 1fr); }
    .quick-add-grid { grid-template-columns: repeat(4, 1fr); }
    .fire-grid { grid-template-columns: repeat(4, 1fr); }
    .ef-stats { grid-template-columns: repeat(4, 1fr); }
    .fire-input-row { flex-wrap: nowrap; }

    /* Settings */
    .settings-stats-row { grid-template-columns: repeat(4, 1fr); }
    .settings-signin-banner { flex-wrap: nowrap; align-items: center; }
    .spc-google-btn { width: auto !important; }
    .about-feature-grid { grid-template-columns: repeat(3, 1fr); }

    /* About modals — centered on tablet */
    .about-modal-backdrop { align-items: center; }
    .about-modal {
        border-radius: 20px;
        max-width: 480px;
        max-height: 80vh;
    }

    /* Panels */
    .slide-panel {
        max-width: 520px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        border-radius: 20px 20px 0 0;
    }
    .slide-panel.open { transform: translateX(-50%) translateY(0); }

    /* Calculator */
    .calc-btn { padding: 22px; font-size: 22px; }
    .calculator-display { font-size: 40px; }

    /* PWA banner */
    .pwa-banner {
        max-width: 500px;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }
}

/* ── LG — laptops 900–1199px (sidebar layout) ── */
@media (min-width: 900px) {

    :root {
        --nav-height: 0px;
        --sidebar-width: 220px;
    }

    body {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        min-height: 100vh;
    }

    /* Fixed overlays out of grid flow */
    #passcode-screen,
    .panel-backdrop,
    .slide-panel,
    .fab,
    .toast,
    .pwa-banner,
    .about-modal-backdrop { position: fixed; }

    /* ── Sidebar ── */
    .bottom-nav {
        position: sticky;
        top: 0;
        height: 100vh;
        max-width: none;
        transform: none;
        left: auto; bottom: auto;
        border-top: none;
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        padding: 0 12px 24px;
        background: var(--card-bg);
        border-right: 1px solid var(--border);
        overflow-y: auto;
        z-index: 200;
        align-self: start;
    }

    .sidebar-brand {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 20px 4px;
        font-size: 18px;
        font-weight: 800;
        color: var(--primary);
        flex-shrink: 0;
    }

    .nav-btn {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: var(--radius-xs);
        font-size: 14px;
        font-weight: 500;
        width: 100%;
        color: var(--text-secondary);
        text-align: left;
        height: auto;
    }
    .nav-btn i { font-size: 17px; min-width: 20px; text-align: center; }
    .nav-btn span { display: inline; font-size: 14px; }
    .nav-btn:hover { background: var(--primary-light); color: var(--primary); }
    .nav-btn.active { background: var(--primary); color: white; }
    .nav-btn.active i { transform: none; }

    /* ── App container ── */
    .app-container {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        flex-direction: column;
        min-height: 100vh;
        padding-bottom: 0;
        width: 100%;
    }

    .top-bar {
        max-width: none;
        margin: 0;
        padding: 14px 28px;
        flex-shrink: 0;
    }

    .main-content {
        flex: 1;
        max-width: 860px;
        margin: 0 auto;
        padding: 28px 32px 60px;
        width: 100%;
    }

    /* FAB & Toast */
    .fab { bottom: 32px; right: 32px; }
    .toast { bottom: 40px; }

    /* Home */
    .pillars-grid { grid-template-columns: repeat(3, 1fr); }

    /* Finance */
    .fin-actions { grid-template-columns: repeat(4, 1fr); }
    .fire-grid { grid-template-columns: repeat(4, 1fr); }
    .ef-stats { grid-template-columns: repeat(4, 1fr); }
    .fire-input-row { flex-wrap: nowrap; }
    .quick-add-grid { grid-template-columns: repeat(4, 1fr); }

    /* Settings */
    .settings-stats-row { grid-template-columns: repeat(4, 1fr); }
    .settings-signin-banner { flex-wrap: nowrap; align-items: center; }
    .spc-google-btn { width: auto !important; }
    .about-feature-grid { grid-template-columns: repeat(3, 1fr); }

    /* About modals — centered on desktop */
    .about-modal-backdrop { align-items: center; }
    .about-modal {
        border-radius: 20px;
        max-width: 520px;
        max-height: 80vh;
    }

    /* Panels — centered modal */
    .slide-panel {
        max-width: 500px;
        left: 50%;
        bottom: auto;
        top: 50%;
        transform: translateX(-50%) translateY(-44%) scale(0.96);
        border-radius: 16px;
        transition: transform 0.28s cubic-bezier(0.32,0.72,0,1), opacity 0.28s;
        opacity: 0;
        pointer-events: none;
        max-height: 88vh;
    }
    .slide-panel.open {
        transform: translateX(-50%) translateY(-50%) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    /* Calculator */
    #calculator-screen { max-width: 440px; margin: 0 auto; }
    .calc-btn { padding: 22px; font-size: 22px; }

    /* Passcode */
    .passcode-container { max-width: 400px; margin: 0 auto; }

    /* PWA banner */
    .pwa-banner {
        left: calc(var(--sidebar-width) + 16px);
        right: 16px;
        transform: none;
        max-width: 500px;
        bottom: 24px;
    }
}

/* ── XL — desktops 1200px+ ───────────────────── */
@media (min-width: 1200px) {

    :root { --sidebar-width: 250px; }

    .main-content { max-width: 1000px; }

    /* Home — 2-col */
    #home-screen.active {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }
    #home-screen .greeting-card,
    #home-screen .time-left-card,
    #home-screen .user-info-card { grid-column: 1 / -1; }

    /* Finance — 2-col */
    #finance-screen.active {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }
    #finance-screen .fin-actions,
    #finance-screen .fin-section-header,
    #finance-screen #no-transactions,
    #finance-screen #transactions-list,
    #finance-screen [id$="-list-container"] { grid-column: 1 / -1; }

    /* Pillars */
    .pillars-grid { grid-template-columns: repeat(3, 1fr); }

    /* FIRE / EF */
    .fire-grid { grid-template-columns: repeat(4, 1fr); }
    .ef-stats { grid-template-columns: repeat(4, 1fr); }

    /* About modals wider */
    .about-modal { max-width: 560px; }
    .about-feature-grid { grid-template-columns: repeat(3, 1fr); }

    /* Panels */
    .slide-panel { max-width: 560px; }
}

/* ── LANDSCAPE PHONES ────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .main-content { padding-bottom: 80px; }
    .time-left-card { padding: 10px; }
    .time-value { font-size: 22px; }
    .passcode-container { padding: 12px 24px; }
    .passcode-dots { margin-bottom: 16px; }
    .numpad { gap: 6px; }
    .numpad-btn { width: 56px; height: 56px; font-size: 18px; }
    .slide-panel { max-height: 96vh; }
    .about-modal { max-height: 92vh; }
}

/* ── PRINT ───────────────────────────────────── */
@media print {
    .bottom-nav, .fab, .top-btn, .toast,
    .slide-panel, .panel-backdrop, .pwa-banner,
    .about-modal-backdrop,
    .fin-actions, .fire-autofill-btn { display: none !important; }
    body { display: block !important; }
    .app-container { grid-column: 1 !important; min-height: auto !important; padding-bottom: 0 !important; }
    .main-content { padding: 0 !important; max-width: 100% !important; }
    .screen { display: block !important; }
    .algo-card, .fin-section-header, .transaction-item-card { box-shadow: none !important; border: 1px solid #ddd; }
}