html,
body {
	position: relative;
	height: 100%;
}

body {
	background: #eee;
	font-family: sans-serif, Helvetica Neue, Helvetica, Arial;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;
}

a {
	/* color: #0d6efd; */
	text-decoration: none;
}

.header_container {
	background-color: #1e96b9;
	color: white;
	display: flex;
	justify-content: space-between;
}

.header_btn_img {
	width: 45px;
}

/* 跑馬燈 start */
.header_announcement {
	height: 25px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	background-color: #f9e2ae;
	border-style: none;
}

.header_announcement > ul {
	padding-left: 0;
	display: flex;
	list-style-type: none;
	animation: header_announcement 40s linear infinite;
	position: absolute;
}

.header_announcement > ul > li {
	white-space: nowrap;
	margin-right: 2em;
	color: black;
}

@keyframes header_announcement {
	0% {
		left: 100%;
		transform: translateX(0%);
	}

	100% {
		left: 0;
		transform: translateX(-100%);
	}
}

/* 跑馬燈 end */

.footer_copyright {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	justify-content: space-between;
	background-color: white;
	position: relative;
	text-align: center;
}

.footer_container {
	display: flex;
	padding: 5px 15px;
	justify-content: space-between;
	background-color: white;
	border-radius: 20px 20px 0 0;
	background-color: #ffffff;
	position: relative;
	box-shadow: 0px 1px 6px -2px #01000a;
}

.footer_item {
	color: #9aa0ad;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	min-width: 48px;
}

.footer_item_txt {
	margin-top: 6px;
	font-size: 14px;
}

.footer_item-active,
.footer_item:hover {
	color: #1e96b9;
}

.footer_item i {
	line-height: 1;
}

/* SOS start */
.circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-webkit-border-radius: 50%;
	background-color: #ff0000;
}

.circle-text {
	font-family: Helvetica;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 15px;
	font-weight: normal;
	color: #ffffff;
	margin-top: 4px;
}

/* SOS end */

.content_area {
	background-color: white;
	border-radius: 10px;
	box-shadow: 0px 1px 6px -2px #01000a;
	margin: 13px 13px 13px 13px;
}

.content_child_area {
	background-color: white;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0px 1px 6px -2px #01000a;
}

.content_down_area {
	background-color: white;
	border-radius: 0px 0px 10px 10px;
	background-color: #ffffff;
	box-shadow: 0px 1px 6px -2px #01000a;
	margin: 13px;
}

/* v_center & h_center start */
/* 加在父類別 讓子類別垂直&水平置中 */
.v_h_center {
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* v_center & h_center end */

.home_list_item {
	display: flex;
	align-items: center;
	padding: 3px;
}

.personnel_label {
	color: #3a97bb;
	border: 2px #3a97bb solid;
	border-radius: 10px;
	padding: 0px 3px 0px 3px;
	margin-right: 10px;
}
.personnel_label_choose {
	color: white;
	background-color: #3a97bb;
	border-radius: 10px;
	padding: 0px 3px 0px 3px;
	margin-right: 10px;
}

.message_div_choose {
	display: inline-flex !important;
}

.choose_member_label {
	color: #126483;
	background-color: #bcecff;
	border-radius: 10px;
	padding: 0px 3px 0px 3px;
	margin-right: 10px;
}

.choose_patient_label {
	color: #bd651e;
	background-color: #ffecdd;
	border-radius: 10px;
	padding: 0px 3px 0px 3px;
	margin-right: 10px;
}

.choose_patient_label {
	color: #bd651e;
	background-color: #ffecdd;
	border-radius: 10px;
	padding: 0px 3px 0px 3px;
	margin-right: 10px;
}

.choose_na_label {
	color: #2a642d;
	background-color: #d0ffd1;
	border-radius: 10px;
	padding: 0px 3px 0px 3px;
	margin-right: 10px;
}

.choose_family_label {
	color: #57511d;
	background-color: #fff8b7;
	border-radius: 10px;
	padding: 0px 3px 0px 3px;
	margin-right: 10px;
}

.personnal_label_container {
	/* display: flex; */
	justify-content: left;
}

.modal-top-right {
	position: relative;
	top: 0px;
	right: 0;
}

li div.active {
	background-color: #ffffff !important;
	color: #1e96b9 !important;
	font-size: 20px !important;
	font-weight: 900 !important;
	margin-bottom: 0px !important;
	margin-top: 0px !important;
	padding-bottom: 0px !important;
	padding-top: 0px !important;
}

li div.nav-link {
	color: #000;
	font-size: 20px !important;
	margin-bottom: 0px !important;
	margin-top: 0px !important;
	padding-bottom: 0px !important;
	padding-top: 0px !important;
}

.schedule-sticky-month {
	position: sticky;
}

.swiper {
	width: calc(100% - 20px);
	margin: 10px 7px 10px 7px;
}

.swiper-pagination-bullet-active {
	background-color: #ff8d32 !important;
}

.row_caution-hide {
	display: none;
}

.row_caution + .row_todo {
	border-top: dashed 1px #000000;
}

.row_caution.d-none + .row_todo {
	border-top: solid 1px #000000;
}

/* ============================================
   飲食紀錄模組樣式（Nurse 藍色系）
   ============================================ */

/* ---------- 頁面標題 ---------- */
.dn-page-title {
	font-size: 3.5vmax;
	font-weight: bold;
	color: #333;
	padding: 10px 12px 6px;
}

/* ---------- 主卡片容器 ---------- */
.dn-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 6px rgba(0,0,0,0.08);
	padding: 16px;
	margin: 0 12px;
}

/* ---------- 區段標籤 ---------- */
.dn-section-label {
	font-size: 3vmax;
	font-weight: bold;
	color: #333;
	padding: 0 12px;
	margin-bottom: 8px;
}
.dn-card .dn-section-label {
	padding: 0;
	margin-top: 16px;
}
.dn-card .dn-section-label:first-child {
	margin-top: 0;
}

/* ---------- 餐別 2x2 網格 ---------- */
.dn-meal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 16px;
}
.dn-meal-btn {
	text-align: center;
	padding: 10px 0;
	border-radius: 25px;
	border: 2px solid #ddd;
	background: #fff;
	color: #333;
	font-size: 2.8vmax;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s;
}
.dn-meal-btn.active {
	background: #1e96b9;
	border-color: #1e96b9;
	color: #fff;
}

/* ---------- 日期時間 ---------- */
.dn-datetime-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}
.dn-datetime-col {
	flex: 1;
	min-width: 45%;
}
.dn-datetime-col .dn-input {
	min-width: 0;
	padding: 10px 8px;
}
.dn-datetime-col .dn-input[type="time"] {
	min-width: 100px;
}
@media (max-width: 360px) {
	.dn-datetime-col {
		min-width: 100%;
	}
}
.dn-field-label {
	font-size: 2.8vmax;
	font-weight: bold;
	color: #333;
	margin-bottom: 6px;
}
.dn-input {
	width: 100%;
	border: 1.5px solid #ddd;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: max(16px, 2.8vmax);
	background: #fff;
	color: #333;
	box-sizing: border-box;
}

/* ---------- 食物分類區塊 ---------- */
.dn-cat-block {
	margin-top: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f0f0f0;
}
.dn-cat-block:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.dn-cat-label {
	font-size: 2.8vmax;
	font-weight: bold;
	color: #333;
	margin-bottom: 6px;
}
.dn-select {
	width: 100%;
	border: 1.5px solid #ddd;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 2.8vmax;
	background: #fff;
	color: #333;
	appearance: auto;
	box-sizing: border-box;
}

/* 選擇後顯示的份數區塊 */
.dn-portion-block {
	display: none;
	margin-top: 8px;
}
.dn-portion-block.show {
	display: block;
}
.dn-portion-label {
	font-size: 2.5vmax;
	color: #666;
	margin-bottom: 4px;
}
.dn-portion-input {
	width: 100%;
	border: 1.5px solid #ddd;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 2.8vmax;
	text-align: center;
	background: #fff;
	color: #333;
	box-sizing: border-box;
	cursor: pointer;
}
.dn-serving-def {
	font-size: 2.2vmax;
	color: #999;
	margin-top: 4px;
	line-height: 1.4;
}

/* 單一項目份數輸入 */
.dn-single-input {
	width: 100%;
	border: 1.5px solid #ddd;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 2.8vmax;
	background: #fff;
	color: #333;
	box-sizing: border-box;
	cursor: pointer;
}

/* 水的 cc 輸入 */
.dn-water-input {
	width: 100%;
	border: 1.5px solid #ddd;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 2.8vmax;
	background: #fff;
	color: #333;
	box-sizing: border-box;
	cursor: pointer;
}

/* ---------- 照片區 ---------- */
.dn-ai-btn-row {
	padding: 0 12px;
	margin-bottom: 10px;
}
.dn-ai-btn {
	text-align: center;
	padding: 10px;
	border: 2px solid #ccc;
	border-radius: 25px;
	background: #fff;
	font-size: 2.8vmax;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s;
}
.dn-ai-btn i {
	margin-right: 4px;
}
.dn-ai-btn.disabled {
	border-color: #ccc;
	color: #ccc;
	background: #f9f9f9;
	pointer-events: none;
}
.dn-ai-btn:not(.disabled) {
	border-color: #7C4DFF;
	color: #7C4DFF;
	background: #F3EEFF;
}
.dn-ai-btn:not(.disabled):active {
	background: #E8DEFF;
}
.dn-ai-btn.loading {
	pointer-events: none;
	opacity: 0.7;
}
.dn-ai-btn.loading i {
	animation: dn-spin 1s linear infinite;
}
@keyframes dn-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.dn-photo-btns {
	display: flex;
	gap: 10px;
	padding: 0 12px;
	margin-bottom: 10px;
}
.dn-photo-btn {
	flex: 1;
	text-align: center;
	padding: 10px;
	border: 2px solid #1e96b9;
	border-radius: 25px;
	background: #fff;
	cursor: pointer;
	color: #1e96b9;
	font-size: 2.8vmax;
	font-weight: bold;
}
.dn-photo-btn i {
	margin-right: 4px;
}
.dn-photo-preview {
	text-align: center;
	padding: 0 12px;
}
.dn-photo-preview img {
	max-width: 100%;
	max-height: 200px;
	border-radius: 8px;
	border: 1px solid #eee;
}

/* ---------- 備註 ---------- */
.dn-textarea {
	width: calc(100% - 24px);
	margin: 0 12px;
	border: 1.5px solid #ddd;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 2.8vmax;
	min-height: 80px;
	resize: vertical;
	box-sizing: border-box;
}

/* ---------- Checkbox ---------- */
.dn-checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	font-size: 2.5vmax;
	color: #333;
}
.dn-checkbox-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #1e96b9;
}

/* ---------- 底部按鈕 ---------- */
.dn-action-btns {
	display: flex;
	gap: 10px;
	padding: 16px 12px 20px;
}
.dn-btn-cancel {
	flex: 1;
	text-align: center;
	padding: 12px;
	border-radius: 25px;
	border: 2px solid #ddd;
	background: #fff;
	color: #666;
	font-size: 2.8vmax;
	font-weight: bold;
	cursor: pointer;
}
.dn-btn-save {
	flex: 1.5;
	text-align: center;
	padding: 12px;
	border-radius: 25px;
	border: 2px solid #1e96b9;
	background: #1e96b9;
	color: #fff;
	font-size: 2.8vmax;
	font-weight: bold;
	cursor: pointer;
}
.dn-btn-save:active {
	background: #187a9e;
}

/* ---- 份數選擇器 Bottom Sheet Modal ---- */
.diet-picker-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.4);
	z-index: 9998;
}
.diet-picker-overlay.show {
	display: block;
}
.diet-picker-sheet {
	display: none;
	position: fixed;
	bottom: 0; left: 0; right: 0;
	background: #fff;
	border-radius: 16px 16px 0 0;
	z-index: 9999;
	padding: 0;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
	max-height: 55vh;
}
.diet-picker-sheet.show {
	display: block;
}
.diet-picker-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
}
.diet-picker-title {
	font-size: 2.8vmax;
	font-weight: bold;
	color: #333;
}
.diet-picker-info {
	font-size: 2.2vmax;
	color: #888;
}
.diet-picker-done {
	background: #1e96b9;
	color: #fff;
	border: none;
	border-radius: 16px;
	padding: 6px 20px;
	font-size: 2.5vmax;
	font-weight: bold;
	cursor: pointer;
}
.diet-picker-serving-info {
	padding: 8px 16px;
	font-size: 2.2vmax;
	color: #666;
	background: #EAF5F8;
	border-bottom: 1px solid #eee;
	line-height: 1.5;
}
.diet-picker-wheel-container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
}
.diet-picker-wheel {
	width: 70px;
	height: 150px;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	position: relative;
	scrollbar-width: none;
}
.diet-picker-wheel::-webkit-scrollbar {
	display: none;
}
.diet-picker-wheel-item {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4vmax;
	color: #ccc;
	scroll-snap-align: center;
	user-select: none;
}
.diet-picker-wheel-item.selected {
	color: #1e96b9;
	font-weight: bold;
	font-size: 4.5vmax;
}
.diet-picker-highlight {
	position: absolute;
	top: 50%;
	left: 0; right: 0;
	height: 50px;
	transform: translateY(-50%);
	border-top: 2px solid #1e96b9;
	border-bottom: 2px solid #1e96b9;
	pointer-events: none;
	z-index: 1;
}
.diet-picker-wheel-wrapper {
	position: relative;
	display: inline-block;
}
.diet-picker-dot {
	font-size: 4.5vmax;
	font-weight: bold;
	color: #333;
	padding: 0 2px;
	align-self: center;
}
.diet-picker-unit {
	font-size: 3vmax;
	color: #888;
	margin-left: 6px;
	align-self: center;
}

/* ---- 歷史飲食紀錄頁面 ---- */

/* 統計卡片 */
.diet-stats-row {
	display: flex;
	gap: 10px;
	padding: 10px 0;
}
.diet-stat-card {
	flex: 1;
	background: #EAF5F8;
	border-radius: 12px;
	padding: 12px;
	text-align: center;
}
.diet-stat-value {
	font-size: 4.5vmax;
	font-weight: bold;
	color: #1e96b9;
}
.diet-stat-label {
	font-size: 2.5vmax;
	color: #888;
	margin-top: 2px;
}

/* 篩選餐別 */
.diet-filter-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 0;
}
.diet-filter-btn {
	white-space: nowrap;
	padding: 8px 16px;
	border-radius: 16px;
	border: 1.5px solid #ccc;
	background: #fff;
	color: #5A5A5A;
	font-size: max(14px, 2.5vmax);
	cursor: pointer;
}
.diet-filter-btn.active {
	background: #1e96b9;
	border-color: #1e96b9;
	color: #fff;
}

/* 日期分組標題 */
.diet-date-group-title {
	font-size: 2.8vmax;
	font-weight: bold;
	color: #333;
	padding: 12px 0 6px 0;
	border-bottom: 1px solid #eee;
}

/* 歷史記錄卡片 */
.diet-record-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 14px;
	margin: 10px 0;
	box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.diet-record-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}
.diet-record-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}
.diet-record-meal-tag {
	display: inline-block;
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 2.5vmax;
	font-weight: bold;
}
/* 早餐 - 金黃色 */
.diet-record-meal-tag.meal-1 {
	background: #FDF3E7;
	color: #D4A026;
	border: 1px solid #F5D89A;
}
/* 午餐 - 綠色 */
.diet-record-meal-tag.meal-2 {
	background: #E8F5E9;
	color: #4CAF50;
	border: 1px solid #A5D6A7;
}
/* 晚餐 - 紫色 */
.diet-record-meal-tag.meal-3 {
	background: #F3E5F5;
	color: #9C27B0;
	border: 1px solid #CE93D8;
}
/* 點心 - 粉紅色 */
.diet-record-meal-tag.meal-4 {
	background: #FCE4EC;
	color: #E91E63;
	border: 1px solid #F48FB1;
}
.diet-record-time {
	font-size: 2.5vmax;
	color: #333;
}
.diet-record-actions {
	display: flex;
	gap: 12px;
}
.diet-record-actions i {
	font-size: 3vmax;
	color: #bbb;
	cursor: pointer;
}
.diet-record-actions i:hover {
	color: #888;
}
/* 歷史紀錄照片 */
.diet-record-photo {
	margin: 8px 0;
	text-align: center;
}
.diet-record-photo img {
	max-width: 100%;
	max-height: 200px;
	border-radius: 8px;
	border: 1px solid #eee;
}
.diet-record-date {
	font-size: 2.5vmax;
	color: #999;
	margin-bottom: 10px;
}
.diet-record-section-title {
	font-size: 2.5vmax;
	color: #333;
	font-weight: bold;
	margin-bottom: 6px;
}
.diet-record-items {
	margin-bottom: 10px;
}
.diet-record-item-row {
	display: flex;
	align-items: baseline;
	font-size: 2.5vmax;
	line-height: 1.8;
}
.diet-record-item-cat {
	color: #999;
	min-width: 75px;
	flex-shrink: 0;
}
.diet-record-item-name {
	color: #1e96b9;
	margin-right: 6px;
}
.diet-record-item-portion {
	color: #333;
}
.diet-record-remark-title {
	font-size: 2.5vmax;
	color: #999;
	margin-top: 8px;
}
.diet-record-remark {
	font-size: 2.5vmax;
	color: #333;
	margin-bottom: 10px;
}
.diet-record-calories {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 2px solid #1e96b9;
	border-radius: 8px;
	padding: 10px 14px;
	margin-top: 10px;
	background: #EDF7FA;
}
.diet-record-calories-label {
	font-size: 2.5vmax;
	color: #666;
}
.diet-record-calories-value {
	font-size: 2.8vmax;
	color: #1e96b9;
	font-weight: bold;
}

/* 空狀態 */
.diet-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: #aaa;
	font-size: 2.8vmax;
}
.diet-empty-state i {
	font-size: 8vmax;
	display: block;
	margin-bottom: 10px;
	color: #ddd;
}

/* 歷史頁 content wrapper */
.diet-content-wrapper {
	padding: 0 12px;
}

/* 歷史頁日期篩選 */
.diet-date-filter {
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}
.diet-date-filter-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}
.diet-date-filter-row label {
	font-size: max(14px, 2.5vmax);
	font-weight: bold;
	color: #333;
	white-space: nowrap;
	min-width: 80px;
}
.diet-date-filter-row input {
	flex: 1;
	border: 1.5px solid #ddd;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: max(16px, 2.8vmax);
	background: #fff;
	color: #333;
	box-sizing: border-box;
}
.diet-query-btn {
	width: 100%;
	padding: 12px;
	border-radius: 25px;
	border: none;
	background: #1e96b9;
	color: #fff;
	font-size: max(16px, 2.8vmax);
	font-weight: bold;
	cursor: pointer;
	margin-top: 4px;
}
.diet-query-btn:active {
	background: #187a9e;
}