/**
 * 史锦泽设计系统 · UI 组件层(xiliu-ui.css)
 * ------------------------------------------------------------------
 * 依赖 xiliu-tokens.css(变量)。包含 reset/body 底纹/滚动条/组件类。
 * ⚠ 引入本文件会接管 body 背景与基础排版 —— 高危页(ssh/video/uav)
 *   不要引入;常规页收编时需删除页内重复的组件样式。
 * 引入顺序:tokens → ui → 页面自身 <style>
 *
 * 签名元素(全站统一记忆点):
 *   .x-stream    流动渐变线(「史锦泽」具象化,顶栏底部/卡片顶部)
 *   .x-card--tick 十字定位角卡片
 *   .x-dot       呼吸状态灯
 *   body 细网格底纹(24px,~3%)
 */

/* ================= reset(轻量) ================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* 签名:图纸细网格(两方向 1px 线,随主题走 border 色) */
    background-image:
        linear-gradient(color-mix(in srgb, var(--border) 22%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--border) 22%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
}
a { color: var(--accent3); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ================= 滚动条 ================= */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text3); }

/* ================= 签名:流线 ================= */
.x-stream {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent3) 55%, var(--accent) 70%, transparent 100%);
    background-size: 200% 100%;
    animation: x-flow 7s linear infinite;
    opacity: .85;
}
@keyframes x-flow { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ================= 顶栏(XiliuShell 渲染) ================= */
.x-topbar {
    position: sticky; top: 0; z-index: 900; /* < back-btn 9998 < theme 9999 < chat 99999 */
    display: flex; align-items: center; gap: 16px;
    height: 52px; padding: 0 20px;
    background: color-mix(in srgb, var(--bg2) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.x-topbar .x-brand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.x-topbar .x-brand b { font-size: 16px; letter-spacing: .5px; color: var(--text); }
.x-topbar .x-brand .x-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.x-topbar .x-title { font-size: 14px; color: var(--text2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-topbar .x-actions { display: flex; align-items: center; gap: 10px; }
.x-topbar + .x-stream { position: sticky; top: 52px; z-index: 899; }

/* 顶栏导航下拉 */
.x-nav-menu {
    position: absolute; top: 50px; left: 12px; z-index: 950;
    min-width: 220px; max-height: 70vh; overflow: auto;
    background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 6px;
}
.x-nav-menu .x-nav-group { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); padding: 8px 10px 4px; }
.x-nav-menu a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--text); font-size: 13px; }
.x-nav-menu a:hover { background: var(--accent-glow); color: var(--accent); text-decoration: none; }

/* ================= 卡片 ================= */
.x-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.x-card > h3, .x-card > .x-card-title {
    margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text2);
    display: flex; align-items: center; gap: 8px;
}
.x-card-title .x-tag, .x-card > h3 .x-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); }

/* 签名:十字定位角(重要卡片用) */
.x-card--tick { position: relative; border-radius: 4px; }
.x-card--tick::before, .x-card--tick::after {
    content: ''; position: absolute; width: 7px; height: 7px; pointer-events: none;
}
.x-card--tick::before { top: -1px; left: -1px; border-top: 1px solid var(--accent-dim); border-left: 1px solid var(--accent-dim); }
.x-card--tick::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent-dim); border-right: 1px solid var(--accent-dim); }

/* ================= 指标卡 ================= */
.x-stat { display: flex; flex-direction: column; gap: 4px; }
.x-stat .x-stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text3); }
.x-stat .x-stat-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; line-height: 1.15; color: var(--text); }
.x-stat .x-stat-value small { font-size: 13px; color: var(--text3); font-weight: 400; }
.x-stat .x-stat-sub { font-size: 12px; color: var(--text2); }
.x-stat--accent .x-stat-value { color: var(--accent); }
.x-stat--danger .x-stat-value { color: var(--danger); }

/* ================= 状态灯(签名:呼吸) ================= */
.x-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; background: var(--text3); }
.x-dot--on  { background: var(--success); box-shadow: 0 0 0 0 rgba(67, 207, 140, .5); animation: x-breathe 3s ease-in-out infinite; }
.x-dot--off { background: var(--text3); }
.x-dot--warn { background: var(--warn); }
.x-dot--err { background: var(--danger); box-shadow: 0 0 6px var(--danger-dim); }
@keyframes x-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(67, 207, 140, .45); }
    50%      { box-shadow: 0 0 0 5px rgba(67, 207, 140, 0); }
}

/* ================= 徽标 ================= */
.x-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .5px;
    padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--border2); background: var(--surface2); color: var(--text2);
}
.x-badge--accent  { border-color: var(--accent-dim); color: var(--accent); background: var(--accent-glow); }
.x-badge--success { border-color: rgba(67,207,140,.4); color: var(--success); background: rgba(67,207,140,.1); }
.x-badge--warn    { border-color: rgba(232,180,90,.4); color: var(--warn); background: rgba(232,180,90,.1); }
.x-badge--danger  { border-color: var(--danger-dim); color: var(--danger); background: rgba(242,96,122,.1); }

/* ================= 按钮 ================= */
.x-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 16px; border-radius: 6px; font-size: 13px; font-family: var(--sans);
    border: 1px solid var(--border2); background: var(--surface2); color: var(--text);
    cursor: pointer; transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
.x-btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.x-btn:active { transform: translateY(1px); }
.x-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.x-btn--primary { background: var(--accent); border-color: var(--accent); color: #08110f; font-weight: 600; }
.x-btn--primary:hover { background: var(--accent2); border-color: var(--accent2); color: #08110f; }
.x-btn--ghost { background: transparent; }
.x-btn--danger { border-color: var(--danger-dim); color: var(--danger); background: transparent; }
.x-btn--danger:hover { background: rgba(242,96,122,.1); border-color: var(--danger); color: var(--danger); }
.x-btn--sm { padding: 4px 10px; font-size: 12px; }

/* ================= 表格 x-table ================= */
.x-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.x-table th {
    text-align: left; padding: 9px 12px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3);
    border-bottom: 1px solid var(--border2); white-space: nowrap;
}
.x-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.x-table tbody tr:last-child td { border-bottom: none; }
.x-table tbody tr { transition: background .12s; }
.x-table tbody tr:hover { background: var(--accent-glow); }
.x-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.x-table .muted { color: var(--text3); }

/* ================= 表单 ================= */
.x-form-item { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.x-form-item > label { font-size: 12px; color: var(--text2); }
.x-input, .x-select, .x-textarea {
    width: 100%; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-family: var(--sans);
    background: var(--bg2); border: 1px solid var(--border2); color: var(--text);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.x-input:focus, .x-select:focus, .x-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.x-input::placeholder { color: var(--text3); }
.x-textarea { font-family: var(--mono); resize: vertical; min-height: 80px; }

/* 开关 */
.x-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.x-switch input { opacity: 0; width: 0; height: 0; }
.x-switch .x-slider {
    position: absolute; inset: 0; border-radius: 999px; cursor: pointer;
    background: var(--surface3); border: 1px solid var(--border2); transition: background .2s, border-color .2s;
}
.x-switch .x-slider::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--text2); transition: transform .2s, background .2s;
}
.x-switch input:checked + .x-slider { background: var(--accent); border-color: var(--accent); }
.x-switch input:checked + .x-slider::before { transform: translateX(18px); background: #08110f; }

/* ================= 空态 ================= */
.x-empty { padding: 42px 16px; text-align: center; color: var(--text3); }
.x-empty .x-empty-icon { font-size: 26px; opacity: .6; margin-bottom: 8px; }
.x-empty .x-empty-hint { font-size: 12px; }

/* ================= 登录卡 ================= */
.x-login-mask { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(5, 9, 13, .7); backdrop-filter: blur(6px); }
.x-login-card { width: 340px; padding: 28px; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); box-shadow: var(--shadow); }
.x-login-card h2 { margin: 0 0 4px; font-size: 18px; }
.x-login-card .x-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }

/* ================= 图表容器 ================= */
.x-chart { width: 100%; height: 260px; }
.x-chart--tall { height: 340px; }

/* ================= 布局工具 ================= */
.x-page { max-width: none; margin: 0; padding: 20px; }
.x-row { display: flex; gap: 14px; align-items: center; }
.x-row--between { justify-content: space-between; }
.x-grid { display: grid; gap: 14px; }
.x-grid--2 { grid-template-columns: repeat(2, 1fr); }
.x-grid--3 { grid-template-columns: repeat(3, 1fr); }
.x-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .x-grid--4 { grid-template-columns: repeat(2, 1fr); } .x-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .x-grid--4, .x-grid--3, .x-grid--2 { grid-template-columns: 1fr; } }
.x-gap-lg { gap: 20px; }
.x-mt { margin-top: 14px; }
.x-muted { color: var(--text3); }
.x-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ================= 表格横滚包裹(移动端宽表不撑破页面) =================
 * 页面把 <table class="x-table"> 包一层 <div class="x-table-wrap"> 即可：
 * 桌面无变化，窄屏时表格在容器内横向滚动，页面不再整体横滑。 */
.x-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 媒体元素永不撑破视口（全断点） */
img, svg, video, canvas { max-width: 100%; }

/* ================= 移动端适配（≤640px 手机） ================= */
@media (max-width: 640px) {
    /* 防止任意宽内容把整页顶出横向滚动条（clip 不破坏 sticky 顶栏） */
    html, body { overflow-x: clip; }

    /* 顶栏：收紧间距、略降高度；标题仍省略号自适应 */
    .x-topbar { gap: 8px; padding: 0 12px; height: 48px; }
    .x-topbar .x-brand b { font-size: 15px; }
    .x-topbar + .x-stream { top: 48px; }
    .x-topbar .x-actions { gap: 6px; }
    .x-topbar .x-actions .x-muted { display: none; } /* 用户名占位在窄屏让位给按钮 */

    /* 顶栏下拉导航：限宽在屏内，不超出右边 */
    .x-nav-menu { left: 8px; right: 8px; min-width: 0; }

    /* 卡片内边距收窄 */
    .x-card { padding: 13px; }

    /* 表格：容器可横滚（.x-table-wrap 或直接放卡片里都能滚）；
       保底给表一个最小宽，列不至于挤成一坨，溢出即横滚 */
    .x-table-wrap > .x-table { min-width: 480px; }
    .x-table th, .x-table td { padding: 8px 10px; }

    /* 按钮：触控友好（≥40px 高，符合指尖热区） */
    .x-btn { padding: 9px 15px; min-height: 40px; }
    .x-btn--sm { padding: 7px 12px; min-height: 36px; }

    /* Element Plus 组件移动端兜底（固定 px 宽的 el-dialog 会横向溢出，此处强制收窄）
       —— 覆盖 admin/monitor/deploy/appUpdate 等所有引入本文件且用 el-* 的页 */
    .el-dialog { width: 94vw !important; max-width: none !important; margin: 5vh auto !important; }
    .el-dialog.is-fullscreen { width: 100vw !important; }
    .el-dialog__body { padding: 14px 16px; }
    .el-message-box { width: min(420px, calc(100vw - 28px)) !important; }
    /* :column 多列的描述列表在窄屏堆叠为单列，避免挤压/溢出 */
    .el-descriptions__body .el-descriptions__table { display: block; }
    .el-descriptions__body .el-descriptions__table tbody,
    .el-descriptions__body .el-descriptions__table tr { display: block; }
    .el-descriptions__body .el-descriptions__table .el-descriptions__cell { display: block; width: auto !important; }
    /* el-table 横向可滚（Element 自带 scroll 容器，这里兜底防内容撑破） */
    .el-table { max-width: 100%; }

    /* 行：窄屏换行不撑破 */
    .x-row { flex-wrap: wrap; }

    /* 输入：16px 字号，避免 iOS 聚焦时自动放大整页 */
    .x-input, .x-select, .x-textarea { font-size: 16px; }

    /* 登录卡：流式宽度，不超屏 */
    .x-login-card { width: min(340px, calc(100vw - 28px)); padding: 22px; }

    /* 页面容器内边距收窄 */
    .x-page { padding: 14px; }

    /* 指标数字略小，防溢出 */
    .x-stat .x-stat-value { font-size: 26px; }
    .x-chart { height: 220px; }
}

/* ================= 动效克制 ================= */
@media (prefers-reduced-motion: reduce) {
    .x-stream { animation: none; }
    .x-dot--on { animation: none; box-shadow: 0 0 4px rgba(67, 207, 140, .4); }
    * { transition-duration: .01ms !important; }
}