/* ==========================
   全局基础
========================== */


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body{

    font-family:
    "Microsoft YaHei",
    "Segoe UI",
    Arial,
    sans-serif;


    background:#f5f6f8;

    color:#1f2937;

    display:flex;

    min-height:100vh;

}






/* ==========================
   左侧导航
========================== */


.sidebar{


    width:260px;

    height:100vh;

    background:#111827;

    color:white;

    position:fixed;

    left:0;

    top:0;


    display:flex;

    flex-direction:column;


    padding:25px 20px;


}





.logo{


    padding-bottom:35px;


    border-bottom:

    1px solid rgba(255,255,255,.1);


}



.logo h2{


    font-size:26px;

    line-height:1.2;

    letter-spacing:1px;


}



.logo p{


    margin-top:8px;

    color:#9ca3af;

    font-size:14px;


}






.menu{


    margin-top:30px;


    display:flex;

    flex-direction:column;


    gap:10px;


}





.menu a{


    text-decoration:none;


    color:#d1d5db;


    padding:14px 16px;


    border-radius:10px;


    font-size:16px;


    transition:.25s;


}



.menu a:hover{


    background:#1f2937;

    color:white;


}



.menu a.active{


    background:#2563eb;

    color:white;


}




.sidebar-footer{


    margin-top:auto;

    color:#6b7280;

    font-size:13px;


}








/* ==========================
   主内容
========================== */


.content{


    margin-left:260px;


    width:calc(100% - 260px);


    padding:50px;


}








/* ==========================
   首页 Hero
========================== */


.hero{


    background:white;


    padding:45px;


    border-radius:18px;


    box-shadow:

    0 8px 25px rgba(0,0,0,.05);


}



.hero h1{


    font-size:36px;


    margin-bottom:15px;


    color:#111827;


}




.hero p{


    font-size:18px;


    color:#6b7280;


}







/* ==========================
   首页功能卡片
========================== */


.cards{


    margin-top:35px;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


}




.card{


    background:white;


    border-radius:18px;


    padding:35px 30px;


    cursor:pointer;


    transition:.3s;


    box-shadow:

    0 5px 20px rgba(0,0,0,.05);


}



.card:hover{


    transform:translateY(-8px);


    box-shadow:

    0 12px 30px rgba(0,0,0,.12);


}





.icon{


    font-size:45px;

    margin-bottom:20px;


}




.card h3{


    font-size:22px;


    margin-bottom:15px;


    color:#111827;


}





.card p{


    color:#6b7280;


    line-height:1.6;


    min-height:70px;


}





.card button{


    margin-top:25px;


    background:#2563eb;


    color:white;


    border:none;


    padding:12px 25px;


    border-radius:8px;


    cursor:pointer;


    font-size:15px;


}



.card button:hover{


    background:#1d4ed8;


}





/* 手机适配 */


@media(max-width:1000px){


    .sidebar{


        width:200px;


    }



    .content{


        margin-left:200px;


        width:calc(100% - 200px);


        padding:30px;


    }



    .cards{


        grid-template-columns:1fr;


    }


}

/* ==========================
   补货预测页面
========================== */



.tool-box{


    background:white;


    border-radius:18px;


    padding:28px;


    margin-bottom:30px;


    box-shadow:


    0 8px 25px rgba(0,0,0,.05);


}



.tool-header{


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:20px;


}



.tool-header h2{


    font-size:22px;

    margin:0;


}



.tool-header button{


    background:#111;


    color:white;


    border:none;


    padding:10px 18px;


    border-radius:10px;


    cursor:pointer;


    font-size:14px;


}



.tool-header button:hover{


    opacity:.8;


}






/* ==========================
   表格基础
========================== */



.data-table{


    border-collapse:collapse;


    table-layout:auto;


    width:auto;


    min-width:100%;


}




.data-table th{


    position:relative;


    background:#f7f7f7;


    color:#666;


    font-size:14px;


    font-weight:500;


    text-align:center;


    padding:14px 12px;


    white-space:nowrap;


}




.data-table td{


    padding:10px 12px;


    border-bottom:

    1px solid #eee;


    font-size:14px;


    font-weight:600;


    color:#111;


    text-align:center;


    white-space:nowrap;


    vertical-align:middle;


}





.data-table tr:hover{


    background:#fafafa;


}







/* ==========================
   输入框
========================== */


.data-table input{


    height:34px;


    padding:0 8px;


    border:

    1px solid transparent;


    background:transparent;


    outline:none;


    font-family:inherit;


    font-size:14px;


    font-weight:600;


    color:#111;


    text-align:center;


}



.data-table input:hover{


    background:#fafafa;


}




.data-table input:focus{


    background:white;


    border-color:#111;


}




/* 数字输入取消箭头 */


.data-table input[type="number"]::-webkit-inner-spin-button,


.data-table input[type="number"]::-webkit-outer-spin-button{


    -webkit-appearance:none;


    margin:0;


}







/* ==========================
   补货预测表
========================== */


.inventory-table{


    min-width:900px;


}



.inventory-table th:nth-child(1),
.inventory-table td:nth-child(1){


    width:120px;


}



.inventory-table th:nth-child(2),
.inventory-table td:nth-child(2){


    width:160px;


}



.inventory-table td input{


    width:100%;


}








/* ==========================
   备货追踪表
========================== */


.stock-table{


    min-width:1600px;


}






.stock-table th:nth-child(1){


    width:120px;


}



.stock-table th:nth-child(2),
.stock-table th:nth-child(3),
.stock-table th:nth-child(9),
.stock-table th:nth-child(12){


    width:100px;


}





/* 日期 */


.stock-table th:nth-child(4),
.stock-table th:nth-child(5),
.stock-table th:nth-child(6),
.stock-table th:nth-child(7),
.stock-table th:nth-child(8){


    width:140px;


}






/* 当前库存 */


.stock-table th:nth-child(10){


    width:170px;


}






/* 可销售周期 */


.stock-table th:nth-child(11){


    width:220px;


}







/* 目标销售 */


.stock-table th:nth-child(12){


    width:120px;


}






/* 利润 */


.stock-table th:nth-child(14),
.stock-table th:nth-child(15){


    width:130px;


}








/* ==========================
   删除按钮
========================== */


.data-table button{


    background:#f3f3f3;


    border:none;


    padding:6px 12px;


    border-radius:8px;


    cursor:pointer;


    white-space:nowrap;


}



.data-table button:hover{


    background:#ddd;


}

/* ==========================
   Excel列宽拖动
========================== */



.resize-line{


    position:absolute;


    right:-3px;


    top:0;


    width:8px;


    height:100%;


    cursor:col-resize;


    z-index:999;


}




.resize-line:hover{


    background:#ccc;


}






/* ==========================
   长文本优化
========================== */


/* 可销售周期 */

.stock-table td:nth-child(11) input{


    width:220px;


    min-width:220px;


}





/* 备注长内容以后使用 */


.long-text{


    white-space:normal;


    min-width:220px;


}





/* ==========================
   公式结果
========================== */


.formula-cell{


    font-family:

    "Microsoft YaHei",

    "Segoe UI",

    Arial,

    sans-serif;


    font-size:14px;


    font-weight:600;


    color:#111;


    white-space:nowrap;


}







/* ==========================
   工具区域横向滚动
========================== */


.tool-box{


    overflow-x:auto;


}





/* 保持表格不会挤压 */


.data-table{


    border-spacing:0;


}





/* ==========================
   页面适配
========================== */


@media(max-width:900px){



    .card-grid{


        grid-template-columns:repeat(2,1fr);


    }


}




@media(max-width:600px){


    .sidebar{


        width:180px;


    }



    .content{


        margin-left:180px;


        width:calc(100% - 180px);


        padding:20px;


    }



    .card-grid{


        grid-template-columns:1fr;


    }



}






/* ==========================
   防止输入框撑爆表格
========================== */


.data-table td{


    overflow:hidden;


}





.data-table td input{


    max-width:100%;


}







/* ==========================
   最终表格显示逻辑
========================== */


/*
普通字段：
自动显示完整

长字段：
固定宽度

需要更多空间：
使用拖动
*/


.data-table th,
.data-table td{


    overflow:visible;


}



.stock-table{


    width:max-content;


}





.inventory-table{


    width:max-content;


}

/* ==========================
   表格最终视觉优化
========================== */


/* 表头 */

.data-table th{


    font-size:14px;

    font-weight:700;

    color:#374151;

    background:#f8f8f8;


    padding:10px 8px;


}



/* 表格内容 */

.data-table td{


    font-size:13px;


    font-weight:400;


    color:#333;


    padding:7px 8px;


    line-height:1.4;


}






/* 输入框 */

.data-table input{


    height:30px;


    font-size:13px;


    font-weight:400;


    color:#333;


    padding:0 6px;


}






/* 公式结果 */

.formula-cell{


    font-size:13px;


    font-weight:400;


    color:#333;


    background:none;


}






/* 删除按钮 */

.data-table button{


    font-size:13px;


    padding:5px 10px;


}







/* 减少表格整体空隙 */


.data-table{


    border-spacing:0;


}





/* 表格行高度 */


.data-table tr{


    height:38px;


}






/* 可销售周期 */

.stock-table th:nth-child(11),
.stock-table td:nth-child(11){


    min-width:160px;


}






.stock-table td:nth-child(11) input{


    width:160px;


}

/* ==========================
   表格整体紧凑优化
========================== */


/* 取消过大的最小宽度 */

.stock-table{

    min-width:1200px;

}



.inventory-table{

    min-width:750px;

}





/* 所有单元格缩小 */


.data-table th{


    padding:8px 6px;


    font-size:13px;


}



.data-table td{


    padding:6px 6px;


    font-size:13px;


}





/* 输入框缩小 */


.data-table input{


    height:28px;


    font-size:13px;


    padding:0 5px;


}






/* 数量类 */


.stock-table th:nth-child(2),
.stock-table th:nth-child(3),
.stock-table th:nth-child(9),
.stock-table th:nth-child(12){


    width:80px;


}







/* 日期类 */


.stock-table th:nth-child(4),
.stock-table th:nth-child(5),
.stock-table th:nth-child(6),
.stock-table th:nth-child(7),
.stock-table th:nth-child(8){


    width:110px;


}






/* 当前库存 */


.stock-table th:nth-child(10){


    width:130px;


}






/* 可销售周期 */


.stock-table th:nth-child(11){


    width:150px;


}




.stock-table td:nth-child(11) input{


    width:150px;


}







/* 利润 */


.stock-table th:nth-child(14),
.stock-table th:nth-child(15){


    width:110px;


}




/* 操作 */

.data-table th:last-child,
.data-table td:last-child{


    width:70px;


}

/* ==========================
   表格极简紧凑版
========================== */


/* 取消强制撑开 */

.stock-table,
.inventory-table{

    min-width:0 !important;

    width:auto !important;

}



/* 表格容器允许横向滚动 */

.tool-box{

    overflow-x:auto;

}





/* 表头 */

.data-table th{


    padding:8px 5px;


    font-size:13px;


}





/* 内容 */

.data-table td{


    padding:5px 5px;


    font-size:13px;


}





/* 输入框跟随内容 */

.data-table input{


    width:70px;


    min-width:70px;


    height:28px;


    padding:0 4px;


}





/* SKU */

.data-table td:nth-child(1) input{


    width:90px;


}





/* 产品名称 */

.inventory-table td:nth-child(2) input{


    width:120px;


}





/* 日期全部缩小 */

.stock-table td:nth-child(4) input,
.stock-table td:nth-child(5) input,
.stock-table td:nth-child(6) input,
.stock-table td:nth-child(7) input,
.stock-table td:nth-child(8) input{


    width:90px;


}





/* 当前库存 */

.stock-table td:nth-child(10) input{


    width:100px;


}





/* 可销售周期稍微保留 */

.stock-table td:nth-child(11) input{


    width:120px;


}





/* 利润 */

.stock-table td:nth-child(14) input{


    width:90px;


}

/* ==========================
   月度经营总览 dashboard
========================== */


/* 下拉选择 */

#yearSelect,
#monthSelect{


    padding:8px 14px;

    border:1px solid #ddd;

    border-radius:8px;

    background:white;

    font-size:14px;

    cursor:pointer;


}





/* 经营表格 */

.dashboard-table{


    min-width:1100px;


}





.dashboard-table th{


    white-space:nowrap;

    text-align:center;

    padding:12px 10px;

    font-size:13px;

}





.dashboard-table td{


    text-align:center;

    padding:8px 6px;

    font-size:13px;

    white-space:nowrap;


}





/* 输入框 */

.dashboard-table input{


    width:85px;

    height:30px;

    padding:0 6px;

    border:1px solid transparent;

    border-radius:6px;

    text-align:center;

    font-size:13px;

    font-family:inherit;


}




.dashboard-table input:hover{


    background:#fafafa;


}





.dashboard-table input:focus{


    outline:none;

    border:1px solid #111;

    background:white;


}







/* 自动计算区域 */


.dashboard-table .formula-cell{


    font-weight:500;

    color:#111;

    background:#fafafa;


}






/* 汇总卡片数字 */


/* ==========================
   年度经营汇总优化
========================== */


.tool-box .card-grid{


    grid-template-columns:repeat(5,1fr);

    gap:15px;

}



.tool-box .stat-card{


    padding:18px;

    border-radius:12px;

    box-shadow:none;

    border:1px solid #eee;

    background:#fff;


}



.stat-title{


    font-size:13px;

    color:#888;

    margin-bottom:12px;


}



#totalSales,
#totalAds,
#totalProfit,
#totalRMBProfit{


    font-size:22px;

    font-weight:500;

    color:#111;

    letter-spacing:0;


}






/* 小屏幕 */

@media(max-width:900px){


    .dashboard-table{


        min-width:900px;


    }



}

.coming-soon{

    text-align:center;

    padding:80px 20px;

}


.coming-soon h2{

    font-size:32px;

    margin-bottom:20px;

}


.coming-soon p{

    color:#777;

    font-size:16px;

}

/* dashboard顶部工具栏 */


.dashboard-control{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

}





.exchange-control{

display:flex;

align-items:center;

gap:10px;

background:#f7f7f7;

padding:8px 12px;

border-radius:12px;

}





.exchange-control span{

font-size:14px;

font-weight:500;

}





.exchange-control input{

width:90px;

height:34px;

border:1px solid #ddd;

border-radius:8px;

padding:0 10px;

font-size:14px;

}





.mini-btn{


height:34px;

padding:0 16px;

border:none;

border-radius:8px;

background:#111;

color:white;

cursor:pointer;

font-size:14px;

}





.excel-control{


display:flex;

gap:10px;


}





.excel-btn{


height:36px;

padding:0 18px;

border-radius:10px;

border:1px solid #ddd;

background:white;

cursor:pointer;

font-size:14px;

transition:.2s;


}





.excel-btn:hover{


transform:translateY(-1px);


box-shadow:0 5px 15px rgba(0,0,0,.08);


}



.excel-btn.export{


color:#111;

}



.excel-btn.import{


color:#555;

}


/* =========================
   Dashboard 顶部控制优化
========================= */


.dashboard-control{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}





.select-control{

    display:flex;

    align-items:center;

    gap:8px;

    background:#f8f8f8;

    padding:8px 12px;

    border-radius:12px;

}



.select-control label{

    font-size:14px;

    color:#666;

}





.select-control select{

    height:34px;

    border:1px solid #ddd;

    border-radius:8px;

    padding:0 10px;

    background:white;

    font-size:14px;

    cursor:pointer;

}








/* =========================
   汇率区域
========================= */


.exchange-control{


    display:flex;

    align-items:center;

    gap:10px;

    background:#f8f8f8;

    padding:8px 12px;

    border-radius:12px;


}



.exchange-control span{


    font-size:14px;

    color:#555;


}





.exchange-control input{


    width:80px;

    height:34px;

    border:1px solid #ddd;

    border-radius:8px;

    padding:0 10px;

    font-size:14px;


}






.mini-btn{


    height:34px;

    padding:0 16px;

    border:none;

    border-radius:8px;

    background:#111;

    color:white;

    font-size:14px;

    cursor:pointer;

    transition:.2s;


}



.mini-btn:hover{


    opacity:.8;


}









/* =========================
 Excel按钮
========================= */


.excel-control{


    display:flex;

    gap:10px;


}




.excel-btn{


    height:36px;

    padding:0 18px;

    border-radius:10px;

    border:1px solid #ddd;

    background:white;

    font-size:14px;

    cursor:pointer;

    transition:.2s;


}




.excel-btn:hover{


    transform:translateY(-1px);

    box-shadow:0 6px 15px rgba(0,0,0,.08);


}




.excel-btn.export{


    color:#333;


}



.excel-btn.import{


    color:#666;


}






/* =========================
 Dashboard卡片优化
========================= */


.card-grid{


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;


}



.stat-card{


    background:white;

    border-radius:16px;

    padding:22px;

    border:1px solid #eee;

    transition:.2s;


}




.stat-card:hover{


    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,.06);


}





.stat-title{


    font-size:14px;

    color:#777;

    margin-bottom:12px;


}




.stat-number{


    font-size:26px;

    font-weight:600;

    color:#111;


}







/* =========================
 图表区域
========================= */


.chart-box{


    height:380px;

    padding:20px;


}






@media(max-width:900px){



.card-grid{


grid-template-columns:repeat(2,1fr);


}



}