@charset "UTF-8";

:root {
	--app-header-height: 34px;
	--app-bottom-margin: 20px;
}

.grid-page {
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.grid-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	margin: 0 15px 0 0;
	background: #fff;
	border: 1px solid #dbe3ea;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(36, 49, 66, 0.04);
}

.grid-selector {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 8px;
	border-bottom: 1px solid var(--border, #dee2e6);
	background: var(--panel, #fff);
}

.grid-scroll-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.grid-pagination {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 32px;

	padding: 3px 6px;

	background: #f7f9fb;

	border-top: 1px solid #dbe3ea;
	border-bottom: 1px solid #dbe3ea;

	font-size: 12px;
	color: #526274;
}

.grid-pagination-top {
	border-top: none;

	/* Table Header と階層を分けるため、Pagination は明るい面にする */
	background: #f8fafc;
	box-shadow: inset 0 -1px 0 #dbe3ea;
}

.grid-pagination-bottom {
	border-bottom: none;
}

.grid-pagination .btn {
	font-size: 12px;
	line-height: 1.2;

	padding: 2px 7px;

	min-width: 30px;
	height: 26px;
}

.grid-pagination span {
	font-size: 12px;
	color: #526274;
	white-space: nowrap;
}

.pagination span.page-link {
	height: 100%;
}


/* ============================================================
   Tile Grid Standard
   ------------------------------------------------------------
   画像・カード型一覧のスクロール領域標準
============================================================ */

.tile-grid-wrapper {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}

/* ============================================================
   Table Grid Standard
   ------------------------------------------------------------
   一覧テーブル用の外観標準
============================================================ */

.grid-table {
	width: 100%;
	table-layout: fixed;
	margin-bottom: 0;
	font-size: 13px;
}

.grid-table th {
	white-space: nowrap;
	vertical-align: middle;
	padding-top: 6px;
	padding-bottom: 6px;

	/* Paginationより一段濃くして、列ヘッダ領域を明確にする */
	background: #e6edf3;
	border-top: 1px solid #d1dbe4;
	border-bottom: 1px solid #c5d0da;

	color: #344457;
	font-size: 12px;
	font-weight: 700;
}

/*
 * Sortable Header
 * ------------------------------------------------------------
 * ソート可能項目は通常ヘッダより少し強く見せ、
 * 「操作できる文字」であることを常時認識できるようにする。
 */
 .grid-table th a {
 	display: inline-flex;
 	align-items: center;
 	gap: 3px;

 	padding: 2px 4px;

 	color: #315f89;
 	font-weight: 700;

 	text-decoration: none;

 	border-bottom: 1px solid #7fa3bf;
 	border-radius: 3px 3px 0 0;

 	transition:
 		background-color .12s ease,
 		color .12s ease,
 		border-color .12s ease;
 }

 .grid-table th a:hover {
 	color: #244f73;
 	background: #dce8f1;
 	border-bottom-color: #4f7fa3;
 }

 .grid-table th a:focus-visible {
 	outline: 2px solid rgba(79, 127, 163, .35);
 	outline-offset: 1px;
 }

.grid-table td {
	vertical-align: middle;
	height: 44px;
	max-height: 44px;
	overflow: hidden;
	border-color: #edf1f4;
}

.col-row-no {
	width: 44px;
	min-width: 44px;
	max-width: 44px;
	text-align: center;
}

.col-date {
	width: 110px;
	min-width: 110px;
	max-width: 110px;
}

.col-classification {
	width: 90px;
	min-width: 90px;
	max-width: 90px;
}

.col-reviewer {
	width: 90px;
	min-width: 90px;
	max-width: 90px;
}

.col-meta {
	width: 155px;
	min-width: 155px;
	max-width: 155px;
}

.col-actions {
	width: 180px;
	min-width: 180px;
	max-width: 180px;
}

/* 残り幅を受ける主列 */
.col-main {
	width: auto;
	min-width: 0;
}

.grid-table col.col-row-no {
	width: 44px;
}

.grid-table col.col-date {
	width: 110px;
}

.grid-table col.col-classification {
	width: 90px;
}

.grid-table col.col-reviewer {
	width: 90px;
}

.grid-table col.col-meta {
	width: 155px;
}

.grid-table col.col-actions {
	width: 180px;
}

.title_row {
	font-size: 13px;
	font-weight: 600;
	color: #243142;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	line-height: 1.35;
}

.content_row {
	margin-top: 2px;
	font-size: 12px;
	color: #66758a;

	line-height: 1.35;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

	overflow: hidden;
}

.createdAt_row,
.updatedAt_row {
	font-size: 11px;
	color: #8a96a5;
	line-height: 1.35;
}

.grid-table tbody tr {
	height: 72px;
}

/*操作ヘッダ*/
.col-actions {
	text-align: center;
}


/* ============================================================
   Grid Action Buttons
   ------------------------------------------------------------
   List系画面上部の操作ボタン標準
============================================================ */

.grid-action-buttons {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.grid-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 31px;
	min-height: 31px;

	padding: 0 10px;

	font-size: 13px;
	line-height: 1;

	white-space: nowrap;
	flex-shrink: 0;
}

/*
 * 行操作ボタンは通常時の主張を抑え、
 * hover時だけ意味色を強める。
 */
 .grid-action-buttons .btn {
 	height: 28px;

 	display: inline-flex;
 	align-items: center;
 	justify-content: center;

 	padding: 0 8px;

 	font-size: 12px;
 	line-height: 1.2;

 	border-color: #d6e0e8;
 	background: #fff;
 	color: #5f6f82;
 }

.grid-action-buttons .btn:hover {
	background: #eaf0f5;
	border-color: #cbdbe8;
	color: #243142;
}

.grid-action-buttons .btn-outline-danger {
	color: #66758a;
}

.grid-action-buttons .btn-outline-danger:hover {
	background: #fbe9eb;
	border-color: #f1c5ca;
	color: #dc3545;
}

.grid-empty-row td {
	height: 44px;
	background: #fff;
}

.highlight-row,
.grid-row-active {
	outline: 2px solid #6f98bb;
	outline-offset: -2px;
	background: #f3f7fa !important;
	position: relative;
	z-index: 1;
}

.grid-table mark {
	padding: 0 2px;
	border-radius: 2px;
	background: #fff3cd;
}

/* ============================================================
   Grid Action Bar Standard
============================================================ */

.grid-action-bar {
	display: flex;
	align-items: center;
	gap: 6px;

	padding: 3px 6px;

	background: #f0f5f9;
	border-bottom: 1px solid #d6e0e8;
	box-shadow: 0 1px 2px rgba(36, 49, 66, 0.04);

	min-height: 36px;
	flex: 0 0 auto;
	box-sizing: border-box;
}

.grid-search-form {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 8px;
	margin: 0;

	flex-wrap: nowrap;
	min-width: 0;
}

.grid-keyword {
	width: 220px;
}

.grid-size-label {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: 13px;
	white-space: nowrap;
}

.grid-action-info {
	font-size: 12px;
	white-space: nowrap;
	color: #66758a;
}

.grid-action-spacer {
	flex: 1 1 auto;
}


/* ============================================================
   Grid Loading
============================================================ */

.grid-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.grid-loading-backdrop {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.45);
}

.grid-loading-spinner {
	width: 42px;
	height: 42px;
	border: 4px solid rgba(0, 0, 0, 0.15);
	border-top-color: rgba(0, 0, 0, 0.65);
	border-radius: 50%;
	animation: grid-loading-spin 0.8s linear infinite;
}

@keyframes grid-loading-spin {
	to {
		transform: rotate(360deg);
	}
}

/* 検索キーワードハイライトDrawGrid,ImageAssetGrid */
.highlightSearchWords {
	padding: 0 2px;
	border-radius: 2px;
	background: rgb(255, 128, 128);
	font-weight: 600;
}


.grid-search-form .form-control-sm,
.grid-search-form .form-select-sm,
.grid-search-form .btn-sm {
	height: 31px;
	font-size: 13px;
}

.grid-filter-select {
	width: 150px;
}

.grid-date-input {
	width: 150px;
}

.grid-size-select {
	width: 110px;
}

.grid-date-separator {
	padding: 0 2px;
	color: var(--muted, #666);
	white-space: nowrap;
}



.public-search-row {
	display: flex;
	width: 100% !important;
	gap: 8px;
}



/* ============================================================
   Side Grid デザイン
============================================================ */


#diary-list-pane,
#personal-list-pane {
	flex: 0 0 260px;
}


/* ============================================================
 * SideGrid Card
 * ------------------------------------------------------------
 * Personal / Diary の通常SideGrid。
 *
 * 設計方針:
 * ・操作性、行高、情報量は変更しない
 * ・奇数 / 偶数による強い色分けは廃止する
 * ・白 + Blue Gray を基調とする
 * ・hover / active で現在位置を明確にする
 * ============================================================ */

.sidegrid-row {
	position: relative;

	height: 120px;
	overflow: hidden;

	/*
	 * スクロールバーやパネル端に枠線が接触しないよう、
	 * 左右に少し余白を確保する。
	 */
	margin: 10px 10px 15px 10px;

	border: 1px solid #d6e0e8;
	border-radius: 6px;

	background: #ffffff;

	box-shadow: 0 1px 2px rgba(36, 49, 66, 0.04);

	transition:
		background-color .12s ease,
		border-color .12s ease,
		box-shadow .12s ease;
}

.sidegrid-row:hover {
	background: #f5f8fb;
	border-color: #b9cad8;

	box-shadow: 0 1px 3px rgba(36, 49, 66, 0.08);

	cursor: pointer;
}

.related-knowledge-thumbnail {
	width: 200px;
	height: 75%;
}

.related-knowledge-summary{
	height: 130px;
}

.sidegrid-knowledge-row {
	border-bottom: 1px solid #808080;
	height: 200px;
	overflow: hidden;
}

.sidegrid-knowledge-row:nth-child(odd) {
	background-color: var(--bs-light);
}

.sidegrid-knowledge-row:nth-child(even) {
	background-color: var(--bs-secondary-bg-subtle);
}

.sidegrid-knowledge-row:nth-child(odd) .sidegrid-top {
	background-color: var(--bs-heading-title-lightcolor);
}

.sidegrid-knowledge-row:nth-child(even) .sidegrid-top {
	background-color: var(--bs-heading-title-normalcolor);
}

.badge-knowledge {
	width: 110px;
	background-color: #808080 !important;
	color: white;
	padding: 3px;
	border-radius: 5px;
}


/* ============================================================
 * SideGrid Active / Content Hierarchy
 * ============================================================ */

/*
 * Personal / Diary の選択中カード。
 *
 * 全面を強い緑枠にせず、
 * Blue Gray の外枠 + 左アクセントで現在位置を示す。
 */
.sidegrid-row.active {
	color: inherit;

	border: 2px solid #6f98bb;

	background: #f1f6fa;

	box-shadow:
		0 1px 3px rgba(36, 49, 66, 0.08);
}

/*
 * 選択中カードの左アクセント。
 *
 * 親のinset shadowでは子要素(.sidegrid-top)の背景に隠れるため、
 * 疑似要素でカード全高へ描画する。
 */
.sidegrid-row.active::before {
	content: "";

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;

	width: 3px;

	background: #3b6f9f;

	border-radius: 4px 0 0 4px;

	z-index: 2;

	pointer-events: none;
}

.sidegrid-top {
	display: flex;
	align-items: flex-start;
	gap: 8px;

	min-height: 2.5rem;

	padding: 5px 6px;

	background: #f7f9fb;

	color: #243142;

	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

.sidegrid-top-left {
	width: 60px;
	flex: 0 0 60px;

	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;

	color: #7a8795;
}

.sidegrid-bottom {
	display: flex;
	justify-content: space-between;

	overflow: hidden;

	padding: 5px 6px;

	font-size: 11px;
	line-height: 1.35;

	color: #66758a;
}

.grid-page-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;

	min-height: 30px;
	padding: 4px 8px;

	background: #ffffff;
	border-bottom: 1px solid #e2e8ee;
}

.grid-page-title {
	margin: 0;
	padding-left: 7px;

	border-left: 3px solid #8fa9bd;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;

	color: #526274;
}