/* Phase-one content inside the original Startmin shell. */
#page-wrapper {
	min-height: 100vh;
	padding-bottom: 36px;
}
#page-wrapper .page-header {
	margin-top: 32px;
}
.vms-card {
	background: #fff;
	border: 1px solid #d6e9c6;
	border-top: 3px solid #5cb85c;
	border-radius: 3px;
	padding: 18px;
	margin-bottom: 18px;
}
.vms-admin .vms-card {
	border-color: #bce0f5;
	border-top-color: #337ab7;
}
/* 後台閱讀字級統一提高，表單與按鈕需覆蓋 Bootstrap 的固定字級。 */
.vms-admin { font-size: 16px; }
.vms-admin .form-control, .vms-admin .btn, .vms-admin .table,
.vms-admin .dropdown-menu, .vms-admin .sidebar, .vms-admin .navbar,
.vms-admin .pagination, .vms-admin .dataTables_info { font-size: 16px; }
.vms-admin .btn-sm, .vms-admin .input-sm { font-size: 14px; }
.vms-admin .btn-xs { font-size: 14px; }
.vms-admin .btn-lg { font-size: 20px; }
.vms-admin h1 { font-size: 38px; }
.vms-admin .page-header { font-size: 32px; }
.vms-admin h3 { font-size: 26px; }
.vms-admin h4 { font-size: 20px; }
.vms-admin .vms-account-state { font-size: 20px; }
.vms-admin .swal2-popup { font-size: 16px; }
.vms-admin .vms-calendar-event { font-size: 14px; }
.vms-admin .form-control { min-height: 36px; height: auto; }
.vms-admin textarea.form-control { min-height: 80px; }

/* 伺服器及 DataTables 分頁共用靠右的按鈕列與筆數說明。 */
.vms-pagination, .vms-table-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin: 12px 0;
}
.vms-pagination .pagination, .vms-table-footer .pagination { margin: 0; }
.vms-pagination > span, .vms-table-footer .dataTables_info { margin-left: 8px; padding: 0; float: none; }
.vms-table-footer .dataTables_paginate { float: none; margin: 0; }
.vms-pagination .pagination > li > a, .vms-table-footer .pagination > li > a { padding: 6px 12px; }
.vms-table-footer .dataTables_info { order: 2; }
.vms-card h3:first-child, .vms-card h2:first-child {
	margin-top: 0;
}
.btn-lg-mobile {
	min-height: 48px;
	font-size: 18px;
}
.table > tbody > tr > td {
	vertical-align: middle;
}
.vms-announcement + .vms-announcement {
	border-top: 1px solid #eee;
	margin-top: 18px;
	padding-top: 12px;
}
.vms-command-card .well:last-child {
	margin-bottom: 0;
}
/* 戰情表以班表身分著色；卡片採淡色，月曆採高對比實色。 */
.vms-command-card.vms-identity-volunteer,
.vms-command-legend-list .vms-command-legend-swatch.vms-identity-volunteer { background: #f5f5f5; border-color: #9aa1a8; }
.vms-command-card.vms-identity-leader,
.vms-command-legend-list .vms-command-legend-swatch.vms-identity-leader { background: #eaf4fb; border-color: #337ab7; }
.vms-command-card.vms-identity-guide-walk,
.vms-command-legend-list .vms-command-legend-swatch.vms-identity-guide-walk { background: #edf8ed; border-color: #5cb85c; }
.vms-command-card.vms-identity-guide-assistant,
.vms-command-legend-list .vms-command-legend-swatch.vms-identity-guide-assistant { background: #fff8e5; border-color: #d99122; }
/* 只標示逾時未打卡的志工資料，避免同班次其他志工被誤認為異常。 */
.vms-command-card .well.is-attendance-overdue,
.vms-command-legend-list .vms-command-legend-swatch.is-attendance-overdue {
	background: #fce8e8;
	border-color: #b52b27;
	color: #8b1e1b;
}
/* 圖例可於窄螢幕換行，色塊與文字並列以利辨識。 */
.vms-command-legend-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}
.vms-command-legend-items li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.vms-command-legend-swatch {
	display: inline-block;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 1px solid transparent;
	border-radius: 3px;
}
.vms-command-legend p:last-child { margin-bottom: 0; }
.vms-account-state {
	cursor: pointer;
	font-size: 18px;
	margin-right: 22px;
	padding: 8px 4px;
}
.vms-account-state input[type="checkbox"] {
	height: 20px;
	margin: 0 6px 0 0;
	vertical-align: -3px;
	width: 20px;
}
/* 戰情表沿用後台放大後的基本字級。 */
.vms-admin .vms-command-card {
	font-size: inherit;
}
.vms-calendar-toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}
.vms-calendar-toolbar h3 {
	margin: 0;
}
.vms-calendar-wrap {
	margin-bottom: 0;
}
.vms-calendar {
	table-layout: fixed;
	min-width: 980px;
	margin-bottom: 0;
}
.vms-calendar > thead > tr > th {
	text-align: center;
	background: #f5f5f5;
}
.vms-calendar > tbody > tr > td {
	height: 130px;
	padding: 6px;
	vertical-align: top;
}
.vms-calendar-empty {
	background: #fafafa;
}
.vms-calendar-today {
	background: #fffbea;
}
.vms-calendar-day {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}
.vms-calendar-event {
	display: block;
	margin-bottom: 4px;
	padding: 4px 6px;
	border-radius: 3px;
	background: #3f4a56;
	color: #fff;
	font-size: 12px;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vms-calendar-event:hover,
.vms-calendar-event:focus {
	background: #26313c;
	color: #fff;
	text-decoration: none;
}
.vms-command-calendar-event {
	border: 0;
	width: 100%;
	text-align: left;
}
.vms-command-calendar-event .vms-calendar-count {
	display: block;
	font-weight: normal;
}
.vms-command-calendar-event.vms-identity-volunteer,
.vms-command-legend-calendar .vms-command-legend-swatch.vms-identity-volunteer { background: #59636e; }
.vms-command-calendar-event.vms-identity-leader,
.vms-command-legend-calendar .vms-command-legend-swatch.vms-identity-leader { background: #337ab7; }
.vms-command-calendar-event.vms-identity-guide-walk,
.vms-command-legend-calendar .vms-command-legend-swatch.vms-identity-guide-walk { background: #3c8c3c; }
.vms-command-calendar-event.vms-identity-guide-assistant,
.vms-command-legend-calendar .vms-command-legend-swatch.vms-identity-guide-assistant { background: #a96d0b; }
.vms-command-calendar-event.vms-identity-volunteer:hover,
.vms-command-calendar-event.vms-identity-volunteer:focus { background: #414a53; }
.vms-command-calendar-event.vms-identity-leader:hover,
.vms-command-calendar-event.vms-identity-leader:focus { background: #286090; }
.vms-command-calendar-event.vms-identity-guide-walk:hover,
.vms-command-calendar-event.vms-identity-guide-walk:focus { background: #2d6d2d; }
.vms-command-calendar-event.vms-identity-guide-assistant:hover,
.vms-command-calendar-event.vms-identity-guide-assistant:focus { background: #835408; }
.vms-command-tooltip .tooltip-inner {
	max-width: 520px;
	text-align: left;
	white-space: pre-line;
}
.vms-calendar-event.is-overbooked,
.vms-calendar-event.is-overbooked:hover,
.vms-calendar-event.is-overbooked:focus,
.vms-command-legend-calendar .vms-command-legend-swatch.is-overbooked {
	background: #c77c11;
}
.vms-calendar-event.is-cancelled,
.vms-calendar-event.is-cancelled:hover,
.vms-calendar-event.is-cancelled:focus {
	background: #777;
	text-decoration: line-through;
}
/* 月曆一個事件代表整個班次；任一志工異常即覆蓋身分與超額底色。 */
.vms-command-calendar-event.is-attendance-overdue,
.vms-command-calendar-event.is-attendance-overdue:hover,
.vms-command-calendar-event.is-attendance-overdue:focus,
.vms-command-legend-calendar .vms-command-legend-swatch.is-attendance-overdue {
	background: #b52b27;
}
.vms-calendar-time {
	font-weight: bold;
}
.tooltip-inner {
	max-width: 340px;
	text-align: left;
	white-space: pre-line;
}
.navbar-brand {
	max-width: calc(100vw - 65px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (min-width: 1024px) {
	.sidebar .navbar-collapse.collapse {
		display: block !important;
	}
}
@media (max-width: 1023px) {
	#page-wrapper {
		margin-left: 0;
		padding-top: 75px;
	}
	.sidebar {
		position: static;
		width: 100%;
		margin-top: 50px;
	}
	.sidebar .navbar-collapse {
		background: #5cb85c;
	}
	.vms-admin .sidebar .navbar-collapse {
		background: #337ab7;
	}
}
@media (max-width: 767px) {
	.vms-pagination, .vms-table-footer { justify-content: flex-end; }
	.vms-card {
		padding: 14px;
	}
	.table-responsive {
		border: 0;
	}
	.vms-command-card {
		font-size: 16px;
	}
	.vms-command-tooltip .tooltip-inner {
		max-width: calc(100vw - 30px);
	}
	.vms-calendar-toolbar {
		align-items: flex-start;
		flex-direction: column;
	}
}