/**
 * 窄屏（手机）适配：电脑端的列表表格在手机上改成“一行一张卡片”，每个单元格显示 “列名 值”。
 * 配合 js/core/responsive-table.js（给单元格加 data-label）。想保留横向滚动的表格加 .erp-table-keep。
 */
@media (max-width: 767.98px) {
    /* ---- 列表表格 → 卡片 ---- */
    .erp-data-card .table-responsive:has(> table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix)) { overflow: visible; }

    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix),
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody,
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tfoot,
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr,
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tfoot > tr {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > thead { display: none; }

    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr,
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tfoot > tr {
        position: relative;
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--tblr-border-color, rgba(128, 128, 128, 0.2));
    }

    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr:last-child { border-bottom: 0; }

    .erp-data-card table.card-table.table-striped:not(.erp-table-keep):not(.erp-table-wide) > tbody > tr:nth-child(odd) {
        background: rgba(128, 128, 128, 0.045);
    }

    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr > td,
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tfoot > tr > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0.2rem 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        text-align: right !important;
        word-break: break-word;
        white-space: normal;
    }

    /* 列名 */
    .erp-data-card table.card-table > tbody > tr > td[data-label]::before,
    .erp-data-card table.card-table > tfoot > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 42%;
        color: var(--tblr-secondary-color, #6c7a91);
        font-size: 0.8125rem;
        font-weight: 400;
        text-align: left;
    }

    /* 没有列名的格子（勾选框、没有表头的列）：不留列名位置 */
    .erp-data-card table.card-table > tbody > tr > td[data-label=""]::before,
    .erp-data-card table.card-table > tfoot > tr > td[data-label=""]::before { display: none; }

    /* 序号列：卡片里没用 */
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr > td[data-col="serial"],
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tfoot > tr > td[data-col="serial"]:not(:only-child) { display: none; }

    /* 勾选框放卡片左上角 */
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr > td[data-col="check"] {
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        padding: 0 !important;
        width: auto !important;
    }

    /* 操作列：按钮靠右排开，上面加一条分隔线 */
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr > td[data-col="actions"] {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.375rem;
        margin-top: 0.375rem;
        padding-top: 0.5rem !important;
        border-top: 1px dashed var(--tblr-border-color, rgba(128, 128, 128, 0.25)) !important;
    }

    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr > td[data-col="actions"]::before { display: none; }

    /* 有勾选框的行：前几个单元格右边留位置，别被右上角的勾选框盖住 */
    .erp-data-card table.card-table > tbody > tr:has(> td[data-col="check"]) > td:nth-child(-n+3):not([data-col="check"]) { padding-right: 1.75rem !important; }

    /* 操作按钮：手机上点得到 */
    .erp-data-card table.card-table td .btn-icon,
    .erp-data-card table.card-table td .btn-sm { min-width: 2rem; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; }

    /* 里面是图标 + 名称 + 说明这类复合内容的单元格：整块靠左，不要列名 */
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr > td.erp-cell-block { display: block; text-align: left !important; }

    .erp-data-card table.card-table > tbody > tr > td.erp-cell-block::before { display: none; }

    /* 加载中 / 没有数据 这类整行单元格 */
    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr > td[colspan] {
        display: block;
        text-align: center !important;
        padding: 1.25rem 0 !important;
    }

    .erp-data-card table.card-table:not(.erp-table-keep):not(.erp-table-wide):not(.attend-matrix) > tbody > tr > td[colspan]::before { display: none; }

    /* 合计行：加粗，和明细卡片区分 */
    .erp-data-card table.card-table > tfoot > tr {
        background: rgba(32, 107, 196, 0.06);
        font-weight: 600;
    }

    /* 单元格里的图片 / 头像别撑破卡片 */
    .erp-data-card table.card-table td img { max-width: 4rem; height: auto; }

    /* ---- 页头、筛选、弹窗 ---- */
    .erp-page-root .page-header .btn-list,
    .erp-page-root .erp-page-actions { flex-wrap: wrap; gap: 0.375rem; }

    .modal-dialog:not(.modal-fullscreen):not(.modal-sm) { margin: 0.5rem; max-width: calc(100vw - 1rem); }

    .modal-dialog .modal-body .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    .modal-dialog .modal-body .table-responsive { overflow-x: auto; }

    /* 分页条换行居中 */
    .erp-data-card .card-footer { flex-wrap: wrap; gap: 0.5rem; justify-content: center !important; }

    /* ---- 开单明细等可编辑的明细表：一行明细一张卡片，输入框在右边 ---- */
    .table-responsive:has(> table.erp-line-cards) { overflow: visible; }

    table.erp-line-cards,
    table.erp-line-cards > tbody,
    table.erp-line-cards > tfoot,
    table.erp-line-cards > tbody > tr,
    table.erp-line-cards > tfoot > tr { display: block; width: 100% !important; min-width: 0 !important; }

    table.erp-line-cards > thead { display: none; }

    table.erp-line-cards > tbody > tr {
        position: relative;
        margin: 0 0 0.625rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--tblr-border-color, rgba(128, 128, 128, 0.25));
        border-radius: 0.5rem;
    }

    table.erp-line-cards > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: auto !important;
        min-width: 0 !important;
        padding: 0.25rem 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        text-align: right;
    }

    table.erp-line-cards > tbody > tr > td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--tblr-secondary-color, #6c7a91);
        font-size: 0.8125rem;
    }

    table.erp-line-cards > tbody > tr > td .form-control,
    table.erp-line-cards > tbody > tr > td .form-select,
    table.erp-line-cards > tbody > tr > td .input-group { flex: 1 1 auto; min-width: 0; max-width: 64%; margin-left: auto; }

    /* 删除行按钮：靠右 */
    table.erp-line-cards > tbody > tr > td[data-label=""] { justify-content: flex-end; }

    table.erp-line-cards > tfoot > tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.25rem 1rem;
        padding: 0.375rem 0.25rem;
        font-weight: 600;
    }

    table.erp-line-cards > tfoot > tr > td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; }

    table.erp-line-cards > tfoot > tr > td:empty { display: none; }

    /* 搜索下拉等弹出层别超出屏幕 */
    .erp-suggest, .erp-line-suggest { max-width: calc(100vw - 2rem); }
}