/* All layout overrides are confined to phones and small tablets. */
#mobile-menu-toggle{display:none}
#mobile-menu:not([open]){display:none}
@media(max-width:760px){
  html{--ui-scale:1;--ui-viewport-height:100dvh}
  body{min-width:0;-webkit-text-size-adjust:100%}
  body.mobile-menu-open{overflow:hidden}
  #topbar{gap:10px;padding:10px 14px;align-items:center}
  #topbar strong{font-size:15px;letter-spacing:0;flex:1}
  body:has(#app-layout.with-sidebar) #mobile-menu-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--color-divider);background:var(--color-bg);color:var(--color-text);font-size:22px;cursor:pointer}
  #topbar #site-picker{flex-basis:100%;display:flex}
  #topbar #site-picker .cs{flex:none}
  #topbar #site-select{flex:1;min-width:0}
  #mobile-menu-account{display:grid;gap:12px;padding:16px 0;border-bottom:1px solid var(--color-divider)}
  #mobile-menu-account #organization-picker{display:grid;gap:6px;font-size:12px}
  #mobile-menu-account .input{width:100%}
  #mobile-menu-account .session-controls{margin:0;justify-content:flex-start}
  #mobile-menu-account #business-clock{flex-basis:100%}
  #site-picker,#organization-picker{flex:1 1 calc(50% - 10px);display:grid;gap:4px;min-width:0;font-size:11px}
  #topbar :is(#site-select,#organization-select){width:100%;min-width:0;max-width:100%;font-size:16px;min-height:44px}
  .session-controls{flex:1 0 100%;gap:8px;justify-content:flex-end;flex-wrap:wrap;font-size:11px}
  #business-clock{margin-right:auto;font-variant-numeric:tabular-nums}
  #session-role{max-width:100%;font-size:10px;white-space:normal}
  .session-controls .btn{font-size:12px;padding:8px}
  #app-layout.with-sidebar{display:block}
  #sidebar{display:none!important}
  main,main:has(#catalog-page:not([hidden])){padding:18px 14px 32px}
  #message:empty{display:none}
  #catalog-content{padding:8px;zoom:1}
  #mobile-menu{position:fixed;inset:0 auto 0 0;margin:0;width:min(88vw,360px);max-width:100%;height:100dvh;max-height:100dvh;padding:0 16px 24px;border:0;border-right:1px solid var(--color-divider);background:var(--color-bg);color:var(--color-text);overflow-y:auto;overscroll-behavior:contain}
  #mobile-menu::backdrop{background:rgb(20 32 43 / .42)}
  .mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;padding:12px 0;background:var(--color-bg);z-index:1;border-bottom:1px solid var(--color-divider)}
  #mobile-menu #navigation{display:block;overflow:visible;padding:0}
  #mobile-menu #navigation section{min-width:0}
  #mobile-menu .navgroup{padding:20px 12px 6px;font-size:11px}
  #mobile-menu .navitem{display:flex;align-items:center;min-height:44px;padding:10px 12px;font-size:15px}
  #mobile-menu .navitem[aria-current=page]{font-weight:600}
  :is(.btn,.input,select.custom-select,.select-option,.filter-chips button,.seg-opt){min-height:44px}
  :is(input.input,select.input,textarea.input,.select-search){font-size:16px;min-width:0;max-width:100%}
  .select-option{padding:11px 10px}
  :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
  button:active:not(:disabled),.btn:active:not(:disabled){filter:brightness(.94)}
  h2{font-size:26px;line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
  .panel{padding:16px;min-width:0}
  #login{max-width:420px;margin:24px auto;padding:24px 18px}
  #login .input{width:100%}
  .section-heading{gap:12px;align-items:center}
  .section-heading h2{margin:0}
  .order-list-tools{width:100%;min-width:0;margin-left:0;display:grid;grid-template-columns:1fr 1fr}
  .order-list-tools>.period-picker{grid-column:1/-1;min-width:0}
  .order-list-tools>.search-field{min-width:0}
  .order-list-tools>.search-field input{width:100%;min-width:0;max-width:100%;font-size:16px}
  .order-list-tools>#new-order{grid-column:1/-1;width:100%}
  .catalog-heading{gap:12px;margin-bottom:16px!important}
  .catalog-heading-actions,.catalog-heading>.catalog-actions{width:100%;justify-content:flex-start}
  .catalog-heading>.catalog-actions>.input{width:100%!important;flex:1 1 100%}
  .catalog-heading-actions>.seg{margin:0!important}
  .catalog-actions{gap:8px!important}
  .filters{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .filters>label,.search-field{width:100%;min-width:0}
  .filters .input{width:100%}
  .order-create .order-details-toggle{display:block;width:100%;text-align:left}
  .order-create .order-details-toggle::after{content:'▾';float:right}
  .order-create .order-details-toggle[aria-expanded=true]::after{content:'▴'}
  .order-create:has(.order-details-toggle[aria-expanded=false]) .order-optional-field{display:none}
  .filter-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;max-width:100%}
  .filter-chips button{flex:none;white-space:nowrap}
  .seg{max-width:100%;flex-wrap:wrap}
  .seg-opt{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;font-size:13px}
  .period-picker{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
  .period-picker>.seg-opt{flex:none}
  .period-range{gap:10px;padding:12px}
  .period-range>label{flex:1 1 110px}
  .period-range>label>.input{width:100%;height:44px}
  .period-range-presets{width:100%}
  .period-range>.btn{min-height:44px;height:auto}
  .mobile-fluid-grid,.load-columns,.responsive-columns,.staff-columns,.norm-columns,.client-card-details,.audit-days-columns,.dashboard-columns{grid-template-columns:minmax(0,1fr)!important;gap:20px}
  .finance-report-columns,.gate-columns{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  .finance-report-columns>*,.gate-columns>*{min-width:0}
  .shift-period-controls{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;gap:6px!important}
  .shift-period-controls>.btn{min-width:0;padding:8px 5px;font-size:12px;white-space:nowrap}
  .shift-period-field,.shift-period-field>label{min-width:0;width:100%}
  .shift-period-field>label{font-size:12px}
  .shift-period-field .input{width:100%;min-width:0;padding-inline:4px}
  /* Keep iOS's localized date text out of layout while retaining its picker. */
  .shift-date-control{display:block;position:relative;min-width:0;max-width:100%;height:44px;overflow:hidden}
  .shift-date-control .input{position:absolute;inset:0;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
  .shift-date-value{display:flex;align-items:center;justify-content:center;height:100%;min-width:0;padding:4px;border:1px solid var(--color-divider);background:var(--color-surface);color:var(--color-text);font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
  .shift-date-control:focus-within .shift-date-value{outline:2px solid var(--color-accent);outline-offset:-2px}
  .shift-date-control:has(input:disabled){opacity:.5}

  .shift-period-field>:not(label){max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .cells{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cell{min-width:0;padding:14px 12px!important}
  .cv{font-size:24px!important;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
  .ck{line-height:1.5}
  .dashboard-view .cells .cell:last-child:nth-child(odd){grid-column:1/-1}
  /* Keep every report column accessible instead of squeezing or hiding data. */
  .tw,.dashboard-view .tw{overflow-x:auto!important;max-width:100%;min-width:0;overscroll-behavior-x:contain}
  .tw .responsive-table,.tw .responsive-table.table-sized,.tw .responsive-table[data-fixed-columns]{width:max(100%,var(--mobile-table-width,720px))!important;min-width:var(--mobile-table-width,720px)!important;table-layout:auto!important}
  .tw .responsive-table :is(th,td){font-size:13px!important;padding:12px!important;white-space:nowrap!important;overflow-wrap:normal!important}
  .tw .responsive-table th{width:auto!important}
  .tw .responsive-table[data-column-scales].table-sized{width:max(100%,var(--table-width))!important;min-width:var(--table-width)!important;table-layout:fixed!important}
  .tw .responsive-table[data-column-scales].table-sized th{width:var(--column-width)!important}

  .tw .responsive-table.dashboard-sites :is(th,td):nth-child(n),.tw .responsive-table.dashboard-active :is(th,td):nth-child(n){display:table-cell}
  .tw .responsive-table .empty-state{white-space:normal!important}
  .tw .table-empty>.empty-state{display:block;width:calc(100vw - 100px);max-width:calc(100vw - 100px)!important}
  .column-resizer{display:none}
  .table-sort-button{width:32px;height:44px;font-size:14px}
  .dashboard-hourly,.load-hourly{min-width:560px}
  .blueprint:has(>.dashboard-hourly),.blueprint:has(>.load-hourly){overflow-x:auto}
  .dashboard-hourly span{font-size:10px!important}
  .orders-pagination{flex-wrap:wrap;gap:8px}
  .orders-pagination span{flex-basis:100%}
  .order-create{grid-template-columns:minmax(0,1fr)}
  .order-edit-line{grid-template-columns:minmax(0,1fr) 70px auto!important}
  .order-edit-line select{grid-column:1/-1}
  .order-card-columns{grid-template-columns:minmax(0,1fr)}
  .order-stages{gap:8px}.order-stage{flex:1 1 100%;padding:12px}
  .dialog-backdrop{padding:8px!important;align-items:center}
  .dialog{width:100%!important;min-width:0!important;max-width:100%!important;padding:18px 14px!important;max-height:calc(var(--dialog-height,100dvh) - 16px);overflow:auto}
  .dialog-backdrop,.dialog{overscroll-behavior:contain}
  .dialog :is(.cells,.responsive-columns){grid-template-columns:minmax(0,1fr)!important}
  .dialog .field{min-width:0}
  .dialog-actions{gap:8px}
  .dialog-actions .btn{flex:1 1 120px;white-space:normal}
  body>dialog:not(#mobile-menu){width:calc(100% - 20px);max-width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:18px 14px;overflow:auto}
  .dialog-title{font-size:22px!important;text-wrap:balance}
  .catalog-native-dialog{width:calc(100% - 20px);overscroll-behavior:contain;overflow-x:hidden;touch-action:pan-y pinch-zoom}
  .catalog-native-dialog>.dialog{max-height:none;overflow:visible}
  .staff-edit-fields{grid-template-columns:minmax(0,1fr)!important}
  .staff-edit-dialog>*{min-width:0}
  .staff-edit-dialog .seg-opt{min-width:0;max-width:100%;white-space:normal}
  .staff-edit-dialog .seg-opt>span{min-width:0;overflow-wrap:anywhere}

}
@media(max-width:600px){
  /* Orders become labelled records, preserving the original row actions. */
  .tw:has(.orders-table){overflow:visible!important}
  .tw .responsive-table.orders-table{display:block;width:100%!important;min-width:0!important;border:0}
  .orders-table thead{display:block;max-width:100%;overflow-x:auto;margin-bottom:12px}
  .orders-table thead tr{display:flex}
  .tw .responsive-table.orders-table thead th{display:block;flex:none;padding:4px 8px!important}
  .orders-table thead th:last-child{display:none}
  .orders-table .order-chip{white-space:normal;overflow-wrap:anywhere}
  .orders-table .table-empty>.empty-state{width:100%;max-width:100%!important}
  .orders-table tbody{display:grid;gap:14px}
  .orders-table .order-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border:1px solid var(--color-divider);background:var(--color-bg)}
  .tw .responsive-table.orders-table .order-row td{display:block;min-width:0;max-width:100%!important;padding:0!important;white-space:normal!important;overflow:visible;border:0;text-align:left!important;overflow-wrap:anywhere!important}
  .orders-table .order-row td::before{content:attr(data-mobile-label);display:block;margin-bottom:4px;font-size:11px;line-height:1.4;font-weight:400;color:var(--color-neutral-600)}
  .orders-table .order-row td:first-child{grid-column:1/-1;font-size:16px!important;font-weight:600}
  .orders-table .order-row td:last-child{grid-column:1/-1}
  .orders-table .order-row td:last-child::before{display:none}
  .orders-table .order-actions button{min-height:44px;font-size:14px;width:100%;margin:0}
  .orders-table .table-empty:not([hidden]),.orders-table .table-empty td{display:block}
  .orders-table .table-empty td{padding:18px!important}
}