/* 管理台样式。零第三方、零 CDN —— Caddy 给 admin 子域的 CSP 只放 'self'，
   所以这里不能有 inline style / 外部字体 / 图标库。
   页面里的 <style> 块和 style="..." 属性也会被 CSP 挡掉，改了先在浏览器控制台看一眼。 */

:root {
  --fg: #1f2328;
  --fg-muted: #6a737d;
  --bg: #f6f7f9;
  --card: #ffffff;
  --line: #d8dee4;
  --line-soft: #eaeef2;
  --accent: #0b6bcb;
  --accent-dark: #0957a5;
  --urgent: #c62828;
  --notice: #b26a00;
  --info: #0b6bcb;
  --ok: #1a7f37;

  --radius: 8px;
  --radius-sm: 6px;
  --space: 12px;

  /* 控件统一高度，行内混排时不会一高一矮 */
  --control-h: 36px;
}

* { box-sizing: border-box; }

/* `hidden` 属性是 UA 样式表里的 `[hidden]{display:none}`，而作者样式表
   **天然压过 UA 样式表**（与选择器权重无关）。下面只要给 button / .button
   之类写了 display，`hidden` 就静默失效 —— 「退出」在登录页露着、
   新建公告时的「撤回」也露着，都是这么来的。这条把它压回去。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 14px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── 顶栏 ───────────────────────────────────────────────── */

header {
  display: flex;
  align-items: center;
  gap: var(--space);
  padding: 0 calc(var(--space) * 2);
  height: 56px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

header h1 { font-size: 16px; margin: 0; font-weight: 600; }
header .who { color: var(--fg-muted); font-size: 13px; }
header .spacer { flex: 1; }

/* ── 页面容器 ───────────────────────────────────────────── */

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(var(--space) * 2);
}

/* 表单页比列表页窄：一行只放一两个输入框时，1000px 会把标签和值拉散 */
main.form-page { max-width: 760px; }

/* ── 卡片 ───────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: calc(var(--space) * 2);
}

/* 登录卡片：水平居中 + 上方留白。整块浮在页面中上部，
   不贴顶也不居屏幕正中（居中正中在矮屏上会被键盘顶得乱跳）。 */
.card.narrow {
  max-width: 360px;
  margin: 10vh auto 0;
  padding: calc(var(--space) * 2.5);
}

/* 卡片里的分组：一条淡分割线 + 小标题，把长表单断成几段 */
.group + .group {
  margin-top: calc(var(--space) * 2);
  padding-top: calc(var(--space) * 2);
  border-top: 1px solid var(--line-soft);
}

.group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: .04em;
  margin: 0 0 var(--space);
}

/* ── 表单 ───────────────────────────────────────────────── */

label {
  display: block;
  margin-bottom: calc(var(--space) * 1.25);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
}

input, select, textarea, button, .button {
  font: inherit;
  color: var(--fg);
  padding: 0 10px;
  height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  width: 100%;
}

input::placeholder, textarea::placeholder { color: #a8b0b8; }

/* 键盘走到哪儿要看得见 —— 默认的细虚线在浅底上几乎看不见 */
input:focus, select:focus, textarea:focus, button:focus-visible, .button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

textarea {
  height: auto;
  min-height: 240px;
  padding: 10px;
  resize: vertical;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  line-height: 1.6;
}

/* 文件选择框：原生控件长得和别人不一样，只把按钮那一段拉齐 */
input[type="file"] {
  padding: 0;
  border: none;
  background: none;
  height: auto;
  line-height: var(--control-h);
}

input[type="file"]::file-selector-button {
  font: inherit;
  height: var(--control-h);
  margin-right: var(--space);
  padding: 0 var(--space);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover { background: var(--bg); }

input[type="datetime-local"], input[type="number"] { font-variant-numeric: tabular-nums; }

button, .button {
  width: auto;
  cursor: pointer;
  background: var(--card);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}

button:hover:not(:disabled), .button:hover { background: var(--bg); border-color: #c3ccd6; }

button.primary, .button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

button.primary:hover:not(:disabled), .button.primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

button:disabled { opacity: .5; cursor: default; }

/* ── 列表页 ─────────────────────────────────────────────── */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space);
  margin-bottom: var(--space);
}

.toolbar .spacer { flex: 1; }

/* 表格包在卡片里：不然白底的表格直接摆在灰底上，四边没有收口 */
.table-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

table { width: 100%; border-collapse: collapse; }

th, td {
  text-align: left;
  padding: 10px var(--space);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

th {
  color: var(--fg-muted);
  font-weight: 600;
  font-size: 12px;
  background: #fafbfc;
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fafbfc; }

/* 标题列吃掉多余宽度；日期 / id 不换行，窄屏下先挤它们 */
td.cell-title { min-width: 220px; }
td.nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }

.level { font-weight: 600; }
.level-urgent { color: var(--urgent); }
.level-notice { color: var(--notice); }
.level-info { color: var(--info); }

.tag {
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-muted);
  white-space: nowrap;
}

.tag-published { color: var(--ok); border-color: #a8d5b5; background: #f2fbf5; }
.tag-withdrawn { color: var(--fg-muted); }
.tag-expired { color: var(--urgent); border-color: #f0b8b8; background: #fdf4f4; }

.cell-actions { display: flex; gap: 6px; white-space: nowrap; }
.cell-actions .button, .cell-actions button { height: 30px; padding: 0 10px; font-size: 13px; }

/* 空列表时给一句话，而不是一张空表 */
.empty {
  padding: calc(var(--space) * 4);
  text-align: center;
  color: var(--fg-muted);
}

/* ── 杂项 ───────────────────────────────────────────────── */

.muted { color: var(--fg-muted); font-size: 13px; }
.error { color: var(--urgent); }
.ok { color: var(--ok); }

.hint {
  color: var(--fg-muted);
  font-size: 12px;
  margin: calc(var(--space) * -0.5) 0 var(--space);
}

.hint code {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 4px;
}

/* 两列并排：窄屏下自动塌成一列，不然输入框会挤成一小条 */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); }

@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; gap: 0; }
  main { padding: var(--space); }
  .card.narrow { margin-top: 4vh; }
}

/* 操作行：贴着卡片底部，按钮之间有间隔 */
.actions {
  display: flex;
  gap: var(--space);
  align-items: center;
  flex-wrap: wrap;
  margin-top: calc(var(--space) * 2);
  padding-top: calc(var(--space) * 2);
  border-top: 1px solid var(--line-soft);
}

.actions .muted { margin-left: auto; }

/* 登录卡片只有三个字段，不需要那条把表单和按钮分开的分割线 */
.card.narrow .actions {
  margin-top: calc(var(--space) * 0.5);
  padding-top: 0;
  border-top: none;
}