/* ==================================================================
   Genesis — editorial precision skin for the CWIE back office
   โหลดเป็นไฟล์สุดท้ายใน crud/z_template/header.php จึงทับธีมเดิมได้ทั้งหมด
   โดยไม่ต้องแก้ custom.css ทีละกฎ (ถอดออกได้ด้วยการลบ 1 บรรทัดใน header)

   หลักการของ Genesis ที่ยึดในไฟล์นี้
     · indigo ใช้กับ "สิ่งที่กดได้" เท่านั้น ไม่ใช้ตกแต่ง
     · ไม่มี gradient ตกแต่ง — พื้นผิวเป็นสีเรียบ + เส้นขอบบาง
     · เงาใช้เฉพาะตอน hover/focus ไม่ใส่กับของที่อยู่นิ่ง
     · รัศมี: chip 4px · ปุ่ม/อินพุต 6px · panel 8px · การ์ด 12px · avatar 9999px
   ================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
	/* ---- Genesis palette ---- */
	--g-primary: #6366F1;
	--g-primary-hover: #4F46E5;
	--g-primary-tint: rgba(99, 102, 241, .10);
	--g-neutral: #9C9C9C;
	--g-bg: #FAFAFA;
	--g-surface: #FFFFFF;
	--g-text: #0F172A;
	--g-text-2: #334155;
	--g-border: #E8E8EC;
	--g-success: #10B981;
	--g-warning: #F59E0B;
	--g-error: #EF4444;

	--g-ring: 0 0 0 3px rgba(99, 102, 241, .12);
	--g-shadow-hover: 0 8px 30px rgba(0, 0, 0, .08);
	--g-shadow-btn: 0 4px 12px rgba(99, 102, 241, .35);
	--g-shadow-lg: 0 12px 32px rgba(0, 0, 0, .12);

	--g-display: 'General Sans', 'Noto Sans Thai', 'Leelawadee UI', sans-serif;
	--g-body: 'DM Sans', 'Noto Sans Thai', 'Leelawadee UI', sans-serif;
	--g-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* ---- ทับตัวแปรของธีมเดิม เพื่อให้ทุกกฎที่อ้างตัวแปรเปลี่ยนตามทันที ----
	   ตัวแปร grad เดิมถูกแทนด้วยสีเรียบ จึงไม่มี gradient หลงเหลือจากกฎเหล่านั้น */
	--cwie-p1: #6366F1;
	--cwie-p2: #6366F1;
	--cwie-p3: #4F46E5;
	--cwie-grad: #6366F1;
	--cwie-grad-btn: #6366F1;
	--cwie-bg: #FAFAFA;
	--cwie-surface: #FFFFFF;
	--cwie-border: #E8E8EC;
	--cwie-text: #0A0A0A;
	--cwie-muted: #6B6B6B;
	--cwie-radius: 12px;
	--cwie-radius-sm: 6px;
	--cwie-shadow: none;
	--cwie-shadow-hover: 0 8px 30px rgba(0, 0, 0, .08);
}

/* ==================== Typography ==================== */

body,
.swal2-popup,
.tooltip,
.dropdown-menu,
button,
input,
select,
textarea {
	font-family: var(--g-body) !important;
}

body {
	background: var(--g-bg) !important;
	color: var(--g-text);
	font-size: 15px;
	/* ภาษาไทยมีสระบน-ล่างและวรรณยุกต์ซ้อนกัน จึงต้องการระยะบรรทัดมากกว่าอังกฤษ */
	line-height: 1.7;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.card-header h4,
.swal2-title {
	font-family: var(--g-display) !important;
	color: var(--g-text);
	font-weight: 700;
	/* Genesis ใช้ tracking -0.03em กับหัวข้อ แต่ค่านั้นทำให้สระ/วรรณยุกต์ไทยชนกัน
	   จึงลดลงเหลือ -0.01em ซึ่งยังคงความกระชับของหัวข้อไว้โดยที่ไทยยังอ่านชัด */
	letter-spacing: -0.01em;
	line-height: 1.45;
	margin-bottom: 0;
}

h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

p { margin-bottom: 12px; }

small, .small { font-size: 13px; line-height: 1.6; }

/* ตัวเลข/รหัส ใช้ตัวเลขความกว้างเท่ากัน อ่านเป็นคอลัมน์ได้ง่าย */
.counter,
.kpi-tile h3,
td .badge,
.dataTables_wrapper table.dataTable td {
	font-variant-numeric: tabular-nums;
}

/* น้ำหนักตัวอักษร: Genesis ให้ใช้ไม่เกิน 2 น้ำหนักต่อหน้าจอ — ตัวหนา 700 สงวนไว้ให้หัวข้อ
   ส่วนตัวเน้นในเนื้อหาใช้ 500 เพื่อไม่ให้หน้าจอดูหนักเกินไป */
strong, b, .fw-bold, .font-weight-bold {
	font-weight: 500;
}

.card-header h4,
h1, h2, h3 { font-weight: 700; }

code, kbd, pre, .cwie-mono {
	font-family: var(--g-mono) !important;
	font-size: 13px;
	background: #F5F5F7;
	border-radius: 4px;
	padding: 1px 5px;
	color: var(--g-text);
}

a { color: var(--g-primary); text-decoration: none; }
a:hover { color: var(--g-primary-hover); }

.text-muted { color: var(--g-text-2) !important; }

/* ==================== Surfaces ==================== */

.card {
	background: var(--g-surface);
	border: 1px solid var(--g-border) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

/* overflow:hidden ข้างบนตั้งไว้บังคับมุมโค้งของการ์ด แต่ดันตัด dropdown-menu ที่ต้อง
   โผล่พ้นขอบการ์ดไปด้วย (เช่นตัวกรอง checkbox ปี/คณะ/สาขาในตารางนักศึกษา) — ปลดเฉพาะ
   ตอนมี dropdown เปิดอยู่จริงเท่านั้น ไม่กระทบมุมโค้ง/เงาของการ์ดตอนปกติ */
.card:has(.dropdown-menu.show) {
	overflow: visible;
}

/* แถบสีด้านบนการ์ดของธีมเดิม (เส้นไล่เฉด) — Genesis ไม่ใช้ของตกแต่ง */
.card > .card-body:first-child::before,
.card::before {
	display: none !important;
	content: none !important;
}

.card-header {
	background: var(--g-surface) !important;
	border-bottom: 1px solid var(--g-border) !important;
	padding: 16px 20px;
}

.card-header h4,
.card-header .m-b-0 {
	color: var(--g-text) !important;
	font-size: 20px;
	margin-bottom: 0;
}

/* หัวการ์ดของธีมเดิมเป็นพื้นสี (bg-info ฯลฯ) — เปลี่ยนเป็นพื้นขาว ตัวอักษรเข้ม */
.card-header.bg-info,
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-warning,
.card-header.bg-danger,
.card-header.bg-dark {
	background: var(--g-surface) !important;
}

.card-header.bg-info *,
.card-header.bg-primary *,
.card-header.bg-success *,
.card-header.bg-warning *,
.card-header.bg-danger *,
.card-header.bg-dark * {
	color: var(--g-text) !important;
}

.card-header .btn-light {
	border: 1px solid var(--g-border) !important;
	background: var(--g-surface) !important;
	color: var(--g-text) !important;
}

.card-body { padding: 20px; }

/* แบนเนอร์/การ์ดที่ตั้ง gradient ไว้ใน markup — แปลงเป็นพื้นผิวเรียบตามระบบ */
.card[style*="gradient"] {
	background: var(--g-surface) !important;
	border: 1px solid var(--g-border) !important;
}

.card[style*="gradient"] .text-white,
.card[style*="gradient"] h1,
.card[style*="gradient"] h2,
.card[style*="gradient"] h3,
.card[style*="gradient"] span,
.card[style*="gradient"] i {
	color: var(--g-text) !important;
}

.card[style*="gradient"] .badge[style*="rgba(255"] {
	background: #F5F5F7 !important;
	color: var(--g-text-2) !important;
}

/* วงกลมไอคอนใน KPI tile ที่ใช้ gradient inline */
.kpi-tile [style*="gradient"],
.card [style*="border-radius:50%"][style*="gradient"] {
	background: var(--g-primary-tint) !important;
	box-shadow: none !important;
}

.kpi-tile [style*="gradient"] i,
.card [style*="border-radius:50%"][style*="gradient"] i {
	color: var(--g-primary) !important;
}

/* ==================== KPI tiles ==================== */

.kpi-tile {
	border-radius: 12px !important;
	box-shadow: none !important;
}

.kpi-clickable:hover {
	transform: translateY(-2px);
	box-shadow: var(--g-shadow-hover) !important;
}

.kpi-clickable:hover .kpi-chevron { color: var(--g-primary) !important; }

/* ==================== Buttons ==================== */

.btn {
	font-family: var(--g-body) !important;
	font-weight: 500;
	font-size: 14px;
	border-radius: 6px !important;
	padding: 0 16px;
	height: 38px;
	line-height: 36px;
	letter-spacing: 0;
	box-shadow: none !important;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-sm { height: 32px; line-height: 30px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 44px; line-height: 42px; padding: 0 24px; font-size: 15px; }

.btn-primary,
.btn-info,
.btn-success {
	background: var(--g-primary) !important;
	border: 1px solid var(--g-primary) !important;
	color: #fff !important;
}

.btn-primary:hover,
.btn-info:hover,
.btn-success:hover {
	background: var(--g-primary-hover) !important;
	border-color: var(--g-primary-hover) !important;
	box-shadow: var(--g-shadow-btn) !important;
}

.btn-light,
.btn-secondary {
	background: transparent !important;
	border: 1px solid var(--g-border) !important;
	color: var(--g-text) !important;
}

.btn-light:hover,
.btn-secondary:hover {
	background: #F5F5F7 !important;
	border-color: #DADAE0 !important;
}

.btn-danger {
	background: transparent !important;
	border: 1px solid var(--g-error) !important;
	color: var(--g-error) !important;
}

.btn-danger:hover {
	background: var(--g-error) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.btn-warning {
	background: transparent !important;
	border: 1px solid var(--g-warning) !important;
	color: #B45309 !important;
}

.btn-outline-info,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
	background: transparent !important;
	border: 1px solid var(--g-border) !important;
	color: var(--g-text) !important;
}

.btn-outline-info:hover { border-color: var(--g-primary) !important; color: var(--g-primary) !important; background: var(--g-primary-tint) !important; }
.btn-outline-danger { border-color: var(--g-error) !important; color: var(--g-error) !important; }
.btn-outline-danger:hover { background: var(--g-error) !important; color: #fff !important; }
.btn-outline-success:hover { border-color: var(--g-success) !important; color: var(--g-success) !important; }

.btn:focus,
.btn:focus-visible {
	outline: none;
	box-shadow: var(--g-ring) !important;
}

.btn:disabled,
.btn.disabled { opacity: .5; transform: none; }

/* ==================== Forms ==================== */

.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection {
	font-size: 14px;
	color: var(--g-text);
	background: var(--g-surface);
	border: 1px solid var(--g-border) !important;
	border-radius: 6px !important;
	padding: 10px 14px;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder { color: var(--g-neutral); }

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
	border-color: var(--g-primary) !important;
	box-shadow: var(--g-ring) !important;
}

.form-control.is-invalid,
.form-control.text-danger { border-color: var(--g-error) !important; }

.form-label,
.cwie-field-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--g-text);
	margin-bottom: 6px;
}

.form-check-input:checked {
	background-color: var(--g-primary);
	border-color: var(--g-primary);
}

.form-check-input:focus { box-shadow: var(--g-ring); border-color: var(--g-primary); }

/* ==================== Badges / chips ==================== */

.badge {
	font-family: var(--g-body) !important;
	font-weight: 500;
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 9999px !important;
	background-image: none !important;
	box-shadow: none !important;
	letter-spacing: 0;
}

.badge.bg-primary,
.badge.bg-info { background: var(--g-primary-tint) !important; color: var(--g-primary-hover) !important; }
.badge.bg-success { background: rgba(16, 185, 129, .12) !important; color: #047857 !important; }
.badge.bg-warning { background: rgba(245, 158, 11, .14) !important; color: #B45309 !important; }
.badge.bg-danger { background: rgba(239, 68, 68, .12) !important; color: #B91C1C !important; }
.badge.bg-secondary,
.badge.bg-dark { background: #F0F0F3 !important; color: var(--g-text-2) !important; }

/* ==================== Tables ==================== */

.dataTables_wrapper table.dataTable,
.table {
	border: 1px solid var(--g-border) !important;
	border-radius: 12px;
	overflow: hidden;
	font-size: 14px;
}

/* หัวตาราง — ต้องระบุ .table.color-table.muted-table ให้ครบ 3 คลาสเท่ากฎเดิมของธีม
   (ไฟล์นี้โหลดทีหลัง จึงชนะเมื่อ specificity เท่ากัน) */
.table.color-table.muted-table thead th,
table.table.color-table.muted-table thead th,
.dataTables_wrapper .table.color-table.muted-table thead th,
html body table thead th,
html body table.dataTable thead th,
html body .table thead th,
html body .color-table thead th,
html body .color-table.muted-table thead th,
html body .dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead th,
.table thead th,
.color-table.muted-table thead th {
	background: #FCFCFD !important;
	background-image: none !important;
	color: var(--g-text-2) !important;
	font-family: var(--g-body) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 1px solid var(--g-border) !important;
	padding: 12px 16px !important;
}

.dataTables_wrapper table.dataTable tbody td,
.table tbody td {
	color: var(--g-text);
	border-top: 1px solid var(--g-border) !important;
	padding: 12px 16px !important;
	font-size: 14px;
}

.dataTables_wrapper table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > *,
.table.table-striped tbody tr:nth-of-type(odd) { background-color: transparent !important; }

.dataTables_wrapper table.dataTable tbody tr:hover > *,
.table tbody tr:hover { background-color: #FAFAFB !important; }

.dataTables_wrapper table.dataTable tbody tr:hover td:first-child { box-shadow: none !important; }

/* toolbar */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	border: 1px solid var(--g-border) !important;
	border-radius: 6px !important;
	background-color: var(--g-surface) !important;
	font-size: 14px;
	color: var(--g-text);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
	border-color: var(--g-primary) !important;
	box-shadow: var(--g-ring) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--g-text-2); font-size: 13px; }

/* pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
	background: transparent !important;
	background-image: none !important;
	border: 1px solid var(--g-border) !important;
	border-radius: 6px !important;
	color: var(--g-text-2) !important;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px !important;
	box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--g-primary) !important;
	border-color: var(--g-primary) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: #F5F5F7 !important;
	color: var(--g-text) !important;
	border-color: #DADAE0 !important;
}

/* ==================== Navigation ==================== */

.topbar,
.topbar .top-navbar,
.navbar-header,
.topbar .navbar-collapse {
	background: #0F172A !important;
	background-image: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .15) !important;
}

.topbar .navbar-brand b img,
.topbar .navbar-brand span img { filter: none; }

.topbar .navbar-nav > .nav-item > a,
.topbar .nav-link,
.topbar .profile-pic span,
.topbar .profile-pic i,
.navbar-header .navbar-brand .light-logo {
	color: #FFFFFF !important;
	font-weight: 500;
}

.topbar .nav-link:hover,
.topbar .navbar-nav > .nav-item > a:hover {
	color: #818CF8 !important;
}

.side-mini-panel,
.sidebarmenu,
.left-sidebar {
	background: var(--g-surface) !important;
	border-right: 1px solid var(--g-border);
	box-shadow: none !important;
}

.side-mini-panel ul.mini-nav > li > a {
	color: #1E293B !important;
}

.menu-title {
	font-family: var(--g-display) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #0F172A !important;
	background: none !important;
	-webkit-text-fill-color: #0F172A !important;
	border-bottom: 1px solid var(--g-border);
}

.sidebarmenu .sidebar-menu > li > a,
.sidebarmenu .sub-menu li a {
	color: #1E293B !important;
	font-size: 14px;
	font-weight: 600;
	border-radius: 6px;
	background: transparent !important;
	box-shadow: none !important;
}

.sidebarmenu .sidebar-menu > li > a:hover,
.sidebarmenu .sub-menu li a:hover {
	background: #F1F5F9 !important;
	color: #4F46E5 !important;
}

.sidebarmenu .sidebar-menu a.active,
.sidebarmenu .sidebar-menu > li > a.active,
.sidebarmenu .sub-menu li a.active {
	background: rgba(99, 102, 241, .12) !important;
	color: #4F46E5 !important;
	font-weight: 700 !important;
}

/* ไอคอนเมนูสีรุ้งของธีมเดิม — Genesis ใช้สีเดียวเพื่อความสงบของสายตา */
.sidebarmenu .sidebar-menu a i,
.sidebarmenu .sidebar-menu a i[class*="fa-"] { color: #64748B !important; }

.sidebarmenu .sidebar-menu a:hover i,
.sidebarmenu .sidebar-menu a.active i { color: #4F46E5 !important; }

.side-mini-panel ul.mini-nav > li.selected > a,
.side-mini-panel ul.mini-nav > li:hover > a {
	background: rgba(99, 102, 241, .12) !important;
	border-left-color: #4F46E5 !important;
	color: #4F46E5 !important;
}

.sidebar-menu .badge,
.mini-nav .badge {
	background: var(--g-error) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* ==================== Dropdowns / popovers ==================== */

.dropdown-menu {
	border: 1px solid var(--g-border);
	border-radius: 8px;
	box-shadow: var(--g-shadow-lg);
	padding: 6px;
	font-size: 14px;
}

.dropdown-item {
	border-radius: 6px;
	color: var(--g-text);
	padding: 8px 12px;
}

.dropdown-item:hover { background: #F5F5F7; color: var(--g-text); }
.dropdown-item.text-danger:hover { background: rgba(239, 68, 68, .08); }

/* ==================== Alerts ==================== */

.alert {
	background-image: none !important;
	border: 1px solid var(--g-border) !important;
	border-radius: 8px !important;
	color: var(--g-text) !important;
	font-size: 14px;
	box-shadow: none !important;
}

.alert-info { background: var(--g-primary-tint) !important; border-color: rgba(99, 102, 241, .2) !important; }
.alert-success { background: rgba(16, 185, 129, .08) !important; border-color: rgba(16, 185, 129, .22) !important; }
.alert-warning { background: rgba(245, 158, 11, .08) !important; border-color: rgba(245, 158, 11, .25) !important; }
.alert-danger { background: rgba(239, 68, 68, .07) !important; border-color: rgba(239, 68, 68, .22) !important; }

/* ==================== Modals & SweetAlert ==================== */

.modal-content,
.swal2-popup {
	border: 1px solid var(--g-border);
	border-radius: 12px !important;
	box-shadow: var(--g-shadow-lg);
}

.modal-header {
	background: var(--g-surface) !important;
	border-bottom: 1px solid var(--g-border);
}

.modal-header * { color: var(--g-text) !important; }

.swal2-title { font-size: 24px !important; }
.swal2-html-container { font-size: 14px !important; color: var(--g-text-2); }

.swal2-styled.swal2-confirm {
	background: var(--g-primary) !important;
	border-radius: 6px !important;
	font-weight: 500;
	box-shadow: none !important;
}

.swal2-styled.swal2-cancel {
	background: transparent !important;
	border: 1px solid var(--g-border) !important;
	color: var(--g-text) !important;
	border-radius: 6px !important;
}

/* การ์ดฟิลด์ในป็อปอัปรายละเอียด */
.swal2-popup .cwie-detail-field {
	background: var(--g-surface);
	border: 1px solid var(--g-border);
	border-radius: 8px;
}

.swal2-popup .cwie-detail-ico {
	background: var(--g-primary-tint) !important;
	color: var(--g-primary) !important;
	border-radius: 8px;
}

.swal2-popup .cwie-detail-label { color: var(--g-text-2); font-size: 12px; }
.swal2-popup .cwie-detail-value { color: var(--g-text); font-weight: 500; font-size: 14px; }

/* ==================== Process stepper ==================== */

.cwie-step-dot {
	background: #F0F0F3 !important;
	background-image: none !important;
	border-color: var(--g-border) !important;
	color: var(--g-neutral) !important;
	box-shadow: none !important;
}

.cwie-step-label { color: var(--g-text-2) !important; font-size: 12px; }

.cwie-step-done .cwie-step-dot { background: var(--g-success) !important; color: #fff !important; }
.cwie-step-done .cwie-step-bar { background: var(--g-success) !important; }
.cwie-step-done .cwie-step-label { color: var(--g-text-2) !important; }

.cwie-step-current .cwie-step-dot {
	background: var(--g-primary) !important;
	color: #fff !important;
	box-shadow: var(--g-ring) !important;
}

.cwie-step-current .cwie-step-label { color: var(--g-primary-hover) !important; font-weight: 500; }

.cwie-step-failed .cwie-step-dot { background: var(--g-error) !important; color: #fff !important; box-shadow: none !important; }
.cwie-step-failed .cwie-step-label { color: var(--g-error) !important; font-weight: 500; }

/* ==================== Mentee / position cards ==================== */

.mentee-card,
.position-card {
	border: 1px solid var(--g-border);
	border-radius: 12px;
	box-shadow: none;
}

.mentee-card:hover,
.position-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--g-shadow-hover);
}

.mentee-head {
	background: #FCFCFD !important;
	background-image: none !important;
	border-bottom: 1px solid var(--g-border);
}

.mentee-avatar {
	background: var(--g-primary-tint) !important;
	background-image: none !important;
	color: var(--g-primary-hover) !important;
	font-weight: 600;
}

.mentee-name { color: var(--g-text); font-size: 15px; }
.mentee-sub, .mentee-meta { color: var(--g-text-2); font-size: 13px; }
.mentee-foot { background: var(--g-surface); border-top: 1px solid var(--g-border); }

.mentee-card.mentee-alert { border-color: rgba(239, 68, 68, .35); }
.mentee-card.mentee-alert .mentee-head { background: rgba(239, 68, 68, .05) !important; }

.position-cover {
	background: #F0F0F3 !important;
	background-image: none !important;
}

.position-cover .cover-ico { color: var(--g-neutral) !important; }
.position-title { color: var(--g-text); font-size: 15px; }
.position-meta, .position-desc { color: var(--g-text-2); font-size: 13px; }

.position-scope {
	background: var(--g-primary-tint) !important;
	color: var(--g-primary-hover) !important;
	border-radius: 4px;
	font-size: 12px;
}

/* ==================== Misc ==================== */

.progress { background: #F0F0F3; border-radius: 9999px; }
.progress-bar { background: var(--g-primary) !important; background-image: none !important; }

hr { border-color: var(--g-border); opacity: 1; }

.footer {
	background: transparent;
	border-top: 1px solid var(--g-border);
	color: var(--g-text-2);
	font-size: 13px;
}

/* ระยะห่างระดับหน้า — ตามสเกล 4px ของ Genesis */
.page-wrapper > .container-fluid { padding-left: 24px; padding-right: 24px; }

::selection { background: var(--g-primary-tint); color: var(--g-text); }

/* ==================== Dark Mode Skin ==================== */
body.dark-mode {
	--g-bg: #0F172A;
	--g-surface: #1E293B;
	--g-text: #F8FAFC;
	--g-text-2: #94A3B8;
	--g-border: #334155;

	--cwie-bg: #0F172A;
	--cwie-surface: #1E293B;
	--cwie-border: #334155;
	--cwie-text: #F8FAFC;
	--cwie-muted: #94A3B8;

	background-color: #0F172A !important;
	color: #F8FAFC !important;
}

body.dark-mode .page-wrapper {
	background-color: #0F172A !important;
}

body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .white-box,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
	background-color: #1E293B !important;
	color: #F8FAFC !important;
	border-color: #334155 !important;
}

body.dark-mode .dropdown-item {
	color: #F8FAFC !important;
}

body.dark-mode .dropdown-item:hover {
	background-color: #334155 !important;
	color: #818CF8 !important;
}

body.dark-mode .side-mini-panel,
body.dark-mode .sidebarmenu,
body.dark-mode .left-sidebar {
	background: #1E293B !important;
	border-right-color: #334155 !important;
}

body.dark-mode .menu-title {
	color: #94A3B8 !important;
	-webkit-text-fill-color: #94A3B8 !important;
	border-bottom-color: #334155 !important;
}

body.dark-mode .sidebarmenu .sidebar-menu > li > a,
body.dark-mode .sidebarmenu .sub-menu li a {
	color: #CBD5E1 !important;
}

body.dark-mode .sidebarmenu .sidebar-menu > li > a:hover,
body.dark-mode .sidebarmenu .sub-menu li a:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #818CF8 !important;
}

body.dark-mode .sidebarmenu .sidebar-menu a.active,
body.dark-mode .sidebarmenu .sidebar-menu > li > a.active {
	background: rgba(129, 140, 248, 0.18) !important;
	color: #818CF8 !important;
}

body.dark-mode .table {
	color: #F8FAFC !important;
}

body.dark-mode .table td,
body.dark-mode .table th {
	border-color: #334155 !important;
	color: #F8FAFC !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.025) !important;
}

body.dark-mode .form-control,
body.dark-mode select.form-select,
body.dark-mode input.form-control,
body.dark-mode textarea.form-control {
	background-color: #0F172A !important;
	color: #F8FAFC !important;
	border-color: #334155 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
	color: #F8FAFC !important;
}

body.dark-mode .text-muted,
body.dark-mode .text-secondary {
	color: #94A3B8 !important;
}

body.dark-mode .footer {
	border-top-color: #334155 !important;
	color: #94A3B8 !important;
}