/* ================================================================
   qyzc 统一主题 — 复刻 prototype-ant-design 的设计语言
   引入方式（在每个 HTML 的 Element Plus CSS 之后）：
     <link rel="stylesheet" href="../assets/theme.css">
   ================================================================ */

/* ----------------------------------------------------------------
   第 1 层：本地化数据字体
   ---------------------------------------------------------------- */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/space-grotesk-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/space-grotesk-700.woff2') format('woff2');
}

/* ----------------------------------------------------------------
   第 2 层：覆盖 Element Plus 设计 Tokens
   ---------------------------------------------------------------- */
:root {
    /* ---- 主色：中车红 #f5322c ----
       light-3/5/7/9 为主色与白色的逐级混合（用于 hover/disabled/浅背景） */
    --el-color-primary: #f5322c;
    --el-color-primary-light-3: #f86f6c;
    --el-color-primary-light-5: #fa9895;
    --el-color-primary-light-7: #fcc2bf;
    --el-color-primary-light-8: #fdd6d4;
    --el-color-primary-light-9: #feebea;
    --el-color-primary-dark-2: #c42823;

    /* ---- 圆角：原型用 10px（lg）/ 6px（sm）/ 14px（round） ---- */
    --el-border-radius-base: 10px;
    --el-border-radius-small: 6px;
    --el-border-radius-round: 14px;

    /* ---- 阴影：极浅，还原 shadcn 的 shadow-sm ---- */
    --el-box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --el-box-shadow-light: 0 1px 2px 0 rgba(15, 23, 42, 0.05);

    /* ---- 字体：中文字体栈（HarmonyOS/MiSans 优先级递减回退） ---- */
    --el-font-family: "HarmonyOS Sans SC", "MiSans", "PingFang SC",
        "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC",
        -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    /* 基础字号降一档（13px），贴合原型紧凑感 */
    --el-font-size-base: 13px;
    --el-font-size-small: 12px;
    --el-font-size-medium: 13px;
    --el-font-size-large: 15px;

    /* ---- 组件默认尺寸：原型按钮/输入框 h-9 = 36px ---- */
    --el-component-size: 36px;
    --el-component-size-small: 28px;
    --el-component-size-large: 44px;

    /* ---- 边框颜色：原型用极浅灰 #e4e7ed ---- */
    --el-border-color: #e4e7ed;
    --el-border-color-light: #ebeef5;
    --el-border-color-lighter: #f2f3f5;

    /* ---- 文字色：原型 foreground/muted ---- */
    --el-text-color-primary: #1f2937;
    --el-text-color-regular: #303133;
    --el-text-color-secondary: #606266;
    --el-text-color-placeholder: #909399;

    /* ---- 背景色 ---- */
    --el-bg-color: #ffffff;
    --el-bg-color-page: #f5f7fa;
    --el-fill-color-light: #f5f7fa;
}

/* ----------------------------------------------------------------
   第 3 层：设计 tokens（供自定义容器引用，与 EP 变量同源）
   ---------------------------------------------------------------- */
:root {
    --qyzc-primary: #f5322c;
    --qyzc-primary-soft: #feebea;          /* 主色 10% 背景 */
    --qyzc-success-soft: #f0f9eb;
    --qyzc-success-text: #67c23a;
    --qyzc-warning-soft: #fdf6ec;
    --qyzc-warning-text: #e6a23c;
    --qyzc-danger-soft: #fef0f0;
    --qyzc-danger-text: #f56c6c;
    --qyzc-info-soft: #f4f4f5;
    --qyzc-info-text: #909399;
    --qyzc-border: #e4e7ed;
    --qyzc-bg: #ffffff;
    --qyzc-bg-page: #f5f7fa;
    --qyzc-radius: 10px;
}

/* ----------------------------------------------------------------
   第 4 层：数据字体工具类
   用法：<span class="font-data">1280000</span>
   ---------------------------------------------------------------- */
.font-data {
    font-family: "Space Grotesk", "DIN Alternate", "Roboto Mono",
        "SFMono-Regular", -apple-system, ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: "tnum";        /* 等宽数字，对齐整齐 */
}

/* ----------------------------------------------------------------
   第 5 层：组件风格补丁
   ---------------------------------------------------------------- */

/* Tag/Badge：去掉边框、圆角 6px，还原原型"浅底深字"扁平风格 */
.el-tag {
    border: none;
    border-radius: 6px;
    padding: 1px 8px;
    height: auto;
    line-height: 1.6;
}

/* 按钮：还原原型 h-9 + font-medium */
.el-button {
    font-weight: 500;
}

/* 卡片：默认阴影极浅 */
.el-card {
    border-radius: var(--qyzc-radius);
    box-shadow: var(--el-box-shadow);
}

/* 表格：紧凑、表头浅灰 */
.el-table {
    --el-table-header-bg-color: #fafbfc;
    --el-table-border-color: #ebeef5;
    --el-table-row-hover-bg-color: #fafbfc;
}

/* 输入框聚焦环：还原原型的 ring 效果 */
.el-input__wrapper.is-focus {
    box-shadow: 0 0 0 2px rgba(245, 50, 44, 0.15) !important;
}

/* 输入类组件：统一高度、字体、边框，避免页面间控件风格漂移 */
.el-input__wrapper,
.el-input-number .el-input__wrapper {
    border-radius: 5px;
    box-shadow: 0 0 0 1px #e2e8f0 inset;
    font-family: var(--el-font-family);
    font-size: 13px;
}

.el-input__wrapper:hover,
.el-input-number .el-input__wrapper:hover {
    box-shadow: 0 0 0 1px #cbd5e1 inset;
}

.el-input__inner {
    color: #334155;
    font-family: var(--el-font-family);
    font-size: 13px;
    font-weight: 400;
}

.el-input__inner::placeholder {
    color: #b5c0d3;
}

.el-input--small .el-input__wrapper,
.el-input-number--small .el-input__wrapper {
    min-height: 32px;
}

.el-input:not(.el-input--small) .el-input__wrapper,
.el-input-number:not(.el-input-number--small) .el-input__wrapper {
    min-height: 34px;
}

/* Select 保持 Element Plus 原生交互，仅统一为系统 13px 字号 */
.el-select__selected-item,
.el-select__placeholder,
.el-select-dropdown__item {
    font-size: 13px;
}

/* Select 下拉项：选中态只保留文字/对勾，悬浮态才铺整行背景 */
.el-select-dropdown__item {
    box-sizing: border-box;
    display: block;
    width: 100%;
}

.el-select-dropdown__item.selected,
.el-select-dropdown__item.is-selected {
    background-color: transparent;
}

.el-select-dropdown__item.selected > span,
.el-select-dropdown__item.is-selected > span {
    background-color: transparent;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item.is-hovering {
    background-color: var(--el-fill-color-light);
}

/* 菜单项激活色跟随主色 */
.el-menu-item.is-active {
    color: var(--el-color-primary);
    background-color: var(--el-color-primary-light-9);
}