/* Lift Panama production app shell v0.5.2
   Navigation/UI only. No booking, trip, GPS, payment or dispatch logic. */

:root{
    --lp-shell-navy:#0b2d4f;
    --lp-shell-blue:#0b5da8;
    --lp-shell-bg:#f4f7fa;
    --lp-shell-line:#dce5ed;
    --lp-shell-muted:#667c90;
}

/* Compact sticky app header */
.lp-production-topbar{
    position:sticky!important;
    top:0;
    z-index:800;
    min-height:58px!important;
    padding:9px max(14px,env(safe-area-inset-right)) 9px max(14px,env(safe-area-inset-left))!important;
    gap:10px!important;
    box-shadow:0 5px 18px rgba(11,45,79,.16);
}
.lp-production-topbar .brand,
.lp-production-topbar .driver-brand{
    margin:0!important;
    font-size:18px!important;
    line-height:1.15;
}
.lp-production-topbar .driver-brand{
    display:block;
    color:#fff;
}
.lp-production-topbar .topbar-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

/* Hamburger */
.lp-menu-toggle{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.28);
    border-radius:12px;
    background:rgba(255,255,255,.10);
    color:#fff;
    cursor:pointer;
}
.lp-menu-toggle span,
.lp-menu-toggle::before,
.lp-menu-toggle::after{
    content:"";
    display:block;
    width:20px;
    height:2px;
    border-radius:2px;
    background:currentColor;
}
.lp-menu-toggle span{margin:4px 0}
.lp-menu-toggle:focus-visible,
.lp-menu-close:focus-visible,
.lp-menu-link:focus-visible{
    outline:3px solid rgba(87,180,239,.35);
    outline-offset:2px;
}

/* Backdrop + drawer */
.lp-menu-backdrop{
    position:fixed;
    inset:0;
    z-index:1180;
    background:rgba(7,25,43,.46);
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease,visibility .18s ease;
    backdrop-filter:blur(2px);
}
.lp-app-menu{
    position:fixed;
    z-index:1190;
    top:0;
    right:0;
    bottom:0;
    width:min(370px,90vw);
    display:flex;
    flex-direction:column;
    background:#fff;
    box-shadow:-18px 0 50px rgba(7,25,43,.20);
    transform:translateX(105%);
    transition:transform .2s ease;
    padding-top:env(safe-area-inset-top);
}
body.lp-menu-open{overflow:hidden}
body.lp-menu-open .lp-menu-backdrop{
    opacity:1;
    visibility:visible;
}
body.lp-menu-open .lp-app-menu{
    transform:translateX(0);
}
.lp-menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:68px;
    padding:14px 16px;
    color:#fff;
    background:linear-gradient(135deg,var(--lp-shell-navy),#164c78);
}
.lp-menu-user{
    min-width:0;
    display:grid;
    gap:2px;
}
.lp-menu-user strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:15px;
}
.lp-menu-user span{
    font-size:11px;
    color:rgba(255,255,255,.72);
}
.lp-menu-close{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:11px;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}
.lp-menu-scroll{
    overflow:auto;
    overscroll-behavior:contain;
    padding:14px 14px calc(18px + env(safe-area-inset-bottom));
}
.lp-menu-label{
    margin:4px 8px 8px;
    color:#8293a2;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.lp-menu-nav{
    display:grid;
    gap:5px;
}
.lp-menu-link{
    min-height:47px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 13px;
    border:1px solid transparent;
    border-radius:12px;
    color:#173b5c!important;
    background:transparent;
    text-decoration:none!important;
    font-size:14px;
    font-weight:850;
}
.lp-menu-link::after{
    content:"›";
    color:#8a9aaa;
    font-size:19px;
}
.lp-menu-link:hover,
.lp-menu-link.is-active{
    border-color:#d9e8f3;
    background:#eef7fd;
    color:var(--lp-shell-blue)!important;
}
.lp-menu-divider{
    height:1px;
    margin:14px 0;
    background:#e7edf2;
}
.lp-menu-tools{
    display:grid;
    gap:11px;
    padding:0 4px;
}
.lp-menu-tools .lp-language-switcher{
    width:max-content;
    box-shadow:none;
}
.lp-menu-tools [data-pwa-install]{
    width:100%;
    min-height:44px;
    border:1px solid #d3e2ed;
    border-radius:11px;
    background:#f4f9fc;
    color:#173b5c;
    font-weight:850;
    cursor:pointer;
}
.lp-menu-signout{
    margin:0;
}
.lp-menu-signout button{
    width:100%;
    min-height:46px;
    border:1px solid #efd7d4;
    border-radius:11px;
    background:#fff5f4;
    color:#932d25;
    font-weight:900;
    cursor:pointer;
}

/* Passenger: remove old user/header clutter after moving it into drawer */
.topbar.lp-production-topbar .userbar{display:none!important}
.topbar.lp-production-topbar > .topbar-actions .lp-language-switcher{display:none}
.topbar.lp-production-topbar > .topbar-actions .pwa-topbar-install{display:none!important}

/* Driver: drawer replaces the old bottom navigation entirely */
.driver-nav{display:none!important}
.driver-shell{padding-bottom:0!important}
.driver-topbar.lp-production-topbar .driver-name{display:none!important}
.driver-topbar.lp-production-topbar > .lp-language-switcher{display:none!important}

/* More app-like spacing; keep all operational content */
.shell{
    margin-top:18px!important;
    margin-bottom:38px!important;
}
.driver-main{
    margin-top:14px!important;
    margin-bottom:34px!important;
}

/* Development-era banners remain functional but no longer dominate the screen */
.pwa-install-banner,
.passenger-push-banner{
    margin:10px auto!important;
    padding:11px 13px!important;
    width:min(1100px,calc(100% - 22px))!important;
    border-radius:14px!important;
}
.pwa-install-copy,
.passenger-push-copy{
    line-height:1.35!important;
}
.pwa-install-copy strong,
.passenger-push-copy strong{
    font-size:13px!important;
}
.pwa-install-copy span,
.passenger-push-copy span{
    font-size:11px!important;
}

/* Reduce vertical dead space without hiding business information */
.page-head{margin-bottom:14px!important}
.trip-tabs{margin:12px 0 20px!important}
.trip-section{margin-bottom:24px!important}
.driver-card{margin-bottom:12px!important}
.driver-card,
.trip-card,
.panel{scroll-margin-top:72px}

@media(max-width:700px){
    .shell{
        width:min(100% - 20px,1120px)!important;
        margin-top:12px!important;
    }
    .driver-main{
        width:min(100% - 18px,760px)!important;
        margin-top:10px!important;
    }
    .trip-card,.panel{padding:15px!important}
    .driver-card{padding:15px!important}
    .page-head h1{font-size:1.65rem!important}
    .page-head p,
    .muted-note{font-size:12px;line-height:1.45}
}