/* =========================================================
   警用风格 · 设计令牌与基础层
   Deyes 天空之眼 — 视觉基线
   ---------------------------------------------------------
   设计取向：克制框架（精密仪器）+ 关键处发光（指挥感）
   ========================================================= */

:root {
    /* ---------- 主色调（与全站 300+ 处硬编码保持一致，勿改） ---------- */
    --bg-0: #0A1628;          /* 深空蓝：页面底 */
    --bg-1: #0D2A4E;          /* 警务蓝：卡片/面板 */
    --bg-2: #1B4F8C;          /* 科技蓝：次级背景 */
    --accent-blue: #2196F3;   /* 亮蓝：链接/次级强调 */
    --accent-cyan: #00E5FF;   /* 霓虹青：主强调 */
    --warn-orange: #FF9800;   /* 警示橙 */

    /* ---------- 功能色 ---------- */
    --success: #00C853;
    --warning: #FFD600;
    --danger:  #FF1744;
    --info:    #2979FF;

    /* ---------- 文字色 ---------- */
    --text-0: rgba(255, 255, 255, 0.92);   /* 主文字 */
    --text-1: rgba(255, 255, 255, 0.68);   /* 次文字 */
    --text-2: rgba(255, 255, 255, 0.45);   /* 辅助文字 */
    --text-3: rgba(255, 255, 255, 0.26);   /* 禁用文字 */

    /* ---------- 描边 / 微光 ---------- */
    --border-glow: rgba(0, 229, 255, 0.20);
    --border-glow-strong: rgba(0, 229, 255, 0.55);
    --hairline: rgba(130, 180, 240, 0.13);
    --hairline-strong: rgba(130, 180, 240, 0.24);

    /* ---------- 三级表面（材质） ---------- */
    --surface-1: linear-gradient(180deg, rgba(26, 55, 90, 0.62) 0%, rgba(11, 24, 42, 0.72) 100%);
    --surface-2: linear-gradient(180deg, rgba(9, 20, 36, 0.78) 0%, rgba(7, 15, 28, 0.78) 100%);
    --surface-3: linear-gradient(180deg, rgba(40, 82, 128, 0.62) 0%, rgba(17, 36, 60, 0.70) 100%);

    /* ---------- 阴影 / 光 ---------- */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 10px rgba(0, 0, 0, 0.16);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.46), 0 2px 6px rgba(0, 0, 0, 0.28);
    --shadow-3: 0 22px 60px rgba(0, 0, 0, 0.62), 0 4px 14px rgba(0, 0, 0, 0.36);
    --inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);   /* 受光面 */
    --inner-sunken: inset 0 2px 6px rgba(0, 0, 0, 0.40);    /* 凹陷感 */
    --glow-cyan: 0 0 0 1px rgba(0, 229, 255, 0.32), 0 0 24px rgba(0, 229, 255, 0.18);
    --glow-danger: 0 0 0 1px rgba(255, 23, 68, 0.35), 0 0 24px rgba(255, 23, 68, 0.18);

    /* ---------- 圆角 ---------- */
    --radius: 8px;
    --radius-sm: 6px;
    --radius-lg: 12px;

    /* ---------- 动效 ---------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.18s;

    /* ---------- 字体 ---------- */
    --font-sans: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

    /* ---------- 布局（保留原语义） ---------- */
    --nav-height: 56px;
    --sidebar-width: 220px;
    --sidebar-collapsed: 64px;
}

/* ---------- 全局重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-0);
    color: var(--text-0);
    min-height: 100vh;
    letter-spacing: 0.2px;
    background-color: #071324;
    background-image:
        radial-gradient(1100px 620px at 16% -12%, rgba(33, 150, 243, 0.16), rgba(7, 19, 36, 0) 62%),
        radial-gradient(900px 520px at 94% 4%, rgba(0, 229, 255, 0.10), rgba(7, 19, 36, 0) 60%),
        radial-gradient(1000px 700px at 50% 118%, rgba(33, 150, 243, 0.08), rgba(7, 19, 36, 0) 62%);
    background-attachment: fixed;
}

/* 网格背景装饰 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(0, 229, 255, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 229, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(140% 100% at 50% 0%, #000 20%, transparent 85%);
    -webkit-mask-image: radial-gradient(140% 100% at 50% 0%, #000 20%, transparent 85%);
}

/* ---------- 排版基线 ---------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-0);
    letter-spacing: 0.5px;
    line-height: 1.4;
}
h4 { font-size: 16px; }
p { color: var(--text-1); }

label, .control-label {
    letter-spacing: 0.3px;
}

hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
    margin: 16px 0;
}

a { color: var(--accent-blue); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent-cyan); }

::selection { background: rgba(0, 229, 255, 0.28); color: #fff; }

:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.55);
    outline-offset: 2px;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.35), rgba(33, 150, 243, 0.25));
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.5); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 日期选择器适配深色 ---------- */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    color-scheme: dark;
}

/* ---------- 页面容器：入场动画 ---------- */
@keyframes police-page-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
/* 注意：不要设置 z-index（会创建层叠上下文，把容器内的 Bootstrap 模态框困在
   body 级遮罩 z-index:1040 之下），也不要用 backwards/both 填充模式（动画结束后
   仍保留 transform，持续产生层叠上下文）。position:relative 足以让内容盖住 body 网格背景。 */
.police-page {
    position: relative;
    padding: 4px;
    animation: police-page-in 0.36s var(--ease);
}

/* ---------- 通用工具类 ---------- */
.text-cyan    { color: var(--accent-cyan) !important; }
.text-blue    { color: var(--accent-blue) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }
.text-info    { color: var(--info) !important; }

.mono, .mono-text {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* 图标与文字的通用间距 */
.material-icons { vertical-align: middle; user-select: none; }
.mi-16 { font-size: 16px !important; }
.mi-18 { font-size: 18px !important; }
.mi-20 { font-size: 20px !important; }