/* 各ページで共有するスタイル定義 */

/* #region 【変数】 */

:root {
	/* 項目選択時のホバーの色（マウスカーソルが項目上に移動時の項目背景色）
		Components.Controls.Listのホバー色（薄い灰色） */
	--select-item-default-hover: #F0F0F0;
}

/* #endregion */

/* #region 【ページ】 */

/* ページのスタイル */
body {
	/* 背景色：薄い灰色 */
	background-color: var(--mud-palette-background-gray);
}

/* #endregion */

/* #region 【MudDialog】 */

/* ダイアログタイトルのスタイル */
.dialog-title {
	color: var(--mud-palette-primary-text);
	background-color: var(--mud-palette-primary);
	text-align: center;
}

/* #endregion */

/* #region 【MudDataGrid】 */

/* ヘッダ行のスタイル */
.mud-table-head.header-row {
	background-color: lightgray;
}

/* ヘッダ行のスタイル（スクロールしない固定ヘッダ用） */
.mud-table-sticky-header * .mud-table-root .mud-table-head.header-row .mud-table-cell {
	background-color: lightgray;
}

/* 列ヘッダの内容のスタイル（既定） */
.mud-data-grid th.mud-table-cell span.column-header {
	/* 列名を中央寄せにする（水平方向） */
	justify-content: center;
}

/* 列ヘッダの内容のスタイル（左寄せ設定用） */
.mud-data-grid th.mud-table-cell.align-left span.column-header {
	/* 列名を左寄せにする（水平方向） */
	justify-content: flex-start;
}

/* 編集不可セルのスタイル（MudTableも含む） */
td.mud-table-cell:not(.edit-mode-cell) {
    /* 編集不可のセル値の連続半角空白が1つにまとめられて表示されないようにする */
    white-space: pre-wrap;
}

/* データグリッドのチェックボックス列のスタイル */
.check-box-column {
	width: 4rem;
}

/*
	以下のスタイルの「div:not([data-custom-style-grid]).mud-data-grid」セレクタは
	data-custom-style-grid属性が未設定のデータグリッドが対象
*/

/* 列ヘッダ（th要素）,セル（td要素）のスタイル */
div:not([data-custom-style-grid]).mud-data-grid.mud-table-dense th.mud-table-cell,
div:not([data-custom-style-grid]).mud-data-grid.mud-table-dense td.mud-table-cell {
	/* 左右のパディングを合わせる
		Dense = trueの場合、左辺（16px）より右辺（24px）のパディングの方が広いため、
		中央寄せにしても中央から少し左に寄ってしまう現象の対策 */
	padding-left: 16px;
	padding-right: 16px;
}

/* チェックボックスセル（td要素）のスタイル */
div:not([data-custom-style-grid]).mud-data-grid td.mud-table-cell:has(input.mud-checkbox-input) {
	/* 中央寄せ */
	text-align: center;
}

/* チェックボックスセル（td要素）配下のdiv要素のスタイル */
div:not([data-custom-style-grid]).mud-data-grid td div.mud-input-control-boolean-input:has(input.mud-checkbox-input) {
	/* チェックボックスのdiv要素が中央寄せになるように
		（上記スタイルの「text-align: center;」が反映されるように）
		インラインブロックにし、チェックボックスの幅に合わせる */
	display: inline-block;
	width: fit-content;
}

/* #endregion */

/* #region 【MudTabs】 */

/* タブバーのスタイル（親要素の幅一杯の領域） */
div.mud-tabs-tabbar-content {
	/* 背景色：薄い灰色（ページ背景色） */
	background-color: var(--mud-palette-background-gray);
}

/* ダイアログのタブバーのスタイル（親要素の幅一杯の領域） */
div.mud-dialog-content div.mud-tabs-tabbar-content {
	/* 背景色：白（ダイアログ背景色） */
	background-color: white;
}

/* タブのスタイル */
div.mud-tab {
	/* 背景色：白 */
	background-color: white;
	/* 枠線：ページ背景色より少し濃い灰色 */
	border-color: var(--mud-palette-lines-default);
	border-width: 2px;
}

/* タブパネルのスタイル */
.tab-panel {
	/* タブパネルの高さを一杯に広げる */
	height: 100%;
}

/* タブパネルのスタイル（角丸ボーダーあり） */
.tab-panel-with-border {
	border-width: 1px;
	border-color: lightgrey;
	border-radius: 5px;
	height: 100%;
}

/* #endregion */

/* #region 【MudDatePicker】 */

/* 日付ピッカーのスタイル */
.date-picker {
	width: 10rem;
}

/* #endregion */

/* #region 【MudExCardList】 */

/* カードリストのスタイル */
div.mud-ex-card-list div.mud-ex-cards {
	/* 縦並びで折り返さないように変更（1列で縦に並べる）
		既定は横並びで折り返す設定のため、ダイアログの幅が広いと
		複数列になってしまう現象の回避 */
	flex-direction: column;
	flex-wrap: nowrap;
}

/* #endregion */

/* #region 【MudListItem】 */

/* リスト項目（div要素）配下のチェックボックス（input要素）の親（span要素）のスタイル */
div.mud-list-item span.mud-icon-button:has(input.mud-checkbox-input) {
	/* チェックボックスのパディング（4辺とも12px）が大きすぎて項目間が空いてしまうため、
			上下のパディングを小さくする */
	padding-top: 6px;
	padding-bottom: 6px;
}

/* #endregion */

/* #region 【縦書】 */

/* 縦書のスタイル */
.vertical-text {
	/*
		・縦書き（右から左）
		・全ての文字を縦向きに配置
	*/
	writing-mode: vertical-rl;
	text-orientation: upright;
}

/* #endregion */

/* #region 【CSSグリッド】 */

/* セル内で中心に配置するスタイル */
.center-center-in-cell {
	/* セル内の要素自身を水平方向および垂直方向で中央寄せ */
	justify-self: center;
	align-self: center;
}

/* #endregion */

/* === Blazor 接続エラーUIのスタイル ここから === */

/* 
  ・ダイアログ要素(#reconnecting, #disconnected)を非表示にする
  ・表示されるときのために、あらかじめ画面全体を覆うスタイルを定義しておく
*/
#reconnecting,
#disconnected {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1299;
}

/* 
  接続中の状態
  Blazorが親コンテナに 'components-reconnect-show' classを追加した時に、
  #reconnecting を表示する
*/
.components-reconnect-show #reconnecting {
    display: block;
}

/* 
  接続失敗の状態
  Blazorが親コンテナのclassを 'components-reconnect-failed' に変更した時に、
  #disconnected を表示する
*/
.components-reconnect-failed #disconnected {
    display: block;
}

/* === Blazor 接続エラーUIのスタイル ここまで === */