/* ═══════════════════════════════════════════════════════════════════
   FUMA Invoice — responsive.css
   Full mobile-first responsive overrides for ALL pages.

   HOW TO USE:
   Add this ONE line as the LAST stylesheet on every page:
     <link rel="stylesheet" href="../responsive.css">
   (or href="responsive.css" on the dashboard which sits at the same level)

   BREAKPOINTS:
     1024px — tablet landscape / small desktop
      768px — tablet portrait / large phone
      480px — phone (most used by business owners)
      360px — small/budget phones
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   0. BASE MOBILE TOUCH IMPROVEMENTS (all screen sizes)
   ═══════════════════════════════════════════════════════════════════ */

/* Prevent accidental double-tap zoom on buttons & links */
button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Smooth scrolling everywhere */
html { scroll-behavior: smooth; }

/* Prevent horizontal overflow on body */
body { overflow-x: hidden; }

/* Make all inputs/selects 16px min to prevent iOS auto-zoom */
input, select, textarea {
    font-size: max(16px, 1rem) !important;
}

/* Minimum tap target size (44×44px) on all interactive elements */
.btn, .nav-item, .filter-pill, .mode-pill, .tpl-pill,
.qa-btn, .icon-btn, .action-btn, .del-item-btn {
    min-height: 44px;
}
.btn-sm { min-height: 36px; }


/* ═══════════════════════════════════════════════════════════════════
   1. TABLET LANDSCAPE — ≤1024px
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    /* ── Sidebar collapses ──────────────────────────────────────── */
    .sidebar {
        transform: translateX(-110%);
        width: 280px;
        box-shadow: none;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0,0,0,0.25);
    }
    .sidebar-close { display: flex !important; }
    .main-content  { margin-left: 0 !important; }
    .hamburger     { display: flex !important; }

    /* ── KPI grid: 2 columns ────────────────────────────────────── */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Charts: stacked ────────────────────────────────────────── */
    .charts-section {
        grid-template-columns: 1fr !important;
    }
    .charts-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* ── Builder: hide preview panel, form is full width ───────── */
    .builder-layout {
        grid-template-columns: 1fr !important;
    }
    .builder-preview-wrap { display: none !important; }
    .builder-form {
        max-height: none !important;
        overflow-y: visible !important;
        width: 100vw;
    }

    /* ── Settings tabs: allow wrapping ─────────────────────────── */
    .settings-tabs { flex-wrap: wrap; }

    /* ── Stat cards: 2 columns ──────────────────────────────────── */
    .stats-row[style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .stats-row[style*="repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

}


/* ═══════════════════════════════════════════════════════════════════
   2. TABLET PORTRAIT — ≤768px
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Root: tighter spacing on small screens ─────────────────── */
    :root {
        --topbar-h: 56px;
        --radius:   10px;
        --radius-sm: 7px;
    }

    /* ── Body layout ────────────────────────────────────────────── */
    body { display: block; }

    /* ── Sidebar ────────────────────────────────────────────────── */
    .sidebar { width: 100%; max-width: 300px; }
    .sidebar-nav { padding: .75rem .6rem; }
    .nav-item { padding: .75rem .85rem; font-size: .95rem; }
    .nav-item i { font-size: 1rem; width: 20px; }
    .sidebar-biz-card { margin: .5rem .6rem; }

    /* ── Topbar ─────────────────────────────────────────────────── */
    .topbar {
        padding: 0 .85rem;
        height: var(--topbar-h);
        gap: .5rem;
    }
    .topbar-left { gap: .6rem; flex: 1; min-width: 0; }
    .topbar-right { gap: .5rem; flex-shrink: 0; }

    /* Topbar title: truncate long names */
    .topbar-title {
        font-size: .9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }
    .topbar-greeting { font-size: .85rem; }
    .topbar-greeting strong { font-size: .9rem; }

    /* Mode toggle: compact */
    .mode-pill { padding: 12px 16px; font-size: .75rem; }

    /* Topbar buttons: icon-only on small screens */
    .topbar-right .btn span,
    .topbar-right .btn-text-label { display: none; }
    .topbar-right .btn { padding: .55rem .7rem; min-height: 38px; }
    .topbar-right .btn i { margin: 0; }

    /* ── Page body ──────────────────────────────────────────────── */
    .page-body { padding: .85rem; gap: .9rem; }
    .main-content > section,
    .main-content > .quick-actions,
    .main-content > .ai-insight-banner { padding-left: .85rem; padding-right: .85rem; }

    /* ── Quick actions: 2×2 grid ────────────────────────────────── */
    .quick-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: .6rem;
        padding-top: 1rem;
    }
    .qa-btn {
        justify-content: center;
        font-size: .85rem;
        padding: .7rem .6rem;
        white-space: normal;
        text-align: center;
        min-height: 48px;
    }

    /* ── KPI cards: 2 col ───────────────────────────────────────── */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .65rem;
        padding-top: .9rem;
    }
    .kpi-card { padding: 1rem; gap: .7rem; }
    .kpi-icon { width: 38px; height: 38px; font-size: 1rem; border-radius: 9px; }
    .kpi-value { font-size: 1.3rem; }
    .kpi-label { font-size: .68rem; }
    .kpi-delta { font-size: .72rem; }

    /* ── AI insight banner ──────────────────────────────────────── */
    .ai-insight-banner {
        padding: .85rem 1rem;
        gap: .75rem;
        flex-wrap: nowrap;
        margin-top: .9rem;
    }
    .ai-icon { width: 34px; height: 34px; font-size: .95rem; flex-shrink: 0; }
    .ai-insight-banner p { font-size: .82rem; line-height: 1.45; }
    .ai-dismiss { padding: 2px; }

    /* ── Charts section ─────────────────────────────────────────── */
    .charts-section {
        grid-template-columns: 1fr !important;
        gap: .75rem;
        padding-top: .9rem;
    }
    .charts-grid-2 { grid-template-columns: 1fr; gap: .75rem; }
    .chart-card { padding: 1rem; }
    .chart-wrap { height: 180px !important; }
    .chart-wrap-donut { height: 200px !important; }
    .chart-header { margin-bottom: .8rem; }
    .chart-header h3 { font-size: .88rem; }

    /* ── Stat cards ─────────────────────────────────────────────── */
    .stats-row { gap: .65rem; }
    .stat-card { padding: .9rem 1rem; gap: .75rem; }
    .stat-icon { width: 38px; height: 38px; font-size: 1rem; }
    .stat-body .stat-value { font-size: 1.3rem; }
    .stat-body .stat-label { font-size: .68rem; }
    .stat-body .stat-sub   { font-size: .72rem; }

    /* Override all inline grid-template-columns for stats-row */
    .stats-row[style] { grid-template-columns: repeat(2, 1fr) !important; }

    /* ── Section headers ────────────────────────────────────────── */
    .section-header { margin-bottom: .75rem; }
    .section-header h3 { font-size: .9rem; }

    /* ── Tables ─────────────────────────────────────────────────── */
    .table-wrap { border-radius: 8px; }
    .data-table { font-size: .82rem; }
    .data-table thead th { padding: .7rem .75rem; font-size: .68rem; }
    .data-table tbody td { padding: .75rem .75rem; }

    /* Invoice table on dashboard */
    .inv-table { min-width: 480px; font-size: .82rem; }
    .inv-table thead th { padding: .7rem .75rem; font-size: .68rem; }
    .inv-table tbody td { padding: .75rem .75rem; }

    /* Action buttons in table rows */
    .inv-actions { gap: .25rem; }
    .icon-btn { width: 34px; height: 34px; font-size: .8rem; }
    .action-btn { padding: 4px 8px; font-size: .72rem; }
    .action-btn.remind { padding: 4px 6px; }

    /* ── Cards ──────────────────────────────────────────────────── */
    .card-body { padding: 1rem; }
    .card-header { padding: .9rem 1rem; }

    /* ── Form fields ────────────────────────────────────────────── */
    .field-row,
    .field-row-3 { grid-template-columns: 1fr; }
    .field input,
    .field select,
    .field textarea { padding: .75rem .9rem; }

    /* ── Search bar ─────────────────────────────────────────────── */
    .search-bar { max-width: 100% !important; }
    .search-bar input { font-size: .9rem; padding: .65rem .9rem .65rem 2.1rem; }

    /* ── Filter pills bar ───────────────────────────────────────── */
    .filters-bar { flex-direction: column; align-items: stretch; gap: .65rem; }
    .filter-pills { flex-wrap: wrap; gap: .35rem; }
    .filter-pill { padding: .4rem .85rem; font-size: .8rem; min-height: 38px; }
    .sort-select { margin-left: 0 !important; width: 100%; }
    .acct-filters { flex-direction: column; gap: .65rem; }
    .acct-filters > div[style] { margin-left: 0 !important; }
    .month-input { width: 100%; }

    /* ── Modal ──────────────────────────────────────────────────── */
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal-card {
        border-radius: 16px 16px 0 0;
        padding: 1.5rem 1.25rem;
        max-width: 100%;
        width: 100%;
        max-height: 85vh;
        margin: 0;
        animation: slideUp .3s ease;
    }
    @keyframes slideUp {
        from { transform: translateY(40px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    .modal-card h3 { font-size: 1rem; }
    .modal-actions { flex-wrap: wrap; }
    .modal-actions .btn { flex: 1; justify-content: center; }

    /* ── Toast ──────────────────────────────────────────────────── */
    #toast-container { left: .75rem; right: .75rem; bottom: .75rem; }
    .toast { max-width: 100%; font-size: .84rem; padding: .75rem 1rem; }

    /* ── Builder page ───────────────────────────────────────────── */
    .builder-form { padding: .85rem; gap: .9rem; }
    .bf-section { padding: 1rem; }
    .bf-section-title { font-size: .72rem; gap: 5px; }
    .items-table { font-size: .8rem; min-width: 420px; }
    .items-table thead th { padding: .45rem .4rem; }
    .items-table tbody td { padding: .35rem .3rem; }
    .items-table input, .items-table select { padding: .4rem .4rem; font-size: .8rem !important; }
    .del-item-btn { width: 30px; height: 30px; }
    .total-row { font-size: .88rem; }
    .total-grand { font-size: 1rem; }
    .tpl-pills { display: none; } /* Hidden on mobile — too small */

    /* Builder topbar action buttons */
    .topbar .btn { padding: .55rem .8rem; font-size: .82rem; }

    /* ── Invoice builder picker modals ─────────────────────────── */
    #client-picker-list, #product-picker-list { max-height: 50vh; }
    .picker-item { padding: .65rem .75rem; gap: .6rem; }
    .picker-item .pi-icon { width: 32px; height: 32px; font-size: .85rem; }
    .picker-item .pi-name { font-size: .88rem; }
    .picker-item .pi-sub  { font-size: .75rem; }

    /* ── Customers page ─────────────────────────────────────────── */
    .cust-grid { grid-template-columns: 1fr; gap: .75rem; }
    .cust-card-header { padding: 1rem; gap: .75rem; }
    .cust-avatar { width: 42px; height: 42px; font-size: 1rem; }
    .cust-stats-bar { grid-template-columns: 1fr 1fr 1fr; }
    .csb-item { padding: .6rem .5rem; }
    .csb-value { font-size: .82rem; }
    .csb-label { font-size: .62rem; }
    .cca-btn { width: 32px; height: 32px; }

    /* Ledger modal on customers page */
    .ledger-stats { grid-template-columns: 1fr 1fr; }
    .ls-item { padding: .65rem; }
    .ls-value { font-size: .95rem; }

    /* ── Products page ──────────────────────────────────────────── */
    .prod-icon { width: 30px; height: 30px; font-size: .8rem; }

    /* ── Accounting page ────────────────────────────────────────── */
    .acct-filters .btn { align-self: flex-start; }

    /* ── Reports page ───────────────────────────────────────────── */
    .year-select { font-size: .85rem; }
    .pct-bar { width: 50px; }
    .rank-num { width: 22px; height: 22px; font-size: .7rem; }

    /* ── Settings page ──────────────────────────────────────────── */
    .settings-tabs { gap: .2rem; }
    .stab {
        font-size: .78rem;
        padding: .5rem .75rem;
        flex: 1;
        justify-content: center;
        text-align: center;
    }
    .stab i { display: none; } /* Icon hidden, text only on mobile */
    .tpl-picker { gap: .6rem; }
    .tpl-card { min-width: 80px; padding: .65rem 1rem; }
    .toggle-row { gap: .75rem; }
    .toggle-label { font-size: .88rem; }
    .toggle-sub   { font-size: .75rem; }
    .profile-avatar-wrap { gap: .75rem; }
    .profile-avatar { width: 52px; height: 52px; font-size: 1.2rem; }
    .profile-name { font-size: .95rem; }
    .profile-email { font-size: .8rem; }
    .biz-field-row { grid-template-columns: 1fr !important; }
    .biz-field-readonly { padding: .65rem .85rem; }
    .biz-connected-card { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .bcc-logo { width: 44px; height: 44px; }

    /* Danger zone */
    .danger-row { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .danger-row .btn { align-self: flex-start; }

    /* ── AI cards (Pro mode) ────────────────────────────────────── */
    .ai-cards { grid-template-columns: 1fr; gap: .65rem; }
    .ai-card { padding: 1rem; }
    .ai-card .ai-card-icon { font-size: 1.2rem; margin-bottom: .4rem; }
    .ai-card h4 { font-size: .78rem; }
    .ai-card p  { font-size: .85rem; }

    /* ── Sidebar business card ──────────────────────────────────── */
    .sidebar-biz-card { padding: .65rem .8rem; }
    .sbc-logo { width: 30px; height: 30px; border-radius: 7px; }
    .sbc-name { font-size: .8rem; max-width: 160px; }
    .sbc-status { font-size: .68rem; }

    /* ── Reminder modal textarea ────────────────────────────────── */
    .reminder-textarea { font-size: .85rem !important; }

    /* ── Bulk bar on invoices page ──────────────────────────────── */
    .bulk-bar {
        flex-wrap: wrap;
        left: .75rem; right: .75rem;
        transform: none;
        bottom: .75rem;
        border-radius: 10px;
        gap: .5rem;
        padding: .75rem 1rem;
    }
    .bulk-bar span { flex: 0 0 100%; font-size: .85rem; }
    .bulk-bar .btn { flex: 1; min-width: 0; }

    /* ── Pay page ───────────────────────────────────────────────── */
    .pay-card { border-radius: 12px; }
    .pay-header { padding: 1.5rem 1.25rem; }
    .pay-biz-avatar { width: 56px; height: 56px; font-size: 1.5rem; }
    .pay-amount-value { font-size: 2.2rem; }
    .pay-details { padding: 1rem 1.25rem; }
    .pay-btn-area { padding: 0 1.25rem 1.25rem; }
    .pay-btn { padding: .95rem; font-size: .95rem; }
    .pay-viral { padding: .75rem 1.25rem 1.25rem; font-size: .75rem; }

    /* ── Onboarding page ────────────────────────────────────────── */
    .ob-card { padding: 1.75rem 1.25rem; }
    .ob-btn { padding: .8rem 1.1rem; font-size: .9rem; }
    .ob-row { grid-template-columns: 1fr; }
    .ob-success h2 { font-size: 1.3rem; }

}


/* ═══════════════════════════════════════════════════════════════════
   3. PHONE — ≤480px  (primary target for business owners on mobile)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    /* ── Root tweaks ────────────────────────────────────────────── */
    :root { --radius: 9px; --radius-sm: 6px; }

    /* ── Topbar ─────────────────────────────────────────────────── */
    .topbar { padding: 0 .75rem; height: 52px; }
    .topbar-title { font-size: .85rem; max-width: 130px; }
    .topbar-greeting { display: none; } /* Hide greeting on tiny screens */
    .topbar-right .btn { padding: .45rem .6rem; }

    /* ── Page body ──────────────────────────────────────────────── */
    .page-body { padding: .7rem; gap: .75rem; }
    .main-content > section,
    .main-content > .quick-actions,
    .main-content > .ai-insight-banner { padding-left: .7rem; padding-right: .7rem; }

    /* ── Quick actions: single column ──────────────────────────── */
    .quick-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: .5rem;
        padding-top: .75rem;
    }
    .qa-btn { font-size: .82rem; padding: .65rem .5rem; min-height: 52px; }
    .qa-primary { font-size: .88rem; }
    .qa-btn i { font-size: .9rem; }

    /* ── KPI grid: 2 columns but smaller cards ──────────────────── */
    .kpi-grid { gap: .5rem; }
    .kpi-card { padding: .85rem; gap: .6rem; flex-direction: column; align-items: flex-start; }
    .kpi-icon { width: 34px; height: 34px; font-size: .9rem; border-radius: 8px; }
    .kpi-value { font-size: 1.2rem; }
    .kpi-label { font-size: .65rem; }
    .kpi-delta { font-size: .7rem; }

    /* ── AI banner: compact ─────────────────────────────────────── */
    .ai-insight-banner { padding: .75rem; gap: .6rem; flex-wrap: wrap; }
    .ai-icon { width: 32px; height: 32px; font-size: .9rem; }
    .ai-insight-banner p { font-size: .8rem; width: 100%; }
    .ai-dismiss { position: absolute; top: .5rem; right: .5rem; }
    .ai-insight-banner { position: relative; }

    /* ── Charts ─────────────────────────────────────────────────── */
    .chart-card { padding: .85rem; }
    .chart-wrap { height: 160px !important; }
    .chart-wrap-donut { height: 180px !important; }

    /* ── Stat cards ─────────────────────────────────────────────── */
    .stats-row[style] { grid-template-columns: 1fr 1fr !important; }
    .stat-card { padding: .8rem; gap: .65rem; }
    .stat-icon { width: 34px; height: 34px; font-size: .9rem; border-radius: 8px; }
    .stat-body .stat-value { font-size: 1.15rem; }
    .stat-body .stat-label { font-size: .65rem; }

    /* ── Tables: font reduction ─────────────────────────────────── */
    .data-table { font-size: .78rem; }
    .data-table thead th { padding: .6rem .6rem; font-size: .65rem; }
    .data-table tbody td { padding: .65rem .6rem; }
    .inv-table { font-size: .78rem; min-width: 420px; }

    /* ── Builder ────────────────────────────────────────────────── */
    .builder-form { padding: .7rem; gap: .75rem; }
    .bf-section { padding: .85rem; }
    .bf-section-title { font-size: .7rem; margin-bottom: .75rem; }
    .items-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .items-table { min-width: 380px; font-size: .78rem; }

    /* Total row stack */
    .totals-table { margin-top: .75rem; }
    .total-row { font-size: .85rem; }
    .total-grand { font-size: .95rem; }

    /* Section action button: full-width */
    .bf-section > .btn[style*="width:100%"] { width: 100% !important; }

    /* ── Modal: full-screen sheet ───────────────────────────────── */
    .modal-card {
        padding: 1.25rem 1rem;
        max-height: 90vh;
        border-radius: 14px 14px 0 0;
    }
    .modal-card h3 { font-size: .95rem; }
    .modal-card .modal-sub { font-size: .8rem; }
    .modal-actions { gap: .5rem; }

    /* ── Filter pills ───────────────────────────────────────────── */
    .filter-pill { padding: .38rem .75rem; font-size: .78rem; min-height: 38px; }

    /* ── Settings tabs: icon only on tiny screens ───────────────── */
    .stab { padding: .5rem .6rem; font-size: .72rem; }
    .settings-tabs { gap: .15rem; }

    /* ── Customer cards ─────────────────────────────────────────── */
    .cust-stats-bar { grid-template-columns: 1fr 1fr 1fr; }
    .csb-item { padding: .5rem .4rem; }

    /* ── Reminder modal ─────────────────────────────────────────── */
    .reminder-textarea { min-height: 100px; font-size: .82rem !important; }

    /* ── Toast ──────────────────────────────────────────────────── */
    .toast { font-size: .8rem; padding: .7rem .9rem; gap: 8px; }

    /* ── Pay page ───────────────────────────────────────────────── */
    .pay-amount-value { font-size: 1.9rem; }
    .pay-biz-name  { font-size: 1rem; }
    .pay-detail    { font-size: .85rem; }
    .pay-btn       { font-size: .9rem; padding: .9rem; }
    .pay-secure    { font-size: .72rem; }

    /* ── Onboarding ─────────────────────────────────────────────── */
    .ob-card { padding: 1.4rem 1rem; }
    .ob-header h1 { font-size: 1.5rem; }
    .choice-card { padding: .85rem 1rem; gap: .75rem; }
    .cc-icon { width: 38px; height: 38px; font-size: 1rem; }
    .cc-info h4 { font-size: .88rem; }
    .cc-info p  { font-size: .75rem; }

    .builder-action-row{
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   4. SMALL PHONES — ≤360px
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {

    .page-body { padding: .6rem; gap: .65rem; }

    /* KPI: still 2-col but tighter */
    .kpi-card { padding: .75rem .6rem; }
    .kpi-value { font-size: 1.1rem; }

    /* Quick actions: 1 column */
    .quick-actions { grid-template-columns: 1fr !important; }
    .qa-btn { min-height: 48px; }
    .qa-primary { order: -1; }

    /* Stats: 1 column */
    .stats-row[style] { grid-template-columns: 1fr !important; }

    /* Topbar: minimal */
    .topbar { padding: 0 .6rem; }
    .topbar-title { max-width: 110px; font-size: .82rem; }

    /* Modal: almost full-height */
    .modal-card { padding: 1rem .9rem; max-height: 92vh; }

    /* Builder: very compact */
    .bf-section { padding: .75rem; }
    .items-table { min-width: 340px; }

    .builder-action-row{
        display: none;
    }

}


/* ═══════════════════════════════════════════════════════════════════
   5. LANDSCAPE PHONE — height-constrained
   ═══════════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {

    /* Sidebar: scrollable, no full-height lock */
    .sidebar { height: 100dvh; overflow-y: auto; }

    /* Topbar: shorter */
    .topbar { height: 48px; }
    :root { --topbar-h: 48px; }

    /* KPI: single row, scroll */
    .kpi-grid {
        grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .kpi-grid::-webkit-scrollbar { display: none; }
    .kpi-card { min-width: 140px; flex-shrink: 0; }

    /* Charts: shorter */
    .chart-wrap { height: 140px !important; }

    /* Modal: scrollable */
    .modal-card { max-height: 80vh; }

    .builder-action-row{
        display: none;
    }

}


/* ═══════════════════════════════════════════════════════════════════
   6. NATIVE-APP-LIKE BOTTOM SAFE AREA (notch phones)
   ═══════════════════════════════════════════════════════════════════ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .page-body:last-child,
    .builder-form { padding-bottom: calc(.85rem + env(safe-area-inset-bottom)); }

    #toast-container { bottom: calc(.75rem + env(safe-area-inset-bottom)); }
    .bulk-bar { bottom: calc(.75rem + env(safe-area-inset-bottom)); }
    .modal-card { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

    /* Sidebar safe area */
    .sidebar-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}


/* ═══════════════════════════════════════════════════════════════════
   7. SWIPEABLE TABLES — all table-wrap elements are swipeable
   ═══════════════════════════════════════════════════════════════════ */

.table-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.table-wrap::-webkit-scrollbar { height: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Scroll hint shadow on right edge when table is wider than viewport */
.table-wrap {
    position: relative;
}


/* ═══════════════════════════════════════════════════════════════════
   8. MOBILE FLOATING ACTION BUTTON (FAB)
   Shown ONLY on mobile — quick access to Create Invoice
   ═══════════════════════════════════════════════════════════════════ */

.mobile-fab {
    display: none;
    position: fixed;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    right: 1.25rem;
    width: 56px;
    height: 56px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255,111,0,0.45);
    z-index: 200;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    text-decoration: none;
}
.mobile-fab:hover, .mobile-fab:active {
    background: var(--brand-dark);
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(255,111,0,0.5);
}

@media (max-width: 768px) {
    .mobile-fab { display: flex; }

    .builder-action-row{
        display: none;
    }
    .bf-section:nth-of-type(8) { display: none;}
}


/* ═══════════════════════════════════════════════════════════════════
   9. PRINT STYLES — clean invoice printing from mobile
   ═══════════════════════════════════════════════════════════════════ */

@media print {
    .sidebar, .sidebar-overlay, .topbar, .hamburger,
    .mobile-fab, #toast-container, .modal-backdrop,
    .quick-actions, .mode-toggle, .ai-insight-banner,
    .ai-section, .accounting-section, .bulk-bar,
    .btn-sm, .see-all, .filter-pills, .sort-select,
    .section-header .btn, .section-header .btn-sm { display: none !important; }

    body { display: block; background: #fff; }
    .main-content { margin-left: 0 !important; }
    .page-body { padding: 0; }
    .table-wrap { overflow: visible; box-shadow: none; border: 1px solid #ddd; }
    .data-table, .inv-table { min-width: 0; font-size: 11pt; }
    .kpi-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .kpi-card { break-inside: avoid; }
}


/* ═══════════════════════════════════════════════════════════════════
   HOW TO ADD THE FAB TO YOUR PAGES
   ═══════════════════════════════════════════════════════════════════

   Add this HTML right before </body> on dashboard, invoices,
   customers, accounting, and reports pages:

   <a href="/invoice/builder/" class="mobile-fab" title="Create Invoice">
     <i class="fas fa-plus"></i>
   </a>

   The FAB is hidden on desktop (>768px) and appears on mobile only.
   ═══════════════════════════════════════════════════════════════════ */