/* ============================================================
 * apps/mofang.css —— 魔方后台 / 财务系统（js/apps/mofang.js）
 *
 * 由原 css/apps.css 按既有的分节标记切分而来（0.3.1 架构整理）。
 * 内容与切分前逐字节一致 —— 只换了存放位置，没动一个字符。
 * 新增样式请放进对应 App 的分片，不要再往 apps.css 里堆。
 * ============================================================ */
/* ============ 魔方后台（WHMCS 风） ============ */
.mf-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.mf-stat .st {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--e1);
  padding: 11px 12px;
}
.mf-stat .st .st-k { font-size: 11px; color: var(--text-2); }
.mf-stat .st .st-v { font-size: 21px; font-weight: 400; margin-top: 2px; letter-spacing: .3px; }
.mf-stat .st .st-v small { font-size: 12px; color: var(--text-2); }
.mf-stat .st.up .st-v { color: var(--ok); }
.mf-stat .st.down .st-v { color: var(--danger); }

.mf-tabs { display: flex; border-bottom: 1px solid var(--divider); background: var(--surface); flex: none; }
.mf-tabs .mt {
  flex: 1; text-align: center; padding: 12px 0; font-size: 13.5px; color: var(--text-2);
  position: relative; overflow: hidden;
}
.mf-tabs .mt.on { color: var(--md-primary); font-weight: 500; }
.mf-tabs .mt.on::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; background: var(--md-primary);
}

.cust-row { display: flex; align-items: center; padding: 11px 14px; background: var(--surface); position: relative; }
.cust-row + .cust-row::before {
  content: ''; position: absolute; left: 14px; right: 0; top: 0; height: 1px; background: var(--divider);
}
.cust-row .cr-main { flex: 1; min-width: 0; margin-left: 12px; }
.cust-row .cr-name { font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.cust-row .cr-meta { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.cust-row .cr-right { text-align: right; flex: none; }
/* 客户状态点。Active 那个会喘气 —— 客户列表上"谁还活着"一眼看得出来 */
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; position: relative; isolation: isolate; }
.status-dot.Active { background: var(--ok); }
.status-dot.Suspended { background: var(--warn); }
.status-dot.Terminated { background: var(--dead); }
.status-dot.Overdue { background: var(--danger); }

.ticket {
  background: var(--surface);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.ticket + .ticket::before {
  content: ''; position: absolute; left: 14px; right: 0; top: 0; height: 1px; background: var(--divider);
}
.ticket:active { background: #F4F6F7; }
.ticket .tk-top { display: flex; align-items: center; gap: 8px; }
.ticket .tk-id { font-size: 11px; color: var(--text-3); font-family: monospace; }
.ticket .tk-subj { font-size: 14.5px; margin-top: 3px; }
.ticket .tk-meta { font-size: 11.5px; color: var(--text-2); margin-top: 4px; display: flex; gap: 10px; }
.tk-pri { font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.tk-pri.High { background: #F2D9D6; color: #8E3F38; }
.tk-pri.Medium { background: #F3E3C6; color: #8A6A22; }
.tk-pri.Low { background: #E2E8EA; color: #5A7079; }

.tk-detail { padding: 14px; }
.tk-msg { background: var(--surface); border-radius: var(--r); box-shadow: var(--e1); padding: 12px; margin-bottom: 10px; }
.tk-msg .tm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tk-msg .tm-name { font-size: 13.5px; font-weight: 500; }
.tk-msg .tm-time { font-size: 11px; color: var(--text-3); margin-left: auto; }
.tk-msg .tm-body { font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.tk-msg.admin { background: #EEF3F5; }

/*
 * 表格：自己就是白底 + 圆角，所以**外层要用 .md-card 托盘**（底色下沉一档），
 * 让表格浮出来。这就是"卡片套卡片"的正确解法 —— 不是禁止嵌套，
 * 而是两层的底色必须不同，否则叠出来的就是一块没有边界的大白。
 */
.mf-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 13px;
}
.mf-table th {
  text-align: left; font-weight: 500; font-size: 11.5px; color: var(--text-2);
  padding: 10px 12px; border-bottom: 1px solid var(--divider); background: var(--surface-2);
}
.mf-table td { padding: 10px 12px; border-bottom: 1px solid var(--divider); }
.mf-table tr:last-child td { border-bottom: 0; }

/*
 * 语义化告警条。
 * 以前这种条子是在 JS 里写内联 style 上色的，绕过设计系统 —— 改配色时
 * 会漏掉，而且同一个"报错"在不同页面长得不一样。现在统一成类。
 */
.banner {
  border-radius: var(--r-lg);
  padding: 12px;
  font-size: 13px;
  border: 1px solid transparent;
}
.banner.err { background: #F9E7E4; color: #8E3F38; border-color: #EBC9C4; }
.banner.warn { background: #F8EFDC; color: #8A6520; border-color: #E9D8B4; }
.banner.ok { background: #E6EFE7; color: #3E6B4B; border-color: #C7DBCB; }
.banner.info { background: var(--surface-2); color: var(--text); border-color: var(--divider); }

/* 安装向导 */
.wiz-step { padding: 16px; }
.wiz-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--md-primary); color: #FFFDFB;
  font-size: 12px; margin-right: 8px;
}
.wiz-log {
  background: #1E272B; color: #9FB6A8; font-family: monospace; font-size: 11.5px;
  border-radius: var(--r-sm); padding: 10px; margin-top: 10px; white-space: pre-wrap; line-height: 1.6;
  max-height: 160px; overflow-y: auto;
}
.wiz-log .err { color: #D98A7F; }
.wiz-log .ok { color: #8FB89C; }