/* ================================================================
   rwd_list.css - 前台列表 RWD 通用樣式
   桌機 (≥768px) = 橫向 flex 表格 + sticky 表頭
   手機 (<768px) = 卡片直列 + key-value list
   ================================================================ */

/* ---------- 通用 ---------- */
.rwd-wrap { width: 100%; }
.rwd-color-red { color: #dc2626; font-weight: 700; }
.rwd-color-green { color: #16a34a; font-weight: 700; }
.rwd-color-gray { color: #9ca3af; }
.rwd-color-blue { color: #2563eb; }

/* ---------- 按鈕 ---------- */
.rwd-btn {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	border: 1px solid #f97316;
	color: #f97316;
	background: transparent;
	text-align: center;
	line-height: 1.2;
	cursor: pointer;
	font-size: 0.95rem;
}
.rwd-btn:hover { background: #f97316; color: #fff; }
.rwd-btn--primary { border-color: #60a5fa; color: #60a5fa; }
.rwd-btn--primary:hover { background: #60a5fa; color: #fff; }
.rwd-btn--gray { border-color: #6b7280; color: #6b7280; }
.rwd-btn--gray:hover { background: #6b7280; color: #fff; }
.rwd-btn--sm { padding: 0.4rem 0.5rem; }

/* ---------- 手機卡片 head/list ---------- */
.rwd-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.rwd-card-title { font-weight: 700; font-size: 1rem; word-break: break-word; }

.rwd-card-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 1rem;
	font-size: 0.875rem;
	border-top: 1px solid #f3f4f6;
	padding-top: 0.75rem;
	margin: 0;
}
.rwd-card-list dt { color: #6b7280; white-space: nowrap; }
.rwd-card-list dd { text-align: right; margin: 0; word-break: break-word; }
.rwd-card-list dd.rwd-dd-left { text-align: left; }

.rwd-card-actions {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.rwd-card-actions .rwd-btn { flex: 1; min-width: 120px; }

/* ---------- 篩選列 ---------- */
.rwd-filter {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.rwd-filter-actions {
	display: flex;
	gap: 0.5rem;
}

/* 手機：非動作元素填滿寬；動作按鈕兩顆 flex:1 並排 */
@media (max-width: 767px) {
	.rwd-filter > *:not(.rwd-filter-actions) {
		width: 100% !important;
		max-width: none !important;
	}
	.rwd-filter-actions > * {
		flex: 1;
		text-align: center;
		min-width: 0;
	}
}

/* 桌機：整列 flex row，按鈕與 input 底線對齊；actions 用 display:contents 攤平 */
@media (min-width: 768px) {
	.rwd-filter {
		flex-direction: row;
		align-items: flex-end !important;
	}
	.rwd-filter-actions { display: contents; }
}

/* ---------- 空資料 ---------- */
.rwd-empty {
	padding: 2.5rem 1rem;
	text-align: center;
	color: #9ca3af;
}

/* ================================================================
   手機 (<768px)
   ================================================================ */
@media (max-width: 767px) {
	.rwd-desktop,
	.rwd-head { display: none !important; }

	.rwd-row {
		display: block;
		border: 1px solid #e5e7eb;
		border-radius: 0.5rem;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		padding: 1rem;
		margin-bottom: 0.75rem;
		background: #fff;
	}
}

/* ================================================================
   桌機 (≥768px)
   ================================================================ */
@media (min-width: 768px) {
	.rwd-mobile { display: none !important; }

	.rwd-scroll {
		max-height: 650px;
		overflow-y: auto;
		overflow-x: auto;
		position: relative;
	}

	.rwd-head,
	.rwd-row {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.75rem 0.5rem;
	}
	.rwd-head {
		border-bottom: 2px solid #e5e7eb;
		background: #fff;
		position: sticky;
		top: 0;
		z-index: 10;
		color: #374151;
		font-weight: 600;
		text-transform: uppercase;
	}
	.rwd-row { border-bottom: 1px solid #e5e7eb; }

	.rwd-cell {
		text-align: center;
		white-space: nowrap;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		box-sizing: border-box;
	}
	.rwd-cell--wrap {
		white-space: normal;
		word-break: break-word;
		overflow-wrap: anywhere;
		overflow: visible;
		text-overflow: clip;
	}
	.rwd-cell--left { text-align: left; }
}