@charset "UTF-8";
/**
 * ====================================================
 * AG Grid Wrapper Style (Standalone, v33+ Theming API)
 *
 * AGGrid ラッパー用の完全独立スタイル。
 * AG Grid v33+ Theming API 使用時のスタイル。
 * ag-grid.css / ag-theme-balham.css の読み込みは不要。
 *
 * 読み込み順序:
 *   <script src="/js/ag-grid/ag-grid-community.min.js"></script>
 *   <script src="/js/ag_grid.js"></script>
 *   <link  href="/css/ag_grid_addon.css" rel="stylesheet">
 * ====================================================
 */

/* ----------------------------------------------------
 * CSS 変数 (Light テーマ)
 * ---------------------------------------------------- */
:root,
[data-theme="light"] {
	--aggrid-font-size:        0.85rem;
	--aggrid-font-size-small:  0.8rem;

	--aggrid-text-color:       #666;
	--aggrid-border-color:     #d0d0d0;

	--aggrid-info-bg:          transparent;
	--aggrid-info-text:        #666;

	--aggrid-button-bg:        #fff;
	--aggrid-button-bg-hover:  #f5f9ff;
	--aggrid-button-bg-active: #e8eef7;
	--aggrid-button-border:    #c0c0c0;
	--aggrid-button-border-hover: #5a8dc2;
	--aggrid-button-text:      #333;
	--aggrid-button-text-disabled: #aaa;
	--aggrid-button-bg-disabled:   #f0f0f0;

	--aggrid-menu-bg:          #fff;
	--aggrid-menu-border:      #ccc;
	--aggrid-menu-text:        #333;
	--aggrid-menu-hover-bg:    #e8eef7;
	--aggrid-menu-hover-text:  #2a5db0;
	--aggrid-menu-separator:   #e0e0e0;
	--aggrid-menu-icon:        #888;
}

/* Dark テーマ */
[data-theme="dark"] {
	--aggrid-text-color:       #e0e0e0;
	--aggrid-border-color:     #44494f;

	--aggrid-info-bg:          transparent;
	--aggrid-info-text:        #ccc;

	--aggrid-button-bg:        #2d3138;
	--aggrid-button-bg-hover:  #3a4150;
	--aggrid-button-bg-active: #1e2126;
	--aggrid-button-border:    #44494f;
	--aggrid-button-border-hover: #82b4ff;
	--aggrid-button-text:      #e0e0e0;
	--aggrid-button-text-disabled: #666;
	--aggrid-button-bg-disabled:   #262a30;

	--aggrid-menu-bg:          #2d3138;
	--aggrid-menu-border:      #44494f;
	--aggrid-menu-text:        #e0e0e0;
	--aggrid-menu-hover-bg:    #3a4150;
	--aggrid-menu-hover-text:  #82b4ff;
	--aggrid-menu-separator:   #44494f;
	--aggrid-menu-icon:        #aaa;
}

/* ----------------------------------------------------
 * AG Grid v33+ では Theming API で JS 側からテーマを指定するため、
 * CSS でテーマクラス (.ag-theme-balham 等) を当てる必要はない。
 * このファイルではラッパー固有のスタイル (infoBar, toolbar, 行番号,
 * リサイズハンドル, 右クリックメニュー等) のみを定義する。
 *
 * テーマのカスタマイズ (色変更等) は呼び出し側で:
 *   const myTheme = agGrid.themeBalham.withParams({ accentColor: 'blue' });
 *   new AGGrid('#agGrid', { theme: myTheme, ... });
 * のように設定する。
 * ---------------------------------------------------- */


/* ====================================================
 * Frame (Grid 外枠)
 * ==================================================== */
.ag-grid-frame {
	position: relative;
	width: 100%;
	z-index: 2;
	font-size: var(--aggrid-font-size);
	color: var(--aggrid-text-color);
}

/* AG Grid コンテナ */
.ag-grid-frame .ag-grid-container {
	margin-top: 0;
}

/* ----------------------------------------------------
 * リサイズラッパー + 仕切り線スタイルのハンドル
 *
 * デザイン:
 *   Grid 直下に細い水平バーを配置。ホバー/ドラッグ中はバーが
 *   ハイライトされる。Claude.ai のような中央仕切り線風 UX。
 * ---------------------------------------------------- */
.ag-grid-resize-wrapper {
	position: relative;
	margin-top: 5px;
	box-sizing: border-box;
}

/* AG Grid 内部 DOM もラッパーの高さに追従させる */
.ag-grid-resize-wrapper .ag-grid-container,
.ag-grid-resize-wrapper .ag-root-wrapper,
.ag-grid-resize-wrapper .ag-root {
	height: 100% !important;
}

/* 水平の仕切り線ハンドル */
.ag-grid-resize-handle {
	width: 100%;
	height: 8px;
	cursor: row-resize;
	background: transparent;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	transition: background 0.15s;
}

/* ハンドルの中央に小さな目印 (グリップ) */
.ag-grid-resize-handle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: var(--aggrid-border-color);
	opacity: 0.5;
	transition: opacity 0.15s, background 0.15s;
}

.ag-grid-resize-handle:hover {
	background: var(--aggrid-button-bg-hover);
}

.ag-grid-resize-handle:hover::before {
	opacity: 1;
	background: var(--aggrid-button-border-hover);
}

.ag-grid-resize-handle.dragging {
	background: var(--aggrid-button-bg-active);
}

.ag-grid-resize-handle.dragging::before {
	background: var(--aggrid-button-border-hover);
	opacity: 1;
}

/* ====================================================
 * Info Bar (件数・選択数表示)
 * ==================================================== */
.ag-grid-info {
	padding: 4px 8px;
	font-size: var(--aggrid-font-size-small);
	color: var(--aggrid-info-text);
	background: var(--aggrid-info-bg);
}

/* infoBar が Grid の下に来る場合: Grid のフッタに馴染ませる */
.ag-grid-resize-wrapper + .ag-grid-info,
.ag-grid-resize-handle + .ag-grid-info,
.ag-grid-container + .ag-grid-info {
	border-top: 1px solid var(--aggrid-border-color);
	background: var(--ag-header-background-color, transparent);
	margin-top: -1px;
}

.ag-grid-info i {
	margin: 0 15px;
	color: var(--aggrid-border-color);
	font-style: normal;
}

.ag-grid-info input {
	margin: 0 .125em .25em 0;
	vertical-align: middle;
}

.ag-grid-info label {
	cursor: pointer;
}

.ag-grid-info b {
	font-weight: 600;
}

/* 集計計算ボタン (FontAwesome アイコン) */
.ag-count-cal {
	margin-left: 5px;
	cursor: pointer;
	font-family: 'FontAwesome';
	font-size: 1.1em;
	color: var(--aggrid-menu-icon);
}
.ag-count-cal::after        { content: "\f1ec"; }
.ag-count-cal.action::after { content: "\f021"; }

/* ====================================================
 * Toolbar (naviMenu 用ボタン)
 * ==================================================== */
.ag-grid-frame .ag-toolbar {
	padding: 5px 0;
	display: none;
}

.ag-grid-frame.ag-show-toolbar .ag-toolbar {
	display: block;
}

.ag-grid-frame .ag-toolbar button {
	border-radius: 0.2rem;
	margin: 2px;
	cursor: pointer;
	font-size: 0.9em;
	line-height: 2.25em;
	border: 1px solid var(--aggrid-button-border);
	background: var(--aggrid-button-bg);
	color: var(--aggrid-button-text);
	padding: 0 20px;
	transition: background 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.ag-grid-frame .ag-toolbar button i.fa {
	padding-right: 4px;
}

.ag-grid-frame .ag-toolbar button:hover:not([disabled]) {
	background: var(--aggrid-button-bg-hover);
	border-color: var(--aggrid-button-border-hover);
}

.ag-grid-frame .ag-toolbar button:active:not([disabled]) {
	background: var(--aggrid-button-bg-active);
}

.ag-grid-frame .ag-toolbar button[disabled] {
	cursor: not-allowed;
	background: var(--aggrid-button-bg-disabled);
	color: var(--aggrid-button-text-disabled);
	border-color: var(--aggrid-button-border);
}

/* ====================================================
 * 行番号列
 *
 * セル: .ag-row-number-cell
 * ヘッダ: .ag-row-number-header
 * 個別画面でカスタマイズしたい場合は呼び出し側で
 *   showRowNumber: { cellClass: ..., headerClass: ..., cellStyle: {...} }
 * のように上書きも可能。
 * ==================================================== */
.ag-row-number-cell {
	text-align: center;
	color: var(--aggrid-menu-icon);
	background-color: var(--ag-header-background-color, #f5f5f5);
	font-size: 0.75em;
}

/* ヘッダのテキストを中央配置 */
.ag-row-number-header .ag-header-cell-label {
	justify-content: center;
}

/* ====================================================
 * リンクセル (AGGrid.linkRenderer 用)
 *
 * セル内の値をクリック可能にする時に使う。
 *   cellRenderer: AGGrid.linkRenderer({ onClick: ... })
 *   cellRenderer: AGGrid.linkRenderer({ href: function(v, row){...} })
 * ==================================================== */
.ag-grid-link {
	color: var(--aggrid-button-border-hover, #5a8dc2);
	cursor: pointer;
	text-decoration: underline;
}

.ag-grid-link:hover {
	color: var(--aggrid-menu-hover-text, #2a5db0);
	text-decoration: underline;
}

a.ag-grid-link {
	color: var(--aggrid-button-border-hover, #5a8dc2);
}

a.ag-grid-link:visited {
	color: var(--aggrid-button-border-hover, #5a8dc2);
}

/* ====================================================
 * 中央揃えセル / ヘッダ (汎用)
 *
 * 使い方:
 *   { field: 'status', cellClass: 'ag-center-aligned-cell',
 *                      headerClass: 'ag-center-aligned-header' }
 * ==================================================== */
.ag-center-aligned-cell {
	text-align: center;
}

.ag-center-aligned-cell .ag-cell-wrapper {
	justify-content: center;
}

.ag-center-aligned-header .ag-header-cell-label {
	justify-content: center;
}

/* ====================================================
 * D&D ハンドル列
 *
 * AG Grid の rowDrag セル内部には .ag-drag-handle 要素が
 * 自動生成される。これは inline 要素のため、親側の text-align や
 * 内側要素自身にマージン操作で中央寄せにする必要がある。
 *
 * 注意: AG Grid 公式テーマは .ag-row-drag に
 *   margin-right: var(--ag-cell-widget-spacing)
 * を当てているため、!important で打ち消さないと中央配置できない。
 * ==================================================== */
.ag-row-drag-cell {
	cursor: grab;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ag-row-drag-cell .ag-row-drag,
.ag-row-drag-cell .ag-drag-handle {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.ag-row-drag-cell:active {
	cursor: grabbing;
}

/* ====================================================
 * 選択チェックボックス列 (中央配置)
 *
 * D&D 列と同じく、AG Grid 公式テーマが
 * .ag-selection-checkbox に margin-right を当てているため、
 * !important で打ち消す。
 * ==================================================== */
.ag-selection-cell {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ag-selection-cell .ag-selection-checkbox,
.ag-selection-cell .ag-checkbox {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/* ヘッダ全選択チェックボックスを中央配置
 *
 * AG Grid v33+ のヘッダ DOM 構造:
 *   .ag-selection-header
 *     ├ .ag-header-cell-resize        (リサイズハンドル)
 *     ├ .ag-labeled.ag-header-select-all  (★ チェックボックス本体)
 *     └ .ag-header-cell-comp-wrapper  (空のラベル領域、flex-grow で幅いっぱい)
 *
 * 問題: 3 番目の空ラベル領域が幅を奪うため、justify-content: center を当てても
 * チェックボックスが左寄りに見える。
 * 解決: 空のラベル領域を display: none で消して、チェックボックスだけが
 * 中央配置されるようにする。
 */
.ag-selection-header {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* 空のラベル領域を非表示 (チェックボックス列にはラベルが不要) */
.ag-selection-header .ag-header-cell-comp-wrapper {
	display: none !important;
}

/* チェックボックスのマージンも打ち消す */
.ag-selection-header .ag-header-select-all {
	margin: 0 auto !important;
}

/* ====================================================
 * 選択チェックボックス列 (AG Grid 自動生成)
 *
 * AG Grid 標準の rowSelection.checkboxes で自動生成された列。
 * 列のスタイルや配置は AG Grid テーマ標準に任せる。
 * ==================================================== */

/* ====================================================
 * Pinned Bottom Row (フッタ集計行)
 * ==================================================== */
.ag-floating-bottom-container .ag-row {
	font-weight: bold;
	background-color: var(--ag-header-background-color, #f5f5f5);
}

/* ====================================================
 * 右クリックメニュー
 * ==================================================== */
.aggrid-context-menu {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	min-width: 180px;
	background: var(--aggrid-menu-bg);
	border: 1px solid var(--aggrid-menu-border);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	font-size: var(--aggrid-font-size);
	color: var(--aggrid-menu-text);
	user-select: none;
	-webkit-user-select: none;
}

.aggrid-context-menu li {
	padding: 6px 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--aggrid-menu-text);
	transition: background 0.1s;
}

.aggrid-context-menu li:hover {
	background: var(--aggrid-menu-hover-bg);
	color: var(--aggrid-menu-hover-text);
}

.aggrid-context-menu li i {
	width: 14px;
	color: var(--aggrid-menu-icon);
	flex-shrink: 0;
}

.aggrid-context-menu li.separator {
	height: 1px;
	background: var(--aggrid-menu-separator);
	margin: 4px 0;
	padding: 0;
	cursor: default;
}

.aggrid-context-menu li.separator:hover {
	background: var(--aggrid-menu-separator);
}

/* 無効化状態の項目
 *   naviMenu からの転用項目で、選択件数が条件を満たさない場合に付与される。
 *   クリックしても何も起きず、ホバー時のハイライトもされない。
 */
.aggrid-context-menu li.disabled {
	color: var(--aggrid-button-text-disabled);
	cursor: not-allowed;
	opacity: 0.6;
}

.aggrid-context-menu li.disabled:hover {
	background: transparent;
	color: var(--aggrid-button-text-disabled);
}

.aggrid-context-menu li.disabled i {
	color: var(--aggrid-button-text-disabled);
}




.ag-floating-bottom .ag-cell, .ag-pinned-left-floating-bottom .ag-cell {
    border-top: 1px solid var(--ag-tab-selected-border-color);
    background-color: var(--ag-header-background-color);
}
.ag-floating-bottom .ag-cell:not(.ag-cell-focus):not(:last-child) {
	border-right-color: transparent;
}