/*
//============================================================================================
// system name    : －－－－
// program name   : bAsTable StyleSheet
// file name      : bAsTable.css
// summary        : HTML Table用スタイルシート
//--------------------------------------------------------------------------------------------
// author         : 👍bAs)Yoshi
// creation date  : 2024/10/21
// version        : 1.00
//--------------------------------------------------------------------------------------------
// change history : 2024/10/21 👍bAs)Yoshi 新規作成
// 
// Copyright 2024 bEST ANSWER's Inc.
//============================================================================================
*/

@charset "UTF-8";



/* ＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠ */
/* ＠ 入力可一覧（テーブル）内の入力項目要素のスタイルは『bAsInput.css』に定義してあります ＠ */
/* ＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠ */


/* ===================================================================== */
/* --- テーブル内入力項目要素の外観設定：通常時　　※基本透明にしてそこに何も無いように見せる ---*/
/*tbody input.bAs_OriginalValue_Column,
tbody .bAs_OriginalValue_Column input,
tbody select.bAs_OriginalValue_Column,
tbody .bAs_OriginalValue_Column select {
    background-color: transparent;
    border: solid 2px transparent;
    color: black;
}*/
/* --- テーブル内入力項目要素の外観設定：通常時（フォーカス） ---*/
/*    tbody input.bAs_OriginalValue_Column:focus,
    tbody .bAs_OriginalValue_Column input:focus,
    tbody select.bAs_OriginalValue_Column:focus,
    tbody .bAs_OriginalValue_Column select:focus {
        background-color: lightcyan;
    }*/
/* --- テーブル内入力項目要素の外観設定：値変更時 ---*/
/*tbody input.bAs_ChangedValue_Column,
tbody .bAs_ChangedValue_Column input,
tbody select.bAs_ChangedValue_Column,
tbody .bAs_ChangedValue_Column select {
    background-color: transparent;
    border: solid 2px lightseagreen;
    color: olivedrab;
}*/
/* --- テーブル内入力項目要素の外観設定：値変更時（フォーカス） ---*/
/*    tbody input.bAs_ChangedValue_Column:focus,
    tbody .bAs_ChangedValue_Column input:focus,
    tbody select.bAs_ChangedValue_Column:focus,
    tbody .bAs_ChangedValue_Column select:focus {
        background-color: #badcad;
    }*/

/* QuickGridで表示のみ（<BAs_Input_●●>を使用しない）場合テキストの余白を <BAs_Input_●●>と同じ幅分<p>タグに持たせる */
.quickgrid td > p {
    padding: 5px 7px;
}

/* td内に複数データをdivで区切って表示する場合にも余白を持たせる */
.quickgrid td > div p {
    padding: 5px 7px;
}

/* Microsoft側が自動で吐き出してしまう<div>のclass（col-header-content）にcssを付与 */
/* QuickGridを使用した場合のヘッダー内の入力コンポーネントの幅を <th> の幅いっぱいにする */
table.bAs-InputGrid > thead > tr > th > div.col-header-content {
    width: 100%;
    height: 100%; /* ヘッダー部分の高さを100％に広げる */
}

/* --- QuickGridのヘッダーをタイトル名をタイトルの長さで可変し、入力コンポーネントはヘッダーの下部に固定する ---*/
/* テーブルのヘッダー行をflexコンテナとして扱い、テーブルの標準レイアウトを崩して、タイトル名を可変で伸縮させ、入力コンポーネントを下に固定する制御を可能にする */
table.bAs-InputGrid > thead > tr {
    display: flex;
}

/* --- Microsoft側が自動で吐き出してしまう<div>（class名：col-header-content）がある為<div>が入れ子になっている --- */
/* ヘッダー全体の高さを100％で指定して、タイトル名と入力コンポーネントを縦方向に配置させる */
table.bAs-InputGrid > thead > tr > th > div.col-header-content > div:first-child {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* タイトル名をflex: 1;で親要素の高さに対して残りのスペースを埋めるように伸ばす。上下左右中央に配置 */
table.bAs-InputGrid > thead > tr > th > div.col-header-content > div:first-child > div:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* display: block;でテーブルの自動レイアウトから切り離し、独立して制御させる */
/* <thead>をflexでテーブル行ではなくflexコンテナとして扱う為<thead>と<tbody>を同じ列幅で揃える処理をしなくなり<tbody>側は「残りの幅を全部使う」と解釈され、最初の列が画面いっぱいに広がってしまう為 */
table.bAs-InputGrid > tbody {
    display: block;
    margin-top: 1px; /* 編集行の枠線を消さない */
}

table.bAs-InputGrid {
    margin-right: 1px; /* 編集時の行の枠線右端が出ないため、1px入れて枠線を出す */
}

/* ===============================================================================================================
    QuickGridのテーマ設定
  ===============================================================================================================*/
.quickgrid [theme=bAs-TableStyle-Cyan01],
.quickgrid [theme=bAs-TableStyle-Gray01],
.quickgrid [theme=bAs-TableStyle-Blue01],
.quickgrid [theme=bAs-TableStyle-Magenta01],
.quickgrid [theme=bAs-TableStyle-Violet01],
.quickgrid [theme=bAs-TableStyle-Coral01],
.quickgrid [theme=bAs-TableStyle-Navy01],
.quickgrid [theme=bAs-TableStyle-Brown01] {
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--bAs_FONT_SIZE_L);
}

/* --- テーブルスクロール時ヘッダ固定設定 ---*/
.quickgrid[theme=bAs-TableStyle-Cyan01] thead,
.quickgrid[theme=bAs-TableStyle-Gray01] thead,
.quickgrid[theme=bAs-TableStyle-Blue01] thead,
.quickgrid[theme=bAs-TableStyle-Magenta01] thead,
.quickgrid[theme=bAs-TableStyle-Violet01] thead,
.quickgrid[theme=bAs-TableStyle-Coral01] thead,
.quickgrid[theme=bAs-TableStyle-Navy01] thead,
.quickgrid[theme=bAs-TableStyle-Brown01] thead {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: var(--bAs_FONT_SIZE_LL);
}
/* --- テーブルヘッダタイトル中央寄せ ---*/
/* --- テーブルヘッダ文字色背景色設定 ---*/
/*.col-title　で文字色を白にする設定は効かなかったのでth要素に付与する　Sato.Yamada */
/*ヘッダにソートボタンがある場合の対応を追加 Sato.Yamada*/
/*↑【ソートボタン表示（HeaderTemplate未使用）時の対応】ヘッダタイトルの上下左右の配置の中央寄せを追加 Shibasaki*/
/*↑【ソートボタン表示（HeaderTemplate未使用）時の対応】ヘッダタイトル文字の太字対応 Shibasaki*/
.quickgrid[theme=bAs-TableStyle-Cyan01] th,
.quickgrid[theme=bAs-TableStyle-Cyan01] th button,
.quickgrid[theme=bAs-TableStyle-Gray01] th,
.quickgrid[theme=bAs-TableStyle-Gray01] th button,
.quickgrid[theme=bAs-TableStyle-Blue01] th,
.quickgrid[theme=bAs-TableStyle-Blue01] th button,
.quickgrid[theme=bAs-TableStyle-Magenta01] th,
.quickgrid[theme=bAs-TableStyle-Magenta01] th button,
.quickgrid[theme=bAs-TableStyle-Violet01] th,
.quickgrid[theme=bAs-TableStyle-Violet01] th button,
.quickgrid[theme=bAs-TableStyle-Coral01] th,
.quickgrid[theme=bAs-TableStyle-Coral01] th button,
.quickgrid[theme=bAs-TableStyle-Navy01] th,
.quickgrid[theme=bAs-TableStyle-Navy01] th button,
.quickgrid[theme=bAs-TableStyle-Brown01] th,
.quickgrid[theme=bAs-TableStyle-Brown01] th button {
    justify-items: center;
    color: white;
    justify-content: center;
    font-weight:bold;
    align-items:center;
}
/* --- テーブル th td border設定 ---*/
.quickgrid[theme=bAs-TableStyle-Cyan01] th, .quickgrid[theme=bAs-TableStyle-Cyan01] td,
.quickgrid[theme=bAs-TableStyle-Gray01] th, .quickgrid[theme=bAs-TableStyle-Gray01] td,
.quickgrid[theme=bAs-TableStyle-Blue01] th, .quickgrid[theme=bAs-TableStyle-Blue01] td,
.quickgrid[theme=bAs-TableStyle-Magenta01] th, .quickgrid[theme=bAs-TableStyle-Magenta01] td,
.quickgrid[theme=bAs-TableStyle-Violet01] th, .quickgrid[theme=bAs-TableStyle-Violet01] td,
.quickgrid[theme=bAs-TableStyle-Coral01] th, .quickgrid[theme=bAs-TableStyle-Coral01] td,
.quickgrid[theme=bAs-TableStyle-Navy01] th, .quickgrid[theme=bAs-TableStyle-Navy01] td,
.quickgrid[theme=bAs-TableStyle-Brown01] th, .quickgrid[theme=bAs-TableStyle-Brown01] td {
    border: 1px solid white;
}

/* --- テーブル行の高さ指定 ---*/
/* --- テーブル改行なしでtd幅を超える場合は「...」の指定 ---*/
.quickgrid[theme=bAs-TableStyle-Cyan01] td,
.quickgrid[theme=bAs-TableStyle-Gray01] td,
.quickgrid[theme=bAs-TableStyle-Blue01] td,
.quickgrid[theme=bAs-TableStyle-Magenta01] td,
.quickgrid[theme=bAs-TableStyle-Violet01] td,
.quickgrid[theme=bAs-TableStyle-Coral01] td,
.quickgrid[theme=bAs-TableStyle-Navy01] td,
.quickgrid[theme=bAs-TableStyle-Brown01] td {
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    text-overflow: ellipsis;
}

/* 行padding設定 */
.quickgrid[theme=bAs-TableStyle-Cyan01] th,
.quickgrid[theme=bAs-TableStyle-Gray01] th,
.quickgrid[theme=bAs-TableStyle-Blue01] th,
.quickgrid[theme=bAs-TableStyle-Magenta01] th,
.quickgrid[theme=bAs-TableStyle-Violet01] th,
.quickgrid[theme=bAs-TableStyle-Coral01] th,
.quickgrid[theme=bAs-TableStyle-Navy01] th,
.quickgrid[theme=bAs-TableStyle-Brown01] th {
    padding: 6px 0;
    vertical-align: middle;
}
.quickgrid[theme=bAs-TableStyle-Cyan01] td,
.quickgrid[theme=bAs-TableStyle-Gray01] td,
.quickgrid[theme=bAs-TableStyle-Blue01] td,
.quickgrid[theme=bAs-TableStyle-Magenta01] td,
.quickgrid[theme=bAs-TableStyle-Violet01] td,
.quickgrid[theme=bAs-TableStyle-Coral01] td,
.quickgrid[theme=bAs-TableStyle-Navy01] td,
.quickgrid[theme=bAs-TableStyle-Brown01] td {
    /*padding: 2px 4px;　 QuickGridのtdタグの余白をなくす(tdタグで余白を持つろと編集可能項目と表示のみ項目で余白に違いが出るため)　*/
    vertical-align: middle;
}

/* ===============================================================================================================*/
/* ■ QuickGridの色パターン化 ■ */
/* ===============================================================================================================*/
/* --- QuickGridのレイアウト01 ---*/
.quickgrid[theme=bAs-TableStyle-Cyan01] thead {
    background-color: #008080;
}
/* --- QuickGridのレイアウト02 ---*/
.quickgrid[theme=bAs-TableStyle-Gray01] thead {
    background-color: #696969;
}
/* --- QuickGridのレイアウト03 ---*/
.quickgrid[theme=bAs-TableStyle-Blue01] thead {
    background-color: #19448e;
}
/* --- QuickGridのレイアウト04 ---*/
.quickgrid[theme=bAs-TableStyle-Magenta01] thead {
    background-color: #d04f97;
}
/* --- QuickGridのレイアウト05 ---*/
.quickgrid[theme=bAs-TableStyle-Violet01] thead {
    background-color: #7058a3;
}
/* --- QuickGridのレイアウト06 ---*/
.quickgrid[theme=bAs-TableStyle-Coral01] thead {
    background-color: #ef857d;
}
/* --- QuickGridのレイアウト07 ---*/
.quickgrid[theme=bAs-TableStyle-Navy01] thead {
    background-color: #003882;
}
/* --- QuickGridのレイアウト08 ---*/
.quickgrid[theme=bAs-TableStyle-Brown01] thead {
    background-color: #75422D;
}
/* ===================================================================== */
/* ■ 入力可一覧（テーブル）行用 ■ */
/* ===================================================================== */
/*奇数行の色指定*/
table.bAs-InputGrid > tbody > tr:nth-child(2n) {
    background-color: #efeeee;
}
/*偶数行の色指定*/
table.bAs-InputGrid > tbody > tr:nth-child(2n+1) {
    background-color: #ffffff;
}
/*行のホバー設定*/
table.bAs-InputGrid > tbody > tr:hover {
    /* background-color: #55DB7677;*/
    outline: 1px dotted #90326d;
}
/* --- 入力可一覧（テーブル）内の入力項目要素の外側の＜div＞に入力コンポーネントの場合破線が薄く入るように見せる ---*/
table.bAs-InputGrid > tbody > tr > td > div:has(input:not([type="checkbox"]),textarea, select) {
    border: 1px dashed #03969647;
}
/* --- 入力可一覧（テーブル）内の編集済み行のハイライト表示 ---*/
table.bAs-InputGrid > tbody > tr:has(.bAs_InputComponent_Edited) {
    background-color: #fffbb0;
}
/* --- 入力可一覧（テーブル）内の編集済み行の外観設定：値変更時《フォーカス時》 ---*/
/*table.bAs-InputGrid > tbody > tr:has(.bAs_InputComponent_Edited, bAs_Selected_ViewItem):focus-within {
    background-color: #00829C55;
}*/
/* --- 入力可一覧（テーブル）内の選択済みの行の<td>の外枠に線が入る---*/
/* --- 入力可一覧（テーブル）内のエラーの行のハイライト表示 ---*/
table.bAs-InputGrid > tbody > tr:has(.bAs_InputComponent_Invalid) {
    background-color: #ffd6d6;
}
/* --- 入力可一覧（テーブル）内のエラーの行の外観設定：エラー時《フォーカス時》---*/
/*table.bAs-InputGrid > tbody > tr:has(.bAs_InputComponent_Invalid, bAs_Selected_ViewItem):focus-within {
    background-color: #00829C55;
}*/
/*選択行のカラー設定*/
/*選択行にクラス名.bAs_Selected_ViewIteを持つ関数がない為使えない*/
/*table.bAs-InputGrid > tbody > tr:has(.bAs_Selected_ViewItem) > td {
    background-position: 0px 0, 0 0, 100% 0, 0 100%;
    background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
    background-repeat: no-repeat;
    background-image: linear-gradient(0deg, #90326d 15%, transparent 15%, transparent 85%, #90326d 85%), linear-gradient(90deg, #90326d 15%, transparent 15%, transparent 85%, #90326d 85%), linear-gradient(180deg, #90326d 15%, transparent 15%, transparent 85%, #90326d 85%), linear-gradient(270deg, #90326d 15%, transparent 15%, transparent 85%, #90326d 85%);
}*/
/* --- 入力可一覧（テーブル）内の入力項目要素の外側の＜div＞に入力コンポーネントの場合破線が薄く入るように見せる ---*/
table.bAs-InputGrid > tbody > tr > td > div:has(input:not([type="checkbox"]),textarea, select) {
    border: 1px dashed #03969647;
}
/* --- 入力可一覧（テーブル）内の選択済みの行の外観設定：通常時《フォーカス時》 ---*/
/*table.bAs-InputGrid > tbody > tr:has(.bAs_Selected_ViewItem):focus-within {
    background-color: #00829C55;
}*/
/* --- 入力可一覧（テーブル）内の選択前の行の外観設定：通常時《フォーカス時》 ---*/
table.bAs-InputGrid > tbody > tr:focus-within {
    background-color: #00829C55;
}
/* ===================================================================== */
/* ■ 入力可一覧（テーブル）内の入力項目要素用 ■ */
/* ===================================================================== */
table.bAs-InputGrid > tbody .bAs_InputComponent > label {
    padding: 0 1px;
}
/* --- 入力可一覧（テーブル）内の編集済みの入力項目要素がある行のハイライト表示 ---*/
table.bAs-InputGrid > tbody > tr:has(.bAs_InputComponent_Edited) {
    /*outline: 2px solid orange;*/
    outline: 1px solid orange;
}
/* --- 入力可一覧（テーブル）内の入力項目要素の外観設定：通常時　　※枠線・背景を透過にして表示項目のように見せる ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent input:not([type="radio"]):not([type="checkbox"]):enabled,
table.bAs-InputGrid > tbody .bAs_InputComponent select:enabled,
table.bAs-InputGrid > tbody .bAs_InputComponent textarea:enabled {
    background-color: transparent;
    border: solid 2px transparent;
}
/* --- 入力可一覧（テーブル）内の入力項目要素の外観設定：通常時《フォーカス時》 ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent input:not([type="radio"]):not([type="checkbox"]):enabled:focus,
table.bAs-InputGrid > tbody .bAs_InputComponent select:enabled:focus,
table.bAs-InputGrid > tbody .bAs_InputComponent textarea:enabled:focus {
    background-color: lightcyan;
}

/* --- 入力項目要素の外観設定：読み取り専用時（ReadOnly） のフォーカス時の背景色を指定---*/
table.bAs-InputGrid > tbody .bAs_InputComponent input:not([type="radio"]):not([type="checkbox"]):read-only:focus,
table.bAs-InputGrid > tbody .bAs_InputComponent select:read-only:focus,
table.bAs-InputGrid > tbody .bAs_InputComponent textarea:read-only:focus {
    background-color: #f2f2f2;
}

/* --- 入力可一覧（テーブル）内の入力項目要素の外観設定：編集不可の場合　※枠線・背景を透過にして表示項目のように見せる ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent input:not([type="radio"]):not([type="checkbox"]):disabled,
table.bAs-InputGrid > tbody .bAs_InputComponent select:disabled,
table.bAs-InputGrid > tbody .bAs_InputComponent textarea:disabled {
    border: solid 2px transparent;
}

/* --- 入力可一覧（テーブル）内の入力項目要素の外観設定：値変更時 ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent_Edited input:not([type="radio"]):not([type="checkbox"]):enabled,
table.bAs-InputGrid > tbody .bAs_InputComponent_Edited select:enabled,
table.bAs-InputGrid > tbody .bAs_InputComponent_Edited textarea:enabled {
    background-color: #fffeeb !important;
    border-color: transparent !important;
}

/* --- 入力可一覧（テーブル）内の入力項目要素の外観設定：値変更時《フォーカス時》 ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent_Edited input:not([type="radio"]):not([type="checkbox"]):enabled:focus,
table.bAs-InputGrid > tbody .bAs_InputComponent_Edited select:enabled:focus,
table.bAs-InputGrid > tbody .bAs_InputComponent_Edited textarea:enabled:focus {
    border-color: #ffb326 !important;
}

/* --- 入力可一覧（テーブル）内の入力項目要素の外観設定：エラー時 ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent_Invalid input:not([type="radio"]):not([type="checkbox"]):enabled,
table.bAs-InputGrid > tbody .bAs_InputComponent_Invalid select:enabled,
table.bAs-InputGrid > tbody .bAs_InputComponent_Invalid textarea:enabled {
    background-color: #ffedeb !important;
    border-color: transparent !important;
}
/* --- 入力項目要素の外観設定：エラー時（フォーカス） ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent_Invalid input:not([type="radio"]):not([type="checkbox"]):enabled:focus,
table.bAs-InputGrid > tbody .bAs_InputComponent_Invalid select:enabled:focus,
table.bAs-InputGrid > tbody .bAs_InputComponent_Invalid textarea:enabled:focus {
    background-color: lightpink;
    border-color: red !important;
}
/* ===================================================================== */
/* ■ 入力可一覧（テーブル）内の入力（っぽい）コンポーネント要素用 ■ */
/* ===================================================================== */
/* --- 入力（っぽい）コンポーネント要素の外観設定：通常時（テーブルを使用する場合）※枠線・背景を透過にして表示項目のように見せる ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent .bAs_Input_Label01_Input {
    background-color: transparent;
    border: solid 2px transparent;
}
/* ■■■ 使用しない可能性もあるが一応定義している ■■■*/
/* --- 入力（っぽい）コンポーネント要素の外観設定：通常時《フォーカス時》 ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent .bAs_Input_Label01_Input:focus {
    background-color: #608991;
}
/* --- 入力（っぽい）コンポーネント要素の外観設定：値変更時 ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent_Edited .bAs_Input_Label01_Input {
    background-color: #fffeeb !important;
    border-color: transparent !important;
}
/* --- 入力（っぽい）コンポーネント要素の外観設定：値変更時 《フォーカス時》---*/
table.bAs-InputGrid > tbody .bAs_InputComponent_Edited .bAs_Input_Label01_Input:focus {
    border-color: #ffb326 !important;
}
/* --- 入力（っぽい）コンポーネント要素の外観設定：エラー時  ---*/
table.bAs-InputGrid > tbody .bAs_InputComponent_Invalid .bAs_Input_Label01_Input {
    background-color: #ffedeb !important;
    border-color: transparent !important;
}
/* --- 入力（っぽい）コンポーネント要素の外観設定：エラー時 《フォーカス時》---*/
table.bAs-InputGrid > tbody .bAs_InputComponent_Invalid.bAs_Input_Label01_Input:focus {
    background-color: lightpink;
    border-color: red !important;
}