/* ============================================================
   Monagent UI Theme — 单一事实源
   规范见 docs/design/ui-design-system.md。品牌色已从 scmcc 控制台的 design-tokens.css
   （靛蓝+青）分叉为 钴蓝+珊瑚；scmcc 是否跟随另行决定，期间两边品牌色不一致是已知状态。
   页面只允许引用 --color-* / --p-* / --brand-* token，禁止裸色值。
   ============================================================ */

/* ==================== Layer 1: Primitive ==================== */
:root {
  color-scheme: light;

  /* Brand — 钴蓝（cobalt）。主色 600；对比度与用法见 docs/design/ui-design-system.md */
  --p-brand-50:  #edf2ff;
  --p-brand-100: #dbe4ff;
  --p-brand-200: #bac8ff;
  --p-brand-300: #91a7ff;
  --p-brand-400: #748ffc;
  --p-brand-500: #5c7cfa;
  --p-brand-600: #3b5bdb;
  --p-brand-700: #2f49b5;
  --p-brand-800: #233a94;
  --p-brand-900: #16215c;
  --p-brand-950: #0c1440;

  /* Accent — 珊瑚（暖色对冲）。只用于品牌位置，不进状态语义（状态的橙/红另有 warning/danger） */
  --p-accent-100: #ffe3da;
  --p-accent-400: #ff9478;
  --p-accent-500: #ff7a59;
  --p-accent-600: #f4623c;
  --p-accent-700: #c2410c;

  /* Status */
  --p-success-50:#ecfdf5; --p-success-100:#d1fae5; --p-success-600:#059669;
  --p-success-700:#047857; --p-success-800:#065f46;
  --p-warning-50:#fffbeb; --p-warning-100:#fef3c7; --p-warning-600:#d97706;
  --p-warning-700:#b45309; --p-warning-800:#92400e;
  --p-danger-50:#fef2f2;  --p-danger-100:#fee2e2;  --p-danger-600:#dc2626;
  --p-danger-700:#b91c1c; --p-danger-800:#991b1b;
  --p-info-50:#f0f9ff;    --p-info-100:#e0f2fe;    --p-info-600:#0284c7;
  --p-info-700:#0369a1;   --p-info-800:#075985;

  /* Neutral — slate 冷灰 */
  --p-slate-50:#f8fafc;  --p-slate-100:#f1f5f9;  --p-slate-200:#e2e8f0;
  --p-slate-300:#cbd5e1; --p-slate-400:#94a3b8;  --p-slate-500:#64748b;
  --p-slate-600:#475569; --p-slate-700:#334155;  --p-slate-800:#1e293b;
  --p-slate-900:#0f172a; --p-slate-950:#020617;

  /* Geometry */
  --p-radius-sm:4px; --p-radius-md:6px; --p-radius-lg:8px; --p-radius-xl:10px; --p-radius-2xl:12px;

  /* Shadows（品牌调，极轻） */
  --p-shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --p-shadow-md:0 2px 8px rgba(0,0,0,.08);
  --p-shadow-lg:0 4px 16px rgba(0,0,0,.10);

  /* Motion */
  --p-motion-fast:.15s ease;
  --p-motion-base:.2s cubic-bezier(.4,0,.2,1);
  --p-motion-slow:.3s ease;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);

  /* Typography */
  --p-font-sans:"IBM Plex Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --p-font-mono:"IBM Plex Mono","JetBrains Mono","SFMono-Regular",Consolas,Menlo,monospace;
  --p-fs-xs:11px; --p-fs-sm:13px; --p-fs-md:14px; --p-fs-lg:18px; --p-fs-xl:22px;

  /* 语义：亮色（默认） */
  --color-brand:        var(--p-brand-600);
  --color-brand-strong: var(--p-brand-700);
  --color-brand-soft:   var(--p-brand-50);
  --color-brand-light:  var(--p-brand-500);
  /* 品牌淡底：给表格行悬停/选中用。比 brand-50 更浅一档，悬停时才看得出变化，
     又不至于把整行染成明显的蓝。 */
  --color-brand-tint:   color-mix(in srgb, var(--p-brand-600) 6%, var(--color-surface));
  --color-accent:       var(--p-accent-500);

  --color-success:      var(--p-success-600);
  --color-success-soft: var(--p-success-50);
  --color-success-text: var(--p-success-800);
  --color-warning:      var(--p-warning-600);
  --color-warning-soft: var(--p-warning-50);
  --color-warning-text: var(--p-warning-800);
  --color-danger:       var(--p-danger-600);
  --color-danger-soft:  var(--p-danger-50);
  --color-danger-text:  var(--p-danger-800);
  --color-info:         var(--p-info-600);
  --color-info-soft:    var(--p-info-50);
  --color-info-text:    var(--p-info-800);

  --color-text-default: var(--p-slate-800);
  --color-text-strong:  var(--p-slate-900);
  --color-text-muted:   var(--p-slate-600);
  --color-text-faint:   var(--p-slate-400);
  --color-text-inverse: #ffffff;

  /* 远程运维全屏水印的**基色**。
     透明度不在这里给：el-watermark 走 canvas，ctx.fillStyle 不接受 color-mix/var()，
     必须由前端解析出具体色值后自己叠加 alpha（见 frontend/src/lib/theme.js）。
     所以这里只定色相与明度档位；暗色模式落地后改这一行即可。 */
  --p-watermark-text: var(--p-slate-600);

  --color-surface:      #ffffff;
  --color-surface-alt:  var(--p-slate-50);
  --color-surface-hover:var(--p-slate-100);
  --color-surface-2:    var(--p-slate-100);
  /* 页面基板（内容区底）：比卡片低一档，卡片靠边框+阴影浮起 */
  --color-page:         var(--p-slate-100);
  --color-page-2:       var(--p-slate-50);

  --color-border-default: var(--p-slate-300);
  --color-border-subtle:  var(--p-slate-100);
  --color-border-strong:  color-mix(in srgb, var(--color-brand-strong) 24%, transparent);

  --color-ok-bg:   var(--color-success-soft);  --color-ok-fg: var(--color-success-text);
  --color-warn-bg: var(--color-warning-soft);  --color-warn-fg: var(--color-warning-text);
  --color-err-bg:  var(--color-danger-soft);   --color-err-fg: var(--color-danger-text);
  --color-info-bg: var(--color-info-soft);     --color-info-fg: var(--color-info-text);
  --color-muted-bg:var(--p-slate-100);         --color-muted-fg: var(--p-slate-600);

  --color-link: var(--color-brand);
  --color-focus-ring: color-mix(in srgb, var(--color-brand) 25%, transparent);

  /* 品牌渐变：全站品牌视觉元素唯一入口。蓝为主，珊瑚只作点缀端点（蓝橙直接混合会出灰紫）。
     最亮端用 brand-600（白字对比 5.67:1）；不用 brand-500，其白字仅 3.67:1，低于 4.5 要求。 */
  --brand-grad: linear-gradient(135deg, var(--p-brand-600), var(--p-brand-700) 60%, var(--p-brand-800));
  --brand-grad-warm: linear-gradient(135deg, var(--p-accent-400), var(--p-accent-500) 60%, var(--p-accent-600));
  /* 深底上的品牌渐变（侧栏 logo 描边/激活条）：提亮保证对比，蓝→珊瑚 */
  --brand-grad-on-dark: linear-gradient(180deg, var(--p-brand-300), var(--p-accent-400));
  /* 深色英雄区（登录/安装/404 左栏）：纯蓝系，底部更深 */
  --brand-grad-hero: linear-gradient(160deg, var(--p-brand-700), var(--p-brand-900) 60%, var(--p-brand-950));

  /* ── 质感层：还原基准见 docs/design/ui-design-system.md §7.0 ────────────
     数值与旧版 internal/http/web/css/app.css 的 :root 逐项等价：
       旧 --shadow-xs/sm → --p-shadow-sm；md → --p-shadow-md；lg/xl → --p-shadow-lg
       旧 --shadow-glow  → --color-focus-ring
     **卡片不用阴影**（旧版 .card 是 box-shadow:none + 1px 边框），只有弹窗/浮层用。 */
  --shadow-xs: var(--p-shadow-sm);
  --shadow-sm: var(--p-shadow-sm);
  --shadow-md: var(--p-shadow-md);
  --shadow-lg: var(--p-shadow-lg);
  --shadow-xl: var(--p-shadow-lg);
  --shadow-glow: var(--color-focus-ring);
  /* 卡片：只描边不投影，靠边框与底色差浮起 */
  --card-border: 1px solid var(--color-border-default);
  --card-radius: var(--p-radius-xl);
  --card-padding: var(--sp-6, 24px);
  /* 状态标签圆角。旧版 app.css 用 --badge-radius 定义 .badge，但**文件末尾又用
     `--p-radius-sm` 覆盖了一遍**，所以旧版实际渲染值是 4px 而不是这里的 3px。
     保留 3px 是因为旧前端仍在用这个变量；新前端一律走 element-theme.css 的 4px。 */
  --badge-radius: 3px;
  --sidebar-width: 228px;
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;

  /* 品牌渐变：全站品牌视觉元素唯一入口。蓝为主，珊瑚只作点缀端点（蓝橙直接混合会出灰紫）。
     最亮端用 brand-600（白字对比 5.67:1）；不用 brand-500，其白字仅 3.67:1，低于 4.5 要求。 */
  --panel-navy-2:      color-mix(in srgb, var(--p-brand-950) 90%, #000 10%);
  --panel-navy-border: color-mix(in srgb, var(--p-brand-400) 18%, transparent);
  --panel-navy-text:   var(--p-slate-200);
  --panel-navy-muted:  color-mix(in srgb, var(--p-slate-300) 78%, var(--p-brand-300) 22%);

  /* 深底控制台（日志面板）：亮暗主题下都是深底，故这几个 token 不分主题 */
  --logview-bg:    var(--panel-navy);
  --logview-fg:    var(--p-slate-200);
  --logview-muted: var(--p-slate-400);
  --logview-info:  #38bdf8;
  --logview-warn:  #fbbf24;
  --logview-error: #f87171;
}

/* ==================== 动画（统一入口）====================
   所有渐变/光晕动画只用这里的 keyframes 与 --brand-* / --p-* 变量，页面不自带配色。
   系统开启「减少动态效果」或面板开启低功耗（html.reduce-fx）时一律停止。 */
@keyframes brand-flow  { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes brand-drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2.5%,-3%,0) scale(1.06); } }
@keyframes brand-glow  { 0%,100% { opacity: .55; } 50% { opacity: .95; } }
.fx-flow  { background-size: 220% 220%; animation: brand-flow 14s ease-in-out infinite; }
.fx-drift { animation: brand-drift 18s ease-in-out infinite; will-change: transform; }
.fx-glow  { animation: brand-glow 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fx-flow, .fx-drift, .fx-glow { animation: none !important; } }
html.reduce-fx .fx-flow, html.reduce-fx .fx-drift, html.reduce-fx .fx-glow { animation: none !important; }

/* 氛围层光晕：登录、安装向导、404、通知页共用（都有 .bg）。蓝为主，右下一点珊瑚。 */
.bg::before, .bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.bg::before { width: 560px; height: 560px; left: -140px; top: -160px; background: color-mix(in srgb, var(--color-brand) 18%, transparent); animation: brand-drift 18s ease-in-out infinite; }
.bg::after  { width: 480px; height: 480px; right: -140px; bottom: -180px; background: color-mix(in srgb, var(--color-accent) 14%, transparent); animation: brand-drift 22s ease-in-out infinite reverse; }
@media (prefers-reduced-motion: reduce) { .bg::before, .bg::after { animation: none; } }
html.reduce-fx .bg::before, html.reduce-fx .bg::after { display: none; }

/* ==================== 兼容别名（theme.css 自身组件引用） ==================== */
:root {
  --font-xs: var(--p-fs-xs);
  --font-sm: var(--p-fs-sm);
  --text-primary: var(--color-text-strong);
  --radius: var(--p-radius-md);
  --shadow-sm: var(--p-shadow-sm);
}

/* ==================== 基础 ==================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--color-surface-alt);color:var(--color-text-default);
  font:var(--p-fs-md)/1.6 var(--p-font-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.mono{font-family:var(--p-font-mono);font-variant-numeric:tabular-nums}
::selection{background:color-mix(in srgb, var(--color-brand) 25%, transparent)}

/* 细滚动条 */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:var(--color-border-default);border-radius:4px}
*::-webkit-scrollbar-track{background:transparent}

/* ==================== 组件 ==================== */

.btn{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:.5625rem 1rem;border:1px solid var(--color-border-default);border-radius:var(--p-radius-md);
  background:var(--color-surface);color:var(--color-text-default);
  font:500 var(--p-fs-sm)/1 var(--p-font-sans);cursor:pointer;user-select:none;text-decoration:none;
  transition:background-color var(--p-motion-fast),border-color var(--p-motion-fast),color var(--p-motion-fast);
}
.btn:hover{border-color:var(--color-brand);color:var(--color-brand)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-focus-ring)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn[hidden]{display:none}

.btn-primary{background:var(--color-brand);border-color:var(--color-brand);color:#fff}
.btn-primary:hover{background:var(--color-brand-strong);border-color:var(--color-brand-strong);color:#fff}

.btn-ghost{border-color:transparent;background:transparent;color:var(--color-text-muted)}
.btn-ghost:hover{color:var(--color-brand);background:var(--color-brand-soft)}

.btn-sm{padding:.375rem .625rem;font-size:var(--p-fs-xs)}

.field{display:grid;gap:6px}
.field+.field,.field+.grid2,.grid2+.field{margin-top:var(--p-fs-lg)}
.field-label{
  font:500 var(--p-fs-sm)/1.4 var(--p-font-sans);color:var(--color-text-muted);
  transition:color var(--p-motion-fast);
}
.field:focus-within .field-label{color:var(--color-brand)}
.field-hint{font-size:var(--p-fs-xs);color:var(--color-text-faint)}
.field-hint.is-error{color:var(--color-danger)}

.input,.select,.textarea{
  width:100%;padding:.5625rem .6875rem;
  border:1px solid var(--color-border-default);border-radius:var(--p-radius-md);
  background:var(--color-surface);color:var(--color-text-strong);
  font:var(--p-fs-md)/1.4 var(--p-font-sans);
  transition:border-color var(--p-motion-fast),box-shadow var(--p-motion-fast);
}
.input::placeholder{color:var(--color-text-faint)}
.input:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px var(--color-focus-ring)}
.input-static{
  padding:.5625rem .6875rem;border:1px solid var(--color-border-subtle);border-radius:var(--p-radius-md);
  background:var(--color-surface-alt);color:var(--color-text-muted);
  font:var(--p-fs-sm)/1.5 var(--p-font-mono);font-variant-numeric:tabular-nums;word-break:break-all;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--p-fs-lg)}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:var(--p-radius-sm);
  /* 标签以中文/状态词为主，用无衬线体；等宽只留给 .badge-mono（哈希/ID 类） */
  font:500 var(--p-fs-xs)/1.4 var(--p-font-sans);font-variant-numeric:tabular-nums;
  vertical-align:middle;
  border:1px solid var(--color-border-default);color:var(--color-text-muted);
  background:var(--color-surface);
}
.badge-mono{font-family:var(--p-font-mono)}
.badge[hidden]{display:none}
.badge-success{color:var(--color-success-text);border-color:transparent;background:var(--color-ok-bg)}
.badge-danger{color:var(--color-err-fg);border-color:transparent;background:var(--color-err-bg)}
.badge-warning{color:var(--color-warn-fg);border-color:transparent;background:var(--color-warn-bg)}
.badge-info{color:var(--color-info-fg);border-color:transparent;background:var(--color-info-bg)}

.alert{
  display:flex;align-items:flex-start;gap:8px;
  padding:.625rem .875rem;border-radius:var(--p-radius-md);
  font-size:var(--p-fs-sm);border:1px solid transparent;
}
.alert[hidden]{display:none}
.alert-danger{background:var(--color-err-bg);border-color:transparent;color:var(--color-err-fg)}
.alert-success{background:var(--color-ok-bg);border-color:transparent;color:var(--color-ok-fg)}

.kv{border-top:1px solid var(--color-border-subtle)}
.kv-row{
  display:grid;grid-template-columns:minmax(88px,120px) 1fr;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--color-border-subtle);
}
.kv-key{font:500 var(--p-fs-xs)/1.9 var(--p-font-sans);color:var(--color-text-muted)}
.kv-val{font:500 var(--p-fs-sm)/1.7 var(--p-font-mono);font-variant-numeric:tabular-nums;color:var(--color-text-strong);word-break:break-all}

/* ═══════════════════════════════════════════════════════════════
   Form controls：全局美化（checkbox / radio / select）
   免改结构：直接作用于原生控件，所有页面/表单自动生效
   ═══════════════════════════════════════════════════════════════ */

/* 下拉箭头（随主题换色，用 token 驱动，FOUC 安全） */
:root {
  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}select.form-select, select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 11px 7px;
  padding-right: 1.9rem !important;
  cursor: pointer;
}
select:hover, .form-select:hover { border-color: var(--color-border-strong); }
select:focus-visible, .form-select:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent);
}

/* 勾选框/单选框：统一 16px，选中用品牌色，聚焦有环 */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: none;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  background: var(--color-surface);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--color-brand); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--color-brand);
  border-color: var(--color-brand);
}
input[type="checkbox"]:checked::after {
  content: "";
  width: .5rem; height: .28rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
input[type="radio"]:checked::after {
  content: "";
  width: .34rem; height: .34rem;
  border-radius: 50%;
  background: #fff;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 25%, transparent);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

/* 单选卡片（radiocard）：整卡可点、选中描边+浅底 */
.choice-group { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.choice-card {
  position: relative;
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .625rem .75rem;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.choice-card:hover { border-color: var(--color-brand); }
.choice-card input { margin-top: .1rem; }
.choice-card:has(input:checked) {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 6%, var(--color-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 22%, transparent);
}
.choice-card .cc-title { font-size: var(--font-sm); font-weight: 600; color: var(--text-primary); }
.choice-card .cc-desc { font-size: var(--font-xs); color: var(--color-text-muted); margin-top: .125rem; }

/* 分段选择（2–4 项互斥，如 协议 TCP/RTU、模式 local/reverse） */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); border-radius: 8px; }
.seg > label { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 6px; cursor: pointer;
  font-size: var(--font-xs); color: var(--color-text-muted); }
.seg > label:has(input:checked) { background: var(--color-surface); color: var(--text-primary); box-shadow: var(--p-shadow-sm); font-weight: 600; }
.seg input { display: none; }