/* ==========================================================================
   Agenda Assistant · 管理后台私有样式（admin.html 专用）
   只使用 shared.css 的设计 tokens，不自造色值；
   形状纪律：新粗野 × 瑞士国际（墨线粗边 + 硬偏移投影 + 4px 小圆角，
   shared 已定义 --ui-*，2026-07-28 风格改造）。
   ========================================================================== */

/* ---------- 顶栏 ---------- */
.adm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--gap-m);
  background: var(--card);
  border-bottom: var(--ui-border-3);
}
.adm-brand {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}
.adm-brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--brand-deep);
  letter-spacing: -.01em;
}
.adm-nav {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  font-size: var(--fs-s);
}
.adm-nav a { text-decoration: none; font-weight: 600; }
.adm-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 标签栏 ---------- */
.adm-tabs {
  display: flex;
  gap: var(--gap-xs);
  flex-wrap: wrap;
  padding: var(--gap-s) var(--gap-m) 0;
  max-width: 1120px;
  margin: 0 auto;
}
.adm-tab {
  padding: 10px 22px;
  border: var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--card);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.adm-tab:hover { color: var(--brand); transform: translate(-1px, -1px); box-shadow: var(--ui-shadow-s); }
.adm-tab:active { transform: translate(1px, 1px); box-shadow: none; }
.adm-tab.is-on {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: var(--ui-shadow-s);
}

/* ---------- 主区 ---------- */
.adm-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--gap-m) var(--gap-m) var(--gap-xl);
}
.adm-section { display: none; }
.adm-section.is-on { display: block; }

.adm-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-s);
  margin-bottom: var(--gap-m);
}
.adm-sec-head h2 { margin: 0; }
.adm-sec-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  flex-wrap: wrap;
}
.adm-count {
  font-family: var(--font-num);
  font-size: var(--fs-s);
  color: var(--ink-3);
  margin-left: var(--gap-xs);
}

.hint {
  font-size: var(--fs-s);
  color: var(--ink-3);
  line-height: 1.5;
}
.hint--block { margin: var(--gap-xs) 0 0; }

/* ---------- 卡片间距 ---------- */
.adm-section .card + .card { margin-top: var(--gap-m); }
.card h3 { margin-top: 0; }

/* ---------- 表单字段 ---------- */
.field { margin-bottom: var(--gap-s); }
.field > span {
  display: block;
  font-size: var(--fs-s);
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: var(--gap-xxs);
}
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-s);
}
.field-inline {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}
.field-inline .input { width: auto; }

.msg {
  font-size: var(--fs-s);
  font-weight: 600;
  margin-top: var(--gap-xs);
  min-height: 1.4em;
}
.msg--err { color: var(--danger); }
.msg--ok { color: var(--ok); }

/* ---------- 未登录锁定占位 ---------- */
.adm-lock {
  text-align: center;
  padding: var(--gap-l) var(--gap-m);
}
.adm-lock p { color: var(--ink-2); margin: var(--gap-s) 0 var(--gap-m); }

/* ---------- 登录卡 ---------- */
.adm-login-card {
  max-width: 460px;
  margin: var(--gap-l) auto 0;
  text-align: center;
}
.adm-login-card .input { text-align: center; }
.adm-login-card .btn-cta { width: 100%; margin-top: var(--gap-s); }

/* ---------- 表格（名册 / 会议 / 详情） ---------- */
.tbl-wrap { overflow-x: auto; }
.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-s);
}
.adm-table th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-deep);
  padding: 10px 12px;
  border-bottom: var(--ui-border);
  white-space: nowrap;
}
.adm-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.adm-table tbody tr:hover { background: var(--brand-soft); }
.adm-table tr.is-off td {
  color: var(--ink-3);
  background: var(--paper);
}
.adm-table tr.is-off td:first-child { text-decoration: line-through; }
.adm-table .num { font-family: var(--font-num); white-space: nowrap; }
.adm-table .ops { white-space: nowrap; }

/* 会议详情里的分段子标题行（金色贴纸带） */
.adm-table tr.seg-head td {
  background: var(--accent);
  color: var(--ui-ink);
  font-weight: 700;
  font-family: var(--font-display);
  padding: 8px 12px;
}

/* ---------- 键值信息栅格（会议详情头部） ---------- */
.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-xs) var(--gap-m);
  margin: 0 0 var(--gap-s);
}
.kv dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.kv dd { margin: 2px 0 0; font-size: var(--fs-s); }

/* ---------- 素材栅格 ---------- */
.mat-group { margin-bottom: var(--gap-m); }
.mat-group-head { margin-bottom: var(--gap-s); }
.mat-group-head h3 { margin: 0 0 var(--gap-xxs); }
.mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--gap-s);
}
.mat-card { display: flex; flex-direction: column; gap: var(--gap-xs); }
.mat-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 2px dashed var(--ui-ink);
  border-radius: var(--ui-radius);
  overflow: hidden;
}
.mat-prev img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 二维码/海报都要完整不变形 */
}
.mat-prev--qr { height: 170px; }
.mat-prev--tall { height: 230px; }
.mat-prev--wide { height: 130px; }
.mat-empty {
  color: var(--ink-3);
  font-size: var(--fs-s);
  text-align: center;
  padding: var(--gap-s);
}
.mat-name { font-weight: 700; color: var(--brand-deep); }
.mat-desc { font-size: var(--fs-xs); color: var(--ink-3); }
.mat-meta { font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--font-num); }

/* ---------- 弹层 ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 42, 66, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--gap-m) var(--gap-s);
  z-index: 60;
  overflow-y: auto;
}
.modal {
  background: var(--card);
  border: var(--ui-border-3);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-l);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  margin: auto 0;
}
.modal--wide { max-width: 880px; }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--gap-m);
  border-bottom: var(--ui-border);
}
.modal-head h3 { margin: 0; }
.modal-x {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--ui-radius);
}
.modal-x:hover { background: var(--brand-soft); color: var(--brand); }
.modal-body {
  padding: var(--gap-m);
  overflow-y: auto;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-xs);
  padding: var(--gap-s) var(--gap-m);
  border-top: var(--ui-border);
}
body.no-scroll { overflow: hidden; }

/* ---------- Toast ---------- */
#toast-root {
  position: fixed;
  left: 50%;
  bottom: var(--gap-m);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  z-index: 80;
  pointer-events: none;
}
.toast {
  padding: 12px 26px;
  border-radius: var(--ui-radius);
  background: var(--brand-deep);
  color: #FFFFFF;
  font-size: var(--fs-s);
  font-weight: 600;
  box-shadow: var(--ui-shadow-m);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  max-width: 82vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast--ok { background: var(--ok); }
.toast--err { background: var(--danger); }

/* ---------- 归档弹层 · Pathways 勾选 ---------- */
.pw-speaker {
  border: var(--ui-border);
  border-radius: var(--ui-radius);
  padding: var(--gap-s);
  margin-bottom: var(--gap-xs);
}
.pw-speaker.is-disabled { opacity: .6; background: var(--paper); }
.pw-speaker-head {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  flex-wrap: wrap;
}
.pw-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap-xs);
  margin-top: var(--gap-xs);
}

/* ---------- 规则/官员编辑表 ---------- */
.edit-tbl { width: 100%; border-collapse: collapse; }
.edit-tbl td { padding: var(--gap-xxs) var(--gap-xxs); vertical-align: middle; }
.edit-tbl .input { padding: 9px 12px; font-size: var(--fs-s); }
.edit-tbl .row-ops { white-space: nowrap; width: 1%; }

/* ---------- 归档提示条 ---------- */
.notice {
  border: var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 12px 16px;
  font-size: var(--fs-s);
  margin-bottom: var(--gap-s);
}
.notice--warn { background: var(--warn-soft); color: var(--warn); }
.notice--info { background: var(--brand-soft); color: var(--brand); }

/* ---------- 小屏适配 ---------- */
@media (max-width: 640px) {
  .adm-topbar { padding: var(--gap-s); }
  .adm-tabs { padding: var(--gap-s) var(--gap-s) 0; }
  .adm-tab { padding: 8px 16px; font-size: var(--fs-s); }
  .adm-main { padding: var(--gap-s) var(--gap-s) var(--gap-l); }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn, .modal-foot .btn-cta, .modal-foot .btn-outline { width: 100%; }
}

/* ==========================================================================
   响应式适配（【响应式适配代理】追加 · 2026-07-28）
   纪律：只新增 @media 规则，不改动上方桌面规则与既有 ≤640px 小屏适配。
   五标签导航沿用既有 flex-wrap 折行方案（需求允许横滑或折行，折行改动最小）；
   名册/会议表格沿用既有 .tbl-wrap 横向滚动（同为需求允许的最小改动）。
   ========================================================================== */

/* ---------- 平板（≤1024）：标签/关闭键触摸目标 ≥40px、表格横滑更顺 ---------- */
@media (max-width: 1024px) {
  .adm-tab { min-height: 40px; }
  .modal-x { min-width: 40px; min-height: 40px; }
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
}

/* ---------- 手机（≤640）：素材栅格单列、行内字段可折行、弹层近全屏 ---------- */
@media (max-width: 640px) {
  .mat-grid { grid-template-columns: 1fr; }
  .field-inline { flex-wrap: wrap; }
  .modal-overlay { padding: var(--gap-xs); }
  .modal {
    max-width: none;
    max-height: calc(100vh - 2 * var(--gap-xs));
    max-height: calc(100dvh - 2 * var(--gap-xs));
    border-radius: var(--ui-radius);
  }
  .modal-head { padding: var(--gap-s); }
  .modal-body { padding: var(--gap-s); }
  .modal-foot { padding: var(--gap-s); }
}