/* ============================================================
   住宿申请审批系统 · 设计令牌层
   ------------------------------------------------------------
   与「智慧公寓管理系统」共用同一套设计源（bjcvc-apartment/app.css）。
   改主题色只需改这一处，两个系统同时生效。

   约定：
   1. 色值 / 圆角 / 阴影一律走变量，页面与 JS 不写死；
   2. 文件末尾保留「旧变量名 → 新令牌」的别名映射，
      这样既有的 JS 内联样式（var(--primary) 等）零改动即可用；
   3. 断点统一 900px：小于为移动端（抽屉侧栏），大于为桌面端（固定侧栏）。
   ============================================================ */

:root {
    /* ---- 品牌色阶 ---- */
    --brand-900: #0C3A66;
    --brand-800: #10487C;
    --brand-700: #15528F;
    --brand-600: #1A67B3;
    --brand-500: #2A7FD4;
    --brand-300: #7FB3E3;
    --brand-100: #E3EEF9;
    --brand-50: #F2F7FC;

    /* ---- 点缀色 ---- */
    --accent: #C08A22;
    --accent-soft: #FBF2DC;

    /* ---- 语义色 ---- */
    --ok: #0F9D6B;
    --ok-soft: #E6F6F0;
    --warn: #CF7A0C;
    --warn-soft: #FDF3E2;
    --danger: #D34040;
    --danger-soft: #FCECEC;
    --info: #2A7FD4;
    --info-soft: #E9F2FB;
    --purple: #7355D6;
    --purple-soft: #F0ECFD;

    /* ---- 中性色 ---- */
    --bg: #F2F5F9;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --surface-3: #EDF2F8;
    --line: #E3E9F0;
    --line-strong: #CFD9E4;
    --ink: #17263A;
    --ink-2: #46586C;
    --ink-3: #78889A;
    --ink-4: #A3B0BF;

    /* ---- 形状与投影 ---- */
    --r-xs: 7px;
    --r-sm: 9px;
    --r: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --sh-1: 0 1px 2px rgba(16, 40, 70, .05), 0 2px 6px rgba(16, 40, 70, .04);
    --sh-2: 0 2px 6px rgba(16, 40, 70, .06), 0 10px 26px rgba(16, 40, 70, .08);
    --sh-3: 0 14px 40px rgba(16, 40, 70, .16);

    /* ---- 布局 ---- */
    --sidebar-w: 232px;
    --header-h: 60px;

    --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

    /* ============================================================
       兼容别名：旧变量名 → 新令牌
       （历史页面与 JS 内联样式里写的是 --primary / --ink-3 等，
         保留映射后无需逐处改写，也不会出现"某个颜色没跟上换肤"）
       ============================================================ */
    --primary: var(--brand-600);
    --primary-dark: var(--brand-700);
    --primary-soft: var(--brand-100);
    --card: var(--surface);
    --line-2: var(--surface-3);
    --radius: var(--r-lg);
    --radius-sm: var(--r-sm);
    --shadow: var(--sh-1);
    --shadow-lg: var(--sh-3);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--brand-600);
    text-decoration: none;
}

a:hover {
    color: var(--brand-700);
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ---- 滚动条：细一些，别抢视线 ---- */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 9px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink-4);
    background-clip: content-box;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---- 线性图标：统一描边，颜色跟随文字 ---- */
.icon {
    width: 1em;
    height: 1em;
    flex: none;
    display: inline-block;
    vertical-align: -.14em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.nowrap {
    white-space: nowrap;
}

.hidden {
    display: none !important;
}