@charset "utf-8";

/* ============================================================
   物料清单相关样式（member_material.php + material_list_detail.php）
   从对应模板的内联 <style> 抽取合并而来
   ============================================================ */

/* ========== 我的物料（member_material.php）========== */

.material-container {
    padding: 20px;
}

.material-header h2 {
    font-size: 24px;
    color: #333;
    margin: 0;
    font-weight: 600;
}

.material-header p {
    color: #666;
    margin: 8px 0 0 0;
    font-size: 14px;
}

/* 清单卡片网格：一行固定4个 */
.material-lists-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

/* 清单卡片样式 */
.material-list-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.material-list-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 卡片封面区域 */
.card-cover {
    position: relative;
    aspect-ratio: 1 / 1;          /* 正方形封面，贴合四宫格 */
    background: #f5f5f5;
    overflow: hidden;
}

/* 封面 2:1:1 布局：左侧1张占1/2，右侧2张上下各占1/4 */
.cover-images {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 2px;
    background: #fff;              /* 间隙白色露出，形成分割线 */
}

.cover-main {
    flex: 1;                       /* 左侧占 1/2，与右侧等宽 */
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
    min-width: 0;
}

.cover-secondary {
    flex: 1;                       /* 占 1/4，内部再上下二分 */
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cover-secondary-item {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
    min-height: 0;
}

.cover-main img,
.cover-secondary-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 空状态（单个格子占位） */
.cover-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%);
}

.cover-empty .empty-icon {
    font-size: 28px;
    color: #c8c8c8;
    font-weight: 300;
}

/* 整个封面都无物料时的居中空状态 */
.cover-empty-center {
    flex-direction: column;
    gap: 6px;
}

.cover-empty-center .empty-icon {
    font-size: 40px;
}

.cover-empty .empty-text {
    color: #999;
    font-size: 12px;
}

/* 卡片内容区域：标题与数量同一行 */
.card-content {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.card-title {
    font-size: 12px;
    font-weight: 400;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.card-count {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 500;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}

.card-count .count-icon {
    color: #999;
    flex-shrink: 0;
}

.card-count .count-number {
    font-size: 13px;
    font-weight: 600;
    color: #4791d0;
}

/* 卡片右上角操作按钮组（编辑 + 删除） */
.material-list-card { position: relative; }
.card-ops { position: absolute; top: 8px; right: 8px; z-index: 10; display: flex; gap: 6px; align-items: center; opacity: 0; transition: opacity .2s; }
.material-list-card:hover .card-ops { opacity: 1; }
.card-edit { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; cursor: pointer; transition: background .2s; }
.card-edit:hover { background: #4791d0; }
.card-del { width: 24px; height: 24px; line-height: 22px; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; font-size: 18px; cursor: pointer; transition: background .2s; }
.card-del:hover { background: #dc3545; }

/* 批量删除：标题栏按钮 */
.hd-actions { display: flex; gap: 10px; align-items: center; }
.btn-create-list { display: inline-block; padding: 7px 18px; border-radius: 6px; font-size: 13px; color: #fff; background: #4791d0; transition: all .2s; }
.btn-create-list:hover { background: #3a7bc8; color: #fff; }
.btn-batch { display: inline-block; padding: 6px 16px; border-radius: 6px; font-size: 13px; color: #4791d0; border: 1px solid #4791d0; background: #fff; transition: all .2s; }
.btn-batch:hover { background: #4791d0; color: #fff; }
.btn-batch-cancel { color: #666; border-color: #ccc; }
.btn-batch-cancel:hover { background: #999; color: #fff; border-color: #999; }
.btn-batch-danger { color: #fff; background: #dc3545; border-color: #dc3545; }
.btn-batch-danger:hover { background: #c82333; border-color: #c82333; }

/* 批量选择复选框（默认隐藏，选择态显示） */
.card-check { position: absolute; top: 8px; left: 8px; z-index: 11; width: 20px; height: 20px; display: none; }
.card-check .batch-check { width: 20px; height: 20px; cursor: pointer; accent-color: #4791d0; }
/* 选择态：显示复选框，隐藏编辑/删除按钮 */
.material-container.batch-mode .card-check { display: block; }
.material-container.batch-mode .card-ops { display: none; }
.material-list-card.selected { box-shadow: 0 0 0 2px #4791d0; }

/* 编辑清单弹窗表单 */
.edit-list-form { padding: 20px; }
.edit-list-form .edit-field { margin-bottom: 14px; }
.edit-list-form .edit-field label { display: block; margin-bottom: 6px; font-size: 13px; color: #555; }
.edit-list-form .edit-field input, .edit-list-form .edit-field textarea { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; color: #333; outline: none; resize: vertical; font-family: inherit; box-sizing: border-box; }
.edit-list-form .edit-field input:focus, .edit-list-form .edit-field textarea:focus { border-color: #4791d0; }
.edit-list-form .edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.edit-list-form .edit-cancel { padding: 7px 18px; border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #666; font-size: 14px; cursor: pointer; }
.edit-list-form .edit-cancel:hover { background: #f5f5f5; }
.edit-list-form .edit-save { padding: 7px 18px; border: none; border-radius: 4px; background: #4791d0; color: #fff; font-size: 14px; cursor: pointer; }
.edit-list-form .edit-save:hover { background: #3a7bc8; }

/* 我的物料 - 空状态 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 12px;
    margin-top: 20px;
}

.empty-state .empty-icon {
    font-size: 64px;
    color: #ddd;
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 18px;
    color: #333;
    margin: 0 0 10px 0;
}

.empty-state p {
    font-size: 14px;
    color: #666;
    margin: 0 0 20px 0;
}

.empty-state .btn-create {
    display: inline-block;
    padding: 10px 24px;
    background: #4791d0;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.empty-state .btn-create:hover {
    background: #3a7bc8;
    color: #fff;
}

/* 非会员引导卡片（物料清单功能锁定） */
.vip-lock-guide {
    text-align: center;
    padding: 70px 20px;
    background: #fff;
    border-radius: 12px;
    margin-top: 20px;
}
.vip-lock-guide .lock-icon {
    color: #d4a857;
    margin-bottom: 24px;
}
.vip-lock-guide h3 {
    font-size: 18px;
    color: #333;
    margin: 0 0 12px 0;
}
.vip-lock-guide p {
    font-size: 14px;
    color: #888;
    line-height: 1.8;
    margin: 0 0 28px 0;
}
.vip-lock-guide .btn-open-vip {
    display: inline-block;
    padding: 12px 40px;
    background: linear-gradient(135deg, #e6b15e 0%, #d4a857 100%);
    color: #fff;
    border-radius: 24px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(212, 168, 87, 0.4);
    transition: all 0.3s ease;
}
.vip-lock-guide .btn-open-vip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 168, 87, 0.5);
    color: #fff;
}


/* ========== 物料明细（material_list_detail.php）========== */

.detail-container {
    padding: 10px;
}

.detail-header {
    margin-bottom: 10px;
}

.detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.detail-header h2 {
    font-size: 24px;
    color: #333;
    margin: 0;
    font-weight: 600;
}

.detail-header .description {
    color: #666;
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 1.5;
}

.detail-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #999;
    font-size: 13px;
}

.detail-meta .count {
    color: #4791d0;
    font-weight: 600;
}

.detail-meta .count-number {
    font-size: 18px;
}

/* 操作按钮区域 */
.action-buttons {
    display: flex;
    gap: 12px;
}

.action-buttons .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-buttons .btn-back {
    background: #6c757d;
    color: #fff;
}

.action-buttons .btn-back:hover {
    background: #5a6268;
}

.action-buttons .btn-export {
    background: #28a745;
    color: #fff;
}

.action-buttons .btn-export:hover {
    background: #218838;
}

/* 物料列表表格 */
.materials-table {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.materials-table table {
    width: 100%;
    border-collapse: collapse;
}

.materials-table thead {
    background: #f8f9fa;
}

.materials-table th {
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    color: #333;
    font-size: 13px;
    border-bottom: 2px solid #e9ecef;
    white-space: nowrap;
}

.materials-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    text-align: center;
    font-size: 13px;
}

.materials-table tbody tr:hover {
    background: #f8f9fa;
}

.materials-table .material-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

/* 放大镜小图：鼠标悬浮显示放大图 */
.materials-table .material-image.zoom-thumb {
    cursor: zoom-in;
}

/* 放大镜悬浮层 */
.zoom-magnifier {
    position: absolute;
    z-index: 9999;
    /* 不设固定宽高，让图片按原图尺寸撑开容器 */
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    padding: 6px;
    pointer-events: none;
    display: none;
}
.zoom-magnifier img {
    /* 不设 width/height，使用图片固有（原图）尺寸；仅设上限防止超大图撑爆屏幕 */
    max-width: 50vw;
    max-height: 75vh;
    display: block;
    border-radius: 3px;
}

.materials-table .material-name {
    font-size: 14px;
    color: #333;
    font-weight: 700;
    line-height: 1.4;
    min-width: 150px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.materials-table .price-unit {
    color: #999;
}

.materials-table .list-code {
    font-family: 'Courier New', monospace;
    color: #4791d0;
    font-weight: 600;
}

.materials-table .fire-rating {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.materials-table .fire-rating.a {
    background: #d4edda;
    color: #155724;
}

.materials-table .fire-rating.b {
    background: #fff3cd;
    color: #856404;
}

.materials-table .material-actions {
    text-align: center;
    min-width: 80px;
}

.materials-table .btn-delete {
    padding: 0;
    background: transparent;
    color: #dc3545;
    border: none;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.materials-table .btn-delete:hover {
    color: #c82333;
    text-decoration: underline;
}

/* 物料明细 - 空状态 */
.empty-table {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-table .empty-icon {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 16px;
}

.empty-table h3 {
    font-size: 16px;
    color: #333;
    margin: 0 0 8px 0;
}

.empty-table p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* 物料明细页：放宽右侧内容区，让表格更宽（仅此页，不影响其它会员页） */
.row-inner2 .row-cor.row-cor--wide {
    padding: 0 16px 22px;
}
.detail-container {
    padding: 10px 6px;
}

@media only screen and (min-width:950px) and (max-width:1920px) {
    .row-inner2 .row-cor.row-cor--wide {
        padding: 0 0.833vw 1.145vw;
    }
}


/* ============================================================
   物料库筛选分组（material.php 标签过滤栏）
   每组 filter-group = filter-header（品类类型行）+ filter-body（品牌/纹理等行，默认折叠）
   ============================================================ */

/* 材料分组筛选：默认折叠，选中后服务端加 open 展开 */
.m-filter1-mat .filter-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.m-filter1-mat .filter-body.open {
    max-height: 3000px;
}

/* 组头可点击提示 */
.m-filter1-mat .filter-header {
    cursor: pointer;
}

/* 标签名颜色：组头行（每组第一行）黑色，组内其余行灰色 */
.m-filter1-mat .filter-header .f-items .left .tit {
    color: #333;
}
.m-filter1-mat .filter-body .f-items .left .tit {
    color: #b0b0b0;
}