/* ======================================================================
   theme.css — 设计系统（视觉语言层）

   职责：定义全站的颜色/阴影/圆角变量，以及通用组件的视觉风格
   （卡片、按钮、表格、徽标、表单、Tab、模态框、提示条等）。
   只管"长什么样"，不管"摆在哪"（布局见 layout.css）、不管页面特有样式（见 pages.css）。
   加载顺序：bootstrap → bootstrap-icons → app.css → scoped → 【theme.css】 → layout.css → pages.css
   （在 scoped 之后加载，可对模板/组件默认样式做整体覆盖美化）
   ====================================================================== */

/* ---------- 设计变量 ----------
   全站视觉基准：靛蓝主色 + 浅石板灰背景 + 白色表面。
   所有文件（layout/pages）通过 var(--wcs-*) 引用，改这里即可全站换肤 */
:root {
    --wcs-primary: #4f46e5;              /* 主色（靛蓝）：链接/主按钮/激活态 */
    --wcs-primary-hover: #4338ca;        /* 主色悬停加深 */
    --wcs-primary-soft: rgba(79, 70, 229, 0.08);  /* 主色 8% 透明浅底（选中行/浅背景块） */
    --wcs-bg: #f1f5f9;                   /* 页面背景（浅石板灰） */
    --wcs-surface: #ffffff;              /* 卡片等浮层表面色 */
    --wcs-border: #e2e8f0;               /* 通用边框色 */
    --wcs-text-muted: #64748b;           /* 次要文字（灰蓝） */
    --wcs-sidebar-from: #1e293b;         /* 侧栏渐变起始（深石板） */
    --wcs-sidebar-to: #0f172a;           /* 侧栏渐变终止（更深） */
    --wcs-radius: 0.75rem;               /* 卡片级圆角 */
    --wcs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);   /* 轻阴影：静止卡片 */
    --wcs-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.07);  /* 中阴影：悬浮卡片 */
}

/* ---------- 全局基调 ----------
   字体栈带中文字体（PingFang/雅黑），覆盖 app.css 的纯西文兜底；
   背景与文字色来自设计变量 */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background-color: var(--wcs-bg);
    -webkit-font-smoothing: antialiased;  /* macOS/iOS 字体抗锯齿 */
    color: #1e293b;
}

/* 链接统一主色，悬停加深 */
a, .btn-link { color: var(--wcs-primary); }
a:hover, .btn-link:hover { color: var(--wcs-primary-hover); }

/* 区块标题加粗，统一层级感（参数页/模板页的分组标题等） */
h4, h3 { font-weight: 700; letter-spacing: 0.01em; }

/* ---------- 卡片 ----------
   全站卡片基础皮肤：细边框 + 圆角 + 轻阴影；带阴影/位移过渡 */
.card {
    border: 1px solid var(--wcs-border);
    border-radius: var(--wcs-radius);
    box-shadow: var(--wcs-shadow-sm);
    background: var(--wcs-surface);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* bootstrap 的 shadow-sm 工具类强制对齐到主题轻阴影 */
.card.shadow-sm { box-shadow: var(--wcs-shadow-sm) !important; }

/* 卡片头：浅灰底 + 底部边框分隔 + 加粗；顶部圆角随卡片 */
.card-header {
    background-color: #f8fafc;
    border-bottom: 1px solid var(--wcs-border);
    font-weight: 600;
    border-radius: var(--wcs-radius) var(--wcs-radius) 0 0 !important;
}

/* ---------- 按钮 ---------- */
/* 所有按钮统一圆角与中等字重 */
.btn { border-radius: 0.55rem; font-weight: 500; }

/* 主按钮：靛蓝主色 + 轻投影提升层次 */
.btn-primary {
    background-color: var(--wcs-primary);
    border-color: var(--wcs-primary);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}
/* 主按钮悬停/聚焦/按下统一加深（!important 压过 bootstrap 的 hover 色） */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--wcs-primary-hover) !important;
    border-color: var(--wcs-primary-hover) !important;
}

/* 描边按钮：浅靛蓝边框的温和样式（"添加该国默认值"等次要操作） */
.btn-outline-primary {
    color: var(--wcs-primary);
    border-color: #c7d2fe;
}
.btn-outline-primary:hover {
    background-color: var(--wcs-primary);
    border-color: var(--wcs-primary);
}

/* 交互元素聚焦环：主色 18% 透明柔光圈，替代 bootstrap 默认蓝圈
   （覆盖 app.css 的白圈+蓝圈模板样式） */
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.18) !important;
    border-color: #a5b4fc;
}

/* 次要描边按钮（分页/翻页"上一页/下一页"、编辑等）：灰蓝文字 + 浅边框，悬停浅灰底 */
.btn-outline-secondary {
    color: #475569;
    border-color: #d8dee9;
}
.btn-outline-secondary:hover { background-color: #f1f5f9; color: #1e293b; }

/* ---------- 表格 ----------
   全站数据表格皮肤：表头浅灰大写小字 + 行悬停浅靛蓝高亮 */
.table {
    --bs-table-hover-bg: rgba(99, 102, 241, 0.045);  /* 悬停行底色（主色 4.5%） */
    margin-bottom: 0;                                  /* 卡片内表格由卡片控制下边距 */
}

/* 表头：小号大写灰字，信息层级低于数据本身 */
.table > thead th {
    background-color: #f8fafc;
    color: var(--wcs-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;          /* 大写字母间距，提升可读性 */
    border-bottom: 1px solid var(--wcs-border);
    white-space: nowrap;             /* 表头不换行 */
    padding: 0.65rem 0.75rem;
}

/* 数据单元格：垂直居中 + 极浅行线 */
.table > tbody td {
    padding: 0.6rem 0.75rem;
    border-color: #f1f5f9;
    vertical-align: middle;
}

/* table-hover 的行悬停高亮（应用自定义变量） */
.table-hover > tbody > tr:hover > * { background-color: var(--bs-table-hover-bg); }

/* 可横向滚动表格容器的圆角裁切 */
.table-responsive { border-radius: 0.55rem; }

/* Excel 文档预览：按内容自然宽度展开（否则被压成 100% 宽、单元格换行，
   列多时永远不溢出，无法左右滑动）。容器自身双向滚动并限制高度——
   否则长表把容器撑到几千像素高，横向滚动条被顶到可视区外看不到 */
.excel-preview { overflow: auto; max-height: 65vh; }
.excel-preview table { width: max-content; min-width: 100%; }
.excel-preview th, .excel-preview td { white-space: nowrap; }
/* 表头列号行吸顶，长表滚动时列号始终可见 */
.excel-preview thead th { position: sticky; top: 0; z-index: 1; }

/* ---------- 徽标 ----------
   胶囊形徽标（场地数/设备数/分拣量等）；各语义色校准为主题色系 */
.badge { border-radius: 50rem; font-weight: 600; padding: 0.42em 0.7em; }

/* 顶栏工单角标：工单 + 待处理(橙)/处理中(蓝)两枚数字胶囊，点击跳工单管理 */
.wo-counter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    padding: 0.18rem 0.55rem;
    border-radius: 50rem;
    background: var(--wcs-bg);
    border: 1px solid var(--bs-border-color);
    transition: box-shadow 0.15s ease;
}
.wo-counter-badge:hover { box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14); }
.wo-counter-label { font-size: 0.78rem; color: var(--bs-secondary-color); }
.wo-counter-pill {
    display: inline-block;
    padding: 0.12em 0.55em;
    border-radius: 50rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    white-space: nowrap;
}
.wo-counter-pill.pending { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.wo-counter-pill.processing { background: rgba(14, 165, 233, 0.16); color: #0369a1; }
.wo-counter-pill.zero { opacity: 0.45; }

/* 覆盖 bootstrap 默认语义色为更柔和的现代色（!important 压过 bg-* 工具类） */
.badge.bg-success { background-color: #10b981 !important; }
.badge.bg-danger { background-color: #ef4444 !important; }
.badge.bg-warning { background-color: #f59e0b !important; color: #fff !important; }
.badge.bg-info { background-color: #0ea5e9 !important; }
.badge.bg-secondary { background-color: #94a3b8 !important; }
.badge.bg-primary { background-color: var(--wcs-primary) !important; }
/* 浅底徽标（text-bg-light）：灰底灰字 + 细边框，用于弱提示 */
.badge.text-bg-light {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid var(--wcs-border);
}

/* ---------- 表单 ----------
   输入框/下拉框：统一圆角与内边距，边框浅灰，悬停微加深 */
.form-control, .form-select {
    border-radius: 0.55rem;
    border-color: #d8dee9;
    padding: 0.45rem 0.75rem;
}
/* form-select 右侧是 Bootstrap 的下拉箭头背景,上面统一 padding 的简写会覆盖
   Bootstrap 预留的右侧空间,导致文字与箭头重合——在此恢复 */
.form-select { padding-right: 2.25rem; }
.form-control:hover, .form-select:hover { border-color: #b6c2d3; }
/* 表单标签中等字重深色，与输入内容区分层级 */
.form-label { font-weight: 500; color: #334155; }

/* ---------- Tab（设备套卡片内） ----------
   设备套卡片的 服务器及监控设备/文档/电气设备 标签栏：
   去掉 bootstrap 默认样式，改为下划线式：激活项主色下划线+主色文字 */
.nav-tabs { border-bottom: 2px solid var(--wcs-border); gap: 0.25rem; }
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;   /* 占位下划线，防止文字跳动 */
    margin-bottom: -2px;                    /* 与容器底边线重叠 */
    color: var(--wcs-text-muted);
    border-radius: 0.45rem 0.45rem 0 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-tabs .nav-link:hover { color: var(--wcs-primary); }
.nav-tabs .nav-link.active {
    color: var(--wcs-primary);
    border-bottom-color: var(--wcs-primary);
    background: transparent;                /* 去掉 bootstrap 激活白底 */
    font-weight: 600;
}

/* ---------- 模态框 ----------
   弹窗皮肤：深色磨砂遮罩（比纯黑柔和）+ 大圆角 + 深投影 */
.modal-overlay, .modal-backdrop-custom {
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);             /* 背景磨砂，聚焦弹窗内容 */
}

/* 弹窗主体（含以卡片形式实现的自定义弹窗）：大圆角 + 明显投影 */
.modal-content, [class*="modal"] .card {
    border-radius: var(--wcs-radius);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
}

/* ---------- 登录/认证页 ----------
   登录页背景：两团主色/天蓝径向光晕 + 纵向浅渐变，形成柔和进场氛围；
   登录卡片去边框 + 大圆角 + 柔投影 */
.auth-wrapper {
    background:
        radial-gradient(1100px 500px at 10% -10%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(900px 480px at 110% 10%, rgba(14, 165, 233, 0.13), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, var(--wcs-bg) 100%);
}

.auth-wrapper .card, .auth-wrapper form ~ .card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

/* ---------- 提示条 ----------
   alert 统一圆角 + 左侧粗边样式（成功/危险/警告/信息四语义配色校准） */
.alert { border-radius: 0.65rem; border-width: 0 0 0 3px; }
.alert-success { background-color: #ecfdf5; color: #065f46; border-left-color: #10b981; }
.alert-danger { background-color: #fef2f2; color: #991b1b; border-left-color: #ef4444; }
.alert-warning { background-color: #fffbeb; color: #92400e; border-left-color: #f59e0b; }
.alert-info { background-color: #eff6ff; color: #1e40af; border-left-color: #3b82f6; }

/* ---------- 面包屑 ----------
   场地详情"国家 > 场地"导航：链接主色，分隔符灰色 */
.breadcrumb-item a { color: var(--wcs-primary); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--wcs-text-muted); }

/* ---------- 滚动条 ----------
   全站细圆角滚动条（桌面 webkit 内核），灰蓝色不抢视觉；
   滑块带背景色描边形成间隙感 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 50rem; border: 2px solid var(--wcs-bg); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- 空状态/加载文案 ----------
   "加载中..."/"暂无数据"等斜体提示统一灰色弱化 */
.content em, .card-body em { color: var(--wcs-text-muted); }

/* ---------- 折线图卡片内 svg 一致性 ----------
   分拣趋势图表（LiveCharts 渲染 svg）：坐标文字继承页面字体，
   避免图表内出现与页面不一致的默认字体 */
.card svg text { font-family: inherit; }

/* ---------- 实时通知气泡（Toaster 组件） ----------
   右下角堆叠：容器不拦截鼠标，仅气泡本身可交互；
   z-index 高于 modal(1050)，重要提示浮在弹窗之上；颜色走 --wcs-* 主题变量（跟随个人主题） */
.toast-container-wcs {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(360px, calc(100vw - 2.5rem));
    pointer-events: none;
}

.toast-item-wcs {
    pointer-events: auto;
    background: var(--wcs-surface);
    border: 1px solid var(--wcs-border);
    border-left: 4px solid var(--wcs-primary);
    border-radius: var(--wcs-radius);
    box-shadow: var(--wcs-shadow-md);
    padding: .7rem .85rem;
    animation: toast-in-wcs .28s ease;
}

    .toast-item-wcs.level-warning {
        border-left-color: #ef4444;
    }

    .toast-item-wcs.removing {
        opacity: 0;
        transform: translateX(16px);
        transition: opacity .3s ease, transform .3s ease;
    }

@keyframes toast-in-wcs {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

.toast-title-wcs {
    font-weight: 600;
    font-size: .9rem;
    color: #1e293b;
}

    .level-warning .toast-title-wcs { color: #b91c1c; }

.toast-content-wcs {
    font-size: .85rem;
    color: var(--wcs-text-muted);
    word-break: break-all;
}

.toast-time-wcs {
    font-size: .72rem;
    color: var(--wcs-text-muted);
    opacity: .75;
    margin-top: .1rem;
}

.btn-close-wcs {
    border: none;
    background: none;
    color: var(--wcs-text-muted);
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 .2rem;
    cursor: pointer;
    flex: none;
}

    .btn-close-wcs:hover { color: #1e293b; }

/* ---------- 移动端表格转卡片 ----------
   用法：table 加 class="table-cards"，td 加 data-label="列名"
   <768px 时 thead 隐藏，tr 变卡片，td 变 label:value 行 */
@media (max-width: 767.98px) {
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody,
    .table-cards tr, .table-cards td {
        display: block;
        width: 100%;
    }
    .table-cards tr {
        border: 1px solid var(--bs-border-color);
        border-radius: var(--wcs-radius, 10px);
        margin-bottom: 0.75rem;
        background: var(--bs-body-bg, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        overflow: hidden;
    }
    .table-cards td {
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        border: none;
        border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.05));
        padding: 0.45rem 0.75rem;
        text-align: right;
        min-height: 1.8rem;
    }
    .table-cards td:last-child { border-bottom: none; }
    .table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--bs-secondary-color, #6c757d);
        margin-right: auto;
        padding-right: 0.75rem;
        text-align: left;
    }
    .table-cards td:empty, .table-cards td[data-label=""] { display: none; }
}

/* ---------- 移动端悬浮球导航 ---------- */
/* 悬浮球：仅 <768px 显示，右下角固定 */
.nav-fab {
    display: none;
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1050;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wcs-primary), var(--wcs-primary-hover));
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-fab:active { transform: scale(0.92); }
.nav-fab-icon { font-size: 1.5rem; line-height: 1; }

/* 遮罩 */
.nav-fab-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1051;
    backdrop-filter: blur(2px);
}

/* 菜单面板：底部滑入 */
.nav-fab-panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1052;
    background: var(--bs-body-bg, #fff);
    border-radius: 20px 20px 0 0;
    max-height: 65vh;
    overflow-y: auto;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
    animation: nav-fab-slide-up 0.25s ease;
}
@keyframes nav-fab-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.nav-fab-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.nav-fab-panel-title { font-weight: 600; font-size: 1rem; color: var(--wcs-primary); }

.nav-fab-panel-body { padding: 0.5rem 0 1rem; }

.nav-fab-section {
    padding: 0.6rem 1.25rem 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-fab-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1.25rem;
    min-height: 48px;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.nav-fab-item:active { background: var(--wcs-primary-soft); }
.nav-fab-item .bi { font-size: 1.15rem; color: var(--wcs-primary); width: 1.4rem; text-align: center; }

/* 移动端显示悬浮球组件 */
@media (max-width: 767.98px) {
    .nav-fab { display: flex; }
    .nav-fab-backdrop.nav-fab-backdrop { display: block; }
    .nav-fab-panel.nav-fab-panel { display: block; }
    /* 通知气泡避让悬浮球 */
    .toast-container-wcs { bottom: 5.5rem; }
}

/* <768px 隐藏侧栏汉堡按钮和菜单（由悬浮球 NavFab 接管） */
@media (max-width: 767.98px) {
    .navbar-toggler { display: none !important; }
    .nav-scrollable { display: none !important; }
}

/* ---------- 运营看板（投影大屏） ---------- */
.dashboard-wrap {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dashboard-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    z-index: 10;
    flex-shrink: 0;
}
.dashboard-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.02em;
}
.dashboard-title-accent {
    width: 4px;
    height: 2rem;
    border-radius: 2px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
}
.dashboard-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}
.dashboard-stat { color: #94a3b8; font-size: 0.9rem; }
.dashboard-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: #6366f1;
    margin-right: 0.3rem;
}
.dashboard-clock {
    font-size: 1rem;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
    margin-left: 1rem;
}
.dashboard-back {
    color: #64748b;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #334155;
    border-radius: 6px;
    transition: all 0.2s;
}
.dashboard-back:hover { color: #f1f5f9; border-color: #6366f1; }

.dashboard-map {
    flex: 1;
    min-height: 0;
    background: #1e293b;
}

/* 静态地图容器(注入服务端烘焙的 4096×4096 SVG,缩放平移走根组变换) */
.dashboard-map { position: relative; background: #1e293b; overflow: hidden; }
.dashboard-map svg.dash-static-svg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.dashboard-map svg.dash-static-svg:active { cursor: grabbing; }
.dashboard-map path.mk-country { cursor: pointer; }

/* 国家视图"返回世界"按钮 */
.dash-back-world {
    position: absolute;
    top: 12px;
    left: 58px;
    z-index: 420;
    display: none;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: rgba(30, 41, 59, 0.95);
    color: #cbd5e1;
    font-size: 13px;
    cursor: pointer;
}
.dash-back-world:hover { color: #f1f5f9; border-color: #6366f1; }

/* 世界地图未生成时的引导 */
.dash-empty-guide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    font-size: 14px;
    background: #1e293b;
}
.dash-empty-title { color: #94a3b8; font-size: 17px; font-weight: 600; }

/* 静态图烘焙标注(SVG text,paint-order 描边做深色光晕;颜色/字号生成时烘焙) */
.mk-label {
    font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: #0f172a;
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
}
.mk-label-country { font-weight: 600; letter-spacing: 0.08em; }
.mk-label-city { }
.mk-label-city.mk-label-city-lg { font-weight: 600; }
.mk-label-province { letter-spacing: 0.05em; }

/* ===== 地图制作页(/map-maker,浅色管理界面) ===== */
.mk-page { padding: 14px; }
.mk-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.mk-sub { color: #64748b; font-size: 12px; }
.mk-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.mk-form { width: 240px; flex-shrink: 0; }
.mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mk-card {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 10px;
    box-shadow: none;
}
.mk-label-txt { font-size: 13px; font-weight: 600; }
.mk-check-plain { font-size: 13px; color: #475569; }
.mk-check-plain .form-check-input { margin-top: 2px; }

/* 场地编辑弹窗:省份/州模糊查询下拉 */
.prov-autocomplete { position: relative; }
.prov-drop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #cdd5e0;
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.prov-item { padding: 6px 12px; font-size: 13px; color: #334155; cursor: pointer; }
.prov-item:hover { background: #eef2ff; }
.mk-hr { border-color: #e7ecf3; margin: 12px 0; }
.mk-pal-group { margin-bottom: 10px; }
.mk-pal-title { color: #64748b; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.mk-pal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
}
.mk-pal-row input[type=color] {
    width: 30px;
    height: 22px;
    padding: 0;
    border: 1px solid #cdd5e0;
    border-radius: 4px;
    background: none;
    cursor: pointer;
}
.mk-error { color: #dc2626; font-size: 12px; margin-top: 8px; }
.mk-preview-box svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.mk-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: middle;
}

/* 标注维护模态框 */
.mk-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mk-modal {
    display: flex;
    flex-direction: column;
    width: min(860px, 92vw);
    max-height: 86vh;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.mk-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.mk-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mk-tab {
    border: 1px solid #cdd5e0;
    background: #f4f6fa;
    color: #475569;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
}
.mk-tab.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.mk-tab-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
}
.mk-check { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #475569; }
.mk-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid #e7ecf3;
    border-radius: 8px;
}
.mk-untranslated td { background: #fffbeb; }
.mk-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

/* 左侧:场地设备折线图面板 */
.dashboard-chart-panel {
    position: absolute;
    left: 60px;
    bottom: 12px;
    z-index: 990;
    width: 360px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #334155;
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
}
.dashboard-chart-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.dashboard-chart-head strong { font-size: 15px; }
.dashboard-chart-meta { color: #64748b; font-size: 12px; margin-right: auto; }
.dashboard-chart-stats {
    display: flex;
    gap: 14px;
    color: #94a3b8;
    font-size: 12px;
    margin-bottom: 8px;
}
.dashboard-chart-stats b { color: #f1f5f9; margin-left: 2px; }
.dashboard-chart-canvas { height: 230px; }

/* 右侧:场地列表面板 */
.dashboard-site-list {
    position: absolute;
    right: 12px;
    top: 58px;
    bottom: 12px;
    z-index: 990;
    width: 240px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid #334155;
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.dashboard-site-search {
    margin: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #334155;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 12px;
}
.dashboard-site-search:focus { outline: none; border-color: #6366f1; }
.dashboard-site-list-body { flex: 1; overflow-y: auto; padding: 0 8px; }
.dashboard-site-item {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}
.dashboard-site-item:hover { background: #1e293b; }
.dashboard-site-item.active { background: #1e293b; border-color: #6366f1; }
.dashboard-site-item-name { color: #e2e8f0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-site-item-meta { color: #64748b; font-size: 11px; margin-top: 1px; }
.dashboard-site-empty { color: #64748b; font-size: 12px; text-align: center; padding: 18px 0; }
.dashboard-site-list-foot {
    padding: 6px 10px;
    border-top: 1px solid #1e293b;
    color: #64748b;
    font-size: 11px;
    text-align: right;
}

/* 场地钉定位脉冲 */
.dash-site-pulse { animation: dash-site-pulse 1.2s ease-out 2; }
@keyframes dash-site-pulse {
    0% { filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0.9)); }
    70% { filter: drop-shadow(0 0 14px rgba(250, 204, 21, 0.9)); transform: translateY(-4px); }
    100% { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); transform: translateY(0); }
}

/* 场地标注:经典红色水滴定位钉(倒水滴+中心白圆,SVG 节点反缩放保持屏幕尺寸) */
.dash-site-wrap { cursor: pointer; }
.dash-site-pin {
    display: block;
    cursor: pointer;
    /* 钉组经过的净缩放是 1(根组 ×k 被钉组 ×1/k 抵消),描边固定像素即可
       ——此前误乘 var(--k) 导致放大时描边成倍变粗、侵蚀红色钉身 */
    stroke-width: 1.2px;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
}
/* 场地钉 tooltip(HTML 层,JS 随缩放重新定位) */
.dash-site-tip {
    position: absolute;
    z-index: 1100;
    display: none;
    pointer-events: none;
    transform: translate(-50%, -100%);
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #475569;
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 8px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* 左下角控件列:+/− 缩放与🎨 */
.dash-zoom-ctl {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dash-zoom-ctl button {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #1e293b;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.dash-zoom-ctl button:hover {
    background: #334155;
    color: #f1f5f9;
    border-color: #6366f1;
}

/* 国家信息面板 */
.dashboard-country-panel {
    position: absolute;
    top: 70px;
    right: 12px;
    bottom: 12px;
    z-index: 1000;
    width: 260px;
    display: flex;
    flex-direction: column;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 12px 14px;
    max-width: 320px;
    min-width: 240px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.dashboard-country-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #f1f5f9;
    font-size: 15px;
}
.dashboard-country-count {
    margin-right: auto;
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
}
.dashboard-country-search {
    margin-bottom: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #334155;
    background: #0f172a;
    color: #f1f5f9;
    font-size: 12px;
}
.dashboard-country-search:focus { outline: none; border-color: #6366f1; }
.dashboard-country-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

/* 参数表格:组名分组行 */
.para-group-row td {
    background: #eef1f6;
    border-top: 2px solid #cdd5e0 !important;
    padding: 4px 10px !important;
    position: sticky;
    top: 0;
    z-index: 1;
}