/* ═══════════════════════════════════════════════════════════════════════
   project-shell-mobile.css — the phone/tablet layer for the console SPA shell.

   Loaded LAST in core/views/project-head.php. EVERY rule is inside a max-width
   media query, so desktop (≥992px) renders byte-for-byte as before. Requires
   viewport-fit=cover in the page meta for the env(safe-area-inset-*) values.

   The real mobile navigation is project-mobile-nav.php (a bottom TAB BAR + a left
   DRAWER, rendered at BODY level so it escapes the fixed navbar's stacking
   context — the trap that made the old bottom-sheet dropdown un-tappable).
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ 1 · Tablet + phone foundation (≤ 991.98px) ══════════════════════ */
@media (max-width: 991.98px) {
    :root {
        --pp-safe-top: env(safe-area-inset-top, 0px);
        --pp-safe-bottom: env(safe-area-inset-bottom, 0px);
        --pp-safe-left: env(safe-area-inset-left, 0px);
        --pp-safe-right: env(safe-area-inset-right, 0px);
    }

    /* Fixed top bar under the notch / Dynamic Island. */
    .navbar-top {
        height: calc(var(--topbar-height) + var(--pp-safe-top));
        padding-top: var(--pp-safe-top);
        padding-left: calc(0.5rem + var(--pp-safe-left));
        padding-right: calc(0.5rem + var(--pp-safe-right));
    }

    /* Content area: dvh beats the iOS URL-bar 100vh bug; never scroll the page
       sideways; stack the left panel above the workspace instead of squashing. */
    .main-area {
        margin-top: calc(var(--topbar-height) + var(--pp-safe-top));
        height: calc(100vh - var(--topbar-height) - var(--pp-safe-top));
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    @supports (height: 100dvh) {
        .main-area { height: calc(100dvh - var(--topbar-height) - var(--pp-safe-top)); }
    }
    /* FALLBACK only — until the JS turns the left panel into an edge drawer (adds
       .ppm-drawerized to .main-area), stack it above the workspace so nothing is
       squashed even if the script hasn't run yet. */
    .main-area:not(.ppm-drawerized) { flex-direction: column; }
    .main-area:not(.ppm-drawerized) > .left-panel {
        width: 100%;
        flex: 0 0 auto;
        max-height: 40dvh;
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    }
    .main-area:not(.ppm-drawerized) > .left-panel .table-list { max-height: none; }
    .main-area > * { min-width: 0; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ══ 2 · Phone tuning (≤ 767.98px) ═══════════════════════════════════ */
@media (max-width: 767.98px) {
    :root { --ppm-tabbar: calc(54px + env(safe-area-inset-bottom, 0px)); }
    * { -webkit-tap-highlight-color: transparent; }

    /* iOS input-zoom fix: Safari zooms the page when a focused control is <16px.
       Broad (not every module uses .main-area); modules that force smaller with
       !important are re-covered in section 4. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
    select, textarea { font-size: 16px !important; }

    .navbar-top .btn { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }

    /* Retire the old phone toolbar dropdown (the un-tappable gear bottom-sheet) —
       the native tab bar + drawer replace it. */
    #projectNavbar .dropdown.d-md-none { display: none !important; }

    /* Leave room at the bottom for the tab bar so content isn't hidden behind it. */
    .main-area { height: calc(100dvh - var(--topbar-height) - var(--pp-safe-top) - var(--ppm-tabbar)); }
    .main-area img, .main-area video, .main-area canvas { max-width: 100%; }
    .main-area pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .swal2-popup { width: min(92vw, 26em) !important; }
    .swal2-container { padding-bottom: calc(0.625em + var(--ppm-tabbar)) !important; }
}

/* ══ 3 · Native mobile navigation — tab bar + drawer ════════════════ */

/* --- Left drawer: available on tablet + phone (opened by the ☰ button) --- */
@media (max-width: 991.98px) {
    html.ppm-lock, html.ppm-lock body { overflow: hidden !important; }

    /* Compact PPPHP lockup fits the bar; keep it from crowding the center pill. */
    #projectNavbar .navbar-brand { min-width: 0; }
    #projectNavbar .navbar-brand .logo-svg { height: 24px; width: auto; }

    /* Centered "current screen" pill — tells you where you are + opens the drawer. */
    .pp-cur-page {
        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
        display: inline-flex; align-items: center; gap: 6px;
        max-width: 46vw; height: 34px; padding: 0 10px;
        border: 1px solid var(--pp-border, rgba(148,163,184,.28));
        border-radius: 999px; background: rgba(255,255,255,.06); color: #fff;
        font-size: .82rem; font-weight: 600; line-height: 1; z-index: 5;
    }
    .pp-cur-page .pp-cur-page-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pp-cur-page .bi:first-child { font-size: .95rem; opacity: .9; flex: 0 0 auto; }
    .pp-cur-page .pp-cur-page-c { font-size: .7rem; opacity: .6; flex: 0 0 auto; }
    .pp-cur-page:active { background: rgba(255,255,255,.12); }

    .ppm-drawer {
        position: fixed; inset: 0; z-index: 20000; visibility: hidden;
    }
    .ppm-drawer.is-open { visibility: visible; }
    .ppm-scrim {
        position: absolute; inset: 0; background: rgba(2, 6, 23, 0.55);
        opacity: 0; transition: opacity 0.25s ease;
    }
    .ppm-drawer.is-open .ppm-scrim { opacity: 1; }
    .ppm-panel {
        position: absolute; top: 0; bottom: 0; left: 0;
        width: min(87vw, 360px);
        display: flex; flex-direction: column;
        background: var(--pp-surface, #141824);
        color: var(--pp-text, #e5e7eb);
        border-right: 1px solid var(--pp-border, #242a3a);
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
        transform: translateX(-102%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.33, 1);
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        will-change: transform;
    }
    .ppm-drawer.is-open .ppm-panel { transform: none; }

    .ppm-head {
        display: flex; align-items: center; gap: 0.6rem;
        padding: 0.85rem 0.9rem 0.75rem;
        border-bottom: 1px solid var(--pp-border, #242a3a);
        flex: 0 0 auto;
    }
    .ppm-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 0.98rem; min-width: 0; }
    .ppm-brand-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ppm-x {
        margin-left: auto; flex: 0 0 auto; width: 40px; height: 40px;
        border: 1px solid var(--pp-border, #242a3a); border-radius: 11px;
        background: var(--pp-app-bg, #0b1120); color: var(--pp-text, #e5e7eb);
        display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
    }
    .ppm-x:active { background: var(--pp-accent-soft, rgba(99, 102, 241, 0.2)); }

    .ppm-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0.5rem 0.55rem 1rem; }

    .ppm-group { border: 0; }
    .ppm-group + .ppm-group { margin-top: 0.15rem; }
    .ppm-group-h {
        list-style: none; cursor: pointer; display: flex; align-items: center;
        padding: 0.6rem 0.6rem 0.3rem; font-size: 0.66rem; font-weight: 800;
        letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--pp-text-muted, #9aa3b2); user-select: none;
    }
    .ppm-group-h::-webkit-details-marker { display: none; }
    .ppm-group-h .bi { margin-left: auto; transition: transform 0.2s; font-size: 0.85rem; }
    .ppm-group:not([open]) .ppm-group-h .bi { transform: rotate(-90deg); }
    .ppm-group-body { padding-bottom: 0.25rem; }

    .ppm-item {
        display: flex; align-items: center; gap: 0.7rem;
        min-height: 46px; padding: 0.5rem 0.6rem; margin: 0.1rem 0;
        border-radius: 12px; text-decoration: none;
        color: var(--pp-text, #e5e7eb); font-size: 0.98rem; font-weight: 500;
        position: relative;
    }
    .ppm-item:active { background: var(--pp-accent-soft, rgba(99, 102, 241, 0.16)); }
    .ppm-ico {
        flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 9px;
        display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
        background: color-mix(in srgb, var(--pp-accent, #6366f1) 14%, transparent);
        color: var(--pp-accent, #818cf8);
    }
    .ppm-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ppm-item.is-active {
        background: color-mix(in srgb, var(--pp-accent, #6366f1) 16%, transparent);
        color: var(--pp-accent, #818cf8); font-weight: 700;
    }
    .ppm-item.is-active .ppm-ico { background: var(--pp-accent, #6366f1); color: #fff; }
    .ppm-item.is-active::before {
        content: ""; position: absolute; left: -0.55rem; top: 20%; bottom: 20%;
        width: 3px; border-radius: 0 3px 3px 0; background: var(--pp-accent, #6366f1);
    }
    .ppm-check { margin-left: auto; color: var(--pp-accent, #818cf8); }
    .ppm-item.is-locked { opacity: 0.5; }
    .ppm-item.is-locked .ppm-lock { margin-left: auto; font-size: 0.85rem; }

    .ppm-foot {
        flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
        padding: 0.7rem 0.7rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--pp-border, #242a3a);
    }
    .ppm-act {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
        min-height: 44px; border-radius: 11px; font-size: 0.9rem; font-weight: 700;
        text-decoration: none; cursor: pointer;
        border: 1px solid var(--pp-border, #242a3a);
        background: var(--pp-app-bg, #0b1120); color: var(--pp-text, #e5e7eb);
    }
    .ppm-act:active { filter: brightness(1.15); }
    .ppm-act-primary { background: linear-gradient(135deg, var(--pp-accent, #4f46e5), #8b5cf6); border-color: transparent; color: #fff; }
    .ppm-act-build { background: color-mix(in srgb, var(--pp-accent, #6366f1) 18%, transparent); border-color: color-mix(in srgb, var(--pp-accent, #6366f1) 45%, transparent); color: var(--pp-accent, #818cf8); }
}

/* --- Bottom tab bar: phone only --- */
@media (min-width: 992px) { .ppm-tabbar, .ppm-drawer, .ppm-handle, .ppm-edge-scrim { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .ppm-tabbar { display: none !important; } }

@media (max-width: 767.98px) {
    .ppm-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 15000;
        display: flex; align-items: stretch;
        height: var(--ppm-tabbar);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: color-mix(in srgb, var(--pp-surface, #141824) 92%, transparent);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border-top: 1px solid var(--pp-border, #242a3a);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.22);
    }
    .ppm-tab {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; text-decoration: none; border: 0; background: none;
        color: var(--pp-text-muted, #9aa3b2); font-size: 0.62rem; font-weight: 600;
        letter-spacing: 0.01em; cursor: pointer; padding: 0;
    }
    .ppm-tab .bi { font-size: 1.3rem; line-height: 1; }
    .ppm-tab.is-active { color: var(--pp-accent, #818cf8); }
    .ppm-tab.is-active .bi { transform: translateY(-1px); }
    .ppm-tab:active { color: var(--pp-accent, #818cf8); }
    .ppm-tab.is-locked { opacity: 0.4; }
    .ppm-tab-menu { color: var(--pp-text, #e5e7eb); }
}

/* ══ 4 · Per-module fixes (from the module-by-module mobile audit) ═══ */
@media (max-width: 767.98px) {
    /* Output */
    body.output-body .ob-content .form-control,
    body.output-body .ob-content .form-select,
    body.output-body .ob-content textarea.ob-code { font-size: 16px !important; }
    body.output-body .ob-sidebar-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
    body.output-body .ob-sidebar-caption { display: none; }
    body.output-body .ob-sidebar-foot .ob-toolbar-actions { flex: 1 1 auto; width: 100%; }
    .obh-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Finished */
    body.finished-body .finished-toolbar { flex-wrap: wrap; }
    body.finished-body #actionIndicator { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
    .finh-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Deploy */
    body.deploy-body #actionFeedback { left: 1rem; right: 1rem; max-width: calc(100vw - 2rem); }
    body.deploy-body .frow { padding-top: .5rem; padding-bottom: .5rem; }
    body.deploy-body .frow .factions { display: flex; }
    body.deploy-body .frow .factions button { width: 36px; height: 34px; }
    body.deploy-body .frow .fmeta { display: none; }
    body.deploy-body .pane-btn { width: 38px; height: 38px; font-size: 1rem; }
    body.deploy-body .pane-sub { display: none; }
    body.deploy-body .dock-tabs { flex-wrap: wrap; }
    body.deploy-body .dock-tabs .dock-stats { flex-basis: 100%; order: 9; margin-left: 0 !important; padding: 0 .25rem .25rem; }
    body.deploy-body .dock-tab { padding: .55rem .65rem; }
    body.deploy-body .dock-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Transfer bar: the desktop spacer shoves Dry-run/Upload off the edge and the
       narrow Upload button wraps its label under the icon. Let the row breathe. */
    body.deploy-body .ftp-uploadbar { row-gap: .5rem; column-gap: .5rem; }
    body.deploy-body .ftp-uploadbar .ub-spacer { display: none; }
    body.deploy-body .ftp-uploadbar .ub-group.form-switch { margin-right: auto; }
    body.deploy-body #btnDryRun,
    body.deploy-body #btnUpload { flex: 1 1 auto; white-space: nowrap; min-height: 40px; }
    body.deploy-body #btnDryRun i, body.deploy-body #btnUpload i { margin-right: .3rem; }
    /* The FTP client is a fixed-height flex viewport on desktop (connbar + upload +
       panes + dock + statusbar). On mobile that sum overflows and everything is
       overflow:hidden, so the bottom (Remote pane, dock, status) is unreachable.
       Let the whole app flow and scroll the workspace instead. */
    body.deploy-body .right-workspace { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
    body.deploy-body .ftp-app { height: auto !important; min-height: 0 !important; overflow: visible !important; }
    body.deploy-body .ftp-panes { flex-direction: column; flex: 0 0 auto; }
    body.deploy-body .ftp-pane { flex: 0 0 auto; min-width: 0; }
    body.deploy-body .ftp-pane .pane-list { max-height: 46vh; max-height: 46dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* Notifications */
    .nr-card { flex-wrap: wrap; row-gap: 8px; padding: 12px; }
    .nr-card .nr-b { flex: 1 1 calc(100% - 51px); }
    .nr-card .nr-b .t, .nr-card .nr-b .d { white-space: normal; overflow: visible; text-overflow: clip; }
    .nr-card .nr-badge { margin-left: 51px; margin-right: auto; }
    .nr-side { max-height: 38vh; max-height: 38dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .nr-mini { width: 40px; height: 40px; }
    .nr-seg button { height: 40px; }
    .nr-chips button { padding: 6px 10px; font-size: .8rem; }

    /* Plugin Manager */
    .plugin-manager-page .pm-act { width: 40px; height: 40px; font-size: 1rem; }
    .plugin-manager-page .pm-card-actions { gap: .45rem; }
    .plugin-manager-page .pm-search-clear { width: 34px; height: 34px; right: .35rem; }
    .plugin-manager-page .pm-search input { padding-right: 2.6rem; }
    #pluginDetailsModal .pd-asset,
    #pluginDetailsModal .pd-vendor,
    #pluginDetailsModal .pd-desc { overflow-wrap: anywhere; word-break: break-word; }
    #pluginDetailsModal .pd-table code { overflow-wrap: anywhere; }

    /* Project Workspace (landing) */
    .main-area.workspace-main .workspace-scroll { padding-bottom: calc(1.5rem + var(--ppm-tabbar)); }
    .capability-card p { font-size: .78rem; }
    .stat-item small, .path-title small,
    .workspace-hero .progress-ring small, .workspace-hero .database-pill small { font-size: .74rem; }
    .path-steps a { padding: .55rem .7rem; font-size: .8rem; }
    .path-steps b { width: 28px; height: 28px; }

    /* Settings (email/SMS console) */
    .set-card-head.mail-server-head { flex-wrap: wrap; row-gap: .45rem; }
    .ph-chip { font-size: 12px; padding: 7px 11px; margin: 3px 5px 3px 0; }
}

/* ══ 4b · Edge drawers — per-page LEFT (lists) & RIGHT (properties) panels ══
   The JS controller (project-mobile-nav.php) tags a page's list panel .ppm-edge
   .ppm-edge-left and its properties/inspector panel .ppm-edge-right, adds
   .ppm-drawerized to their layout container (turning off the stacking fallback),
   and injects the edge handles + a shared scrim. Panels slide in over a
   full-width canvas — the real native-app feel. Active ≤ 991.98px. */
@media (max-width: 991.98px) {
    .ppm-edge {
        position: fixed !important;
        top: calc(var(--topbar-height) + var(--pp-safe-top, 0px));
        bottom: var(--ppm-tabbar, 0px);
        z-index: 14000 !important;
        width: min(86vw, 340px) !important;
        max-width: 340px;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        /* Some modules hide their in-flow panel on mobile via their own off-canvas
           CSS (e.g. Security: visibility:hidden;opacity:0). Force it back — the
           drawer controls visibility purely through the transform below. */
        visibility: visible !important;
        opacity: 1 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--pp-surface, #141824);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.33, 1);
        will-change: transform;
        flex: 0 0 auto !important;
    }
    /* transform carries !important so module panels styled by an #id selector
       (e.g. Designer's #ppdLeftPanel) can't out-specify the drawer positioning. */
    .ppm-edge-left {
        left: 0; right: auto;
        transform: translateX(-102%) !important;
        border-right: 1px solid var(--pp-border, #242a3a);
        border-radius: 0 16px 16px 0;
        box-shadow: 14px 0 44px rgba(0, 0, 0, 0.5);
    }
    .ppm-edge-right {
        right: 0; left: auto;
        transform: translateX(102%) !important;
        border-left: 1px solid var(--pp-border, #242a3a);
        border-radius: 16px 0 0 16px;
        box-shadow: -14px 0 44px rgba(0, 0, 0, 0.5);
    }
    .ppm-edge.is-open { transform: none !important; }

    /* Shared scrim for the edge drawers. */
    .ppm-edge-scrim {
        position: fixed; inset: 0; z-index: 13500;
        background: rgba(2, 6, 23, 0.5);
        opacity: 0; visibility: hidden; transition: opacity 0.25s ease;
    }
    .ppm-edge-scrim.is-open { opacity: 1; visibility: visible; }

    /* Floating edge handles (pull tabs). */
    .ppm-handle {
        position: fixed; top: 50%; transform: translateY(-50%);
        z-index: 13000; display: flex; flex-direction: column; align-items: center; gap: 3px;
        width: 30px; padding: 12px 0; border: 0; cursor: pointer;
        background: linear-gradient(135deg, var(--pp-accent, #4f46e5), #8b5cf6);
        color: #fff; font-size: 0.9rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        opacity: 0.92;
    }
    .ppm-handle .ppm-handle-t {
        writing-mode: vertical-rl; text-orientation: mixed;
        font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    }
    .ppm-handle-left  { left: 0;  border-radius: 0 11px 11px 0; }
    .ppm-handle-right { right: 0; border-radius: 11px 0 0 11px; background: linear-gradient(135deg, #0ea5e9, var(--pp-accent, #6366f1)); }
    .ppm-handle:active { opacity: 1; }
    .ppm-handle[hidden] { display: none; }

    /* Keep drawer content from bleeding sideways (Events panel forms, wide rows).
       Vertical scroll stays; horizontal is clipped so nothing pushes the page. */
    .ppm-edge { overflow-x: hidden !important; overflow-y: auto !important; }
    .ppm-edge > * { max-width: 100% !important; }

    /* Style: the editor + live preview sit side-by-side, crushing the preview to a
       sliver. Preview becomes a RIGHT drawer; the editor takes the full canvas. */
    .sp-main > .sp-editor { flex: 1 1 100% !important; width: auto !important; max-width: none !important; }
    .sp-preview-wrap.ppm-edge { width: min(92vw, 380px) !important; padding: 0 !important; }
    .sp-preview-wrap.ppm-edge .sp-preview-scroll { max-height: none; }

    /* Custom Files: its .cf-tree lives in .cf-workspace (not .main-area). Once the
       tree is a fixed edge drawer, the editor pane must take the full width.
       The higher-specificity width rule beats .cf-tree's own width:100%. */
    body.cf-body .cf-workspace .cf-main { width: 100% !important; flex: 1 1 100% !important; }
    body.cf-body .cf-tree.ppm-edge { width: min(86vw, 340px) !important; }

    /* Elements a page config asks to hide on mobile (split-pane resizers, etc.) */
    .ppm-hide { display: none !important; }
}

/* ══ 5 · Reduced motion ══════════════════════════════════════════════ */
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .ppm-panel, .ppm-scrim { transition: none; }
}
