/* ============================================================
   CCNR Status · 自定义样式
   本文件由 /opt/ccnr_gatus/gen_config.py 注入,请勿手工编辑
   ============================================================ */

/* ---------- 1. 全局直角化 ----------
   Gatus 的所有圆角都源自 --radius 变量或 .rounded* 类,两头一起掐。 */
:root, .dark { --radius: 0 !important; }
[class*="rounded"] { border-radius: 0 !important; }
[style*="border-radius"] { border-radius: 0 !important; }

/* ---------- 2. 品牌配色(取自 CCNR 动画版主图标) ---------- */
:root {
  color-scheme: light;
  --primary: 185 81% 29%;            /* #0E7C86 青 */
  --primary-foreground: 0 0% 100%;
  --ring: 185 81% 29%;
  --border: 190 25% 88%;
  --input: 190 25% 88%;
}
.dark {
  color-scheme: dark;
  --background: 206 49% 10%;         /* #0D1B26 深海军蓝 */
  --card: 206 49% 10%;
  --primary: 186 70% 59%;            /* #4FD1E0 亮青 */
  --primary-foreground: 206 49% 10%;
  --ring: 186 70% 59%;
  --border: 206 35% 20%;
  --input: 206 35% 20%;
  --muted: 206 35% 16%;
  --accent: 206 35% 16%;
  --secondary: 206 35% 16%;
}

/* ---------- 3. 顶部品牌色描边(装饰) ---------- */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0E7C86 0%, #4FD1E0 50%, #0E7C86 100%);
  z-index: 9999;
}

/* ---------- 4. 删除右上角外链图标(GitHub) ---------- */
#social,
a[href="https://github.com/TwiN/gatus"] { display: none !important; }

/* ---------- 5. 页脚改为 CCNR 开发组署名 ---------- */
a[href="https://gatus.io"] { display: none !important; }
footer div:has(> a[href="https://gatus.io"]) { font-size: 0 !important; }
footer div:has(> a[href="https://gatus.io"])::after {
  content: "Maintained by CCNR Development Team";
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* ---------- 6. 深色模式下 logo 反色 ----------
   CCNR 主图标是纯黑描边,放在深色底上会看不见;只在 html.dark 下反色。 */
html.dark img[src^="data:image/svg+xml"] { filter: invert(1) brightness(1.8); }

/* ---------- 7. 排版微调 ---------- */
h1, h2, h3 { letter-spacing: 0.02em; }
.endpoint-group { border-color: hsl(var(--border)); }

/* ---------- 9. 顶部「评估安全性评级」卡片 ----------

   框里的文字来自 /opt/ccnr_gatus/config/rating.yaml —— 那是 ccnr-alertsender
   每轮对账写进去的两个标量(ui.dashboard-heading / ui.dashboard-subheading)，
   对应下面这张框的标题行和正文。CSS 这边只负责"把它画成一个框"。

   「评估安全性评级」这七个字和盾牌图标固定在 CSS 里，所以哪怕 rating.yaml
   一时写不出来，框还在、标题还在，只是标题下面显示的是 Gatus 的英文兜底文案。

   选择器直接落在 Gatus Home 组件的结构上(web/src/views/Home.vue 的编译产物)：

     .dashboard-container > .container > .mb-6        (页头区块)
        ├ div:first-child  (=.flex.items-center)      ← 只取第一个
        │   ├ div:first-child   ← 卡片本体:h1(标题) + p(正文)
        │   └ div               ← 刷新/响应时间两个图标按钮,刻意留在框外
        ├ 通告时间线
        └ 筛选栏

   ⚠ 那两层 `div:first-child` 不能简写成 `div`。`.mb-6` 下面**不止一个** div:
   通告组件和筛选栏各自渲染一个根 div,写成 `.mb-6 > div > div:first-child`
   会把筛选栏的根 div 也一起选上 —— 于是页面上出现第二个「评估安全性评级」,
   而且 `align-items: flex-start` 还会把筛选栏的行内布局改掉。已经踩过一次。

   结构一旦变了这条规则整条不生效,页面退化成一个没有边框的标题加正文 ——
   还能看,但要知道是这边该跟着改。 */
main .dashboard-container > .container > .mb-6 > div:first-child { align-items: flex-start; }

main .dashboard-container > .container > .mb-6 > div:first-child > div:first-child {
  /* 撑满整行减去右侧那两个图标按钮的宽度。不写 flex 的话这个 div 只是个
     content 宽的 flex item,框只有内容那么长,右边空一大截很难看。 */
  flex: 1 1 auto;
  margin-right: 16px;
  border: 1px solid hsl(var(--border));
  border-left: 3px solid #0E7C86;
  background: hsl(var(--card));
  padding: 16px 20px 18px;
}
html.dark main .dashboard-container > .container > .mb-6 > div:first-child > div:first-child {
  border-left-color: #4FD1E0;
}

/* 标题行:盾牌图标 + 「评估安全性评级」 */
main .dashboard-container > .container > .mb-6 > div:first-child > div:first-child::before {
  content: "评估安全性评级";
  display: block;
  margin-bottom: 12px;
  padding-left: 26px;
  min-height: 18px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.22em;
  color: hsl(var(--muted-foreground));
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwRTdDODYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMi41IDQuNSA1LjZ2NS43YzAgNC40IDMuMSA4LjMgNy41IDkuNyA0LjQtMS40IDcuNS01LjMgNy41LTkuN1Y1LjZMMTIgMi41eiIvPjxwYXRoIGQ9Im04LjggMTEuOCAyLjIgMi4yIDQuMy00LjMiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 18px 18px;
}
html.dark main .dashboard-container > .container > .mb-6 > div:first-child > div:first-child::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0RkQxRTAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMi41IDQuNSA1LjZ2NS43YzAgNC40IDMuMSA4LjMgNy41IDkuNyA0LjQtMS40IDcuNS01LjMgNy41LTkuN1Y1LjZMMTIgMi41eiIvPjxwYXRoIGQ9Im04LjggMTEuOCAyLjIgMi4yIDQuMy00LjMiLz48L3N2Zz4=");
}

/* 等级。Gatus 原本给的是 text-4xl(36px),做标题太大,压到 28px */
main .dashboard-container > .container > .mb-6 > div:first-child > div:first-child > h1 {
  font-size: 28px;
  line-height: 1.25;
}

/* 正文。white-space: pre-line 是必须的 —— 这段文字由发送器用 
 分段写进
   YAML,而 <p> 默认会把换行压成一个空格,不设它就变成一长串。 */
main .dashboard-container > .container > .mb-6 > div:first-child > div:first-child > p {
  margin-top: 10px;
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.8;
}

/* ---------- 8. 深浅色自动适配 ----------
   Gatus 前端在 <head> 里内联判断: cookie 有 theme 就用它,否则读
   prefers-color-scheme 跟随系统,并据此增删 <html> 上的 .dark 类。
   本文件所有样式都挂在这个类之下,故无需额外配置。 */