/* 矿用 AI 智能视频分析系统 —— 值班台样式
 *
 * 定位：调度室常开大屏 + 值班员桌面双场景。
 * - 深色底，长时间值守不刺眼；高对比徽标保证三米外能分辨告警级别
 * - 不引入任何 UI 框架：矿端内网无法访问 CDN，任何外链样式表都会变成白屏
 */

:root {
    --bg: #0a1017;
    --panel: #111a26;
    --panel-2: #16212f;
    --line: #223145;
    --text: #e6edf5;
    --text-dim: #8fa3ba;
    --accent: #22d3ee;
    --l1: #ef4444;
    --l2: #f59e0b;
    --l3: #38bdf8;
    --ok: #22c55e;
    --warn: #f59e0b;
    --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font: 13px/1.55 "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
    overflow: hidden;
}

.app {
    display: flex;
    height: 100vh;
}

/* ------------------------------------------------------------------ 侧栏 */

.sidebar {
    width: 208px;
    flex: 0 0 208px;
    background: var(--panel);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

.brand {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--line);
}

.brand h1 {
    margin: 0;
    font-size: 15px;
    letter-spacing: .5px;
}

.brand small {
    display: block;
    margin-top: 4px;
    color: var(--text-dim);
    font-size: 11px;
}

.nav {
    padding: 10px 8px;
    flex: 1;
    overflow-y: auto;
}

.nav button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    margin-bottom: 2px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.nav button:hover {
    background: var(--panel-2);
    color: var(--text);
}

.nav button.active {
    background: rgba(34, 211, 238, .12);
    color: var(--accent);
    box-shadow: inset 2px 0 0 var(--accent);
}

.nav .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}

.sidebar-foot {
    padding: 12px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--text-dim);
}

.sidebar-foot input {
    width: 100%;
    margin-top: 6px;
}

/* ------------------------------------------------------------------ 主区 */

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.topbar h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

/* 窄屏（预览面板/笔记本）下必须锁定单行，否则中文会被挤成竖排 */
.topbar {
    flex-wrap: nowrap;
    min-width: 0;
}

.topbar .sub {
    color: var(--text-dim);
    font-size: 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    font-size: 12px;
}

.view {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 28px;
}

/* ------------------------------------------------------------------ 组件 */

.btn {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
}

.btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn.primary {
    background: rgba(34, 211, 238, .14);
    border-color: rgba(34, 211, 238, .45);
    color: var(--accent);
}

.btn.danger:hover {
    border-color: var(--l1);
    color: var(--l1);
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

input, select, textarea {
    background: #0d1622;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 9px;
    font: inherit;
    outline: none;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
}

textarea {
    resize: vertical;
    min-height: 62px;
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.kpis {
    display: grid;
    /* 118px 下限：常见笔记本/预览面板宽度下 5 个指标能排成一行，不至于折成 2-2-1 */
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kpi .label {
    white-space: nowrap;
}

.kpi {
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
}

.kpi:hover {
    border-color: #2c405c;
}

.kpi .label {
    color: var(--text-dim);
    font-size: 12px;
}

.kpi .value {
    margin-top: 6px;
    font: 600 28px/1.1 var(--mono);
}

.kpi.hot .value {
    color: var(--l2);
}

.kpi.crit .value {
    color: var(--l1);
}

.kpi.done .value {
    color: var(--ok);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
}

/* 网格/弹性项的 min-width 默认是 auto：内部表格的 min-content 会把列撑破，
 * 于是横向溢出的不是表格而是整页。归零后由 .table-wrap 内部滚动接管。 */
.grid-2 > *,
.card {
    min-width: 0;
}

@media (max-width: 1100px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .sidebar {
        width: 168px;
        flex: 0 0 168px;
    }

    .brand h1 {
        font-size: 13.5px;
    }

    .view {
        padding: 12px 12px 22px;
    }
}

.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    font-size: 13px;
}

.card-head .spacer {
    margin-left: auto;
}

.card-body {
    padding: 12px 14px;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.filters .spacer {
    margin-left: auto;
}

/* 表格横向滚动限制在卡片内部：否则整页出现横向滚动条，
 * 侧栏和顶栏会被带着一起甩出去 */
.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

th, td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

th {
    color: var(--text-dim);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: .3px;
    position: sticky;
    top: 0;
    background: var(--panel);
    z-index: 1;
}

tbody tr {
    cursor: pointer;
}

tbody tr:hover {
    background: var(--panel-2);
}

td.mono, .mono {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-dim);
}

.muted {
    color: var(--text-dim);
}

.empty {
    padding: 28px;
    text-align: center;
    color: var(--text-dim);
}

.badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.7;
    border: 1px solid transparent;
}

.badge.L1 {
    color: #fecaca;
    background: rgba(239, 68, 68, .16);
    border-color: rgba(239, 68, 68, .4);
}

.badge.L2 {
    color: #fde68a;
    background: rgba(245, 158, 11, .16);
    border-color: rgba(245, 158, 11, .4);
}

.badge.L3 {
    color: #bae6fd;
    background: rgba(56, 189, 248, .16);
    border-color: rgba(56, 189, 248, .4);
}

.badge.PENDING {
    color: #fde68a;
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .38);
}

.badge.CONFIRMED, .badge.PROCESSING {
    color: #bae6fd;
    background: rgba(56, 189, 248, .14);
    border-color: rgba(56, 189, 248, .38);
}

.badge.RECTIFIED {
    color: #ddd6fe;
    background: rgba(139, 92, 246, .16);
    border-color: rgba(139, 92, 246, .4);
}

.badge.CLOSED, .badge.UPLOADED, .badge.ACTIVE, .badge.COMPLETED {
    color: #bbf7d0;
    background: rgba(34, 197, 94, .14);
    border-color: rgba(34, 197, 94, .38);
}

.badge.FALSE_POSITIVE, .badge.OFFLINE, .badge.FAILED {
    color: #cbd5e1;
    background: rgba(148, 163, 184, .14);
    border-color: rgba(148, 163, 184, .35);
}

.badge.MISSING, .badge.SHADOW {
    color: #e2e8f0;
    background: rgba(100, 116, 139, .2);
    border-color: rgba(100, 116, 139, .4);
}

.pager {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 12px;
}

.pager .spacer {
    margin-left: auto;
}

/* ------------------------------------------------------------------ 抽屉 */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 9, 15, .55);
    z-index: 20;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(680px, 92vw);
    background: var(--panel);
    border-left: 1px solid var(--line);
    z-index: 21;
    display: flex;
    flex-direction: column;
    animation: slide .16s ease-out;
}

@keyframes slide {
    from {
        transform: translateX(24px);
        opacity: .6;
    }
}

.drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.drawer-head h3 {
    margin: 0 0 4px;
    font-size: 14px;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
}

.drawer-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.close {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.close:hover {
    color: var(--text);
}

.kv {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 6px 10px;
    font-size: 12.5px;
}

.kv dt {
    color: var(--text-dim);
}

.kv dd {
    margin: 0;
    word-break: break-all;
}

.section-title {
    margin: 18px 0 8px;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: .4px;
}

.timeline {
    border-left: 2px solid var(--line);
    margin-left: 4px;
    padding-left: 12px;
}

.timeline .item {
    position: relative;
    padding-bottom: 12px;
    font-size: 12.5px;
}

.timeline .item::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.timeline .item .when {
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.evidence {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--panel-2);
}

.evidence img, .evidence video {
    display: block;
    width: 100%;
    height: 104px;
    object-fit: cover;
    background: #060b12;
}

.evidence .cap {
    padding: 6px 8px;
    font-size: 11.5px;
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.form-row {
    margin-bottom: 10px;
}

.form-row label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-dim);
    font-size: 12px;
}

.form-row input, .form-row textarea {
    width: 100%;
}

.hint {
    color: var(--text-dim);
    font-size: 11.5px;
}

/* ------------------------------------------------------------------ 其它 */

#toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
}

.toast {
    padding: 9px 13px;
    border-radius: 6px;
    background: #132033;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    font-size: 12.5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.toast.err {
    border-left-color: var(--l1);
}

.toast.ok {
    border-left-color: var(--ok);
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(3, 7, 12, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.modal img, .modal video {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 6px;
    background: #000;
}

.link {
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.tabs button {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12.5px;
}

.tabs button.active {
    color: var(--accent);
    border-color: rgba(34, 211, 238, .5);
    background: rgba(34, 211, 238, .1);
}

.stat-line {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 12.5px;
}

.stat-line:last-child {
    border-bottom: 0;
}

.tag-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    font-size: 12px;
}
/* 配置历史在抽屉中保持可读，长 JSON 和设备编码不撑破布局。 */
.config-history { padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.config-history .btn { margin: 6px 0 0 8px; }
.form-row textarea.mono { width: 100%; box-sizing: border-box; resize: vertical; }