/* 額外自訂樣式 */
#submitButton {
	bottom: 20px;
	right: 24px;
	width: 60px;
	height: 60px;
	font-size: 24px;
}
.delete-cell {
	width: 50px;
	text-align: center;
}

/* 小型圓形浮動按鈕（匯出JSON、匯入JSON），置於送出按鈕上方 */
.fab-sub {
	position: fixed;
	right: 25px;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background-color: #6c757d; /* 灰色，可自行調整 */
	color: white;
	border: none;
	font-size: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	cursor: pointer;
}
/* 匯出JSON、匯入JSON 分別用不同 bottom 值 */
#exportJsonBtn {
	bottom: 160px; /* 在送出上方再往上一些 */
}
#importJsonBtn {
	bottom: 100px; /* 在 exportJsonBtn 之間 */
}

/* 響應式設計 - 桌面版 */
@media (min-width: 768px) {
	/* 桌面版保持現有佈局 */
}

/* 響應式設計 - 平板版 */
@media (max-width: 767px) {
	/* 調整容器邊距 */
	.container {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* 標題在小螢幕上稍小 */
	.text-center.mb-4 h1 {
		font-size: 1.8rem;
	}

	/* 調整浮動按鈕位置 */
	#submitButton {
		bottom: 15px;
		right: 15px;
		width: 50px;
		height: 50px;
		font-size: 20px;
	}

	.fab-sub {
		right: 15px;
		width: 45px;
		height: 45px;
		font-size: 10px;
	}

	#exportJsonBtn {
		bottom: 130px;
	}

	#importJsonBtn {
		bottom: 80px;
	}

	/* 調整表單欄位在小螢幕上的間距 */
	.mb-3 {
		margin-bottom: 1rem !important;
	}

	/* 調整textarea的行數 */
	#providerContact,
	#customerContact,
	#remarks {
		font-size: 14px;
	}

	/* 品項表格在小螢幕上的調整 */
	.table {
		font-size: 14px;
	}

	.table td,
	.table th {
		padding: 0.5rem;
	}

	/* 調整新增品項按鈕 */
	.d-flex.mb-3 {
		flex-direction: column;
		gap: 0.5rem;
	}

	.d-flex.mb-3 .btn {
		width: 100%;
	}

	.d-flex.mb-3 .ms-auto {
		margin-left: 0 !important;
		width: 100%;
		justify-content: center;
	}

	/* 品項表格響應式設計 */
	#itemsTable {
		font-size: 14px;
	}

	#itemsTable td,
	#itemsTable th {
		padding: 0.5rem;
	}

	/* 表格在小螢幕上橫向滾動 */
	.table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 確保表格內容不會被擠壓 */
	#itemsTable .form-control {
		min-width: 60px;
	}

	#itemsTable textarea {
		min-width: 150px;
	}

	/* 調整總計表格 */
	.table.table-bordered.text-center.mt-3 {
		font-size: 14px;
	}

	.table.table-bordered.text-center.mt-3 td,
	.table.table-bordered.text-center.mt-3 th {
		padding: 0.5rem;
	}
}

/* 響應式設計 - 手機版 */
@media (max-width: 576px) {
	/* 調整容器 */
	.container {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* 標題更小 */
	.text-center.mb-4 h1 {
		font-size: 1.5rem;
		margin-bottom: 1rem !important;
	}

	/* 進一步調整浮動按鈕 */
	#submitButton {
		bottom: 10px;
		right: 10px;
		width: 45px;
		height: 45px;
		font-size: 18px;
	}

	.fab-sub {
		right: 10px;
		width: 40px;
		height: 40px;
		font-size: 9px;
	}

	#exportJsonBtn {
		bottom: 110px;
	}

	#importJsonBtn {
		bottom: 65px;
	}

	/* 調整表單輸入框 */
	.form-control {
		font-size: 14px;
		padding: 0.5rem;
	}

	/* 調整標籤 */
	.form-label {
		font-size: 14px;
		margin-bottom: 0.25rem;
	}

	/* 調整textarea */
	textarea.form-control {
		font-size: 14px;
		line-height: 1.4;
	}

	/* 品項表格在手機上的特殊調整 */
	#itemsTable {
		font-size: 13px;
	}

	#itemsTable td,
	#itemsTable th {
		padding: 0.25rem;
	}

	/* 數量和單價輸入框在手機上調整 */
	#itemsTable input[type="number"] {
		font-size: 13px;
		padding: 0.25rem;
		width: 100%;
	}

	/* 刪除按鈕調整 */
	.delete-cell .btn {
		padding: 0.2rem 0.4rem;
		font-size: 12px;
	}

	/* 總計表格在手機上的調整 */
	.table.table-bordered.text-center.mt-3 {
		font-size: 13px;
	}

	.table.table-bordered.text-center.mt-3 td,
	.table.table-bordered.text-center.mt-3 th {
		padding: 0.3rem;
	}
}