/*
    共有メールボックスの全画面共通スタイル（MailboxModule.GlobalStyleUrls が読み込む）。

    **ここに置くのは DevExpress が描く要素に当てるものだけ**＝画面の中に書いたタグは
    その画面の .razor.css（スコープ付き）で足りる。木やグリッドの行は部品の内側で描かれるので、
    スコープの印（b-xxxx 属性）が付かず、.razor.css からは当たらない（§7 と同じ形）。

    **DxTreeList に専用のクラスは無い**（2026-09-12 実測）＝テーマの CSS に dxbl-treelist-* は
    1 つも無く、木はグリッドの dxbl-grid / dxbl-grid-table をそのまま使う。
    dxbl-treelist-table と書いた最初の版は**どの要素にも当たらず、何も起きなかった**
    （選択子が外れただけなので、例外もログも出ない）。
*/

/*
    まだ読んでいないメールの行（MailboxInbox の CustomizeElement が付ける）。
    スレッドの行は**中に未読が 1 通でもあれば**太字になる＝畳んだままでも新着が分かる。

    **行とセルの両方に当てる**＝DevExpress は tr ではなく td に font-weight を持っているので、
    tr だけを太字にしても見た目が変わらない。子選択子（>）にしないのは、
    版によって行と td のあいだに入れ物が挟まることがあるため（どちらも例外もログも出ない）。
*/
.alt-mail-unread,
.alt-mail-unread td {
    font-weight: 700 !important;
}

/*
    受信ボックスの行の高さ。**SizeMode.Small の 1.5 倍**。
    件名と本文の頭を並べて読む一覧なので、詰まった行では拾い読みができない。

    値の出どころ（テーマの core.min.css を実測）:
      .dxbl-grid.dxbl-sm … font-size 0.75rem（12px）／line-height 1.333（＝16px）
                            --dxbl-grid-text-cell-padding-y 0.250125rem（≒4px）
      行の高さ ＝ 16 ＋ 4 × 2 ＝ 24px → その 1.5 倍は 36px
      余白 ＝（36 − 16）÷ 2 ＝ 10px ＝ 0.625rem

    **高さではなく余白の変数を書き換える**＝セルの padding は
    `padding: var(--dxbl-grid-text-cell-padding-y) …` で入るので、同じ td の上で変数を定義し直せば
    そのまま差し替わる。td へ height を直接書くと、中身の入れ物と二重に効いて行がずれる版がある。

    **tbody の行だけに当てる**＝見出しと絞り込みの行は元の高さのまま
    （変数は使う要素の側で解決されるので、ここで定義すれば本文の行にしか効かない）。
*/
.alt-mail-rows .dxbl-grid-table > tbody > tr > td {
    --dxbl-grid-text-cell-padding-y: 0.625rem;
}

/*
    スレッドを切り離すための受け皿（受信ボックスの下の帯）。

    **中身を持たないグリッド**で作っている＝DevExpress の行は**グリッドか木にしか落とせない**
    （落とし先は「データ領域」だけで、フィルター行もページャも受け取らない。素の div も同じ）。
    そこで列を 1 つだけ持つ空のグリッドを置き、見出しを隠して帯として見せている。

    **見出しは CSS で隠す**＝DxGrid に見出しを消す引数は無い（実測）。
*/
.alt-mail-dropzone {
    margin-top: 8px;
    border-style: dashed !important;
}

.alt-mail-dropzone thead {
    display: none !important;
}

/* 帯として読める高さに留める（既定の空データ領域は縦に大きく空く）。 */
.alt-mail-dropzone .dxbl-grid-empty-data-area {
    --dxbl-grid-empty-data-area-padding-y: 1rem;
}

/*
    強調の色（洋二さんの指定で**薄い黄色**）。一覧のマウスの下の行と、
    やり取りの詳細で押した 1 通の両方が同じ色を使う。

    **シェルのトークンをそのまま借りる**＝薄い黄色とその暗いテーマ版は app.css と themes.css に
    --alt-warning-bg として既にあり、テーマの切り替えもあちらで済んでいる。
    ここで独自の 2 色を決めると、配色を見直したときにこのモジュールだけ古い黄色が残る
    （警告ではない用途へ借りる前例は app.css の横断検索のヒット強調）。
*/
:root {
    --alt-mail-highlight: var(--alt-warning-bg);
}

/*
    受信ボックスでマウスの下にある行。

    **CSS で背景を上書きするのではなく、部品の設定（HighlightRowOnHover）を立てて
    色の変数だけ差し替える**（2026-09-13 実測）＝テーマの規則は
    `.dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr:hover` の形で、
    このクラスは HighlightRowOnHover を立てたときにだけ付く。
    設定を立てずに tr:hover へ直接背景を書くと、選択中の行や編集中の行に当たる
    テーマ側の規則（より詳細度が高い）と食い違い、行によって色が変わる。

    **クラスを 2 つ重ねる**＝テーマは --dxbl-grid-hover-bg を `.dxbl-grid` の側で定義しており
    （2026-09-13 にテーマの core.min.css を実測）、`.alt-mail-rows` だけでは詳細度が同じ（0,1,0）で
    読み込み順に勝敗が左右される。

    **CssClass は .dxbl-grid そのものに付く**＝app.css の .alt-grid の節に
    「グリッド直下の子要素は実機で確認済み」として dxbl-grid-top-panel などが並んでおり、
    CssClass を付けた要素がその親（外枠）であることが分かる。内側に素の .dxbl-grid は無い。
*/
.alt-mail-rows.dxbl-grid {
    --dxbl-grid-hover-bg: var(--alt-mail-highlight);
}

/*
    やり取りの詳細で、受信ボックスから押した 1 通。

    **クラスを 2 つ重ねる**（.alt-card.alt-mail-picked）＝.alt-card が
    `background: var(--alt-surface)` を持っており、クラス 1 つでは読み込み順に勝敗が左右される。

    **一括指定（background）ではなく background-color で書く**＝地紋のテーマは
    motifs.css が .alt-card に background-image で柄を敷いており、一括指定はそれを潰す。
    強調した 1 通だけ柄が消える形になる。
*/
.alt-card.alt-mail-picked {
    background-color: var(--alt-mail-highlight);
}