/* =========================================================
   共享仪表盘设计系统 (ui.css)
   建在 shared.css 的 tokens 之上, 三端 (sys1/sys3/sys4) 同源复用。
   语义色只用于状态: 绿=成功/健康, 橙=预警, 红=熔断/异常。
   ========================================================= */

:root {
    /* 间距刻度 */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
    /* 圆角 */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
    /* 字阶 */
    --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 18px;
    --fs-xl: 22px; --fs-2xl: 28px;
    /* 语义前景/背景 (状态) */
    --ok: #10b981;   --ok-bg: #ecfdf5;
    --warn: #f59e0b; --warn-bg: #fffbeb;
    --bad: #ef4444;  --bad-bg: #fef2f2;
    --muted: var(--text-3);
    /* 面板 */
    --panel-bg: #ffffff;
    --panel-border: var(--border);
}

/* ===== 页面容器 ===== */
.ui-page { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); }
.ui-page-head { display: flex; align-items: center; justify-content: space-between; }
.ui-page-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text-1); }
.ui-page-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

/* ===== 面板 ===== */
.ui-panel { background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow); }
.ui-panel-head { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-4); }
.ui-panel-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-1);
    display: flex; align-items: center; gap: var(--sp-2); }

/* ===== 网格 ===== */
.ui-grid { display: grid; gap: var(--sp-4); }
.ui-grid-kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ui-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .ui-grid-2 { grid-template-columns: 1fr; } }

/* ===== KPI 卡 ===== */
.ui-kpi { background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: var(--sp-2); position: relative; overflow: hidden; }
.ui-kpi-label { font-size: var(--fs-sm); color: var(--text-2); }
.ui-kpi-value { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-1);
    line-height: 1.1; font-variant-numeric: tabular-nums; }
.ui-kpi-foot { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.ui-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.ui-delta.up { color: var(--ok); }
.ui-delta.down { color: var(--bad); }
.ui-delta.flat { color: var(--muted); }
.ui-kpi-spark { position: absolute; right: var(--sp-4); bottom: var(--sp-3); opacity: .85; }
.ui-kpi.alert { border-color: var(--bad); background: var(--bad-bg); }
.ui-kpi.alert .ui-kpi-value { color: var(--bad); }

/* ===== 状态徽章 ===== */
.ui-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; }
.ui-badge.ok { color: var(--ok); background: var(--ok-bg); }
.ui-badge.warn { color: var(--warn); background: var(--warn-bg); }
.ui-badge.bad { color: var(--bad); background: var(--bad-bg); }
.ui-badge.muted { color: var(--text-2); background: var(--bg-3); }

/* ===== 水位条 (预付闸阀) ===== */
.ui-water { display: flex; align-items: center; gap: var(--sp-2); }
.ui-water-track { flex: 1; height: 8px; background: var(--bg-3); border-radius: 999px; overflow: hidden; min-width: 60px; }
.ui-water-fill { height: 100%; border-radius: 999px; transition: width .4s; }
.ui-water-fill.ok { background: var(--ok); }
.ui-water-fill.warn { background: var(--warn); }
.ui-water-fill.bad { background: var(--bad); }
.ui-water-pct { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* ===== 表格 ===== */
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.ui-table th { text-align: left; font-weight: 600; color: var(--text-2);
    font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); }
.ui-table td { padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--bg-3);
    color: var(--text-1); font-variant-numeric: tabular-nums; }
.ui-table tr:hover td { background: var(--bg-2); }
.ui-table .num { text-align: right; }
.ui-row-alert td { background: var(--bad-bg) !important; }
.ui-tree-toggle { cursor: pointer; user-select: none; color: var(--text-2); display: inline-block; width: 16px; }
.ui-indent { display: inline-block; color: var(--text-3); }

/* ===== 按钮组 (订单操作) ===== */
.ui-btn { border: 1px solid var(--border); background: var(--bg-1); color: var(--text-2);
    padding: 4px 10px; border-radius: var(--r-sm); font-size: var(--fs-xs); cursor: pointer;
    transition: all .15s; }
.ui-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.ui-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.ui-btn.primary:hover { background: var(--primary-hover); }
.ui-btn.danger { border-color: var(--bad); color: var(--bad); }
.ui-btn.danger:hover:not(:disabled) { background: var(--bad); color: #fff; }
.ui-btn:disabled { opacity: .4; cursor: not-allowed; }
.ui-btn-group { display: inline-flex; gap: var(--sp-2); }

/* ===== 漏斗 (订单链路) ===== */
.ui-funnel { display: flex; align-items: stretch; gap: 0; }
.ui-funnel-step { flex: 1; text-align: center; padding: var(--sp-3); position: relative; }
.ui-funnel-step + .ui-funnel-step::before { content: '›'; position: absolute; left: -6px; top: 50%;
    transform: translateY(-50%); color: var(--text-3); font-size: var(--fs-lg); }
.ui-funnel-val { font-size: var(--fs-xl); font-weight: 700; color: var(--text-1); }
.ui-funnel-lbl { font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }

/* ===== 空态 ===== */
.ui-empty { padding: var(--sp-8); text-align: center; color: var(--muted); font-size: var(--fs-md); }
.ui-empty-hint { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-2); }

/* ===== 图标 ===== */
.ui-ico { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; }

/* ===== 暗色 (跟随 body.dark, 与现有主题切换一致) ===== */
body.dark {
    --panel-bg: #1e1e2d; --panel-border: #2b2b40;
    --text-1: #e5e7eb; --text-2: #a1a5b7; --text-3: #6b7280;
    --bg-1: #1a1a27; --bg-2: #1e1e2d; --bg-3: #2b2b40;
    --ok-bg: rgba(16,185,129,.12); --warn-bg: rgba(245,158,11,.12); --bad-bg: rgba(239,68,68,.12);
}