/* ===== 朵姐ERP全局样式系统 v2.0 ===== */

/* ---------- 变量 ---------- */
:root{
    --primary:#23a859;
    --primary-light:#34b968;
    --primary-dark:#1a944d;
    --primary-bg:#f0fff4;
    --primary-bg2:#e6f9ed;
    --danger:#f56c6c;
    --danger-bg:#fef0f0;
    --warning:#e6a23c;
    --info:#409eff;
    --text-1:#303133;
    --text-2:#606266;
    --text-3:#909399;
    --text-4:#c0c4cc;
    --border:#e4e7ed;
    --border-light:#ebeef5;
    --bg-page:#f5f7fa;
    --bg-card:#ffffff;
    --radius:8px;
    --radius-sm:4px;
    --radius-lg:12px;
    --shadow:0 2px 12px rgba(0,0,0,0.06);
    --shadow-hover:0 4px 20px rgba(0,0,0,0.1);
    --sidebar-w:220px;
    --sidebar-collapsed:64px;
    --transition:0.25s ease;
}

/* ---------- 重置 ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
    font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif;
    background:var(--bg-page);
    color:var(--text-1);
    font-size:14px;
    line-height:1.5;
}
a{text-decoration:none;color:inherit;}
ul,ol{list-style:none;}
img{vertical-align:middle;}

/* ---------- 布局：侧边栏 + 内容区 ---------- */
.app-layout{display:flex;min-height:100vh;}

/* 侧边栏 */
.sidebar{
    width:var(--sidebar-w);
    background:linear-gradient(180deg,#1a944d 0%,#23a859 100%);
    position:fixed;
    top:0;left:0;bottom:0;
    z-index:1000;
    display:flex;
    flex-direction:column;
    transition:width var(--transition);
    overflow:hidden;
    box-shadow:2px 0 12px rgba(0,0,0,0.1);
}
.sidebar.collapsed{width:var(--sidebar-collapsed);}

.sidebar-header{
    padding:18px 20px;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom:1px solid rgba(255,255,255,0.15);
    white-space:nowrap;
    overflow:hidden;
}
.sidebar-logo{
    width:32px;height:32px;
    background:rgba(255,255,255,0.2);
    border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;flex-shrink:0;
}
.sidebar-title{
    color:#fff;font-size:16px;font-weight:bold;
    transition:opacity var(--transition);
}
.sidebar.collapsed .sidebar-title{opacity:0;}

.sidebar-nav{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:8px 0;
}
.sidebar-nav::-webkit-scrollbar{width:4px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:2px;}

.nav-group-title{
    color:rgba(255,255,255,0.5);
    font-size:12px;
    padding:12px 20px 6px;
    text-transform:uppercase;
    letter-spacing:1px;
    white-space:nowrap;
    transition:opacity var(--transition);
}
.sidebar.collapsed .nav-group-title{opacity:0;height:0;padding:0;overflow:hidden;}

.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 20px;
    color:rgba(255,255,255,0.85);
    font-size:14px;
    cursor:pointer;
    transition:all 0.15s;
    white-space:nowrap;
    border-left:3px solid transparent;
}
.nav-item:hover{
    background:rgba(255,255,255,0.12);
    color:#fff;
}
.nav-item.active{
    background:rgba(255,255,255,0.15);
    color:#fff;
    border-left-color:#fff;
}
.nav-icon{width:20px;text-align:center;flex-shrink:0;font-size:16px;}
.nav-text{transition:opacity var(--transition);}
.sidebar.collapsed .nav-text{opacity:0;}

.sidebar-footer{
    padding:12px 20px;
    border-top:1px solid rgba(255,255,255,0.15);
    white-space:nowrap;
    overflow:hidden;
}
.sidebar-footer .nav-item{padding:8px 0;}

/* 顶部工具栏 */
.topbar{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    padding:8px 28px;
    background:#fff;
    border-bottom:1px solid var(--border);
    margin:-24px -28px 20px -28px;
}
.topbar-user{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    color:var(--text-2);
    text-decoration:none;
    padding:4px 10px;
    border-radius:var(--radius-sm);
    transition:all .2s;
}
.topbar-user:hover{
    background:var(--bg-page);
    color:var(--primary);
}
.topbar-avatar{font-size:18px;}
.topbar-username{font-weight:600;}
.topbar-logout{
    display:flex;
    align-items:center;
    gap:4px;
    padding:6px 14px;
    border-radius:var(--radius-sm);
    background:var(--danger-bg);
    color:var(--danger);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:all .2s;
}
.topbar-logout:hover{
    background:var(--danger);
    color:#fff;
}

/* 侧边栏切换按钮 */
.sidebar-toggle{
    position:fixed;
    top:14px;
    left:var(--sidebar-w);
    z-index:1001;
    width:24px;height:48px;
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:0 6px 6px 0;
    cursor:pointer;
    font-size:14px;
    display:flex;align-items:center;justify-content:center;
    transition:left var(--transition);
    box-shadow:2px 0 8px rgba(0,0,0,0.1);
}
.sidebar-toggle.collapsed{left:var(--sidebar-collapsed);}

/* 主内容区 */
.main-content{
    flex:1;
    margin-left:var(--sidebar-w);
    padding:24px 28px;
    transition:margin-left var(--transition);
    min-width:0;
}
.main-content.expanded{margin-left:var(--sidebar-collapsed);}

/* ---------- 页面标题 ---------- */
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.page-title{
    font-size:20px;
    font-weight:bold;
    color:var(--text-1);
    display:flex;
    align-items:center;
    gap:8px;
}
.page-title::before{
    content:'';
    width:4px;height:20px;
    background:var(--primary);
    border-radius:2px;
}
.page-actions{display:flex;gap:10px;align-items:center;}

/* ---------- 卡片 ---------- */
.card{
    background:var(--bg-card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:24px;
    margin-bottom:20px;
}
.card-title{
    font-size:15px;
    font-weight:bold;
    color:var(--text-1);
    margin-bottom:16px;
    padding-left:10px;
    border-left:3px solid var(--primary);
}

/* ---------- 表单 ---------- */
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 28px;
}
.form-grid-3{grid-template-columns:1fr 1fr 1fr;}
.form-item{display:flex;flex-direction:column;}
.form-item label{
    font-size:14px;
    font-weight:600;
    color:var(--text-2);
    margin-bottom:8px;
}
.form-item label .req{color:var(--danger);margin-left:2px;}
.form-item input,
.form-item select,
.form-item textarea{
    width:100%;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:14px;
    color:var(--text-1);
    background:var(--bg-card);
    transition:border-color var(--transition),box-shadow var(--transition);
    outline:none;
    font-family:inherit;
}
.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(35,168,89,0.12);
}
.form-item input:disabled,
.form-item select:disabled{
    background:var(--bg-page);
    color:var(--text-3);
    cursor:not-allowed;
}
.form-item textarea{resize:vertical;min-height:80px;}
.form-item .hint{font-size:12px;color:var(--text-3);margin-top:4px;}
.form-item-full{grid-column:1 / -1;}

/* 水平表单（label和input在同一行） */
.form-inline{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.form-inline label{width:100px;font-weight:600;color:var(--text-2);flex-shrink:0;text-align:right;}
.form-inline input,.form-inline select{flex:1;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;outline:none;transition:border-color var(--transition);}
.form-inline input:focus,.form-inline select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(35,168,89,0.12);}

.form-footer{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--border-light);
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

/* ---------- 按钮 ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 18px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:14px;
    cursor:pointer;
    transition:all var(--transition);
    background:var(--bg-card);
    color:var(--text-2);
    white-space:nowrap;
    line-height:1.4;
}
.btn:hover{color:var(--primary);border-color:var(--primary);}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;}
.btn-success{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-success:hover{background:var(--primary-dark);color:#fff;}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);}
.btn-danger:hover{background:#e04040;color:#fff;}
.btn-info{background:var(--info);color:#fff;border-color:var(--info);}
.btn-info:hover{background:#3a8ee6;color:#fff;}
.btn-warning{background:var(--warning);color:#fff;border-color:var(--warning);}
.btn-gray{background:#909399;color:#fff;border-color:#909399;}
.btn-gray:hover{background:#7d8186;color:#fff;}
.btn-text{background:transparent;border:none;color:var(--primary);padding:4px 8px;}
.btn-text:hover{background:var(--primary-bg);}
.btn-text-danger{background:transparent;border:none;color:var(--danger);padding:4px 8px;}
.btn-text-danger:hover{background:var(--danger-bg);}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-lg{padding:12px 32px;font-size:16px;}
.btn-block{width:100%;}

/* ---------- 表格 ---------- */
.data-table{
    width:100%;
    border-collapse:collapse;
    margin-top:4px;
}
.data-table th{
    background:var(--primary-bg2);
    color:var(--primary);
    font-weight:bold;
    font-size:13px;
    padding:12px 10px;
    border-bottom:2px solid var(--primary-bg2);
    text-align:center;
    white-space:nowrap;
}
.data-table td{
    padding:11px 10px;
    border-bottom:1px solid var(--border-light);
    text-align:center;
    font-size:13px;
    color:var(--text-2);
}
.data-table tbody tr:hover{background:var(--primary-bg);}
.data-table tbody tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;border-radius:var(--radius);}

/* 状态标签 */
.tag{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:500;}
.tag-success{background:var(--primary-bg2);color:var(--primary);}
.tag-danger{background:var(--danger-bg);color:var(--danger);}
.tag-info{background:#ecf5ff;color:var(--info);}
.tag-warning{background:#fdf6ec;color:var(--warning);}
.tag-gray{background:#f4f4f5;color:var(--text-3);}

/* ---------- 搜索区域 ---------- */
.search-bar{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    margin-bottom:16px;
    padding:16px;
    background:var(--bg-page);
    border-radius:var(--radius);
}
.search-bar .form-inline{margin-bottom:0;}
.search-bar input,.search-bar select{
    padding:8px 12px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:14px;
    outline:none;
    transition:border-color var(--transition);
}
.search-bar input:focus,.search-bar select:focus{border-color:var(--primary);}
.search-bar .search-item{display:flex;align-items:center;gap:6px;}
.search-bar .search-item label{font-size:14px;color:var(--text-2);white-space:nowrap;}

/* ---------- 分页 ---------- */
.pagination{
    margin-top:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:4px;
}
.pagination a,.pagination span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:34px;
    padding:0 8px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:13px;
    color:var(--text-2);
    cursor:pointer;
    transition:all var(--transition);
    text-decoration:none;
}
.pagination a:hover{color:var(--primary);border-color:var(--primary);}
.pagination .active{background:var(--primary);color:#fff;border-color:var(--primary);}
.pagination .disabled{color:var(--text-4);cursor:default;pointer-events:none;}

/* ---------- 统计卡片 ---------- */
.stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
    margin-bottom:24px;
}
.stat-card{
    background:var(--bg-card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px 24px;
    display:flex;
    align-items:center;
    gap:16px;
    transition:box-shadow var(--transition);
}
.stat-card:hover{box-shadow:var(--shadow-hover);}
.stat-icon{
    width:48px;height:48px;
    border-radius:var(--radius);
    display:flex;align-items:center;justify-content:center;
    font-size:22px;flex-shrink:0;
}
.stat-icon-green{background:var(--primary-bg2);color:var(--primary);}
.stat-icon-blue{background:#ecf5ff;color:var(--info);}
.stat-icon-orange{background:#fdf6ec;color:var(--warning);}
.stat-icon-red{background:var(--danger-bg);color:var(--danger);}
.stat-info{flex:1;min-width:0;}
.stat-num{font-size:26px;font-weight:bold;color:var(--text-1);line-height:1.2;}
.stat-label{font-size:13px;color:var(--text-3);margin-top:4px;}

/* ---------- 信息展示（详情页） ---------- */
.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 28px;
}
.info-item{display:flex;align-items:flex-start;padding:6px 0;}
.info-label{
    width:100px;
    font-weight:600;
    color:var(--text-3);
    flex-shrink:0;
    font-size:13px;
}
.info-value{
    flex:1;
    color:var(--text-1);
    font-size:14px;
    background:var(--bg-page);
    padding:6px 12px;
    border-radius:var(--radius-sm);
    word-break:break-all;
}
.info-full{grid-column:1 / -1;}

/* ---------- 提示框 ---------- */
.alert{
    padding:12px 16px;
    border-radius:var(--radius-sm);
    font-size:14px;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:8px;
}
.alert-info{background:#ecf5ff;color:var(--info);border:1px solid #d9ecff;}
.alert-success{background:var(--primary-bg2);color:var(--primary);border:1px solid var(--primary-bg2);}
.alert-warning{background:#fdf6ec;color:var(--warning);border:1px solid #faecd8;}
.alert-danger{background:var(--danger-bg);color:var(--danger);border:1px solid #fde2e2;}

/* 空数据 */
.empty-data{
    text-align:center;
    padding:40px 20px;
    color:var(--text-4);
    font-size:14px;
}

/* 浮动提示 */
.toast{
    position:fixed;
    top:20px;left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,0.75);
    color:#fff;
    padding:10px 24px;
    border-radius:var(--radius-sm);
    font-size:14px;
    z-index:9999;
    animation:fadeIn 0.2s;
}
@keyframes fadeIn{from{opacity:0;transform:translate(-50%,-10px);}to{opacity:1;transform:translate(-50%,0);}}

/* 弹窗 */
.modal-overlay{
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.45);
    z-index:2000;
    display:none;
    align-items:center;
    justify-content:center;
}
.modal-overlay.show{display:flex;}
.modal-box{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:30px;
    width:420px;
    max-width:90vw;
    box-shadow:0 8px 40px rgba(0,0,0,0.2);
}
.modal-box h3{font-size:17px;margin-bottom:16px;color:var(--text-1);}
.modal-box p{color:var(--text-2);margin-bottom:24px;line-height:1.6;}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;}

/* 编辑弹窗 */
.edit-modal{
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.45);
    z-index:2000;
    display:none;
    align-items:flex-start;
    justify-content:center;
    overflow-y:auto;
    padding:40px 20px;
}
.edit-modal.show{display:flex;}
.edit-modal-content{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:28px;
    width:720px;
    max-width:100%;
    box-shadow:0 8px 40px rgba(0,0,0,0.2);
}

/* 总价等高亮文本 */
.total-text{
    font-size:16px;
    font-weight:bold;
    color:var(--danger);
    text-align:right;
    margin-top:16px;
    padding-top:12px;
    border-top:1px solid var(--border-light);
}

/* 快捷入口卡片 */
.quick-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:16px;
}
quick-card,.quick-card{
    background:var(--bg-card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:24px;
    text-align:center;
    transition:all var(--transition);
    cursor:pointer;
    display:block;
    color:var(--text-2);
}
.quick-card:hover{
    box-shadow:var(--shadow-hover);
    transform:translateY(-2px);
    color:var(--primary);
}
.quick-card .qc-icon{font-size:32px;margin-bottom:12px;}
.quick-card h4{font-size:15px;color:var(--text-1);margin-bottom:6px;}
.quick-card p{font-size:13px;color:var(--text-3);}

/* 产品表格内行内输入 */
.inline-input{
    padding:5px 8px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:13px;
    text-align:center;
    outline:none;
    transition:border-color var(--transition);
    width:100%;
}
.inline-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(35,168,89,0.1);}
.inline-select{
    padding:5px 8px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:13px;
    outline:none;
    width:100%;
    max-width:200px;
}

/* 工具栏 */
.toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
    gap:12px;
    flex-wrap:wrap;
}
.toolbar-left{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.toolbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* 响应式 */
@media(max-width:768px){
    .sidebar{transform:translateX(-100%);}
    .sidebar.mobile-show{transform:translateX(0);}
    .main-content{margin-left:0!important;padding:16px;}
    .sidebar-toggle{display:none;}
    .form-grid{grid-template-columns:1fr;}
    .info-grid{grid-template-columns:1fr;}
}