/* 契約情報画面の共通スタイル（画面サンプルに準拠）。
   複数のコンポーネントから使うため、Blazor の CSS 分離ではなくここに置く。
   色はすべて MudBlazor のパレット変数を参照し、テーマ切り替えに追随させる。

   site.css / site.scss は SCSS のビルドタスクが csproj に無く両者が同期していないため、
   混乱を避けて別ファイルにしている。 */

/* ---------------- パネル ---------------- */

/* 畳んだときに見出しが連続して 1 本の塊に見えるため、パネル間に余白を入れて区切る。
   MudBlazor は隣接パネルの余白を打ち消して一体化させるので、直接の子を !important で上書きする。 */
.contract-panels > .mud-expand-panel {
    margin-bottom: 12px !important;
    border-radius: 8px;
}

.contract-panels > .mud-expand-panel:last-child {
    margin-bottom: 0 !important;
}

/* 一体化のために消される上余白と角丸を戻す。 */
.contract-panels > .mud-expand-panel + .mud-expand-panel,
.contract-panels > .mud-expand-panel.mud-panel-expanded + .mud-expand-panel {
    margin-top: 0 !important;
}

/* ---------------- 重要事項バナー ---------------- */

/* ---------------- タブの中身 ---------------- */

/* パネルの隙間が地の色で抜けるよう、タブの中身を薄グレーにしてパネルを白で浮かせる。 */
.contract-tab-body {
    background-color: #f5f5f5;
}

.contract-panels > .mud-expand-panel {
    background-color: var(--mud-palette-surface);
}

/* ---------------- 表 ---------------- */

/* 行の高さ。Dense の既定は詰まりすぎて料率・金額が読みにくい。
   MudBlazor 側の dense 指定に負けないよう、テーブル要素まで含めたセレクタで上書きする。 */
.contract-table table th,
.contract-table table td,
.contract-table th,
.contract-table td {
    padding: 14px 16px;
    line-height: 1.6;
}

/* 見出しは本文より一段落とし、背景を敷いて行と区別する。
   サンプルの text-transform: uppercase は日本語では効かないため入れていない。 */
.contract-table th {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-grey);
}

/* 見出しは列の中身（左寄せの項目名・右寄せの金額）に関わらず中央で揃える。
   MudSimpleTable には MudBlazor の
   `.mud-simple-table table * tr th { text-align: start }`（詳細度 0,1,3）が当たる。
   `.contract-table th` は 0,1,1 で詳細度が足りず、読み込み順を問わず負ける。
   テーブル要素まで含めて 0,1,3 の同詳細度に揃えたうえで、contract.css が
   MudBlazor.min.css より後に読み込まれること（App.razor の link 順）で勝たせる。
   上の .contract-table th に並ぶ font-size / font-weight / letter-spacing も同じ理由で
   MudBlazor 側に負けているが、現在の見た目を保つためここでは触らない。 */
.contract-table table * tr th {
    text-align: center;
}

/* 金額・料率の列。桁を揃えて読ませるため等幅数字で右寄せにする。 */
.contract-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* 数値が入らない列（税区分・単位など）は中央寄せ。
   見出しは上の .contract-table th で一律中央にするため、ここは本文セルだけを見る。 */
.contract-table td.center {
    text-align: center;
}

/* 加盟店一覧の行。行そのものが詳細への導線なので、既定（上下 6px）より高くして押しやすくする。
   MudBlazor の .mud-table-dense * .mud-table-row .mud-table-cell と同じ詳細度で、
   contract.css が後に読み込まれること（App.razor の link 順）を使って上書きする。 */
.contract-shop-list .mud-table-row .mud-table-cell {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* ---------------- ブランド表示 ---------------- */

/* ロゴ＋名称を 1 セルに収める。ロゴが無いブランドは名称だけになる。 */
.brand-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.brand-cell img {
    height: 24px;
    width: auto;
    display: block;
}