:root{
  --text:#2b2a28;--surface:#fff;--surface-muted:#faf9f7;--surface-soft:#f3f1ee;
  --surface-accent:#fff4e8;--header:#fff;--input:#fff;--line-strong:#d5d1cc;
  --overlay:rgba(31,29,27,.48);--app-shadow:0 8px 28px rgba(43,42,40,.10)
}
#menu{display:none}
.nav-close,.nav-overlay{display:none}
html,body{max-width:100%;overflow-x:hidden}
main,#content,.panel,.card,.table-wrap{min-width:0}

:root[data-theme="dark"]{
  --text:#f2f0ed;--surface:#282725;--surface-muted:#302f2d;--surface-soft:#353330;
  --surface-accent:#3a3028;--header:#282725;--input:#201f1e;--line-strong:#5a5650;
  --overlay:rgba(8,8,8,.68);--app-shadow:0 10px 32px rgba(0,0,0,.28)
}
:root[data-theme="dark"] header h2,
:root[data-theme="dark"] .panel h3,
:root[data-theme="dark"] .card strong,
:root[data-theme="dark"] #menu{color:var(--ink)}
:root[data-theme="dark"] .preloader{background:rgba(29,28,27,.90)}
:root[data-theme="dark"] .login{background:linear-gradient(135deg,#252321,#191817)}
:root[data-theme="dark"] .login-card{background:var(--surface);border-color:var(--line);box-shadow:0 30px 80px rgba(0,0,0,.38)}
:root[data-theme="dark"] .login-card .login-slogan,
:root[data-theme="dark"] .login-card .login-remember,
:root[data-theme="dark"] .login-privacy{color:var(--muted)}
:root[data-theme="dark"] .login-privacy{border-color:var(--line)}
:root[data-theme="dark"] .ui-icon:not(.ui-icon-online):not(.ui-icon-offline),
:root[data-theme="dark"] .user-avatar{background:var(--surface-accent);color:#f3a054}
:root[data-theme="dark"] .close:hover{background:var(--surface-soft);color:var(--ink)}
:root[data-theme="dark"] .badge.online{background:#163c31;color:#6fd8b0}
:root[data-theme="dark"] .badge.offline{background:#472a28;color:#f0a49e}
:root[data-theme="dark"] .danger-link{background:#472a28;color:#f0a49e}

:root[data-theme="dark"] .notification-bell,
:root[data-theme="dark"] .notification-popover,
:root[data-theme="dark"] .notification-item,
:root[data-theme="dark"] .notification-toast,
:root[data-theme="dark"] .notification-template-card{background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .notification-item.unread,
:root[data-theme="dark"] .notification-rule-help,
:root[data-theme="dark"] .notification-preview-popup{background:var(--surface-accent);color:var(--ink)}
:root[data-theme="dark"] .notification-item-body strong,
:root[data-theme="dark"] .notification-vehicle,
:root[data-theme="dark"] .notification-toast-head{color:var(--ink)}
:root[data-theme="dark"] .notification-schedule-row,
:root[data-theme="dark"] .notification-editor-toolbar,
:root[data-theme="dark"] .notification-channel{background:var(--surface-muted);color:var(--muted);border-color:var(--line)}
:root[data-theme="dark"] .notification-editor-toolbar button{background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .notification-html-editor{background:var(--input);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .notification-variable-list button{background:var(--surface-accent);color:#f3a054;border-color:#76502f}
:root[data-theme="dark"] .notification-preview-frame{border-color:var(--line)}

:root[data-theme="dark"] .device-fields input,
:root[data-theme="dark"] .device-fields select,
:root[data-theme="dark"] .upload-inline,
:root[data-theme="dark"] .vehicle-image-upload,
:root[data-theme="dark"] .device-subtabs button{background:var(--input);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .device-card-section,
:root[data-theme="dark"] .command-layout,
:root[data-theme="dark"] .command-layout>aside,
:root[data-theme="dark"] .command-layout>aside button{border-color:var(--line)}
:root[data-theme="dark"] .device-card-section h3,
:root[data-theme="dark"] .device-simple-panel h3,
:root[data-theme="dark"] .device-icon-field>span,
:root[data-theme="dark"] .vehicle-image-field>span,
:root[data-theme="dark"] .command-layout>aside h4{color:var(--ink)}
:root[data-theme="dark"] .reports-warning{background:#3d3523;color:#e6cd82}

:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip,
:root[data-theme="dark"] .leaflet-control-layers,
:root[data-theme="dark"] .leaflet-control-attribution,
:root[data-theme="dark"] .leaflet-bar a,
:root[data-theme="dark"] .leaflet-control-zoom a{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
:root[data-theme="dark"] .leaflet-bar a:hover,
:root[data-theme="dark"] .leaflet-control-zoom a:hover{background:var(--surface-accent)!important;color:#f3a054!important}
:root[data-theme="dark"] .leaflet-control-attribution a{color:#f3a054!important}

@media(max-width:1024px){
  .shell{display:block;min-height:100dvh}
  main{width:100%;min-height:100dvh}
  .shell>aside{display:flex;position:fixed;z-index:10000;top:0;bottom:0;left:0;width:min(80vw,320px);max-width:320px;height:100dvh;overflow:hidden;transform:translateX(-104%)!important;visibility:hidden!important;pointer-events:none;box-shadow:18px 0 42px rgba(43,42,40,.20);transition:transform .24s ease,visibility .24s ease}
  body.menu-open{overflow:hidden;touch-action:none}
  body.menu-open .shell>aside{display:flex;transform:translateX(0)!important;visibility:visible!important;pointer-events:auto}
  .nav-overlay{display:block;position:fixed;z-index:9990;top:0;right:0;bottom:0;left:min(80vw,320px);width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:var(--overlay);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s ease}
  body.menu-open .nav-overlay{opacity:1;visibility:visible;pointer-events:auto}
  .nav-close{display:grid;position:absolute;z-index:2;top:10px;right:10px;width:42px;height:42px;padding:0;place-items:center;background:transparent;color:#625b55;font-size:30px;line-height:1}
  .nav-close:hover,.nav-close:focus-visible{background:var(--sidebar-hover);color:var(--orange-dark)}
  .brand{flex:0 0 82px;height:82px;padding:10px 54px 10px 20px}
  .brand-logo{display:block!important;width:100%;max-width:190px;height:52px}
  .brand-icon{display:none!important}
  nav{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain;padding:12px 10px}
  nav button{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:12px;min-height:48px;padding:10px 14px;font-size:15px}
  nav button span{display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  nav button .nav-icon{width:21px;height:21px}
  .aside-foot{display:block!important;flex:0 0 auto;margin-top:0;padding:11px 12px;font-size:10px;line-height:1.35}
  .aside-foot small{gap:1px}
  header{position:sticky;z-index:700;top:0;height:64px;padding:0 14px;background:var(--header)}
  #menu{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;font-size:23px}
  .page-heading{min-width:0;margin:0 auto 0 8px;gap:7px}
  .page-heading-logo{width:23px;height:23px}
  header h2{min-width:0;margin:0;overflow:hidden;font-size:19px;text-overflow:ellipsis;white-space:nowrap}
  .header-actions{gap:8px}
  .live{display:none!important}
  #content{width:100%;padding:16px}
  dialog{width:min(680px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:20px}
  .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  table{min-width:max-content}
  .leaflet-control-container{position:relative;z-index:400}
}

@media(max-width:760px){
  #content{padding:12px}
  header{height:60px;padding:0 9px}
  header h2{font-size:17px}
  .page-heading-logo{width:21px;height:21px}
  .header-actions{gap:4px}
  .notification-bell,.user-menu-button{display:grid;place-items:center;width:44px;height:44px;padding:0}
  .user-menu-button>span:nth-child(2),.user-menu-button>i{display:none}
  .user-menu-popover{position:fixed;top:58px;right:8px;width:min(230px,calc(100vw - 16px));z-index:1500}
  .notification-popover{position:fixed!important;top:58px!important;right:8px!important;width:calc(100vw - 16px)!important;max-height:calc(100dvh - 70px)!important}
  .panel,.card,.db-panel,.db-summary-card,.settings-card{padding:16px}
  .panel-head{align-items:flex-start;flex-wrap:wrap}
  .panel-head .client-toolbar,.device-toolbar,.row-actions,.form-actions{flex-wrap:wrap}
  .form-actions{position:sticky;bottom:0;padding:10px 0;background:var(--surface)}
  input,select,textarea{min-height:44px;font-size:16px}
  .client-toolbar{width:100%;align-items:stretch;flex-direction:column}
  .client-toolbar button,.device-toolbar button{min-height:44px}
  dialog.client-modal,.notification-rule-dialog,.dashboard-widget-modal{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:14px}
  .device-card-overlay{height:100dvh}
  .device-card-header h2{font-size:18px}
  .device-card-tabs{scrollbar-width:thin}
  .device-card-tabs button{min-height:46px}
  .device-card-footer{min-height:64px;overflow-x:auto}
  .device-card-footer button{min-width:max-content;min-height:44px}
  .settings-footer{bottom:6px;flex-wrap:wrap}
  .settings-footer button{min-height:44px}
  #notification-toasts{top:68px;right:8px;width:calc(100vw - 16px)}
}

@media(max-width:430px){
  .shell>aside{width:min(80vw,320px)}
  .nav-overlay{left:min(80vw,320px)}
  .brand{height:76px;flex-basis:76px;padding:9px 17px}
  .brand-logo{max-width:178px;height:48px}
  nav{padding:9px 8px}
  nav button{min-height:46px;padding:9px 12px}
  .aside-foot{padding:8px 10px}
  .db-summary-title,.db-panel-head h3{font-size:15px}
  .db-activity-item{padding:12px 10px}
  .db-activity-item strong{font-size:21px}
}

@media(prefers-reduced-motion:reduce){aside,.nav-overlay{transition:none}}
/* Module surfaces that must follow the selected theme */
:root[data-theme="dark"] .wg-panel-head>button,
:root[data-theme="dark"] .wg-monitor-panel>footer,
:root[data-theme="dark"] .wg-panel-open,
:root[data-theme="dark"] .wg-monitor-search select,
:root[data-theme="dark"] .history-summary header button,
:root[data-theme="dark"] .history-toolbar select,
:root[data-theme="dark"] .history-toolbar input,
:root[data-theme="dark"] .history-error,
:root[data-theme="dark"] .history-player>select{background:var(--surface-soft);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .wg-monitor-stats,
:root[data-theme="dark"] .wg-device-list,
:root[data-theme="dark"] .wg-monitor-panel>footer,
:root[data-theme="dark"] .wg-selected-actions,
:root[data-theme="dark"] .history-summary-grid,
:root[data-theme="dark"] .history-stop-list{border-color:var(--line)}
:root[data-theme="dark"] .wg-monitor-stats button,
:root[data-theme="dark"] .wg-device-row,
:root[data-theme="dark"] .wg-selected-actions button,
:root[data-theme="dark"] .history-stop-list button{color:var(--ink)}
:root[data-theme="dark"] .wg-device-row:hover,
:root[data-theme="dark"] .wg-device-row.selected,
:root[data-theme="dark"] .wg-monitor-stats button:hover,
:root[data-theme="dark"] .wg-monitor-stats button.active{background:var(--surface-accent)}
:root[data-theme="dark"] .settings-tabs,
:root[data-theme="dark"] .settings-card-head,
:root[data-theme="dark"] .settings-section{border-color:var(--line)}

@media(max-width:760px){
  .wg-monitor-content,.history-content{height:calc(100dvh - 60px)!important}
  .wg-monitor-panel{max-width:calc(100vw - 16px)}
  .wg-selected-device{max-width:calc(100vw - 16px)}
  .history-toolbar{max-height:184px;overflow-y:auto}
  .history-range{display:flex;min-width:0;align-items:center;gap:4px}
  .history-range input{min-width:0}
  .history-presets{display:flex;min-width:0;-webkit-overflow-scrolling:touch}
  .history-summary{top:196px}
  .settings-tabs,.device-subtabs{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .settings-tabs button,.device-subtabs button{flex:0 0 auto;min-height:44px}
  .reports-export{display:flex;flex-wrap:wrap}
  .reports-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .notification-schedule-row{min-width:0}
  .notification-schedule-row>*{min-width:0}
}
@media(max-width:430px){
  .history-range{display:grid;grid-template-columns:1fr auto 1fr}
  .history-range input{width:100%}
  .history-summary{top:202px}
  .notification-schedule-row{grid-template-columns:1fr}
  .reports-meta,.reports-summary{grid-template-columns:1fr}
  .telemetry-grid{grid-template-columns:1fr}
  .db-activity-grid{grid-template-columns:1fr 1fr}
  .db-last-route-summary{grid-template-columns:1fr}
}

/* Shared compact secondary navigation on phones. */
@media(max-width:760px){
  .billing-tabs,.notification-page-tabs,.settings-tabs,.vehicle-list-tabs{box-sizing:border-box;width:100%;max-width:100%;gap:2px;padding:0 5px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .billing-tabs::-webkit-scrollbar,.notification-page-tabs::-webkit-scrollbar,.settings-tabs::-webkit-scrollbar,.vehicle-list-tabs::-webkit-scrollbar{display:none}
  .billing-tabs button,.notification-page-tabs button,.settings-tabs button,.vehicle-list-tabs button{flex:0 0 auto;min-height:46px;padding:12px 13px;border-left:0!important;font-size:13px;white-space:nowrap}
}

/* Tabs never use the sidebar active border. */
.billing-tabs button,.notification-page-tabs button,.settings-tabs button,.settings-cms-tabs button,.vehicle-list-tabs button,.device-subtabs button,.driver-tabs button,.help-topic-tabs button{border-left:0!important}