/* Opt-in document lists only. Desktop/tablet tables retain their existing styles. */
@media (max-width: 600px) {
    .mobile-doc-group.card-app {
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }
    .mobile-doc-group .card-app__header {
        padding: 12px 4px;
        border: 0;
        gap: 10px;
        align-items: center;
    }
    .mobile-doc-group .card-app__title { font-size: 14px; line-height: 1.5; }
    .mobile-doc-group .card-app__header > .badge-app { flex-shrink: 0; }
    .mobile-doc-group .table-scroll { overflow: visible; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table,
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody { display: block; width: 100%; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table thead { display: none; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody tr {
        display: grid;
        align-items: start;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-flow: row dense;
        gap: 14px 8px;
        width: 100%;
        margin: 0 0 14px;
        padding: 16px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 16px;
        box-shadow: 0 2px 6px rgb(0 0 0 / 3%);
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody tr::after { display: none; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td {
        display: flex;
        position: static;
        inset: auto;
        align-self: stretch;
        flex-wrap: nowrap;
        background: transparent;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        grid-column: span 6;
        grid-row: auto;
        gap: 4px;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        color: var(--color-text);
        font-size: 14px;
        line-height: 1.5;
        text-align: left !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td::before {
        content: attr(data-label);
        display: block;
        flex: 0 0 auto;
        font-family: inherit;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
        color: var(--color-muted);
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td > br { display: none; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td > small { font-size: 12px; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td > * { min-width: 0; max-width: 100%; }

    /* Document and status share the first row; other fields flow below them. */
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:is([data-label^="เลขที่"], [data-label="Quotation No."]) {
        grid-column: 1 / 9;
        grid-row: 1;
        font-size: 16px;
        font-weight: 700;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:is([data-label^="เลขที่"], [data-label="Quotation No."]) strong {
        font-size: 16px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:is([data-label="สถานะ"], [data-label="สถานะนับ"]) {
        grid-column: 9 / -1;
        grid-row: 1;
        align-items: flex-end;
        text-align: right !important;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td[data-label="สถานะ"]::before { display: none; }
    /* Transfer and Journal statuses include explanations; reserve half the header. */
    .mobile-doc-group .table-app.table-cards.mobile-doc-table:has(.badge-status) tbody td:is([data-label="เลขที่โอน"], [data-label="เลขที่เอกสาร"]) {
        grid-column: 1 / 7;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table:has(.badge-status) tbody td[data-label="สถานะ"] {
        grid-column: 7 / -1;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .badge-status {
        padding: 3px 6px;
        font-size: 11px;
        gap: 4px;
        letter-spacing: 0;
        justify-content: center;
        text-align: center;
        overflow-wrap: normal;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .badge-status::before {
        width: 5px;
        height: 5px;
        flex-shrink: 0;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .badge-app {
        max-width: 100%;
        white-space: normal;
        text-align: inherit;
        line-height: 1.45;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:is([data-label="โรงงาน / รายการ"], [data-label="โรงงาน"], [data-label="Supplier"], [data-label="ลูกค้า"], [data-label="Transfer / สาขา"], [data-label="Transfer"], [data-label="Req"], [data-label="อัปเดตล่าสุด"], .transfer-card__updated) {
        grid-column: 1 / -1;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:is([data-label="โรงงาน / รายการ"], [data-label="Transfer / สาขา"]) div {
        font-size: 14px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:is([data-label="อัปเดตล่าสุด"], .transfer-card__updated) {
        padding-top: 12px;
        border-top: 1px solid var(--color-border);
        font-size: 13px;
        color: var(--color-muted);
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .transfer-card__updated::before { content: "อัปเดตล่าสุด"; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .cell-stack { align-items: flex-start; text-align: left; }
    /* The older Pick skin hides this field with !important on phones. */
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td[data-label="ผู้หยิบ"] { display: flex !important; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .transfer-card__req { font-size: 12px; font-weight: 400; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .transfer-card__factory-list { flex-wrap: wrap; }

    /* Preserve batch selection, with a visible caption and a comfortable touch area. */
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:has(> input[type="checkbox"]) {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        border-bottom: 1px solid var(--color-border);
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:has(> input[type="checkbox"])::before { display: none; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:has(> input[type="checkbox"])::after {
        content: "เลือกเอกสาร";
        font-size: 13px;
        color: var(--color-muted);
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table input[type="checkbox"] { width: 24px; height: 24px; margin: 0; accent-color: var(--color-text); }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody tr:has(input:checked) { border-color: var(--color-text); }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:empty { display: none; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:is([data-label=""], :not([data-label])):not(:has(*)),
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:has(> .row-actions:not(:has(a, button))) { display: none; }

    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:has(> .row-actions) {
        grid-column: 1 / -1;
        grid-row: auto;
        padding-top: 4px;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td:has(> .row-actions)::before { display: none; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table tbody td .row-actions {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
        padding: 0;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .row-actions :is(.btn-icon-app, .btn-app) {
        display: inline-flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        height: auto;
        width: auto;
        max-width: 100%;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.5;
        text-decoration: none;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .row-actions .btn-icon-app::after {
        display: inline;
        font-size: 13px;
        white-space: normal;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .row-actions a[title="ดูรายละเอียด"] {
        flex-basis: 100%;
        background: var(--color-text);
        border-color: var(--color-text);
        color: var(--color-surface);
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .row-actions .pr-copy::after { content: "คัดลอก"; }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table .row-actions :is(a, button):focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }
}

@media (max-width: 360px) {
    .mobile-doc-group .table-app.table-cards.mobile-doc-table:has(.badge-status) tbody td:is([data-label="เลขที่โอน"], [data-label="เลขที่เอกสาร"]) {
        grid-column: 1 / 6;
    }
    .mobile-doc-group .table-app.table-cards.mobile-doc-table:has(.badge-status) tbody td[data-label="สถานะ"] {
        grid-column: 6 / -1;
    }
}