/*====================
* 要員管理画面
* ====================*/
:root {
	--member-mng-border-color: #DDE3EC;
	--member-mng-day-col-width: var(--day-width, 4rem);
	--member-mng-dialog-font-size: 16px;
	--member-mng-dialog-label-width: calc(var(--member-mng-dialog-font-size) * 8.25);
}

.member-mng-page.app {
	height: calc(100dvh - var(--fixed-footer-menu) - var(--safeareainsetbottom));
	margin-bottom: 0;
	overflow: hidden;
}

.member-mng-page .main {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.member-mng-page .content {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

#company-name-area label,
#group-select-area label {
	width: 6rem;
}

#reference-condition-area {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: start;
	gap: 0.25rem;
}

/* 参照条件行の各要素は狭い画面で縮められるようにする */
#reference-condition-area > * {
	min-width: 0;
}

.date-shift-input-group {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.25rem;
	min-width: 0;
	white-space: nowrap;
}

/* 参照条件行の日付入力グループは優先的に幅を確保し、足りなければ改行させる */
#reference-condition-area .date-shift-input-group {
	max-width: 100%;
}

.date-shift-btn {
	min-width: 2.5rem;
	padding: 0 0.5rem;
	white-space: nowrap;
}

/* 参照条件行の日付シフトボタンはユーザ設定フォントを基準に少し詰める */
#reference-condition-area .date-shift-btn {
	min-width: calc(var(--font-size) * 2.1);
	padding: 0 calc(var(--font-size) * 0.28);
	font-size: clamp(calc(var(--font-size) * 0.82), 2.8vw, var(--font-size));
}

.date-shift-input-group > input[type='date'] {
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
}

/* 日付入力は狭い画面でも極端に縮みすぎないようにする */
#reference-condition-area .date-shift-input-group > input[type='date'] {
	min-width: calc(var(--font-size) * 8.4);
	font-size: clamp(calc(var(--font-size) * 0.82), 2.8vw, var(--font-size));
}

.reference-date-input {
	width: auto;
	max-width: 100%;
	min-width: 0;
	justify-self: start;
}

.reference-range-select {
	width: auto;
	min-width: 0;
	justify-self: start;
}

/* 参照範囲セレクトは折り返し時に単独行へ回れるようにする */
#reference-condition-area .reference-range-select {
	max-width: 100%;
	font-size: clamp(calc(var(--font-size) * 0.82), 2.8vw, var(--font-size));
}

.target-kbn-select {
	width: auto;
	min-width: 0;
	justify-self: start;
}

/* 対象区分セレクトは折り返し時に単独行へ回れるようにする */
#reference-condition-area .target-kbn-select {
	max-width: 100%;
	font-size: clamp(calc(var(--font-size) * 0.82), 2.8vw, var(--font-size));
}

/* ダイアログの対象日行 */
.member-mng-dialog-condition-row {
	align-items: center;
	flex-wrap: nowrap;
}

/* ダイアログ内のフォントサイズを画面起点に依存しない値で統一する */
#member-mng-value-dialog,
#member-mng-value-dialog .dialog-header,
#member-mng-value-dialog .dialog-content,
#member-mng-value-dialog .dialog-footer,
#member-mng-value-dialog input,
#member-mng-value-dialog select,
#member-mng-value-dialog button {
	font-size: var(--member-mng-dialog-font-size);
}

#member-mng-value-dialog {
	width: min(750px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px));
	max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
	max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
	max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
	padding: 0;
	overflow: hidden;
}

#member-mng-value-dialog > .container-fluid {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* iOS Safariで親dialogのmax-height基準が不安定な場合があるため、子要素側にも上限高さを明示する */
	max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
	max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
	min-height: 0;
	overflow: hidden;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

#member-mng-value-dialog .dialog-close-header,
#member-mng-value-dialog .dialog-footer {
	flex: 0 0 auto;
	background-color: #FFFFFF;
}

#member-mng-value-dialog .dialog-header {
	flex: 0 0 auto;
}

#member-mng-value-dialog .dialog-close-header {
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin-top: 0.25rem;
}

#member-mng-value-dialog .dialog-content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

#member-mng-value-dialog #member-mng-value-dialog-body {
	min-width: 0;
}

#member-mng-value-dialog .member-mng-dialog-condition-row,
#member-mng-value-dialog .member-mng-dialog-reference-row,
#member-mng-value-dialog #member-mng-dialog-search-area {
	flex-wrap: wrap;
	row-gap: 0.25rem;
}

#member-mng-value-dialog .date-shift-input-group {
	flex: 1 1 14rem;
	max-width: 100%;
}

#member-mng-value-dialog .member-mng-dialog-person-day {
	flex: 0 0 auto;
}

#member-mng-value-dialog #member-mng-dialog-search-title {
	flex: 1 1 12rem;
	width: auto;
}

#member-mng-value-dialog .dialog-footer.btn-footer {
	gap: 0.5rem;
	flex-wrap: wrap;
	padding-bottom: 0.25rem;
}

/* ダイアログ対象日ラベル幅を統一する */
#member-mng-value-dialog .member-mng-dialog-condition-row > label {
	width: var(--member-mng-dialog-label-width);
}

/* ダイアログの参照範囲行 */
.member-mng-dialog-reference-row {
	align-items: center;
	flex-wrap: nowrap;
}

#member-mng-dialog-target-date {
	width: auto;
	min-width: 0;
}

#member-mng-dialog-reference-range {
	width: auto;
	min-width: 0;
	max-width: 100%;
}

#member-mng-dialog-target-kbn {
	width: auto;
	min-width: 0;
	max-width: 100%;
}

.member-mng-dialog-person-day {
	margin-left: auto;
	font-weight: bold;
	white-space: nowrap;
}

.member-mng-dialog-delete-all-row {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.member-mng-dialog-delete-all-label {
	display: inline-flex;
	align-items: center;
	font-weight: bold;
	cursor: pointer;
	white-space: nowrap;
}

#anken-search-area {
	align-items: center;
}

#anken-search-title {
	min-width: 0;
}

#anken-search-btn {
	white-space: nowrap;
}

/* ダイアログのタイトル検索行 */
#member-mng-dialog-search-area {
	align-items: center;
}

/* ダイアログのタイトル検索入力 */
#member-mng-dialog-search-title {
	min-width: 0;
}

/* ダイアログのタイトル検索ボタン */
#member-mng-dialog-search-btn {
	white-space: nowrap;
}

.anken-list-area {
	border: 1px solid var(--member-mng-border-color);
	border-radius: 0.75rem;
	background-color: #FFFFFF;
	flex: 1;
	min-height: 0;
	max-height: none;
	overflow-x: auto;
	overflow-y: auto;
}

.anken-list-table {
	width: 100%;
	min-width: 36rem;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	table-layout: fixed;
	color: inherit;
}

.anken-list-table tr > *:first-child,
.anken-list-table tr:first-child > th,
.anken-list-table th,
.anken-list-table td {
	border-top: none;
	border-left: none;
	border-right: none;
}

.anken-list-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	border-bottom: 1px solid var(--member-mng-border-color);
	background-color: var(--def-label-background);
	text-align: center;
}

/* 日付列ヘッダ（前々日～当日）は小画面時にフォントを少し縮めて見切れを防ぐ */
.anken-list-table thead th.col-day {
	white-space: nowrap;
	padding-left: 0.15rem;
	padding-right: 0.15rem;
	font-size: clamp(calc(var(--font-size) * 0.68), 2.7vw, calc(var(--font-size) * 0.9));
	line-height: 1.15;
}

.anken-list-table thead th.col-anken-name {
	text-align: left;
}

.anken-list-table th.col-anken-name,
.anken-name-cell {
	width: 58%;
}

.anken-list-table th.col-day,
.anken-day-cell {
	width: 14%;
}

.anken-list-table tbody td {
	padding: 0;
	border-bottom: 1px solid var(--member-mng-border-color);
}

.anken-row-line1 td {
	background-color: #FFFFFF;
}

.anken-row-line2 td {
	background-color: #F9FBFE;
}

.anken-name-cell {
	padding: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

.anken-name-text {
	display: block;
}

.member-mng-anken-name-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 1.8rem;
}

.member-mng-leading-icon-area {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
	flex: 0 0 1.2rem;
}

.member-mng-leading-icon {
	width: 1.2rem;
	height: 1.2rem;
	object-fit: contain;
}

.anken-day-value-btn {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	white-space: nowrap;
	font-size: 1rem;
}

/* 一覧の日付表示ボタンもユーザ設定フォントを基準に小画面で少し縮める */
.anken-day-value-btn {
	font-size: clamp(calc(var(--font-size) * 0.72), 2.8vw, var(--font-size));
}

.anken-day-value-btn:focus-visible {
	outline: 2px solid #4A90E2;
	outline-offset: 1px;
}

.member-mng-icon-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem;
	min-height: 1.8rem;
	padding: 0.1rem 0.25rem;
}

.member-mng-related-icon {
	width: 1.2rem;
	height: 1.2rem;
	object-fit: contain;
}

.member-mng-icon-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 999px;
	background-color: #DEE7F5;
	color: #1E3557;
	font-size: 0.75rem;
	font-weight: bold;
	line-height: 1;
}

.member-mng-day-count {
	display: block;
	min-height: 1.8rem;
	line-height: 1.8rem;
	text-align: center;
	font-weight: bold;
}

.anken-day-empty {
	display: block;
	min-height: 1.8rem;
}

.anken-list-empty {
	padding: 0;
	min-height: 2.4rem;
	line-height: 2.4rem;
	color: #555555;
	text-align: center;
}

/* 案件別要員情報ダイアログ */
.member-mng-value-list-area {
	border: 1px solid var(--member-mng-border-color);
	border-radius: 0.5rem;
	max-height: 40vh;
	overflow-y: auto;
}

.member-mng-value-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	table-layout: fixed;
	color: inherit;
}

.member-mng-value-table tr > *:first-child,
.member-mng-value-table tr:first-child > th,
.member-mng-value-table th,
.member-mng-value-table td {
	border-top: none;
	border-left: none;
	border-right: none;
}

.member-mng-value-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: var(--def-label-background);
	border-bottom: 1px solid var(--member-mng-border-color);
	text-align: center;
	line-height: 1.2;
	padding: 0.2rem 0.15rem;
	white-space: nowrap;
}

/* チェック列は案件スケジュールの日付セル幅に合わせ、セル全面をタップ可能にする */
.member-mng-value-table thead th:nth-child(2),
.member-mng-value-table tbody td:nth-child(2) {
	width: var(--member-mng-day-col-width);
	padding: 0;
}

/* 時間列は案件スケジュールの日付セル幅に合わせる */
.member-mng-value-table thead th:nth-child(3),
.member-mng-value-table tbody td:nth-child(3) {
	width: var(--member-mng-day-col-width);
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.member-mng-value-table tbody td {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--member-mng-border-color);
}

.member-mng-value-anken {
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

.member-mng-value-anken > span {
	display: block;
	padding-left: 0.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

.member-mng-value-date {
	text-align: center;
}

/* チェックボタンはチェック列セル全体を押下領域にする */
.member-mng-target-check-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 1.8rem;
	padding: 0;
	border: 1px solid #000000;
	border-radius: 0.25rem;
	background: transparent;
	color: inherit;
	font-weight: initial;
}

/* 対象日チェックの表示領域 */
.member-mng-target-check-wrap {
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
}

/* t_anken_member_info紐づき有無を示すドット（案件スケジュールと同じサイズ） */
.member-mng-target-check-dot {
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background-color: #111111;
	opacity: 0;
}

/* 紐づきデータがある行のみドットを表示 */
.member-mng-target-check-wrap.is-linked .member-mng-target-check-dot {
	opacity: 1;
}

.member-mng-value-hours {
	text-align: center;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

/* 時間入力欄（0.5刻み）は案件スケジュールの入力欄に合わせる */
.member-mng-work-hours-input {
	width: 100%;
	min-width: 0;
	height: 1.6rem;
	padding: 0 0.25rem;
	font-size: 0.95rem;
	border: 1px solid #cfd4dc;
	border-radius: 4px;
	background: #fff;
	text-align: right;
}

.member-mng-value-empty {
	text-align: center;
	color: #555555;
}

@media screen and (max-width: 520px) {
	#reference-condition-area {
		grid-template-columns: auto auto auto;
	}

	.reference-range-select {
		max-width: 7.5rem;
	}

	.target-kbn-select {
		max-width: 7.5rem;
	}

	.date-shift-btn {
		min-width: 2.25rem;
		padding: 0 0.4rem;
	}

	.anken-list-table {
		min-width: 100%;
	}

	.anken-list-area {
		min-height: 12rem;
	}

	/* モバイル表示時に一覧ヘッダの見切れを防ぐ */
	.member-mng-value-table thead th {
		padding: 0.15rem 0.1rem;
	}
}