/* 仓库库存管理后台样式 */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f0f2f5; color: #303133; }
a { text-decoration: none; color: inherit; }

.wh-layout { display: flex; min-height: 100vh; }
.wh-aside {
    width: 220px; background: #1f2d3d; color: #bfcbd9; flex-shrink: 0;
}
.wh-brand {
    height: 56px; line-height: 56px; text-align: center;
    font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 2px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.wh-menu { list-style: none; margin: 12px 0; padding: 0; }
.wh-menu li a {
    display: block; padding: 12px 24px; color: #bfcbd9; transition: all .2s;
}
.wh-menu li a:hover, .wh-menu li.active a {
    background: #001528; color: #409EFF;
}

.wh-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wh-header {
    height: 56px; background: #fff; display: flex; align-items: center;
    justify-content: space-between; padding: 0 24px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
}
.wh-header h1 { margin: 0; font-size: 18px; font-weight: 600; }
.wh-header-right {
    color: #606266; font-size: 13px;
    display: flex; align-items: center; gap: 12px;
}
.wh-user-name { color: #606266; }
.wh-btn-link {
    color: #409EFF; font-size: 13px;
}
.wh-btn-link:hover { color: #66b1ff; }
.wh-btn-logout {
    display: inline-block;
    padding: 6px 14px;
    background: #F56C6C;
    color: #fff !important;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.2;
}
.wh-btn-logout:hover { background: #f78989; }
.wh-content { padding: 20px; }

/* 产品图片上传框 */
.wh-avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}
.wh-avatar-uploader .el-upload:hover { border-color: #409EFF; }
.wh-avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
}
.wh-avatar {
    width: 100px;
    height: 100px;
    display: block;
    object-fit: cover;
}

.wh-card {
    background: #fff; border-radius: 4px; padding: 16px 20px;
    margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.wh-toolbar { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wh-toolbar .el-input, .wh-toolbar .el-select { width: 200px; }

.wh-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.wh-stat-item {
    background: #fff; border-radius: 4px; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.wh-stat-item .label { color: #909399; font-size: 13px; margin-bottom: 8px; }
.wh-stat-item .value { font-size: 28px; font-weight: 700; color: #303133; }
.wh-stat-item.warn .value { color: #F56C6C; }

.wh-warn-text { color: #F56C6C; font-weight: 600; }
.wh-section-title { font-size: 16px; font-weight: 600; margin: 0 0 12px; }

@media (max-width: 992px) {
    .wh-stat-row { grid-template-columns: repeat(2, 1fr); }
    .wh-aside { width: 180px; }
}
@media (max-width: 640px) {
    .wh-layout { flex-direction: column; }
    .wh-aside { width: 100%; }
    .wh-stat-row { grid-template-columns: 1fr; }
}