/* Tablet layout follows the input device, including touch screens with a mouse.
   Phone widths and non-touch desktop layouts retain their existing rules. */
@media screen and (min-width:701px) and (max-width:1600px) and (any-pointer:coarse) {
  .top {display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px}
  /* Capacitor SystemBars provides actual insets, including older WebViews. */
  html.in-app .top {padding-top:calc(8px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)))!important;padding-left:calc(12px + var(--safe-area-inset-left,env(safe-area-inset-left,0px)));padding-right:calc(12px + var(--safe-area-inset-right,env(safe-area-inset-right,0px)))}
  html.in-app body {padding-bottom:calc(12px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}
  html.in-app .overlay {padding-top:max(12px,var(--safe-area-inset-top,env(safe-area-inset-top,0px)));padding-bottom:max(12px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}
  html.in-app .modal>header {padding-top:0}
  html.in-app .toast {bottom:calc(16px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}
  .top h1 {display:none}
  .top .spacer,.top .who,.top-break {display:none}
  #regionTabs {order:1;flex-wrap:nowrap;min-width:0}
  #archLock {order:2} #schLock {order:3} #cardLock {order:4}
  #shEnd {order:5} #soundBtn {order:6}
  #conn {order:7;margin-left:auto;flex:none}
  #logout {order:8}
  #navTabs {order:9;flex:1 1 100%;width:100%;display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-padding-inline:10px;padding-bottom:4px}
  #navTabs button {flex:none;min-height:44px;padding:10px 12px;font-size:14px;white-space:nowrap}
  .top .btn,#regionTabs button {min-height:44px;padding:8px 10px}
  #archLock .lk-long,#schLock .lk-long,#cardLock .lk-long {display:none}
  .page,.page>.panel {min-width:0;max-width:100%}
  .page {padding:12px}
  .btn,.subtabs button {min-height:44px}
  .field input,.field select,.field textarea {min-height:44px;font-size:16px}
  .field input[type=checkbox],.field input[type=radio] {min-height:0}
  .field .ds-trigger {min-height:44px;font-size:16px}
  .overlay {padding:max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
  .modal {width:min(900px,100%);min-width:0;min-height:0;align-content:start}
  .modal>header {align-items:flex-start}
  .modal>header h2 {overflow-wrap:anywhere}
  .modal>header .x {flex:none;min-width:48px;min-height:48px}
  .tscroll {max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .modal .row>.field {flex:1 1 200px}
  #viewSched.layout-wide .ly {grid-template-columns:minmax(0,1fr)}
  #viewSched.layout-wide .ld {padding:12px}
  #viewSched.layout-wide .lt,#viewSched.layout-wide .lt.layout-with-arrival {min-width:1080px;font-size:15px}
  #viewSched.layout-wide .lt col.ly-col-num {width:64px}
  #viewSched.layout-wide .lt.layout-with-arrival col.ly-col-arrival {width:94px}
  #viewSched.layout-wide .lt col.ly-col-hours {width:116px}
  #viewSched.layout-wide .lt col.ly-col-vehicle {width:154px}
  #viewSched.layout-wide .lt col.ly-col-place {width:22%}
  #viewSched.layout-wide .lt col.ly-col-actions {width:48px}
  #viewSched.layout-wide .lt input,#viewSched.layout-wide .lt select,#viewSched.layout-wide .lt .ds-trigger {min-height:48px;padding:10px 8px;font-size:16px;line-height:1.4}
  #viewSched.layout-wide .lt .c-base input[data-keyboard-time] {min-height:48px}
  #viewSched.layout-wide .lt .ds-trigger {gap:8px;touch-action:manipulation}
  #viewSched.layout-wide .lt .ds-value {white-space:normal;overflow-wrap:anywhere}
  #viewSched.layout-wide .lt .ds-chevron {width:18px;height:18px}
  #viewSched.layout-wide .lt .lt-hd th {padding:10px 5px;font-size:12px}
  #viewSched.layout-wide .lt .c-e2 {grid-template-columns:40px minmax(0,1fr)}
  #viewSched.layout-wide .lt .lr-mini,#viewSched.layout-wide .lt .lr-tender {min-width:40px;min-height:44px;font-size:20px;touch-action:manipulation}
  #viewSched.layout-wide .lt .layout-combine {min-height:44px;font-size:12px}
  #viewSched.layout-wide .lt-act {gap:10px;flex-wrap:wrap;margin-top:12px}
  #viewSched.layout-wide .ld-notes textarea {font-size:16px;min-height:90px}
  .layout-plan-cards {grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout-plan-actions>.btn,.layout-plan-actions .ds-trigger {min-height:44px}
  #viewCrews .crew-table .actions {display:flex;flex-direction:column;align-items:stretch}
  #viewCrews .crew-table .btn {min-height:44px}
}

/* Narrow tablets keep the same table and column order as landscape.
   Compact column widths leave room for both staff fields without card layouts. */
@media screen and (min-width:701px) and (max-width:1100px) and (any-pointer:coarse) {
  #viewSched.layout-wide .ld {padding:8px}
  #viewSched.layout-wide .lt,#viewSched.layout-wide .lt.layout-with-arrival {min-width:620px;font-size:14px}
  #viewSched.layout-wide .lt col.ly-col-num {width:46px}
  #viewSched.layout-wide .lt.layout-with-arrival col.ly-col-arrival {width:64px}
  #viewSched.layout-wide .lt col.ly-col-hours {width:96px}
  #viewSched.layout-wide .lt col.ly-col-vehicle {width:112px}
  #viewSched.layout-wide .lt col.ly-col-place,#viewSched.layout-wide .lt.layout-with-arrival col.ly-col-place {width:18%}
  #viewSched.layout-wide .lt col.ly-col-actions {width:36px}
  #viewSched.layout-wide .lt .lt-hd th {font-size:11px;padding:7px 2px;line-height:1.3}
  #viewSched.layout-wide .lt input,#viewSched.layout-wide .lt select,#viewSched.layout-wide .lt .ds-trigger {min-height:44px;padding:8px 3px;font-size:14px;line-height:1.35}
  #viewSched.layout-wide .lt .c-base input[data-keyboard-time] {min-height:44px}
  #viewSched.layout-wide .lt .ds-trigger {gap:3px}
  #viewSched.layout-wide .lt .ds-chevron {width:12px;height:12px}
  #viewSched.layout-wide .lt .c-v .ds-value {white-space:nowrap;font-size:13px}
  #viewSched.layout-wide .lt .c-e2 {grid-template-columns:28px minmax(0,1fr);gap:2px}
  #viewSched.layout-wide .lt .lr-mini {min-width:32px;min-height:40px;font-size:18px}
  #viewSched.layout-wide .lt .lr-tender {min-width:28px;min-height:40px;font-size:18px;padding-inline:0}
  #viewSched.layout-wide .lt .layout-combine {min-height:40px;padding:5px 2px;font-size:11px}
  .layout-plan-cards {grid-template-columns:minmax(0,1fr)}
}