/* =====================================================
   CRUD ADMIN — shared modern UI polish
   โหลดท้ายสุดใน crud/z_template/header เพื่อ override theme
   เน้นเสริมความสวยงาม (radius/shadow/gradient) ไม่รื้อ layout
   Brand: #218bc3 · #3e9aa1 · #76ad59
   ===================================================== */

:root {
	--ca-blue: #218bc3;
	--ca-teal: #3e9aa1;
	--ca-green: #76ad59;
	--ca-grad: linear-gradient(135deg, #218bc3 0%, #3e9aa1 55%, #76ad59 100%);
}

/* ── page background ── */
.page-wrapper { background: #f4f7fb; }

/* ── cards ── */
.page-wrapper .card {
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 6px 24px rgba(33, 86, 124, 0.08) !important;
	overflow: hidden;
}

/* coloured card headers → brand gradient (ครอบ bg-info / bg-primary / สีฟ้าเดิม) */
.page-wrapper .card-header.bg-info,
.page-wrapper .card-header.bg-primary {
	background: var(--ca-grad) !important;
	border: none !important;
}
.page-wrapper .card-header.bg-info *,
.page-wrapper .card-header.bg-primary * { color: #fff; }

/* ── tables ── */
.page-wrapper table.table thead th,
.page-wrapper table.dataTable thead th {
	background: #f1f6fb !important;
	color: #1e293b !important;
	font-weight: 600;
	border: none !important;
	vertical-align: middle;
}
.page-wrapper table.table tbody td,
.page-wrapper table.dataTable tbody td {
	vertical-align: middle;
	border-top: 1px solid #eef2f7;
	border-bottom: none;
}
.page-wrapper table.table-hover tbody tr:hover,
.page-wrapper table.dataTable tbody tr:hover {
	background: linear-gradient(135deg, rgba(33,139,195,.05), rgba(118,173,89,.05)) !important;
}

/* DataTables controls */
.page-wrapper .dataTables_filter input {
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 50px !important;
	padding: 7px 14px !important;
}
.page-wrapper .dataTables_filter input:focus {
	border-color: var(--ca-teal) !important;
	box-shadow: 0 0 0 3px rgba(62,154,161,.15) !important;
	outline: none;
}
.page-wrapper .dataTables_length select {
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 8px !important;
}
.page-wrapper .dataTables_paginate .paginate_button.current {
	background: var(--ca-grad) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
}
.page-wrapper .dataTables_paginate .paginate_button {
	border-radius: 8px !important;
	border: none !important;
}

/* ── buttons ── */
.page-wrapper .btn { border-radius: 9px; font-weight: 500; }
.page-wrapper .btn-primary { background: var(--ca-blue); border-color: var(--ca-blue); }
.page-wrapper .btn-info { background: var(--ca-teal); border-color: var(--ca-teal); color: #fff; }
.page-wrapper .btn-success { background: var(--ca-green); border-color: var(--ca-green); }
.page-wrapper .btn-info:hover,
.page-wrapper .btn-primary:hover,
.page-wrapper .btn-success:hover { filter: brightness(1.06); }

/* ── form controls ── */
.page-wrapper .form-control,
.page-wrapper .form-select {
	border-radius: 9px;
	border: 1.5px solid #e2e8f0;
}
.page-wrapper .form-control:focus,
.page-wrapper .form-select:focus {
	border-color: var(--ca-teal);
	box-shadow: 0 0 0 3px rgba(62,154,161,.15);
}

/* ── badges ── */
.page-wrapper .badge { border-radius: 7px; font-weight: 600; }

/* ── modals (ทั้งระบบ) ── */
.modal-content { border: none; border-radius: 16px; overflow: hidden; }
.modal-header.bg-info,
.modal-header.bg-primary {
	background: var(--ca-grad) !important;
	border: none;
}