/**
 * CIMS Modal Styles
 *
 * Modal 對話框系統樣式，參考 Ultimate Member
 *
 * @package Clone_Info_Member_System
 * @since 1.0.0
 */

/* ========================================================================
   Modal Overlay（背景遮罩）
   ======================================================================== */

.cims-modal-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(0, 0, 0, 0.6) !important;
	z-index: 999998 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0 !important;
	transition: opacity 0.3s ease !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
}

.cims-modal-overlay.cims-modal-active {
	opacity: 1 !important;
}

/* ========================================================================
   Modal Container（對話框容器）
   ======================================================================== */

.cims-modal {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) scale(0.9) !important;
	z-index: 999999 !important;
	max-width: 90vw !important;
	max-height: 90vh !important;
	opacity: 0 !important;
	transition: all 0.3s ease !important;
	pointer-events: none !important;
}

.cims-modal.cims-modal-active {
	opacity: 1 !important;
	transform: translate(-50%, -50%) scale(1) !important;
	pointer-events: auto !important;
}

/* ========================================================================
   Modal Wrapper（內容包裝）
   ======================================================================== */

.cims-modal-wrapper,
.cims-modal-content {
	position: relative !important;
	background: #ffffff !important;
	border-radius: 12px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
	max-width: 600px !important;
	width: 100% !important;
	max-height: 90vh !important;
	overflow-y: auto !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Modal Header（標題區）*/
.cims-modal-header {
	padding: 24px 32px !important;
	border-bottom: 2px solid #f0f0f0 !important;
	position: relative !important;
}

.cims-modal-header h3 {
	margin: 0 !important;
	padding: 0 40px 0 0 !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: #1a1a1a !important;
	line-height: 1.4 !important;
}

/* Modal Body（內容區）*/
.cims-modal-body {
	padding: 32px !important;
	overflow-y: auto !important;
	max-height: calc(90vh - 150px) !important;
}

/* 自訂捲軸 */
.cims-modal-wrapper::-webkit-scrollbar,
.cims-modal-content::-webkit-scrollbar,
.cims-modal-body::-webkit-scrollbar {
	width: 8px !important;
}

.cims-modal-wrapper::-webkit-scrollbar-track,
.cims-modal-content::-webkit-scrollbar-track,
.cims-modal-body::-webkit-scrollbar-track {
	background: #f1f1f1 !important;
	border-radius: 4px !important;
}

.cims-modal-wrapper::-webkit-scrollbar-thumb,
.cims-modal-content::-webkit-scrollbar-thumb,
.cims-modal-body::-webkit-scrollbar-thumb {
	background: #667eea !important;
	border-radius: 4px !important;
}

.cims-modal-wrapper::-webkit-scrollbar-thumb:hover,
.cims-modal-content::-webkit-scrollbar-thumb:hover,
.cims-modal-body::-webkit-scrollbar-thumb:hover {
	background: #5568d3 !important;
}

/* ========================================================================
   Modal Close Button（關閉按鈕）
   ======================================================================== */

.cims-modal-close {
	position: absolute !important;
	top: 50% !important;
	right: 24px !important;
	transform: translateY(-50%) !important;
	width: 36px !important;
	height: 36px !important;
	background: #f8f9fa !important;
	border: none !important;
	border-radius: 50% !important;
	font-size: 24px !important;
	line-height: 1 !important;
	color: #6c757d !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	z-index: 10 !important;
}

.cims-modal-close:hover {
	background: #ef4444 !important;
	color: #ffffff !important;
	transform: translateY(-50%) rotate(90deg) !important;
}

.cims-modal-close:active {
	transform: translateY(-50%) rotate(90deg) scale(0.9) !important;
}

/* ========================================================================
   Confirm Dialog（確認對話框）
   ======================================================================== */

.cims-confirm-dialog {
	text-align: center !important;
	padding: 24px !important;
}

.cims-confirm-message {
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: #1a1a1a !important;
	margin-bottom: 24px !important;
	font-weight: 500 !important;
}

.cims-confirm-buttons {
	display: flex !important;
	gap: 12px !important;
	justify-content: center !important;
}

.cims-confirm-buttons .cims-button {
	min-width: 100px !important;
	padding: 10px 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.cims-confirm-buttons .cims-button-primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: #ffffff !important;
}

.cims-confirm-buttons .cims-button-primary:hover {
	background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.cims-confirm-buttons .cims-button-secondary {
	background: #ffffff !important;
	color: #6c757d !important;
	border: 2px solid #e9ecef !important;
}

.cims-confirm-buttons .cims-button-secondary:hover {
	background: #f8f9fa !important;
	border-color: #dee2e6 !important;
	color: #495057 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================================================
   Alert Dialog（提示對話框）
   ======================================================================== */

.cims-alert-dialog {
	text-align: center !important;
	padding: 24px !important;
}

.cims-alert-icon {
	width: 64px !important;
	height: 64px !important;
	margin: 0 auto 20px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 32px !important;
	font-weight: bold !important;
}

/* Alert Success */
.cims-alert-success .cims-alert-icon {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
	color: #ffffff !important;
}

/* Alert Error */
.cims-alert-error .cims-alert-icon {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
	color: #ffffff !important;
}

/* Alert Warning */
.cims-alert-warning .cims-alert-icon {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
	color: #ffffff !important;
}

/* Alert Info */
.cims-alert-info .cims-alert-icon {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
	color: #ffffff !important;
}

.cims-alert-message {
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: #1a1a1a !important;
	margin-bottom: 24px !important;
	font-weight: 500 !important;
}

.cims-alert-buttons {
	display: flex !important;
	justify-content: center !important;
}

.cims-alert-buttons .cims-button {
	min-width: 120px !important;
	padding: 10px 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.cims-alert-buttons .cims-button-primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: #ffffff !important;
}

.cims-alert-buttons .cims-button-primary:hover {
	background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* ========================================================================
   Loading Dialog（載入中對話框）
   ======================================================================== */

.cims-loading-dialog {
	text-align: center !important;
	padding: 40px !important;
}

.cims-loading-spinner {
	width: 64px !important;
	height: 64px !important;
	margin: 0 auto 24px !important;
	border: 4px solid #f0f0f0 !important;
	border-top: 4px solid #667eea !important;
	border-radius: 50% !important;
	animation: cims-spin 1s linear infinite !important;
}

@keyframes cims-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.cims-loading-message {
	font-size: 16px !important;
	color: #6c757d !important;
	font-weight: 500 !important;
}

/* ========================================================================
   Modal Size Variations（尺寸變化）
   ======================================================================== */

.cims-modal-small .cims-modal-wrapper,
.cims-modal-small .cims-modal-content {
	max-width: 400px !important;
}

.cims-modal-medium .cims-modal-wrapper,
.cims-modal-medium .cims-modal-content {
	max-width: 600px !important;
}

.cims-modal-large .cims-modal-wrapper,
.cims-modal-large .cims-modal-content {
	max-width: 800px !important;
}

.cims-modal-xlarge .cims-modal-wrapper,
.cims-modal-xlarge .cims-modal-content {
	max-width: 1000px !important;
}

.cims-modal-full .cims-modal-wrapper,
.cims-modal-full .cims-modal-content {
	max-width: 95vw !important;
	max-height: 95vh !important;
}

/* ========================================================================
   Form Inside Modal（Modal 內的表單）
   ======================================================================== */

.cims-modal .cims-form-group {
	margin-bottom: 20px !important;
}

.cims-modal .cims-label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1a1a1a !important;
	margin-bottom: 8px !important;
}

.cims-modal .cims-input,
.cims-modal .cims-select,
.cims-modal .cims-textarea {
	width: 100% !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #1a1a1a !important;
	background: #ffffff !important;
	border: 2px solid #e9ecef !important;
	border-radius: 8px !important;
	transition: all 0.3s ease !important;
	font-family: inherit !important;
}

.cims-modal .cims-input:focus,
.cims-modal .cims-select:focus,
.cims-modal .cims-textarea:focus {
	outline: none !important;
	border-color: #667eea !important;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.cims-modal .cims-textarea {
	resize: vertical !important;
	min-height: 100px !important;
}

.cims-modal .cims-form-actions {
	display: flex !important;
	gap: 12px !important;
	justify-content: flex-end !important;
	margin-top: 24px !important;
	padding-top: 24px !important;
	border-top: 2px solid #f0f0f0 !important;
}

/* ========================================================================
   欄位錯誤提示（用於 admin.js 的表單驗證）
   ======================================================================== */

.cims-field-invalid {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.cims-field-error {
	display: block !important;
	margin-top: 6px !important;
	font-size: 13px !important;
	color: #ef4444 !important;
	font-weight: 500 !important;
}

/* ========================================================================
   響應式設計
   ======================================================================== */

@media (max-width: 768px) {
	.cims-modal {
		max-width: 95vw !important;
	}

	.cims-modal-wrapper,
	.cims-modal-content {
		padding: 0 !important;
		border-radius: 8px !important;
		max-width: none !important;
	}

	.cims-modal-header {
		padding: 20px 24px !important;
	}

	.cims-modal-body {
		padding: 24px !important;
	}

	.cims-modal-close {
		top: 50% !important;
		right: 16px !important;
		width: 32px !important;
		height: 32px !important;
		font-size: 20px !important;
		transform: translateY(-50%) !important;
	}

	.cims-modal-close:hover {
		transform: translateY(-50%) rotate(90deg) !important;
	}

	.cims-modal-close:active {
		transform: translateY(-50%) rotate(90deg) scale(0.9) !important;
	}

	.cims-confirm-dialog,
	.cims-alert-dialog,
	.cims-loading-dialog {
		padding: 20px !important;
	}

	.cims-confirm-message,
	.cims-alert-message {
		font-size: 15px !important;
	}

	.cims-confirm-buttons,
	.cims-alert-buttons {
		flex-direction: column !important;
		gap: 8px !important;
	}

	.cims-confirm-buttons .cims-button,
	.cims-alert-buttons .cims-button {
		width: 100% !important;
	}

	.cims-modal .cims-form-actions {
		flex-direction: column !important;
		gap: 8px !important;
	}

	.cims-modal .cims-form-actions .cims-button {
		width: 100% !important;
	}

	/* Modal Size Variations on Mobile */
	.cims-modal-small .cims-modal-wrapper,
	.cims-modal-small .cims-modal-content,
	.cims-modal-medium .cims-modal-wrapper,
	.cims-modal-medium .cims-modal-content,
	.cims-modal-large .cims-modal-wrapper,
	.cims-modal-large .cims-modal-content,
	.cims-modal-xlarge .cims-modal-wrapper,
	.cims-modal-xlarge .cims-modal-content {
		max-width: 95vw !important;
	}
}

@media (max-width: 480px) {
	.cims-modal-wrapper,
	.cims-modal-content {
		padding: 0 !important;
	}

	.cims-modal-header {
		padding: 16px 20px !important;
	}

	.cims-modal-body {
		padding: 20px !important;
	}

	.cims-alert-icon {
		width: 48px !important;
		height: 48px !important;
		font-size: 24px !important;
	}

	.cims-loading-spinner {
		width: 48px !important;
		height: 48px !important;
	}

	.cims-loading-message,
	.cims-confirm-message,
	.cims-alert-message {
		font-size: 14px !important;
	}
}

/* ========================================================================
   Accessibility（無障礙支援）
   ======================================================================== */

.cims-modal-overlay[aria-hidden="true"],
.cims-modal[aria-hidden="true"] {
	display: none !important;
}

/* 鍵盤焦點樣式 */
.cims-modal-close:focus,
.cims-modal .cims-button:focus {
	outline: 3px solid #667eea !important;
	outline-offset: 2px !important;
}

/* 減少動畫偏好設定 */
@media (prefers-reduced-motion: reduce) {
	.cims-modal-overlay,
	.cims-modal,
	.cims-modal-close,
	.cims-button,
	.cims-loading-spinner {
		transition: none !important;
		animation: none !important;
	}
}

/* ========================================================================
   Print Styles（列印樣式）
   ======================================================================== */

@media print {
	.cims-modal-overlay,
	.cims-modal {
		display: none !important;
	}
}