/* ============================================================
   Monagent UI Theme — 单一事实源
   Token 值与 scmcc 控制台 (public/console/assets/css/design-tokens.css)
   完全对齐：同 Primitive、同 Semantic、同亮暗双主题。
   页面只允许引用 --color-* / --p-* 语义 token，禁止裸色值。
   ============================================================ */

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

  /* Brand — 靛蓝（indigo；主色 600 与白字对比 ≈7.3:1） */
  --p-brand-50:  #eef2ff;
  --p-brand-100: #e0e7ff;
  --p-brand-200: #c7d2fe;
  --p-brand-300: #a5b4fc;
  --p-brand-400: #818cf8;
  --p-brand-500: #6366f1;
  --p-brand-600: #4338ca;
  --p-brand-700: #3730a3;
  --p-brand-800: #312e81;
  --p-brand-900: #1e1b4b;

  /* Accent — 青色点缀 */
  --p-accent-400: #22d3ee;
  --p-accent-500: #06b6d4;
  --p-accent-600: #0891b2;

  /* 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);
  --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;

  --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);

  /* 深色面板（左栏视觉区）：取品牌同族深蓝，避免与内容区品牌蓝“两种蓝” */
  --panel-navy:        color-mix(in srgb, var(--p-brand-900) 68%, #0b0a1a 32%);
  --panel-navy-border: color-mix(in srgb, var(--p-brand-400) 16%, 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;
}

/* ==================== 暗色主题 ==================== */
[data-theme="dark"] {
  color-scheme: dark;

  --color-brand:        var(--p-brand-500);
  --color-brand-strong: var(--p-brand-400);
  --color-brand-soft:   color-mix(in srgb, var(--color-brand) 18%, transparent);
  --color-brand-light:  var(--p-brand-400);
  --color-accent:       var(--p-accent-400);

  --color-success:      #059669; --color-success-soft: rgba(5,150,105,.22); --color-success-text:#34d399;
  --color-warning:      #d97706; --color-warning-soft: rgba(217,119,6,.22); --color-warning-text:#fbbf24;
  --color-danger:       #dc2626; --color-danger-soft:  rgba(220,38,38,.22);  --color-danger-text:#f87171;
  --color-info:         #0284c7; --color-info-soft:    rgba(2,132,199,.22);  --color-info-text:#38bdf8;

  --color-text-default: var(--p-slate-200);
  --color-text-strong:  var(--p-slate-100);
  --color-text-muted:   var(--p-slate-400);
  --color-text-faint:   var(--p-slate-500);
  --color-text-inverse: var(--p-slate-900);

  --color-surface:       color-mix(in srgb, var(--p-brand-900) 28%, #07050a 72%);
  --color-surface-alt:   color-mix(in srgb, var(--p-brand-900) 18%, #06040a 82%);
  --color-page:          color-mix(in srgb, var(--p-brand-900) 18%, #06040a 82%);
  --color-page-2:        color-mix(in srgb, var(--p-brand-900) 22%, #05030a 78%);
  --color-surface-hover: color-mix(in srgb, var(--p-brand-800) 22%, #0c0814 78%);
  --color-surface-2:     color-mix(in srgb, var(--p-brand-800) 14%, #0a0710 86%);

  --color-border-default: color-mix(in srgb, var(--p-brand-800) 32%, #151025 68%);
  --color-border-subtle:  color-mix(in srgb, var(--p-brand-800) 16%, #0e0a18 84%);
  --color-border-strong:  color-mix(in srgb, var(--color-brand) 20%, transparent);

  --color-muted-bg: rgba(71,85,105,.4);
  --color-muted-fg: var(--p-slate-300);
  --color-focus-ring: color-mix(in srgb, var(--color-brand) 35%, transparent);
}

/* ==================== 基础 ==================== */
*,*::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);
  font:500 var(--p-fs-xs)/1.4 var(--p-font-mono);
  border:1px solid var(--color-border-default);color:var(--color-text-muted);
  background:var(--color-surface);
}
.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>");
}
[data-theme="dark"] {
  --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='%2394a3b8' 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; }