/* ログイン・大会一覧・大会作成/編集・ストラクチャ一覧・ストラクチャエディタ用。
 * Operator/Viewer/Display の3画面は timer.css を使う（docs/ai/frontend.md）。
 * トークン・フォント・リセット・.t-header/.t-tile/.t-btn/.t-field は base.css を共有する。
 * ここではこの6ページ固有のレイアウト（.a-*）だけを持つ。
 */

/* ===================== screen ===================== */
/* 縦中央寄せ（body {display:flex; align-items:center}）はページ間でタイトルの
 * Y座標を揺らす原因だったので廃止。全ページを viewer/operator と同じ幅・同じ
 * 上端オフセットの1カラムに揃える。 */

.a-screen {
  --u: min(3.4vw, 13px);
  width: 100%;
  max-width: calc(var(--u) * 52);
  margin: 0 auto;
  padding: calc(var(--u) * 4) calc(var(--u) * 2.8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

/* ===================== tabs ===================== */
/* 大会/ストラクチャ/配色の3つの一覧画面を切り替えるナビゲーション。
 * ページ遷移そのもの（リンク）だが、今どのセクションを見ているかを
 * アンダーラインで示すことで見た目上タブとして機能させる。 */

.a-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: calc(var(--u) * 2.4);
  border-bottom: 1px solid var(--c-line);
}

.a-tab {
  padding: calc(var(--u) * 1) 0;
  font-family: var(--font-mono);
  font-size: max(calc(var(--u) * 1.3), 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-caption);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  /* border-bottomの2pxぶん親の border と二重にならないよう1px重ねる。 */
  margin-bottom: -1px;
}

.a-tab:hover {
  color: var(--c-text);
}

.a-tab--active {
  color: var(--c-text);
  border-bottom-color: var(--accent);
}

/* ===================== toolbar ===================== */
/* ヘッダーの中ではなく下の独立した行に置く。ヘッダー内に混ぜると、ボタンの
 * あるページ（一覧）と無いページ（ログイン）でヘッダー高が変わってしまう。 */

.a-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 1);
}

.a-toolbar .t-btn {
  flex: 0 0 auto;
  padding: 0 calc(var(--u) * 1.6);
}

.a-toolbar-end {
  margin-left: auto;
}

/* formのbox自体を持たせず、中の要素を直接flexアイテムにする（.t-logout-formと同じ解）。 */
.a-contents {
  display: contents;
}

.a-header-link {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: max(calc(var(--u) * 1.2), 13px);
  letter-spacing: 0.1em;
  color: var(--c-caption);
  text-decoration: none;
  white-space: nowrap;
}

.a-header-link:hover {
  color: var(--c-text);
}

/* ===================== panel (login / forms) ===================== */

.a-panel {
  background: var(--c-panel);
  border: 1px solid var(--c-tile-border);
  border-radius: calc(var(--u) * 0.9);
  padding: calc(var(--u) * 1.6);
  max-width: calc(var(--u) * 34);
}

/* .t-field は margin-bottom で行間を持つので、ここでは gap を足さない。 */
.a-panel form {
  display: flex;
  flex-direction: column;
}

.a-form-actions {
  display: flex;
  gap: calc(var(--u) * 1);
}

/* ===================== table ===================== */

.a-table-wrap {
  overflow-x: auto;
}

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

.a-table th {
  text-align: left;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 0.6);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: max(calc(var(--u) * 1.1), 11px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-caption);
  font-weight: 400;
  white-space: nowrap;
}

.a-table td {
  text-align: left;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 0.6);
  border-bottom: 1px solid var(--c-line);
  font-variant-numeric: tabular-nums;
}

.a-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--u) * 0.6);
  flex-wrap: wrap;
}

.a-row-actions .t-btn {
  flex: 0 0 auto;
  padding: 0 calc(var(--u) * 1);
}

/* スマホ幅ではセル単位の横スクロールをやめ、1行目に名前・状態などの項目を
 * 横並びで、2行目にアクションボタンを横並びで表示するカード状レイアウトにする。 */
@media (max-width: 640px) {
  .a-table thead {
    display: none;
  }

  .a-table,
  .a-table tbody {
    display: block;
    width: 100%;
  }

  .a-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: calc(var(--u) * 1.6);
    row-gap: calc(var(--u) * 0.6);
    padding: calc(var(--u) * 1) 0;
    border-bottom: 1px solid var(--c-line);
  }

  .a-table tr:first-child {
    padding-top: 0;
  }

  .a-table td {
    display: block;
    width: auto;
    flex: 0 1 auto;
    border-bottom: none;
    padding: 0;
  }

  .a-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: max(calc(var(--u) * 1), 10px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-caption);
    margin-bottom: calc(var(--u) * 0.2);
  }

  /* data-labelの無いセル（Actions列）は幅100%を取り、必ず2行目に折り返す。 */
  .a-table td:not([data-label]) {
    flex-basis: 100%;
  }

  .a-row-actions {
    justify-content: flex-start;
  }
}

/* ===================== misc ===================== */

.a-error {
  background: var(--c-error-bg);
  color: var(--s-red);
  border-radius: calc(var(--u) * 0.5);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.2);
  font-size: max(calc(var(--u) * 1.3), 13px);
}

.a-muted {
  color: var(--c-caption);
  font-size: max(calc(var(--u) * 1.3), 13px);
}

/* ===================== color scheme swatches ===================== */
/* 配色一覧の色見本。背景色はサーバーがインラインstyleで書き込む
   （値は6桁hexに検証済み。app/logic/color_scheme.py）。 */

.a-swatches {
  display: inline-flex;
  gap: calc(var(--u) * 0.3);
  vertical-align: middle;
}

.a-swatch {
  display: block;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 0.25);
  /* 見本の色そのものが器の背景と同じでも境界が見えるようにする
     （暗い配色の bg / 明るい配色の panel が典型）。 */
  border: 1px solid var(--c-input-border);
}

/* ===================== structure editor ===================== */

.editor-panel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

/* JSONが唯一の編集手段なので、書けるフィールドをエディタの直上で示す。 */
.editor-hint {
  color: var(--c-caption);
  font-size: max(calc(var(--u) * 1.2), 13px);
  line-height: 1.7;
}

.editor-hint code {
  font-family: var(--font-mono);
  color: var(--c-text);
}

#json-editor {
  width: 100%;
  min-height: calc(var(--u) * 24);
  padding: calc(var(--u) * 0.8);
  border-radius: calc(var(--u) * 0.5);
  border: 1px solid var(--c-input-border);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: max(calc(var(--u) * 1.2), 13px);
}

.editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--u) * 1);
}

.editor-actions .t-btn {
  flex: 0 0 auto;
  padding: 0 calc(var(--u) * 3);
}

.editor-secondary-actions {
  display: flex;
  gap: calc(var(--u) * 1);
  margin-top: calc(var(--u) * 1);
  padding-top: calc(var(--u) * 1);
  border-top: 1px solid var(--c-line);
}