/* Responsive overrides, kept separate from the label's physical print layout. */
@media screen {
  :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #b45309;
    outline-offset: 3px;
  }
  .main, .field, .detail > div, #assetTable { min-width: 0; }
  .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .modal, .scan-page, .board-asset { overflow-wrap: anywhere; }
  body:has(.modal-backdrop) { overflow: hidden; }
}

@media screen and (min-width: 641px) and (max-width: 1100px) {
  .location-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 820px) {
  html, body { overflow-x: visible; }
  .layout { min-width: 0; }
  .nav { min-width: 0; gap: 6px; padding: 8px 12px; }
  .nav button { min-height: 44px; margin: 0; padding: 10px 14px; }
  .nav button.active { box-shadow: inset 0 -3px 0 var(--brand); }
  .head > .actions, .head > button { margin-top: 12px; }
  .panel.table-wrap { overflow: visible; }
  .table-wrap::after {
    content: '左右滑动表格，查看完整信息与操作';
    display: block; margin-top: 10px; color: var(--muted); font-size: 12px;
  }
  .table-scroll { border: 1px solid var(--line); border-radius: 6px; }
  .table-scroll table { min-width: 900px; }
  .table-scroll td { max-width: 260px; overflow-wrap: anywhere; }
  .table-scroll .actions { min-width: 150px; }
  .table-scroll button { min-height: 44px; }
  .check-cell input { width: 24px; height: 24px; margin: 8px 0; }
  .toolbar input, .toolbar select { min-width: 0; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail > div + div { margin-top: 14px; }
  .scan-page { padding: 16px; }
}

@media screen and (max-width: 640px) {
  .topbar { padding: calc(12px + env(safe-area-inset-top)) 12px 12px; }
  .topbar .user { grid-template-columns: minmax(0, 1fr) minmax(32px, auto) auto auto; gap: 5px; }
  .topbar .user > select { font-size: 16px; min-height: 44px; padding: 8px 4px; }
  .topbar .user > span:not(.tag) { max-width: 4em; }
  .topbar .user > .tag { padding: 3px 5px; font-size: 10px; }
  .topbar .user > button { min-height: 44px; padding: 8px; }
  .main { padding: 14px 12px calc(20px + env(safe-area-inset-bottom)); }
  .head { margin-bottom: 16px; }
  .head h1 { font-size: 22px; line-height: 1.4; }
  .head .sub { font-size: 13px; line-height: 1.6; }
  .head .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  button, a.button { min-height: 44px; touch-action: manipulation; }
  input, select, textarea, .board-toolbar input { font-size: 16px; min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; }
  input[type="file"] { max-width: 100%; }
  .panel { padding: 12px; border-radius: 8px; }
  .cards { gap: 8px; margin-bottom: 14px; }
  .metric { padding: 10px 8px; }
  .metric:nth-child(3) { grid-column: auto; }
  .metric .sub { min-height: 32px; font-size: 12px; line-height: 1.4; }
  .metric strong { font-size: 24px; font-variant-numeric: tabular-nums; }
  .toolbar:not(.board-toolbar) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .board-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .location-head { position: static; min-height: 52px; gap: 8px; padding: 12px 10px; }
  .location-head strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
  .location-head span, .location-head i { flex-shrink: 0; }
  .board-asset { padding: 12px; }
  .board-asset span { font-size: 13px; line-height: 1.6; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .field label { font-size: 13px; }
  .modal-backdrop { padding: env(safe-area-inset-top) 0 0; }
  .modal { max-height: calc(100dvh - env(safe-area-inset-top) - 16px); padding: 18px 16px; overscroll-behavior-y: contain; }
  .modal-foot { flex-wrap: wrap; bottom: -18px; margin-bottom: -18px; gap: 8px; }
  .modal-foot > button, .modal-foot > a.button { width: auto; flex: 1 1 80px; padding: 10px 8px; }
  .modal-foot > a.button { background: #e8efed; color: var(--text); border-radius: 6px; }
  .label-header { gap: 8px; }
  .label-header > button { flex-shrink: 0; }
  .label-modal { max-height: calc(100dvh - env(safe-area-inset-top) - 16px); }
  .scan-page { padding: 16px 12px calc(20px + env(safe-area-inset-bottom)); }
  .login { padding: 20px 16px; min-height: 100dvh; }
}