/*
 * Phone layout (≤ 767px) for the admin and portal layouts, loaded by partials/pwa-head.
 * Plain CSS on purpose (no Tailwind build needed). Desktop is untouched: every rule sits in a
 * max-width media query and is keyed to the bars rendered by partials/pwa-install.
 */
:root { --pwa-bar-h: 64px; }

.pwa-bar { display: none; }
.pwa-install-card { display: none; }

@media (max-width: 767px) {
    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }

    /* ───── Bottom tab bar (portal + admin) ───── */
    .pwa-bar {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        height: calc(var(--pwa-bar-h) + env(safe-area-inset-bottom));
        padding: 4px 4px env(safe-area-inset-bottom);
        background: color-mix(in oklab, var(--card, #fff) 92%, transparent);
        -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
        border-top: 1px solid var(--line, #e5e7eb);
        box-shadow: 0 -8px 24px -18px rgba(15, 23, 42, .45);
    }
    .pwa-bar a, .pwa-bar button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-width: 0; border-radius: 14px; font-size: 11px; font-weight: 600; line-height: 1.1;
        color: #64748b; position: relative; background: none; border: 0; padding: 0 2px;
    }
    .pwa-bar a span, .pwa-bar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pwa-bar svg { width: 22px; height: 22px; }
    .pwa-bar .is-active { color: var(--pwa-accent, #047857); }
    .pwa-bar .is-active::before {
        content: ''; position: absolute; top: 2px; width: 28px; height: 3px; border-radius: 3px; background: var(--pwa-accent, #047857);
    }
    .pwa-bar .pwa-dot { position: absolute; top: 6px; right: calc(50% - 18px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #e11d48; color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
    .dark .pwa-bar a, .dark .pwa-bar button { color: #94a3b8; }
    .dark .pwa-bar .is-active { color: #6ee7b7; }
    .dark .pwa-bar .is-active::before { background: #6ee7b7; }

    /* Install card sits above the bar */
    .pwa-install-card { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(var(--pwa-bar-h) + env(safe-area-inset-bottom) + 10px); z-index: 41; }
    body:not(:has(.pwa-bar)) .pwa-install-card { bottom: calc(12px + env(safe-area-inset-bottom)); }

    /* ───── Portal (components/layouts/simple) ───── */
    body:has(#pwa-portal-bar) > header > div { padding-left: 12px; padding-right: 12px; gap: 8px; }
    body:has(#pwa-portal-bar) > header > div > .ml-auto { gap: 6px; }
    body:has(#pwa-portal-bar) > header form[action$="/logout"],
    body:has(#pwa-portal-bar) > header button[x-on\:click*="toggleDark"] { display: none; }
    body:has(#pwa-portal-bar) > main { padding: 16px 16px calc(var(--pwa-bar-h) + env(safe-area-inset-bottom) + 24px); }
    body:has(#pwa-portal-bar) > main h1 { font-size: 22px; }
    body:has(#pwa-portal-bar) > main .card-pad { padding: 16px; }

    /* ───── Admin (components/layouts/admin) ───── */
    body.pwa-admin aside.fixed.inset-y-0 {
        width: min(86vw, 300px) !important; transform: translateX(-102%); transition: transform .22s ease; z-index: 60;
        box-shadow: 0 0 60px rgba(0, 0, 0, .35);
    }
    body.pwa-admin.pwa-drawer-open aside.fixed.inset-y-0 { transform: none; }
    body.pwa-admin.pwa-drawer-open { overflow: hidden; }
    .pwa-drawer-backdrop { display: none; }
    body.pwa-admin.pwa-drawer-open .pwa-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(2, 6, 23, .5); }

    body.pwa-admin > div.flex.min-h-screen > div.flex-1 { padding-left: 0 !important; }
    body.pwa-admin header.sticky { padding-left: 10px; padding-right: 10px; gap: 6px; height: 58px; }
    body.pwa-admin header.sticky > .ml-auto { gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    body.pwa-admin header.sticky > .ml-auto::-webkit-scrollbar { display: none; }
    body.pwa-admin header.sticky a[target="_blank"],
    body.pwa-admin header.sticky button[title][x-on\:click*="toggleDark"] { display: none; }
    body.pwa-admin header.sticky .btn-sm .max-w-40 { max-width: 84px; }

    body.pwa-admin main { padding: 16px 12px calc(var(--pwa-bar-h) + env(safe-area-inset-bottom) + 24px) !important; }
    body.pwa-admin main h1 { font-size: 21px; }
    body.pwa-admin main .card-pad { padding: 14px; }
    body.pwa-admin > div.flex.min-h-screen footer { display: none; }

    /* Tab navs (…/_nav.blade.php) scroll sideways instead of wrapping into several rows */
    body.pwa-admin main div:has(> a.tab) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    body.pwa-admin main div:has(> a.tab)::-webkit-scrollbar { display: none; }
    body.pwa-admin main a.tab { flex-shrink: 0; white-space: nowrap; }

    /* Sticky save bars (roll-call, marks) must clear the bottom bar */
    body.pwa-admin main .sticky.bottom-4 { bottom: calc(var(--pwa-bar-h) + env(safe-area-inset-bottom) + 8px); }
    body.pwa-admin main .sticky.bottom-0 { bottom: calc(var(--pwa-bar-h) + env(safe-area-inset-bottom)); }

    /* Forms and tables: never wider than the screen */
    body.pwa-admin main .min-w-72, body.pwa-admin main .min-w-64 { min-width: 0 !important; width: 100%; }
    body.pwa-admin main select.input, body.pwa-admin main input.input { max-width: 100%; }
    .table-wrap { -webkit-overflow-scrolling: touch; }
    .table thead th, .table tbody td { padding-left: 12px; padding-right: 12px; }

    /* Command palette full width */
    body.pwa-admin [x-data^="commandPalette"] > div { padding-top: 8vh; }
}

@media (min-width: 768px) {
    .pwa-mobile-only { display: none !important; }
    .pwa-install-card { display: block; position: fixed; right: 24px; bottom: 24px; width: 360px; z-index: 41; }
}