/* BillBabu mobile overrides (Phase 2A).
   Loaded on every page; takes effect only when:
     - viewport <= 767px (the @media block), AND
     - body.is-mobile is set by js/mobile-shell.js
   So desktop layout is unaffected when this file loads. */

/* ── Bottom nav (always present on mobile when shell injects it) ───── */
.bb-bottom-nav {
    display: none; /* shown only on mobile via @media block below */
}

/* ── Install banner (always rendered when prompt available) ────────── */
.bb-install-banner {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 999;
    font-family: 'Inter', system-ui, sans-serif;
}
.bb-install-banner .bb-install-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: #F0EBFF; color: #6C47FF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bb-install-banner .bb-install-icon svg { width: 18px; height: 18px; }
.bb-install-banner .bb-install-text { flex: 1; min-width: 0; }
.bb-install-banner .bb-install-title {
    font-weight: 700; font-size: 14px; color: #111827; line-height: 1.2;
}
.bb-install-banner .bb-install-sub {
    font-size: 11.5px; color: #6b7280; margin-top: 2px;
}
.bb-install-banner .bb-install-cta {
    background: #6C47FF; color: #fff; border: none;
    padding: 8px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
}
.bb-install-banner .bb-install-cta:active { background: #4318D0; transform: scale(0.96); }
.bb-install-banner .bb-install-dismiss {
    background: transparent; border: none; color: #9ca3af;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.bb-install-banner .bb-install-dismiss:active { background: #f3f4f6; }
.bb-install-banner .bb-install-dismiss svg { width: 16px; height: 16px; }

/* ── Floating language toggle (top-right) ─────────────────────── */
.bb-lang-toggle {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 14px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    z-index: 996;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.bb-lang-toggle:active { transform: scale(.94); background: #f9fafb; }
.bb-lang-toggle-label { display: block; }
/* Hide while a sales/purchase entry-mode close ✕ already occupies the
   top-right corner, or while the dues form modal is open. */
body.bb-mobile-sales-entry-mode .bb-lang-toggle,
body.bb-mobile-purchase-entry-mode .bb-lang-toggle,
body.bb-edit-focus .bb-lang-toggle,
body.bb-os-mode-receivable .bb-lang-toggle,
body.bb-os-mode-debt .bb-lang-toggle { display: none !important; }

/* ── Global FAB (Phase 1: tap = New Sale) ───────────────────────────
   Injected by js/mobile-shell.js on signed-in mobile pages where no
   page-scoped FAB or primary affordance would conflict. */
.bb-global-fab {
    display: none;
}
.bb-fab-tooltip {
    display: none;
}

@media (max-width: 767px) {

    /* ── Hide desktop sidebar entirely on mobile ──────────────────── */
    .sidebar,
    aside.sidebar,
    .dashboard-layout > .sidebar,
    #sidebar { display: none !important; }

    /* ── Hide the top static bar AND the hamburger on every mobile
          page. Bottom nav handles primary navigation; in-page back
          uses each page's own ✕ / Back button. ──────────────────── */
    .dashboard-topbar,
    .page-topbar,
    header.page-topbar,
    .sidebar-toggle,
    #sidebarToggle,
    .topbar-menu,
    .menu-toggle,
    .hamburger { display: none !important; }
    /* Reset the +72px shim other stylesheets add for siblings of the
       fixed topbar — we've removed the topbar. */
    .page-main > .page-topbar + *,
    .dashboard-main > .dashboard-topbar + * { margin-top: 0 !important; }

    .dashboard-layout,
    .app-layout,
    .page-layout,
    main {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* dashboard.css and forms-pages.css set `min-height: 100vh` on these
       outer wrappers so desktop layouts stretch to the viewport. On mobile
       the sidebar is hidden and the wrapper often sits NEXT TO our injected
       mobile views — so a 100vh-tall empty wrapper adds a full screen of
       dead scroll under the actual content. Kill it. The page is exactly as
       tall as its content. */
    .dashboard-layout,
    .page-layout,
    .app-layout {
        min-height: 0 !important;
    }

    /* And the html/body shouldn't fake-fill either. */
    html, body { min-height: 0 !important; height: auto !important; }

    body { background: #f3f4f6; }

    /* Page content wrappers */
    .page-content,
    .page-content-wide,
    .container,
    main > section {
        padding: 12px !important;
        max-width: 100% !important;
    }

    /* Pad bottom of content so bottom nav doesn't overlap.
       The padding only applies when the page's own <main> is the one
       carrying the content. When one of our injected mobile views has
       taken over (dashboard / sales-list / purchase-list / more), the
       legacy <main> is empty — we kill its padding so it doesn't add
       80px of dead scroll under our view. */
    body.bb-has-bottom-nav .page-content,
    body.bb-has-bottom-nav .page-content-wide,
    body.bb-has-bottom-nav main {
        padding-bottom: calc(88px + max(env(safe-area-inset-bottom, 0px), 16px)) !important;
    }
    /* Don't double-pad: when <main> contains a .page-content / .page-content-wide
       / .dashboard-content child, that inner wrapper already carries the
       bottom-nav clearance. Zero out main's padding-bottom in that case so
       the user doesn't see ~80px of dead scroll under the actual content. */
    body.bb-has-bottom-nav main:has(> .page-content),
    body.bb-has-bottom-nav main:has(> .page-content-wide),
    body.bb-has-bottom-nav main:has(> .dashboard-content),
    body.bb-has-bottom-nav .page-main:has(> .page-content),
    body.bb-has-bottom-nav .dashboard-main:has(> .dashboard-content) {
        padding-bottom: 0 !important;
    }
    /* Mobile views (dashboard / sales-list / purchase-list / more) render
       outside <main>; the legacy <main> is empty in those modes. Kill its
       padding entirely so it doesn't add 80px of dead scroll under our view. */
    body.bb-mobile-dashboard-mounted main,
    body.bb-mobile-more-mounted main,
    body.new-sale-fullwidth:not(.bb-mobile-sales-entry-mode) main,
    body.new-purchase-fullwidth:not(.bb-mobile-purchase-entry-mode) main {
        padding: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    /* ── Bottom nav visible ──────────────────────────────────────── */
    /* Lift the bar above the home-indicator: use the larger of the OS
       safe-area inset OR a 16px floor (so even Androids without a notch
       get breathing room), then add 8px of internal top padding so the
       icons don't crowd the top edge. iPhone 15 Pro reports ~34px for
       safe-area-inset-bottom which already clears the indicator; we add
       a touch more so the bar feels deliberately floated, not pinned. */
    .bb-bottom-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding-top: 8px;
        padding-left: 6px;
        padding-right: 6px;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
        z-index: 998;
        font-family: 'Inter', system-ui, sans-serif;
    }
    .bb-bnav-tab {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 8px 2px;
        text-decoration: none;
        color: inherit;
        border-radius: 10px;
    }
    .bb-bnav-tab:active { background: #f9fafb; }
    .bb-bnav-icon { width: 22px; height: 22px; color: #9ca3af; }
    .bb-bnav-label { font-size: 10.5px; font-weight: 500; color: #6b7280; letter-spacing: -0.1px; }
    .bb-bnav-tab.is-active .bb-bnav-icon { color: #6C47FF; }
    .bb-bnav-tab.is-active .bb-bnav-label { color: #6C47FF; font-weight: 600; }

    /* iOS auto-zoom on input focus is now blocked globally by viewport
       maximum-scale=1.0 (see <meta name="viewport"> in every page), so the
       previous 16px input-font floor was both unnecessary and overriding
       per-card sizing like .customer-info-card / .supplier-info-card. */

    /* Tap target floor */
    button, .btn, a.btn { min-height: 40px; }

    /* Tables → cards (on pages where they get cramped). Pages can opt
       out by adding .desktop-table-keep on the table. */
    table:not(.desktop-table-keep) {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    /* ── Global FAB visible only on mobile, when shell injects it ─── */
    .bb-global-fab {
        display: flex;
        position: fixed;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        right: 18px;
        width: 56px;
        height: 56px;
        background: #6C47FF;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(108, 71, 255, 0.4);
        cursor: pointer;
        border: none;
        z-index: 990;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none;
    }
    .bb-global-fab:active {
        transform: scale(0.94);
        background: #4318D0;
    }
    .bb-global-fab svg.bb-global-fab-plus {
        width: 24px;
        height: 24px;
        color: #fff;
    }

    /* Chevron affordance baked into the FAB — hints at the long-press menu.
       Acts as its own tap target (extends the FAB's bottom-right quadrant). */
    .bb-global-fab-chev {
        position: absolute;
        right: 6px;
        bottom: 6px;
        width: 14px;
        height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        opacity: 0.6;
        pointer-events: none;
    }
    .bb-global-fab-chev svg {
        width: 11px;
        height: 11px;
    }

    /* Hide global FAB while keyboard is open, modal is up, or any
       page-scoped overlay/entry mode is active. The page-scoped
       FABs (sales/purchase) are excluded at injection time, so
       this rule only handles mode-based hiding. The popover hides
       too so it can't outlive the FAB. */
    body.bb-mobile-sales-entry-mode .bb-global-fab,
    body.bb-mobile-purchase-entry-mode .bb-global-fab,
    body.bb-edit-focus .bb-global-fab,
    body.bb-os-mode-receivable .bb-global-fab,
    body.bb-os-mode-debt .bb-global-fab,
    body.bb-mobile-sales-entry-mode .bb-fab-menu,
    body.bb-mobile-purchase-entry-mode .bb-fab-menu,
    body.bb-edit-focus .bb-fab-menu,
    body.bb-os-mode-receivable .bb-fab-menu,
    body.bb-os-mode-debt .bb-fab-menu {
        display: none !important;
    }

    /* Long-press / chevron-tap popover.
       Anchored above the FAB, right-aligned, slide-up + fade. */
    .bb-fab-menu-backdrop {
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 991;
    }
    .bb-fab-menu {
        position: fixed;
        right: 18px;
        bottom: calc(146px + env(safe-area-inset-bottom, 0px));
        width: 220px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
        padding: 6px;
        z-index: 992;
        opacity: 0;
        transform: translateY(8px) scale(0.98);
        transform-origin: 100% 100%;
        transition: opacity 180ms ease, transform 180ms ease;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }
    .bb-fab-menu.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .bb-fab-menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        background: transparent;
        border: none;
        border-radius: 10px;
        font: 500 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        color: #1F1F2E;
        text-align: left;
        cursor: pointer;
        text-decoration: none;
    }
    .bb-fab-menu-item:active {
        background: #F1EEFE;
    }
    .bb-fab-menu-item .bb-fab-menu-icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #F1EEFE;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6C47FF;
    }
    .bb-fab-menu-item .bb-fab-menu-icon svg {
        width: 18px;
        height: 18px;
    }
    .bb-fab-menu-item .bb-fab-menu-label {
        flex: 1;
        min-width: 0;
    }

    /* First-session tooltip anchored above the FAB. */
    .bb-fab-tooltip {
        display: block;
        position: fixed;
        bottom: calc(146px + env(safe-area-inset-bottom, 0px));
        right: 18px;
        max-width: 220px;
        padding: 10px 14px;
        background: #1F1F2E;
        color: #fff;
        font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        z-index: 991;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 180ms ease, transform 180ms ease;
        pointer-events: auto;
    }
    .bb-fab-tooltip.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    .bb-fab-tooltip::after {
        content: "";
        position: absolute;
        right: 22px;
        bottom: -6px;
        width: 12px;
        height: 12px;
        background: #1F1F2E;
        transform: rotate(45deg);
        border-radius: 2px;
    }
}

/* iPad / small tablet: keep desktop layout but tweak */
@media (min-width: 768px) and (max-width: 1023px) {
    .dashboard-layout > .sidebar,
    aside.sidebar { width: 200px !important; }
}

/* ── Dashboard-specific mobile overrides ────────────────────────────── */
@media (max-width: 767px) {
    /* Hero / "this quarter's sales" zone — stack vertical, full width */
    .zone-banner,
    [class*="zoneBanner"],
    .zab-hero,
    .dashboard-hero {
        margin: 0 0 14px !important;
        padding: 18px 18px !important;
        border-radius: 18px !important;
    }

    /* Hero title + amount sizes */
    .zone-banner h1, .zone-banner h2,
    .zab-hero h1, .zab-hero h2 {
        font-size: 1.6rem !important;
    }

    /* Top metric cards row → 2x2 grid on mobile */
    .stats-grid,
    .metric-cards-row,
    [class*="statsGrid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .stats-grid .stat-card,
    .metric-card,
    .stat-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }
    .stat-card .stat-label,
    .metric-card .metric-label { font-size: 11px !important; }
    .stat-card .stat-value,
    .metric-card .metric-value { font-size: 17px !important; }

    /* Quick action cards → smaller 4-up grid */
    .quick-actions,
    .quick-actions-grid,
    [class*="quickActions"] {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }
    .quick-action-card,
    .quick-action-tile,
    .quick-action-card a,
    [class*="quickAction"] {
        padding: 10px 4px !important;
    }

    /* Chart container — full width, height tightens */
    .chart-card,
    .chart-container,
    #weeklyChart {
        padding: 12px !important;
    }
    #weeklyChart { min-height: 220px !important; max-height: 280px !important; }

    /* Recent transactions card on dashboard */
    .recent-transactions-card,
    .dashboard-recent-tx {
        margin: 14px 0 !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    /* Hide secondary cards on mobile to keep page short. Pages can opt out
       by adding `data-keep-on-mobile="1"`. */
    .dashboard-side-rail,
    .desktop-only-card {
        display: none !important;
    }

    /* Trial banner / subscription strip — compact */
    .subscription-banner,
    .trial-banner {
        padding: 10px 14px !important;
        font-size: 13px !important;
        margin: 0 0 12px !important;
    }

    /* Topbar greeting compact */
    .greeting-block, .topbar-greeting {
        padding: 0 !important;
    }
    .greeting-block h1 { font-size: 1.25rem !important; }
}