/* ページ全体の骨組み（ヘッダー・タブ・ステータス行）や、カード・ボタン・入力欄・表などの
   見た目は src/editor/common/css/*.css（図形式エディタと共通の Primer ベース部品）が担う。
   ここでは表形式タブ特有のレイアウト（内部スクロール領域の分割）だけを持つ。 */

/* src/editor/common/css/app.css の #g-app と同じ役割（図形式エディタ側は #g-app、
   表形式エディタ側は #ed2-app という別idを使っているため、ここで同じ骨組みを与える） */
#ed2-app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 一覧表：編集メニュー（詳細/追加フォーム）はこの表より前に配置し、
   表はここで残り高さいっぱいに広がって内部スクロールする */
.ed2-list-scroll {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: none;
  overflow-y: auto;
}

/* 編集フォーム内の長くなりがちな表（のりば・種別・駅順・停車駅など） */
.ed2-subtable {
  max-height: 280px;
  overflow-y: auto;
}

/* 乗換タブのように、1つのタブの中に複数の一覧＋詳細のペアがある場合、
   残り高さを均等に分け合う */
.ed2-flex-pane {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 一覧とフォームの左右分割（駅・路線・乗換・駅グループ・運行情報タブ用。
   運行系統タブは詳細フォームが横に幅を取りすぎるため対象外＝従来の縦積みのまま）。
   900px未満では縦積みに戻し、スマホからの編集を維持する。 */
.ed2-split {
  display: flex;
  gap: var(--stack-gap-normal);
  flex: 1 1 auto;
  min-height: 0;
}
.ed2-split__list {
  flex: 1 1 auto;
  min-width: 0;
}
.ed2-split__form {
  flex: none;
  width: 360px;
  min-width: 0;
}
.ed2-split__form:empty {
  display: none;
}
@media (max-width: 899px) {
  .ed2-split {
    flex-direction: column;
  }
  .ed2-split__form {
    /* スマホ幅では詳細フォームを一覧より前（上）に表示し、
       スクロールせずに編集を開始できるようにする */
    order: -1;
    width: 100%;
  }
}

/* 駅・路線・運行系統・乗換・駅グループ・運行情報タブ（.g-view でラップされる範囲）だけ、
   Primerトークンを上書きして情報密度を上げる。鉄道会社・車両種別・履歴・データの読込と書出タブは
   g-view を経由しない（selfWraps）ため対象外。図形式エディタ（#g-app）にも影響しない。
   コンポーネント（g-card / g-table / g-btn / g-input / g-list / g-field など）は
   すべてこれらの変数を参照しているため、上書きだけで一括して効く。 */
#ed2-app .g-view {
  --text-body-shorthand-medium: 400 0.75rem/1.4 var(--fontStack-sansSerif);
  --text-body-shorthand-small: 400 0.6875rem/1.4 var(--fontStack-sansSerif);
  --text-caption-shorthand: 400 0.6875rem/1.2 var(--fontStack-sansSerif);
  --text-title-shorthand-small: 600 0.875rem/1.4 var(--fontStack-sansSerif);
  --text-title-shorthand-medium: 600 1rem/1.4 var(--fontStack-sansSerifDisplay);

  --space-xs: 3px;
  --space-sm: 6px;
  --space-md: 9px;
  --space-lg: 12px;
  --space-xl: 16px;
  --stack-padding-condensed: 6px;
  --stack-padding-normal: 12px;
  --stack-padding-spacious: 16px;
  --stack-gap-condensed: 6px;
  --stack-gap-normal: 12px;
  --stack-gap-spacious: 16px;

  --control-xsmall-size: 20px;
  --control-xsmall-paddingInline-normal: 6px;
  --control-small-size: 22px;
  --control-small-paddingBlock: 3px;
  --control-small-paddingInline-normal: 8px;
  --control-small-gap: 3px;
  --control-medium-size: 26px;
  --control-medium-paddingBlock: 4px;
  --control-medium-paddingInline-normal: 9px;
  --control-medium-gap: 6px;
  --control-large-size: 32px;
  --control-large-paddingBlock: 6px;
}

/* 一覧表のセル余白は、上記の一般的な余白トークンとは別枠で、
   editor-v1相当までさらに詰める（表の行密度がそのまま情報量に直結するため）。 */
#ed2-app .g-view .g-table th,
#ed2-app .g-view .g-table td {
  padding: 3px 6px;
}