/* ================= 1. 全局弹窗遮罩 ================= */
#skuPricingModal {
    position: fixed !important; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(4px);
    overflow: hidden; 
}

/* ================= 2. 基础配置 ================= */
:root {
    --bg-page: #ffffff;
    --bg-gray-container: #F7F9FC;
    --bg-header: #FAFAFA;
    
    --border-color: #E6E8EB;
    --text-primary: #1F2329;
    --text-secondary: #8F959E;
    
    --radius-md: 12px;
    --radius-sm: 8px;
    
    --fresh-blue: #70bdbc;    
    --fresh-orange: #FFB980;  
    --fresh-purple: #A3A1EB;
    
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-hover: 0 6px 16px rgba(0,0,0,0.08);
}

/* ================= 3. 弹窗主体结构 ================= */
#skuPricingModal .modal-content.fixed-height-layout {
    background-color: var(--bg-page);
    width: 90%; max-width: 2500px; /* 放宽最大宽度以适应2400+需求 */
    height: 92vh; 
    display: flex; flex-direction: column; padding: 0;
    overflow: hidden; border-radius: var(--radius-md); position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

/* 头部 */
#skuPricingModal .modal-header {
    background: #fff; padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
    height: 56px;
}
#skuPricingModal .modal-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: #333; }

/* 主内容区 */
.modal-body-scroll {
    flex: 1; overflow: hidden;
    padding: 16px 24px;
    display: flex; flex-direction: column; 
    gap: 16px;
    width: 100%; box-sizing: border-box;
}

/* ================= 4. 基本信息卡片 (顶部) ================= */
.layout-card {
    background: #fff; border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    width: 100%; box-sizing: border-box; flex-shrink: 0;
    overflow: visible; 
}

.top-summary-card .card-content { padding: 16px 20px; }

/* 标题栏 */
.card-header, .inner-card-header {
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-header) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex; align-items: center;
    font-size: 14px; font-weight: 600; color: #555;
    flex-shrink: 0;
    height: 40px;
}

.header-title::before, .inner-card-header::before {
    content: ''; display: inline-block; width: 4px; height: 14px; 
    background-color: var(--fresh-blue); margin-right: 10px; border-radius: 2px;
}
.header-title { display: flex; align-items: center; }

/* 顶部 12列 Grid */
.grid-basic-info {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px; 
}
@media (max-width: 1600px) {
    .grid-basic-info { grid-template-columns: repeat(6, 1fr); }
}

.form-item.mini-item label { 
    font-size: 12px; color: #999; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.form-item.mini-item .sku-input { padding: 0 8px; font-size: 13px; height: 36px; }


/* ================= 5. 中间大功能区 ================= */
.middle-big-card {
    background-color: var(--bg-gray-container);
    border-radius: var(--radius-md);
    display: flex; flex-direction: column;
    flex: 1; min-height: 0; 
    overflow: visible; 
    border: none;
}

.middle-inner-layout {
    padding: 16px;
    display: flex; 
    gap: 20px;
    align-items: stretch;
    height: 100%;
    overflow: visible; 
    transition: all 0.3s ease;
}

/* ================= 6. 左侧配置区 ================= */
.left-stack {
    width: 32%; min-width: 420px; max-width: 600px;
    flex-shrink: 0;
    display: flex; flex-direction: column; 
    gap: 20px; 
    overflow-y: auto; 
    padding: 2px 4px; 
    height: 100%;
}
.left-stack::-webkit-scrollbar { width: 0px; }

.inner-card {
    background: #fff; border-radius: var(--radius-sm);
    display: flex; flex-direction: column;
    transition: all 0.2s ease;
    flex-shrink: 0;
    border: 1px solid transparent; 
    overflow: visible; 
}
.inner-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover) !important; }
.inner-card-body { padding: 16px 20px; }

/* 彩色阴影定制 */
.left-stack .inner-card:nth-child(1) { box-shadow: 0 4px 12px rgba(112, 189, 188, 0.3); border-color: rgba(112, 189, 188, 0.3); }
.left-stack .inner-card:nth-child(1) .inner-card-header::before { background-color: var(--fresh-blue); }

.left-stack .inner-card:nth-child(2) { box-shadow: 0 4px 12px rgba(255, 185, 128, 0.3); border-color: rgba(255, 185, 128, 0.3); }
.left-stack .inner-card:nth-child(2) .inner-card-header::before { background-color: var(--fresh-orange); }

.left-stack .inner-card:nth-child(3) { box-shadow: 0 4px 12px rgba(163, 161, 235, 0.3); border-color: rgba(163, 161, 235, 0.3); }
.left-stack .inner-card:nth-child(3) .inner-card-header::before { background-color: var(--fresh-purple); }


/* ================= 7. 精细化 Grid 布局 ================= */

.form-item { display: flex; flex-direction: column; gap: 6px; position: relative; }
.form-item label { font-size: 13px; color: #555; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* 输入框 & Select */
.sku-input, select.sku-input {
    height: 36px; padding: 0 10px; 
    border: 1px solid #dcdfe6; border-radius: 6px; 
    font-size: 14px; width: 100%; box-sizing: border-box; transition: all 0.2s;
    background-color: #fff;
    /* Select 样式 */
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 30px;
    cursor: pointer;
}
input.sku-input { background-image: none; cursor: text; }
.sku-input:focus { border-color: var(--fresh-blue); outline: none; box-shadow: 0 0 0 3px rgba(112, 189, 188, 0.15); }
.sku-input:disabled { background-color: #f5f7fa; color: #c0c4cc; cursor: not-allowed; }

/* --- A. 物流卡片 (12列 Grid) --- */
.grid-logistics-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px 12px; }
.col-span-2 { grid-column: span 2; } 
.col-span-3 { grid-column: span 3; } 
.col-span-5 { grid-column: span 5; } 
.col-span-12 { grid-column: span 12; }

/* 【核心新增1】当屏幕宽度 >= 2400px 时，这些元素占6格(即50%，变成一行2个) */
@media (min-width: 2400px) {
    .grid-logistics-12 .expand-2k {
        grid-column: span 6 !important; 
    }
}

/* --- B. 折扣卡片 (3等分) --- */
.grid-3-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* --- C. 平台抽佣 (4等分) --- */
.grid-4-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* 【核心新增2】当屏幕宽度 >= 2400px 时，抽佣强制变2列(增高) */
@media (min-width: 2400px) {
    .grid-4-cols {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ================= 8. Tooltip 样式 ================= */
.tooltip-label { display: flex; align-items: center; cursor: pointer; }
.tooltip-icon { 
    display: inline-flex; justify-content: center; align-items: center; 
    width: 16px; height: 16px; border-radius: 50%; 
    background: #e0e0e0; color: #fff; font-size: 12px; 
    margin-left: 6px; position: relative; 
    z-index: 20; 
}
.tooltip-icon:hover { background: var(--fresh-blue); }

.tooltip-text { 
    visibility: hidden; opacity: 0;
    position: absolute; 
    bottom: 135%; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 240px; 
    background-color: rgba(50, 50, 50, 0.95); color: #fff; 
    text-align: center; border-radius: 6px; padding: 8px 12px; 
    font-size: 12px; line-height: 1.5; font-weight: normal;
    z-index: 99999; 
    pointer-events: none; transition: opacity 0.2s, transform 0.2s;
    white-space: normal; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.tooltip-text::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border-width: 5px; border-style: solid;
    border-color: rgba(50, 50, 50, 0.95) transparent transparent transparent;
}
.tooltip-icon:hover .tooltip-text { 
    visibility: visible; opacity: 1; 
    transform: translateX(-50%) translateY(-2px); 
}


/* ================= 9. 右侧表格区 ================= */
.right-stack {
    flex: 1; min-width: 0; 
    display: flex; flex-direction: column;
    background: #fff; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    overflow: hidden; 
    height: 100%; position: relative;
}

.sku-result-table-container { flex: 1; overflow: auto; width: 100%; }
.sku-result-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sku-result-table th, .sku-result-table td { 
    padding: 12px 10px; border-bottom: 1px solid #f0f0f0; 
    font-size: 13px; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    height: var(--row-height-md, 40px);
}
.sku-result-table th { 
    background: #fafafa; font-weight: 600; 
    position: sticky; top: 0; z-index: 10; 
    color: #333; border-bottom: 1px solid #ebeef5;
    font-size: 14px;
    text-align: center !important;
}
.sku-result-table td { text-align: center !important; }
.sku-result-table td:first-child, .sku-result-table th:first-child { text-align: left !important; }
.sku-result-table tbody tr:nth-child(odd) { background-color: var(--bg-table-odd, #FAFAFA); }
.sku-result-table tbody tr:nth-child(even) { background-color: var(--bg-table-even, #FFFFFF); }
.sku-result-table tbody tr:hover { background-color: #F5F7FA; }
.sku-result-table tbody tr.selected { background-color: #E6F7FF; }
.sku-cell-display-price { font-weight: bold; color: var(--color-gold, #FFD700); }
.sku-cell-profit { color: var(--color-success, #27ae60); }
.sku-cell-discount { color: var(--color-danger, #e74c3c); }
.sku-cell-recommend-price { color: var(--color-primary, #3498db); }
.sku-cell-route, .sku-cell-country {
    min-width: 140px;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    position: relative;
    text-align: left;
}


/* ================= 10. 底部按钮 ================= */
.modal-footer {
    background: #fff; padding: 12px 30px; border-top: 1px solid var(--border-color);
    display: flex; justify-content: space-between; gap: 24px; flex-shrink: 0;
    height: 64px; box-sizing: border-box;
}
.sku-submit-btn {
    flex: 1; display: flex; justify-content: center; align-items: center;
    height: 40px; font-size: 15px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
#selectSkuBtn { background-color: rgba(112, 189, 188, 0.1) !important; color: #70bdbc !important; border: 1px solid rgba(112, 189, 188, 0.4) !important; }
#selectSkuBtn:hover { background-color: rgba(112, 189, 188, 0.2) !important; transform: translateY(-1px); }
#submitBtn { background-color: rgba(103, 194, 58, 0.1); color: #67c23a; border: 1px solid rgba(103, 194, 58, 0.3); }
#submitBtn:hover { background-color: rgba(103, 194, 58, 0.2); transform: translateY(-1px); }

/* 通用辅助类 */
.sku-size-inputs { display: flex; align-items: center; gap: 8px; }
.sku-input.size-mini { text-align: center; padding: 0 4px; }
.x-sep { font-size: 14px; color: #999; }
.highlight-blue input { background-color: #f4faff; border-color: #c6e2ff; color: #409eff; }
.highlight-green input { background-color: #f0f9eb; border-color: #d1edc4; color: #67c23a; }
.radio-group { display: flex; align-items: center; height: 36px; gap: 12px; }
.radio-group label { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; margin: 0; color: #555; }

/* 搜索下拉框修正 */
.searchable-select-container { position: relative; width: 100%; }
.searchable-select-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%) rotate(0deg); width: 14px; height: 14px; opacity: 0.6; transition: transform 0.25s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.searchable-select-container.open .searchable-select-icon { transform: translateY(-50%) rotate(180deg); }
.searchable-select-container input.sku-input { padding-right: 30px; background-image: none; cursor: pointer; }
.searchable-select-container input.sku-input:focus { border-color: var(--fresh-blue); box-shadow: 0 0 0 2px rgba(112,189,188,0.12); }
.searchable-select-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #dcdfe6; border-radius: 6px; max-height: 250px; overflow-y: auto; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,0.1); margin-top: 4px;
    opacity: 0; pointer-events: none; transform: translateY(-8px) scaleY(0.98); transition: opacity 0.18s, transform 0.18s;
}
.searchable-select-container.open .searchable-select-dropdown {
    opacity: 1; pointer-events: auto; transform: translateY(0) scaleY(1);
}
.dropdown-item, .searchable-select-option {
    padding: 10px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f5f5f5; color: #333; background: #fff; transition: background 0.15s, color 0.15s;
}
.dropdown-item:last-child, .searchable-select-option:last-child { border-bottom: none; }
.dropdown-item:hover, .searchable-select-option:hover { background-color: #f5f7fa; color: var(--fresh-blue); }
.dropdown-item.selected, .searchable-select-option.selected { background-color: #e6f7ff; color: #1890ff; font-weight: 600; }

/* 用于 JS 控制下拉项隐藏 */
.dropdown-item.hide, .searchable-select-option.hide {
    display: none !important;
}

/* ================= 11. 响应式布局重组 ================= */
@media (max-width: 1400px), (max-height: 800px) {
    .middle-inner-layout { flex-direction: column; gap: 16px; }
    .left-stack {
        width: 100%; min-width: 0; max-width: none; 
        display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
        height: auto; overflow: visible; padding-bottom: 4px;
    }
    .inner-card { width: auto; height: 100%; }
    .right-stack { flex: 1; height: auto; }
}

@media (max-width: 1000px) {
    .left-stack { grid-template-columns: 1fr; }
}