/* Narrow screens: the sidebar becomes a top bar with a scrolling menu; grids stack. */
@media(max-width:1200px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .knowledge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .maintenance-grid{grid-template-columns:280px minmax(0,1fr);gap:18px}
}
@media(max-width:1000px){
  .app-shell{display:block}
  .sidebar{position:relative;height:auto;padding:12px 16px;gap:10px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .sidebar .wordmark{padding:0}
  .sidebar nav{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:2px;scrollbar-width:thin}
  .nav-item{flex-shrink:0;height:34px;font-size:13px}
  .sidebar-bottom{display:none}
  .topbar{padding:0 16px;height:52px}
  main{padding:20px 16px 0}
  .maintenance-grid{grid-template-columns:minmax(0,1fr)}
  .maintenance-sidebar{grid-template-columns:minmax(0,1fr)}
  .maintenance-note{display:none}
  .draft-panel textarea{min-height:480px}
}
@media(max-width:760px){
  h1{font-size:22px}
  .stats{grid-template-columns:minmax(0,1fr);gap:12px}
  .stat{padding:16px}
  .stat-number{font-size:26px}
  .page-heading{margin-bottom:18px}
  .page-heading .button{height:34px}
  .panel-heading{padding:14px 16px}
  .toolbar{padding:12px 16px}
  .toolbar select{flex:1;max-width:none;min-width:0}
  .toolbar select:first-of-type{margin-left:0}
  .search-field{flex-basis:100%;max-width:none}
  th:first-child,td:first-child{padding-left:16px}th:last-child,td:last-child{padding-right:16px}
  .table-footer{padding:12px 16px}
  .main-footer{flex-wrap:wrap}
  .knowledge-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .customer-line{flex-wrap:wrap;gap:10px}
  .form-panel{padding:20px;display:block}
  .draft-panel .panel-heading{padding:20px}
  .draft-panel textarea{padding:20px;min-height:520px;font-size:12px}
  .draft-footer{padding:16px;flex-wrap:wrap;gap:12px}.draft-footer>.button{width:100%}
  dialog{padding:20px}
  .login-brand>span{display:none}.login-card h1{font-size:36px}.login-card{padding:40px 0}.login-shell{padding:28px 7vw}
  .toast{right:16px;bottom:16px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}