/* =========================================================
   易店云 — 金蝶 AI 星辰配色体系
   深色侧栏 + 浅灰画布 + 纯白卡片 + 科技蓝主色
   ========================================================= */

:root {
    /* 背景与层级 */
    --syt-bg: #f2f4f8;
    --syt-bg-nested: #f7f8fa;
    --syt-surface: #ffffff;

    /* 导航锚点 */
    --syt-sidebar: #1e222d;
    --syt-sidebar-text: #a6adb4;
    --syt-sidebar-text-active: #ffffff;
    --syt-sidebar-hover: rgba(255, 255, 255, 0.06);

    /* 品牌主色 */
    --syt-primary: #2f6bff;
    --syt-primary-hover: #1f57e6;
    --syt-primary-soft: #eaf1ff;

    /* 语义色（点缀，不大面积铺） */
    --syt-success: #00b42a;
    --syt-warning: #ff7d00;
    --syt-warning-soft: #fff7e8;
    --syt-danger: #f53f3f;
    --syt-cyan: #0fc6c2;
    --syt-magenta: #f5319d;
    --syt-purple: #722ed1;
    --syt-accent: #ff7d00;
    --syt-accent-soft: #fff7e8;

    /* 文字灰阶 */
    --syt-ink: #1d2129;
    --syt-text: #1d2129;
    --syt-text-secondary: #595959;
    --syt-muted: #86909c;

    /* 边框与阴影 */
    --syt-border: #e5e6eb;
    --syt-radius: 6px;
    --syt-radius-sm: 4px;
    --syt-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(29, 33, 41, 0.04);
    --syt-font: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --syt-display: "PingFang SC", "Microsoft YaHei", sans-serif;

    /* 兼容旧变量名 */
    --syt-ink-soft: #4e5969;
    --syt-panel: #ffffff;
    --syt-panel-hover: #f7f8fa;
    --syt-bg-glow: #f2f4f8;

    /* Element Plus */
    --el-color-primary: #2f6bff;
    --el-color-primary-light-3: #5b8cff;
    --el-color-primary-light-5: #87adff;
    --el-color-primary-light-7: #b3ceff;
    --el-color-primary-light-8: #c9dcff;
    --el-color-primary-light-9: #eaf1ff;
    --el-color-primary-dark-2: #1f57e6;
    --el-color-success: #00b42a;
    --el-color-warning: #ff7d00;
    --el-color-danger: #f53f3f;
    --el-border-radius-base: 4px;
    --el-font-family: var(--syt-font);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    color-scheme: light;
    min-height: 100%;
    background: var(--syt-bg);
}

body {
    margin: 0;
    font-family: var(--syt-font);
    color: var(--syt-text);
    background: transparent;
    -webkit-font-smoothing: antialiased;
}

.content-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 4px;
}

.page-header {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--syt-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header h1::before {
    content: "";
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--syt-primary);
    flex-shrink: 0;
}

.page-header p {
    margin: 6px 0 0;
    color: var(--syt-muted);
    font-size: 13px;
}

.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-card,
.main-card,
.syt-panel {
    background: var(--syt-surface);
    border: 1px solid var(--syt-border);
    border-radius: var(--syt-radius);
    box-shadow: var(--syt-shadow);
}

.filter-card {
    padding: 16px 20px;
    margin-bottom: 12px;
}

.main-card { overflow: hidden; }

.el-card {
    border: 1px solid var(--syt-border) !important;
    border-radius: var(--syt-radius) !important;
    box-shadow: var(--syt-shadow) !important;
    background: var(--syt-surface);
}

.el-card__header {
    border-bottom-color: var(--syt-border) !important;
    font-weight: 600;
    color: var(--syt-ink);
    background: var(--syt-surface);
}

/* ---- 统计卡：仅作用于页面级统计区，避免误伤表格内 .stat-item ---- */
.stats-card,
.stats-cards,
.stats-row,
.syt-stats {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}

.stats-grid,
.stats-cards,
.syt-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 12px !important;
}

.stats-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 12px !important;
}

/* 若页面仍用 el-row 包一层，取消外层 grid，改由内部卡片承托 */
.stats-row:has(> .el-row) {
    display: block !important;
}

.stats-row > .el-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.stats-row > .el-row > .el-col {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 12px;
}

.stats-card .stat-item,
.stats-grid .stat-item,
.stats-cards .stat-card,
.stats-row .stat-item,
.syt-stats .stat-item,
.syt-stat-card {
    text-align: left !important;
    padding: 16px 18px !important;
    background: var(--syt-surface) !important;
    border: 1px solid var(--syt-border) !important;
    border-radius: var(--syt-radius) !important;
    box-shadow: var(--syt-shadow);
    position: relative;
    overflow: hidden;
    color: var(--syt-ink) !important;
    backdrop-filter: none !important;
}

.stats-card .stat-item::before,
.stats-grid .stat-item::before,
.stats-cards .stat-card::before,
.stats-row .stat-item::before,
.syt-stats .stat-item::before,
.syt-stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--syt-primary);
}

.stats-card .stat-item:nth-child(2)::before,
.stats-grid .stat-item:nth-child(2)::before,
.stats-cards .stat-card:nth-child(2)::before,
.stats-row .stat-item:nth-child(2)::before,
.syt-stats .stat-item:nth-child(2)::before { background: var(--syt-cyan); }

.stats-card .stat-item:nth-child(3)::before,
.stats-grid .stat-item:nth-child(3)::before,
.stats-cards .stat-card:nth-child(3)::before,
.stats-row .stat-item:nth-child(3)::before,
.syt-stats .stat-item:nth-child(3)::before { background: var(--syt-warning); }

.stats-card .stat-item:nth-child(4)::before,
.stats-grid .stat-item:nth-child(4)::before,
.stats-cards .stat-card:nth-child(4)::before,
.stats-row .stat-item:nth-child(4)::before,
.syt-stats .stat-item:nth-child(4)::before { background: var(--syt-purple); }

.stats-card .stat-item:nth-child(5)::before,
.stats-grid .stat-item:nth-child(5)::before,
.stats-cards .stat-card:nth-child(5)::before,
.stats-row .stat-item:nth-child(5)::before,
.syt-stats .stat-item:nth-child(5)::before { background: var(--syt-magenta); }

.stats-card .stat-number,
.stats-grid .stat-number,
.stats-cards .stat-number,
.stats-row .stat-number,
.syt-stats .stat-number,
.syt-stat-card .stat-number {
    font-size: 26px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    color: var(--syt-ink) !important;
    text-shadow: none !important;
    line-height: 1.15;
    opacity: 1 !important;
}

.stats-card .stat-label,
.stats-grid .stat-label,
.stats-cards .stat-label,
.stats-row .stat-label,
.syt-stats .stat-label,
.syt-stat-card .stat-label {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--syt-muted) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

@media (max-width: 900px) {
    .stats-grid,
    .stats-cards,
    .stats-row,
    .syt-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Tag 可读性：浅底 + 深字，避免浅字看不清 */
.el-tag {
    --el-tag-font-size: 12px;
    font-weight: 500;
}

.el-tag--warning {
    --el-tag-bg-color: #fff7e8;
    --el-tag-border-color: #ffe4ba;
    --el-tag-text-color: #ad4e00;
}

.el-tag--danger {
    --el-tag-bg-color: #ffece8;
    --el-tag-border-color: #fdcdc5;
    --el-tag-text-color: #cb2634;
}

.el-tag--success {
    --el-tag-bg-color: #e8ffea;
    --el-tag-border-color: #b7f0bf;
    --el-tag-text-color: #009a29;
}

.el-tag--primary {
    --el-tag-bg-color: #eaf1ff;
    --el-tag-border-color: #b3ceff;
    --el-tag-text-color: #1f57e6;
}

.el-tag--info {
    --el-tag-bg-color: #f2f3f5;
    --el-tag-border-color: #e5e6eb;
    --el-tag-text-color: #4e5969;
}

/* 表格表头：禁止 emoji 挤爆换行 */
.el-table .el-table__header th .cell {
    white-space: nowrap;
    word-break: keep-all;
    line-height: 1.4;
    color: var(--syt-muted);
    font-weight: 500;
}

/* 提示条 / 次级块 */
.user-info {
    background: var(--syt-bg-nested) !important;
    border: 1px solid var(--syt-border) !important;
    border-radius: var(--syt-radius) !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
}

.user-avatar { background: var(--syt-primary) !important; }
.user-details { color: var(--syt-ink) !important; }

.store-badge {
    background: #e8ffea !important;
    border: 1px solid #b7f0bf !important;
    color: #00b42a !important;
    border-radius: 2px !important;
}

.admin-badge {
    background: var(--syt-warning-soft) !important;
    border: 1px solid #ffe4ba !important;
    color: var(--syt-warning) !important;
    border-radius: 2px !important;
}

.el-table {
    --el-table-header-bg-color: #f7f8fa;
    --el-table-row-hover-bg-color: #f2f6ff;
    --el-table-border-color: #e5e6eb;
    color: var(--syt-text);
}

.el-table th.el-table__cell {
    color: var(--syt-muted);
    font-weight: 500;
}

.el-input__wrapper,
.el-select__wrapper { border-radius: 4px !important; }

.el-button {
    border-radius: 4px !important;
    font-weight: 500;
}

.el-button--primary {
    --el-button-bg-color: var(--syt-primary);
    --el-button-border-color: var(--syt-primary);
    --el-button-hover-bg-color: var(--syt-primary-hover);
    --el-button-hover-border-color: var(--syt-primary-hover);
}

.el-tag { border-radius: 2px !important; }

.el-dialog {
    border-radius: 8px !important;
    overflow: hidden;
}

.el-dialog__header {
    padding-bottom: 12px !important;
    margin-right: 0 !important;
    border-bottom: 1px solid var(--syt-border);
}

.el-dialog__title {
    font-weight: 600 !important;
    color: var(--syt-ink) !important;
}

.el-message-box { border-radius: 8px !important; }

.quantity-positive { color: var(--syt-success) !important; font-weight: 600; }
.quantity-negative { color: var(--syt-danger) !important; font-weight: 600; }

.pagination-bar { border-top: 1px solid var(--syt-border); }

.date-input {
    border: 1px solid var(--syt-border) !important;
    border-radius: 4px !important;
    background: #fff;
}

.stock-normal { background: #eaf1ff; color: #2f6bff; }
.stock-low { background: #fff7e8; color: #ff7d00; }
.stock-critical { background: #ffece8; color: #f53f3f; }
.stock-excess { background: #f7f8fa; color: #86909c; }

/* 公司标签等次级块 */
.company-stats {
    background: var(--syt-bg-nested);
    border: 1px solid var(--syt-border);
    border-radius: var(--syt-radius);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.company-stats h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--syt-text-secondary);
}