/* Loaded last: viewport-driven layout, without changing desktop data or preferences. */
.responsive-nav-backdrop { display: none; }
@media (max-width: 1180px) {
  body { height: auto; min-height: 100dvh; overflow: auto; }
  .app-shell, body[data-sidebar-collapsed="true"] .app-shell {
    height: auto; min-height: 100dvh; overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "header" "workspace";
  }
  .app-header { position: sticky; top: 0; z-index: 1200; min-height: 60px; padding: 8px 12px; gap: 8px; }
  .brand, body[data-sidebar-collapsed="true"] .brand { width: 150px; min-width: 0; }
  .brand-logo, body[data-sidebar-collapsed="true"] .brand-logo { width: 150px; max-width: 100%; height: auto; flex-basis: auto; }
  .sidebar { position: fixed; top: 60px; bottom: 0; left: 0; width: min(300px, 85vw); z-index: 1190; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); visibility: hidden; }
  body[data-mobile-nav-open="true"] .sidebar { transform: none; visibility: visible; }
  body[data-mobile-nav-open="true"] { overflow: hidden; }
  .responsive-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 60px 0 0; z-index: 1180; border: 0; border-radius: 0; background: rgb(0 0 0 / 40%); }
  .sidebar #nav { display: block; overflow: visible; padding: 10px; }
  .sidebar .nav-item, body[data-sidebar-collapsed="true"] .sidebar .nav-item { display: flex; justify-content: flex-start; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 14px; }
  .sidebar .nav-item b, .sidebar .nav-item small, body[data-sidebar-collapsed="true"] .sidebar .nav-item b, body[data-sidebar-collapsed="true"] .sidebar .nav-item small { display: block; }
  .sidebar .nav-item small { margin-left: auto; }
  .sidebar .subnav, body[data-sidebar-collapsed="true"] .sidebar .subnav { display: grid; }
  .sidebar .subnav button { min-height: 44px; text-align: left; }
  /* Contain all table/filter z-index values below the navigation overlay. */
  .workspace { position: relative; z-index: 0; isolation: isolate; min-width: 0; height: auto; overflow: visible; }
  .board { min-width: 0; max-width: 100%; padding: 12px; }
  .pagebar, body.loads-mode .pagebar { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; }
  .top-actions, body.loads-mode .top-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .top-actions .search { flex: 1 1 220px; min-width: 0; }
  .top-actions > button { flex: 0 1 auto; width: auto; }
  .board > .table-panel, .board > .standard-page-grid { min-width: 0; height: auto; min-height: 0; }
  .table-wrap { max-width: 100% !important; overflow: auto !important; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .table-pager { flex-wrap: wrap; gap: 10px; height: auto; }
  .table-pager .pager-nav { justify-content: flex-start; overflow-x: auto; max-width: 100%; }
  .table-pager button { flex-shrink: 0; }
  .tabs-row { max-width: 100%; overflow-x: auto; }
  .tabs-row button { flex-shrink: 0; }
  .modal { padding: 12px !important; }
  .modal > form, .modal > article, .drawer > article { width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: calc(100dvh - 24px) !important; }
  #modalBody, #drawerBody { min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .scheduled-payment-layout, .partner-form, .settlement-header { grid-template-columns: minmax(0, 1fr) !important; }
  .driver-payment-card, .driver-payee-card, .settlement-history-popover, .internal-document-preview { max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow: auto; }
  .dispatch-board.ez-dispatch-board .dispatch-toolbar, body[data-sidebar-collapsed="true"] .dispatch-board.ez-dispatch-board .dispatch-toolbar { width: 100% !important; max-width: 100% !important; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .app-header { padding-inline: max(8px, env(safe-area-inset-left)); }
  .brand, body[data-sidebar-collapsed="true"] .brand { width: 116px; }
  .user-name { display: none; }
  #adminPwaInstall { font-size: 11px; padding-inline: 7px; }
  .header-spacer { min-width: 0; }
  .sidebar-toggle { width: 44px; height: 44px; flex-shrink: 0; }
  .board { padding: 8px; }
  .modal { padding: 0 !important; }
  .modal > form, .modal > article, .drawer > article { height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .modal footer, .drawer footer { padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
  .form-grid, .stop-grid, .scheduled-payment-row, .scheduled-payment-layout, .customer-billing-grid, .settlement-header { grid-template-columns: minmax(0, 1fr) !important; }
  .field { min-width: 0; }
  .field.full { grid-column: 1 / -1; }
  .scheduled-radio-row, .scheduled-repeat-row { flex-wrap: wrap; gap: 12px; }
  .scheduled-date-field { width: 100%; max-width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.logged-out .login-screen { padding: 16px !important; overflow-y: auto !important; }
  .login-card { max-width: 100%; }
}
@media (max-width: 1180px) and (pointer: coarse) {
  button, .icon-action, .native-searchable-toggle { min-height: 44px !important; }
  .icon-action, button.icon { min-width: 44px !important; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea, .native-searchable-input { font-size: 16px !important; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: 44px !important; }
}
/* Loads keeps one horizontally scrollable table; never pin Actions over Broker. */
@media (max-width: 1180px) {
  body.loads-mode .pagebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 12px !important;
    z-index: 100 !important;
  }
  body.loads-mode .pagebar > div:first-child {
    position: relative;
    z-index: 15000;
    min-width: 0 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
  body.loads-mode .loads-pagebar-meter { min-width: 0 !important; }
  body.loads-mode #board { position: relative; z-index: 0; isolation: isolate; }
  body.loads-mode .loads-period-field .native-searchable-select { width: 148px; }
  body.loads-mode .loads-period-field .native-searchable-input {
    height: 44px !important;
    min-height: 44px !important;
    padding-right: 40px !important;
  }
  body.loads-mode .loads-period-field .native-searchable-toggle {
    top: 0 !important;
    bottom: 0 !important;
    height: 44px !important;
  }
  body.loads-mode .loads-period-field .native-searchable-menu {
    width: 180px;
    max-width: calc(100vw - 24px);
    max-height: min(280px, 45dvh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  body.loads-mode .top-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 10px !important;
  }
  body.loads-mode .top-actions > .search,
  body.loads-mode .top-actions #globalSearch,
  body.loads-mode .top-actions #primaryAction {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.loads-mode .top-actions > .search { display: block !important; }
  /* Override the old phone bottom-sheet rule: its fixed position combined with
     the desktop top:100% placed the menu below the viewport. */
  .top-actions .load-create-menu,
  body.loads-mode .top-actions .load-create-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    width: min(350px, 100%) !important;
    max-width: 100% !important;
    max-height: min(320px, 45dvh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }
  .top-actions .load-create-menu button {
    white-space: normal;
    text-align: left;
  }
  body.loads-mode .loads-table {
    min-width: 1600px !important;
    max-width: none !important;
  }
  body.loads-mode .loads-table-wrap .loads-table > thead > tr > th,
  body.loads-mode .loads-table-wrap .loads-table > tbody > tr > td {
    position: static !important;
    inset: auto !important;
    box-shadow: none !important;
  }
}
@media (max-width: 640px) {
  body.loads-mode .top-actions { grid-template-columns: minmax(0, 1fr) !important; }
  body.loads-mode .money-labels { gap: 6px; flex-wrap: wrap; font-size: 11px; }
}
@media print {
  .responsive-nav-backdrop { display: none !important; }
}