/* Shared mobile density. Desktop and map geometry keep their module styles. */
#mobile-nav-toggle, #mobile-nav-backdrop, #mobile-nav-close {display:none;}
@media (max-width:700px) {
  body {font-size:13px;}
  #app-shell {min-height:100dvh;}
  #app-shell .shell-workspace {width:100%;}
  #app-shell #app-topbar {padding:10px 10px 0;margin-bottom:8px;gap:8px;flex-wrap:wrap;}
  #app-topbar > div:first-of-type {flex:1;min-width:0;}
  #app-shell #app-topbar h1 {font-size:18px;line-height:24px;margin:0;}
  #app-shell #app-topbar .muted {font-size:11px;line-height:16px;margin:3px 0 0;}
  #app-shell #current-user {font-size:11px;margin-left:auto;}
  #mobile-nav-toggle {display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;background:#fff;color:#334155;border:1px solid #cbd5e1;font-size:20px;}
  #app-shell #sidebar {position:fixed;inset:0 auto 0 0;z-index:1900;width:240px;max-width:calc(100vw - 48px);height:100dvh;min-height:0;padding:12px;gap:12px;transform:translateX(-100%);visibility:hidden;transition:transform .18s ease,visibility .18s;overflow-y:auto;}
  #app-shell.mobile-nav-open #sidebar {transform:translateX(0);visibility:visible;}
  #app-shell #sidebar .sidebar-nav {flex:1 0 auto;}
  #app-shell #sidebar .sidebar-brand {display:flex;}
  #app-shell #sidebar .sidebar-header {justify-content:space-between;}
  #app-shell #sidebar .sidebar-label,#app-shell #sidebar .sidebar-group-arrow {display:block;}
  #app-shell #sidebar .sidebar-item {justify-content:flex-start;min-height:38px;padding:6px 10px;}
  #app-shell #sidebar .sidebar-submenu {position:static;margin:3px 0 5px 28px;padding-left:8px;width:auto;box-shadow:none;}
  #app-shell #sidebar .sidebar-group.open .sidebar-submenu {display:flex!important;}
  #app-shell #sidebar-toggle {display:none;}
  #mobile-nav-close {display:block;flex:none;width:34px;height:34px;padding:0;background:#f1f5f9;color:#334155;font-size:22px;}
  #app-shell.mobile-nav-open #mobile-nav-backdrop {display:block;position:fixed;inset:0;z-index:1890;width:100%;height:100dvh;padding:0;border:0;border-radius:0;background:#0f172a66;}
  .sidebar-floating-tooltip, #app-shell #sidebar .sidebar-item::after {display:none!important;}
  #app-shell #main-content .content {padding:0 10px 10px;}
  #app-shell #main-content :is(.card,.panel) {padding:10px;border-radius:9px;}
  #app-shell #main-content :is(.cards,.kpis,.volume-kpis) {gap:8px;margin-bottom:10px;}
  #app-shell #main-content :is(.panel,.meeting-panel) {margin-bottom:10px;}
  #app-shell #main-content :is(h2,h3) {font-size:15px;}
  #app-shell #main-content :is(.button-row,.form-actions,.modal-actions) {flex-wrap:wrap;gap:6px;margin:10px 0;}
  #app-shell #main-content :is(button,.button-link,.btn):not(.leaflet-container *) {
    box-sizing:border-box;min-height:34px;max-width:100%;padding:6px 9px;font-size:12px;line-height:18px;border-radius:6px;
  }
  #app-shell #main-content :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.leaflet-container *) {
    box-sizing:border-box;min-width:0;max-width:100%;min-height:36px;padding:6px 8px;font-size:16px;line-height:22px;border-radius:6px;
  }
  #app-shell #main-content :is(input,select):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.leaflet-container *) {height:36px;}
  #app-shell #main-content input:is([type=checkbox],[type=radio]) {width:16px;height:16px;min-width:16px;flex:0 0 16px;margin:0;padding:0;}
  #app-shell #main-content label:has(> input:is([type=checkbox],[type=radio])) {min-height:32px;align-items:center;gap:6px;}
  #app-shell #main-content :is(button,input,select,textarea,summary):focus-visible {outline:2px solid #2563eb;outline-offset:2px;}
  #app-shell #main-content :is(.address-toolbar,.user-toolbar,.batch-toolbar,.review-filter-bar,.log-filters,.special-hours-toolbar,.map-filter-row,.volume-filters,.dispatch-toolbar,.dispatch-history,.route-toolbar) {gap:6px;flex-wrap:wrap;margin-bottom:8px;min-width:0;}
  #app-shell #main-content :is(.search-group,.tab-buttons,.related-alias-actions) {gap:6px;flex-wrap:wrap;min-width:0;}
  #app-shell #main-content .search-group input {width:100%;min-width:0;flex:1 1 160px;margin:0;}
  #app-shell #main-content :is(.table-wrapper,.retention-table-scroll,.open-needs-scroll) {max-width:100%;overflow:auto;overscroll-behavior-x:contain;}
  #app-shell #main-content :is(th,td) {padding:7px 8px;font-size:12px;}
  #app-shell #main-content .pagination {flex-wrap:wrap;gap:6px;padding-top:8px;font-size:12px;}
  #app-shell #main-content .modal {padding:8px;}
  #app-shell #main-content :is(.modal-card,dialog) {box-sizing:border-box;width:calc(100vw - 16px);min-width:0;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px;overflow:auto;}
  #app-shell #main-content .modal-header {gap:8px;margin-bottom:10px;}
  #app-shell #main-content .modal-header h2 {margin:0;overflow-wrap:anywhere;}
  #app-shell #main-content .modal-header button {flex:none;min-width:34px;}
  #app-shell #main-content .filter-panel {position:fixed;left:12px;right:12px;top: min(180px,25dvh);width:auto;min-width:0;max-width:calc(100vw - 24px);max-height:60dvh;padding:10px;z-index:1200;gap:4px;}
  #app-shell #main-content .filter-panel label {padding:4px 6px;}
  .app-reminder {width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:16px;}
  .app-reminder h2 {font-size:17px;margin-bottom:10px;}
  .app-reminder p {font-size:13px;margin-bottom:16px;}
  .app-reminder button {min-height:36px;padding:7px 12px;font-size:13px;}
  /* Short filters share a row; long searches retain full width. */
  #app-shell #appointment-filters {gap:8px;max-height:32dvh;overflow-y:auto;}
  #app-shell #appointment-filters > label {width:auto;min-width:0;flex:1 1 calc(50% - 8px);gap:4px;font-size:12px;}
  #app-shell #appointment-filters > .appointment-search {flex-basis:100%;}
  #app-shell #appointment-filters > button {height:34px;}
  #app-shell #appointment-kpis {gap:6px;margin-bottom:8px;}
  #app-shell #appointment-kpis .card {padding:8px 5px;}
  #app-shell #appointment-kpis strong {font-size:18px;margin-top:3px;}
  #app-shell #main-content .appointment-page .appointment-list-panel {margin-bottom:0;}
  #app-shell #main-content .volume-filters label {flex:1 1 calc(50% - 8px);min-width:0;font-size:12px;}
  #app-shell #main-content .volume-filters :is(input,select) {width:100%;margin:4px 0 0;}
  #app-shell #main-content .map-filter-field {flex:1 1 calc(50% - 8px);min-width:0;flex-direction:column;align-items:stretch;gap:4px;font-size:12px;}
  #app-shell #main-content .map-filter-field span {flex:auto;}
  #app-shell #main-content .map-filter-field :is(input,select) {width:100%;min-width:0;}
  #app-shell #main-content .map-page-content {overflow-y:auto;}
  #app-shell #main-content .map-container-panel {flex:1 0 320px;min-height:320px;}
  #app-shell #main-content .heat-shortcuts {gap:6px;margin-top:8px;}
  #app-shell #main-content .route-toolbar label {max-width:100%;white-space:normal;}
  #app-shell #main-content #route-search {min-width:0;flex:1 1 100%;max-width:none;}
  #app-shell #main-content :is(.dispatch-toolbar,.dispatch-history) label {flex:1 1 140px;min-width:0;flex-direction:column;align-items:stretch;gap:4px;}
  #app-shell #main-content :is(#dg-template,#dg-name,#dg-history) {width:100%;max-width:100%;}
  #app-shell #main-content .dispatch-page {gap:8px;}
  #app-shell #main-content .dispatch-week {gap:6px;}
  #app-shell #main-content .dispatch-week label {padding:6px;min-width:0;}
  #app-shell #main-content .dispatch-map-actions {gap:6px;}
  #app-shell #main-content :is(.customer-visits,#retention-app) {padding:0 10px 12px;}
  #app-shell #main-content .customer-visits .card {margin-bottom:10px;}
  #app-shell #main-content .customer-visits :is(.nav,.profile-toolbar) {gap:6px;margin-bottom:10px;}
  #app-shell #main-content .customer-visits .needs-filter-row {gap:8px;margin-top:8px;}
  #app-shell #main-content .customer-visits .fgrid {gap:10px;}
  #app-shell #main-content #view-form .field-heading {min-height:32px;}
  #app-shell #main-content #retention-app .filter-bar {gap:6px;}
  #app-shell #main-content .meeting-grid {grid-template-columns:minmax(0,1fr);}
  #app-shell #main-content :is(.import-cards,.volume-kpis) {grid-template-columns:repeat(2,minmax(0,1fr));}
  #app-shell #main-content .import-cards .card p {font-size:22px;}
  .login-body {padding:16px;}
  .login-card {width:100%;max-width:380px;padding:22px;}
  .login-card h1 {font-size:22px;}
  .login-card input {font-size:16px;padding:8px 10px;min-height:38px;margin:5px 0 12px;}
  .login-card button {font-size:14px;min-height:38px;padding:8px 12px;}
}
@media (prefers-reduced-motion:reduce) {#app-shell #sidebar {transition:none;}}