/* Phone and tablet layouts. Desktop presentation remains in app.css. */
@media (max-width: 900px) {
    .app-content, .app-content > *, .card, .form-field, .order-workspace-panel,
    .order-line-list, .order-line-card, .action-section-body { min-width: 0; max-width: 100%; }
    .form-grid, .master-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-line-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .supplier-po-upload, .supplier-document-upload-controls { grid-template-columns: minmax(0, 1fr); }
    .page-head, .card-head, .split-row, .entity-actions { flex-wrap: wrap; }
    .form-control, .form-select, .filter-select, .search-box input,
    .product-picker-search input, .message-composer textarea, textarea { font-size: 16px; }
    .app-content input:not([type="checkbox"]):not([type="radio"]), .app-content select,
    .app-content textarea, .current-work .form-control, .current-work .form-select { font-size: 16px; }
    .btn, .btn-sm, .filter-select, .form-control, .form-select { min-height: 44px; }
    button, a, summary, label { touch-action: manipulation; }
    .order-workspace-tabs, .tabs, .customer-modal-tabs, .supplier-modal-tabs, .user-modal-tabs {
        max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin;
        scroll-snap-type: x proximity; padding-bottom: 3px;
    }
    .order-workspace-tab, .tab, .customer-modal-tab, .supplier-modal-tab, .user-modal-tab {
        flex-shrink: 0; min-height: 48px; white-space: nowrap; scroll-snap-align: start;
    }
    .app-modal { max-height: calc(100dvh - 24px); }
    .product-picker-menu, .representative-picker-menu { min-width: 0; max-width: 100%; }
    .product-picker-options, .representative-picker-options { max-height: min(320px, 45dvh); overflow-y: auto; }
    .product-picker-option, .representative-picker-option { min-height: 48px; padding-block: 12px; }
    .product-picker-search { min-height: 48px; }
    .order-download-options { max-width: calc(100vw - 32px); }
}

@media (max-width: 700px) {
    body { font-size: 15px; }
    .page-head { gap: 14px; margin-bottom: 18px; }
    .page-head h1 { font-size: 1.65rem; overflow-wrap: anywhere; }
    .page-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .card-head, .card-body, .form-section { padding: 16px; }
    .card-head { align-items: flex-start; }
    .card-head > div { min-width: 0; }
    .card-head h2, .card-head h3 { font-size: 1rem; }
    .card-head p, .page-head p, .hint, .access-explanation { font-size: .82rem; line-height: 1.5; }
    .form-grid, .master-grid, .detail-grid, .order-payment-entry, .supplier-payment-checks,
    .order-line-fields, .order-line-workflow, .supplier-po-line-grid, .supplier-po-readonly-grid,
    .order-add-line-grid, .finance-work-grid, .account-manage-grid { grid-template-columns: minmax(0, 1fr); }
    .form-field label, .order-line-field > label { font-size: .8rem; letter-spacing: 0; }
    .form-control, .form-select, .filter-select, .search-box { width: 100%; min-width: 0; max-width: 100%; }
    .form-field, .form-field > *, .order-line-field > * { min-width: 0; max-width: 100%; }
    .toolbar { padding: 14px; align-items: stretch; gap: 10px; }
    .toolbar > *, .search-box { flex-basis: 100%; }
    .search-box { min-height: 46px; height: auto; }
    .search-box input { min-width: 0; min-height: 44px; }
    .form-actions, .inline-actions, .entity-actions, .customer-modal-record-actions,
    .supplier-product-actions, .supplier-document-actions, .document-register-actions { flex-wrap: wrap; gap: 8px; }
    .form-actions .btn, .entity-actions .btn { flex: 1 1 130px; white-space: normal; }

    /* The same register records and actions, with visible labels on every phone field. */
    .data-table-wrap:has(> .mobile-record-table) { overflow: visible; white-space: normal; }
    .mobile-record-table { display: block; width: 100%; table-layout: auto; }
    .mobile-record-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
    .mobile-record-table tbody { display: grid; gap: 12px; padding: 12px; }
    .mobile-record-table tbody tr { display: block; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: #fff; }
    .mobile-record-table tbody td { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 5px 12px; align-items: start; padding: 10px 0; border: 0; border-bottom: 1px solid #f0f1f3; white-space: normal; font-size: .86rem; text-align: left; overflow-wrap: anywhere; }
    .mobile-record-table tbody td::before { content: attr(data-label); grid-column: 1; grid-row: 1; font-size: .73rem; font-weight: 650; color: var(--ink-muted); }
    .mobile-record-table tbody td > * { grid-column: 2; min-width: 0; max-width: 100%; }
    .mobile-record-table tbody td > .status { justify-self: start; }
    .mobile-record-table tbody td:last-child { border-bottom: 0; }
    .mobile-record-table tbody td[data-label="Actions"], .mobile-record-table tbody td[data-label="Records"],
    .mobile-record-table tbody td[data-label="Account credit"] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .mobile-record-table tbody td[data-label="Actions"]::before { display: none; }
    .mobile-record-table td .btn { min-height: 44px; white-space: normal; }
    .mobile-record-table td .split-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .mobile-record-table td .stage-meter { width: 100%; min-width: 0; }
    .stage-meter-label { flex-wrap: wrap; gap: 4px; }
    .table-primary, .avatar-name { min-width: 0; white-space: normal; }
    .table-primary small { font-size: .75rem; white-space: normal; }
    .avatar-name > span:last-child { overflow-wrap: anywhere; }
    .mobile-record-table tbody td[colspan] { display: block; }
    .mobile-record-table tbody td[colspan]::before { display: none; }

    .order-workspace-header { padding: 16px 16px 0; }
    .order-summary-title { flex-wrap: wrap; min-width: 0; }
    .order-summary-title h1 { overflow-wrap: anywhere; }
    .order-header-download-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .order-download-menu > summary, .order-header-download-actions > .btn { width: 100%; }
    .order-download-options { width: 100%; min-width: 0; }
    .order-download-options a { min-height: 44px; padding: 12px; }
    .order-summary-facts, .detail-facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .fact { min-width: 0; overflow-wrap: anywhere; }
    .fact small { font-size: .73rem; }
    .order-workspace-tab { font-size: .82rem; }
    .current-work-head, .current-work .action-body { padding: 16px; }
    .current-work-stage h2 { font-size: 1.25rem; }
    .current-work .action-section > summary { gap: 8px; padding-block: 18px; }
    .current-work .action-section-state { max-width: 110px; white-space: normal; text-align: center; }
    .current-work .work-supporting-documents > summary { flex-wrap: wrap; gap: 8px; min-height: 48px; }
    .current-work .requirement-actions { width: 100%; justify-content: flex-start; }
    .current-work .requirement-upload { align-items: stretch; }
    .current-work .requirement-upload small { max-width: 100%; text-align: left; }
    .po-number-editor { margin-left: 0; flex-direction: column; }
    .current-work .action-section-body > .workflow-wide, .payment-form-actions .btn { width: 100%; }
    .supplier-document-file-picker, .document-file-picker { flex-wrap: wrap; min-height: 52px; padding: 10px; gap: 10px; }
    .supplier-document-file-button { min-height: 44px; font-size: .85rem; }
    .order-payment-entry .payment-proof-picker .supplier-document-file-button,
    .current-work .supplier-document-file-button { min-height: 44px; font-size: .85rem; }
    label.checkbox, label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 10px; min-height: 44px; }
    .supplier-document-file-picker small { width: 100%; overflow-wrap: anywhere; font-size: .78rem; }
    .document-register-row, .supplier-document-row, .supplier-po-line-head { flex-direction: column; align-items: stretch; }
    .document-scope { padding: 12px 16px 18px; }
    .document-stage > summary { flex-wrap: wrap; padding: 16px; gap: 8px; }
    .document-register-upload { flex-direction: column; align-items: stretch; }
    .document-register-upload > * { width: 100%; min-width: 0; }
    .document-register-actions .btn { flex: 1 1 120px; }
    .order-line-card-head { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .order-line-identity, .quote-capture-product { width: 100%; }
    .order-line-price { margin-left: 0; text-align: left; justify-items: start; }
    .order-line-field { padding: 14px; }
    .order-line-value { font-size: .88rem; }
    .quote-capture-head-actions { width: 100%; justify-content: space-between; }
    .line-item-type-toggle button { min-height: 44px; padding-inline: 18px; font-size: .85rem; }
    .line-remove, .line-text-remove, .order-subline-actions button, .order-accordion-chevron { min-width: 44px; min-height: 44px; }
    .order-subline-entry, .order-subline-item.is-editing { grid-template-columns: minmax(0, 1fr); }
    .order-subline-actions, .order-subline-editor-actions { flex-wrap: wrap; }
    .order-subline-editor-actions .btn { flex: 1 1 100px; }
    .quote-summary { flex-direction: column; gap: 12px; font-size: .88rem; }
    .quote-summary > span { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .message-list, .message-composer { padding: 16px; }
    .message-text, .message-body { font-size: .9rem; overflow-wrap: anywhere; }
    .message-composer-actions { flex-wrap: wrap; gap: 10px; }
    .message-composer-actions .btn { min-height: 44px; }
    .mention-menu { max-width: 100%; }
    .timeline-item { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
    .timeline-time { grid-column: 2; white-space: normal; font-size: .75rem; }
    .timeline-copy { min-width: 0; overflow-wrap: anywhere; }
    .timeline-copy p { font-size: .85rem; }
    .app-modal-backdrop { padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); align-items: center; }
    .app-modal { width: 100%; max-width: 100%; max-height: calc(100dvh - 16px); border-radius: 10px; }
    .app-modal-head { padding: 16px; align-items: flex-start; }
    .app-modal-head > div { min-width: 0; }
    .app-modal-head h2 { font-size: 1.15rem; overflow-wrap: anywhere; }
    .app-modal-close { min-width: 44px; min-height: 44px; flex-shrink: 0; }
    .app-modal-body { padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
    .app-modal-body .form-section { padding: 16px 0; }
    .app-modal-body .form-section:first-child { padding-top: 0; }
    .modal-actions { flex-wrap: wrap; }
    .modal-actions .btn { flex: 1 1 120px; }
    .supplier-product-prices, .supplier-product-prices.supplier-service-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .permission-module-head label { flex-wrap: wrap; }
    .module-selector, .role-picker-list { grid-template-columns: minmax(0, 1fr); }
    .toast-region { left: 12px; right: 12px; width: auto; max-width: none; }
    .toast { max-width: 100%; width: 100%; }
}

@media (max-width: 380px) {
    .mobile-record-table tbody td { grid-template-columns: minmax(0, 1fr); }
    .mobile-record-table tbody td > *, .mobile-record-table tbody td::before { grid-column: 1; grid-row: auto; }
    .dashboard-workload-heading { flex-wrap: wrap; }
}