/* Phone-first refinements for dense reports, receivables, and accounting records. */
@media (max-width: 600px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .app-shell, .app-shell > main, .workspace, .page, .feature-grid, .settings-grid, .content-grid {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .workspace { padding-inline: 12px; }
  .feature-card, .form-card, .summary-card, .report-stat, .collection-stat { min-width: 0; }
  .feature-card-head, .title-row { align-items: stretch; }
  .feature-card-head > *, .title-row > * { min-width: 0; }

  /* A clear vertical reading order is easier than squeezed metric columns. */
  .report-stats, .accounting-stats, .collection-insight-stats, .ledger-summary, .gst-filing-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .collection-stat strong {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
  .collection-insight-lists { grid-template-columns: minmax(0, 1fr) !important; gap: 20px; }
  .collection-customer-row { align-items: stretch; gap: 10px; }
  .collection-customer-row strong { display: block; overflow-wrap: anywhere; }
  .collection-row-actions { align-items: center; justify-content: space-between; width: 100%; }
  .collection-row-actions .customer-payment-button { flex: 1 1 150px; }

  /* Date filters and report actions get their own full-width rows. */
  .ledger-filters, .report-filters { display: grid; grid-template-columns: minmax(0, 1fr) !important; width: 100%; }
  .ledger-filters label, .ledger-filters label:first-child, .report-filters label { grid-column: auto !important; min-width: 0; width: 100%; }
  .ledger-filters input, .ledger-filters select, .ledger-filters button,
  .report-filters select, .report-filters button, .report-filters .period-pill { box-sizing: border-box; width: 100%; }
  .report-filters { align-items: stretch; gap: 9px; }
  .report-filters label { align-items: stretch; display: grid; gap: 5px; }
  .report-filters .period-pill { text-align: center; }
  .report-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .report-actions > button { width: 100%; }

  /* Search and sort controls stay usable without competing for a narrow row. */
  .grid-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .grid-toolbar label, .grid-toolbar button, .grid-toolbar .grid-count { margin: 0; min-width: 0; width: 100%; }
  .grid-toolbar .grid-count { text-align: left; }

  /* Purchase sections stay visible as a compact menu instead of a clipped tab strip. */
  .purchase-tabs {
    background: #f6faf8;
    border: 1px solid #e0e9e6;
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 18px;
    overflow: visible;
    padding: 6px;
    width: 100%;
  }
  .purchase-tabs a {
    align-items: center;
    border: 0;
    border-radius: 8px;
    display: flex;
    font-size: 12px;
    justify-content: center;
    line-height: 1.2;
    min-height: 42px;
    min-width: 0;
    padding: 8px 6px;
    text-align: center;
    white-space: normal;
  }
  .purchase-tabs a:last-child { grid-column: 1 / -1; }

  /* Invoice entry uses touch-friendly item cards instead of a compressed spreadsheet row. */
  #invoicePage .items-card { padding-bottom: 16px; }
  #invoicePage .invoice-items-table-wrap { margin: 0; overflow: visible; }
  #invoicePage .invoice-items-table-wrap table { display: block; min-width: 0; width: 100%; }
  #invoicePage .invoice-items-table-wrap thead { display: none; }
  #invoicePage .invoice-items-table-wrap tbody { display: grid; gap: 12px; }
  #invoicePage .invoice-items-table-wrap tr {
    background: #f8fbfa;
    border: 1px solid #dce9e5;
    border-radius: 12px;
    display: grid;
    gap: 10px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 13px;
    position: relative;
  }
  #invoicePage .invoice-items-table-wrap td {
    border: 0;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 0;
  }
  #invoicePage .invoice-items-table-wrap td::before {
    color: #667a74;
    content: attr(data-label);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
  }
  #invoicePage .invoice-items-table-wrap td:first-child { grid-column: 1 / -1; padding-right: 36px; }
  #invoicePage .invoice-items-table-wrap .product-autocomplete,
  #invoicePage .invoice-items-table-wrap .item-name,
  #invoicePage .invoice-items-table-wrap .compact-input,
  #invoicePage .invoice-items-table-wrap .gst-select { min-width: 0; width: 100%; }
  #invoicePage .invoice-items-table-wrap .item-name,
  #invoicePage .invoice-items-table-wrap .compact-input,
  #invoicePage .invoice-items-table-wrap .gst-select {
    background: #fff;
    border: 1px solid #cbdcd7;
    border-radius: 8px;
    min-height: 42px;
    padding: 9px 10px;
  }
  #invoicePage .invoice-items-table-wrap .line-amount {
    align-content: center;
    background: #e8f4ef;
    border-radius: 8px;
    color: #125a52;
    font-size: 16px;
    min-height: 42px;
    padding: 8px 10px;
    text-align: left;
  }
  #invoicePage .invoice-items-table-wrap .item-remove-cell {
    display: block;
    position: absolute;
    right: 8px;
    top: 8px;
  }
  #invoicePage .invoice-items-table-wrap .item-remove-cell::before { display: none; }
  #invoicePage .invoice-items-table-wrap .delete-item {
    align-items: center;
    background: #fff0eb;
    border-radius: 50%;
    color: #a8553d;
    display: inline-flex;
    font-size: 21px;
    height: 30px;
    justify-content: center;
    width: 30px;
  }
  #invoicePage.gst-included-pricing .invoice-items-table-wrap td:nth-child(5) { grid-column: 1 / -1; }
  #invoicePage .customer-picker { align-items: flex-start; padding: 12px; }
  #invoicePage .customer-info { min-width: 0; }
  #invoicePage .customer-info strong, #invoicePage .customer-info span { overflow-wrap: anywhere; }
  #invoicePage .change-button { flex: 0 0 auto; min-height: 38px; }

  /* Receipts become one-column information cards so customer names never get cut off. */
  .receipt-ledger .items-table-wrap { overflow: visible; }
  .receipt-ledger .ledger-table tbody tr { grid-template-columns: minmax(0, 1fr); }
  .receipt-ledger .ledger-table td {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    justify-content: flex-start;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .receipt-ledger .ledger-table td::before { text-align: left; }
  .receipt-ledger .ledger-table td:nth-child(8) { align-items: stretch; }
  .receipt-ledger .receipt-print { align-self: flex-start; min-height: 40px; padding-inline: 14px; }
  #shareInvoiceModal { display: none; }

  /* The customer name gets a full row in invoice cards, rather than sharing space with a date. */
  .invoice-ledger-card .ledger-table td:nth-child(2) {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .invoice-ledger-card .ledger-table td:nth-child(2)::before { text-align: left; }

  /* Camera scanning is explicit: typing and Bluetooth/USB scanners remain uninterrupted. */
  #invoicePage .retail-scan-panel .retail-scan-actions { display: flex; gap: 6px; grid-column: 2; grid-row: 2; width: auto; }
  #invoicePage .retail-scan-actions button { min-width: 0; padding-inline: 10px; }
  .barcode-camera-card { max-width: 520px; }
  .barcode-camera-preview { background: #112d29; border-radius: 12px; margin: 20px 0 14px; min-height: 240px; overflow: hidden; position: relative; }
  .barcode-camera-preview video { display: block; height: 100%; min-height: 240px; object-fit: cover; width: 100%; }
  .barcode-camera-frame { border: 3px solid #f5b34d; border-radius: 12px; inset: 27% 10%; pointer-events: none; position: absolute; }
  .barcode-camera-cancel { width: 100%; }

  .pagination-row { flex-wrap: wrap; }
}

@media (max-width: 390px) {
  .workspace { padding-inline: 10px; }
  .feature-card, .form-card, .summary-card { padding-inline: 13px; }
  .collection-row-actions { align-items: stretch; flex-direction: column; }
  .collection-row-actions .customer-payment-button { width: 100%; }
}

/* Camera capture is intended for a phone; desktop keeps the fast scanner-input workflow. */
#barcodeCameraButton { display: none; }
#barcodeCameraButton.hidden { display: none !important; }
@media (max-width: 600px) {
  #barcodeCameraButton { display: inline-flex; }
}