/* 物料领退：领料（→仓库出库单）与退料（→仓库入库单）两张台账共用一个栏。
   两段式：新建只暂存在本地，核对后点「提交申请」才发到仓库。 */

.mr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.mr-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.mr-title-icon {
    background: linear-gradient(135deg, #0f4c5c, #1a6b7c, #2a93a8);
    box-shadow: 0 6px 18px rgba(15, 76, 92, 0.28);
}
.mr-title {
    margin: 0;
    color: var(--water-dark);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    font-family: var(--font-display);
}
.mr-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mr-actions .btn {
    padding: 9px 16px;
    font-size: 14px;
}

/* 领料 / 退料 两个页签 */
.mr-kind-tabs {
    display: inline-flex;
    gap: 6px;
    background: #f5f9fa;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 14px;
}
.mr-kind {
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #526a73;
    cursor: pointer;
    white-space: nowrap;
}
.mr-kind.active {
    background: #fff;
    color: var(--water-dark);
    box-shadow: 0 1px 3px rgba(15, 76, 92, 0.16);
}

.mr-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}
.mr-toolbar select,
.mr-toolbar input[type="text"] {
    padding: 8px 12px;
    border: 2px solid #e0e8ed;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    min-width: 150px;
}
/* 工地筛选改成自绘下拉后，输入框被包进 .mr-combo，上面那条选择器就不再命中它：
   这里把宽度口径补回来，保证和「全部状态」下拉并排、不吃掉按钮的位置。
   用 flex-basis 而不是 flex:1——工具栏是 wrap 布局，写死 flex:1 会跟状态下拉抢宽度，
   窄屏上把按钮挤到下一行。 */
.mr-toolbar .mr-combo {
    /* 宽度对齐改动前那颗裸 input（实测 192px）：.mr-toolbar input 的 min-width 是 150px，
       但它受 flex 收缩影响，实际宽 192px。这里给同样的弹性口径，视觉上不产生位移。 */
    flex: 0 1 auto;
    width: 192px;
    min-width: 150px;
}
.mr-toolbar .mr-combo-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 30px 8px 12px;   /* 右侧给箭头留位 */
    border: 2px solid #e0e8ed;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
}
.mr-toolbar .mr-combo-panel {
    min-width: 150px;
}

/* 卡片按「三张一排」时的宽度（取整行的三分之一），靠左排——
   原来 auto-fit + 1fr：只剩两张时会被拉成半行那么宽（2026-10-06 用户反馈） */
.mr-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.mr-summary .mr-card {
    flex: 0 1 calc((100% - 32px) / 3);
    min-width: 170px;
    background: #fff;
    border-radius: var(--radius);
    padding: 18px 22px;
    box-shadow: var(--shadow-sm);
}
.mr-summary .mr-card-label {
    font-size: 12px;
    color: var(--ink-mid);
    margin-bottom: 8px;
}
.mr-summary .mr-card-value {
    font-size: 26px;
    font-weight: 700;
}

.mr-list-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.mr-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef3f5;
    flex-wrap: wrap;
}
.mr-row:last-child {
    border-bottom: none;
}
.mr-row-main {
    min-width: 260px;
    flex: 1 1 320px;
}
.mr-row-title {
    font-weight: 700;
    color: var(--ink-dark);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mr-row-meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-light);
    line-height: 1.7;
}
.mr-row-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mr-badge {
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.mr-wms-id {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: #7b8c93;
}
.mr-items {
    margin-top: 6px;
    font-size: 12px;
    color: #4a5c62;
    line-height: 1.8;
}
.mr-empty {
    padding: 50px 20px;
    text-align: center;
    color: #98a6ab;
    font-size: 14px;
}
.mr-amount {
    font-weight: 700;
    color: #b8860b;
}

/* 新建弹窗：工地 / 仓库 / 明细 */
.mr-item-row {
    display: grid;
    /* 物料 / 数量 / 删除：这一栏不显示金额了（2026-10-06），单价那格撤掉。
       2026-10-11 用户口径：物料那一格别撑满——给个正常宽度（最长 360px），整行靠左 */
    grid-template-columns: minmax(220px, 360px) 120px auto;
    justify-content: start;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}
.mr-item-row input {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid #e0e8ed;
    border-radius: 8px;
    font-size: 13px;
}
.mr-item-head {
    display: grid;
    grid-template-columns: minmax(220px, 360px) 120px auto;
    justify-content: start;
    gap: 8px;
    padding: 8px 10px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}

/* 物料那一格：点开是下拉，打字就是搜索（候选按名称/规格/编码过滤） */
.mr-combo {
    position: relative;
}
.mr-item-row .mr-combo-input,
/* 申请工地那一格不在 .mr-item-row 里，箭头同样需要留位（否则压在文字上） */
#material-req-site-combo .mr-combo-input {
    padding-right: 30px;   /* 给箭头留位置 */
}
.mr-combo-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #8a9aa0;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}
.mr-combo-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    background: #fff;
    border: 1px solid #dbe4e9;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(23, 62, 74, .12);
    z-index: 30;
}
.mr-combo-opt {
    padding: 7px 10px;
    font-size: 13px;
    color: var(--ink);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mr-combo-opt:hover,
.mr-combo-opt.active {
    background: #eef6f8;
}
.mr-combo-opt.is-picked {
    color: var(--water-dark);
    font-weight: 600;
}
.mr-combo-empty {
    padding: 8px 10px;
    font-size: 12px;
    color: #98a6ab;
}
.mr-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-light);
    line-height: 1.7;
}

/* 手机端：这一栏挂在「工地」栏的第三个子标签下，进来的第一眼要是列表和按钮，
   所以标题行让位给子标签栏，筛选/汇总/明细都改成单列可点的排布。 */
@media (max-width: 768px) {
    /* 子标签栏已经写着「物料领退」了，标题行省掉，两个按钮铺满一行更好按 */
    .mr-title-row { display: none; }
    .mr-actions { width: 100%; }
    .mr-actions .btn { flex: 1 1 auto; justify-content: center; padding: 11px 12px; }

    .mr-kind-tabs { display: flex; width: 100%; }
    .mr-kind { flex: 1; text-align: center; padding: 9px 6px; }

    .mr-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }
    .mr-toolbar select,
    .mr-toolbar input[type="text"] { width: 100%; min-width: 0; }
    .mr-toolbar .mr-hint { grid-column: 1 / -1; margin: 0; }

    .mr-summary { gap: 10px; margin-bottom: 12px; }
    .mr-summary .mr-card { flex: 1 1 45%; min-width: 0; padding: 12px 14px; }
    .mr-summary .mr-card-label { margin-bottom: 4px; }
    .mr-summary .mr-card-value { font-size: 20px; }

    .mr-row { padding: 12px 14px; }
    .mr-row-main { min-width: 0; flex: 1 1 100%; }
    .mr-row-side { width: 100%; justify-content: flex-end; }
    .mr-row-side .btn { flex: 1 1 auto; text-align: center; padding: 9px 12px; }
    .mr-items { line-height: 2; }

    /* 明细行：物料占整行，数量与单价并排，× 浮在右上角（不占列，免得把下拉挤窄）；
       表头在手机上没意义，去掉 */
    .mr-item-head { display: none; }
    .mr-item-row {
        position: relative;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 40px 10px 10px;
        border: 2px solid #eef3f5;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .mr-item-row > .mr-combo { grid-column: 1 / -1; }
    .mr-item-row > .mr-item-qty { grid-column: 1 / -1; }
    .mr-item-row > button { position: absolute; top: 8px; right: 8px; }

    /* 弹窗：手机上几乎全屏，两列表单收成一列，底部按钮整行可点 */
    #material-request-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0;
        padding: 16px;
    }
    #material-request-modal .mr-form-grid { grid-template-columns: 1fr !important; }
    /* 申请工地：手机上选项做大一点，手指好点（和物料那一格共用同一套面板样式） */
    #material-req-site-combo .mr-combo-panel { max-height: 46vh; }
    #material-req-site-combo .mr-combo-opt { padding: 12px 12px; font-size: 15px; }
    #material-req-site-combo .mr-combo-input { font-size: 16px; }
    /* 三个按钮挤一行会把「暂存并提交仓库」截断：前两个并排，主按钮单独占一行 */
    #material-request-modal .mr-modal-actions { flex-wrap: wrap; }
    #material-request-modal .mr-modal-actions .btn { flex: 1 1 46%; padding: 12px 10px; }
    #material-request-modal .mr-modal-actions .btn:last-child { flex-basis: 100%; }
}