/* QCnomics — phone layout (≤ 767px). Loaded after the inline styles in index.html.
   Goal: every screen stays inside the viewport, is symmetric, and is usable with a thumb:
   one-column page headers, full-width action buttons, 16px inputs (no iOS zoom), 44px touch targets,
   edge-to-edge modals, horizontally scrolling tab strips and tables. */
@media (max-width: 767.98px) {
  /* ---- shell: top bar ---- */
  .topbar { padding: 6px 10px !important; gap: 6px; }
  .topbar .topbar-title { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  .topbar > .d-flex:first-child { gap: 6px !important; min-width: 0; }
  #topbar-expiry, #topbar-analytes { display: none !important; }
  #topbar-renew-btn { font-size: .68rem !important; padding: 2px 6px !important; }
  .topbar select, .topbar .form-select { max-width: 92px; font-size: .78rem; padding: 2px 22px 2px 6px; }
  .topbar #topbar-lab-badge { display: none !important; }
  .topbar .d-flex.align-items-center.gap-2:last-child { gap: 4px !important; }
  .page-content { padding: 10px !important; }

  /* ---- page headers: title on one line, buttons underneath, full width, wrapping ---- */
  .page-content > .container-fluid, .page-content > div.container-fluid { padding-left: 0; padding-right: 0; }
  .page-content .d-flex.justify-content-between.align-items-center.mb-3,
  .page-content .d-flex.justify-content-between.align-items-center.mb-1,
  .page-content .d-flex.justify-content-between.align-items-center.mb-2,
  .page-content .d-flex.justify-content-between.align-items-center.mb-4,
  .page-content .d-flex.justify-content-between.align-items-start.mb-3 { flex-direction: column; align-items: stretch !important; gap: .5rem; }
  .page-content .d-flex.justify-content-between.align-items-center.mb-3 > div:last-child,
  .page-content .d-flex.justify-content-between.align-items-center.mb-1 > div:last-child,
  .page-content .d-flex.justify-content-between.align-items-center.mb-2 > div:last-child,
  .page-content .d-flex.justify-content-between.align-items-center.mb-4 > div:last-child,
  .page-content .d-flex.justify-content-between.align-items-start.mb-3 > div:last-child { display: flex; flex-wrap: wrap; gap: .35rem; }
  .page-content .d-flex.justify-content-between > div:last-child > .btn { flex: 1 1 calc(50% - .35rem); margin: 0 !important; white-space: nowrap; }
  .page-content .d-flex.justify-content-between > div:last-child > .btn.btn-sm { padding: .45rem .5rem; }
  .page-content h4, .page-content h5.mb-0, .page-content h6.mb-0 { font-size: 1.05rem; }
  .page-content .text-nowrap { white-space: normal !important; }

  /* ---- forms: thumb-sized, no auto-zoom ---- */
  .page-content .form-control, .page-content .form-select, .page-content textarea,
  .modal .form-control, .modal .form-select, .modal textarea { font-size: 16px; min-height: 44px; }
  .page-content .form-control-sm, .page-content .form-select-sm, .modal .form-control-sm, .modal .form-select-sm { font-size: 15px; min-height: 40px; }
  .page-content .btn, .modal .btn { min-height: 42px; }
  .page-content .btn-sm, .modal .btn-sm { min-height: 38px; }
  .page-content .btn-group { flex-wrap: wrap; }
  .page-content .input-group > .form-control, .page-content .input-group > .form-select { min-height: 44px; }
  .page-content label, .page-content .form-label { margin-bottom: .2rem; }
  .page-content .form-check-input { width: 1.25em; height: 1.25em; }
  .page-content input[type=number] { text-align: right; }

  /* ---- tab strips / filter chips: scroll sideways, never wrap into a tall block ---- */
  .page-content .nav-tabs, .page-content .nav-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .page-content .nav-tabs::-webkit-scrollbar, .page-content .nav-pills::-webkit-scrollbar { display: none; }
  .page-content .nav-tabs .nav-link, .page-content .nav-pills .nav-link { white-space: nowrap; }

  /* ---- cards & stat tiles ---- */
  .page-content .card-body { padding: .85rem; }
  .page-content .stat-card { padding: .9rem; }
  .page-content .stat-value { font-size: 1.6rem; }
  .page-content .row.g-3 > [class*='col-'] { padding-top: .35rem; }

  /* ---- modals: edge to edge, scrollable body, sticky footer ---- */
  .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl { margin: 0; max-width: 100%; width: 100%; min-height: 100%; }
  .modal-content { min-height: 100vh; border-radius: 0; border: 0; }
  .modal-body { overflow-y: auto; }
  .modal-footer { position: sticky; bottom: 0; background: #fff; z-index: 2; flex-wrap: wrap; gap: .4rem; }
  .modal-footer .btn { flex: 1 1 45%; margin: 0; }
  .modal-header { position: sticky; top: 0; background: #fff; z-index: 2; }

  /* ---- tables: comfortable cells inside the scrolling frame (shell rule makes them scroll) ---- */
  #page-content table td, #page-content table th { padding: 8px 8px; font-size: .84rem; }

  /* ---- data-entry rows (QC entry / env monitoring): value field gets the width, labels stack ---- */
  .page-content .qc-entry-row, .page-content .entry-row { flex-wrap: wrap; }
  .page-content .sticky-actions, .page-content .entry-actions { position: sticky; bottom: 0; background: #fff; padding: .6rem 0; z-index: 3; border-top: 1px solid #e5e7eb; }

  /* ---- toasts above the keyboard ---- */
  .toast-container { bottom: 72px !important; }
}

/* small phones */
@media (max-width: 400px) {
  .topbar .topbar-title { max-width: 38vw; }
  .page-content .d-flex.justify-content-between > div:last-child > .btn { flex-basis: 100%; }
}

/* ---- QC Entry grid on a phone: one card per analyte, levels stacked, full-width value fields ---- */
@media (max-width: 767.98px) {
  #page-content #qce-table, #page-content #qce-table tbody, #page-content #qce-table tr, #page-content #qce-table td { display: block; width: 100%; white-space: normal !important; }
  #page-content #qce-table thead { display: none; }
  #page-content #qce-table tr { border: 1px solid #e5e7eb; border-radius: 10px; margin: 0 0 .7rem 0; padding: .55rem .6rem .35rem; background: #fff; }
  #page-content #qce-table td { border: 0; padding: .25rem 0; }
  #page-content #qce-table td:first-child { display: inline-block; width: auto; padding-right: .4rem; }
  #page-content #qce-table td:first-child strong { font-size: 1rem !important; }
  #page-content #qce-table td:nth-child(2) { display: inline-block; width: auto; }
  #page-content #qce-table td:nth-child(3), #page-content #qce-table td:nth-child(5), #page-content #qce-table td:nth-child(7) { border-radius: 8px; padding: .5rem .6rem .4rem; margin-top: .4rem; }
  #page-content #qce-table td:nth-child(3)::before { content: 'Level 1 (Low)'; }
  #page-content #qce-table td:nth-child(5)::before { content: 'Level 2 (Normal)'; }
  #page-content #qce-table td:nth-child(7)::before { content: 'Level 3 (High)'; }
  #page-content #qce-table td:nth-child(3)::before, #page-content #qce-table td:nth-child(5)::before, #page-content #qce-table td:nth-child(7)::before { display: block; font-size: .72rem; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }
  #page-content #qce-table td:nth-child(4), #page-content #qce-table td:nth-child(6), #page-content #qce-table td:nth-child(8) { padding: 0 .6rem .3rem; font-size: .8rem; color: #475569; }
  #page-content #qce-table td:nth-child(4):empty, #page-content #qce-table td:nth-child(6):empty, #page-content #qce-table td:nth-child(8):empty { display: none; }
  #page-content #qce-table input.qce-val { width: 100% !important; min-height: 46px; font-size: 18px; font-weight: 600; }
  #page-content #qce-table .d-flex.align-items-center.gap-1 { width: 100%; }
  #page-content .table-responsive:has(#qce-table) { overflow: visible; }
}
@media (max-width: 767.98px) {
  #page-content #qce-table td:nth-child(4)::before, #page-content #qce-table td:nth-child(6)::before, #page-content #qce-table td:nth-child(8)::before { content: 'SDI: '; font-weight: 600; }
}

/* ---- page-specific phone fixes (audit 14 Oct 2026) ---- */
@media (max-width: 767.98px) {
  /* Equipment checklist: dark tab bar scrolls sideways */
  .eqc-tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 8px !important; scrollbar-width: none; }
  .eqc-tab-bar::-webkit-scrollbar { display: none; }
  /* Reminders: view switch buttons share the row evenly */
  .rem-view-btn { flex: 1 1 auto; text-align: center; padding: 6px 8px !important; }
  /* Bootstrap wide gutters push rows past the viewport */
  .page-content .row.g-4, .page-content .row.g-5 { --bs-gutter-x: .75rem; }
  /* Quality indicators: one card per indicator, inputs stacked (the 4-column table is unusable on a phone) */
  #page-content #qi-accordion table:not(#downtime-table), #page-content #qi-accordion table:not(#downtime-table) tbody, #page-content #qi-accordion table:not(#downtime-table) tr, #page-content #qi-accordion table:not(#downtime-table) td { display: block; width: 100%; white-space: normal !important; }
  #page-content #qi-accordion table:not(#downtime-table) thead { display: none; }
  #qi-accordion table tr { border: 1px solid #e5e7eb; border-radius: 10px; margin: 0 0 .6rem; padding: .5rem .6rem; background: #fff; }
  #qi-accordion table td { border: 0; padding: .25rem 0; width: 100% !important; text-align: left !important; }
  #qi-accordion table td.qi-value::before { content: 'Value: '; font-weight: 600; color: #475569; }
  #qi-accordion table td:nth-child(4)::before { content: 'Target: '; font-weight: 600; color: #475569; }
  #qi-accordion table td input, #qi-accordion table td .form-control { width: 100% !important; min-height: 42px; }
  #qi-accordion .table-responsive { overflow: visible; }
  /* Reports: four report tabs become two rows of two */
  .page-content .nav-pills.flex-column.flex-sm-row > *, .page-content .btn-group.w-100 > .btn { flex: 1 1 48%; }
  /* Any header-level button rows the generic rule missed: wrap, never overflow */
  .page-content .d-flex.gap-2:not(.flex-column) { flex-wrap: wrap; }
  .page-content .d-flex.justify-content-end .btn { flex: 1 1 auto; }
  /* Stepper / wizard pills (carryover, method validation) */
  .page-content .stepper, .page-content .wizard-steps { overflow-x: auto; flex-wrap: nowrap !important; }
  /* Stat tiles: never below 2 per row on a phone, text stays inside */
  .page-content .stat-card .stat-label { font-size: .72rem; }
  /* Chat / support floating button clear of the keyboard */
  #topbar-support-btn { flex-shrink: 0; }
}
@media (max-width: 767.98px) {
  #qi-accordion table td .row { --bs-gutter-x: .5rem; }
  #qi-accordion table td .row > [class*='col-'] { flex: 0 0 100%; max-width: 100%; }
  #qi-accordion table td .form-label.text-truncate { white-space: normal; }
  #qi-accordion .accordion-body { padding: .5rem; }
}
@media (max-width: 767.98px) {
  /* the equipment-downtime sub-table keeps its columns and scrolls sideways */
  #qi-accordion #downtime-table { display: block; overflow-x: auto; white-space: nowrap; }
  #qi-accordion #downtime-table thead { display: table-header-group; }
  #qi-accordion #downtime-table tbody { display: table-row-group; }
  #qi-accordion #downtime-table tr { display: table-row; border: 0; padding: 0; margin: 0; }
  #qi-accordion #downtime-table td, #qi-accordion #downtime-table th { display: table-cell; width: auto !important; padding: 6px 8px; }
  #qi-accordion #downtime-table td::before { content: none; }
  #qi-accordion .container-fluid.p-4, .page-content .container-fluid.p-4 { padding: .5rem !important; }
}
@media (max-width: 767.98px) {
  #qi-accordion, #qi-accordion .accordion-item, #qi-accordion .accordion-body, #qi-accordion .table-responsive { max-width: 100%; overflow-x: hidden; }
  #qi-accordion table:not(#downtime-table) { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  #qi-accordion table:not(#downtime-table) td .row { margin-left: 0; margin-right: 0; }
  #qi-accordion table:not(#downtime-table) td .row > [class*='col-'] { padding-left: 0; padding-right: 0; }
  #qi-accordion table:not(#downtime-table) td input { min-width: 0 !important; }
}