/* Profile menu, garage and unified panel interactions. */
.ui-icon{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.route-library-btn .ui-icon,.save-route-btn .ui-icon{width:19px;height:19px}
.save-route-btn{color:#422006!important;border-color:#f59e0b!important;background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;box-shadow:0 10px 26px rgba(245,158,11,.30)!important;transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important}
.save-route-btn:hover{color:#2b1600!important;border-color:#d97706!important;background:linear-gradient(135deg,#f59e0b,#d97706)!important;box-shadow:0 14px 32px rgba(217,119,6,.36)!important}
html[data-theme=dark] .save-route-btn{color:#422006!important;border-color:#fbbf24!important;background:linear-gradient(135deg,#fcd34d,#f59e0b)!important}
.save-route-btn:focus-visible{outline:3px solid rgba(245,158,11,.32);outline-offset:3px}
.save-route-btn:disabled,.save-route-btn:disabled:hover{opacity:.62;color:#422006!important;border-color:#f59e0b!important;background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;box-shadow:none!important;cursor:wait;transform:none}
.auth-user-slot{position:relative;min-width:0}
.user-menu{position:relative;min-width:0}
.user-menu-toggle{max-width:180px;height:42px;display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:999px;color:var(--text);background:rgba(255,255,255,.48);cursor:pointer;font-weight:850}
html[data-theme=dark] .user-menu-toggle{background:rgba(255,255,255,.09)}
.user-menu-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu-chevron{width:17px;height:17px;flex:0 0 17px;color:var(--muted);transition:transform .2s ease}
.user-menu-toggle[aria-expanded=true] .user-menu-chevron{transform:rotate(180deg)}
.user-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:260px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--glass-strong);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.user-dropdown[hidden]{display:none}
.user-dropdown button,.user-dropdown a{width:100%;min-height:43px;display:flex;align-items:center;gap:11px;padding:0 11px;border:0;border-radius:11px;color:var(--text);background:transparent;text-decoration:none;text-align:left;font-weight:800;cursor:pointer}
.user-dropdown button:hover,.user-dropdown a:hover{background:rgba(34,197,94,.13)}
.user-dropdown button>.ui-icon,.user-dropdown a>.ui-icon{width:20px;height:20px;flex-basis:20px;color:var(--muted)}
.user-dropdown button:hover>.ui-icon,.user-dropdown a:hover>.ui-icon{color:var(--green)}
.user-menu-divider{height:1px;margin:7px 4px;background:var(--line)}
.user-dropdown .user-menu-logout{color:#dc2626}
.premium-menu-banner{display:flex;align-items:center;gap:10px;margin:7px 3px;padding:11px;border:1px solid rgba(34,197,94,.25);border-radius:12px;color:#065f46;background:linear-gradient(135deg,rgba(34,197,94,.17),rgba(14,165,233,.10))}
html[data-theme=dark] .premium-menu-banner{color:#bbf7d0}
.premium-menu-banner>.ui-icon{width:21px;height:21px;color:#22c55e}
.premium-menu-banner strong,.premium-menu-banner small{display:block}.premium-menu-banner small{margin-top:2px;color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase}

.btn-close-modal{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #e2e8f0;border-radius:50%;color:#64748b;background:#f1f5f9;cursor:pointer;font-size:20px;line-height:1;transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease}
html[data-theme=dark] .btn-close-modal{border-color:rgba(255,255,255,.12);color:#cbd5e1;background:#1e293b}
.btn-close-modal:hover{border-color:rgba(239,68,68,.35);color:#ef4444;background:rgba(254,226,226,.9);transform:rotate(4deg)}
.panel-head-actions{display:flex;align-items:center;gap:9px}.panel-head-actions .panel-kicker{margin:0}
.sheet-drag-indicator{display:none}
.panel-backdrop{position:fixed;inset:0;z-index:980;border:0;background:rgba(15,23,42,.16);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.panel-backdrop.is-visible{opacity:1;pointer-events:auto}
.panel-backdrop[hidden]{display:none}

.filter-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.filter-title>div{min-width:0}
.filter-apply-btn{width:100%;min-height:46px;border:0;border-radius:13px;color:#fff;background:#10b981;box-shadow:0 10px 26px rgba(16,185,129,.28);font-weight:900;cursor:pointer}.filter-apply-btn:hover{background:#059669}
.quick-filter-bar.is-open{border-color:rgba(34,197,94,.75);box-shadow:0 0 0 3px rgba(34,197,94,.15),var(--shadow)}
.quick-filter-bar.is-open #filterToggle{color:#052e16;background:linear-gradient(135deg,var(--green),var(--green-2))}

.garage-modal{width:min(760px,calc(100vw - 28px));max-height:min(820px,calc(100vh - 28px));display:flex;flex-direction:column}
.garage-modal header>div:first-child{min-width:0}.garage-modal header .panel-kicker{margin-bottom:3px}.garage-modal-body{display:grid;gap:14px;padding:16px;overflow:auto;background:rgba(248,250,252,.86)}
html[data-theme=dark] .garage-modal-body{background:rgba(15,23,42,.38)}
.garage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px}.garage-toolbar p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.45}
.garage-add-toggle{flex:0 0 auto;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border:0;border-radius:12px;color:#052e16;background:linear-gradient(135deg,var(--green),var(--green-2));font-weight:900;cursor:pointer}.garage-add-toggle:disabled{opacity:.45;cursor:not-allowed}.garage-add-toggle .ui-icon{width:18px;height:18px}
.garage-add-form{display:grid;gap:13px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--glass-strong);box-shadow:0 4px 12px rgba(15,23,42,.05)}.garage-add-form[hidden]{display:none}
.garage-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.garage-soc-field strong{color:var(--text)}.garage-form-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.garage-status{padding:10px 12px;border:1px solid rgba(34,197,94,.25);border-radius:12px;color:#166534;background:rgba(220,252,231,.9);font-size:.82rem;font-weight:800}.garage-status.is-error{border-color:rgba(239,68,68,.3);color:#991b1b;background:rgba(254,226,226,.9)}html[data-theme=dark] .garage-status{color:#bbf7d0;background:rgba(20,83,45,.35)}html[data-theme=dark] .garage-status.is-error{color:#fecaca;background:rgba(127,29,29,.34)}
.garage-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.garage-car-card{display:grid;gap:13px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--glass-strong);box-shadow:0 4px 12px rgba(15,23,42,.05)}.garage-car-card.is-default{border-color:rgba(34,197,94,.5);box-shadow:0 0 0 2px rgba(34,197,94,.10)}
.garage-car-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0}.garage-car-heading>div{min-width:0}.garage-car-heading strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.garage-car-heading span{display:block;margin-top:4px;color:var(--muted);font-size:.76rem;line-height:1.4}
.garage-car-heading .garage-default-badge{flex:0 0 auto;margin:0;padding:5px 8px;border-radius:999px;color:#166534;background:rgba(34,197,94,.16);font-size:.66rem;font-weight:900;text-transform:uppercase}
.garage-car-actions{display:flex;gap:7px}.garage-car-actions button{min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:rgba(148,163,184,.10);font-weight:850;cursor:pointer}.garage-car-actions .garage-select-car{flex:1;color:#052e16;border-color:transparent;background:linear-gradient(135deg,var(--green),var(--green-2))}.garage-car-actions .garage-delete-car{width:38px;display:grid;place-items:center;padding:0;color:#dc2626}.garage-delete-car .ui-icon{width:18px;height:18px}
.settings-modal{width:min(440px,calc(100vw - 28px))}.settings-modal-body{display:grid;gap:16px;padding:17px}.settings-modal fieldset{margin:0;padding:0;border:0}.settings-modal legend{margin-bottom:8px;color:var(--muted);font-size:.72rem;font-weight:900;text-transform:uppercase}.settings-segment{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border:1px solid var(--line);border-radius:14px;background:rgba(148,163,184,.10)}.settings-segment label{position:relative}.settings-segment input{position:absolute;opacity:0}.settings-segment span{min-height:42px;display:grid;place-items:center;border-radius:10px;color:var(--muted);font-weight:850;cursor:pointer}.settings-segment input:checked+span{color:#052e16;background:linear-gradient(135deg,var(--green),var(--green-2))}
.mobile-panel-bar{display:none}
.mobile-nav-icon{position:relative;width:30px;height:24px;display:grid;place-items:center;color:var(--muted)}
.mobile-nav-label{display:block;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.15}
.mobile-nav-badge{position:absolute;z-index:2;top:-7px;right:-9px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid rgba(255,255,255,.96);border-radius:999px;color:#fff;background:#10b981;box-shadow:0 3px 8px rgba(5,150,105,.28);font-size:10px;font-weight:800;line-height:1;letter-spacing:0}
.mobile-nav-badge.is-soc{right:-16px;min-width:26px;padding:0 3px;font-size:9px}
.mobile-nav-badge[hidden]{display:none}
.mobile-panel-bar button.has-status .mobile-nav-icon{color:#10b981}
.mobile-panel-bar button.has-status .ui-icon{stroke-width:2.2}
html[data-theme=dark] .mobile-nav-badge{border-color:#1e293b}

/*
 * Mobile/tablet application layout. This intentionally depends only on the
 * viewport width: embedded mobile browsers can incorrectly report a fine
 * pointer and must still receive the same bottom-bar interface as signed-in
 * users in a regular browser.
 */
@media (max-width:1100px){
  .map-toolbar>.toolbar-search,.map-toolbar>.icon-button,.map-toolbar .brand-wordmark{display:none!important}.map-toolbar .brand-mini{display:flex!important;padding-right:6px}.map-toolbar{padding:7px!important}
  .user-control{z-index:1450}.user-control .select{display:block!important;width:58px!important;padding:0 7px!important}.user-menu-toggle{max-width:132px}.user-menu-name{max-width:65px}.user-dropdown{position:fixed;top:66px;right:10px;width:min(270px,calc(100vw - 20px))}
  .quick-filter-bar{display:none!important}.mobile-panel-bar{position:fixed;z-index:1450;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));height:62px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;border:1px solid var(--line);border-radius:18px;background:var(--glass-strong);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .mobile-panel-bar button{min-width:0;display:grid;place-items:center;align-content:center;gap:3px;border:1px solid transparent;border-radius:12px;color:var(--muted);background:transparent;font-size:.68rem;font-weight:850;cursor:pointer}.mobile-panel-bar .ui-icon{width:20px;height:20px}.mobile-panel-bar button.is-active{color:#065f46;border-color:rgba(16,185,129,.28);background:rgba(16,185,129,.13)}.mobile-panel-bar button.is-active .mobile-nav-icon{color:#10b981}.mobile-panel-bar button.is-active .mobile-nav-badge{border-color:#d1fae5}html[data-theme=dark] .mobile-panel-bar button.is-active{color:#a7f3d0;border-color:rgba(52,211,153,.32);background:rgba(16,185,129,.18)}html[data-theme=dark] .mobile-panel-bar button.is-active .mobile-nav-badge{border-color:#064e3b}
  .sheet-drag-indicator{width:40px;height:4px;display:block;flex:0 0 auto;margin:0 auto 5px;border-radius:2px;background:#cbd5e1}
  .app-shell,.map-canvas{height:100dvh;min-height:100dvh}
  .route-drawer,.vehicle-dock,.filter-popover{position:fixed!important;z-index:1400!important;top:auto!important;left:8px!important;right:8px!important;bottom:calc(80px + env(safe-area-inset-bottom))!important;width:auto!important;max-height:min(76dvh,680px)!important;margin:0!important;border-radius:20px!important;transform:translateY(0)!important;opacity:1!important;overflow:auto;transition:transform .3s ease,opacity .3s ease!important}
  .route-drawer.is-collapsed,.vehicle-dock.is-collapsed{display:flex!important;transform:translateY(calc(100% + 110px))!important;opacity:0!important;pointer-events:none!important}
  .vehicle-dock{display:flex;flex-direction:column;padding-top:10px}.vehicle-dock.is-collapsed .vehicle-expanded{display:grid}.vehicle-summary{display:none}.vehicle-expanded{display:grid;padding-top:0}
  .filter-popover[hidden]{display:grid!important;transform:translateY(calc(100% + 110px))!important;opacity:0!important;pointer-events:none!important}
  .panel-backdrop{z-index:1300}.garage-list{grid-template-columns:1fr}.garage-form-grid{grid-template-columns:1fr}.garage-toolbar{align-items:stretch;flex-direction:column}.garage-add-toggle{width:100%}
  .route-drawer .panel-head,.vehicle-dock .panel-head,.filter-popover .filter-title{position:sticky;top:0;z-index:2;padding-top:2px;background:inherit}
}
@media(max-width:520px){.user-menu-toggle{max-width:92px;padding-right:7px}.user-menu-name{display:none}.garage-modal{max-height:calc(100vh - 16px)}.garage-modal-body{padding:12px}.garage-form-actions{grid-template-columns:1fr}.settings-modal-body{padding:14px}}

/* Mobile map chrome and fixed drawer headers. */
.vehicle-panel-scroll{display:grid;gap:10px;min-width:0}

@media (max-width:1100px){
  /* Keep the EVSmartRoute identity visible independently of auth state. */
  .map-toolbar{
    z-index:1550!important;
    top:max(8px,env(safe-area-inset-top))!important;
    right:auto!important;
    left:8px!important;
    min-height:46px;
    padding:6px 8px!important;
    background:rgba(255,255,255,.95)!important;
    border-color:rgba(15,23,42,.12)!important;
    box-shadow:0 12px 30px rgba(15,23,42,.18)!important;
  }
  .map-toolbar .toolbar-brand-badge{height:34px;padding:0;border:0;background:transparent;box-shadow:none}
  .map-toolbar .brand-mini{
    max-width:102px;
    min-height:34px;
    display:flex!important;
    align-items:center;
    gap:7px;
    padding:0 5px 0 0!important;
    overflow:hidden;
    color:var(--text)!important;
    font-size:.88rem;
    white-space:nowrap;
  }
  .map-toolbar .brand-mini .brand-logo{display:block!important;flex:0 0 88px;width:88px;height:30px;object-fit:contain}
  .map-toolbar .brand-mini .brand-name{display:none!important}

  /* The account controls use the opposite side and no longer cover the logo. */
  .user-control{
    top:max(8px,env(safe-area-inset-top))!important;
    right:8px!important;
    left:auto!important;
    max-width:calc(100vw - 138px);
  }
  .user-dropdown{right:8px;left:auto}

  /* Only the drawer body scrolls; its identity and close action stay visible. */
  .route-drawer,.vehicle-dock,.filter-popover{
    padding:0!important;
    gap:0!important;
    max-height:min(76dvh,calc(100dvh - 150px),680px)!important;
    overflow:hidden!important;
  }
  .filter-popover{grid-template-rows:auto minmax(0,1fr) auto}
  .route-drawer>.sheet-drag-indicator,.vehicle-dock>.sheet-drag-indicator,.filter-popover>.sheet-drag-indicator{
    position:absolute;
    z-index:8;
    top:7px;
    left:50%;
    margin:0;
    transform:translateX(-50%);
  }
  .route-drawer>.panel-head,.vehicle-dock .panel-head,.filter-popover>.filter-title{
    position:relative!important;
    top:auto!important;
    z-index:7!important;
    flex:0 0 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:10px;
    min-height:84px;
    margin:0;
    padding:18px 14px 12px!important;
    border-bottom:1px solid var(--line);
    border-radius:20px 20px 0 0;
    background:var(--glass-strong)!important;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow:0 7px 18px rgba(15,23,42,.08);
  }
  .route-drawer>.panel-head>div,.vehicle-dock .panel-head>div:first-child,.filter-popover>.filter-title>div{min-width:0}
  .route-drawer>.panel-head h1,.vehicle-dock .panel-head h2,.filter-popover>.filter-title h2{
    margin:2px 0 0;
    color:var(--text);
    font-size:1.08rem;
    line-height:1.22;
    letter-spacing:0;
    overflow-wrap:normal;
  }
  .route-drawer>.panel-head p,.filter-popover>.filter-title p{
    display:-webkit-box;
    margin:5px 0 0;
    overflow:hidden;
    color:var(--muted);
    font-size:.76rem;
    line-height:1.35;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .route-drawer>.panel-head .btn-close-modal,.vehicle-dock .panel-head .btn-close-modal,.filter-popover>.filter-title .btn-close-modal{
    position:relative;
    z-index:9;
    align-self:start;
    justify-self:end;
    flex:0 0 34px;
    width:34px;
    height:34px;
  }
  .route-drawer>.panel-sections{
    min-height:0;
    flex:1 1 auto;
    padding:12px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .filter-panel-scroll{
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
  }
  .filter-panel-scroll .operator-list{
    flex:0 0 auto;
    max-height:none;
    overflow:visible;
  }
  .filter-panel-scroll .map-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-popover>.filter-apply-btn{
    position:relative;
    z-index:8;
    width:calc(100% - 24px);
    min-height:48px;
    margin:0 12px 12px;
    flex:0 0 auto;
  }
  .vehicle-expanded{
    min-height:0;
    flex:1 1 auto;
    padding:0!important;
    overflow:hidden;
  }
  .vehicle-expanded>.section{
    min-height:0;
    height:100%;
    display:flex!important;
    flex-direction:column;
    gap:0!important;
    padding:0!important;
    overflow:hidden;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .vehicle-panel-scroll{
    min-height:0;
    flex:1 1 auto;
    padding:12px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .vehicle-dock .panel-head-actions{align-items:flex-start;gap:7px}
  .vehicle-dock .panel-head-actions>.panel-kicker{padding-top:9px;white-space:nowrap}
}

/* Short mobile screens use the full safe viewport so provider choices remain reachable. */
@media (max-width:1100px) and (max-height:680px){
  .filter-popover{
    z-index:1600!important;
    top:max(8px,env(safe-area-inset-top))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    height:auto!important;
    max-height:none!important;
  }
  .filter-popover>.filter-title{
    min-height:74px;
    padding-top:17px!important;
    padding-bottom:10px!important;
  }
  .filter-popover>.filter-title p{-webkit-line-clamp:1}
  .filter-panel-scroll{padding-top:10px}
}

@media (max-width:380px){
  .map-toolbar .brand-mini{max-width:88px;padding:0!important}
  .map-toolbar .brand-mini .brand-logo{width:82px;height:28px}
  .user-control{max-width:calc(100vw - 118px)}
}