/* ============================================================
   香榧·智慧财务共享平台 — 基础样式与变量
   ============================================================ */
@import url('../vendor/fonts/noto-sans-sc.css');

:root {
    /* 中性色 */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e6e9ef;
    --slate-300: #d3d9e3;
    --slate-400: #9aa4b5;
    --slate-500: #6b7688;
    --slate-600: #4d5768;
    --slate-700: #364152;
    --slate-800: #212a38;
    --slate-900: #131a26;

    /* 品牌主色（企业蓝） */
    --brand-color: #2e5ce6;
    --brand-light: #eef3ff;
    --brand-dark: #1f44b8;
    --brand-bg: rgba(46, 92, 230, 0.08);

    /* 岗位色系 */
    --ywkj-color: #0e7490;  --ywkj-light: #ecfeff;  --ywkj-dark: #0c5f77;  --ywkj-bg: rgba(14,116,144,.08);
    --cwfx-color: #6d28d9;  --cwfx-light: #f3efff;  --cwfx-dark: #5620ad;  --cwfx-bg: rgba(109,40,217,.08);
    --cbkj-color: #b45309;  --cbkj-light: #fdf6ec;  --cbkj-dark: #8f4107;  --cbkj-bg: rgba(180,83,9,.08);
    --cwzg-color: #15803d;  --cwzg-light: #effcf3;  --cwzg-dark: #116330;  --cwzg-bg: rgba(21,128,61,.08);

    /* 默认映射（由 stage-theme 按岗位切换） */
    --role-color: var(--brand-color);
    --role-light: var(--brand-light);
    --role-dark: var(--brand-dark);
    --role-bg: var(--brand-bg);

    /* 语义色 */
    --success: #16a34a;  --success-light: #ecfdf3;
    --warning: #d97706;  --warning-light: #fff8eb;
    --danger:  #dc2626;  --danger-light:  #fef2f2;
    --info:    #0284c7;  --info-light:    #f0f9ff;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
    --shadow-md: 0 4px 14px rgba(16,24,40,.08);
    --shadow-lg: 0 12px 36px rgba(16,24,40,.14);
    --trans: all .22s cubic-bezier(.4,0,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro SC', 'PingFang SC',
                 'Noto Sans SC', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
    background: #f5f6f8;
    color: var(--slate-800);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(46,92,230,.16); }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c9cfda; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #aab3c2; }
::-webkit-scrollbar-track { background: transparent; }

/* 数字等宽（财务表格关键） */
.num, .data-table td.num, .data-table th.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ---------- 布局工具 ---------- */
.container { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1520px; margin: 0 auto; padding: 0 32px; }

.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center { display: flex; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-sm { font-size: .85rem; }
.text-xs { font-size: .78rem; }
.text-lg { font-size: 1.1rem; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.text-muted { color: var(--slate-500); }
.text-slate { color: var(--slate-600); }
.mono { font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace; }

/* ---------- 徽标 ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border-radius: 999px;
    font-size: .74rem; font-weight: 600; line-height: 1.6;
    white-space: nowrap;
}
.badge-ywkj { background: var(--ywkj-light); color: var(--ywkj-dark); }
.badge-cwfx { background: var(--cwfx-light); color: var(--cwfx-dark); }
.badge-cbkj { background: var(--cbkj-light); color: var(--cbkj-dark); }
.badge-cwzg { background: var(--cwzg-light); color: var(--cwzg-dark); }
.badge-brand { background: var(--brand-light); color: var(--brand-dark); }
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-info { background: var(--info-light); color: var(--info); }
.badge-gray { background: var(--slate-100); color: var(--slate-600); }

/* 岗位文字色 */
.text-ywkj { color: var(--ywkj-color); }
.text-cwfx { color: var(--cwfx-color); }
.text-cbkj { color: var(--cbkj-color); }
.text-cwzg { color: var(--cwzg-color); }
.text-brand { color: var(--brand-color); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }

/* 分隔 */
.divider { height: 1px; background: var(--slate-200); margin: 20px 0; border: 0; }
.divider-v { width: 1px; background: var(--slate-200); align-self: stretch; }