/* ── Mobile bottom nav — hidden by default (desktop) ── */
#mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  justify-content: space-around;
  align-items: stretch;
}

/* ── Mobile layout ── */
@media (max-width: 768px) {
  /* Sidebar hidden — bottom nav takes over */
  .sidebar { display: none; }

  .main-content {
    padding: 12px 10px calc(64px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  #mobile-nav { display: flex; }

  /* Panels */
  .shared-panel {
    width: 100%; max-width: 100%;
    padding: 12px; overflow: hidden;
    margin-bottom: 12px;
  }
  .snapshot-panel { margin: 12px 0; }

  /* Forms — single column */
  .field-row { grid-template-columns: 1fr; gap: 8px; }
  .part-row { flex-direction: column; }
  .part-form-card { flex: none; width: 100%; }
  .part-preview-slot { flex: none; width: 100%; overflow-x: auto; }
  /* Log book: page size and engine data stack instead of sharing a row */
  .lb-top-row { flex-direction: column; }

  /* 16px prevents iOS zoom on focus */
  .field-group input, .field-group select, .field-group textarea {
    font-size: 16px;
    padding: 10px;
    min-height: 44px;
  }
  .btn-primary { font-size: 14px; padding: 13px; min-height: 48px; }
  .btn-sm { padding: 8px 12px; font-size: 12px; min-height: 36px; }
  h1 { font-size: 18px; }

  /* Document tables → card layout */
  #allDocumentsTable .data-table,
  #woDocumentsTable .data-table {
    display: block;
  }
  #allDocumentsTable .data-table thead,
  #woDocumentsTable .data-table thead {
    display: none;
  }
  #allDocumentsTable .data-table tbody,
  #woDocumentsTable .data-table tbody {
    display: flex; flex-direction: column; gap: 8px;
  }
  #allDocumentsTable .data-table tr,
  #woDocumentsTable .data-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 10px 12px;
    gap: 4px 8px;
    cursor: pointer;
  }
  #allDocumentsTable .data-table td,
  #woDocumentsTable .data-table td {
    display: block;
    border: none;
    padding: 1px 0;
    font-size: 13px;
    white-space: normal;
  }
  #allDocumentsTable .data-table td:last-child,
  #woDocumentsTable .data-table td:last-child {
    grid-column: 2; grid-row: 1 / -1;
    display: flex; flex-direction: column;
    align-items: stretch; gap: 4px;
    justify-content: center;
    white-space: normal; min-width: 72px;
  }
  #allDocumentsTable .data-table td:last-child .btn-sm,
  #woDocumentsTable .data-table td:last-child .btn-sm {
    width: 100%; text-align: center;
    margin-left: 0; margin-right: 0;
  }

  /* Mileage table → one card per entry: WO# · date · … · miles · Edit Del */
  .mil-table thead { display: none; }
  .mil-table, .mil-table tbody, .mil-table tfoot, .mil-table tr { display: block; }

  .mil-table tbody tr {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; padding: 9px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
  }
  /* Strip the desktop cell chrome. :first-child/:last-child must be listed
     explicitly — they out-specify a bare `td` selector and would otherwise keep
     their border and red stripe inside the card. */
  .mil-table tbody td,
  .mil-table tbody td:first-child,
  .mil-table tbody td:last-child {
    display: none;
    height: auto; padding: 0;
    background: none; border: none; border-radius: 0;
  }
  /* Same reason as the strip above, one level up: .mil-wo carries a dark rail
     on desktop and its hover rule in views.css out-specifies that strip, so it
     has to be cleared explicitly — in both states. min-width too, or the
     `width: auto` here still floors the chip at the rail's 68px. */
  .mil-table tbody td.mil-wo,
  .mil-table tbody tr:hover td.mil-wo {
    background: none; border: none;
    width: auto; min-width: 0; padding: 0; text-align: left;
  }

  .mil-table tbody td.mil-wo,
  .mil-table tbody td.mil-date,
  .mil-table tbody td.mil-mi,
  .mil-table tbody td.mil-acts { display: block; }
  .mil-table tbody td.mil-mi { margin-left: auto; }

  .mil-table tfoot tr { display: flex; justify-content: flex-end; gap: 8px; padding: 0 4px; }
  .mil-table tfoot td { display: block; padding: 0; }

  /* Other scrollable tables */
  #mileageSummary, #tagsTable { overflow-x: auto; display: block; }
  .data-table td, .data-table th { white-space: nowrap; }

  /* Subtab nav — horizontal scroll with fade mask */
  .subtab-nav {
    overflow-x: auto;
    justify-content: flex-start; /* centering clips leading tabs when scrollable */
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  }
  .subtab-nav::-webkit-scrollbar { display: none; }
  .subtab-btn { padding: 9px 12px; font-size: 12px; white-space: nowrap; }

  /* WO detail */
  .wo-detail-header { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .wo-title-text { font-size: 15px; }
  .wo-header-actions { width: 100%; justify-content: flex-end; }
  .tab-btn { padding: 8px 12px; font-size: 12px; min-height: 36px; }

  /* WO list toolbar — search gets its own row, controls stay thumb-sized */
  .wo-search { flex: 1 1 100%; order: 1; min-height: 36px; }
  .wo-toolbar-tabs { order: 0; }
  .wo-sort, .wo-filters-btn { order: 2; min-height: 36px; }
  .wo-list-count { order: 3; }
  .wo-filter-field { flex: 1 1 100%; }
  .wo-filter-field select { width: 100%; min-width: 0; min-height: 36px; }

  /* Panel headers */
  .panel-header { flex-wrap: wrap; gap: 8px; }
  /* Drop the action cluster onto its own full-width row so the buttons pack
     two-up instead of each taking a line beside the heading. */
  .panel-header-actions { width: 100%; justify-content: flex-start; }

  /* AD page */

  /* WO list card — rail becomes a top bar, actions go full-width */
  .wo-card { grid-template-columns: 1fr; }
  .wo-card-rail {
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 8px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .wo-card-rail::before { width: 100%; height: 3px; bottom: auto; }
  .wo-card-rail-num { font-size: 20px; }
  /* Facts stay on the same row as the aircraft/vendor block, right-aligned */
  .wo-card-main { gap: var(--sp-3); }
  .wo-card-facts { gap: 1px 8px; font-size: var(--fs-xs); }
  .wo-fact-k { letter-spacing: 0.6px; }
  .wo-card-foot { flex-direction: column-reverse; align-items: stretch; gap: var(--sp-2); }
  .wo-card-indicators { justify-content: flex-end; }
  /* pills are tap targets now */
  .wo-wf-pill { padding: 6px 9px; font-size: 10px; }
  .wo-card-actions { gap: var(--sp-2); }
  .wo-card-actions .btn-sm { flex: 1; min-height: 44px; }

  /* WO action buttons stack full-width */
  .wo-actions { flex-direction: column; }
  .wo-actions .btn-primary { width: 100%; }

  /* Mileage 5-col form → 2 cols on mobile */
  .mileage-field-row { grid-template-columns: 1fr 1fr !important; }

  /* Odometer drop zone — full width on mobile */
  .odo-drop-zone { min-width: 0 !important; width: 100%; }

  /* WO header actions — wrap on mobile */
  .wo-header-actions { flex-wrap: wrap; gap: 6px; }

  /* Confirm dialog */
  .confirm-dialog { min-width: unset; width: 90vw; }

  /* Toast — above bottom nav */
  #toast-container {
    right: 12px; left: 12px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
  }
  .toast { min-width: unset; }

  /* Drop zones */
  .drop-zone { min-height: 80px; }

  /* Modals */
  .modal-box { width: 92vw; max-width: 92vw; max-height: 85dvh; overflow-y: auto; }
}

/* ── Standalone PWA: no browser chrome ── */
@media (display-mode: standalone) {
  body { overscroll-behavior: none; }
}