/* 汇总页（dg-）/ 历史页（hs-）/ Agent 接入页（ag-）/ 管理页（ad-）的专有样式。
   基础类（.card .btn .badge .light-* .banner .tabs .table 等）由 app.css 定义；颜色一律走变量，深色自动适配。 */

:root {
  /* 色块条用固定色相，浅/深色下都靠文字（绿/黄/红/缺/假/稿）保证可读，不只靠颜色 */
  --hs-green: #2e9e5b;
  --hs-yellow: #e0a100;
  --hs-red: #d64545;
  --hs-grey: #9aa3b2;
  --hs-on-green: #ffffff;
  --hs-on-yellow: #1d1600;
  --hs-on-red: #ffffff;
}

/* ====================================================== 汇总页 */
.dg { min-width: 0; }
.dg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dg-row + .dg-row { margin-top: 10px; }
.dg-controls { padding: 12px 14px; }
.dg-weeknav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dg-weeklabel { padding: 0 4px; }
.dg-field { display: inline-flex; align-items: center; gap: 6px; }
.dg-field .select { width: auto; min-width: 120px; }
.dg-field .label { white-space: nowrap; }
.dg-levels { max-width: 100%; overflow-x: auto; }
.dg-levels button { white-space: nowrap; }
.dg-lv-name { font-weight: 400; }
.dg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.dg-menu { position: relative; display: inline-block; }
.dg-menu-pop {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 250px; max-width: calc(100vw - 32px);
  max-height: 60vh; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); padding: 6px; text-align: left;
}
.dg-menu-pop[hidden] { display: none; }
/* app.css 的 .btn 等显式 display 会盖过 UA 的 [hidden]，页面内统一兜底 */
.dg [hidden], .hs [hidden], .ag [hidden], .ad [hidden] { display: none !important; }
.dg-menu-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; text-align: left; font: inherit; color: var(--fg);
  background: none; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; text-decoration: none;
}
.dg-menu-item:hover:not(:disabled) { background: var(--muted-bg); }
.dg-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
.dg-menu-item[aria-current="true"] { background: var(--info-bg); }
.dg-menu-check { display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer; border-top: 1px solid var(--border); margin-top: 4px; }
.dg-menu-note { padding: 6px 10px; }
.dg-ver.sel > .dg-menu-item { background: var(--info-bg); }
.dg-ver-group { display: flex; flex-wrap: wrap; align-items: center; }
.dg-ver-group > .dg-ver { flex: 1 1 0; min-width: 0; }
.dg-ver-sub { width: 100%; padding-left: 14px; border-left: 2px solid var(--border); margin-left: 8px; }
.dg-ver-sub[hidden] { display: none; }

.dg-statusbar { padding: 10px 14px; margin-bottom: 12px; }
.dg-stat { white-space: nowrap; }
.dg-warnings { margin: 8px 0 0; padding-left: 20px; color: var(--warn); }
.dg-banners .banner { margin-bottom: 10px; }
.dg-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary); border-right-color: transparent; animation: dg-rot 0.9s linear infinite; flex: none; }
@keyframes dg-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dg-spin { animation: none; } }

.dg-body { min-width: 0; }
.dg-editbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dg-l0-line { display: flex; align-items: flex-start; gap: 10px; }
.dg-l0-text { font-size: 1.25rem; font-weight: 600; line-height: 1.5; margin: 0; }
.dg-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dg-bullets li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 10px; background: var(--card-2); border-radius: 6px; }
.dg-bullet-text { flex: 1 1 200px; min-width: 0; }
.dg-refs { display: inline-flex; flex-wrap: wrap; gap: 2px; }

/* 标题层级（读屏）：隐藏的 h1 → 区块 h2 → 项目 h3 → 小标题 h4，不跳级。样式随标签下移；全局 h2 有 line-height: 1.35，这里取回原先 h3 继承来的行高，外观不变 */
.dg-sec h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 8px; line-height: inherit; }
.dg-sec h3 { margin: 12px 0 6px; font-size: 0.98rem; }
.dg-sec h4 { margin: 8px 0 4px; font-size: 0.88rem; color: var(--muted); }
.dg-statusline { font-weight: 600; margin: 0 0 6px; }
.dg-compare { margin: 6px 0 0; padding-left: 20px; }
.dg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dg-top3 { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.dg-issue { padding: 8px 10px; border-left: 3px solid var(--border); background: var(--card-2); border-radius: 0 6px 6px 0; }
.dg-issue.sev-3 { border-left-color: var(--err); }
.dg-issue.sev-2 { border-left-color: var(--warn); }
.dg-issue.decision { border-left-color: var(--primary); }
.dg-issue-text { font-weight: 600; }
.dg-issue-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.dg-detail { margin-top: 4px; color: var(--muted); }
.dg-detail summary { cursor: pointer; }
.dg-anomaly { padding: 6px 10px; background: var(--card-2); border-radius: 6px; }
.dg-omitted { margin: 8px 0 0; }
.dg-jump { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.dg-lights { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; }
.dg-lightchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-2); }
.dg-proj { padding: 8px 0 4px; border-top: 1px dashed var(--border); }
.dg-proj:first-of-type { border-top: 0; }
.dg-point.pri-3 { color: var(--muted); }
.dg-cmp p { margin: 4px 0; }

.dg-slide h2 { font-size: 1.05rem; margin-bottom: 6px; line-height: inherit; }
.dg-slide h3 { font-size: 0.83em; margin: 1.67em 0; } /* 幻灯片里的「异常」小标题：原先是浏览器默认的 h5（0.83em / 1.67em），直接挂在幻灯片标题 h2 下，所以是 h3；下一条在它之后，同级选择器靠次序胜出 */
.dg-panel h3 { font-size: 1em; margin: 1.33em 0; } /* 项目面板的标题：原先是浏览器默认的 h4（1em / 1.33em） */
.dg-slide-no { color: var(--muted); font-variant-numeric: tabular-nums; }
.dg-panel { padding: 8px 10px; background: var(--card-2); border-radius: 6px; margin-bottom: 8px; }
.dg-l4-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.dg-l1-edit { display: flex; flex-direction: column; gap: 10px; }
.dg-l1-row { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-2); }
.dg-l1-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dg-l1-top .select { width: auto; min-width: 90px; }

/* ====================================================== 历史页 */
.hs-pane { min-width: 0; }
.hs-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin-bottom: 12px; }
.hs-field { display: flex; flex-direction: column; gap: 3px; min-width: 130px; }
.hs-field .label { font-size: 0.85rem; color: var(--muted); }
.hs-more { margin-top: 10px; }
.hs-bar { width: 80px; margin-top: 4px; }
.hs-subtitle { margin: 16px 0 8px; }

.hs-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.hs-cell {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 34px; height: 44px; padding: 2px 4px;
  border: 2px solid transparent; border-radius: 6px; font: inherit; cursor: pointer; background: var(--muted-bg); color: var(--fg);
}
.hs-cell.mini { min-width: 22px; height: 22px; font-size: 0.72rem; cursor: default; display: inline-flex; vertical-align: middle; font-style: normal; }
.hs-glyph { font-weight: 700; font-size: 0.9rem; line-height: 1.1; }
.hs-wk { font-size: 0.68rem; opacity: 0.85; line-height: 1.1; }
.hs-cell.sel { outline: 2px solid var(--focus); outline-offset: 2px; }

.hs-h-green, .hs-l-green { background: var(--hs-green); color: var(--hs-on-green); }
.hs-h-yellow, .hs-l-yellow { background: var(--hs-yellow); color: var(--hs-on-yellow); }
.hs-h-red, .hs-l-red { background: var(--hs-red); color: var(--hs-on-red); }
.hs-h-none { background: var(--muted-bg); color: var(--fg); }
.hs-missing { background: var(--muted-bg); color: var(--muted); border-color: var(--border); }
.hs-none { background: transparent; color: var(--muted); border: 2px dashed var(--border); }
.hs-leave {
  color: var(--fg); border-color: var(--border);
  background: repeating-linear-gradient(135deg, var(--muted-bg) 0 5px, var(--card) 5px 10px);
}
/* 草稿：描边，不填充；描边色=自报 health */
.hs-draft { background: var(--card); }
.hs-draft.hs-h-green { border-color: var(--hs-green); color: var(--ok); }
.hs-draft.hs-h-yellow { border-color: var(--hs-yellow); color: var(--warn); }
.hs-draft.hs-h-red { border-color: var(--hs-red); color: var(--err); }
.hs-draft.hs-h-none { border-color: var(--hs-grey); color: var(--muted); }

.hs-detailbox { min-height: 56px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-2); margin-bottom: 8px; }
.hs-detail p { margin: 4px 0; }
.hs-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; color: var(--muted); }
.hs-leg { display: inline-flex; align-items: center; gap: 4px; }

.hs-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.hs-li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-2); }
.hs-li-wk { width: 72px; flex: none; }

.hs-searchform { padding: 12px 14px; }
.hs-searchform .row { flex-wrap: nowrap; margin-bottom: 10px; }
.hs-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hs-hit { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--fg); text-decoration: none; }
.hs-hit:hover, .hs-hit:focus-visible { border-color: var(--primary); background: var(--info-bg); }
.hs-hit-text { flex: 1 1 200px; min-width: 0; }
.hs-weeks tr.clickable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ====================================================== Agent 接入页 */
.ag-pre {
  margin: 0; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
  font: 0.86rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--card-2); border: 1px solid var(--border); border-radius: 6px;
}
.ag-guide { max-height: 420px; overflow: auto; }
.ag-code { position: relative; margin: 6px 0 12px; }
.ag-code .ag-pre { padding-right: 70px; }
.ag-copy { position: absolute; top: 6px; right: 6px; }
.ag-prompt { margin-top: 10px; }
.ag-prompt summary { cursor: pointer; color: var(--primary); }
.ag-prompt .ag-pre { margin-top: 8px; max-height: 420px; overflow: auto; }

/* ====================================================== 管理页 */
.ad-gate { max-width: 480px; margin: 24px auto; display: flex; flex-direction: column; gap: 10px; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 4px; }
/* 窄屏：按钮不逐字折行，表格保底宽度，由 .table-wrap 横向滚动 */
.ad-actions .btn { white-space: nowrap; }
.ad-sec .table { min-width: 600px; }
.ad-off td { opacity: 0.65; }
.ad-aliases { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ad-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ad-token { font: 0.95rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ====================================================== 窄屏 */
@media (max-width: 720px) {
  .dg-lv-name { display: none; }
  .dg-levels button { padding: 6px 12px; }
  .dg-field { flex: 1 1 140px; }
  .dg-field .select { flex: 1 1 auto; min-width: 0; width: 100%; }
  .dg-menu-pop { position: fixed; left: 16px; right: 16px; top: auto; min-width: 0; max-width: none; }
  .dg-l0-text { font-size: 1.1rem; }
  .dg-actions { width: 100%; }
  .dg-actions > .btn, .dg-actions > .dg-menu { flex: 1 1 auto; }
  .dg-actions .dg-menu > .btn { width: 100%; }
  .ad-grid { grid-template-columns: minmax(0, 1fr); }
  .hs-cell { min-width: 30px; height: 42px; }
  .hs-searchform .row { flex-wrap: wrap; }
  .hs-li { flex-wrap: wrap; }
  .ag-code .ag-pre { padding-right: 14px; padding-top: 38px; }
}

/* ====================================================== 打印 */
@media print {
  .dg-menu, .dg-jump, .dg-editbar, .dg-banners .btn, .hs-filters { display: none !important; }
  .dg-statusbar, .dg-sec, .dg-slide { break-inside: avoid; }
  .hs-cell, .hs-h-green, .hs-h-yellow, .hs-h-red { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* 逐人表：一句话列保底宽度，窄屏由 .table-wrap 横向滚动，页面本身不出现横向滚动条 */
.dg-sec .table td:nth-child(4) { min-width: 200px; }