/* Owner records and delivery controls across touch and smaller screens. */
.customer-header > strong { min-width: 0; overflow-wrap: anywhere; }
.customer-header .customer-header-actions { flex-wrap: wrap; }
.pending-person > div { min-width: 0; overflow-wrap: anywhere; }
.pending-payment, .pending-overview > div { min-width: 0; overflow-wrap: anywhere; }
.pending-deliveries, .delivery-modal {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body:has(.pending-deliveries[open], .delivery-modal[open]) { overflow: hidden; }
@media (max-width: 1024px) {
  .customer-header .customer-new-bill, .pending-call, .pending-close,
  .delivery-actions .button, #searchBtn { min-height: 44px; }
  .pending-close { min-width: 44px; }
  .customer-record .bill-actions .button { min-height: 44px !important; }
  .toolbar #search, #recordPeriod, #recordMonth, #recordYear { min-width: 0; min-height: 44px; font-size: 16px; }
  #recordSummary:not(:empty) { flex-direction: column; align-items: stretch; gap: 16px; }
  .record-summary-totals { gap: 14px; }
  .record-summary-totals > div:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .wrap > .summary { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px; }
  .wrap > .summary .stat { min-width: 0; padding: 16px; }
  .wrap > .summary .stat strong { overflow-wrap: anywhere; }
  .customer-header { flex-wrap: wrap; }
}
@media (max-width: 650px) {
  .wrap > .summary .outstanding-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0 12px;
    padding: 18px 18px 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .outstanding-card > small {
    margin: 0;
    padding-bottom: 18px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
  }
  .outstanding-card > strong {
    margin: 0;
    padding-bottom: 18px;
    text-align: right;
    color: var(--ink);
    font-size: clamp(20px, 6vw, 26px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .outstanding-card .outstanding-link {
    grid-column: 1 / -1;
    align-items: center;
    min-height: 48px;
    margin: 0 -18px;
    padding: 10px 18px;
    border-top: 1px solid var(--line);
    background: var(--soft);
    color: var(--teal);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
  }
  .outstanding-link > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--card);
    font-size: 18px;
  }
  .outstanding-card:active .outstanding-link { background: var(--teal); color: #fff; }
  .outstanding-card:active .outstanding-link > span { color: var(--teal); }
  .customer-header { flex-wrap: wrap; align-items: center; }
  .customer-header > strong { flex: 1 1 150px; }
  .customer-header .customer-header-actions { gap: 10px; }
  .customer-record .bill-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-basis: auto;
    align-items: stretch;
  }
  .customer-record .bill-actions .button { width: 100% !important; min-width: 0; white-space: normal; }
  .customer-record .bill-actions .delivery-status {
    grid-column: 1 / -1; justify-self: start; margin: 0 0 4px;
  }
  .customer-record .bill-actions [data-delivery] { grid-column: 1 / -1; margin: 0; }
  .customer-record .bill-actions .delete-bill-button { grid-column: 1 / -1; }
  .toolbar:has(#recordPeriod) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .toolbar #search { width: 100%; }
  #recordPeriod { grid-column: 1 / -1; width: 100%; }
  #recordMonth, #recordYear { grid-column: 1 / -1; width: 100%; }
  .pending-deliveries { width: calc(100% - 20px); border-radius: 18px; }
  .pending-header { padding: 18px; }
  .pending-header h2 { font-size: 22px; }
  .pending-body { padding: 16px; }
  .pending-order { grid-template-columns: minmax(0, 1fr); }
  .pending-payment { justify-items: start; padding-left: 50px; }
  .pending-order-actions { align-items: stretch; }
  .pending-call { flex: 1 1 100%; justify-content: center; font-size: 14px; }
  .pending-waiting { width: 100%; text-align: center; }
  .delivery-modal { width: calc(100% - 24px); padding: 20px; }
  .delivery-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .delivery-actions .button { width: 100%; white-space: normal; }
}
@media (max-width: 380px) {
  .customer-header .customer-header-actions { width: 100%; justify-content: space-between; }
  .record-summary-totals { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .record-summary-totals > div { padding-left: 0; border-left: 0; }
  .pending-overview { gap: 12px; padding: 14px; }
  .pending-overview strong { font-size: 18px; }
}
@media (hover: none) {
  .customer-header .customer-new-bill:hover { background: var(--card); color: var(--teal); }
  .customer-header .customer-new-bill:active { background: var(--teal2); color: #fff; }
}