/* ══════════════════════════════════════════════
   DESKTOP — Responsive layout enhancements
   Mobile-first: these rules only activate at wider viewports.
   The mobile layout remains completely untouched.
══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   TABLET  (≥ 640px)
═══════════════════════════════════════════════ */
@media (min-width: 640px) {

    /* Widen app container for small tablets */
    #app-root {
        max-width: 36rem !important; /* 576px — slightly wider than max-w-md (448px) */
    }

    /* ── Modals: center vertically instead of bottom-sheet ── */
    #add-modal,
    #tx-summary-modal,
    #budget-plan-modal,
    #budget-remaining-modal,
    #budget-edit-cat-modal,
    #add-budget-item-modal,
    #data-modal,
    #wallet-modal,
    #wallet-detail-modal,
    #profile-menu,
    #account-modal,
    #bank-import-modal {
        align-items: center !important;
    }

    #add-modal > .modal-panel,
    #tx-summary-modal > .modal-panel,
    #budget-plan-modal > .modal-panel,
    #budget-remaining-modal > .modal-panel,
    #budget-edit-cat-modal > .modal-panel,
    #add-budget-item-modal > .modal-panel,
    #data-modal > #settings-panel,
    #wallet-modal > .modal-panel,
    #wallet-detail-modal > .modal-panel,
    #profile-menu > div,
    #account-modal > .modal-panel,
    #bank-import-modal > .modal-panel {
        border-radius: 1.5rem !important;
        max-width: 480px;
        width: 100%;
        margin: 1rem auto;
        max-height: 85vh;
    }
}

/* ═══════════════════════════════════════════════
   TABLET-LANDSCAPE / SMALL DESKTOP  (≥ 768px)
═══════════════════════════════════════════════ */
@media (min-width: 768px) {

    #app-root {
        max-width: 42rem !important; /* 672px */
    }

    /* Overview: stat cards in a wider 2-col grid */
    #screen-0 .grid.grid-cols-2 {
        gap: 1rem;
    }

    /* Budget summary ring: more room */
    #budget-summary .bg-zinc-900 {
        padding: 1.5rem;
    }

    /* Wallet cards: 2-col grid when enough accounts */
    #wallet-accounts-list > div > .space-y-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    #wallet-accounts-list > div > .space-y-2 > * {
        margin-top: 0 !important;
    }
}

/* ═══════════════════════════════════════════════
   DESKTOP  (≥ 1024px)
   Sidebar navigation + wide content area
═══════════════════════════════════════════════ */
@media (min-width: 1024px) {

    body {
        padding-bottom: 0 !important;
        overflow: hidden; /* sidebar + content scroll independently */
    }

    /* ── App root: flex row with sidebar ── */
    #app-root {
        max-width: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        min-height: 100vh;
        height: 100vh;
    }

    /* ── Sidebar ── */
    #app-sidebar {
        display: flex !important;
        flex-direction: column;
        width: 256px;
        min-width: 256px;
        background: var(--glass-bg-heavy);
        backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(var(--glass-saturate));
        -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(var(--glass-saturate));
        border-right: 1px solid var(--glass-border-strong);
        box-shadow: var(--glass-shadow);
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
        z-index: 10;
        scrollbar-width: none;
    }
    #app-sidebar::-webkit-scrollbar { display: none; }

    /* Header inside sidebar: show branding, hide tab title */
    #app-sidebar > div:first-child {
        padding: 2rem 1.5rem 1rem;
    }
    #sidebar-branding {
        display: block !important;
    }
    #header-title-row {
        display: none !important;
    }

    /* ── Tab bar becomes vertical sidebar nav on desktop ── */
    #tabs-fade-wrap {
        position: static !important;
        border: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        flex: 1;
        display: flex !important;
        flex-direction: column;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    #tabs-fade-wrap::before { display: none !important; }
    #tabs-fade-wrap, #tabs-fade-wrap > .glass, #tabs-scroller [role="tab"], .tab-label {
        transition: none !important;
    }
    .tabs-shrunk [role="tab"] { padding: 0.75rem 1rem !important; gap: 0.75rem !important; }
    .tabs-shrunk .tab-label { font-size: 0.875rem !important; opacity: 1 !important; }
    #tabs-fade-wrap > .glass {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        display: contents;
    }
    #tabs-fade-wrap > .glass::before { display: none !important; }

    #tabs-scroller {
        flex-direction: column !important;
        padding: 0.5rem 0.75rem;
        gap: 0.25rem;
    }

    /* Tab buttons: horizontal row with icon + label */
    #tabs-scroller > button {
        flex: none !important;
        flex-direction: row !important;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        font-size: 0.875rem;
        justify-content: flex-start;
        transition: background-color 0.15s, color 0.15s;
    }

    #tabs-scroller > button:hover {
        background-color: rgba(255,255,255,0.06);
    }

    #tabs-scroller > button svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Active tab: highlight with subtle bg */
    #tabs-scroller > button.tab-active {
        background-color: rgba(16, 185, 129, 0.1);
        color: #f4f4f5 !important;
    }

    #tabs-scroller > button.tab-active svg {
        color: #10b981;
    }

    /* FAB: reset position (no bottom tab bar offset needed on desktop) */
    #fab-wrap {
        bottom: 2rem !important;
    }

    /* Sidebar bottom section */
    #sidebar-bottom {
        display: flex !important;
        flex-direction: column;
        padding: 1rem 0.75rem;
        margin-top: auto;
        border-top: 1px solid var(--border-subtle);
        gap: 0.25rem;
    }

    #sidebar-wallet-btn {
        display: none !important;
    }

    #sidebar-settings-btn {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        font-size: 0.875rem;
        color: #a1a1aa;
        transition: background-color 0.15s, color 0.15s;
        cursor: pointer;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    #sidebar-settings-btn:hover {
        background-color: rgba(255,255,255,0.06);
        color: #f4f4f5;
    }

    /* Hide user avatar + ribbon from header (moved to sidebar bottom) */
    #user-avatar-btn,
    #avatar-pro-ribbon {
        display: none;
    }

    #sidebar-user-row {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    #sidebar-user-row:hover {
        background-color: rgba(255,255,255,0.06);
    }

    /* ── Content area ── */
    #app-content {
        display: flex !important;
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        height: 100vh;
        flex-direction: column;
        background: #09090b;
        box-shadow: inset 2px 0 8px rgba(0,0,0,0.1);
    }

    /* Master month bar in content: center it, add top padding */
    #master-month-bar {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding-top: 1.5rem;
    }

    /* Overview hero chart: taller on desktop */
    #ov-hero > div[style*="height"] {
        height: 50vh !important;
        max-height: 480px !important;
        min-height: 280px !important;
    }

    /* ── Screen content: constrain width and center ── */
    /* Use :not(.hidden) to avoid overriding Tailwind's .hidden class */
    #screen-0:not(.hidden), #screen-2:not(.hidden), #screen-3:not(.hidden), #screen-4:not(.hidden) {
        max-width: 52rem;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding-bottom: 2rem;
        overflow-y: visible; /* Content area handles scrolling */
    }

    /* Transactions screen: fill content area, scroll internally */
    #screen-1:not(.hidden) {
        max-width: 52rem;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        flex: 1;
        min-height: 0;
        overflow: hidden; /* Children handle scrolling */
    }

    /* ── Overview: side-by-side layout ── */
    #ov-hero {
        /* Hero chart: wider */
        max-width: none;
    }

    /* 2-stat row: bigger */
    #screen-0 .grid.grid-cols-2 {
        gap: 1rem;
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* Top categories: allow wrapping on desktop */
    #ov-top-cats {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    /* ── Budgets: 2-column grid for category cards ── */
    #budgets-list {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }

    #budgets-list > div > .space-y-1\.5 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    #budgets-list > div > .space-y-1\.5 > * {
        margin-top: 0 !important;
    }

    /* Add-category button spans full width */
    #budgets-list .add-budget-item-btn {
        grid-column: 1 / -1;
    }

    /* Budget actions footer */
    #budget-actions-footer {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* Budget view toggle */
    #budget-view-toggle {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* ── Reports: wider charts ── */
    #screen-3 .mx-4,
    #rpt-hero {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* Reports stat row */
    #rpt-stats {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* ── Wallet: 2-col account grid ── */
    #wallet-accounts-list {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* Net worth header */
    #screen-4 > .px-5.pt-6 {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* ── FAB: position within content area ── */
    #fab-backdrop {
        left: 256px !important;
    }

    /* ── Demo banner ── */
    #demo-banner {
        left: 256px !important; /* Offset by sidebar width */
    }

    /* ── Undo toast: center in content area, not viewport ── */
    #_undo {
        left: calc(256px + (100vw - 256px) / 2) !important;
    }
}

/* ═══════════════════════════════════════════════
   WIDE DESKTOP  (≥ 1280px)
   Multi-column dashboard layout
═══════════════════════════════════════════════ */
@media (min-width: 1280px) {

    /* ── Overview: 2-column dashboard ── */
    #screen-0:not(.hidden) {
        max-width: 72rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Hero chart: spans full width */
    #screen-0:not(.hidden) > #ov-hero {
        grid-column: 1 / -1;
    }

    /* 2-stat row: spans full width */
    #screen-0:not(.hidden) > .grid.grid-cols-2 {
        grid-column: 1 / -1;
        padding-left: 0;
        padding-right: 0;
        max-width: none;
    }

    /* Top categories section: left column */
    #screen-0:not(.hidden) > .mt-4.mb-1 {
        grid-column: 1;
    }

    /* Recent transactions section: right column */
    #screen-0:not(.hidden) > .px-5.mt-3.mb-2 {
        grid-column: 2;
    }

    /* ── Budgets: 3-column grid for items ── */
    #budgets-list {
        max-width: 64rem;
    }

    #budgets-list > div > .space-y-1\.5 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Budget summary + controls wider */
    #budget-summary {
        max-width: 64rem;
        margin-left: auto;
        margin-right: auto;
    }

    #budget-view-toggle,
    #budget-actions-footer {
        max-width: 64rem;
    }

    /* ── Reports: wider ── */
    #screen-3:not(.hidden) {
        max-width: 72rem;
    }

    /* Trend chart: full width on wide desktop */
    #rpt-hero {
        max-width: none;
    }

    #rpt-stats {
        max-width: none;
    }

    /* ── Wallet: wider grid ── */
    #wallet-accounts-list {
        max-width: 64rem;
    }

    #screen-4 > .px-5.pt-6 {
        max-width: 64rem;
    }

    #screen-4:not(.hidden) {
        max-width: 72rem;
    }
}


/* ═══════════════════════════════════════════════
   LIGHT MODE — Desktop sidebar overrides
═══════════════════════════════════════════════ */
@media (min-width: 1024px) {
    html.light #app-sidebar {
        /* Glass tokens handle sidebar theming */
    }

    html.light #app-content {
        background-color: #f4f4f5 !important;
    }

    html.light #tabs-scroller > button:hover {
        background-color: #f4f4f5 !important;
    }

    html.light #tabs-scroller > button.tab-active {
        background-color: rgba(16, 185, 129, 0.08) !important;
        color: #09090b !important;
    }

    html.light #sidebar-bottom {
        border-top-color: #e4e4e7 !important;
    }

    html.light #sidebar-settings-btn:hover,
    html.light #sidebar-user-row:hover {
        background-color: #f4f4f5 !important;
    }

    html.light #sidebar-settings-btn {
        color: #52525b !important;
    }

    html.light #sidebar-settings-btn:hover {
        color: #09090b !important;
    }
}

/* ═══════════════════════════════════════════════
   PRINT — Hide sidebar, show content only
═══════════════════════════════════════════════ */
@media print {
    #app-sidebar,
    #fab-wrap,
    #fab-backdrop {
        display: none !important;
    }

    #app-content {
        margin: 0 !important;
    }

    #app-root {
        display: block !important;
        max-width: none !important;
    }

    /* Settings drawer — wider on desktop */
    #settings-drawer {
        max-width: 420px;
    }

    /* Hide back arrow in account modal on desktop */
    #acct-back-btn {
        display: none;
    }
}