/**
 * SpotShare — viewport mobile / tablette (≤ 10 pouces) + cadre sur grands écrans.
 */

:root {
    --ss-shell-max: 10in;
    --ss-shell-w: 100vw;
    --ss-shell-x: 0px;
}

/* Grands écrans (> ~10") : cadre type tablette, centré */
@media (min-width: 10.01in), (min-width: 1024px) {
    :root {
        --ss-shell-w: min(100vw, var(--ss-shell-max));
        --ss-shell-x: max(0px, calc((100vw - var(--ss-shell-w)) / 2));
    }

    html.ss-device-shell {
        background: #cbd5e1;
    }

    html.dark.ss-device-shell {
        background: #0f172a;
    }

    body.spotshare-app {
        width: var(--ss-shell-w);
        max-width: var(--ss-shell-max);
        margin-left: auto;
        margin-right: auto;
        min-height: 100vh;
        min-height: 100dvh;
        box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 12px 40px rgba(15, 23, 42, 0.12);
    }

    html.dark body.spotshare-app {
        box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.08), 0 12px 40px rgba(0, 0, 0, 0.45);
    }

    body.spotshare-app > header,
    body.spotshare-app #app-bottom-nav,
    body.spotshare-app #places-bulk-bar,
    body.spotshare-app #account-expired-overlay,
    body.spotshare-app > .fixed.inset-0,
    body.spotshare-app > div[id$="-modal"].fixed {
        left: var(--ss-shell-x);
        width: var(--ss-shell-w);
        right: auto;
    }

    body.spotshare-app #pwa-install-banner {
        left: calc(var(--ss-shell-x) + 1rem);
        right: auto;
        width: calc(var(--ss-shell-w) - 2rem);
    }

    body.spotshare-app #fab-add {
        right: calc(var(--ss-shell-x) + 1rem);
    }

    body.spotshare-app #map-place-panel:not(.hidden) {
        left: calc(var(--ss-shell-x) + 1rem);
        width: calc(var(--ss-shell-w) - 2rem);
        right: auto;
    }

    body.spotshare-app #view-map.map-expanded #map-section {
        left: var(--ss-shell-x);
        width: var(--ss-shell-w);
        right: auto;
    }
}

/* Tablettes et grands téléphones (jusqu'à 10") */
@media (max-width: 10in) and (min-width: 37.5rem) {
    html.ss-device-tablet #map,
    html.ss-device-tablet #map-fallback {
        height: min(52vh, 28rem);
    }

    html.ss-device-tablet #map-section {
        min-height: min(52vh, 28rem);
    }

    html.ss-device-tablet #app-bottom-nav .flex {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }

    html.ss-device-tablet .app-header-bar {
        max-width: 48rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Paysage tablette : carte plus haute */
@media (max-width: 10in) and (min-width: 37.5rem) and (orientation: landscape) {
    html.ss-device-tablet #map,
    html.ss-device-tablet #map-fallback {
        height: min(62vh, 32rem);
    }

    html.ss-device-tablet #map-section {
        min-height: min(62vh, 32rem);
    }
}

/* Safe areas (encoches) sur tous les appareils tactiles */
@supports (padding: env(safe-area-inset-top)) {
    body.spotshare-app {
        padding-top: env(safe-area-inset-top, 0);
    }
}