/* ==========================================================================
   设计令牌（Design Tokens）
   视觉体系：阿里云控制台（Alibaba Cloud Console / Next + Teamix）
   ---------------------------------------------------------------
   全部数值来自对 status.aliyun.com 的实测取证（docs/reference/），不是估计：
     · 主蓝 #0064c8       —— 参考站 CSS 中出现 1022 次，是链接与选中态的唯一主色
     · 强调橙 #fe6a00     —— cms-title-bt-scroll 与滚动控件色
     · 状态绿 #23b066     —— cms-title-noEvent 与表格状态标记（success-6）
     · 文字 #333          —— 全站正文色（6371 个元素）；#1a1a1a 仅用于标题层级
     · 圆角 = 0           —— 参考站圆角直方图 0px × 9357，全站直角是这套体系的核心特征
     · 内容内边距 112px   —— 1440 与 1920 两种宽度下均为 112px，无 max-width
     · 字号 12/14/16/20/24/32/44 —— 实测在用字号，12px 为控件与表格基准
   组件层只允许引用语义变量，不允许直接写死十六进制色值。
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- 中性阶（阿里云 G 阶，实测命名） ---------- */
  --g0:  #f7f7f7;
  --g10: #e5e5e5;
  --g20: #d9d9d9;
  --g30: #cccccc;
  --g40: #aaaaaa;
  --g50: #808080;
  --g60: #696969;
  --g70: #333333;
  --g80: #262626;
  --g90: #1a1a1a;

  /* ---------- 承载面 ---------- */
  --bg:          #f9f9f9;   /* 主内容区底色（实测 container） */
  --surface:     #ffffff;
  --surface-2:   #f7f7f7;   /* 表头 / 侧栏 / 说明底 */
  --surface-3:   #f5f5f5;
  --overlay:     rgba(26, 26, 26, .45);

  /* ---------- 深色 chrome（状态页顶栏 / 后台顶栏 / 品牌预览条共用） ----------
     参考站顶栏恒为 #1a1a1a，且两种主题下都不变 —— 它是「外框」，不是承载面。
     单列成令牌，避免状态页与后台各写一份十六进制值后慢慢走散：
     后台「品牌预览」要模拟的那条顶栏，必须与真顶栏同色，否则预览就是在骗人。 */
  --chrome:        #1a1a1a;
  --chrome-text:   #ffffff;
  --chrome-text-2: #d9d9d9;
  --chrome-text-3: #8c8c8c;
  --chrome-line:   rgba(255, 255, 255, .16);
  --chrome-hover:  rgba(255, 255, 255, .10);

  /* ---------- 分隔线 ---------- */
  --line:        #e5e5e5;   /* 单元格边框（实测 thead/tbody） */
  --line-2:      #eaeaea;   /* 表格纵向网格线 */
  --line-3:      #d9d9d9;   /* 下划线 Tab 的整条底边 */
  --border:      var(--line);
  --border-strong: var(--g30);

  /* ---------- 文字 ---------- */
  --text:        var(--g70);
  --text-strong: var(--g90);
  --text-2:      var(--g60);
  --text-3:      var(--g50);
  --text-invert: #ffffff;

  /* ---------- 品牌：阿里云蓝 ---------- */
  --brand:       #0064c8;
  --brand-hover: #0057ad;
  --brand-active: #003263;
  --brand-soft:  #f0f7ff;   /* 选中/悬停底（实测 256 次） */
  --brand-line:  #cae3fd;
  --brand-link:  #1366ec;   /* 状态条「历史事件」链接（实测色）。其余链接统一走 --brand */
  --brand-ring:  rgba(0, 100, 200, .22);
  --on-brand:    #ffffff;

  /* ---------- 强调：阿里云橙（用于「展开/更多」这类前进动作） ---------- */
  --accent:      #fe6a00;
  --accent-hover: #e85f00;

  /* ---------- 状态语义 ----------
     监控域约定：绿=正常 / 橙=降级 / 红=中断 / 蓝=提示（维护） */
  --ok:            #23b066;
  --ok-soft:       #43bf7e;
  --ok-bg:         #ebfff6;
  --ok-line:       #d1f4e1;
  --ok-strong:     #005226;

  --degraded:      #f98e1a;
  --degraded-soft: #ffb96e;
  --degraded-bg:   #fff5eb;
  --degraded-line: #ffe0bd;
  --degraded-strong: #774106;

  --outage:        #e84738;
  --outage-soft:   #f2887e;
  --outage-bg:     #ffeceb;
  --outage-line:   #fdd5d1;
  --outage-strong: #7d1207;

  --maintenance:        #0064c8;
  --maintenance-soft:   #589adb;
  --maintenance-bg:     #f0f7ff;
  --maintenance-line:   #cae3fd;
  --maintenance-strong: #003263;

  --unknown:      #aaaaaa;
  --unknown-bg:   #f7f7f7;

  /* 兼容别名：维护/提示在事件语境下与品牌蓝同源 */
  --help:         #fac31e;
  --help-bg:      #fff7e0;
  --help-line:    #ffe7a1;
  --help-strong:  #806208;

  /* ---------- 矩阵表状态标记（与状态语义同色，单独命名便于统一调色） ---------- */
  --cell-ok:          var(--ok);
  --cell-degraded:    var(--degraded);
  --cell-outage:      var(--outage);
  --cell-maintenance: var(--maintenance);
  --cell-empty:       #e5e5e5;

  /* ---------- 字体 ----------
     实测参考站 34 处声明同一套栈；刻意不使用 Inter（前端规范禁止）。
     数字与代号走等宽，避免可用性百分比在刷新时横向跳动。 */
  --font-sans: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Helvetica,
    Arial, "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Mono", "Roboto Mono",
    Consolas, Menlo, monospace;

  /* ---------- 字号阶梯（实测在用集合：12 / 14 / 16 / 20 / 24 / 32 / 44） ---------- */
  --fs-2xs: 12px;   /* 控件、表格、说明文字 —— 也是全站基准 */
  --fs-xs:  12px;
  --fs-sm:  14px;   /* 下划线 Tab、状态条、说明条 */
  --fs-base: 14px;
  --fs-body: 14px;
  --fs-md:  16px;   /* hero 副标题 */
  --fs-h3:  16px;
  --fs-h2:  20px;
  --fs-xl:  24px;
  --fs-2xl: 32px;
  --fs-hero: 44px;  /* hero 主标题，实测 44px/48px weight 500 */
  --fs-display: var(--fs-hero);

  --lh-tight: 1.15;
  --lh-snug:  1.4;
  --lh-base:  1.5;   /* 14px → 21px，与实测一致 */

  /* ---------- 间距（4 的倍数，实测值直接落格） ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-14: 56px; --sp-20: 80px;

  /* ---------- 圆角：这套体系全站直角 ---------- */
  --r:    0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-xs: 0px;
  --r-note: 2px;      /* 仅「消息条」保留 2px，与参考站一致 */
  --r-full: 999px;    /* 仅头像/圆点类元件 */

  /* ---------- 阴影：控制台几乎不用投影，只保留两级浮层 ---------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .06);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .08);
  --sh-3: 0 4px 16px rgba(0, 0, 0, .12);
  --sh-4: 0 8px 32px rgba(0, 0, 0, .16);

  /* ---------- 动效：参考站只做 0.1s linear 级别的微过渡 ---------- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.7, 0, .84, 0);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 100ms;
  --t-base: 150ms;
  --t-slow: 260ms;

  /* ---------- 布局：全部来自实测几何 ---------- */
  --gutter: 112px;        /* 内容左右内边距，1440/1920 恒为 112px */
  --shell: none;          /* 无 max-width，全幅流式 */
  --shell-pad: var(--gutter);
  --header-h: 64px;       /* 顶栏 */
  --hero-h: 200px;        /* hero 横幅 */
  --strip-h: 40px;        /* 状态条 */
  --sidebar-w: 180px;     /* 类别侧栏 */
  --sidebar-gap: 41px;    /* 侧栏与表格间距 */
  --thead-h: 45px;        /* 表头行高 */
  --row-h: 43px;          /* 数据行高 */
  --group-gap: 5px;       /* 类别分组间隔行 */
  --col-day: 70px;        /* 日期列宽（1440 实测） */
  --col-status: 170px;
  --col-code: 70px;
  --col-tail: 60px;
  --col-name: 200px;

  --z-sticky: 40;
  --z-drawer: 60;
  --z-modal: 80;
  --z-tooltip: 100;
  --z-toast: 120;
}

/* ==========================================================================
   深色主题
   参考站只提供浅色（body.theme-light）。这里是同一套语义变量的深色派生，
   保持色彩角色不变：主蓝提亮、状态色提亮、直角与网格结构完全保留。
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --g0:  #1f1f1f;
  --g10: #333333;
  --g20: #3d3d3d;
  --g30: #4d4d4d;
  --g40: #6b6b6b;
  --g50: #8c8c8c;
  --g60: #a6a6a6;
  --g70: #d9d9d9;
  --g80: #ececec;
  --g90: #f5f5f5;

  --bg:        #141414;
  --surface:   #1f1f1f;
  --surface-2: #262626;
  --surface-3: #2b2b2b;
  --overlay:   rgba(0, 0, 0, .62);

  --line:      #333333;
  --line-2:    #2e2e2e;
  --line-3:    #3d3d3d;
  /* 深色下显式重申语义别名，避免依赖 :root 的 var() 间接指向 */
  --border:        #333333;
  --border-strong: #4d4d4d;

  /* 深色下顶栏刻意保持原值：它必须比 --bg(#141414) 更深一档，才继续读作「外框」 */
  --chrome:        #1a1a1a;
  --chrome-text:   #ffffff;
  --chrome-text-2: #d9d9d9;
  --chrome-text-3: #8c8c8c;
  --chrome-line:   rgba(255, 255, 255, .16);
  --chrome-hover:  rgba(255, 255, 255, .10);

  --text:        #d9d9d9;
  --text-strong: #f5f5f5;
  --text-2:      #a6a6a6;
  --text-3:      #8c8c8c;
  --text-invert: #1a1a1a;

  --brand:       #2a7dd1;
  --brand-hover: #4a94e0;
  --brand-active: #589adb;
  --brand-soft:  #0f2438;
  --brand-line:  #1d4468;
  --brand-link:  #4a94e0;
  --brand-ring:  rgba(42, 125, 209, .3);
  --on-brand:    #ffffff;

  --accent:      #ff7d29;
  --accent-hover: #ff9348;

  --ok:            #2fbf76;
  --ok-soft:       #43bf7e;
  --ok-bg:         #0d2418;
  --ok-line:       #1b4630;
  --ok-strong:     #7ed9a6;

  --degraded:      #f7a854;
  --degraded-soft: #ffb96e;
  --degraded-bg:   #2b1f0e;
  --degraded-line: #4a3517;
  --degraded-strong: #ffcd8f;

  --outage:        #f2635f;
  --outage-soft:   #f2887e;
  --outage-bg:     #2c1616;
  --outage-line:   #4d2423;
  --outage-strong: #f89c98;

  --maintenance:        #589adb;
  --maintenance-soft:   #90c0ef;
  --maintenance-bg:     #0f2338;
  --maintenance-line:   #1d4468;
  --maintenance-strong: #a8cff5;

  --unknown:    #6b6b6b;
  --unknown-bg: #262626;

  --help:        #fac31e;
  --help-bg:     #2b2410;
  --help-line:   #4a3f1a;
  --help-strong: #ffdd75;

  --cell-empty: #333333;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .55);
  --sh-3: 0 4px 16px rgba(0, 0, 0, .6);
  --sh-4: 0 8px 32px rgba(0, 0, 0, .7);
}

/* 主题切换时给承载面一个短过渡，避免生硬闪变 */
html.theme-anim,
html.theme-anim * {
  transition: background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out) !important;
}

/* ==========================================================================
   基础重置
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* 关键：本项目大量面板用 display:flex/grid 布局，作者样式会覆盖 UA 的
   [hidden]{display:none}，导致 hidden 属性彻底失效（弹窗/抽屉在关闭态仍然可见）。
   这里显式兜底，让 hidden 语义在任何组件上都成立。 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, p, figure, dl, dd, dt { margin: 0; }
h1, h2, h3, h4 { line-height: var(--lh-snug); font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* 焦点环用品牌蓝的实心方框，贴合直角体系 */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

::selection { background: var(--brand-ring); }

/* ==========================================================================
   栅格容器：全幅 + 固定 112px 内边距（实测 1440 / 1920 一致，无 max-width）
   ========================================================================== */
.shell {
  width: 100%;
  padding-inline: var(--shell-pad);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.muted { color: var(--text-2); }
.mono { font-family: var(--font-mono); font-size: .95em; }

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--sp-4);
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  background: var(--brand);
  color: var(--on-brand);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

/* 滚动条：控制台风格，方形滑块 */
* { scrollbar-width: thin; scrollbar-color: var(--g30) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--surface-2); }
*::-webkit-scrollbar-thumb { background: var(--g30); }
*::-webkit-scrollbar-thumb:hover { background: var(--g40); }

/* ==========================================================================
   动效降级：尊重系统「减少动态效果」偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.theme-anim, html.theme-anim * { transition: none !important; }
}

/* ==========================================================================
   响应式断点：沿用参考站在用的一组（320 / 480 / 720 / 990 / 1200 / 1500）
   小屏把 112px 内边距收敛到 16–24px，并把侧栏折成横排。
   ========================================================================== */
/* 参考站实测：1440 与 1920 视口下内容内边距恒为 112px，且整站没有 max-width。
   所以 112px 一直保留到 1200px 才收敛。这里原先有一条 1500px 断点，会在 1440
   视口把 gutter 压成 48px —— 与实测证据不符，故移除。 */
@media (max-width: 1200px) {
  :root { --gutter: 48px; --fs-hero: 36px; }
}
@media (max-width: 990px) {
  :root { --gutter: 24px; --fs-hero: 30px; --hero-h: 168px; }
}
@media (max-width: 720px) {
  /* 列宽也要收：200+170=370px 会占满 390px 视口的内容宽（358px），
     日期列再横向滚动也滑不出来。配合 app.css 里「只冻产品列」的规则。 */
  :root { --gutter: 16px; --fs-hero: 26px; --hero-h: 148px; --header-h: 56px;
          --col-name: 128px; --col-status: 112px; }
}