/* Responsive shell: short notebook screens, the off-canvas drawer below 961px and phones. Login breakpoints live in styles.css. */
.app-body,.dashboard-main,.page-intro>div,.intro-actions,.login-form-wrap,.login-panel{min-width:0}
.vehicle-info h3,.vehicle-specs{white-space:normal}

/* Shorter screens (notebooks): the whole menu stays visible without scrolling. */
@media (min-width:961px) and (max-height:860px){
  .sidebar{padding:16px 10px 10px}
  .sidebar>.brand-logo{margin:0 12px 14px;min-height:36px}
  .sidebar .brand-lockup{width:150px}
  .workspace-switch{padding:9px 10px;margin-bottom:12px}
  .nav-item{min-height:38px}
  .nav-secondary{padding:6px 0}
  .nav-secondary .nav-item{min-height:34px}
  .sidebar-bottom{padding-top:8px}
  .sidebar-profile{padding:8px}
  .sidebar-profile .avatar{width:32px;height:32px;font-size:11px}
  .powered{margin-top:6px;font-size:10px}
}
@media (min-width:961px) and (max-height:760px){
  .nav-item{min-height:35px;font-size:13px}
  .nav-secondary .nav-item{min-height:32px}
  .powered{display:none}
  .topbar{height:56px}
  .dashboard-main{padding-top:22px}
  .page-intro{margin-bottom:20px}
  .page-intro h1{font-size:30px}
  .kpi{min-height:132px;padding:16px 18px}
  .chart-panel{min-height:300px}
  .chart-area{min-height:200px}
}
@media (min-width:961px) and (max-height:640px){.nav-item{min-height:32px}.nav-secondary .nav-item{min-height:30px}.workspace-switch small{display:none}.sidebar>.brand-logo{margin-bottom:10px}}

/* A narrow screen uses a drawer instead of squeezing content beside the sidebar. */
@media (max-width:960px){
  :root{--sidebar-width:272px}
  .app-shell{display:block}
  .sidebar{transform:translateX(-102%);transition:transform .42s var(--ease-spring),box-shadow .42s;border-radius:0 18px 18px 0;padding-top:22px;z-index:32}
  .app-shell.drawer-open .sidebar{transform:none;box-shadow:24px 0 60px #0006}
  .drawer-overlay{display:block;position:fixed;inset:0;z-index:31;background:#0e151cb3;backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  .app-shell.drawer-open .drawer-overlay{opacity:1;visibility:visible;transition:opacity .3s ease}
  body:has(.app-shell.drawer-open){overflow:hidden}
  .nav-item{min-height:44px}
  .mobile-menu{display:flex;flex-shrink:0;margin-left:-8px;color:var(--ink-2)}
  .topbar{position:sticky;top:0;height:60px;padding:0 16px;gap:10px;background:#ffffffeb;backdrop-filter:saturate(1.6) blur(12px)}
  .breadcrumb{display:none}
  .search-area{max-width:none}
  .top-actions{margin-left:0;gap:6px}
  .acting-banner{padding:9px 16px;flex-wrap:wrap;gap:8px 12px}
  .acting-banner>span{flex-basis:calc(100% - 30px)}
  .acting-banner button{margin-left:29px}
}
@media (max-width:960px) and (max-height:700px){
  .sidebar{padding:14px 10px 10px}
  .sidebar>.brand-logo{margin:0 12px 12px}
  .workspace-switch{padding:9px 10px;margin-bottom:10px}
  .nav-item{min-height:38px}
  .nav-secondary .nav-item{min-height:34px}
  .sidebar-profile{padding:8px}
  .powered{display:none}
}

/* Phones: popovers become sheets under the top bar and inputs keep 16px to avoid zoom on focus. */
@media (max-width:600px){
  .top-popover{position:fixed;top:66px;left:12px;right:12px;min-width:0;max-width:none;transform-origin:top center}
  .profile-popover{max-height:calc(100dvh - 90px)}
  .search-results{position:fixed;top:66px;left:12px;right:12px}
  .global-search input,.input-shell input{font-size:16px}
}
@media (max-width:480px){
  .topbar{padding:0 12px;gap:8px}
  .global-search{padding:0 10px;gap:8px}
  .top-avatar{width:34px;height:34px}
  .notification-btn{width:36px}
}