/*
  Small laptop safety layer.
  Keeps the left menu separate and makes wide sections scroll inside their own
  panels, so right-side buttons never disappear off screen.
*/
@media (max-width:1360px) and (min-width:761px){
  html,body{
    overflow:auto!important;
    min-width:0!important;
    min-height:100%!important;
  }
  aside{
    width:132px!important;
    height:100dvh!important;
    padding:14px 10px 18px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .brand{justify-content:center!important;margin:0 0 18px!important}
  .brand img{width:42px!important;height:42px!important}
  .brand-copy{display:none!important}
  nav{gap:8px!important}
  nav button,.report-link{
    justify-content:center!important;
    min-height:48px!important;
    padding:10px 8px!important;
    font-size:0!important;
  }
  nav button .nav-icon,.report-link .nav-icon{
    width:27px!important;
    height:27px!important;
    margin:0!important;
  }
  .user{
    display:grid!important;
    margin-top:auto!important;
    padding:10px 0 0!important;
    gap:5px!important;
    border-top:1px solid #333!important;
  }
  .user b,.user small{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:10px!important;
    line-height:1.2!important;
  }
  .user button{
    width:100%!important;
    min-height:34px!important;
    font-size:11px!important;
    padding:7px 4px!important;
  }
  main{
    margin-left:132px!important;
    width:calc(100vw - 132px)!important;
    max-width:calc(100vw - 132px)!important;
    padding:24px 22px!important;
    overflow:auto!important;
    min-height:100vh!important;
  }
  header{gap:14px!important}
  h1{font-size:28px!important}
  .panel{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:stable both-edges!important;
  }
  table{
    min-width:1180px!important;
    width:100%!important;
    table-layout:fixed!important;
  }
  th,td{padding:12px 14px!important}
  th:last-child,td:last-child{
    position:sticky!important;
    right:0!important;
    z-index:3!important;
    background:#fff!important;
    box-shadow:-10px 0 16px #ffffffcc!important;
  }
  thead th:last-child{z-index:5!important;background:#fafbfc!important}
  th:last-child,td:last-child{
    width:150px!important;
    min-width:150px!important;
    max-width:150px!important;
  }
  #tableHead th:nth-child(3),tbody td:nth-child(3){
    max-width:300px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    word-break:break-word!important;
  }
  .driver-actions{
    width:100%!important;
    min-width:0!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
  }
  .driver-actions .open,.driver-actions button{
    max-width:124px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .driver-actions button,.driver-waybill,.open{white-space:nowrap!important}
  .toolbar{min-width:860px!important}
  .table-pagination{
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  dialog,.wide,#staffDialog{
    max-width:calc(100vw - 120px)!important;
    max-height:calc(100vh - 30px)!important;
    overflow:auto!important;
  }
}

@media (max-width:1180px) and (min-width:761px){
  .panel{max-height:calc(100vh - 210px)!important}
  table{min-width:1180px!important}
  .toolbar{min-width:980px!important}
  .driver-actions{min-width:0!important}
}

@media (max-height:760px) and (min-width:761px){
  aside{padding-top:10px!important;padding-bottom:12px!important}
  .brand{margin-bottom:10px!important}
  nav{gap:5px!important}
  nav button,.report-link{min-height:40px!important;padding:7px 6px!important}
  nav button .nav-icon,.report-link .nav-icon{width:22px!important;height:22px!important}
  .user{margin-top:auto!important}
  .user button{min-height:32px!important}
  main{padding-top:18px!important;padding-bottom:18px!important}
  .panel{max-height:calc(100vh - 175px)!important}
}