/**
 * Frontend Public Styles for ucodatatables
 * ระบบจัดการเอกสาร สภามหาวิทยาลัย มจร
 * Harmonized with MCU Theme (mcutheme)
 */

:root {
	/* Harmonized MCU Theme Palette */
	--uco-mcu-primary: var(--mcu-primary, #800000);
	--uco-mcu-primary-dark: var(--mcu-primary-dark, #5c0000);
	--uco-mcu-secondary: var(--mcu-secondary, #d4af37);
	--uco-mcu-secondary-light: var(--mcu-secondary-light, #f7e7a9);
	--uco-mcu-accent: var(--mcu-accent-saffron, #f59e0b);
	--uco-mcu-navy: var(--mcu-navy, #0f172a);
	--uco-mcu-gray-50: var(--mcu-gray-50, #f8fafc);
	--uco-mcu-gray-100: var(--mcu-gray-100, #f1f5f9);
	--uco-mcu-gray-200: var(--mcu-gray-200, #e2e8f0);
	--uco-mcu-gray-600: var(--mcu-gray-600, #475569);
	--uco-mcu-gray-700: var(--mcu-gray-700, #334155);
	--uco-mcu-gray-800: var(--mcu-gray-800, #1e293b);
	--uco-mcu-font: var(--mcu-font-sans, 'Prompt', 'Sarabun', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.uco-datatable-container {
	position: relative;
	margin: 24px 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none !important;
	border: none !important;
	font-family: var(--uco-mcu-font) !important;
	-webkit-font-smoothing: antialiased;
}

/* ป้องกัน Theme global table style ตีกับ DataTables ในทุกระดับความกว้างหน้าจอ */
.entry-content .uco-datatable-container table.dataTable,
.mcu-article-body .uco-datatable-container table.dataTable,
.uco-datatable-container table.dataTable,
.uco-table-responsive-wrapper table.dataTable {
	display: table !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 15px 0 0 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background-color: #ffffff !important;
	table-layout: auto !important;
}

@media (max-width: 768px) {
	.entry-content .uco-datatable-container table.dataTable,
	.mcu-article-body .uco-datatable-container table.dataTable,
	.uco-datatable-container table.dataTable,
	.uco-table-responsive-wrapper table.dataTable {
		display: table !important;
		width: 100% !important;
		min-width: 100% !important;
	}
}

.uco-datatable-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 3px solid;
	border-image: linear-gradient(90deg, var(--uco-mcu-primary) 0%, var(--uco-mcu-accent) 100%) 1;
}

.uco-datatable-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--uco-mcu-primary);
	margin: 0 0 6px 0;
	letter-spacing: -0.01em;
	font-family: var(--uco-mcu-font) !important;
}

.uco-datatable-desc {
	font-size: 14px;
	color: var(--uco-mcu-gray-600);
	margin: 0;
	line-height: 1.6;
	font-family: var(--uco-mcu-font) !important;
}

.uco-inline-hint {
	font-size: 12px;
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	color: #92400e;
	padding: 5px 12px;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
}

.uco-charts-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
	box-sizing: border-box;
}

.uco-chart-col {
	box-sizing: border-box;
	min-width: 0;
}

.uco-chart-col.uco-chart-w-1-1 {
	flex: 0 0 100%;
	max-width: 100%;
}

.uco-chart-col.uco-chart-w-1-2 {
	flex: 0 0 calc(50% - 10px);
	max-width: calc(50% - 10px);
}

.uco-chart-col.uco-chart-w-1-3 {
	flex: 0 0 calc(33.333% - 13.333px);
	max-width: calc(33.333% - 13.333px);
}

@media (max-width: 768px) {
	.uco-chart-col.uco-chart-w-1-2,
	.uco-chart-col.uco-chart-w-1-3 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.uco-chart-wrapper {
	margin-bottom: 0;
	padding: 16px 20px;
	background: #ffffff;
	border: 1px solid #f1f5f9;
	border-radius: 12px;
	height: 350px;
	position: relative;
	box-shadow: none !important;
	box-sizing: border-box;
}

/* Custom Table Theme */
.uco-datatable-container table.dataTable {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	table-layout: auto !important;
	border: 1px solid var(--uco-mcu-gray-200) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background-color: #ffffff !important;
}

/* Horizontal Scroll Container on Mobile */
.uco-table-responsive-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	margin: 12px 0 16px 0 !important;
	position: relative;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Column width and formatting rules - Respect column settings from admin */
.uco-datatable-container table.dataTable th.uco-th-num,
.uco-datatable-container table.dataTable th[data-column="uco_row_num"],
.uco-datatable-container table.dataTable td.uco-row-num {
	width: 50px !important;
	min-width: 50px !important;
	max-width: 60px !important;
	text-align: center !important;
}

.uco-datatable-container table.dataTable.nowrap th,
.uco-datatable-container table.dataTable.nowrap td {
	white-space: nowrap;
}

.uco-datatable-container table.dataTable tbody td {
	vertical-align: middle;
}

.uco-datatable-container table.dataTable thead th {
	background: linear-gradient(135deg, var(--uco-mcu-primary) 0%, var(--uco-mcu-primary-dark) 100%) !important;
	color: #ffffff !important;
	font-weight: 600;
	padding: 14px 16px;
	border: none;
	text-align: left;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.uco-datatable-container table.dataTable thead th:first-child {
	border-top-left-radius: 9px;
}

.uco-datatable-container table.dataTable thead th:last-child {
	border-top-right-radius: 9px;
}

.uco-datatable-container table.dataTable tbody td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--uco-mcu-gray-100);
	vertical-align: middle;
	font-size: 14px;
	color: var(--uco-mcu-gray-700);
	transition: background-color 0.15s ease;
}

.uco-datatable-container table.dataTable tbody tr:last-child td {
	border-bottom: none !important;
}

.uco-datatable-container table.dataTable tbody tr:last-child td:first-child {
	border-bottom-left-radius: 9px;
}

.uco-datatable-container table.dataTable tbody tr:last-child td:last-child {
	border-bottom-right-radius: 9px;
}

.uco-datatable-container table.dataTable tbody tr:hover td {
	background-color: rgba(128, 0, 0, 0.04) !important;
}

/* Export Buttons (Table Tools) */
.uco-datatable-container .dt-buttons {
	display: inline-flex;
	gap: 6px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.uco-datatable-container .uco-dt-btn,
.uco-datatable-container button.dt-button {
	background: #ffffff !important;
	color: var(--uco-mcu-gray-700) !important;
	border: 1px solid var(--uco-mcu-gray-200) !important;
	padding: 7px 16px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: inherit !important;
}

.uco-datatable-container .uco-dt-btn:hover,
.uco-datatable-container button.dt-button:hover {
	background: linear-gradient(135deg, var(--uco-mcu-primary) 0%, var(--uco-mcu-primary-dark) 100%) !important;
	color: #ffffff !important;
	border-color: var(--uco-mcu-primary) !important;
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(128, 0, 0, 0.25);
}

/* Individual Column Filter Inputs in Header */
.uco-filter-row th {
	background: #f8fafc !important;
	padding: 8px 10px !important;
	border-bottom: 2px solid #e2e8f0 !important;
}

.uco-col-search {
	width: 100% !important;
	padding: 6px 10px !important;
	font-size: 12px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	box-sizing: border-box;
	outline: none;
	font-weight: normal;
	color: #334155;
	background: #ffffff;
	transition: border-color 0.2s, box-shadow 0.2s;
	font-family: inherit;
}

.uco-col-search:focus {
	border-color: var(--uco-mcu-primary) !important;
	box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.12);
}

/* Filters in a Form Above Table (Modern Card with MCU Theme) */
.uco-filter-form-box {
	background: #ffffff;
	border: 1px solid var(--uco-mcu-gray-200);
	border-radius: 12px;
	padding: 18px 22px;
	margin-bottom: 22px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.uco-filter-form-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 700;
	color: var(--uco-mcu-gray-800);
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--uco-mcu-gray-100);
}

.uco-filter-form-title-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.uco-filter-form-header .dashicons {
	color: var(--uco-mcu-primary);
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.uco-filter-form-actions-right {
	display: flex;
	align-items: center;
}

.uco-filter-form-grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	align-items: flex-end;
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	padding-bottom: 4px;
}

.uco-filter-section {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 140px;
	min-width: 120px;
}

.uco-filter-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--uco-mcu-gray-700);
	margin: 0;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}

.uco-filter-control,
.uco-filter-select,
.uco-filter-input,
.uco-filter-dropdown-btn {
	width: 100% !important;
	height: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;
	padding: 0 12px !important;
	font-size: 13px !important;
	line-height: 38px !important;
	border: 1px solid var(--uco-mcu-gray-200) !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: var(--uco-mcu-gray-800) !important;
	outline: none;
	box-sizing: border-box !important;
	margin: 0 !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: inherit !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.uco-filter-control:focus,
.uco-filter-select:focus,
.uco-filter-input:focus,
.uco-filter-dropdown-btn:focus,
.uco-filter-dropdown-btn.active {
	border-color: var(--uco-mcu-primary) !important;
	box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.12) !important;
}

.uco-filter-actions {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	gap: 8px !important;
	flex: 0 0 auto !important;
	min-width: auto !important;
	white-space: nowrap !important;
}

.uco-filter-btn-search {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	height: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;
	padding: 0 16px !important;
	background: linear-gradient(135deg, var(--uco-mcu-primary) 0%, var(--uco-mcu-primary-dark) 100%) !important;
	color: #ffffff !important;
	border: 1px solid var(--uco-mcu-primary-dark) !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 4px rgba(128, 0, 0, 0.2) !important;
}

.uco-filter-btn-search:hover {
	background: linear-gradient(135deg, var(--uco-mcu-primary-dark) 0%, #400000 100%) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(128, 0, 0, 0.3) !important;
}

.uco-filter-btn-clear {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	height: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;
	padding: 0 14px !important;
	background: var(--uco-mcu-gray-50) !important;
	color: var(--uco-mcu-gray-700) !important;
	border: 1px solid var(--uco-mcu-gray-200) !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.uco-filter-btn-clear:hover {
	background: #fee2e2 !important;
	border-color: #fca5a5 !important;
	color: #dc2626 !important;
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15) !important;
}

.uco-filter-btn-search .dashicons,
.uco-filter-btn-clear .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

/* File Download / View Link Button */
.uco-file-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, var(--uco-mcu-primary) 0%, var(--uco-mcu-primary-dark) 100%);
	color: #ffffff !important;
	padding: 7px 14px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(128, 0, 0, 0.25);
}

.uco-file-link:hover {
	background: linear-gradient(135deg, var(--uco-mcu-primary-dark) 0%, #400000 100%);
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(128, 0, 0, 0.35);
}

.uco-file-link .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Inline Editing Input */
.uco-inline-input {
	width: 100%;
	padding: 5px 10px;
	border: 2px solid #3b82f6 !important;
	border-radius: 6px;
	font-size: 14px;
	outline: none;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
	font-family: inherit;
	transition: border-color 0.2s;
}

.uco-alert {
	padding: 16px 20px;
	border-radius: 10px;
	font-size: 14px;
	margin: 20px 0;
}

.uco-alert-warning {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	color: #92400e;
	border: 1px solid #fde68a;
}

.uco-alert-danger {
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* Word Wrap cell wrapping */
.smart-datatable.wrap-cells td,
.smart-datatable.wrap-cells th {
	white-space: normal !important;
	word-break: break-word !important;
}

/* Clear filters button */
.uco-btn-clear-filter {
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 11px;
	cursor: pointer;
	color: #475569;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-bottom: 4px;
	transition: all 0.2s;
	font-family: inherit;
}

.uco-btn-clear-filter:hover {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #dc2626;
}

/* Frontend Editing Actions & Modal */
.uco-btn-frontend-add-row {
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s;
	box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
	font-family: inherit;
}

.uco-btn-frontend-add-row:hover {
	background: linear-gradient(135deg, #047857 0%, #065f46 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(5, 150, 105, 0.35);
}

.uco-btn-frontend-add-row .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Row Selection styling for Admins */
.uco-datatable-container.user-can-edit table.dataTable tbody tr {
	cursor: pointer;
}
.uco-datatable-container table.dataTable tbody tr.uco-row-selected td {
	background-color: #fef3c7 !important;
	color: #78350f !important;
}

/* Floating Row Action Popover Toolbar */
.uco-row-action-popover {
	position: absolute;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 6px;
	background: #1e293b;
	color: #ffffff;
	padding: 6px 10px;
	border-radius: 30px;
	box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.15);
	transform: translate(-50%, -100%);
	margin-top: -10px;
	animation: ucoPopoverBounce 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	font-family: inherit;
	pointer-events: auto;
}

/* Small arrow at the bottom of the popover */
.uco-row-action-popover::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: #1e293b transparent transparent transparent;
}

@keyframes ucoPopoverBounce {
	from {
		opacity: 0;
		transform: translate(-50%, -80%) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -100%) scale(1);
	}
}

.uco-popover-badge {
	font-size: 11px;
	font-weight: 700;
	color: #94a3b8;
	padding-right: 6px;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.uco-popover-btn {
	background: #334155;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #f8fafc !important;
	border-radius: 20px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: all 0.15s ease;
	line-height: 1.4;
	font-family: inherit;
}

.uco-popover-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.uco-popover-btn-add {
	background: #059669;
}
.uco-popover-btn-add:hover {
	background: #10b981;
}

.uco-popover-btn-edit {
	background: #2563eb;
}
.uco-popover-btn-edit:hover {
	background: #3b82f6;
}

.uco-popover-btn-delete {
	background: #dc2626;
}
.uco-popover-btn-delete:hover {
	background: #ef4444;
}

.uco-popover-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
}

.uco-popover-close {
	background: transparent;
	border: none;
	color: #94a3b8;
	cursor: pointer;
	padding: 4px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 2px;
	transition: color 0.15s ease;
}

.uco-popover-close:hover {
	color: #ffffff;
}

.uco-popover-close .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
}

.uco-btn-frontend-row-edit,
.uco-btn-frontend-row-delete {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 12px;
	color: #64748b;
	margin: 0 2px;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.uco-btn-frontend-row-edit:hover {
	background: #eff6ff;
	border-color: #3b82f6;
	color: #2563eb;
	transform: scale(1.05);
}

.uco-btn-frontend-row-delete:hover {
	background: #fef2f2;
	border-color: #ef4444;
	color: #dc2626;
	transform: scale(1.05);
}

.uco-btn-frontend-row-edit .dashicons,
.uco-btn-frontend-row-delete .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Frontend Modal Overlay */
.uco-fe-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 999999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.uco-fe-modal-overlay[style*="display: block"],
.uco-fe-modal-overlay:not([style*="display: none"]):not([style*="display:none"]) {
	display: flex !important;
}

.uco-fe-modal-container {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: ucoFEModalFadeIn 0.25s ease-out;
}

@keyframes ucoFEModalFadeIn {
	from { opacity: 0; transform: scale(0.95) translateY(8px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

.uco-fe-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px;
	border-bottom: 1px solid #e2e8f0;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.uco-fe-modal-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #0f172a;
}

.uco-fe-modal-title .dashicons {
	color: var(--uco-mcu-primary);
}

.uco-fe-modal-close {
	background: transparent;
	border: none;
	cursor: pointer;
	color: #64748b;
	padding: 6px;
	border-radius: 6px;
	transition: all 0.2s;
}

.uco-fe-modal-close:hover {
	color: #0f172a;
	background: #e2e8f0;
}

.uco-fe-modal-body {
	padding: 24px;
	overflow-y: auto;
}

.uco-fe-modal-body .uco-form-group {
	margin-bottom: 16px;
}

.uco-fe-modal-body label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: var(--uco-mcu-gray-700);
	margin-bottom: 7px;
}

.uco-fe-modal-body input[type="text"],
.uco-fe-modal-body input[type="email"],
.uco-fe-modal-body input[type="date"],
.uco-fe-modal-body input[type="datetime-local"],
.uco-fe-modal-body input[type="time"],
.uco-fe-modal-body textarea,
.uco-fe-modal-body select {
	width: 100%;
	padding: 9px 14px;
	border: 1px solid var(--uco-mcu-gray-200);
	border-radius: 8px;
	font-size: 14px;
	color: var(--uco-mcu-gray-800);
	background: #ffffff;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
	font-family: inherit;
}

.uco-fe-modal-body input:focus,
.uco-fe-modal-body textarea:focus,
.uco-fe-modal-body select:focus {
	border-color: var(--uco-mcu-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.12);
}

.uco-fe-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px;
	border-top: 1px solid var(--uco-mcu-gray-200);
	background: linear-gradient(180deg, var(--uco-mcu-gray-50) 0%, var(--uco-mcu-gray-100) 100%);
}

.uco-btn-fe-modal-cancel {
	background: #ffffff;
	border: 1px solid var(--uco-mcu-gray-200);
	padding: 8px 18px;
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
	color: var(--uco-mcu-gray-600);
	font-weight: 500;
	transition: all 0.2s;
	font-family: inherit;
}

.uco-btn-fe-modal-cancel:hover {
	background: var(--uco-mcu-gray-100);
	border-color: #94a3b8;
}

.uco-btn-fe-modal-save {
	background: linear-gradient(135deg, var(--uco-mcu-primary) 0%, var(--uco-mcu-primary-dark) 100%);
	border: none;
	color: #ffffff;
	padding: 8px 20px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 2px 6px rgba(128, 0, 0, 0.3);
	font-family: inherit;
}

.uco-btn-fe-modal-save:hover {
	background: linear-gradient(135deg, var(--uco-mcu-primary-dark) 0%, #400000 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(128, 0, 0, 0.4);
}

/* DataTables Search & Pagination Refinements & Outer Spacing */
.uco-datatable-container .dt-container {
	margin-top: 10px !important;
}

.uco-datatable-container .dt-container .dt-layout-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 12px 16px !important;
	margin: 0 !important;
	gap: 12px !important;
}

.uco-datatable-container .dt-container .dt-layout-row.dt-layout-table {
	padding: 0 !important;
	margin: 0 0 12px 0 !important;
}

.uco-datatable-container .dt-layout-cell {
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
}

.uco-datatable-container .dt-layout-cell.dt-layout-start {
	justify-content: flex-start !important;
}

.uco-datatable-container .dt-layout-cell.dt-layout-end {
	justify-content: flex-end !important;
}

.uco-datatable-container .dt-length,
.uco-datatable-container .dataTables_length {
	font-size: 13px !important;
	color: var(--uco-mcu-gray-700) !important;
	padding: 8px 4px 8px 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.uco-datatable-container .dt-length select,
.uco-datatable-container .dataTables_length select {
	border: 1px solid var(--uco-mcu-gray-200) !important;
	border-radius: 6px !important;
	padding: 4px 8px !important;
	font-size: 13px !important;
	background: #ffffff !important;
	color: var(--uco-mcu-gray-800) !important;
	outline: none;
	margin: 0 4px !important;
}

.uco-datatable-container .dt-info,
.uco-datatable-container .dataTables_info {
	font-size: 13px !important;
	color: var(--uco-mcu-gray-600) !important;
	padding: 8px 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}

.uco-datatable-container .dt-search,
.uco-datatable-container .dataTables_filter {
	font-size: 13px !important;
	color: var(--uco-mcu-gray-700) !important;
	padding: 8px 4px !important;
}

.uco-datatable-container .dt-search input,
.uco-datatable-container .dataTables_filter input {
	border: 1px solid var(--uco-mcu-gray-200);
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	font-family: inherit;
	margin-left: 6px;
}

.uco-datatable-container .dt-search input:focus,
.uco-datatable-container .dataTables_filter input:focus {
	border-color: var(--uco-mcu-primary);
	box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.12);
}

.uco-datatable-container .dt-paging,
.uco-datatable-container .dataTables_paginate {
	padding: 8px 4px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.uco-datatable-container .dt-paging .dt-paging-button,
.uco-datatable-container .dataTables_paginate .paginate_button {
	border: 1px solid var(--uco-mcu-gray-200) !important;
	background: #ffffff !important;
	color: var(--uco-mcu-gray-700) !important;
	border-radius: 6px !important;
	padding: 6px 12px !important;
	font-size: 13px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	font-family: inherit !important;
	margin: 0 2px !important;
	text-decoration: none !important;
}

.uco-datatable-container .dt-paging .dt-paging-button:hover,
.uco-datatable-container .dataTables_paginate .paginate_button:hover {
	background: var(--uco-mcu-gray-100) !important;
	color: var(--uco-mcu-primary) !important;
	border-color: var(--uco-mcu-gray-200) !important;
}

.uco-datatable-container .dt-paging .dt-paging-button.current,
.uco-datatable-container .dataTables_paginate .paginate_button.current {
	background: linear-gradient(135deg, var(--uco-mcu-primary) 0%, var(--uco-mcu-primary-dark) 100%) !important;
	color: #ffffff !important;
	border-color: var(--uco-mcu-primary) !important;
	font-weight: 600 !important;
}

.uco-datatable-container .dt-paging .dt-paging-button.disabled,
.uco-datatable-container .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

/* Multiline Text & Word Wrap */
.uco-datatable-container .uco-cell-content {
	white-space: pre-line;
	word-break: break-word;
	overflow-wrap: break-word;
	line-height: 1.5;
}

.uco-datatable-container table.wrap-cells tbody td,
.uco-datatable-container table.dataTable tbody td.wrap-cells {
	white-space: pre-line !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
}

/* ============================================================
   Modern Filter Dropdowns (Select box, Multi Select box, Check Box)
   ============================================================ */
.uco-filter-dropdown-wrap {
	position: relative;
	width: 100%;
}

.uco-filter-dropdown-btn {
	width: 100%;
	height: 38px;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 13px;
	color: #334155;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	text-align: left;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	font-family: inherit;
	box-sizing: border-box;
}

.uco-filter-dropdown-btn:hover {
	border-color: #94a3b8;
	background-color: #f8fafc;
}

.uco-filter-dropdown-btn.active,
.uco-filter-dropdown-btn:focus {
	border-color: #7c1d1d !important;
	box-shadow: 0 0 0 3px rgba(124, 29, 29, 0.12) !important;
	outline: none;
}

.uco-filter-dropdown-btn.has-selected {
	background: #fdf2f2;
	border-color: #f87171;
	color: #991b1b;
	font-weight: 600;
}

.uco-filter-dropdown-btn-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	margin-right: 6px;
}

.uco-filter-dropdown-arrow {
	font-size: 16px;
	color: #64748b;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.uco-filter-dropdown-btn.active .uco-filter-dropdown-arrow {
	transform: rotate(180deg);
	color: #7c1d1d;
}

/* Small dropdown button inside table header */
.uco-filter-dropdown-btn-small {
	height: 28px !important;
	font-size: 11px !important;
	padding: 0 6px !important;
	border-radius: 5px !important;
}

.uco-filter-dropdown-btn-small .uco-filter-dropdown-arrow {
	font-size: 14px;
}

/* Dropdown Menu Popup */
.uco-filter-dropdown-menu {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 1050;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
	min-width: 200px;
	max-width: 320px;
	padding: 6px;
	box-sizing: border-box;
}

.uco-filter-dropdown-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 6px 8px;
	border-bottom: 1px solid #f1f5f9;
	margin-bottom: 6px;
	font-size: 11px;
}

.uco-filter-dropdown-select-all,
.uco-filter-dropdown-clear-all {
	color: #2563eb;
	cursor: pointer;
	font-weight: 600;
	transition: color 0.15s;
}

.uco-filter-dropdown-select-all:hover,
.uco-filter-dropdown-clear-all:hover {
	color: #1d4ed8;
	text-decoration: underline;
}

.uco-filter-dropdown-clear-all {
	color: #dc2626;
}
.uco-filter-dropdown-clear-all:hover {
	color: #b91c1c;
}

.uco-filter-dropdown-menu-items {
	max-height: 180px;
	overflow-y: auto;
	padding-right: 2px;
}

.uco-filter-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.15s;
	font-size: 12px;
	color: #334155;
	user-select: none;
	margin-bottom: 2px;
}

.uco-filter-dropdown-item:hover {
	background-color: #f1f5f9;
}

.uco-filter-chk-input {
	cursor: pointer;
	margin: 0;
	accent-color: var(--uco-mcu-primary);
	width: 14px;
	height: 14px;
}

.uco-filter-dropdown-item-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

/* ====================================================================
   DataTables Responsive Expand/Collapse (+ / -) Accordion Styling
   ==================================================================== */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
	position: relative;
	padding-left: 36px !important;
	cursor: pointer;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
	content: "+" !important;
	position: absolute;
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 18px;
	text-align: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--uco-mcu-primary) 0%, var(--uco-mcu-primary-dark) 100%) !important;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 2px 4px rgba(128, 0, 0, 0.35);
	transition: all 0.2s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ffffff;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > th.dtr-control:before {
	content: "−" !important;
	background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
	box-shadow: 0 2px 6px rgba(185, 28, 28, 0.45);
}

/* ถ้ายังไม่ collapse ให้ช่องลำดับแสดงผลปกติ */
table.dataTable:not(.collapsed) > tbody > tr > td.dtr-control:before,
table.dataTable:not(.collapsed) > tbody > tr > th.dtr-control:before {
	display: none !important;
}
table.dataTable:not(.collapsed) > tbody > tr > td.dtr-control {
	padding-left: 14px !important;
}

/* Child Row Details Container */
.uco-dtr-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 12px 18px;
	margin: 8px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	width: 100%;
	box-sizing: border-box;
}

table.uco-dtr-details-table {
	width: 100% !important;
	border-collapse: collapse !important;
	background: transparent !important;
	margin: 0 !important;
}

table.uco-dtr-details-table tr.uco-dtr-row {
	border-bottom: 1px dashed #e2e8f0 !important;
}

table.uco-dtr-details-table tr.uco-dtr-row:last-child {
	border-bottom: none !important;
}

table.uco-dtr-details-table td.uco-dtr-title {
	font-weight: 600 !important;
	color: #1e293b !important;
	padding: 8px 14px 8px 0 !important;
	font-size: 13px !important;
	white-space: nowrap !important;
	width: 140px !important;
	vertical-align: top !important;
	background: transparent !important;
	border: none !important;
}

table.uco-dtr-details-table td.uco-dtr-data {
	color: #334155 !important;
	padding: 8px 0 !important;
	font-size: 13px !important;
	word-break: break-word !important;
	vertical-align: top !important;
	background: transparent !important;
	border: none !important;
}

/* ====================================================================
   Responsive Design for Smartphones & Tablets
   ==================================================================== */
.uco-table-responsive-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	margin-bottom: 15px;
	position: relative;
	border: none !important;
	background: transparent !important;
}

@media screen and (max-width: 768px) {
	.uco-datatable-container {
		padding: 0 !important;
		margin: 16px 0 !important;
	}

	.uco-datatable-header {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
		margin-bottom: 16px !important;
		padding-bottom: 14px !important;
	}

	.uco-datatable-title {
		font-size: 18px !important;
	}

	.uco-datatable-desc {
		font-size: 13px !important;
	}

	.uco-btn-frontend-add-row {
		width: 100% !important;
		justify-content: center !important;
		height: 42px !important;
		font-size: 14px !important;
	}

	.uco-filter-form-box {
		padding: 14px !important;
		border-radius: 10px !important;
		margin-bottom: 16px !important;
	}

	.uco-filter-form-grid {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}

	.uco-filter-section {
		width: 100% !important;
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}

	.uco-filter-actions {
		width: 100% !important;
		display: flex !important;
		flex-direction: row !important;
		gap: 8px !important;
	}

	.uco-filter-control,
	.uco-filter-select,
	.uco-filter-input,
	.uco-filter-dropdown-btn,
	.uco-filter-btn-search,
	.uco-filter-btn-clear {
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;
		font-size: 14px !important;
		line-height: 40px !important;
	}

	.uco-filter-btn-search,
	.uco-filter-btn-clear {
		flex: 1 1 50% !important;
		width: 100% !important;
		justify-content: center !important;
	}

	/* Responsive Table Layout (Smooth Horizontal Scroll & Auto-fit) */
	.uco-table-responsive-wrapper table.dataTable {
		width: 100% !important;
	}

	.uco-datatable-container table.dataTable th,
	.uco-datatable-container table.dataTable td {
		padding: 10px 12px !important;
		font-size: 13px !important;
	}

	/* Mobile Modal Dialog */
	.uco-fe-modal-overlay {
		padding: 12px !important;
	}

	.uco-fe-modal-container {
		max-width: 100% !important;
		max-height: 94vh !important;
		border-radius: 12px !important;
	}

	.uco-fe-modal-header {
		padding: 14px 16px !important;
	}

	.uco-fe-modal-title {
		font-size: 15px !important;
	}

	.uco-fe-modal-body {
		padding: 16px !important;
	}

	.uco-fe-modal-body input[type="text"],
	.uco-fe-modal-body input[type="email"],
	.uco-fe-modal-body input[type="date"],
	.uco-fe-modal-body input[type="datetime-local"],
	.uco-fe-modal-body input[type="time"],
	.uco-fe-modal-body select {
		height: 42px !important;
		font-size: 14px !important;
		padding: 8px 12px !important;
	}

	.uco-fe-modal-footer {
		padding: 12px 16px !important;
		flex-direction: column-reverse !important;
		gap: 8px !important;
	}

	.uco-btn-fe-modal-save,
	.uco-btn-fe-modal-cancel {
		width: 100% !important;
		height: 42px !important;
		justify-content: center !important;
		font-size: 14px !important;
	}

	/* Mobile Popover */
	.uco-row-action-popover {
		max-width: 92vw !important;
		padding: 4px 8px !important;
		gap: 4px !important;
	}

	.uco-popover-btn {
		padding: 4px 8px !important;
		font-size: 12px !important;
	}
}

@media screen and (max-width: 480px) {
	.uco-datatable-title {
		font-size: 16px !important;
	}

	.uco-filter-dropdown-menu {
		min-width: 240px !important;
		max-width: 90vw !important;
	}
}