/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --border: #e2e5ea;
  --text: #1d2129;
  --muted: #6b7280;
  --accent: #2f6fd0;
  --on: #157347;
  --off: #9aa0a6;
  --warn: #b02a37;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

a { color: var(--accent); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
}

/* ヘッダ（第一階層のナビ） */
.app-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

/* ブランド表記は意匠として大文字化（マークアップ・<title>は小文字のまま） */
.app-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
}

.brand-logo { width: 20px; height: 20px; }

.app-sections { display: flex; gap: 16px; flex: 1; }

.section-link {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.section-link.is-current { color: var(--text); border-bottom-color: var(--accent); }

.app-account { display: flex; align-items: center; gap: 12px; }
.account-email { color: var(--muted); }

.app-main { max-width: 960px; margin: 0 auto; padding: 24px; }

h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 15px; margin: 0 0 12px; }

/* 第二階層のナビ */
.sub-nav { display: flex; gap: 16px; margin-bottom: 20px; }
.sub-link { color: var(--muted); text-decoration: none; }
.sub-link.is-current { color: var(--text); font-weight: 600; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.back { text-decoration: none; }

/* ダッシュボードの機能カード */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  text-decoration: none;
  color: var(--text);
}

.card:hover { border-color: var(--accent); }
.card-title { display: block; font-weight: 600; margin-bottom: 4px; }
.card-description { display: block; color: var(--muted); }

/* フォーム */
.inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

input[type="text"] {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  min-width: 200px;
}

.suffix { color: var(--muted); }

.button, input[type="submit"] {
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.button-quiet {
  background: var(--panel);
  border-color: var(--border);
  color: var(--muted);
}

/* アドレスに添えるコピーボタン。ラベルが「コピー済み」に変わっても幅がぶれないよう最小幅を持たせる */
.button-copy {
  margin-left: 8px;
  padding: 1px 8px;
  min-width: 66px;
  font-size: 12px;
  text-align: center;
}

/* button_to は form を作るので、レイアウトが崩れないように潰しておく */
form.button_to { display: inline; margin: 0; }

.errors { color: var(--warn); margin: 0 0 12px; padding-left: 20px; }

/* テーブル */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 600; }
.table tr.is-muted td { opacity: 0.55; }
.table td.actions { text-align: right; }

/* 「左に対象、右に状態と操作」の一覧。列が3つ以下で、右端の操作数が行ごとに違う
   ものは表にすると間が抜けるので、行ごとの flex で寄せる。 */
.item-list { list-style: none; margin: 0; padding: 0; }

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.item:last-child { border-bottom: 0; }
.item-main { min-width: 0; } /* URL の省略記号を効かせるために縮めさせる */

.item-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-side { display: flex; align-items: center; gap: 8px; flex: none; }

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  background: var(--off);
}

.badge-on, .badge-replied { background: var(--on); }
.badge-off, .badge-rejected { background: var(--off); }
.badge-failed { background: var(--warn); }
.badge-received, .badge-running { background: var(--accent); }

/* 詳細 */
.meta { display: grid; grid-template-columns: 80px 1fr; gap: 6px 16px; margin: 0; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; }

/* 識別子はどの系統のIDかを項目名に書いているので長く、値も折り返さないと横に溢れる */
.meta-wide { grid-template-columns: 220px 1fr; }
.meta-wide dd { overflow-wrap: anywhere; }

/* 一覧の本文のさわり。省略はここで決める（ヘルパは列幅より長めに切っている） */
.snippet {
  max-width: 420px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}

/* フラッシュ */
.flash { padding: 10px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); }
.flash-alert { border-color: var(--warn); color: var(--warn); }

/* ログイン */
.login {
  max-width: 360px;
  margin: 0 auto;
  min-height: calc(100vh - 48px); /* .app-main の上下padding分を差し引く */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 23.6vh; /* ブロック重心を黄金比の分割点（上から38.2%）に置く */
  text-align: center;
}

/* 宝石本体の3D回転と面の照らし分けは gem_logo_controller.js が描画。
   ここでは銀→金と色を変える光彩のパルスだけ重ねる */
.login-logo {
  width: 320px;
  height: 320px;
  animation: login-logo-glow 4.8s ease-in-out infinite;
}

@keyframes login-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(127, 180, 232, 0.4)); }
  35%      { filter: drop-shadow(0 0 26px rgba(170, 210, 246, 0.75)); }
  70%      { filter: drop-shadow(0 0 24px rgba(247, 208, 158, 0.45)); }
}

@media (prefers-reduced-motion: reduce) {
  .login-logo { animation: none; }
}

/* キャンバス下部の余白ぶん詰めて、タイトルを宝石側に寄せる */
.login-logo { margin-bottom: -20px; }

.login-brand {
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 26px;
  margin: 0;
}
/* Google公式ブランディング準拠のログインボタン（白・アウトライン型） */
.button-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 72px; /* 宝石+SILMARILのロックアップから切り離して塊を明確に */
  padding: 10px 18px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 6px;
  color: #3c4043;
  font-weight: 500;
  text-decoration: none;
}

.button-google:hover {
  border-color: #c6cacf;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
}

.google-g { width: 18px; height: 18px; }

/* ── スマホ幅（〜640px）。ここまでの指定はデスクトップ幅前提なので、
   横に溢れる・押せなくなる箇所だけをここで畳む。 ── */
@media (max-width: 640px) {
  .app-main { padding: 16px; }
  .panel { padding: 16px; }

  /* nav の flex-basis が 0 で潰れ、ログアウトが画面外に出ていた。2段に折る。
     メールアドレスはログイン中の本人には自明なので畳む。 */
  .app-header { flex-wrap: wrap; height: auto; gap: 8px 16px; padding: 8px 16px; }
  .app-brand { order: 1; }
  .app-account { order: 2; margin-left: auto; }
  .app-sections { order: 3; flex: 1 1 100%; }
  .account-email { display: none; }

  /* 表は列を並べる幅が無いので、1行を1ブロックに積む（見出し行は落とす） */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: auto; }
  .table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .table tr:last-child { border-bottom: 0; }
  .table td { padding: 2px 0; border: 0; }
  .table td:empty { display: none; }
  .table td.actions { text-align: left; margin-top: 8px; }
  .snippet { max-width: none; } /* 420px 固定をやめて画面幅に従わせる */

  /* 220px のラベル列だと値が数文字幅になるので、ラベルを上に置く */
  .meta, .meta-wide { grid-template-columns: 1fr; gap: 0; }
  .meta dt { margin-top: 10px; }
  .meta dt:first-of-type { margin-top: 0; }
  .meta dd { overflow-wrap: anywhere; } /* ID・URL は折り返す場所が無い */

  /* 状態と操作を次の行に落として、名前とURLに幅を渡す */
  .item { flex-wrap: wrap; gap: 8px; }
  .item-main { flex: 1 1 100%; }

  /* 指で押せる大きさに（既定は約32px、コピーは約20px） */
  .button, input[type="submit"] { min-height: 40px; padding: 8px 14px; }
  .button, input[type="submit"], .badge { white-space: nowrap; }
  .button-copy { min-height: 28px; padding: 2px 10px; }
  .section-link, .sub-link { padding: 8px 0; }

  /* iOS Safari は 16px 未満の入力欄にフォーカスすると画面を勝手に拡大する */
  input[type="text"] { font-size: 16px; min-width: 0; flex: 1 1 12ch; }

  /* 320px 固定だと 320px 幅の端末で左右余白が無くなる。
     100vh は iOS の URL バー込みの高さなので dvh にする */
  .login { min-height: calc(100dvh - 32px); padding-bottom: 12vh; }
  .login-logo { width: min(320px, 72vw); height: min(320px, 72vw); margin-bottom: -16px; }
  .button-google { margin-top: 40px; }
}