body {
	margin: 0;
	padding: 0;
	background-color: #4f2c0e; /* 背景顏色不變 */
	display: flex;
	flex-direction: column;
	align-items: center; /* 讓 header 和 main-content-wrapper 都能水平居中 */
	height: 100vh; /* 讓body佔據整個視口高度 */
	overflow: hidden; /* 防止整個頁面滾動，確保其他部分固定 */
	min-width: 320px; /* 設定一個較小的最小寬度，適應更多行動裝置 */
	position: relative; /* 為 header-title-area 的絕對定位提供參考 */
}

.header-title-area {
	background-color: #EEE;
	color: #eee;
	padding: 15px 30px; /* 增加左右 padding，讓標題框看起來更飽滿 */
	text-align: center;
	box-shadow: 5px 5px 15px rgba(0,0,0,1);
	border-radius: 4px;
	
	/* 關鍵的定位和寬度調整 */
	position: absolute; /* 絕對定位 */
	top: 15px; /* 距離 body 頂部 15px */
	left: 50%; /* 設置左邊緣為父元素寬度的 50% */
	transform: translateX(-50%); /* 向左平移自身寬度的一半，實現水平居中 */
	width: auto; /* 寬度根據內容自適應 */
	max-width: calc(700px - 28px); /* 限制最大寬度，與 main-content-wrapper 的內容區域寬度大致匹配 */
	box-sizing: border-box;
	z-index: 10; /* 確保它位於 main-content-wrapper 上方 */
	white-space: nowrap; /* 防止標題文字換行 */
}

.header-title-area h1 {
	margin: 0;
	font-size: 2em;
	color: black;
}

/* 新增的主要內容包裝器 */
.main-content-wrapper {
	background-color: #eee; /* 底色為 #eee */
	margin: 0px 14px 10px 14px; /* 左右和底部外邊距不變 */
	margin-top: 50px; /* **關鍵調整：將 main-content-wrapper 推下來，為 header-title-area 留出空間** */
	border-radius: 8px; /* 與 container 保持一致的圓角 */
	box-shadow: 5px 5px 15px rgba(0,0,0,1);
	width: calc(100% - 28px); /* 考慮左右 margin */
	max-width: 700px; /* 限制最大寬度，與 container 保持一致 */
	box-sizing: border-box; /* 確保 padding 和 border 包含在 width 內 */
	
	padding-left: 20px; /* 內容內邊距，與 container 保持一致 */
	padding-right: 20px; /* 內容內邊距，與 container 保持一致 */
	padding-bottom: 20px; /* 底部內邊距 */
	padding-top: 80px; /* **關鍵調整：在內容區域頂部增加填充，為重疊的標題框騰出空間** */


	display: flex; /* 啟用 Flexbox */
	flex-direction: column; /* 內部元素垂直排列 */
	flex-grow: 1; /* 讓其佔據所有可用空間 */
	overflow: hidden; /* 防止 main-content-wrapper 自身的內容溢出，將滾動條控制權交給 container */
}

/* 將 p 標籤從 .main-content-wrapper 中獨立出來 */
.main-content-wrapper p {
	text-align: center;
	color: #666;
	padding-top: 0px; /* 由於 main-content-wrapper 已經有 padding-top，這裡可以移除 */
	margin-top: 0; /* 確保沒有額外的頂部邊距 */
	margin-bottom: 15px; /* 與表單的間距 */
	flex-shrink: 0; /* 防止被壓縮 */
}

.container {
	margin: 0 auto;
	width: 100%; /* 讓它填滿 main-content-wrapper 的寬度 */
	height: 430px; /* **固定高度** */
	overflow-y: auto; /* **內容超出時顯示垂直滾動條** */
	box-sizing: border-box;
	flex-grow: 1; /* 讓容器佔據 main-content-wrapper 內部的剩餘空間 */
	padding-right: 5px; /* 為了滾動條預留一些空間，防止內容被遮擋 */
}

#eventForm {
	display: flex;
	flex-direction: column;
	height: 100%; /* 讓 form 佔據 main-content-wrapper 的所有可用高度 */
}


.form-group { margin-bottom: 15px; }
label { display: block; padding-bottom: 5px; font-weight: bold; color: #555; }

input[type="text"] {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}

input[type="date"], input[type="time"], textarea, select {
	width: calc(100% - 22px); /* 考慮 padding 和 border */
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}
textarea, select {
	width: 100%; /* textarea 和 select 保持 100% 寬度 */
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}

.hidden {
	display: none !important; /* 使用 !important 確保覆蓋性 */
	padding: 0 !important;
	margin: 0 !important;
}

.hr-separator {
	margin-top: auto; /* 將 hr 推到 flex 容器的底部 */
	margin-bottom: 15px; /* 與按鈕組的間距 */
	width: 100%; /* 讓 hr 橫跨整個寬度 */
	border: 0;
	height: 1px;
	background-color: #ccc;
	flex-shrink: 0; /* 防止被壓縮 */
}

.button-group {
	text-align: right;
	margin-top: 0; /* 移除頂部間距，因為 hr 已經有間距 */
	padding-bottom: 20px; /* 增加底部 padding */
	flex-shrink: 0; /* 防止被壓縮 */
}
button {
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	margin-left: 10px;
}
button.submit { background-color: #007bff; color: white; }
button.reset { background-color: #6c757d; color: white; }

/* 預設的桌面版/寬螢幕佈局 */
.datetime-group {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 0;
	flex-direction: row; /* 預設為水平排列 */
}

.datetime-group .date-field,
.datetime-group .time-field {
	flex: 1;
	min-width: 0;
}

.datetime-group label {
	width: auto;
	padding-bottom: 5px;
}

.datetime-group input[type="date"],
.datetime-group input[type="time"] {
	width: calc(100% - 2px); /* 在 flex 項目內部，寬度為 100% 減去左右邊框 */
}

/* 事件標題與複選框的佈局 */
.event-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between; /* 新增：讓標題和複選框分開 */
}
/* 讓標題輸入框能夠佔用更多空間 */
.title-input-group {
	flex: 1;
	min-width: 0;
	margin-right: 10px; /* 與右側的內建活動按鈕間距 */
}

.checkbox-group {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	margin-left: 10px; /* 標題輸入框和複選框之間的間距 */
}

.checkbox-group label {
	display: flex;
	align-items: center; /* 垂直居中對齊 */
	font-weight: normal;
	margin: 0;
	white-space: nowrap; /* 防止文字換行 */
}

.checkbox-group input[type="checkbox"] {
	margin-right: 5px;
	width: auto;
	padding: 0;
	border: none;
}

/* 內建活動按鈕樣式 */
.built-in-event-btn {
	padding: 8px 15px;
	background-color: #28a745; /* 綠色按鈕 */
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	white-space: nowrap; /* 防止按鈕文字換行 */
	margin-left: 10px; /* 與標題輸入框的間距 */
}
.built-in-event-btn:hover {
	background-color: #218838;
}

/* 消毒日表單組件樣式 */
.disinfection-day-input {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}
.disinfection-day-input input[type="date"] {
	flex-grow: 1;
	margin-right: 10px;
}
.disinfection-day-input label {
	font-weight: normal;
	margin: 0;
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.disinfection-day-input input[type="checkbox"] {
	margin-right: 5px;
}
.disinfection-day-input .remove-btn {
	background-color: #dc3545;
	color: white;
	border: none;
	border-radius: 4px;
	padding: 5px 10px;
	cursor: pointer;
	font-size: 12px;
	margin-left: 10px;
}
.disinfection-day-input .remove-btn:hover {
	background-color: #c82333;
}
.add-more-dates-btn {
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	padding: 8px 15px;
	cursor: pointer;
	font-size: 14px;
	margin-top: 10px;
}
.add-more-dates-btn:hover {
	background-color: #0056b3;
}

/* 行動裝置適應：當螢幕寬度小於或等於 768px 時 */
@media (max-width: 768px) {
	.header-title-area {
		max-width: calc(100% - 20px); /* 讓它與 main-content-wrapper 保持一致的邊距 */
		padding: 15px 20px; /* 調整 padding */
	}
	.main-content-wrapper {
		margin: 0px 10px 10px 10px; /* 行動裝置上可以稍微縮小外邊距 */
		width: calc(100% - 20px);
	}

	.datetime-group {
		flex-direction: column; /* 日期時間組垂直堆疊 */
		gap: 0; /* 移除垂直堆疊時的間距 */
	}

	.datetime-group .date-field,
	.datetime-group .time-field {
		flex: none; /* 移除 flex 屬性，讓它們佔據全部寬度 */
		width: 100%; /* 每個日期或時間欄位佔據整行 */
	}

	.datetime-group input[type="date"],
	.datetime-group input[type="time"] {
		width: 100%; /* 讓它們佔滿其父容器的寬度 */
	}
	
	/* 事件標題與複選框的佈局在小螢幕上可以保持原樣或調整 */
	.event-title-row {
		flex-direction: column; /* 標題和按鈕垂直堆疊 */
		align-items: flex-start; /* 左對齊 */
	}

	.title-input-group {
		width: 100%; /* 標題輸入框佔滿寬度 */
		margin-right: 0; /* 移除與按鈕的間距 */
		margin-bottom: 10px; /* 在標題和按鈕之間增加間距 */
	}
	.built-in-event-btn {
		margin-left: 0; /* 移除左邊距 */
		width: 100%; /* 讓按鈕佔滿寬度 */
		text-align: center;
	}

	.checkbox-group {
		width: 100%; /* 複選框組佔滿寬度 */
		justify-content: flex-start; /* 左對齊 */
		margin-left: 0; /* 移除左邊距 */
		margin-top: 10px; /* 與上面的輸入框之間增加間距 */
	}
	/* 消毒日輸入框在行動裝置上保持垂直堆疊 */
	.disinfection-day-input {
		flex-direction: column;
		align-items: flex-start;
	}
	.disinfection-day-input input[type="date"] {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
	.disinfection-day-input label {
		margin-bottom: 10px; /* 與移除按鈕的間距 */
	}
	.disinfection-day-input .remove-btn {
		width: 100%;
		margin-left: 0;
	}
}