/* ============================================================
 * apps/dc.css —— 机房与母机监控（js/apps/dc.js）
 *
 * 由原 css/apps.css 按既有的分节标记切分而来（0.3.1 架构整理）。
 * 0.3.5：monitor.css 整体并入本文件（两个 App 已合并成一个）。
 * 新增样式请放进对应 App 的分片，不要再往 apps.css 里堆。
 * ============================================================ */
/* ============================================================
 * dc —— 机房管理
 *
 * 视觉基调：比 mofang（财务系统）更"硬"。
 * 财务系统是账本（白底、密集文字），机房是**设备面板**：
 * 用机位格、水位条、卡片来传达"资源被用掉了多少"。
 * 颜色只表达状态（正常/挤/危险），不做装饰。
 * ============================================================ */

/* ---- 总览：今日账 ---- */
.dc-money {
  display: flex; gap: 1px; margin: 12px 12px 0;
  background: var(--divider); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--e1);
}
.dc-m {
  flex: 1; padding: 12px 10px; background: var(--surface); text-align: center;
}
.dc-m .dm-k { font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.dc-m .dm-v { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }

/* ---- 机位图 ---- */
.dc-sec { margin: 16px 12px 0; }
.dc-sec-h {
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  margin-bottom: 8px; padding-left: 2px;
}
.dc-rack {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.dc-cell {
  background: var(--surface); border-radius: var(--r); padding: 10px 9px;
  box-shadow: var(--e1);
}
.dc-cell-bar { display: flex; gap: 2px; height: 26px; margin-bottom: 7px; }
/* 每格 10% 水位。空格是"凹槽"，实格才是占用 —— 
   比一根进度条更容易看出"还剩几格" */
.dc-slot {
  flex: 1; border-radius: 2px; background: var(--surface-3);
  transition: background var(--fast);
}
.dc-cell-n {
  font-size: 11.5px; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-cell-s { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }

/* ---- 机器卡 ---- */
.dc-card {
  background: var(--surface); border-radius: var(--r-lg); padding: 13px 14px;
  margin-bottom: 10px; box-shadow: var(--e1);
}
.dc-c-h { display: flex; align-items: flex-start; }
.dch-n { font-size: 14.5px; font-weight: 600; color: var(--text); }
.dch-s { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.dc-c-tag {
  display: inline-block; margin-top: 7px; padding: 2px 8px;
  font-size: 10.5px; border-radius: 20px;
  background: #FBEEEA; color: var(--danger);
}
/* 压力预警：中性色，只提示"该看一眼了"，不写成告警红 ——
   风险等级由玩家自己判断，界面不替他下结论（数值显示原则） */
.dc-c-tag.dc-tag-warn {
  background: #FBF3E4; color: #9A6B1F;
}

.dc-spec {
  display: flex; gap: 4px; margin: 11px 0 12px; padding: 9px 0;
  border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
}
.dc-sp { flex: 1; text-align: center; }
.dc-sp .ds-k { font-size: 10.5px; color: var(--text-3); }
.dc-sp .ds-v { font-size: 12.5px; color: var(--text); font-weight: 500; margin-top: 2px; }

/* ---- 指标条 ---- */
.dc-meters { display: flex; flex-direction: column; gap: 9px; }
.mt-top { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 4px; }
.mt-k { color: var(--text-2); }
.mt-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.mt-bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.mt-fill { height: 100%; border-radius: 3px; transition: width var(--spring); }

.dc-c-f {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--divider);
  font-size: 11px; color: var(--text-3);
}

/* ---- 键值表 ---- */
.dc-kv { background: var(--surface); border-radius: var(--r-lg); padding: 4px 14px; box-shadow: var(--e1); }
.dc-kvr {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--divider);
  font-size: 13px;
}
.dc-kvr:last-child { border-bottom: 0; }
.dc-kvr > span:first-child { color: var(--text-2); flex: none; }
.dc-kvr > span:last-child { color: var(--text); text-align: right; }
.dc-kvr b { font-weight: 600; }

.dc-hint {
  font-size: 12px; color: var(--text-3); line-height: 1.65;
  padding: 0 2px 10px;
}

/* ---- 虚拟化方案选择 ---- */
.dc-virts { display: flex; flex-direction: column; gap: 7px; }
.dc-vt {
  position: relative; background: var(--surface); border-radius: var(--r);
  padding: 11px 13px; box-shadow: var(--e1);
  border: 1.5px solid transparent; transition: border-color var(--fast);
}
.dc-vt.on { border-color: var(--md-primary); }
.dc-vt.locked { opacity: .48; }
.dc-vt .dv-n { font-size: 13.5px; font-weight: 500; color: var(--text); }
.dc-vt .dv-s { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.dc-lock { position: absolute; right: 12px; top: 50%; margin-top: -7px; color: var(--text-3); }

/* ---- 三个操作 ---- */
.dc-ops { display: flex; gap: 8px; }
.dc-op {
  flex: 1; background: var(--surface); border-radius: var(--r);
  padding: 13px 8px 11px; text-align: center; box-shadow: var(--e1);
}
.dc-op .do-ic { color: var(--md-primary); margin-bottom: 6px; }
.dc-op.danger .do-ic { color: var(--danger); }
.dc-op .do-n { font-size: 13px; font-weight: 600; color: var(--text); }
.dc-op .do-p { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
.dc-op .do-s { font-size: 10.5px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }

/* ---- 上游 / 报价卡 ---- */
.dc-up, .dc-offer {
  background: var(--surface); border-radius: var(--r-lg);
  padding: 13px 14px; margin-bottom: 9px; box-shadow: var(--e1);
}
.dc-offer.hot { border: 1.5px solid var(--md-accent); }
.dc-offer.owned { opacity: .62; }
/* 已失效的免费账号：整块压暗，一眼能看出"这个号没了" */
.dc-up.dead { opacity: .5; }
.dc-up.dead .du-n { text-decoration: line-through; }
.du-h, .do-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.du-n, .do-n { font-size: 14px; font-weight: 600; color: var(--text); }
.du-r { font-size: 11.5px; font-weight: 600; flex: none; }
.do-p { font-size: 13.5px; font-weight: 600; color: var(--text); flex: none; }
.du-b, .do-b { font-size: 11.5px; color: var(--text-2); line-height: 1.7; margin: 5px 0 9px; }
.dc-up .mt-top { margin-top: 4px; }
.du-f {
  display: flex; justify-content: space-between; margin-top: 9px;
  font-size: 11px; color: var(--text-3);
}
.do-a { display: flex; justify-content: flex-end; }
.do-a .btn { padding: 7px 18px; font-size: 13px; }
.do-a .btn[disabled] { opacity: .45; }

/* ---- 自建机房提示 / 状态 ---- */
.dc-note, .dc-built {
  margin: 16px 12px 0; padding: 13px 14px; border-radius: var(--r-lg);
  background: var(--surface-2); border-left: 3px solid var(--text-3);
}
.dc-built { border-left-color: var(--md-primary); background: #F3F6F7; }
.dn-t, .db-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.db-t { color: var(--md-primary-d); }
.dn-s, .db-s { font-size: 11.5px; color: var(--text-3); line-height: 1.65; margin-top: 5px; }

/* ============================================================
 * 母机监控（Nodewatch 风）
 *
 * ★ 0.3.5：这一节原在 css/apps/monitor.css，随 App 合并搬进来。
 *   为什么保留两套视觉语言（.dc-* 与 .mon-*）而不是合成一套：
 *   .dc-* 的画的是"你自己的资产"—— 机位格、水位条、维修按钮，
 *         是给别人看的**经营面板**；
 *   .mon-* 画的是"机器自己报出来的数"—— 曲线、容器网格、无圆角，
 *         是给运维看的**看板**。
 *
 *   合并的是**入口**（一个 App 里看完、管完），不是**语言**。
 *   把监控面板刷成 dc 的卡片风，反而会让玩家分不清
 *   "哪些数是我在管的资产，哪些是机器自己报的读数"。
 * ============================================================ */
.mon-root { background: #F4F3F0; color: var(--text); }
/*
 * 唯一不跟 --app-bg 规则的 AppBar。
 * 别的界面是"用户在自己手机里办事"，顶栏就该是那个 App 的品牌色；
 * 监控是"机器报出来的数"，它模仿的是 Nodewatch 这类运维看板 ——
 * 这类面板没有品牌色，只有一张浅色底 + 细分隔线。所以这里刻意留白底。
 */
.mon-appbar {
  background: linear-gradient(168deg, #FCFCFA 0%, #F2F2EF 100%);
  color: var(--text);
  box-shadow: none;
  border-bottom: 1px solid var(--divider);
}
/*
 * ★ 必须把 .ab-title / .ab-sub 的颜色**顶回来**。
 *
 *   material.css 里给的是
 *     .appbar .ab-sub { color: rgba(255,253,251,.86) }
 *   —— 近白。那是给深色品牌顶栏写的，在那种底上对比度正好。
 *   而 .mon-appbar 是浅底，近白字压上去对比度不到 1.2，
 *   实测就是"标题下面那行小字看不见了"：
 *   第一幕看到的是「速云互联 的机器 · 只读」的位置空着一片，
 *   而这句话恰恰是**这一屏最重要的信息**（这数是谁的）。
 *
 *   合并前 monitor.js 自成一套样式，从不与 .appbar.dark 共存，
 *   所以没暴露；合并之后两条顶栏同处一个 App，才撞上。
 *   这里按"浅底 → 深字"重给一遍，并保留次级信息该有的弱化。
 */
.mon-appbar .ab-title { color: var(--text); }
.mon-appbar .ab-sub { color: var(--text-2); }
/* 监控面板是"机器报出来的数"，所以圆角一律收小，跟游戏别的界面分开 */
.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 4px; padding: 10px; }
.node {
  aspect-ratio: 1; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: rgba(255, 255, 255, .8); font-family: monospace; position: relative;
}
.node.g { background: #5C8A6B; }
.node.y { background: #C99A2E; }
.node.r { background: #B4524A; animation: pulse 1.4s infinite; }
.node.gray { background: #CBD3D6; color: #7C8A90; }
@keyframes pulse { 50% { opacity: .45; } }
.mon-panel { background: var(--surface); border-radius: var(--r-lg); margin: 8px 10px; padding: 10px; border: 1px solid var(--divider); }
.mon-panel .mp-t { font-size: 11.5px; color: var(--text-2); margin-bottom: 6px; display: flex; justify-content: space-between; }
.mon-panel .mp-v { font-size: 22px; font-weight: 300; font-family: monospace; }
.spark { display: block; width: 100%; height: 42px; color: var(--ok); }
/* 语义色调：JS 只传 tone，色值在这里定 */
.spark.ok { color: var(--ok); }
.spark.warn { color: var(--warn); }
.spark.danger { color: var(--danger); }
.spark.accent { color: var(--md-accent); }
.mon-row { display: flex; gap: 10px; }
.mon-row > * { flex: 1; }
.mon-lock {
  margin: 10px; padding: 10px 12px; border: 1px dashed #C3CBD0; border-radius: 10px;
  font-size: 12px; color: var(--text-2); text-align: center;
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  line-height: 1.6;
}
.mon-lock .ml-ic {
  flex: none; width: 20px; height: 20px; border-radius: 7px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(90, 110, 122, .10); color: #5A6E7A;
}

/* ============================================================
 * 0.3.5 新增：合并后的分区头 / 只读节点卡 / 已断开
 *
 * ★ 为什么需要 .dc-grp：
 *   合并后同一屏里会同时出现两类东西 ——
 *   「上游给的（只读）」和「自己买的（可操作）」。
 *   只靠卡片长得不一样是不够的，必须有一行**文字**把归属写明，
 *   否则玩家会把上游的机器当成自己的资产去找维修按钮。
 * ============================================================ */
.dc-grp {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 16px 12px 8px; padding-left: 2px;
}
.dc-grp-t { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.dc-grp-t .dt-n { color: var(--text-3); font-weight: 500; margin-left: 4px; }
/* 归属标签：只读 / 自有 —— 中性色，不用红黄，因为它不是风险提示 */
.dc-grp-b {
  font-size: 10.5px; padding: 2px 9px; border-radius: 20px;
  background: var(--surface-3); color: var(--text-2); flex: none;
}
.dc-grp-b.own { background: #EAF1F3; color: var(--md-primary-d); }

/* 上游只读节点的机位格：虚线框 + 压暗，一眼区别于自有母机 */
.dc-cell.ro {
  background: var(--surface-2); border: 1px dashed var(--divider);
  box-shadow: none;
}
.dc-cell.ro .dc-cell-n { color: var(--text-2); }

/* 已断开：整面板压暗，让"没有数据源"这件事在视觉上先成立 */
.dc-offline {
  margin: 10px 12px 0; padding: 16px 14px; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px dashed #C3CBD0; text-align: center;
}
.dc-offline .of-ic { color: var(--text-3); margin-bottom: 8px; }
.dc-offline .of-t { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.dc-offline .of-s { font-size: 11.5px; color: var(--text-3); line-height: 1.7; margin-top: 6px; }