/* ══════════════════════════════════════════════════════════════
 * admin-industrial.css —— 后台管理的工业化设计层（唯一权威）
 * ══════════════════════════════════════════════════════════════
 * 与地面站 css/gcs-industrial.css 同一套规范：微圆角、发丝线、无阴影、
 * 靠明度分层而不是描边、状态用细边低饱和底而不是实心色块、28px 控件高。
 *
 * ⚠️ 暗色属性值必须是 `dark-gray`，不是 `dark`。
 * 地面站全站用 `html[data-theme="dark-gray"]`，浅色靠 `:not([data-theme="dark-gray"])`
 * 兜底。上一版主题层错写成 "dark" → :not(dark-gray) 命中 → 浅色 token 生效，
 * 而那层又把一部分变量刷成深色，于是出现「白侧栏 + 深卡片」的半明半暗。
 * 这也是为什么必须做成"真 token"而不是"映射补丁"。
 *
 * localStorage key 与官网/地面站共用 `mocraft_theme`，三端主题一致。
 *
 * ⚠️ 本文件有两份副本，必须保持一致（各服务需自包含，桌面版离线取不到官网静态）：
 *   website/static/portal/admin-industrial.css   ← 权威版，改这里
 *   mocraft-gcs/static/admin-industrial.css      ← 副本
 * ────────────────────────────────────────────────────────────── */

/* ── 形态 / 密度 / 字体：与 gcs-industrial.css 逐项对齐 ── */
/* 用 html:root 而非 :root：特异性 (0,1,1) 压过各页自带的 :root (0,1,0)，
   于是本层无论在页面 <style> 之前还是之后引入都生效。 */
html:root{
  --f-ui:'Rajdhani','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --f-body:'HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --f-mono:'JetBrains Mono','HarmonyOS Sans SC',ui-monospace,monospace;

  --r-sm:3px; --r-md:4px; --r-lg:6px; --r-xl:8px; --r-pill:100px;
  --hair:1px;
  --shadow-sm:none; --shadow-md:none;
  --shadow-lg:0 12px 32px rgba(0,0,0,.28); --shadow-xl:0 18px 48px rgba(0,0,0,.34);

  --pad-panel:10px; --pad-row:6px; --pad-cell:5px 9px;
  --gap-tight:6px; --gap:10px; --gap-lg:14px;
  --h-control:28px; --fs-ui:12.5px; --fs-label:11px; --fs-num:12px; --fs-title:13px;

  --dur-fast:.12s; --dur:.18s; --ease:cubic-bezier(.2,.8,.3,1);

  --side-w:210px; --hdr-h:44px;
}

/* ── 浅色：中性偏冷的仪器白，四级明度阶梯 ── */
html:not([data-theme="dark-gray"]){
  color-scheme:light;
  --c-bg:#e7eaee; --c-surface:#eef1f4; --c-card:#f6f8fa; --c-elevated:#ffffff;
  --c-text:#11161c; --c-text-2:#3d4753; --c-text-3:#6b7684;
  --c-border:rgba(17,22,28,.13); --c-line-strong:rgba(17,22,28,.24);
  --c-soft-btn:rgba(17,22,28,.05); --c-soft-btn-hover:rgba(17,22,28,.09);
  --gcs-accent:#0e7490; --gcs-accent-dim:rgba(14,116,144,.12);
  --gcs-green:#047857; --gcs-red:#b91c1c; --gcs-amber:#b45309; --gcs-purple:#6d28d9;
  --c-overlay:rgba(17,22,28,.30);
}
/* ── 深色：三级明度差拉开，否则 surface/card/elevated 看不出层次 ── */
html[data-theme="dark-gray"]{
  color-scheme:dark;
  --c-bg:#0e1216; --c-surface:#151a20; --c-card:#1b2129; --c-elevated:#232b34;
  --c-text:#e8eef5; --c-text-2:#aab6c4; --c-text-3:#79879a;
  --c-border:rgba(232,238,245,.11); --c-line-strong:rgba(232,238,245,.20);
  --c-soft-btn:rgba(232,238,245,.06); --c-soft-btn-hover:rgba(232,238,245,.11);
  --gcs-accent:#38bdf8; --gcs-accent-dim:rgba(56,189,248,.14);
  --gcs-green:#34d399; --gcs-red:#f87171; --gcs-amber:#fbbf24; --gcs-purple:#c084fc;
  --c-overlay:rgba(0,0,0,.62);
}

/* ══ 兼容映射：三套后台的旧变量名 → 上面这一套 ══
 * 目的不是长期保留，而是让尚未逐行重写的子页立刻拿到正确的明暗值。
 * 新写的样式请直接用 --c-* / --gcs-* / --r-* / --fs-*。 */
html:root{
  /* 官网后台（--c-* 家族本来就对齐，只补它独有的几个） */
  --c-accent:var(--gcs-accent); --c-accent-2:var(--gcs-accent);
  --c-accent-gradient:linear-gradient(135deg,var(--gcs-accent),var(--gcs-purple));
  --c-accent-glow:var(--gcs-accent-dim);
  --c-border-h:var(--gcs-accent);
  --c-success:var(--gcs-green); --c-warning:var(--gcs-amber); --c-danger:var(--gcs-red);
  /* AI 地面站后台家族 */
  --bg:var(--c-bg); --surface:var(--c-surface); --panel:var(--c-surface);
  --card:var(--c-card); --elevated:var(--c-elevated);
  --border:var(--c-border); --border-h:var(--gcs-accent);
  --text:var(--c-text); --text-2:var(--c-text-2); --text-3:var(--c-text-3);
  --accent:var(--gcs-accent); --accent-dim:var(--gcs-accent-dim);
  --green:var(--gcs-green); --green-dim:color-mix(in srgb,var(--gcs-green) 12%,transparent);
  --red:var(--gcs-red);     --red-dim:color-mix(in srgb,var(--gcs-red) 12%,transparent);
  --amber:var(--gcs-amber); --amber-dim:color-mix(in srgb,var(--gcs-amber) 12%,transparent);
  --purple:var(--gcs-purple); --purple-dim:color-mix(in srgb,var(--gcs-purple) 12%,transparent);
  --cyan:var(--gcs-accent);
  --r:var(--r-md); --sidebar-w:var(--side-w); --header-h:var(--hdr-h);
  /* 统一后台 portal 家族 */
  --tx:var(--c-text); --tx2:var(--c-text-2); --tx3:var(--c-text-3);
  --ac:var(--gcs-accent); --ac2:var(--gcs-accent); --mono:var(--f-mono);
}

/* ══ 根元素重置 ══
 * 必需：portal 外壳（index.html）自己没带 reset。缺了这段时 UA 默认的
 * body{margin:8px} + 白底 html 会在 .a-shell 四周露出一圈白边（深色下尤其刺眼）。
 * 两个内嵌后台自带 reset，重复定义无害。
 * color-scheme 写在上面的主题块里：决定原生滚动条/表单控件/iframe 未加载完时的底色，
 * 缺了它就会出现「页面已变深、滚动条和 iframe 白底」的不同步观感。 */
html{background:var(--c-bg)}
html,body{margin:0;padding:0}
body{background:var(--c-bg);color:var(--c-text)}

/* ══ 骨架 ══ */
.a-shell{display:flex;height:100vh;overflow:hidden;background:var(--c-bg);color:var(--c-text);
  font:var(--fs-ui)/1.5 var(--f-body)}
.a-side{width:var(--side-w);flex-shrink:0;display:flex;flex-direction:column;
  background:var(--c-surface);border-right:var(--hair) solid var(--c-line-strong);overflow-y:auto}
.a-main{flex:1;min-width:0;display:flex;flex-direction:column}
.a-hdr{height:var(--hdr-h);flex-shrink:0;display:flex;align-items:center;gap:var(--gap-tight);
  padding:0 var(--gap);background:var(--c-elevated);
  border-bottom:var(--hair) solid var(--c-line-strong)}
.a-hdr-title{font-family:var(--f-ui);font-size:var(--fs-title);font-weight:700;letter-spacing:.6px;color:var(--c-text)}
.a-hdr-right{margin-left:auto;display:flex;align-items:center;gap:var(--gap-tight)}
.a-body{flex:1;overflow:auto;padding:var(--gap-lg)}
.a-body.a-framed{padding:0;overflow:hidden;display:flex}

/* 品牌区 */
.a-brand{display:flex;align-items:center;gap:8px;padding:0 var(--gap);height:var(--hdr-h);
  flex-shrink:0;border-bottom:var(--hair) solid var(--c-line-strong);
  font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:1.4px;color:var(--c-text)}
.a-brand em{font-style:normal;color:var(--gcs-accent)}
.a-side-foot{margin-top:auto;padding:8px var(--gap);border-top:var(--hair) solid var(--c-border);
  font-family:var(--f-mono);font-size:var(--fs-label);color:var(--c-text-3)}

/* 侧栏项：当前项 = 左 2px 色条 + 明度提升，不用整块高亮 */
.a-side-sec{padding:var(--gap) var(--gap) 4px;font-size:10px;letter-spacing:1.6px;
  color:var(--c-text-3);text-transform:uppercase;font-family:var(--f-ui)}
.a-nav{display:flex;align-items:center;gap:8px;padding:8px var(--gap);cursor:pointer;
  color:var(--c-text-2);font-size:var(--fs-ui);font-weight:600;text-decoration:none;
  border-left:2px solid transparent;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.a-nav:hover{background:var(--c-card);color:var(--c-text)}
.a-nav.on{background:var(--c-card);border-left-color:var(--gcs-accent);color:var(--gcs-accent)}
.a-nav .a-ico{width:16px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.a-nav-badge{margin-left:auto;font-family:var(--f-mono);font-size:10px;padding:0 5px;border-radius:var(--r-sm);
  background:var(--gcs-accent-dim);color:var(--gcs-accent)}

/* ══ 面板 / 卡片：无边框，靠明度分层 ══ */
.a-panel{background:var(--c-card);border-radius:var(--r-md);overflow:hidden}
.a-panel-hd{background:var(--c-elevated);border-bottom:var(--hair) solid var(--c-border);
  padding:7px var(--pad-panel);font-family:var(--f-ui);font-size:var(--fs-label);font-weight:600;
  letter-spacing:.6px;color:var(--c-text);display:flex;align-items:center;gap:var(--gap-tight)}
.a-panel-bd{padding:var(--pad-panel)}

.a-grid{display:grid;gap:var(--gap)}
.a-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.a-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.a-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.a-g4{grid-template-columns:repeat(2,minmax(0,1fr))}.a-g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.a-g4,.a-g3,.a-g2{grid-template-columns:1fr}}

/* KPI：数字走等宽，标签走 UI 字，不加阴影不加大圆角 */
.a-kpi{background:var(--c-card);border-radius:var(--r-md);padding:var(--pad-panel);
  display:flex;flex-direction:column;gap:2px}
.a-kpi-lb{font-family:var(--f-ui);font-size:var(--fs-label);letter-spacing:1.2px;
  text-transform:uppercase;color:var(--c-text-3)}
.a-kpi-v{font-family:var(--f-mono);font-size:24px;font-weight:700;line-height:1.15;color:var(--c-text)}
.a-kpi-v.accent{color:var(--gcs-accent)}
.a-kpi-v.green{color:var(--gcs-green)}
.a-kpi-v.amber{color:var(--gcs-amber)}
.a-kpi-v.red{color:var(--gcs-red)}
.a-kpi-sub{font-size:var(--fs-label);color:var(--c-text-3);font-family:var(--f-mono)}

/* ══ 表格：表头常驻 + 发丝线 + hover 整行提亮 ══ */
.a-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-num)}
.a-table thead th{position:sticky;top:0;z-index:2;background:var(--c-elevated);color:var(--c-text-2);
  font-family:var(--f-ui);font-size:var(--fs-label);font-weight:600;letter-spacing:.5px;
  text-align:left;padding:var(--pad-cell);border-bottom:var(--hair) solid var(--c-border);white-space:nowrap}
.a-table td{padding:var(--pad-cell);border-bottom:var(--hair) solid var(--c-border);color:var(--c-text-2)}
.a-table tbody tr:hover td{background:var(--c-elevated);color:var(--c-text)}
.a-table tbody tr:last-child td{border-bottom:none}
.a-table .mono{font-family:var(--f-mono)}
.a-table .num{font-family:var(--f-mono);text-align:right}
.a-empty{padding:26px var(--pad-panel);text-align:center;color:var(--c-text-3);font-size:var(--fs-ui)}

/* ══ 状态徽标：细边 + 低饱和底，绝不实心色块 ══ */
.a-pill{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;
  border-radius:var(--r-sm);border:var(--hair) solid var(--c-border);background:var(--c-card);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.5px;color:var(--c-text-2);white-space:nowrap}
.a-pill.accent{color:var(--gcs-accent);background:var(--gcs-accent-dim);border-color:color-mix(in srgb,var(--gcs-accent) 42%,transparent)}
.a-pill.green{color:var(--gcs-green);background:color-mix(in srgb,var(--gcs-green) 12%,transparent);border-color:color-mix(in srgb,var(--gcs-green) 42%,transparent)}
.a-pill.red{color:var(--gcs-red);background:color-mix(in srgb,var(--gcs-red) 12%,transparent);border-color:color-mix(in srgb,var(--gcs-red) 42%,transparent)}
.a-pill.amber{color:var(--gcs-amber);background:color-mix(in srgb,var(--gcs-amber) 12%,transparent);border-color:color-mix(in srgb,var(--gcs-amber) 42%,transparent)}
.a-pill.purple{color:var(--gcs-purple);background:color-mix(in srgb,var(--gcs-purple) 12%,transparent);border-color:color-mix(in srgb,var(--gcs-purple) 42%,transparent)}
.a-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ══ 按钮三级：统一 28px / 4px 圆角 / 无阴影 ══ */
.a-btn{height:var(--h-control);padding:0 11px;border-radius:var(--r-md);
  border:var(--hair) solid transparent;background:var(--c-soft-btn);color:var(--c-text-2);
  font-family:var(--f-ui);font-size:var(--fs-ui);font-weight:600;letter-spacing:.3px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.a-btn:hover{background:var(--c-soft-btn-hover);color:var(--c-text)}
.a-btn.primary{background:var(--gcs-accent);border-color:var(--gcs-accent);color:var(--c-bg)}
.a-btn.primary:hover{filter:brightness(1.08);color:var(--c-bg)}
.a-btn.ghost{background:transparent;border-color:var(--c-border)}
.a-btn.ghost:hover{border-color:var(--gcs-accent);color:var(--gcs-accent);background:transparent}
.a-btn.danger{background:transparent;border-color:color-mix(in srgb,var(--gcs-red) 45%,transparent);color:var(--gcs-red)}
.a-btn.danger:hover{background:color-mix(in srgb,var(--gcs-red) 12%,transparent);color:var(--gcs-red)}
.a-btn.sm{height:22px;padding:0 8px;font-size:var(--fs-label)}
.a-btn:disabled{opacity:.5;cursor:not-allowed}
.a-btn-ico{width:var(--h-control);padding:0}

/* ══ 表单 ══ */
.a-field{display:flex;flex-direction:column;gap:4px}
.a-label{font-family:var(--f-ui);font-size:var(--fs-label);letter-spacing:.8px;color:var(--c-text-3)}
.a-input,.a-select,.a-textarea{width:100%;min-height:var(--h-control);
  background:var(--c-surface);border:var(--hair) solid transparent;border-radius:var(--r-md);
  color:var(--c-text);font-family:var(--f-mono);font-size:var(--fs-num);padding:5px 9px;outline:none;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.a-input:focus,.a-select:focus,.a-textarea:focus{border-color:var(--gcs-accent);background:var(--c-card)}
.a-input::placeholder,.a-textarea::placeholder{color:var(--c-text-3)}
.a-textarea{min-height:84px;line-height:1.6;resize:vertical}
.a-row{display:flex;gap:var(--gap);align-items:flex-end}
.a-row>*{flex:1;min-width:0}

/* ══ 浮层 / 弹窗 ══ */
.a-overlay{position:fixed;inset:0;background:var(--c-overlay);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;z-index:400}
.a-overlay.on{display:flex}
.a-modal{background:var(--c-card);border:var(--hair) solid var(--c-border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);width:460px;max-width:94vw;max-height:88vh;overflow:auto;padding:var(--gap-lg)}
.a-modal-hd{font-family:var(--f-ui);font-size:var(--fs-title);font-weight:700;letter-spacing:.6px;
  color:var(--c-text);padding-bottom:8px;margin-bottom:var(--gap);
  border-bottom:var(--hair) solid var(--c-border)}
.a-modal-ft{display:flex;gap:var(--gap-tight);justify-content:flex-end;margin-top:var(--gap-lg)}

/* ══ Toast ══ */
.a-toasts{position:fixed;right:14px;top:14px;z-index:500;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.a-toast{padding:7px 12px;border-radius:var(--r-md);font-family:var(--f-ui);font-size:var(--fs-ui);font-weight:600;
  border:var(--hair) solid var(--c-border);background:var(--c-elevated);color:var(--c-text);
  box-shadow:var(--shadow-lg);animation:a-in var(--dur) var(--ease)}
.a-toast.ok{border-color:color-mix(in srgb,var(--gcs-green) 45%,transparent);color:var(--gcs-green)}
.a-toast.err{border-color:color-mix(in srgb,var(--gcs-red) 45%,transparent);color:var(--gcs-red)}
.a-toast.warn{border-color:color-mix(in srgb,var(--gcs-amber) 45%,transparent);color:var(--gcs-amber)}
@keyframes a-in{from{opacity:0;transform:translateX(10px)}}

/* ══ 其它 ══ */
.a-err{padding:var(--pad-panel);border:var(--hair) solid color-mix(in srgb,var(--gcs-red) 45%,transparent);
  background:color-mix(in srgb,var(--gcs-red) 8%,transparent);border-radius:var(--r-md);
  color:var(--gcs-red);font-family:var(--f-mono);font-size:var(--fs-label);line-height:1.6}
.a-hint{font-size:var(--fs-label);color:var(--c-text-3)}
.a-panel-hd .a-hint{white-space:nowrap}
.a-panel-hd{flex-wrap:wrap}
/* 内容区已由 .a-body 统一滚动，面板内不再套第二层滚动条（否则出现嵌套滚动、行被切） */
.a-panel .a-scroll{overflow:visible}
.a-frame{display:none;flex:1;width:100%;height:100%;border:none;background:var(--c-bg)}
.a-spark{display:flex;align-items:flex-end;gap:3px;height:56px}
.a-spark i{flex:1;background:var(--gcs-accent);opacity:.75;border-radius:1px 1px 0 0;min-height:2px;display:block}
.a-bar-track{flex:1;height:6px;background:var(--c-surface);border-radius:var(--r-sm);overflow:hidden}
.a-bar-fill{height:100%;background:var(--gcs-accent);display:block}
.a-sep{height:1px;background:var(--c-border);margin:var(--gap) 0}

/* 主题切换按钮（三处共用） */
.a-theme-btn{height:var(--h-control);padding:0 10px;border-radius:var(--r-md);
  border:var(--hair) solid var(--c-border);background:var(--c-soft-btn);color:var(--c-text-2);
  font-family:var(--f-ui);font-size:var(--fs-ui);font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.a-theme-btn:hover{border-color:var(--gcs-accent);color:var(--gcs-accent)}

/* 滚动条：细、无圆角，与地面站一致 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--c-elevated);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--c-text-3);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
*:focus-visible{outline:1px solid var(--gcs-accent);outline-offset:1px}
a{color:var(--gcs-accent);text-decoration:none}
a:hover{color:var(--gcs-accent);text-decoration:underline}

/* ══════════════════════════════════════════════════════════════
 * 旧页面形态归一（AI 地面站后台 / 官网后台）
 * ──────────────────────────────────────────────────────────────
 * 这两套后台的 markup 暂不逐行重写，但形态必须服从规范：
 * 微圆角、无阴影、靠明度分层、徽标细边低饱和底、控件 28px。
 * 颜色已由上面的兼容映射接管，这里只收形态。 */
.stat-card,.card,.table-card,.panel,.chart-card,.form-card,.content-card,
.modal-box,.au-modal,.sidebar,.topbar,.nav-link,.stat-box{box-shadow:none!important}
.stat-card,.card,.table-card,.chart-card,.form-card,.content-card,.stat-box{
  border-radius:var(--r-md)!important;border:none!important;background:var(--c-card)!important}
.card-head,.table-header,.panel-title{background:var(--c-elevated)!important;
  border-bottom:var(--hair) solid var(--c-border)!important;border-radius:0!important}
.modal-box,.au-modal,.modal{border-radius:var(--r-lg)!important;
  border:var(--hair) solid var(--c-border)!important;box-shadow:var(--shadow-lg)!important}
.stat-card:hover,.card:hover{transform:none!important;box-shadow:none!important}
/* 徽标：一律细边 + 低饱和底 */
.badge,.au-badge,.tag,.pill{border-radius:var(--r-sm)!important;font-family:var(--f-mono)!important;
  font-size:10.5px!important;letter-spacing:.5px!important;height:20px!important;
  padding:0 7px!important;display:inline-flex!important;align-items:center!important;gap:4px!important}
/* 控件：统一 28px / 4px 圆角 / 无阴影 */
.btn,.gcs-btn,.au-btn,.hdr-btn,.logout-btn,.tab-btn{border-radius:var(--r-md)!important;
  box-shadow:none!important;font-family:var(--f-ui)!important;letter-spacing:.3px!important}
.btn,.gcs-btn,.au-btn,.hdr-btn,.logout-btn{min-height:var(--h-control)!important}
input,select,textarea,.form-input,.form-select,.form-textarea{border-radius:var(--r-md)!important;
  box-shadow:none!important}
/* 表格：发丝线 + 表头分层 + 整行 hover */
.tbl th,table th{background:var(--c-elevated)!important;color:var(--c-text-2)!important;
  border-bottom:var(--hair) solid var(--c-border)!important;font-family:var(--f-ui)!important;
  font-size:var(--fs-label)!important;letter-spacing:.5px!important}
.tbl td,table td{border-bottom:var(--hair) solid var(--c-border)!important;color:var(--c-text-2)!important}
.tbl tbody tr:hover td,table tbody tr:hover td{background:var(--c-elevated)!important;color:var(--c-text)!important}
/* 侧栏当前项：左 2px 色条，不用整块高亮 */
.sb-item.active,.nav-link.active,.sidebar-tab.active{background:var(--c-card)!important;
  border-left:2px solid var(--gcs-accent)!important;color:var(--gcs-accent)!important}
/* 渐变一律去掉：工业界面不用渐变色块 */
.sidebar-logo .icon,.stat-icon{background:var(--gcs-accent-dim)!important;color:var(--gcs-accent)!important}