/* =========================================================
   SCANMIT LIVE V4
   Professional mobile UI matching the approved mockup.
   Pure presentation layer. Existing functional IDs preserved.
   ========================================================= */

:root{
    --sm-green:#07583d;
    --sm-green-dark:#043d2c;
    --sm-gold:#d9aa23;
    --sm-gold-light:#f3d05d;
    --sm-red:#c91e2d;
    --sm-ink:#13202a;
    --sm-muted:#6d7882;
    --sm-line:#e1e6e9;
    --sm-soft:#f4f6f7;
    --sm-white:#fff;
    --sm-shadow:0 10px 28px rgba(10,35,27,.10);
}

html,body{
    background:var(--sm-soft)!important;
    color:var(--sm-ink)!important;
}

body{
    margin:0!important;
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
}

main{
    width:min(100%,980px)!important;
    margin:0 auto!important;
    padding:0 14px 100px!important;
    box-sizing:border-box!important;
}

/* HEADER */
.scanmit-v4-header{
    min-height:108px!important;
    padding:10px 16px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    position:relative!important;
    overflow:hidden!important;
    background:
        radial-gradient(circle at 20% 0%,rgba(243,208,93,.13),transparent 36%),
        linear-gradient(135deg,#076044 0%,#075038 55%,#043427 100%)!important;
    border-bottom:0!important;
    box-shadow:0 8px 24px rgba(0,0,0,.15)!important;
    z-index:1200!important;
}

.scanmit-v4-header::after{
    content:"";
    position:absolute;
    left:-4%;
    right:-4%;
    bottom:-10px;
    height:24px;
    border-top:5px solid var(--sm-gold);
    border-radius:50%;
    box-shadow:0 -2px 0 rgba(255,255,255,.6);
    pointer-events:none;
}

.scanmit-v4-brand{
    width:min(390px,74vw)!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:1px!important;
    color:#fff!important;
    text-decoration:none!important;
    line-height:1!important;
}

.scanmit-v4-brand img{
    width:100%!important;
    max-height:75px!important;
    object-fit:contain!important;
    object-position:left center!important;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.26));
}

.scanmit-brand-tagline{
    margin:-3px 0 0 34%!important;
    color:#f7e6a5!important;
    font-size:9px!important;
    line-height:1.25!important;
    letter-spacing:2.5px!important;
    font-weight:850!important;
}

.scanmit-menu-button{
    width:44px!important;
    height:44px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    border:0!important;
    background:transparent!important;
    text-decoration:none!important;
    flex:0 0 auto!important;
}

.scanmit-menu-button span{
    width:27px;
    height:3px;
    border-radius:5px;
    background:var(--sm-gold-light);
}

/* LIVE HEADING */
.scanmit-live-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:20px 2px 12px!important;
}

.scanmit-live-head h1{
    margin:0!important;
    font-size:clamp(28px,7vw,42px)!important;
    line-height:1!important;
    letter-spacing:-1.1px!important;
}

.scanmit-live-head h1 span{
    color:var(--sm-green)!important;
    font-weight:950!important;
}

.scanmit-live-head h1 strong{
    color:var(--sm-gold)!important;
    font-weight:950!important;
}

.scanmit-live-head p{
    margin:5px 0 0!important;
    color:var(--sm-muted)!important;
    font-size:16px!important;
}

.scanmit-top-share{
    min-height:48px!important;
    padding:0 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    border:1px solid #dce2e5!important;
    border-radius:17px!important;
    background:#fff!important;
    color:#183228!important;
    font-weight:900!important;
    box-shadow:0 6px 17px rgba(0,0,0,.07)!important;
}

.scanmit-top-share svg{
    width:22px;height:22px;
    fill:none;stroke:var(--sm-green);stroke-width:2;
}

/* MAP */
.scanmit-map-hero{
    position:relative!important;
    overflow:hidden!important;
    margin:0 0 12px!important;
    padding:0!important;
    border:1px solid var(--sm-line)!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:var(--sm-shadow)!important;
}

.scanmit-map-tools{
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    top:12px!important;
    z-index:700!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    pointer-events:none!important;
}

.scanmit-map-search,
.scanmit-map-round-button{
    pointer-events:auto!important;
}

.scanmit-map-search{
    flex:1!important;
    height:52px!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    padding:0 15px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 7px 20px rgba(0,0,0,.14)!important;
}

.scanmit-map-search svg{
    width:23px;height:23px;
    fill:none;stroke:#17222a;stroke-width:2.2;
    flex:0 0 auto;
}

.scanmit-map-search input{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:15px!important;
}

.scanmit-map-round-button{
    width:52px!important;
    height:52px!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    border:0!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 7px 20px rgba(0,0,0,.14)!important;
}

.scanmit-map-round-button svg{
    width:26px;height:26px;
    fill:none;stroke:#111;stroke-width:2;
}

#liveMap{
    height:49vh!important;
    min-height:420px!important;
    max-height:610px!important;
    border-radius:22px 22px 0 0!important;
}

.scanmit-fuel-toggle{
    position:absolute!important;
    left:12px!important;
    bottom:210px!important;
    z-index:700!important;
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:0 10px!important;
    border:0!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.96)!important;
    color:#17222a!important;
    font-size:12px!important;
    font-weight:850!important;
    box-shadow:0 6px 18px rgba(0,0,0,.14)!important;
}

.scanmit-fuel-toggle > svg{
    width:18px;height:18px;
    fill:none;stroke:var(--sm-green);stroke-width:2;
}

.scanmit-switch{
    width:38px;height:22px;
    padding:2px;
    display:flex;
    align-items:center;
    border-radius:999px;
    background:#cbd5d1;
    transition:.2s;
}

.scanmit-switch span{
    width:18px;height:18px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    transition:.2s;
}

.scanmit-fuel-toggle.active .scanmit-switch{
    background:var(--sm-green);
}

.scanmit-fuel-toggle.active .scanmit-switch span{
    transform:translateX(16px);
}

/* STATS */
.scanmit-live-stats{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    background:#fff!important;
    border-top:1px solid var(--sm-line)!important;
    border-bottom:1px solid var(--sm-line)!important;
}

.scanmit-stat{
    min-height:82px!important;
    padding:12px 8px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:8px!important;
    position:relative!important;
}

.scanmit-stat:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:18px;
    bottom:18px;
    width:1px;
    background:#e5e9eb;
}

.scanmit-stat svg{
    width:23px;height:23px;
    fill:none;stroke:var(--sm-green);stroke-width:2;
    flex:0 0 auto;
}

.scanmit-stat div{
    min-width:0;
}

.scanmit-stat strong{
    display:block!important;
    color:#17212a!important;
    font-size:14px!important;
    line-height:1.05!important;
    font-weight:950!important;
}

.scanmit-stat span{
    display:block!important;
    margin-top:2px!important;
    color:#66727c!important;
    font-size:10px!important;
    line-height:1.1!important;
}

.scanmit-stat-live{
    align-items:center!important;
}

.scanmit-live-dot{
    width:10px!important;
    height:10px!important;
    flex:0 0 auto!important;
    margin-top:0!important;
    border-radius:50%!important;
    background:#22c94d!important;
    box-shadow:0 0 0 4px rgba(34,201,77,.12);
}

/* PRIMARY ACTIONS */
.scanmit-primary-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    padding:12px!important;
    background:#fff!important;
    border-top:0!important;
}

.scanmit-action-card{
    min-height:142px!important;
    padding:13px 8px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    border:0!important;
    border-radius:18px!important;
    color:#fff!important;
    text-align:center!important;
    box-shadow:0 8px 18px rgba(0,0,0,.12)!important;
}

.scanmit-action-report{background:linear-gradient(145deg,#08724e,#045038)!important}
.scanmit-action-help{background:linear-gradient(145deg,#d62a38,#b71925)!important}
.scanmit-action-angel{background:linear-gradient(145deg,#e2b72e,#b88a09)!important}

.scanmit-action-card > svg{
    width:46px;height:46px;
    fill:none;stroke:#fff;stroke-width:1.8;
}

.scanmit-sos-icon{
    width:54px;height:54px;
    display:grid!important;
    place-items:center!important;
    border:3px solid #fff!important;
    border-radius:50%!important;
    color:#fff!important;
    font-size:15px!important;
    font-weight:950!important;
}

.scanmit-action-card strong{
    font-size:17px!important;
    line-height:1.05!important;
}

.scanmit-action-card > span:not(.scanmit-sos-icon){
    font-size:11px!important;
    line-height:1.15!important;
    font-weight:650!important;
}

.scanmit-action-card b{
    font-size:24px!important;
    line-height:.8!important;
}

/* SECONDARY ACTIONS */
.scanmit-secondary-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin:0 0 12px!important;
}

.scanmit-secondary-card{
    min-height:110px!important;
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 12px!important;
    align-items:center!important;
    gap:8px!important;
    padding:12px!important;
    border:1px solid var(--sm-line)!important;
    border-radius:18px!important;
    background:#fff!important;
    color:var(--sm-ink)!important;
    text-align:left!important;
    text-decoration:none!important;
    box-shadow:0 7px 18px rgba(9,38,29,.07)!important;
}

button.scanmit-secondary-card{
    width:100%!important;
    font-family:inherit!important;
}

.scanmit-secondary-card > svg{
    width:37px;height:37px;
    fill:none;stroke:var(--sm-green);stroke-width:2;
}

.scanmit-secondary-card strong{
    display:block!important;
    font-size:15px!important;
    line-height:1.08!important;
    font-weight:950!important;
}

.scanmit-secondary-card span{
    display:block!important;
    margin-top:4px!important;
    color:#596773!important;
    font-size:10px!important;
    line-height:1.15!important;
    font-weight:650!important;
}

.scanmit-secondary-card b{
    font-size:24px!important;
    color:#43505a!important;
}

.scanmit-secondary-car{
    background:linear-gradient(145deg,#08724e,#045038)!important;
    color:#fff!important;
    border-color:#056245!important;
}

.scanmit-secondary-car > svg{stroke:#fff!important}
.scanmit-secondary-car span{color:#e7f4ee!important}
.scanmit-secondary-car b{color:#fff!important}

/* SUPPORT + EMERGENCY */
.scanmit-support-emergency{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:0 0 12px!important;
}

.scanmit-support-card,
.scanmit-emergency-card{
    min-height:80px!important;
    display:grid!important;
    align-items:center!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:18px!important;
    background:#fff!important;
}

.scanmit-support-card{
    grid-template-columns:44px 1fr 12px!important;
    border:1px solid #b8dfc7!important;
    color:#17222a!important;
    text-align:left!important;
}

.scanmit-whatsapp-icon{
    width:42px;height:42px;
    display:grid!important;
    place-items:center!important;
    border-radius:13px!important;
    background:#15b85a!important;
}

.scanmit-whatsapp-icon svg{
    width:27px;height:27px;
    fill:none;stroke:#fff;stroke-width:2;
}

.scanmit-support-card strong,
.scanmit-emergency-card strong{
    display:block!important;
    font-size:15px!important;
    font-weight:950!important;
}

.scanmit-support-card span:not(.scanmit-whatsapp-icon),
.scanmit-emergency-card span{
    display:block!important;
    margin-top:3px!important;
    color:#64717b!important;
    font-size:10px!important;
}

.scanmit-support-card b{
    font-size:24px!important;
}

.scanmit-emergency-card{
    grid-template-columns:38px minmax(0,1fr) auto!important;
    border:1px solid #f1a5ac!important;
    background:#fff7f8!important;
    color:var(--sm-red)!important;
}

.scanmit-emergency-card > svg{
    width:34px;height:34px;
    fill:none;stroke:var(--sm-red);stroke-width:2;
}

.scanmit-emergency-card span{
    color:#c14852!important;
}

.scanmit-emergency-numbers{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    font-weight:950!important;
    white-space:nowrap!important;
}

.scanmit-emergency-numbers a{
    color:var(--sm-red)!important;
    font-size:16px!important;
    text-decoration:none!important;
}

.scanmit-membership-strip{
    display:flex!important;
    min-height:42px!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0 0 12px!important;
    border:1px solid #d5e7dd!important;
    border-radius:14px!important;
    background:#eef7f2!important;
    color:var(--sm-green)!important;
    font-size:12px!important;
    font-weight:900!important;
    text-decoration:none!important;
}

.scanmit-membership-strip.active{
    background:#e8f5ed!important;
}

/* PANELS + FEED */
.report-panel,
.feed-card{
    margin:0 0 14px!important;
    padding:16px!important;
    border:1px solid var(--sm-line)!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:var(--sm-shadow)!important;
}

/* FOOTER stays outside app board */
footer{
    background:transparent!important;
    box-shadow:none!important;
}

/* fixed bottom navigation */
.scanmit-bottom-nav{
    position:fixed!important;
    left:50%!important;
    bottom:0!important;
    z-index:5000!important;
    width:min(100%,980px)!important;
    display:grid!important;
    grid-template-columns:1fr 1fr 1.15fr 1fr 1fr!important;
    align-items:end!important;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;
    border-top:1px solid var(--sm-line)!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -8px 28px rgba(0,0,0,.10)!important;
    transform:translateX(-50%)!important;
}

.scanmit-bottom-item{
    min-height:58px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    border:0!important;
    background:transparent!important;
    color:#65717c!important;
    font-size:11px!important;
    font-weight:850!important;
    text-decoration:none!important;
}

.scanmit-bottom-item.active{color:var(--sm-green)!important}

.scanmit-bottom-icon{
    font-size:24px!important;
    line-height:1!important;
}

.scanmit-bottom-main{
    position:relative!important;
    margin-top:-30px!important;
}

.scanmit-bottom-plus{
    width:64px!important;
    height:64px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:4px solid #fff!important;
    border-radius:50%!important;
    background:linear-gradient(145deg,#f3cf58,#c9960c)!important;
    color:#fff!important;
    font-size:40px!important;
    font-weight:300!important;
    box-shadow:0 7px 20px rgba(151,107,0,.30)!important;
}

/* Leaflet */
.leaflet-control-zoom{
    border:0!important;
    border-radius:14px!important;
    overflow:hidden!important;
    box-shadow:0 5px 16px rgba(0,0,0,.14)!important;
}

.leaflet-control-zoom a{
    width:44px!important;
    height:44px!important;
    line-height:44px!important;
    font-size:28px!important;
    background:#fff!important;
    color:#111!important;
}

@media(max-width:640px){
    .scanmit-v4-header{
        min-height:96px!important;
        padding:8px 10px 12px!important;
    }

    .scanmit-v4-brand{
        width:min(300px,72vw)!important;
    }

    .scanmit-v4-brand img{
        max-height:64px!important;
    }

    .scanmit-brand-tagline{
        margin-left:31%!important;
        font-size:7.5px!important;
        letter-spacing:1.9px!important;
    }

    main{
        padding:0 10px 96px!important;
    }

    .scanmit-live-head{
        padding-top:18px!important;
    }

    .scanmit-live-head h1{
        font-size:31px!important;
    }

    .scanmit-live-head p{
        font-size:14px!important;
    }

    .scanmit-top-share{
        min-height:44px!important;
        padding:0 12px!important;
        font-size:13px!important;
    }

    #liveMap{
        height:47vh!important;
        min-height:390px!important;
    }

    .scanmit-fuel-toggle{
        bottom:202px!important;
    }

    .scanmit-action-card{
        min-height:132px!important;
    }

    .scanmit-secondary-card{
        min-height:104px!important;
        grid-template-columns:34px minmax(0,1fr) 10px!important;
        padding:10px!important;
    }

    .scanmit-secondary-card > svg{
        width:31px!important;height:31px!important;
    }

    .scanmit-secondary-card strong{
        font-size:13px!important;
    }
}

@media(max-width:390px){
    .scanmit-live-stats{
        grid-template-columns:repeat(2,1fr)!important;
    }

    .scanmit-stat:nth-child(2)::after{
        display:none;
    }

    .scanmit-stat{
        min-height:65px!important;
    }

    .scanmit-primary-actions{
        gap:7px!important;
        padding:8px!important;
    }

    .scanmit-action-card{
        min-height:120px!important;
        padding:10px 5px!important;
    }

    .scanmit-action-card strong{
        font-size:14px!important;
    }

    .scanmit-action-card > span:not(.scanmit-sos-icon){
        font-size:9px!important;
    }

    .scanmit-secondary-actions{
        gap:7px!important;
    }

    .scanmit-secondary-card{
        grid-template-columns:1fr!important;
        text-align:center!important;
        min-height:105px!important;
    }

    .scanmit-secondary-card > svg,
    .scanmit-secondary-card b{
        margin:auto!important;
    }

    .scanmit-secondary-card b{
        display:none!important;
    }

    .scanmit-support-emergency{
        grid-template-columns:1fr!important;
    }
}
/* =========================================
   V4 POSITION FIXES
   ========================================= */

/* Header kompakter und sauber ausgerichtet */

.scanmit-v4-header {
    min-height: 94px !important;
    padding: 8px 16px 13px !important;
}

.scanmit-v4-brand {
    width: min(350px, 67vw) !important;
}

.scanmit-v4-brand img {
    max-height: 65px !important;
}

.scanmit-brand-tagline {
    margin:
        -5px 0 0 32% !important;

    white-space: nowrap;

    font-size: 7.5px !important;
    letter-spacing: 1.7px !important;
}

/* Menü rechts korrekt */

.scanmit-menu-button {
    position: absolute !important;
    right: 13px !important;
    bottom: 22px !important;
}

/* Karten-Suchfeld */

.scanmit-map-tools {
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
}

.scanmit-map-search {
    max-width:
        calc(100% - 68px) !important;

    height: 50px !important;

    border:
        1px solid
        rgba(0,0,0,.06) !important;
}

.scanmit-map-search input {
    font-size: 14px !important;
}

/* Standort-Knopf */

.scanmit-map-round-button {
    width: 50px !important;
    height: 50px !important;
}

/* Leaflet + / - nicht mehr über Suchfeld */

.scanmit-map-hero
.leaflet-top.leaflet-left {
    top: 76px !important;
    left: auto !important;
    right: 14px !important;
}

/* Tankstellen-Schalter */

.scanmit-fuel-toggle {
    left: 14px !important;
    bottom: auto !important;
    top: 355px !important;

    min-height: 42px !important;

    background:
        rgba(255,255,255,.96) !important;

    z-index: 900 !important;
}

/* alten Floating-Support ausblenden */

#scanmitSupportToggle {
    display: none !important;
}