/*
 * app-mobile.css — NATIVE-APP skin for GENERATED PPPHP apps.
 * ---------------------------------------------------------------------------
 * The Builder already outputs responsive pages; this layer RE-SKINS them on
 * phones so they read like a real iOS/Android app — grouped inset forms, large
 * titles, list rows as tappable cells, filled controls, a floating Add button,
 * segmented controls, bottom-sheet menus and a bottom tab bar (populated by the
 * companion app-mobile.js).
 *
 * RULES:
 *   • EVERY rule is inside a `@media (max-width:…)` block → desktop byte-identical.
 *   • Colour/shape come only from --pp-* tokens → adapts to every theme + dark
 *     (:root.is-dark) automatically. Never hardcode a colour.
 *   • Loaded LAST (injected before </head>), so it wins the cascade.
 *   • Breakpoints: 991.98 (tablet/drawer) · 767.98 (phone skin) · 575.98 (small).
 * ===========================================================================
 */

/* ══════════ Tablet + phone (≤ 991.98px): foundations ══════════ */
@media (max-width: 991.98px) {
    html { overflow-x: hidden; }
    .pp-shell, .pp-main, .pp-content { min-width: 0; max-width: 100%; }
    /* Tables scroll inside their wrap instead of clipping/overflowing. */
    .ppd-grid-table-wrap, .pp-detail-grid .ppd-grid-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Notch-safe fixed topbar, paired with main's offset (no-op when inset = 0). */
    .pp-topbar { padding-top: env(safe-area-inset-top, 0px); height: auto; min-height: var(--pp-shell-topbar-h, 56px); }
    .pp-main { padding-top: calc(var(--pp-shell-topbar-h, 56px) + env(safe-area-inset-top, 0px)); }
    .pp-sidebar { -webkit-overflow-scrolling: touch; }
}

/* ══════════ Phone (≤ 767.98px): the NATIVE-APP SKIN ══════════ */
@media (max-width: 767.98px) {

    /* ── Grouped-list background: content sits on a faintly sunken ground so the
          white cards pop (the classic iOS grouped-table look). ── */
    body .pp-main, body .pp-content { background: var(--pp-bg, #f2f3f7); }

    /* ── App bar: translucent, blurred, hairline divider, thumb-sized controls ── */
    .pp-topbar {
        background: color-mix(in srgb, var(--pp-topbar-bg, #fff) 84%, transparent);
        -webkit-backdrop-filter: saturate(1.6) blur(18px);
        backdrop-filter: saturate(1.6) blur(18px);
        border-bottom: .5px solid var(--pp-topbar-border, rgba(0,0,0,.08));
        gap: .15rem; padding-left: .5rem; padding-right: .5rem;
    }
    .pp-burger { font-size: 1.3rem; width: 42px; height: 42px; }
    .pp-brand-name { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
    .pp-topbar details > summary { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    /* Trim topbar clutter: the language flag lives in the drawer/menu on phones. */
    .pp-topbar .pp-lang { display: none; }

    /* ── iOS-style large title; breadcrumbs aren't a native pattern → hide them ── */
    .pp-page-head { display: block; border: none; padding: .35rem 0 .1rem; margin-bottom: .5rem; }
    .pp-page-head .pp-breadcrumb { display: none; }
    .pp-page-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.021em; line-height: 1.12; }

    /* ── Content gutters + a bottom cushion so nothing hides behind the tab bar ── */
    .pp-content {
        padding: .75rem 1rem calc(1.25rem + var(--ppm-tabbar, 0px) + env(safe-area-inset-bottom, 0px));
    }

    /* ═══ NATIVE GROUPED FORM ═══
       Each section is one rounded inset card; fields become full-width rows
       separated by hairline dividers; inputs are borderless and sit flush — the
       unmistakable iOS "inset grouped" form. ── */
    .ppg-form-section {
        background: var(--pp-surface, #fff);
        border: none;
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(2,6,23,.06), 0 12px 28px rgba(2,6,23,.05);
        overflow: hidden;
        margin: 0 0 1.4rem;
    }
    .ppg-form-section > .pp-form-head {
        background: transparent; border: none;
        padding: .1rem .25rem .5rem; margin: 0;
    }
    .ppg-form-section > .pp-form-head h3 {
        font-size: .74rem; font-weight: 800; text-transform: uppercase;
        letter-spacing: .05em; color: var(--pp-muted, #64748b);
    }
    .ppg-form-section > .pp-form-head i { color: var(--pp-primary, #4f46e5); }
    /* Put the header ABOVE the card (iOS caption) by lifting it out of the card flow. */
    .ppg-form-section { margin-top: 0; }

    .ppg-form-section > .pp-form-body { padding: 0; }
    .ppg-form-grid { gap: 0 !important; }

    /* Every field is a full-width stacked row (native forms are single-column). */
    .ppg-form-grid > .pp-fld,
    .ppg-form-grid .pp-lgcell > .pp-zone12 > .pp-fld,
    .pp-fld[data-pp-field] {
        grid-column: 1 / -1 !important;
        display: flex; flex-direction: column; gap: .2rem;
        margin: 0; padding: .72rem 1rem;
        border-bottom: 1px solid var(--pp-border, #eef1f6);
        background: var(--pp-surface, #fff);
    }
    /* Collapse Designer layout-grids/cells so their children read as plain rows. */
    .ppg-form-grid .pp-lgrid, .ppg-form-grid .pp-lgcell, .ppg-form-grid .pp-zone12 {
        display: block !important; grid-template-columns: none !important; gap: 0 !important;
    }
    .ppg-form-section .pp-fld:last-child { border-bottom: none; }

    .pp-fld > label {
        font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
        color: var(--pp-muted, #64748b); margin: 0;
    }
    /* Borderless, flush inputs inside the grouped rows. */
    .pp-fld .pp-input, .pp-fld .pp-fld-wrap > input, .pp-fld .pp-fld-wrap > select,
    .pp-fld .pp-fld-wrap > textarea {
        border: none !important; background: transparent !important; box-shadow: none !important;
        padding: .15rem 0 !important; min-height: 30px; font-size: 16px !important; border-radius: 0 !important;
    }
    .pp-fld .pp-fld-wrap { border: none !important; background: transparent !important; padding: 0 !important; }
    .pp-fld select.pp-input { -webkit-appearance: none; appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important; background-position: right .1rem center !important; padding-right: 1.2rem !important; }
    .pp-fld textarea.pp-input { min-height: 4.5em; }

    /* ═══ NATIVE STICKY ACTION BAR ═══ */
    .pp-form-actions.pp-sticky {
        position: sticky; bottom: 0; z-index: 20;
        display: flex; flex-wrap: wrap; gap: .55rem;
        margin: .5rem -1rem 0; padding: .7rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--pp-surface, #fff) 90%, transparent);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-top: .5px solid var(--pp-border, #e2e8f0);
        box-shadow: 0 -10px 26px rgba(2,6,23,.10);
    }
    .pp-form-actions.pp-sticky .pp-btn-form {
        flex: 1 1 auto; justify-content: center; min-height: 48px;
        border-radius: 14px; font-weight: 700; font-size: 1rem;
    }
    .pp-form-actions.pp-sticky .pp-btn-form[data-pp-btn=save],
    .pp-form-actions.pp-sticky .pp-btn-form.primary { flex-basis: 100%; }
    .pp-form-actions.pp-sticky .pp-required-hint { flex-basis: 100%; text-align: center; }

    /* ═══ NATIVE LIST (cards view = tappable cells) ═══ */
    .ppd-cards { grid-template-columns: 1fr !important; gap: .7rem !important; }
    .pp-card {
        border-radius: 16px; border: none;
        box-shadow: 0 1px 2px rgba(2,6,23,.06), 0 10px 24px rgba(2,6,23,.05);
        padding: .9rem 1rem;
    }
    .pp-card-title { font-size: 1.02rem; font-weight: 700; }
    .pp-card-subtitle { color: var(--pp-muted, #64748b); }

    /* The data table gets breathing room + a scroll cue, and headers read as an
       app section header. (Cards view is preferred on phones; see app-mobile.js.) */
    .ppd-grid-table-wrap { border-radius: 14px; }
    .ppd-grid-table th { font-size: .68rem; letter-spacing: .04em; }
    .ppd-grid-table td, .ppd-grid-table th { white-space: nowrap; }

    /* ═══ FLOATING ACTION BUTTON — the toolbar "Add" becomes a polished iOS-style
          floating button: glossy gradient pill, layered ambient+key shadow, a soft
          top-highlight ring, a springy press, and a subtle pop-in on load. ═══ */
    .pp-toolbar .pp-tb-left [data-pp-btn=add] {
        position: fixed;
        right: calc(1.05rem + env(safe-area-inset-right, 0px));
        bottom: calc(1.15rem + var(--ppm-tabbar, 0px) + env(safe-area-inset-bottom, 0px));
        z-index: 45;
        width: 60px; height: 60px; min-width: 0; padding: 0 !important;
        border-radius: 50% !important; border: none !important;
        display: inline-flex; align-items: center; justify-content: center;
        overflow: visible; white-space: nowrap; isolation: isolate;
        color: var(--pp-primary-text, #fff) !important;
        background:
            radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, var(--pp-primary, #4f46e5) 78%, #fff) 0%, transparent 55%),
            linear-gradient(155deg, color-mix(in srgb, var(--pp-primary, #4f46e5) 92%, #fff) 0%, var(--pp-primary, #4f46e5) 52%, color-mix(in srgb, var(--pp-primary, #4f46e5) 82%, #000) 100%)
            var(--pp-primary, #4f46e5) !important;
        box-shadow:
            0 1px 1.5px rgba(2, 6, 23, .18),
            0 6px 14px -3px color-mix(in srgb, var(--pp-primary, #4f46e5) 55%, transparent),
            0 18px 40px -10px color-mix(in srgb, var(--pp-primary, #4f46e5) 50%, transparent);
        font-size: 0 !important;                 /* hide the "+ Add New" text node */
        -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
        transition: transform .24s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, filter .2s ease;
        animation: ppmFabIn .34s cubic-bezier(.34, 1.56, .64, 1) both;
    }
    /* glossy top highlight + inner base shading, iOS-control style */
    .pp-toolbar .pp-tb-left [data-pp-btn=add]::after {
        content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
        box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .5), inset 0 -3px 6px rgba(2, 6, 23, .18);
    }
    /* a crisp, SF-style thin plus; the label text stays in the a11y tree */
    .pp-toolbar .pp-tb-left [data-pp-btn=add]::before { content: "\002B"; position: relative; z-index: 1; font-size: 2.05rem; font-weight: 300; line-height: 1; }
    .pp-toolbar .pp-tb-left [data-pp-btn=add] i { display: none; }
    .pp-toolbar .pp-tb-left [data-pp-btn=add]:active {
        transform: scale(.9);
        box-shadow: 0 1px 1.5px rgba(2, 6, 23, .2), 0 4px 10px -3px color-mix(in srgb, var(--pp-primary, #4f46e5) 50%, transparent);
        filter: brightness(.97);
    }
    @media (hover: hover) { .pp-toolbar .pp-tb-left [data-pp-btn=add]:hover { transform: translateY(-1px) scale(1.03); } }
    @keyframes ppmFabIn { from { transform: scale(0) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
    /* Declutter: hide power-user inline-add + spreadsheet toggles on phones. */
    #ppInlineAdd, #ppSpreadsheetToggle { display: none !important; }

    /* ═══ SEGMENTED CONTROLS (where-tabs + table/cards view toggle) ═══ */
    .pp-where-tabs.nav-tabs, .ppd-view-toggle {
        background: var(--pp-surface-sunken, #eceef3); border-radius: 12px; padding: 3px; border: none; gap: 2px;
    }
    .pp-where-tabs.nav-tabs .nav-link, .ppd-view-toggle .ppd-grid-toolbar-btn {
        border: none !important; border-radius: 9px !important; flex: 1 1 auto; justify-content: center;
        font-weight: 600; color: var(--pp-muted, #64748b);
    }
    .pp-where-tabs.nav-tabs .nav-link.active, .ppd-view-toggle .ppd-grid-toolbar-btn.is-active {
        background: var(--pp-surface, #fff) !important; color: var(--pp-text, #111) !important;
        box-shadow: 0 1px 3px rgba(2,6,23,.16);
    }

    /* ═══ RECORD / VIEW page as grouped card ═══ */
    .pp-record { padding: 0; }
    .pp-record-card { border: none; border-radius: 16px; box-shadow: 0 1px 2px rgba(2,6,23,.06), 0 10px 24px rgba(2,6,23,.05); }
    .pp-record-head { gap: .75rem; flex-wrap: wrap; }
    .pp-record-actions { width: 100%; flex-wrap: wrap; }
    .pp-record-actions .ppd-grid-toolbar-btn { flex: 1 1 auto; justify-content: center; min-height: 42px; border-radius: 12px; }
    .pp-md-head { flex-wrap: wrap; gap: .5rem; }

    /* ═══ DASHBOARD ═══ */
    .pp-hero { flex-direction: column; align-items: flex-start; gap: 1rem; overflow: hidden; border-radius: 18px; }
    .pp-hero .pp-hero-clock, .pp-hero-clock { align-self: center; }
    .pp-hero-title { font-size: 1.5rem; }
    .pp-mc { border: none; border-radius: 16px; box-shadow: 0 1px 2px rgba(2,6,23,.06), 0 10px 24px rgba(2,6,23,.05); }

    /* ═══ Chips / bulk bar / pagination wrap ═══ */
    .pp-filter-chips { flex-wrap: wrap; row-gap: .35rem; }
    .pp-selbar { flex-wrap: wrap; gap: .5rem; }
    .pp-selbar .pp-sel-count { flex-basis: 100%; }
    .pp-list-footer { flex-direction: column; align-items: stretch; gap: .6rem; }
    .pp-pagination { flex-wrap: wrap; justify-content: center; gap: .3rem; }
    .pp-pg { min-height: 40px; min-width: 40px; }

    /* ═══ Toolbar popovers → bottom sheets ═══ */
    .pp-filter-menu, .pp-cols-menu, .pp-export-menu {
        position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important;
        bottom: calc(8px + var(--ppm-tabbar, 0px) + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important; min-width: 0 !important; max-width: none !important;
        max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        border-radius: 18px !important; box-shadow: 0 -12px 44px var(--pp-scrim, rgba(2,6,23,.32)) !important;
        z-index: 1200 !important;
    }
    .pp-act-pop { max-width: min(78vw, 240px); }
    /* Bottom-sheet inner: a grab handle on top + roomy tappable rows. */
    .pp-filter-menu::before, .pp-cols-menu::before, .pp-export-menu::before {
        content: ""; display: block; width: 40px; height: 4px; border-radius: 999px;
        background: var(--pp-border-strong, #cbd5e1); margin: 2px auto 12px;
    }
    /* Columns show/hide + filter menus: each option is a full-width native row. */
    #ppColsMenu label, .pp-cols-menu label, .pp-filter-menu label {
        display: flex; align-items: center; gap: .7rem;
        padding: .7rem .25rem; margin: 0; min-height: 46px;
        border-bottom: 1px solid var(--pp-border, #eef1f6);
        font-size: .95rem; cursor: pointer;
    }
    #ppColsMenu label:last-child, .pp-cols-menu label:last-child { border-bottom: none; }
    #ppColsMenu input[type=checkbox], .pp-cols-menu input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--pp-primary, #4f46e5); }
    .pp-filter-menu .pp-filter-actions, .pp-cols-menu .pp-filter-actions { display: flex; gap: .5rem; margin-top: .8rem; }
    .pp-filter-menu .pp-filter-actions > * , .pp-cols-menu .pp-filter-actions > * { flex: 1 1 auto; justify-content: center; min-height: 46px; border-radius: 12px; }
    .pp-filter-title, .pp-cols-title { font-size: .95rem; font-weight: 800; margin-bottom: .3rem; }

    /* ═══ NATIVE DRAWER (iOS/Android side menu) ═══ */
    .pp-sidebar { width: min(84vw, 320px) !important; border-radius: 0 20px 20px 0; box-shadow: 20px 0 60px rgba(2,6,23,.3); }
    .pp-nav-overlay { background: var(--pp-scrim, rgba(2,6,23,.5)) !important; }
    .pp-sidebar-nav { padding: .5rem .6rem; }
    .pp-menu-link { min-height: 50px; border-radius: 14px; font-size: 1.02rem; font-weight: 600; gap: .85rem; padding: 0 .9rem; }
    .pp-menu-link i, .pp-menu-link .bi { font-size: 1.2rem; }
    .pp-menu-link.pp-menu-active { background: color-mix(in srgb, var(--pp-primary, #4f46e5) 14%, transparent); color: var(--pp-primary, #4f46e5); }
    .pp-menu-group > summary { min-height: 50px; border-radius: 14px; font-size: 1.02rem; font-weight: 600; }
    .pp-sidebar-foot { padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }

    /* ═══ BOTTOM TAB BAR (rendered by app-mobile.js from the top menu items) ═══ */
    .ppm-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
        display: flex; align-items: stretch;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: color-mix(in srgb, var(--pp-topbar-bg, #fff) 88%, transparent);
        -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
        border-top: .5px solid var(--pp-topbar-border, rgba(0,0,0,.08));
    }
    .ppm-tab {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        text-decoration: none; color: var(--pp-muted, #64748b); font-size: .66rem; font-weight: 600;
        -webkit-tap-highlight-color: transparent;
    }
    .ppm-tab i { font-size: 1.28rem; line-height: 1; }
    button.ppm-tab { background: none; border: 0; font: inherit; cursor: pointer; }
    .ppm-tab:focus { outline: none; }
    .ppm-tab:focus-visible { outline: 2px solid var(--pp-primary, #4f46e5); outline-offset: -3px; border-radius: 8px; }
    .ppm-tab.is-active { color: var(--pp-primary, #4f46e5); }
    .ppm-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Icon-only tab bar (labels hidden via the Mobile settings page). */
    .ppm-tabbar.no-labels .ppm-tab span { display: none; }
    .ppm-tabbar.no-labels .ppm-tab i { font-size: 1.5rem; }
    /* Active-icon effect (chosen on the Mobile page) — a one-shot flourish on load. */
    .ppm-tabbar.fx-pop    .ppm-tab.is-active i { animation: ppmFxPop .5s ease; }
    .ppm-tabbar.fx-bounce .ppm-tab.is-active i { animation: ppmFxBounce .6s ease; }
    .ppm-tabbar.fx-pulse  .ppm-tab.is-active i { animation: ppmFxPulse .7s ease; }
    .ppm-tabbar.fx-glow   .ppm-tab.is-active i { animation: ppmFxGlow 1s ease; }
    .ppm-tabbar.fx-wiggle .ppm-tab.is-active i { animation: ppmFxWiggle .5s ease; }
    @keyframes ppmFxPop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.3); } }
    @keyframes ppmFxBounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 70% { transform: translateY(-2px); } }
    @keyframes ppmFxPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: .7; } }
    @keyframes ppmFxGlow { 0%,100% { filter: none; } 50% { filter: drop-shadow(0 0 6px currentColor); } }
    @keyframes ppmFxWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-13deg); } 75% { transform: rotate(13deg); } }
    /* When the tab bar exists, reserve room so content/FAB/sheets clear it. */
    body.ppm-has-tabbar { --ppm-tabbar: calc(56px + env(safe-area-inset-bottom, 0px)); }

    /* ═══ BACK / FORWARD EDGE TABS — hug the left/right screen edges, mirroring
          the swipe zones. Subtle by default, solidify on press. ═══ */
    .ppm-navedge {
        position: fixed; top: 50%; transform: translateY(-50%); z-index: 40;
        width: var(--ppm-edge-w, 26px); height: var(--ppm-edge-h, 52px); padding: 0; border: 0; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--ppm-edge-color, var(--pp-primary-text, #fff)); font-size: 1.05rem;
        background: var(--ppm-edge-bg, color-mix(in srgb, var(--pp-primary, #4f46e5) 78%, transparent));
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        box-shadow: 0 4px 14px rgba(2, 6, 23, .28);
        opacity: var(--ppm-edge-op, .5); transition: opacity .15s ease, transform .1s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .ppm-navedge-left  { left: 0;  border-radius: 0 13px 13px 0; }
    .ppm-navedge-right { right: 0; border-radius: 13px 0 0 13px; }
    .ppm-navedge:active { opacity: 1; transform: translateY(-50%) scale(.9); }
    @media (hover: hover) { .ppm-navedge:hover { opacity: 1; } }

    /* ═══ EDGE-SWIPE indicator (Back/Forward) ═══ */
    .ppm-edge-ind {
        position: fixed; top: 50%; z-index: 3000;
        width: 46px; height: 46px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); font-size: 1.35rem;
        box-shadow: 0 8px 26px rgba(2, 6, 23, .38);
        opacity: 0; pointer-events: none; transform: translateY(-50%);
        transition: opacity .12s ease, background-color .12s ease;
    }
    .ppm-edge-ind.show { opacity: 1; }
    .ppm-edge-ind.ready { background: var(--pp-success, #16a34a); }

    /* ═══ Press feedback + page fade-in (opacity only — safe for the fixed FAB) ═══ */
    .ppd-grid-toolbar-btn:active, .pp-btn-form:active, .pp-card:active,
    .ppm-tab:active, .pp-menu-link:active, .pp-pg:active { transform: scale(.97); }
    @keyframes ppmPageIn { from { opacity: 0; } to { opacity: 1; } }
    .pp-content { animation: ppmPageIn .2s ease both; }

    /* ═══ SWIPE-TO-REVEAL actions on list cards (built by app-mobile.js) ═══ */
    .pp-card.ppm-swipeable { position: relative; overflow: hidden; padding: 0 !important; }
    .pp-card.ppm-swipeable .pp-card-foot { display: none; }   /* actions live behind the swipe now */
    .ppm-swipe-surface {
        position: relative; z-index: 1; background: var(--pp-surface, #fff);
        padding: .9rem 1rem; border-radius: inherit;
        transition: transform .22s cubic-bezier(.32, .72, .33, 1); will-change: transform;
    }
    .ppm-swipe-actions { position: absolute; inset: 0 0 0 auto; z-index: 0; display: flex; }
    .ppm-swipe-act {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-width: 66px; padding: 0 .6rem; border: 0; text-decoration: none;
        font-size: .7rem; font-weight: 700; cursor: pointer;
        color: var(--pp-primary-text, #fff); background: var(--pp-primary, #4f46e5);
    }
    .ppm-swipe-act i { font-size: 1.2rem; }
    .ppm-swipe-act.danger { background: var(--pp-danger, #dc2626); }

    /* ═══ SKELETON loader shown during navigation (built by app-mobile.js) ═══ */
    .ppm-skeleton {
        position: fixed; inset: 0; z-index: 4000; overflow: hidden;
        background: var(--pp-bg, #f2f3f7);
        padding: calc(var(--pp-shell-topbar-h, 56px) + env(safe-area-inset-top, 0px) + 1.4rem) 1rem 1rem;
    }
    .ppm-sk-card { background: var(--pp-surface, #fff); border-radius: 16px; padding: 1.1rem; margin-bottom: .8rem; box-shadow: 0 1px 2px rgba(2,6,23,.05); }
    .ppm-sk-line {
        height: 12px; border-radius: 6px; margin: .55rem 0;
        background: linear-gradient(90deg, var(--pp-surface-sunken, #e9edf3) 25%, var(--pp-surface-soft, #f4f6fa) 37%, var(--pp-surface-sunken, #e9edf3) 63%);
        background-size: 400% 100%; animation: ppmShimmer 1.25s ease infinite;
    }
    .ppm-sk-line.w35 { width: 35%; } .ppm-sk-line.w55 { width: 55%; } .ppm-sk-line.w85 { width: 85%; }
    @keyframes ppmShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

    /* ═══ Touch niceties ═══ */
    a, button, summary, .ppd-grid-toolbar-btn, .pp-btn-form, .pp-menu-link, .pp-card, .pp-pg, .ppm-tab {
        -webkit-tap-highlight-color: transparent;
    }
    .pp-sidebar, .ppd-grid-table-wrap, .pp-kanban, .ppd-cards { -webkit-overflow-scrolling: touch; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE A — component mobilisation. New selectors only (no existing desktop rule
   is touched); every visual rule stays inside the phone media query below.
   ══════════════════════════════════════════════════════════════════════════ */

/* Toasts are new .ppm-* nodes created only by window.ppmToast(); styling them
   outside a media query is desktop-safe (no existing element uses these classes)
   and lets toasts render at any width. Inverted snackbar = safe contrast both themes. */
.ppm-toasts {
    position: fixed; left: 0; right: 0; z-index: 5000;
    bottom: calc(var(--ppm-tabbar, 0px) + env(safe-area-inset-bottom, 0px) + 12px);
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 0 12px; pointer-events: none;
}
.ppm-toast {
    pointer-events: auto; width: 100%; max-width: 480px;
    display: flex; align-items: center; gap: .8rem;
    background: var(--pp-text, #1e293b); color: var(--pp-bg, #fff);
    border-radius: 14px; padding: .8rem 1rem; font-size: .92rem; font-weight: 500;
    box-shadow: 0 10px 34px rgba(2, 6, 23, .34);
    opacity: 0; transform: translateY(22px); will-change: transform, opacity;
    transition: opacity .26s ease, transform .26s cubic-bezier(.32, .72, 0, 1);
    border-left: 4px solid transparent;
}
.ppm-toast.show { opacity: 1; transform: translateY(0); }
.ppm-toast.is-success { border-left-color: var(--pp-success, #16a34a); }
.ppm-toast.is-error { border-left-color: var(--pp-danger, #dc2626); }
.ppm-toast.is-info { border-left-color: var(--pp-primary, #4f46e5); }
.ppm-toast-msg { flex: 1 1 auto; }
.ppm-toast-act {
    flex: 0 0 auto; background: none; border: 0; cursor: pointer;
    color: var(--pp-primary, #818cf8); font-weight: 800; font-size: .9rem;
    text-transform: uppercase; letter-spacing: .03em; padding: .2rem .3rem;
}
@media (prefers-reduced-motion: reduce) { .ppm-toast { transition: opacity .2s ease; transform: none; } }

/* Injected phone-only chrome hides by default (new selectors → desktop-safe), so a
   phone→desktop resize never leaves an artifact; each phone media block re-shows it. */
.ppm-kpi-dots, .ppm-ptr, .ppm-edge-ind, .ppm-inf-sentinel,
.ppm-install, .ppm-offline-bar, .ppm-push-chip, .ppm-act-label { display: none; }

@media (max-width: 767.98px) {

    /* ── Baseline: let native controls follow the theme; kill long-press callouts
          on chrome; guarantee comfortable hit targets. ── */
    :root { color-scheme: light dark; }
    a, button, summary, .ppd-grid-toolbar-btn, .pp-menu-link, .ppm-tab, [role=button] {
        -webkit-touch-callout: none;
    }
    .ppd-grid-toolbar-btn, .pp-pg, .pp-tab, .pp-act-more, .pp-icon-btn, .pp-chip {
        min-height: 40px;
    }
    input, select, textarea, button { font-size: max(16px, 1em); }  /* never zoom on focus */
    input[type=checkbox], input[type=radio] { min-width: 20px; min-height: 20px; accent-color: var(--pp-primary, #4f46e5); }

    /* ═══ CARD-IFIED TABLE — wide grids become stacked label/value cards ═══
       The desktop grid supports resizable columns, so it puts inline
       style="width:NNNpx" on cells and can set a fixed table layout / min-width.
       We must neutralise ALL of that with !important, or each stacked cell keeps
       its old column width and the card shows a big empty strip on the right. */
    .ppm-cardified-wrap { overflow: visible !important; border-radius: 0 !important; -webkit-overflow-scrolling: auto; min-width: 0 !important; }
    .ppm-cardified { border-collapse: separate; border-spacing: 0; table-layout: auto !important; }
    .ppm-cardified,
    .ppm-cardified tbody,
    .ppm-cardified tr,
    .ppm-cardified td {
        display: block !important;
        width: 100% !important; min-width: 0 !important; max-width: 100% !important;
        box-sizing: border-box; height: auto !important;
    }
    .ppm-cardified colgroup, .ppm-cardified col { display: none !important; }
    .ppm-cardified thead { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .ppm-cardified tr {
        background: var(--pp-surface, #fff); border-radius: 16px; margin: 0 0 .7rem;
        box-shadow: 0 1px 2px rgba(2,6,23,.06), 0 10px 24px rgba(2,6,23,.05);
        padding: .15rem .2rem; border: none; overflow: hidden;
    }
    .ppm-cardified td {
        display: flex !important; align-items: center; justify-content: space-between; gap: .35rem 1rem; flex-wrap: wrap;
        padding: .62rem .95rem; border: none; border-bottom: 1px solid var(--pp-border, #eef1f6);
        white-space: normal !important; text-align: right; min-height: 44px;
    }
    .ppm-cardified tr td:last-child { border-bottom: none; }
    .ppm-cardified td::before {
        content: attr(data-label); flex: 0 0 34%; text-align: left; word-break: break-word;
        font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
        color: var(--pp-muted, #64748b);
    }
    /* the value sits to the right and may wrap to its own full-width line */
    .ppm-cardified td > * { max-width: 100%; }
    .ppm-cardified td.ppm-cell-plain { justify-content: flex-end; min-height: 0; padding: .3rem .95rem; border-bottom: none; }
    .ppm-cardified td.ppm-cell-plain:empty { display: none !important; }   /* drop truly empty leading cells */
    .ppm-cardified td.ppm-cell-plain::before { content: ""; display: none; }
    .ppm-cardified td .ppd-row-actions, .ppm-cardified td .pp-act-more { margin-left: auto; }
    /* keep a selected card a light tint + ring, not a heavy fill */
    .ppm-cardified tr.pp-selected, .ppm-cardified tr.is-selected, .ppm-cardified tr.selected,
    .ppm-cardified tr:has(input[type=checkbox]:checked) {
        background: color-mix(in srgb, var(--pp-primary, #4f46e5) 8%, var(--pp-surface, #fff)) !important;
        box-shadow: 0 0 0 1.5px var(--pp-primary, #4f46e5) inset, 0 1px 2px rgba(2,6,23,.06);
    }
    .ppm-cardified input[type=checkbox] { width: 22px; height: 22px; border-radius: 6px; accent-color: var(--pp-primary, #4f46e5); }
    /* a master-detail ("DETAILS") cell with no link (e.g. the inline-add row) is a
       dummy on mobile — hide it so the card doesn't show an empty labelled row */
    .ppm-cardified td.ppm-cell-hide { display: none !important; }

    /* ═══ EMPTY STATE (built by app-mobile.js) ═══ */
    .ppm-empty {
        text-align: center; padding: 2.6rem 1.4rem; color: var(--pp-muted, #64748b);
        background: var(--pp-surface, #fff); border-radius: 18px; margin: .4rem 0;
        box-shadow: 0 1px 2px rgba(2,6,23,.05);
    }
    .ppm-empty i { font-size: 2.6rem; color: var(--pp-border-strong, #cbd5e1); display: block; margin-bottom: .5rem; }
    .ppm-empty h3 { font-size: 1.1rem; font-weight: 800; color: var(--pp-text, #0f172a); margin: 0 0 .25rem; }
    .ppm-empty p { margin: 0 0 1rem; font-size: .92rem; }
    .ppm-empty-cta {
        display: inline-flex; align-items: center; gap: .4rem; min-height: 46px; padding: 0 1.2rem;
        border: none; border-radius: 13px; font-weight: 700; font-size: .95rem; cursor: pointer;
        background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff);
    }

    /* ═══ STICKY SECTION HEADERS (grouped lists + table heads) ═══ */
    .pp-group-toggle, .pp-group-label {
        position: sticky; top: calc(var(--pp-shell-topbar-h, 56px) + env(safe-area-inset-top, 0px));
        z-index: 5; background: var(--pp-bg, #f2f3f7);
        font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
        color: var(--pp-muted, #64748b); padding: .5rem .2rem; min-height: 40px; display: flex; align-items: center; gap: .5rem;
    }
    .pp-group-count { margin-left: auto; font-weight: 700; opacity: .7; }
    .ppd-grid-table:not(.ppm-cardified) thead th { position: sticky; top: 0; z-index: 2; }

    /* ═══ SHEET CONSISTENCY — every remaining popover becomes a bottom sheet ═══
       The row-actions pill (.pp-act-pop) is a horizontal flex on desktop and is
       transformed with translateY(-50%). On phones we MUST flip it to a vertical
       list AND cancel that transform, or the full-width action buttons overflow
       sideways off-screen (the menu looks empty). */
    .pp-more-menu, .pp-views-menu, .pp-act-pop {
        position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important;
        bottom: calc(8px + var(--ppm-tabbar, 0px) + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important; min-width: 0 !important; max-width: none !important;
        max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important;
        transform: none !important;                 /* cancel the desktop pill's translateY(-50%) */
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--pp-surface, #fff) !important;
        border-radius: 18px !important; box-shadow: 0 -12px 44px var(--pp-scrim, rgba(2,6,23,.32)) !important;
        z-index: 1200 !important;
    }
    /* stay anchored + un-transformed in the shown/focus states too */
    td.ppd-grid-actions.pp-act-open .pp-act-pop,
    td.ppd-grid-actions:focus-within .pp-act-pop { transform: none !important; }
    .pp-more-menu::before, .pp-views-menu::before, .pp-act-pop::before {
        content: ""; display: block; flex: 0 0 auto; width: 40px; height: 4px; border-radius: 999px;
        background: var(--pp-border-strong, #cbd5e1); margin: 2px auto 10px;
    }
    /* Each item is a full-width native ROW. !important is required to beat the
       desktop icon-button rule [data-pp-tip]{width:32px;padding:0}. */
    .pp-more-menu > *, .pp-views-menu .pp-views-item, .pp-act-pop > * {
        display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: .75rem !important;
        width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 50px !important;
        padding: .6rem .8rem !important; margin: 0 !important; border-radius: 10px !important;
        font-size: 1rem !important; font-weight: 500 !important; text-align: left !important;
        color: var(--pp-text, #0f172a) !important; background: transparent !important; border: none !important;
    }
    .pp-act-pop > *:active, .pp-more-menu > *:active { background: var(--pp-surface-sunken, #eef1f6) !important; }
    .pp-act-pop > * i, .pp-more-menu > * i, .pp-views-menu .pp-views-item i {
        font-size: 1.25rem !important; flex: 0 0 auto !important; width: 1.4rem; text-align: center; color: var(--pp-primary, #4f46e5);
    }
    .ppm-act-label { display: block !important; flex: 1 1 auto; }
    /* delete / destructive actions read red */
    .pp-act-pop .pp-act-danger, .pp-act-pop .ppd-action-delete,
    .pp-act-pop .pp-act-danger i, .pp-act-pop .ppd-action-delete i { color: var(--pp-danger, #dc2626) !important; }
    /* the label already shows inline in the sheet — suppress the hover/focus tooltip
       bubble (its ::after/::before) so it doesn't float over the sheet */
    .pp-act-pop [data-pp-tip]::after, .pp-act-pop [data-pp-tip]::before,
    .pp-more-menu [data-pp-tip]::after, .pp-more-menu [data-pp-tip]::before { content: none !important; display: none !important; }

    /* ═══ SweetAlert2 → native bottom sheet, themed by tokens, thumb-sized ═══ */
    .swal2-container.swal2-backdrop-show { background: var(--pp-scrim, rgba(2,6,23,.45)) !important; }
    .swal2-container { padding: 0 !important; align-items: flex-end !important; }
    .swal2-popup {
        width: 100% !important; max-width: 100% !important; margin: 0 !important;
        border-radius: 20px 20px 0 0 !important; padding: 1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--pp-surface, #fff) !important; color: var(--pp-text, #0f172a) !important;
        animation: ppmSheetUp .28s cubic-bezier(.32,.72,0,1) both;
    }
    .swal2-title { color: var(--pp-text, #0f172a) !important; font-size: 1.25rem !important; }
    .swal2-html-container { color: var(--pp-muted, #475569) !important; }
    .swal2-actions { width: 100%; flex-direction: column-reverse !important; gap: .5rem; margin-top: 1.1rem !important; }
    .swal2-actions .swal2-styled { width: 100% !important; margin: 0 !important; min-height: 50px; border-radius: 14px !important; font-weight: 700 !important; font-size: 1rem !important; }
    @keyframes ppmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

    /* ═══ STANDALONE FORM WIDGETS — sit as native rows, sized for the thumb ═══ */
    /* File / image uploader: full-width dropzone reads as a tappable tile. */
    .pp-fld .pp-uploader, .pp-fld .pp-drop { width: 100%; }
    .pp-drop { min-height: 92px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center; }
    .pp-fileview, .pp-up-file { border-radius: 12px; }
    .pp-fileview .pp-up-thumb, .pp-up-file img { border-radius: 10px; }
    .pp-up-remove, .pp-fileview button { min-width: 40px; min-height: 40px; }
    /* Tag input: roomy pills + big field. */
    .pp-fld .pp-tags { gap: .35rem; padding: .2rem 0; }
    .pp-tags .pp-tag { min-height: 34px; border-radius: 999px; padding: .2rem .7rem; font-size: .9rem; }
    .pp-tags input { font-size: 16px !important; min-height: 34px; }
    /* Switch / toggle: bigger, right-aligned in its row. */
    .pp-fld .pp-switch { transform: scale(1.15); transform-origin: left center; }
    /* Colour picker: larger swatch. */
    .pp-fld .pp-color, .pp-fld input[type=color] { min-height: 40px; min-width: 52px; border-radius: 10px; }
    /* Range slider: taller track/thumb. */
    .pp-fld input[type=range] { height: 32px; }
    /* Star rating input: bigger stars. */
    .pp-fld .pp-stars i, .pp-fld .pp-rating i { font-size: 1.7rem; }
    /* Rich-text / markdown: scrollable toolbar, comfy editor. */
    .pp-rte-toolbar, .pp-md-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .pp-rte-toolbar button, .pp-md-tab { min-width: 40px; min-height: 40px; flex: 0 0 auto; }
    .pp-rte-editor, .pp-md-input, .pp-fld .pp-rte { min-height: 8em; font-size: 16px; }

    /* ═══ DATE / TIME picker popups — touch-sized cells, safe placement ═══ */
    .pp-picker {
        position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important;
        bottom: calc(8px + var(--ppm-tabbar, 0px) + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important; max-width: none !important; border-radius: 18px !important;
        box-shadow: 0 -12px 44px var(--pp-scrim, rgba(2,6,23,.3)) !important; z-index: 1200 !important;
    }
    .pp-picker .pp-pick-day, .pp-picker td, .pp-picker .flatpickr-day { min-height: 40px; min-width: 40px; }

    /* ═══ MODAL-FORM mode → full-screen sheet ═══ */
    body.pp-modal-mode [data-pp-form-modal], .pp-form-modal, .pp-modal.pp-form-modal .pp-modal-dialog {
        position: fixed !important; inset: 0 !important; max-width: 100% !important; width: 100% !important;
        margin: 0 !important; border-radius: 0 !important; display: flex; flex-direction: column;
    }
    .pp-form-modal .pp-modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* ═══ MASTER-DETAIL child grids → stacked cards (reuse cardify look) ═══ */
    .pp-md-table.ppm-cardified td, .pp-detail-grid .ppm-cardified td { white-space: normal !important; }
    .pp-master-card { border: none; border-radius: 16px; box-shadow: 0 1px 2px rgba(2,6,23,.06), 0 10px 24px rgba(2,6,23,.05); }

    /* ═══ KANBAN → single-column, scroll-snap between columns ═══ */
    .pp-kanban { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
    .pp-kanban-col { flex: 0 0 86%; scroll-snap-align: center; border-radius: 16px; }
    .pp-kanban-card { border-radius: 12px; }

    /* ═══ DASHBOARD widgets → single column, comfy density ═══ */
    .ppd-lay, .ppd-lay-kpi, .ppd-widgets, .ppd-grid { grid-template-columns: 1fr !important; display: grid !important; gap: .8rem !important; }
    .ppd-widget, .ppd-stat, .ppd-minitable-wrap { border-radius: 16px; }
    .ppd-minitable { width: 100%; }
    .ppd-minitable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ═══ SECONDARY tab strips (import / admin / translations) → scroll, segmented ═══ */
    .pp-imp-tabs, .ppa-tabs, .ppt-tabs {
        overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: .3rem;
        scrollbar-width: none;
    }
    .pp-imp-tabs::-webkit-scrollbar, .ppa-tabs::-webkit-scrollbar, .ppt-tabs::-webkit-scrollbar { display: none; }
    .pp-imp-tab, .ppa-tab, .ppt-tab { flex: 0 0 auto; min-height: 42px; }
    /* Admin matrix: never let it stretch the page — scroll inside its own region. */
    .ppa-mx, .ppa-mx-wrap, .ppa-matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ═══ CALENDAR (app + mini) — fit the width, allow horizontal scroll if needed ═══ */
    .pp-calendar, .pp-calendar-app, .pp-calapp { max-width: 100%; }
    .pp-calendar table, .pp-calapp-grid { width: 100%; table-layout: fixed; }
    .pp-calendar td, .pp-calapp-cell { min-height: 44px; padding: .2rem !important; font-size: .82rem; overflow: hidden; }
    .pp-calapp-foot, .pp-calapp-sub { flex-wrap: wrap; gap: .4rem; }
    .ppd-mcal { width: 100%; }
    .ppd-mcal td, .ppd-mcal .ppd-mcal-day { min-height: 34px; }

    /* ═══ AUTH pages (login / register / reset / 2FA / profile) — these use their
          OWN .ppd-auth-* layout (not .pp-shell), so give them a native pass here.
          The marketing showcase panel is hidden; the form fills the screen. ═══ */
    .ppd-auth-page {
        min-height: 100svh; padding: env(safe-area-inset-top, 0px) 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        display: flex; align-items: center; justify-content: center;
    }
    .ppd-auth-showcase, .ppd-auth-aside, .ppd-auth-art { display: none !important; }
    .ppd-auth-card {
        width: 100%; max-width: 440px; margin: 0; border-radius: 20px;
        box-shadow: 0 1px 2px rgba(2,6,23,.06), 0 18px 44px rgba(2,6,23,.12);
    }
    .ppd-auth-field input, .ppd-auth-card input, .ppd-auth-card select { font-size: 16px !important; min-height: 48px; }
    .ppd-auth-card .btn, .ppd-auth-card button[type=submit], .ppd-auth-submit { min-height: 50px; border-radius: 13px; font-weight: 700; width: 100%; }
    .ppd-auth-card .ppd-auth-alert { border-radius: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE B — signature interactions (all new .ppm-* selectors, phone-gated)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* ── Pull-to-refresh ring ── */
    .ppm-ptr {
        position: fixed; left: 50%; z-index: 3500;
        top: calc(var(--pp-shell-topbar-h, 56px) + env(safe-area-inset-top, 0px) - 8px);
        width: 40px; height: 40px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: var(--pp-surface, #fff); color: var(--pp-primary, #4f46e5); font-size: 1.2rem;
        box-shadow: 0 6px 18px rgba(2, 6, 23, .24);
        opacity: 0; pointer-events: none; transform: translateX(-50%);
        transition: opacity .15s ease;
    }
    .ppm-ptr.show { opacity: 1; }
    .ppm-ptr.ready { color: var(--pp-success, #16a34a); }
    .ppm-ptr.spinning i { animation: ppmSpin .7s linear infinite; }

    /* ── Spinner (shared) ── */
    .ppm-spin {
        width: 26px; height: 26px; border-radius: 50%; display: inline-block;
        border: 3px solid var(--pp-border, #e2e8f0); border-top-color: var(--pp-primary, #4f46e5);
        animation: ppmSpin .7s linear infinite;
    }
    @keyframes ppmSpin { to { transform: rotate(360deg); } }

    /* ── Sheet engine (bottom sheet / full-screen card, drag-to-dismiss) ── */
    body.ppm-sheet-open { overflow: hidden; }
    .ppm-sheet-back {
        position: fixed; inset: 0; z-index: 3200; display: flex; align-items: flex-end;
        background: var(--pp-scrim, rgba(2, 6, 23, .45)); opacity: 0; transition: opacity .28s ease;
    }
    .ppm-sheet-back.show { opacity: 1; }
    .ppm-sheet {
        width: 100%; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
        background: var(--pp-bg, #f2f3f7); border-radius: 20px 20px 0 0;
        transform: translateY(100%); transition: transform .3s cubic-bezier(.32, .72, 0, 1); will-change: transform;
        box-shadow: 0 -16px 50px var(--pp-scrim, rgba(2, 6, 23, .3));
    }
    .ppm-sheet-back.show .ppm-sheet { transform: translateY(0); }
    .ppm-sheet-full { height: 96vh; max-height: 96vh; }
    .ppm-sheet-grab { flex: 0 0 auto; width: 40px; height: 4px; border-radius: 999px; background: var(--pp-border-strong, #cbd5e1); margin: 8px auto 4px; }
    .ppm-sheet-head { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: .2rem 1rem .6rem; }
    .ppm-sheet-title { flex: 1 1 auto; font-weight: 800; font-size: 1.05rem; color: var(--pp-text, #0f172a); }
    .ppm-sheet-x { width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; background: var(--pp-surface-sunken, #eceef3); color: var(--pp-text, #0f172a); }
    .ppm-sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .ppm-sheet-body .pp-content { animation: none; padding-top: 0; }
    .ppm-sheet-load { display: flex; align-items: center; justify-content: center; padding: 3rem; color: var(--pp-muted, #64748b); }

    /* ── KPI carousel (dashboard stat tiles) ── */
    .ppd-stat-cards.ppm-kpi-carousel {
        display: flex !important; grid-template-columns: none !important; gap: .7rem;
        overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .ppd-stat-cards.ppm-kpi-carousel::-webkit-scrollbar { display: none; }
    .ppd-stat-cards.ppm-kpi-carousel > * { flex: 0 0 82%; scroll-snap-align: center; }
    .ppm-kpi-dots { display: flex; justify-content: center; gap: 6px; margin: .6rem 0 .2rem; }
    .ppm-kpi-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--pp-border-strong, #cbd5e1); transition: width .2s ease, background-color .2s ease; }
    .ppm-kpi-dots span.on { background: var(--pp-primary, #4f46e5); width: 20px; border-radius: 4px; }

    /* ── Infinite-scroll sentinel ── */
    .ppm-inf-sentinel { display: flex; align-items: center; justify-content: center; padding: 1.2rem; min-height: 8px; }
    .ppm-inf-sentinel .ppm-spin { opacity: 0; transition: opacity .15s ease; }
    .ppm-inf-sentinel.load .ppm-spin { opacity: 1; }

    /* ── Flavour: numeric stepper (± buttons) ── */
    .ppm-stepper { display: flex; align-items: center; gap: .5rem; width: 100%; }
    .ppm-stepper input { flex: 1 1 auto; text-align: center; }
    .ppm-step-btn {
        flex: 0 0 auto; width: 42px; height: 42px; line-height: 1; cursor: pointer;
        border: 1px solid var(--pp-border, #e2e8f0); border-radius: 11px;
        background: var(--pp-surface, #fff); color: var(--pp-text, #0f172a); font-size: 1.4rem;
        -webkit-tap-highlight-color: transparent;
    }
    .ppm-step-btn:active { transform: scale(.94); }

    /* ── Flavour: action-sheet <select> options ── */
    .ppm-opts { display: flex; flex-direction: column; padding: 0 .5rem .5rem; }
    .ppm-opt {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
        text-align: left; min-height: 52px; padding: .7rem 1rem; cursor: pointer;
        border: 0; border-bottom: 1px solid var(--pp-border, #eef1f6); background: none;
        color: var(--pp-text, #0f172a); font-size: 1rem;
    }
    .ppm-opt:last-child { border-bottom: 0; }
    .ppm-opt.on { color: var(--pp-primary, #4f46e5); font-weight: 700; }
    .ppm-opt i { color: var(--pp-primary, #4f46e5); }
}

/* ══════════ Installed-PWA (standalone) polish — any width ══════════ */
@media (display-mode: standalone) {
    /* When launched from the home screen there's no browser URL bar; give the
       fixed top bar the notch inset so its content clears the status bar. */
    .pp-topbar { padding-top: env(safe-area-inset-top, 0px) !important; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .pp-content { animation: none; }
    .ppm-tabbar .ppm-tab.is-active i { animation: none !important; }
    .ppm-navbtn:active, .ppd-grid-toolbar-btn:active, .pp-btn-form:active,
    .pp-card:active, .ppm-tab:active, .pp-menu-link:active, .pp-pg:active { transform: none; }
    .ppm-sheet, .ppm-sheet-back { transition: opacity .15s ease; }
    .ppm-sheet { transform: none; }
    .ppm-toast { transition: opacity .15s ease; }
    .swal2-popup { animation: none; }
    .pp-toolbar .pp-tb-left [data-pp-btn=add] { animation: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE C — platform depth (install prompt, offline, push) — phone-gated
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* ── Add-to-Home-Screen banner ── */
    .ppm-install {
        position: fixed; left: 10px; right: 10px; z-index: 3600;
        bottom: calc(var(--ppm-tabbar, 0px) + env(safe-area-inset-bottom, 0px) + 12px);
        display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem;
        background: var(--pp-surface, #fff); color: var(--pp-text, #0f172a);
        border-radius: 16px; box-shadow: 0 12px 40px rgba(2, 6, 23, .28);
        transform: translateY(140%); opacity: 0; transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
    }
    .ppm-install.show { transform: translateY(0); opacity: 1; }
    .ppm-install > i { font-size: 1.5rem; color: var(--pp-primary, #4f46e5); }
    .ppm-install-tx { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; }
    .ppm-install-tx b { font-size: .95rem; }
    .ppm-install-tx span { font-size: .8rem; color: var(--pp-muted, #64748b); }
    .ppm-install-add { flex: 0 0 auto; border: 0; border-radius: 11px; padding: .55rem .95rem; font-weight: 700; cursor: pointer; background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); }
    .ppm-install-x { flex: 0 0 auto; border: 0; background: none; color: var(--pp-muted, #64748b); width: 34px; height: 34px; cursor: pointer; }

    /* ── Offline status bar ── */
    .ppm-offline-bar {
        position: fixed; left: 0; right: 0; z-index: 3400;
        top: calc(var(--pp-shell-topbar-h, 56px) + env(safe-area-inset-top, 0px));
        padding: .5rem 1rem; text-align: center; font-size: .82rem; font-weight: 600;
        background: var(--pp-warning, #b45309); color: #fff;
        transform: translateY(-110%); transition: transform .25s ease;
    }
    .ppm-offline-bar.show { transform: translateY(0); }

    /* ── Enable-notifications chip ── */
    .ppm-push-chip {
        position: fixed; left: 50%; z-index: 3400;
        bottom: calc(var(--ppm-tabbar, 0px) + env(safe-area-inset-bottom, 0px) + 14px);
        display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem;
        border: 0; border-radius: 999px; font-weight: 700; font-size: .9rem; cursor: pointer;
        background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff);
        box-shadow: 0 10px 26px color-mix(in srgb, var(--pp-primary, #4f46e5) 46%, transparent);
        transform: translateX(-50%) translateY(140%); opacity: 0; transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
    }
    .ppm-push-chip.show { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ══════════ Small phone (≤ 575.98px) ══════════ */
@media (max-width: 575.98px) {
    .pp-content { padding-left: .8rem; padding-right: .8rem; }
    .pp-page-head h1 { font-size: 1.55rem; }
    .ppd-stat-cards { gap: .55rem; }
    /* Keep the full-bleed sticky bar's negative margin matched to the gutter. */
    .pp-form-actions.pp-sticky { margin-left: -.8rem; margin-right: -.8rem; padding-left: .8rem; padding-right: .8rem; }
}
