/* ==========================================================================
   Flaxl 运营后台 · 骨架与后台独有组件  admin.css
   --------------------------------------------------------------------------
   原则：能复用 app.css 的一律复用，这里只写后台独有的东西。
     已复用（不要在这里重复定义，否则会把 focus / hover 态覆盖掉）：
       .btn 系列 · .card / .card-pad / .card-soft · .input / .textarea / .select
       .field / .field-label · .form-row · .uploader · .tag 系列 · .status
       .segmented · .switch · .setting-row · .table-wrap / table.data
       .metric-grid / .metric-card / .metric-value · .filter-bar · .cat-tabs
     本文件定义：三栏骨架、左侧模块树、顶栏、工作区、抽屉、Toast，
     以及 app.css 里没有的几个小组件（时间线 / 迷你图 / 列表行 / 权限矩阵 /
     分页 / AI 标记 / 键值行）。

   右侧工作区的 .adm-light 见 tokens.css —— 后台长时间盯着看，
   右侧恒灰白不随日夜翻，左侧模块树跟随主题色，"哪是导航哪是内容"一眼分清。
   ========================================================================== */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink-50);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;          /* 后台是应用式界面，滚动交给 .workarea，body 本身不滚 */
}
code, .mono { font-family: var(--font-num); font-size: .92em; }
a { color: var(--brand-ink); text-decoration: none; }

/* ==========================================================================
   三栏骨架
   ========================================================================== */
.adm {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  height: 100dvh;
}

/* ==========================================================================
   左侧模块树
   ========================================================================== */
.side {
  background: var(--white);
  border-right: 1px solid var(--ink-150);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side-hd {
  height: var(--topbar-h); flex: 0 0 auto;
  border-bottom: 1px solid var(--ink-150);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
}
.side-hd .brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.side-hd .brand img { width: 28px; height: 28px; object-fit: contain; }
.side-hd b {
  font-size: var(--fs-sm); color: var(--ink-900); font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.side-hd .v {
  font-family: var(--font-num); font-size: var(--fs-2xs); color: var(--ink-400);
  border: 1px solid var(--ink-200); border-radius: var(--r-xs);
  padding: 1px 5px; flex: 0 0 auto;
}

.side-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-3) 0 var(--sp-6); min-height: 0; }

.side-foot {
  flex: 0 0 auto; border-top: 1px solid var(--ink-150);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--ink-500);
}
.side-foot .who { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }
.side-foot .who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 管理员头像：字母圆牌。app.css 的 .avatar 是给 logo 用的，
   这里要的是纯文字人像标识，单独定义。 */
.side-foot .avatar {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
  background: var(--brand-500); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}

/* ---------- 模块分组 ---------- */
.mgroup { margin-bottom: var(--sp-1); }
.mgroup-hd {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-1);
  font-size: var(--fs-2xs); color: var(--ink-400);
  letter-spacing: .06em; font-weight: var(--fw-medium);
}
.mgroup-hd::after { content: ""; flex: 1; height: 1px; background: var(--ink-100); }

.mitem {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px var(--sp-4); border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink-600); text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.mitem:hover { background: var(--ink-50); color: var(--ink-900); }
.mitem.is-active { background: var(--brand-100); color: var(--brand-ink); font-weight: var(--fw-medium); }
.mitem .mi-ico { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; }
.mitem.is-active .mi-ico { opacity: 1; }
.mitem .mi-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 待办数字角标：红=需要处理，黄=提醒 */
.mitem .mi-badge {
  font-family: var(--font-num); font-size: var(--fs-2xs);
  min-width: 18px; height: 17px; padding: 0 5px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-500); color: var(--white); font-weight: 600;
}
.mitem .mi-badge.is-warn { background: var(--warning); color: var(--ink-900); }

/* ==========================================================================
   右侧主区
   ========================================================================== */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
  height: var(--topbar-h); flex: 0 0 auto;
  background: var(--white); border-bottom: 1px solid var(--ink-150);
  display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6);
}
.topbar h1 {
  font-size: var(--fs-h3); color: var(--ink-900); margin: 0; font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.crumb { font-size: var(--fs-xs); color: var(--ink-400); white-space: nowrap; }
.topbar .sp { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.workarea { flex: 1 1 auto; overflow-y: auto; min-height: 0; background: var(--ink-50); }
.workarea .wrap { padding: var(--sp-7) var(--sp-8) var(--sp-12); max-width: 1440px; }

/* ---------- 页面头（后台版） ---------- */
.adm-head { margin-bottom: var(--sp-6); }
.adm-head h2 {
  font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--ink-900);
  margin: 0 0 4px; font-weight: var(--fw-semibold);
}
.adm-head p { margin: 0; color: var(--ink-500); font-size: var(--fs-sm); max-width: 900px; }
.adm-head--row { display: flex; align-items: flex-start; gap: var(--sp-4); }
.adm-head--row .sp { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 栅格 ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-side { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-4); }
@media (max-width: 1180px) { .grid-side, .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---------- 卡片头 / 卡片体（app.css 只有 .card-pad） ---------- */
.card-hd {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--ink-150);
}
.card-hd h3 { font-size: var(--fs-h3); color: var(--ink-900); margin: 0; font-weight: var(--fw-semibold); }
.card-hd .sp { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }
.card-bd { padding: var(--sp-5); }

/* ==========================================================================
   状态点
   ========================================================================== */
.sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.sdot--ok   { background: var(--success); }
.sdot--warn { background: var(--warning); }
.sdot--err  { background: var(--brand-500); }
.sdot--idle { background: var(--ink-300); }
.sdot--live { background: var(--success); box-shadow: 0 0 0 3px rgba(18, 183, 106, .18); }

/* ==========================================================================
   时间线（工单处理 / 合同流转 / 版本发布记录）
   ========================================================================== */
.tl { position: relative; padding-left: var(--sp-6); }
.tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--ink-150); }
.tl-item { position: relative; padding-bottom: var(--sp-4); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-6) + 2px); top: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-200);
  box-shadow: 0 0 0 3px var(--white);
}
.tl-item.is-ok::before   { background: var(--success); }
.tl-item.is-cur::before  { background: var(--brand-500); }
.tl-item.is-warn::before { background: var(--warning); }
.tl-item b { font-size: var(--fs-sm); color: var(--ink-900); font-weight: var(--fw-medium); display: block; }
.tl-item span { font-size: var(--fs-xs); color: var(--ink-500); }

/* ==========================================================================
   抽屉
   ========================================================================== */
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(10, 12, 16, .42);
  z-index: var(--z-modal); opacity: 0; pointer-events: none; transition: opacity var(--t-base);
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 92vw);
  background: var(--white); z-index: calc(var(--z-modal) + 1);
  transform: translateX(100%); transition: transform var(--t-base);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(16, 24, 40, .14);
}
.drawer.is-open { transform: none; }
.drawer--wide { width: min(760px, 94vw); }
.drawer-hd {
  flex: 0 0 auto; padding: var(--sp-5); border-bottom: 1px solid var(--ink-150);
  display: flex; align-items: flex-start; gap: var(--sp-3);
}
.drawer-hd h3 { margin: 0 0 3px; font-size: var(--fs-h2); color: var(--ink-900); font-weight: var(--fw-semibold); }
.drawer-hd p { margin: 0; font-size: var(--fs-xs); color: var(--ink-500); }
.drawer-bd { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5); min-height: 0; }
.drawer-ft {
  flex: 0 0 auto; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--ink-150);
  display: flex; gap: var(--sp-2); justify-content: flex-end; background: var(--ink-50);
}

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px);
  background: var(--btn-ink); color: var(--btn-ink-ink);
  padding: 11px var(--sp-5); border-radius: var(--r-md);
  font-size: var(--fs-sm); z-index: var(--z-toast);
  opacity: 0; pointer-events: none; transition: all var(--t-base);
  box-shadow: var(--sh-lg); max-width: 80vw;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast small { display: block; font-size: var(--fs-2xs); margin-top: 2px; color: var(--btn-ink-ink); opacity: .72; }

/* ==========================================================================
   空态
   ========================================================================== */
.empty { text-align: center; padding: var(--sp-12) var(--sp-6); color: var(--ink-500); }
.empty-title { font-size: var(--fs-h3); color: var(--ink-700); margin: var(--sp-3) 0 4px; }
.empty-desc { font-size: var(--fs-sm); margin: 0 auto; max-width: 420px; }

/* ==========================================================================
   迷你条形图 / 环形进度（仪表盘用，不引第三方图表库）
   ========================================================================== */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 88px; }
.bars .bar { flex: 1; background: var(--brand-100); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.bars .bar.is-hi { background: var(--brand-500); }
.bar-labels { display: flex; gap: 4px; margin-top: 6px; }
.bar-labels span { flex: 1; text-align: center; font-size: var(--fs-2xs); color: var(--ink-400); }

.ring { width: 78px; height: 78px; border-radius: 50%; position: relative; flex: 0 0 auto; }
.ring::after {
  content: attr(data-v); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: var(--fs-h3); font-weight: 600; color: var(--ink-900);
}
.ring-in { position: absolute; inset: 9px; background: var(--white); border-radius: 50%; }

/* ==========================================================================
   表单网格（抽屉里的多行表单）
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

/* ==========================================================================
   列表行 / 待办卡
   ========================================================================== */
.lrow {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--ink-100);
}
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: var(--ink-50); }
.lrow .sp { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

.todo {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--ink-100);
  cursor: pointer; transition: background var(--t-fast);
}
.todo:hover { background: var(--ink-50); }
.todo:last-child { border-bottom: 0; }
.todo .t-n {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: var(--fs-xs); font-weight: 600; flex: 0 0 auto;
}
.todo .t-b { flex: 1; min-width: 0; }
.todo .t-b b { display: block; font-size: var(--fs-sm); color: var(--ink-900); font-weight: var(--fw-medium); }
.todo .t-b span { font-size: var(--fs-xs); color: var(--ink-500); }

/* ==========================================================================
   权限矩阵（角色权限页）
   ========================================================================== */
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.tick  { color: var(--success-ink); font-weight: 600; }
.cross { color: var(--ink-300); }

/* ==========================================================================
   分页
   ========================================================================== */
.pager { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-4); }
.pager .info { font-size: var(--fs-xs); color: var(--ink-400); margin-right: auto; }
.pager button {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--ink-200); border-radius: var(--r-xs);
  background: var(--white); font-size: var(--fs-xs); color: var(--ink-600);
  cursor: pointer; transition: all var(--t-fast);
}
.pager button:hover { border-color: var(--ink-300); color: var(--ink-900); }
.pager button.is-active { background: var(--brand-500); border-color: var(--brand-500); color: var(--white); }
.pager button:disabled { opacity: .4; pointer-events: none; }

/* ==========================================================================
   AI 标记（AI 审核 / AI 告警）
   ========================================================================== */
.ai-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px; border-radius: var(--r-xs);
  font-size: var(--fs-2xs); font-weight: 600;
  background: linear-gradient(135deg, #F5F0FF, #EEF3FF);
  color: var(--tone-violet-ink); border: 1px solid #E4DCFF;
}
.ai-tag svg { width: 11px; height: 11px; }
/* AI 产出的正文块：左侧紫色引导条，和人工填写的内容区分开 */
.ai-block {
  border-left: 3px solid var(--tone-violet-ink);
  background: var(--tone-violet-bg);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.75;
}
.ai-block b { color: var(--ink-900); }

/* ==========================================================================
   键值行（详情抽屉里的字段列表）
   ========================================================================== */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--sp-5); font-size: var(--fs-sm); margin: 0; }
.kv dt { color: var(--ink-500); white-space: nowrap; }
.kv dd { margin: 0; color: var(--ink-900); font-weight: 500; word-break: break-all; }

/* 分区标题（抽屉/长表单内的小标题） */
.sec-title {
  font-size: var(--fs-xs); color: var(--ink-400); font-weight: var(--fw-medium);
  letter-spacing: .06em; margin: var(--sp-6) 0 var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
}
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--ink-100); }
.sec-title:first-child { margin-top: 0; }

@media print { .side, .topbar { display: none; } }