/**
 * ===============================================================================
 * TripTiles - Mobile First Pass (User-Frontend)
 * Faltet das 3-Spalten-Mein-Bereich-Layout, Workbench, Spotlight, Live-Modus
 * auf Touch-Geometrien. Behaelt Desktop-Layout ueber 900px komplett.
 * Developed by Toni Sciacca - mail@tonisciacca.com
 * ===============================================================================
 */

@media (max-width: 900px) {

    /* ───── Header (rahmen) ───── */
    .sh-header { padding: 0 12px; height: 56px; --sh-hh: 56px; }
    .sh-logo-text { font-size: 16px; }
    .sh-av-lg { width: 36px; height: 36px; }
    .sh-search-bar-header { display: none; }

    /* ───── Layout: aus 3-Spalten wird Tab-Switching ───── */
    .sh-layout { display: block; height: calc(100vh - 56px); margin-top: 56px; }
    .sh-sb, .sh-ctr, .sh-rt { width: 100% !important; height: 100%; position: absolute; top: 56px; left: 0; right: 0; bottom: 0; }
    .sh-sb { transform: translateX(-100%); transition: transform 0.3s ease; z-index: 80; box-shadow: 4px 0 16px rgba(0,0,0,0.15); }
    .sh-rt { transform: translateX(100%); transition: transform 0.3s ease; z-index: 80; box-shadow: -4px 0 16px rgba(0,0,0,0.15); }
    .sh-layout.mob-sb-open .sh-sb { transform: translateX(0); }
    .sh-layout.mob-rt-open .sh-rt { transform: translateX(0); }

    /* Desktop-Toggle-Sticks ausblenden, eigene Mobile-Tabs zeigen */
    .sh-toggle-sb, .sh-toggle-rt, .sh-reopen-sb, .sh-reopen-rt { display: none !important; }

    /* Mobile Bottom-Tab-Bar */
    .mob-tabbar {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
        background: var(--sh-card, #fff);
        border-top: 1px solid var(--sh-border, #e8e8e8);
        height: 58px; padding-bottom: env(safe-area-inset-bottom, 0);
        display: flex; justify-content: space-around; align-items: stretch;
    }
    .mob-tab {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        background: none; border: none; cursor: pointer;
        font: inherit; font-size: 10px; font-weight: 600;
        color: var(--sh-text3, #9a9a9a);
        padding: 6px 0;
    }
    .mob-tab [data-lucide] { width: 22px; height: 22px; }
    .mob-tab.active { color: var(--sh-pink, #FF385C); }

    /* Body padding bottom fuer Tabbar */
    body.has-mob-tabbar .sh-ctr { padding-bottom: 58px; }

    /* ───── Discover ent-toolbar ───── */
    .ent-toolbar { flex-direction: column; gap: 8px; padding: 8px 12px; }
    .ent-pills { overflow-x: auto; flex-wrap: nowrap; }
    .ent-actions { width: 100%; justify-content: space-between; }
    .ent-search { flex: 1; }

    /* Split-View: Karte oben, Feed unten (statt nebeneinander) */
    #viewSplit { display: flex; flex-direction: column; }
    #feedMap { position: relative !important; inset: auto !important; height: 38vh; flex-shrink: 0; }
    .sh-feed-col { position: relative !important; width: 100% !important; height: auto !important; flex: 1; }

    /* ───── Spotlight ───── */
    .spt-overlay { padding-top: 4vh; padding-left: 8px; padding-right: 8px; }
    .spt-shell { max-height: 92vh; }
    .spt-input { font-size: 16px; }
    .spt-scopes { padding: 6px 8px; }

    /* ───── Notifications-Drawer ───── */
    .nc-drawer { width: 100vw; }

    /* ───── Workbench Mobile ───── */
    .wb-head { height: auto; padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
    .wb-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .wb-tab { flex-shrink: 0; }
    .wb-head-actions { flex-wrap: wrap; }
    .wb-action { width: 32px; height: 32px; }
    .wb-kompose { grid-template-columns: 1fr; }
    .wb-kompose-left, .wb-kompose-right { border: none; padding: 14px; }
    .wb-timeline { grid-template-columns: 56px 1fr; }
    .wb-day-map { display: none; }
    .wb-suggest-strip { right: 12px; left: 12px; bottom: 12px; }
    .wb-kpis { grid-template-columns: repeat(2, 1fr); }
    .wb-vault-grid { grid-template-columns: 1fr; }
    .wb-kompose-mid { padding: 16px; }

    /* ───── Live-Modus ───── */
    .lm-body { grid-template-columns: 1fr; padding: 12px; }
    .lm-side-map { height: 220px; }
    .lm-now-title { font-size: 19px; }
    .lm-head { padding: 12px 14px; }
    .lm-title { font-size: 16px; }

    /* ───── Hero Mobile ───── */
    .hero-title { font-size: 28px !important; line-height: 1.15; padding: 0 12px; }
    .hero-subtitle { font-size: 14px !important; padding: 0 12px; }
    .hero-search-pill { width: calc(100% - 32px); margin: 0 16px; }
    .hero-categories { padding: 0 12px; gap: 6px !important; flex-wrap: wrap; justify-content: center; }
    .hero-category-pill { font-size: 11px !important; padding: 6px 10px !important; }
    .hero-tile-strip { display: none; }
    .hero-composer .hc-row { width: 100%; padding: 0 12px; }
    .hc-results { padding: 0 12px; }
    .hc-card { width: calc(50% - 6px); }
}

@media (max-width: 540px) {
    .wb-kpis { grid-template-columns: 1fr 1fr; }
    .wb-meta { display: none; }
    .lm-tl-item { grid-template-columns: 48px 1fr 28px; }
    .hero-category-pill span { display: none; }
    .hero-category-pill { padding: 8px !important; min-width: 36px; min-height: 36px; justify-content: center; }
}

/* iPad-Spezifika: 2-Spalten statt 3 */
@media (min-width: 901px) and (max-width: 1180px) {
    .sh-layout { grid-template-columns: 220px 1fr 0; }
    .sh-rt { display: none; }
    .sh-toggle-rt, .sh-reopen-rt { display: none; }
    .wb-kompose { grid-template-columns: 300px 1fr; }
    .wb-kompose-right { display: none; }
}