@charset "UTF-8";
/* ============================================================================
 * views/admin.css
 * COLAVIA v1.000.0000
 *
 *   管理者向けの設定画面。
 *     メール設定（§5.8-4）／区分・ステータス管理（§5.8-2）／操作ログ（§5.8-3）
 *
 *   いずれも「並べた設定パネル＋画面下部に固定した保存バー」という
 *   同じ形をとるため、1つのファイルにまとめる。
 *
 *   出所: mock/mail.html の <style> から切り出したもの。
 *         .notice と .input-wrap / .input-reveal は他の画面でも使うため
 *         components.css へ移してある。
 * ========================================================================== */

.set-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  align-items: start;
  padding-bottom: 4.5rem;   /* 固定した保存バーの高さぶん空ける */
}

.set-col { display: grid; gap: var(--sp-4); }

/* パスワードの状態 */

.pw-state {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--c-green); font-weight: 500;
}

/* テスト送信の結果 */

.test-log {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); line-height: 1.8;
  font-family: var(--font-mono, monospace);
  white-space: pre-wrap; word-break: break-all;
}

.test-log[data-tone="done"]  { background-color: color-mix(in srgb, var(--c-green) 12%, transparent); color: var(--c-text); }

.test-log[data-tone="error"] { background-color: color-mix(in srgb, var(--c-red) 12%, transparent); color: var(--c-text); }

/* 保存バー（画面下部に固定） */

.save-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--c-chrome-bg);
  border-top: 0.0625rem solid var(--c-hairline);
  -webkit-backdrop-filter: saturate(180%) blur(1.25rem);
  backdrop-filter: saturate(180%) blur(1.25rem);
}

.save-bar .sec__note { margin-right: auto; }

.save-bar.is-dirty .sec__note { color: var(--c-orange); font-weight: 700; }

@media (max-width: 48rem) {
  .set-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 5.5rem; }
  .save-bar { padding: var(--sp-3); flex-wrap: wrap; }
  .save-bar .sec__note { width: 100%; margin-bottom: var(--sp-1); }
}

/* ---------------------------------------------------------------------------
 * 実装フェーズで追加したもの
 * ------------------------------------------------------------------------- */

/* 保存バーがある画面では、トーストがバーに重ならないよう持ち上げる。
   :has() は使わない方針のため（§2.2）、body の class で伝える。 */
body.has-save-bar #toast-root { bottom: 5.5rem; }

@media (max-width: 48rem) {
  body.has-save-bar #toast-root { bottom: 7rem; }
}

/* テスト送信：サーバーとのやりとり（失敗したときだけ出す） */

.test-detail {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
}

.test-detail summary {
  cursor: pointer;
  color: var(--c-accent);
  padding: var(--sp-1) 0;
}

.test-detail summary:hover { text-decoration: underline; }

.test-detail .test-log {
  margin-top: var(--sp-2);
  max-height: 18rem;
  overflow-y: auto;
  background-color: var(--c-surface-sunken);
  border: 0.0625rem solid var(--c-hairline);
}