/* ============================================================
   超速预警系统 · 全局样式
   界面风格参照 ArmyExamAdmin（军威庄重 · 军队主题）：
   深军绿主体 + 金色点缀 + 迷彩背景，卡片化内容、吸顶表头、徽标状态。
   ============================================================ */

:root {
    /* 军绿阶 */
    --ows-green-900: #1b2915;
    --ows-green-800: #24361c;
    --ows-green-700: #2F4524;
    --ows-green-600: #3A5030;
    --ows-green-500: #4E6A3C;
    --ows-green-400: #5B7A3E;
    --ows-green-300: #7A9B4E;
    /* 金色点缀 */
    --ows-gold: #D4AF37;
    --ows-gold-dark: #B8860B;
    --ows-gold-light: #F4C84D;
    /* 页面底色 */
    --ows-page-bg: #eef1e8;
    --ows-border: #e2e7da;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
}

h1:focus {
    outline: none;
}

body {
    background-color: var(--ows-page-bg);
}

a, .btn-link {
    color: var(--ows-green-600);
}

/* ---------- 按钮：统一军绿主色 + 金色聚焦 ---------- */
.btn-primary {
    color: #fff;
    background-color: var(--ows-green-500);
    border-color: var(--ows-green-600);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--ows-green-600) !important;
        border-color: var(--ows-green-700) !important;
    }

.btn-success {
    background-color: var(--ows-green-400);
    border-color: var(--ows-green-500);
}

    .btn-success:hover, .btn-success:focus, .btn-success:active {
        background-color: var(--ows-green-500) !important;
        border-color: var(--ows-green-600) !important;
    }

.btn-outline-primary {
    color: var(--ows-green-600);
    border-color: var(--ows-green-500);
}

    .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
        background-color: var(--ows-green-500) !important;
        border-color: var(--ows-green-500) !important;
        color: #fff;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(212, 175, 55, 0.55);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* ---------- 错误提示条 / 加载动画（框架默认，保留） ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================================
   军徽（速度表 + 警示三角）：侧边栏 Banner 与登录页通用
   ============================================================ */
.military-emblem {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7A9B4E, #4E6A3C 65%, #2F4524);
    box-shadow: inset 0 0 0 2px #DCE6D4, inset 0 0 0 4px #4E6A3C, 0 2px 6px rgba(0, 0, 0, .35);
    color: #F4E8C1;
    font-size: 30px;
    flex-shrink: 0;
}

.military-emblem .military-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
    color: #F4C84D;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* ============================================================
   登录页：迷彩实照 + 军绿渐变遮罩，军绿金边毛玻璃卡片
   ============================================================ */
.empty-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem clamp(1rem, 10vw, 9rem) 1rem 1rem;
    position: relative;
    background:
        linear-gradient(160deg, rgba(46, 84, 40, .82) 0%, rgba(36, 65, 31, .86) 50%, rgba(24, 46, 22, .9) 100%),
        url('../images/ui-materials/camouflage-2-jungle.jpg') center/cover no-repeat;
}

/* 小分辨率：登录卡片回归居中，避免贴边 */
@media (max-width: 767.98px) {
    .empty-layout {
        justify-content: center;
        padding: 1rem;
    }
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: rgba(16, 42, 20, .78) !important;
    border: 1px solid rgba(212, 175, 55, .45) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
}

.login-card .login-emblem {
    width: 64px;
    height: 64px;
    font-size: 34px;
}

.login-card h3 {
    color: #FDFDF7;
    letter-spacing: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.login-card label.form-label {
    color: #EDF2E3;
}

.login-card .text-muted {
    color: rgba(240, 245, 230, .75) !important;
}

/* 登录卡片内的输入框：浅底深字，聚焦金色 */
.login-card .input-group-text {
    background: rgba(40, 70, 40, .45) !important;
    border-color: rgba(180, 200, 160, .5) !important;
    color: #D9E5C3 !important;
}

.login-card .form-control {
    background: rgba(240, 248, 228, .92) !important;
    border-color: rgba(180, 200, 160, .5) !important;
    border-width: 1.5px !important;
    color: #16200f !important;
    caret-color: #16200f !important;
}

    .login-card .form-control:focus {
        background: #fff !important;
        border-color: var(--ows-gold-dark) !important;
        box-shadow: 0 0 0 .22rem rgba(212, 175, 55, .28) !important;
    }

/* 登录按钮强化军威：暗金底 + 宽字距 */
.login-card .btn-primary {
    background: var(--ows-gold-dark);
    border: 1px solid var(--ows-gold);
    letter-spacing: 6px;
    font-weight: 600;
}

    .login-card .btn-primary:hover, .login-card .btn-primary:focus {
        background: var(--ows-gold) !important;
        color: #1E2B15 !important;
    }

/* 验证码图片：与输入框等高，点击可刷新 */
.login-card .captcha-image {
    width: 120px;
    height: 38px;
    flex: 0 0 auto;
    border: 1.5px solid rgba(180, 200, 160, .5);
    border-radius: .375rem;
    background: #f2f4ef;
    cursor: pointer;
}

/* 密码框与登录按钮之间留出更大间距；按钮下方留白增加到约一个输入框的高度 */
.login-submit {
    margin-top: 1.75rem;
    margin-bottom: 1rem;
}

/* 系统激活页：卡片略宽，机器码/授权码使用等宽字体便于逐位核对 */
.activate-card {
    max-width: 520px;
}

.machine-code-text {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    letter-spacing: .5px;
}

/* 授权信息 / 关于系统：信息定义列表与授权状态横幅 */
.info-list {
    margin: 0;
}

    .info-list dt {
        margin-top: 1rem;
        font-size: .875rem;
        font-weight: 600;
        color: var(--ows-green-700);
    }

        .info-list dt:first-child {
            margin-top: 0;
        }

    .info-list dd {
        margin: .25rem 0 0;
        color: #333;
        word-break: break-word;
    }

        .info-list dd.fingerprint {
            font-family: Consolas, Monaco, 'Courier New', monospace;
            font-size: .85rem;
            letter-spacing: .5px;
            color: #555;
            word-break: break-all;
        }

.license-status-banner {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    padding: .6rem .9rem;
    border-radius: .5rem;
    font-weight: 600;
}

    .license-status-banner.is-active {
        color: var(--ows-green-700);
        background: rgba(78, 106, 60, .12);
        border: 1px solid rgba(78, 106, 60, .28);
    }

    .license-status-banner.is-inactive {
        color: #a35b00;
        background: rgba(212, 175, 55, .15);
        border: 1px solid rgba(212, 175, 55, .45);
    }

/* ============================================================
   通用卡片：白底无边框 + 柔和阴影 + 军绿标题栏（参照参考项目）
   ============================================================ */
.ows-card {
    background: #fff;
    border: 1px solid var(--ows-border);
    border-radius: .6rem;
    box-shadow: 0 .125rem .6rem rgba(47, 69, 36, .07);
    overflow: hidden;
    margin-bottom: 1rem;
}

.ows-card > .ows-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem;
    background: linear-gradient(90deg, var(--ows-green-600), var(--ows-green-500));
    border-bottom: 1px solid var(--ows-green-700);
    color: #fff;
    font-weight: 600;
}

    .ows-card > .ows-card-header i {
        color: var(--ows-gold-light);
    }

    .ows-card > .ows-card-header .badge {
        margin-left: auto;
    }

.ows-card > .ows-card-body {
    padding: 1rem;
}

/* 页面标题：军绿竖条 */
.page-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ows-green-700);
    margin-bottom: 1rem;
}

    .page-title::before {
        content: '';
        width: 5px;
        height: 1.25rem;
        border-radius: 3px;
        background: linear-gradient(180deg, var(--ows-gold), var(--ows-green-500));
    }

/* 查询条件区 */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    background: #fff;
    border: 1px solid var(--ows-border);
    border-radius: .6rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 .125rem .5rem rgba(47, 69, 36, .06);
}

/* ============================================================
   列表页（车辆管理、用户管理等）：列表卡片撑满内容区剩余高度，
   表体内部滚动、分页条固定于卡片底部，避免数据较多时分页被推到
   页面底端之下。
   ============================================================ */
.list-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* 高度 = 视口 - 顶栏 - 内容区上/下留白，使卡片底部贴近视口底部 */
    height: calc(100vh - var(--ows-topbar-h) - 2rem);
}

    /* 卡片在剩余空间内撑满，纵向切分为：表头 / 可滚动表体 / 分页条 */
    .list-page > .ows-card {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }

        .list-page > .ows-card > .ows-card-header {
            flex: 0 0 auto;
        }

        .list-page > .ows-card > .table-responsive {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
        }

        .list-page > .ows-card > .ows-card-body {
            flex: 0 0 auto;
            border-top: 1px solid var(--ows-border);
        }

/* 手机：放弃固定视口高度，改为流式布局，避免筛选栏堆叠后挤压表体；
   仅对表体限高，数据较多时仍出现滚动条。 */
@media (max-width: 640.98px) {
    .list-page {
        height: auto;
    }

        .list-page > .ows-card > .table-responsive {
            max-height: 60vh;
        }
}

/* ============================================================
   统计卡片：白底 + 左侧色条 + 彩色图标
   ============================================================ */
.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border: 1px solid var(--ows-border);
    border-radius: .6rem;
    padding: 1rem 1.25rem 1rem 1.5rem;
    height: 100%;
    box-shadow: 0 .125rem .6rem rgba(47, 69, 36, .07);
    overflow: hidden;
}

    .stat-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: var(--ows-green-500);
    }

.stat-card .stat-icon {
    font-size: 1.9rem;
    color: var(--ows-green-500);
    flex: none;
}

.stat-card .stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ows-green-700);
    font-variant-numeric: tabular-nums;
}

.stat-card .stat-label {
    color: #6b7280;
    font-size: .9rem;
}

.stat-card-primary::before { background: var(--ows-green-500); }
.stat-card-primary .stat-icon { color: var(--ows-green-500); }

.stat-card-success::before { background: #2e8b57; }
.stat-card-success .stat-icon { color: #2e8b57; }

.stat-card-danger::before { background: #c0392b; }
.stat-card-danger .stat-icon { color: #c0392b; }
.stat-card-danger .stat-value { color: #a93226; }

.stat-card-warning::before { background: var(--ows-gold-dark); }
.stat-card-warning .stat-icon { color: var(--ows-gold-dark); }

/* ============================================================
   表格：吸顶表头 + 悬停高亮 + 徽标状态 + 操作列
   ============================================================ */
.table-responsive .table {
    margin-bottom: 0;
}

    .table-responsive .table thead th {
        background: #f3f6ee;
        color: var(--ows-green-700);
        border-bottom: 2px solid var(--ows-green-400);
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
    }

    .table-responsive .table tbody td {
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

.table-hover > tbody > tr:hover > * {
    background-color: rgba(122, 155, 78, .10);
}

.table .badge {
    font-size: .85rem;
    padding: .35em .6em;
    font-weight: 500;
}

.table .text-muted {
    color: #4a4a4a !important;
}

/* ============================================================
   首页横幅（军旅底图）
   ============================================================ */
.index-hero {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: url('../images/ui-materials/weapons/liaoning-carrier.jpg') center/cover no-repeat;
    border: 1px solid #5B7A3E;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    margin-bottom: 1rem;
}

.index-hero-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 25, 9, .82) 0%, rgba(30, 45, 18, .55) 55%, rgba(15, 25, 9, .2) 100%);
}

.index-hero-body {
    position: relative;
    z-index: 1;
    padding: 26px 28px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.military-emblem-sm {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #F4E8C1;
    background: radial-gradient(circle at 35% 30%, #7A9B4E, #3A5030 70%);
    box-shadow: inset 0 0 0 2px #DCE6D4, inset 0 0 0 4px #4E6A3C;
    flex-shrink: 0;
}

.index-hero-title {
    color: #FFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    letter-spacing: 2px;
    font-size: 2.08rem;
    font-weight: 700;
}

.index-hero-sub {
    color: #DCE6D4;
    font-size: .875rem;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    margin-top: .25rem;
}

/* ============================================================
   地图容器
   ============================================================ */
#ows-map {
    height: 560px;
    width: 100%;
    border: 1px solid var(--ows-border);
    border-radius: .5rem;
}

/* ============================================================
   图表：纯 SVG 折线趋势图 / 环形分布图（无外部依赖）
   ============================================================ */
.ows-chart {
    width: 100%;
}

.ows-chart-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.ows-chart-grid {
    stroke: #dfe5d6;
    stroke-width: 1;
    stroke-dasharray: 4 5;
}

.ows-chart-ytick,
.ows-chart-xtick {
    fill: #8a9481;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ows-chart-line {
    fill: none;
    stroke: var(--ows-green-500);
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.ows-chart-dot {
    fill: #fff;
    stroke: var(--ows-green-500);
    stroke-width: 2;
}

    .ows-chart-dot:hover {
        fill: var(--ows-gold);
        stroke: var(--ows-gold-dark);
    }

/* 环形图：SVG 与图例并排，窄屏自动堆叠 */
.ows-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.ows-donut-figure {
    position: relative;
    width: 190px;
    height: 190px;
    flex: 0 0 auto;
    margin: 0 auto;
}

.ows-donut-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ows-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.ows-donut-track {
    fill: none;
    stroke: #eef1e8;
    stroke-width: 26;
}

.ows-donut-arc {
    fill: none;
    stroke-width: 26;
    transition: opacity .12s ease-out;
}

    .ows-donut-arc:hover {
        opacity: .82;
    }

.ows-donut-center-value {
    color: var(--ows-green-700);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ows-donut-center-label {
    color: #8a9481;
    font-size: .78rem;
}

.ows-donut-legend {
    flex: 1 1 160px;
    min-width: 150px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .ows-donut-legend li {
        display: flex;
        align-items: center;
        gap: .45rem;
        padding: .22rem 0;
        font-size: .85rem;
        color: #495057;
    }

.ows-donut-swatch {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.ows-donut-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ows-donut-value {
    font-variant-numeric: tabular-nums;
    color: var(--ows-green-700);
    font-weight: 600;
}

.ows-donut-pct {
    width: 3.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #8a9481;
}

/* ============================================================
   简易弹窗
   ============================================================ */
.ows-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.ows-modal {
    background-color: #fff;
    border-radius: .5rem;
    max-width: 520px;
    width: 100%;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    border-top: 4px solid var(--ows-green-500);
}

/* 表单弹窗（新增 / 编辑）：更宽并支持超高时内部滚动 */
.ows-modal-lg {
    max-width: 780px;
    max-height: 90vh;
    overflow-y: auto;
}

    .ows-modal-lg > h5 {
        color: var(--ows-green-700);
        font-weight: 700;
    }

        .ows-modal-lg > h5 i {
            color: var(--ows-gold-dark);
        }

.secret-value {
    font-family: Consolas, Monaco, monospace;
    background-color: #f1f3e9;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    word-break: break-all;
}

/* 批量导入弹层中的错误明细：限定高度内部滚动 */
.import-error-box {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

    .import-error-box table {
        font-size: .875rem;
    }

/* 车辆绑定司机：远程查找选择框结果面板（随表单展开，限定高度内部滚动） */
.driver-picker-panel {
    margin-top: 4px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.12);
}

.driver-picker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.65rem;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
    font-size: .9rem;
}

    .driver-picker-item:last-child {
        border-bottom: 0;
    }

    .driver-picker-item:hover {
        background-color: #f1f3e9;
    }

    .driver-picker-item.active {
        background-color: #e4ead6;
        font-weight: 600;
    }

.driver-picker-name {
    white-space: nowrap;
}

.driver-picker-meta {
    color: #6c757d;
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.driver-picker-tip {
    padding: 0.5rem 0.65rem;
    color: #6c757d;
    font-size: .85rem;
}

/* ============================================================
   地图超速点位图标：水滴形警告标记（随缩放级别变化尺寸）
   ============================================================ */
/* 外层包装：Leaflet 定位容器，保持透明无边框。 */
.ows-pin-wrap {
    background: transparent;
    border: none;
}

/* 缩放单元：以底边中点为原点缩放，保证针尖始终压在地理坐标上。
   缩放比例由 JS 写入的 --ows-pin-scale 统一控制（比例尺越大点越大）。 */
.ows-pin {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
    transform: scale(var(--ows-pin-scale, 1));
    transition: filter .12s ease-out;
}

    /* 水滴形钉体：纯 CSS 绘制，不使用图标字体（避免海量字形渲染开销）。 */
    .ows-pin::before {
        content: '';
        position: absolute;
        inset: 6%;
        background: linear-gradient(135deg, #e74c3c 0%, #a93226 100%);
        border: 2px solid #fff;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    }

    /* 内部白色警告三角（同样为纯 CSS 绘制）。 */
    .ows-pin::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 42%;
        width: 40%;
        height: 34%;
        transform: translate(-50%, -50%);
        background: #fff;
        clip-path: polygon(50% 0, 100% 96%, 0 96%);
    }

    .ows-pin:hover {
        filter: brightness(1.15) drop-shadow(0 0 3px rgba(0, 0, 0, .35));
    }

/* 聚合点：按数量分级着色（小=军绿、中=金、大=红），随比例尺同步缩放。 */
.ows-cluster-wrap {
    background: transparent;
    border: none;
}

.ows-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--ows-gold-light);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    background: radial-gradient(circle at 35% 30%, var(--ows-green-400), var(--ows-green-600) 72%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    transform: scale(var(--ows-pin-scale, 1));
    transition: filter .12s ease-out;
}

    .ows-cluster-m {
        background: radial-gradient(circle at 35% 30%, #e0b24a, var(--ows-gold-dark) 72%);
    }

    .ows-cluster-l {
        background: radial-gradient(circle at 35% 30%, #e05555, #a93226 72%);
    }

    .ows-cluster:hover {
        filter: brightness(1.12);
    }

/* ============================================================
   参数编码标签 / 提示条
   ============================================================ */
.param-code {
    display: inline-block;
    font-family: Consolas, Monaco, monospace;
    font-size: .85rem;
    background: #f1f3e9;
    color: var(--ows-green-700);
    border: 1px solid var(--ows-border);
    border-radius: .25rem;
    padding: .1rem .45rem;
}

.ows-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    background: #fbf8ec;
    border: 1px solid #efe3bf;
    border-left: 4px solid var(--ows-gold-dark);
    border-radius: .5rem;
    padding: .7rem 1rem;
    color: #6b5a1e;
    font-size: .9rem;
}

/* ============================================================
   细节打磨：卡片悬停、表格、徽标、空状态
   ============================================================ */
.ows-card {
    transition: box-shadow .15s ease-out;
}

    .ows-card:hover {
        box-shadow: 0 .25rem .9rem rgba(47, 69, 36, .12);
    }

.ows-card > .ows-card-header .badge {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .35);
}

.table thead th:first-child,
.table tbody td:first-child {
    text-align: left;
    padding-left: 1rem;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.badge {
    font-weight: 500;
    letter-spacing: .5px;
}

.form-label {
    font-size: .875rem;
    color: #4a5a3c;
    font-weight: 500;
}

.alert-danger {
    border-left: 4px solid #c0392b;
}

.ows-modal h5 i {
    color: var(--ows-gold-dark);
}

/* 顶部栏：加重底部金线，增强层次 */
.top-row {
    border-bottom: 1px solid var(--ows-border);
    box-shadow: 0 .125rem .5rem rgba(47, 69, 36, .06);
}

/* ============================================================
   科技感强化（保留军绿金主体，叠加 HUD 细节）
   设计原则：低饱和网格底纹 + 青绿光效点缀 + HUD 边角 + 扫描线，
   在既有军事风基础上增加"数据大屏"质感，不改变主色与可读性。
   ============================================================ */
:root {
    --ows-tech-cyan: #4fd1b5;
    --ows-tech-cyan-dim: rgba(79, 209, 181, .30);
    --ows-tech-grid: rgba(78, 106, 60, .10);
    --ows-tech-glow: 0 0 12px rgba(79, 209, 181, .38);
}

/* 内容区：淡网格 + 顶部径向辉光，形成 HUD 底纹 */
.content {
    background-image:
        linear-gradient(var(--ows-tech-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ows-tech-grid) 1px, transparent 1px),
        radial-gradient(circle at 12% -5%, rgba(79, 209, 181, .07), transparent 42%);
    background-size: 28px 28px, 28px 28px, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0;
}

/* 页面标题：底部流光下划线 + 等宽科技小节标记 */
.page-title {
    position: relative;
}

    .page-title::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -.45rem;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, var(--ows-tech-cyan), rgba(79, 209, 181, 0) 55%);
        opacity: .75;
    }

/* 卡片：青绿 HUD 四角 + 标题栏扫描线 + 悬停辉光 */
.ows-card {
    position: relative;
}

    .ows-card::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) left top / 16px 2px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) left top / 2px 16px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) right top / 16px 2px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) right top / 2px 16px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) left bottom / 16px 2px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) left bottom / 2px 16px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) right bottom / 16px 2px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) right bottom / 2px 16px no-repeat;
    }

    .ows-card:hover {
        box-shadow: 0 .25rem .9rem rgba(47, 69, 36, .12), 0 0 0 1px var(--ows-tech-cyan-dim);
    }

    .ows-card > .ows-card-header {
        position: relative;
        overflow: hidden;
    }

        .ows-card > .ows-card-header::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 38%;
            background: linear-gradient(90deg, transparent, rgba(79, 209, 181, .38), transparent);
            animation: ows-scan 7s linear infinite;
            pointer-events: none;
        }

@keyframes ows-scan {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(320%);
    }
}

/* 统计卡：右上角标 + 图标辉光 + 数值等宽 */
.stat-card::after {
    content: '';
    position: absolute;
    right: 7px;
    top: 7px;
    width: 11px;
    height: 11px;
    border-top: 2px solid var(--ows-tech-cyan-dim);
    border-right: 2px solid var(--ows-tech-cyan-dim);
}

.stat-card .stat-icon {
    filter: drop-shadow(0 0 6px rgba(79, 209, 181, .35));
}

.stat-card .stat-value {
    font-family: 'Consolas', 'Monaco', 'Microsoft YaHei', monospace;
    letter-spacing: .5px;
}

.stat-card-danger .stat-icon {
    filter: drop-shadow(0 0 6px rgba(192, 57, 43, .45));
}

/* 表格：表头科技细线 + 行悬停青绿内辉光 */
.table-responsive .table thead th {
    border-top: 2px solid var(--ows-tech-cyan-dim);
}

.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 14px rgba(79, 209, 181, .10);
}

/* 按钮 / 输入框：保留金色聚焦环，叠加青绿外辉光 */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem rgba(212, 175, 55, .50), var(--ows-tech-glow);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .30), var(--ows-tech-glow);
}

/* 登录页：网格叠加 + 卡片 HUD 边角 */
.empty-layout::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(79, 209, 181, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 209, 181, .05) 1px, transparent 1px);
    background-size: 32px 32px;
}

.login-card {
    position: relative;
    z-index: 1;
}

    .login-card::after {
        content: '';
        position: absolute;
        inset: 8px;
        pointer-events: none;
        background:
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) left top / 18px 2px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) left top / 2px 18px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) right top / 18px 2px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) right top / 2px 18px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) left bottom / 18px 2px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) left bottom / 2px 18px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) right bottom / 18px 2px no-repeat,
            linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) right bottom / 2px 18px no-repeat;
    }

/* 顶栏「系统在线」状态胶囊 */
.sys-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-right: auto;
    font-size: .82rem;
    letter-spacing: 2px;
    color: #DCE6D4;
    white-space: nowrap;
}

    .sys-status .sys-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ows-tech-cyan);
        box-shadow: 0 0 8px var(--ows-tech-cyan);
        animation: ows-pulse 1.8s ease-in-out infinite;
    }

/* 顶栏：无操作超时剩余时间倒计时 */
.idle-countdown {
    display: inline-flex;
    align-items: center;
    margin-right: .75rem;
    font-size: .82rem;
    color: #DCE6D4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

    .idle-countdown i {
        color: var(--ows-gold-light);
    }

/* 顶栏：报警提示铃（存在未处理报警时高亮脉冲，点击进入报警处置） */
.alarm-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: .75rem;
    color: #DCE6D4;
    text-decoration: none;
    font-size: 1.05rem;
    line-height: 1;
}

    .alarm-bell:hover {
        color: #fff;
    }

    .alarm-bell.active {
        color: var(--ows-gold-light);
        animation: ows-pulse 1.6s ease-in-out infinite;
    }

    .alarm-bell-count {
        position: absolute;
        top: -.45rem;
        right: -.6rem;
        min-width: 1.05rem;
        height: 1.05rem;
        padding: 0 .25rem;
        border-radius: 999px;
        background: #d9534f;
        color: #fff;
        font-size: .68rem;
        font-weight: 700;
        line-height: 1.05rem;
        text-align: center;
    }

@keyframes ows-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.82);
    }
}

/* 首页横幅：HUD 角标 */
.index-hero::after {
    content: '';
    position: absolute;
    inset: 8px;
    pointer-events: none;
    background:
        linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) left top / 22px 2px no-repeat,
        linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) left top / 2px 22px no-repeat,
        linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) right bottom / 22px 2px no-repeat,
        linear-gradient(var(--ows-tech-cyan-dim), var(--ows-tech-cyan-dim)) right bottom / 2px 22px no-repeat;
}

/* ============================================================
   内容区小分辨率适配
   断点与导航栏保持一致：991.98 / 767.98 / 575.98
   目标：缩窄内边距、压缩固定尺寸、表格可换行、控件可换行，
   在保持军绿科技感的前提下避免横向溢出与内容挤压。
   ============================================================ */

/* ---------- ≤991.98px：平板 ---------- */
@media (max-width: 991.98px) {
    .content {
        padding-top: .9rem;
    }

    .page-title {
        font-size: 1.2rem;
        margin-bottom: .85rem;
    }

    /* 首页横幅：压缩内边距与标题字号 */
    .index-hero-body {
        padding: 18px 20px;
    }

    .index-hero-title {
        font-size: 1.75rem;
        letter-spacing: 1px;
    }

    .index-hero-sub {
        font-size: .8rem;
    }

    /* 统计卡：收窄内边距、图标与数值字号 */
    .stat-card {
        gap: .7rem;
        padding: .85rem 1rem .85rem 1.15rem;
    }

    .stat-card .stat-icon {
        font-size: 1.6rem;
    }

    .stat-card .stat-value {
        font-size: 1.45rem;
    }

    .ows-card > .ows-card-body {
        padding: .85rem;
    }

    /* 地图：随屏宽降高 */
    #ows-map {
        height: 460px;
    }
}

/* ---------- ≤767.98px：窄屏 ---------- */
@media (max-width: 767.98px) {
    /* 筛选栏：控件可自适应铺开，避免相互挤压 */
    .filter-bar {
        gap: .5rem;
        padding: .7rem .8rem;
    }

        .filter-bar > div {
            flex: 1 1 11rem;
            min-width: 0;
        }

    /* 分页条：允许换行，避免按钮与说明文字溢出 */
    .ows-card .ows-card-body.d-flex {
        flex-wrap: wrap;
    }

    /* 表格：允许换行、减小内边距与字号（.table-responsive 仍保留横向滚动兜底） */
    .table-responsive .table thead th,
    .table-responsive .table tbody td {
        white-space: normal;
        padding: .5rem .55rem;
        font-size: .875rem;
    }

    .table thead th:first-child,
    .table tbody td:first-child {
        padding-left: .55rem;
    }

    /* 地图与首页横幅进一步压缩 */
    #ows-map {
        height: 360px;
    }

    .index-hero-body {
        padding: 14px 16px;
        gap: .7rem;
    }

    .military-emblem-sm {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .index-hero-title {
        font-size: 1.5rem;
    }

    .ows-modal {
        padding: 1rem 1.15rem;
    }
}

/* ---------- ≤575.98px：手机 ---------- */
@media (max-width: 575.98px) {
    /* 内容区左右内边距收窄，为内容争取宽度 */
    article.content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .content {
        padding-top: .75rem;
    }

    /* 筛选栏：控件整行铺满 */
    .filter-bar > div {
        flex: 1 1 100%;
    }

    /* 统计卡：图标与数值再缩小 */
    .stat-card .stat-icon {
        font-size: 1.4rem;
    }

    .stat-card .stat-value {
        font-size: 1.3rem;
    }

    .stat-card .stat-label {
        font-size: .82rem;
    }

    /* 地图：手机高度 */
    #ows-map {
        height: 300px;
    }

    /* 登录卡片：压缩内边距与验证码图片宽度 */
    .login-card .card-body {
        padding: 1.25rem !important;
    }

    .login-card .captcha-image {
        width: 96px;
    }
}

/* ============================================================
   打印样式：仅保留内容与表格，隐藏导航 / 工具栏 / 分页 / 按钮，
   并覆盖网格底纹、扫描线、HUD 边角等纯 CSS 装饰，保证黑白打印清晰。
   ============================================================ */
@media print {
    /* 隐藏侧边栏、顶部标题栏、筛选栏、页签、分页条、按钮及显式标记 no-print 的元素 */
    .sidebar,
    .top-row,
    .nav-hamburger,
    .filter-bar,
    .nav-tabs,
    .no-print,
    .ows-modal-backdrop,
    .alarm-bell,
    .idle-countdown,
    .sys-status,
    .btn,
    .ows-card-body.d-flex {
        display: none !important;
    }

    /* 页面与内容区占满打印宽度，去除内边距与背景色 */
    html,
    body {
        background: #fff !important;
    }

    .page,
    .page-body,
    main,
    article,
    .content.content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    /* 列表页固定视口高度在打印时改为流式，避免内容被裁切 */
    .list-page {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .list-page > .ows-card {
        display: block !important;
    }

    /* 去掉表体内部滚动，完整打印所有数据行 */
    .table-responsive,
    .list-page > .ows-card > .table-responsive {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* 卡片：去阴影与渐变，仅保留细边框 */
    .ows-card,
    .stat-card {
        border: 1px solid #999 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    .ows-card > .ows-card-header {
        background: #eee !important;
        color: #000 !important;
        border-bottom: 1px solid #999 !important;
    }

    .ows-card > .ows-card-header i {
        color: #000 !important;
    }

    /* 覆盖科技感装饰：网格底纹、扫描线、HUD 边角 */
    .content {
        background-image: none !important;
    }

    .page-title::after,
    .page-title::before,
    .ows-card::after,
    .ows-card > .ows-card-header::after,
    .stat-card::after,
    .stat-card::before {
        display: none !important;
    }

    /* 表格：加边框、表头重复、黑白清晰 */
    table {
        border-collapse: collapse !important;
        width: 100% !important;
    }

    thead {
        display: table-header-group;
    }

    tr {
        page-break-inside: avoid;
    }

    .table-responsive .table thead th,
    .table-responsive .table tbody td {
        border: 1px solid #666 !important;
        color: #000 !important;
        background: #fff !important;
        white-space: normal !important;
    }

    .table-responsive .table thead th {
        background: #eaeaea !important;
        font-weight: 700 !important;
    }
}