/* 全站主题: 在 amis cxd 主题之上覆盖设计变量,必须在 cxd.css 之后引入。
   改这个文件后记得更新 index.html / login.html 里 theme.css 的 ?v= 版本号。 */

:root {
    /* 品牌色: 靛蓝 */
    --colors-brand-4: #3f37c9;
    --colors-brand-5: #4f46e5;
    --colors-brand-6: #6d66f0;
    --colors-brand-10: #eef0ff;
    --colors-link-5: var(--colors-brand-5);
    --colors-link-6: var(--colors-brand-6);

    /* 涨跌色,dashboard 等自定义组件使用 */
    --qa-up: #0f9d6b;
    --qa-down: #e5484d;
    --qa-up-bg: #e8f7f0;
    --qa-down-bg: #fdecec;

    --qa-bg: #f5f6f8;
    --qa-surface: #ffffff;
    --qa-border: #e6e8ec;
    --qa-text: #1c2230;
    --qa-muted: #6b7280;

    --fonts-base-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --borders-radius-3: 6px;
    --borders-radius-4: 8px;
    --borders-radius-5: 10px;

    --body-bg: var(--qa-bg);
    --Page-main-bg: var(--qa-bg);
    --Page-title-fontWeight: 600;
    --Page-title-color: var(--qa-text);

    /* 顶栏 & 侧栏: 浅色,用细边框分隔 */
    --Layout-header-bg: var(--qa-surface);
    --Layout-aside-width: 13rem;
    --Layout-aside-bg: var(--qa-surface);
    --Layout-aside-subList-bg: var(--qa-surface);
    --Layout-brand-bg: var(--qa-surface);
    --Layout-brand-color: var(--qa-text);
    --Layout-brandBar-color: var(--qa-muted);
    --Layout-asideLink-color: #4b5263;
    --Layout-asideLink-fontSize: 14px;
    --Layout-asideLink-onHover-color: var(--qa-text);
    --Layout-asideLink-onHover-iconColor: var(--qa-text);
    --Layout-asideLink-onActive-color: var(--colors-brand-5);
    --Layout-aside-onHover-bg: #f3f4f6;
    --Layout-aside-onAcitve-bg: var(--colors-brand-10);
    --Layout-asideLink-arrowColor: #9aa1ad;
    --Layout-asideLink-onHover-arrowColor: var(--qa-text);
    --Layout-asideLabel-color: #9aa1ad;

    /* 面板 / 表格 */
    --Panel-bg: var(--qa-surface);
    --Panel-heading-bg: var(--qa-surface);
    --Panel-heading-color: var(--qa-text);
    --Panel-heading-fontSize: 14px;
    --Panel-heading-fontWeight: 600;
    --Table-thead-bg: #fafbfc;
    --Table-thead-color: var(--qa-muted);
    --Table-thead-borderColor: var(--qa-border);
}

body {
    background: var(--qa-bg);
    color: var(--qa-text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- 布局 ---------- */
.amis-scope .cxd-Layout-aside {
    border-right: 1px solid var(--qa-border);
}

.amis-scope .cxd-Layout-brandBar,
.amis-scope .cxd-Layout-brand {
    border-bottom: 1px solid var(--qa-border);
}

.amis-scope .cxd-Layout-brand {
    font-weight: 600;
    letter-spacing: .01em;
}

.amis-scope .cxd-Layout-headerBar {
    border-bottom: 1px solid var(--qa-border);
}

.amis-scope .cxd-AsideNav-subList {
    background: transparent;
}

.amis-scope .cxd-AsideNav-list {
    padding: 8px;
}

.amis-scope .cxd-AsideNav-item > a {
    border-radius: 6px;
    margin: 1px 0;
}

.amis-scope .cxd-AsideNav-item.is-active > a {
    font-weight: 600;
}

/* ---------- 卡片化: 面板、CRUD 列表、表格都是白底圆角细边框 ---------- */
.amis-scope .cxd-Panel,
.amis-scope .cxd-Crud .cxd-Table {
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

.amis-scope .cxd-Panel-heading {
    border-bottom: 1px solid var(--qa-border);
}

/* 金额、ID 等数字等宽对齐 */
.amis-scope .cxd-Table td,
.qa-num {
    font-variant-numeric: tabular-nums;
}

/* 表格: 表头去掉竖向分隔线,行悬停高亮 */
.amis-scope .cxd-Table-table > thead > tr > th {
    font-weight: 500;
    font-size: 13px;
}

.amis-scope .cxd-Table-table > thead > tr > th:not(:last-child) {
    border-right: 0;
}

.amis-scope .cxd-Table-table > tbody > tr:hover > td {
    background: #f8f9fc;
}

/* 操作列: 前端页面和后端生成的 schema 都是 warning/info/danger 实心按钮,
   这里统一压成文字按钮,删除类保留红色 */
.amis-scope .cxd-OperationField .cxd-Button {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--colors-brand-5) !important;
    box-shadow: none !important;
    padding: 0 8px;
}

.amis-scope .cxd-OperationField .cxd-Button:hover {
    background: var(--colors-brand-10) !important;
}

.amis-scope .cxd-OperationField .cxd-Button--danger {
    color: var(--qa-down) !important;
}

.amis-scope .cxd-OperationField .cxd-Button--danger:hover {
    background: var(--qa-down-bg) !important;
}

/* ---------- Dashboard KPI 卡 ---------- */
.qa-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.qa-kpi {
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.qa-kpi-label {
    font-size: 13px;
    color: var(--qa-muted);
}

.qa-kpi-value {
    margin-top: 8px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--qa-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.qa-kpi-unit {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--qa-muted);
}

.qa-kpi-sub {
    margin-top: 10px;
    font-size: 12px;
    color: var(--qa-muted);
}

.qa-kpi-value.is-up { color: var(--qa-up); }
.qa-kpi-value.is-down { color: var(--qa-down); }

.qa-chip {
    display: inline-block;
    padding: 1px 8px;
    margin-right: 6px;
    border-radius: 999px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.qa-chip.is-up { color: var(--qa-up); background: var(--qa-up-bg); }
.qa-chip.is-down { color: var(--qa-down); background: var(--qa-down-bg); }

/* ---------- 登录页 ---------- */
.qa-login-page {
    padding: 14vh 16px 24px;
}

.qa-login-card {
    max-width: 400px;
    margin: 0 auto;
}

.qa-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--qa-text);
}

.qa-login-brand img {
    width: 32px;
    height: 32px;
}