/* ==========================================================================
   CWIE design tokens — แหล่งเดียวของสี/ฟอนต์/รัศมี/เงา ของทั้ง 4 ส่วน
   (website · webmodule · training · crud/admin)
   โหลดก่อน cwie-site.css และ genesis.css เสมอ แก้ที่นี่ที่เดียวเปลี่ยนทั้งระบบ
   ฟ้าสว่างเป็นสีหลักและเป็น "สิ่งที่กดได้"; เหลืองอำพันเป็นจุดเน้นเล็ก ๆ เท่านั้น
   ========================================================================== */
:root {
	/* brand — ไล่ระดับเฉดฟ้า → เขียว: ฟ้าสว่าง · ฟ้าอมเขียว · มิ้นต์ */
	--cwie-blue: #1d6fe0;
	--cwie-blue-deep: #1553b0;
	--cwie-blue-darkest: #0e2a5c;
	--cwie-blue-bright: #4c9aff;
	--cwie-blue-tint: rgba(29, 111, 224, .10);
	--cwie-gold: #34d399; /* จุดเน้น = มิ้นต์ (ชื่อ token คงเดิมเพื่อไม่ต้องไล่แก้ทุกกฎ) */
	--cwie-gold-deep: #0a7f78;
	--cwie-gold-ink: #04352f;
	--cwie-aqua: #0ea5e9;
	--cwie-green: #0a7f78;
	--cwie-green-deep: #086560;

	/* gradients — -deep ใช้เป็นพื้นรองรับตัวอักษรขาว (คอนทราสต์ผ่านทุกสต็อป) */
	--cwie-grad: linear-gradient(135deg, #1d6fe0 0%, #0ea5e9 38%, #14b8a6 70%, #22c55e 100%);
	--cwie-grad-deep: linear-gradient(135deg, #0e3a8a 0%, #0b5fc4 36%, #0a8a8a 70%, #0f8a4f 100%);
	--cwie-grad-soft: linear-gradient(135deg, rgba(29,111,224,.10), rgba(34,197,94,.10));

	/* neutral */
	--cwie-ink: #0f1b33;
	--cwie-text: #44506a;
	--cwie-muted: #66748b;
	--cwie-line: #e3e9f2;
	--cwie-bg-soft: #f3f7fd;
	--cwie-surface: #fff;

	/* status */
	--cwie-success: #12805c;
	--cwie-warning: #b7791f;
	--cwie-danger: #c0392b;

	/* shape */
	--cwie-radius: 16px;
	--cwie-radius-sm: 10px;
	--cwie-shadow: 0 1px 2px rgba(15, 27, 51, .06);
	--cwie-shadow-hover: 0 8px 30px rgba(29, 111, 224, .14);
	--cwie-shadow-lg: 0 12px 32px rgba(29, 111, 224, .14);
	--cwie-ring: 0 0 0 3px rgba(29, 111, 224, .25);

	/* type — Kanit ครอบคลุมไทย+ละติน ใช้ตัวเดียวทั้งระบบ */
	--cwie-font: 'Kanit', 'Leelawadee UI', 'Segoe UI', sans-serif;
	--cwie-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* ==========================================================================
   Shared polish — พฤติกรรมพื้นฐานที่ทุกส่วนต้องเหมือนกัน
   ========================================================================== */

/* โฟกัสคีย์บอร์ดต้องเห็นชัดทุกจุดที่กดได้ (เมาส์คลิกไม่โชว์วง) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--cwie-blue);
	outline-offset: 2px;
	box-shadow: var(--cwie-ring);
}

::selection { background: var(--cwie-blue-tint); }

/* ตารางกว้างเกินการ์ดต้องเลื่อนแนวนอนในตัวเอง ไม่ทะลุกรอบ */
.dataTables_wrapper,
.table-responsive { max-width: 100%; overflow-x: auto; }

/* เป้าสัมผัสบนมือถือ: ปุ่ม/ลิงก์แบบปุ่มสูงอย่างน้อย 40px */
@media (max-width: 767.98px) {
	.btn:not(.btn-sm):not(.btn-xs) { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   Shared 3D — ใช้ร่วมทุกส่วน (คู่กับ assets/js/cwie-tilt.js)
   ========================================================================== */

/* การ์ดเอียง: ปกติแบนเหมือนเดิม จะเอียงเฉพาะตอนเมาส์อยู่บน (.is-tilting)
   ใช้ !important ตอนเอียงเพราะการ์ดหลายแบบมี :hover transform ของตัวเองที่จะทับการเอียง */
.cwie-tilt { will-change: transform; }
.cwie-tilt.is-tilting {
	transform: perspective(1200px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important;
	transition: transform .08s linear, box-shadow .3s ease !important;
	box-shadow: calc(var(--ry, 0deg) * -2) calc(var(--rx, 0deg) * 2 + 18px) 40px rgba(29, 111, 224, .2) !important;
	z-index: 2;
}
.cwie-glare {
	position: absolute; inset: 0;
	border-radius: inherit;
	background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .34), transparent 55%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 5;
}
.cwie-tilt.is-tilting > .cwie-glare { opacity: 1; }

/* ปุ่มหลักแบบนูน กดแล้วยุบ */
.btn-primary:not(.btn-sm):not(.btn-xs):not(.dropdown-toggle-split),
.btn-success:not(.btn-sm):not(.btn-xs),
.btn-info:not(.btn-sm):not(.btn-xs),
.cwie-btn:not(.cwie-btn-ghost):not(.cwie-btn-disabled):not(.cwie-btn-block) {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 rgba(10, 60, 110, .45), 0 8px 16px rgba(14, 165, 233, .22) !important;
	transition: transform .12s ease, box-shadow .12s ease, filter .2s ease !important;
}
.btn-primary:not(.btn-sm):not(.btn-xs):active,
.btn-success:not(.btn-sm):not(.btn-xs):active,
.btn-info:not(.btn-sm):not(.btn-xs):active,
.cwie-btn:not(.cwie-btn-ghost):not(.cwie-btn-disabled):not(.cwie-btn-block):active {
	transform: translateY(2px) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 rgba(10, 60, 110, .45), 0 3px 8px rgba(14, 165, 233, .2) !important;
}

/* ไอคอนในกล่องแบบก้อน 3D (ไฮไลต์บน เงาคมล่าง) */
.dsh-panel-icon,
.cwie-hub-card-header i,
.cwie-info-card > i:first-child {
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 6px 12px rgba(29, 111, 224, .22);
}

/* ทรงกลมแก้วลอย — ใส่ <span class="cwie-orb cwie-orb-blue|green"> ในกล่อง position:relative */
.cwie-orb, .cwie-hero > .cwie-orb {
	position: absolute !important;
	z-index: 0 !important;
	display: block;
	border-radius: 50%;
	pointer-events: none;
	box-shadow: inset -8px -12px 20px rgba(0, 0, 0, .26), 0 20px 32px rgba(4, 30, 70, .28);
	animation: cwieOrbFloat 7s ease-in-out infinite;
}
.cwie-orb-blue { background: radial-gradient(circle at 32% 28%, #e0f7ff 0%, #4cc3ff 32%, #1d6fe0 70%, #0e3a8a 100%); }
.cwie-orb-green { background: radial-gradient(circle at 32% 28%, #d6fff0 0%, #34d399 30%, #0a8a6a 68%, #065f46 100%); animation-delay: -3s; }
@keyframes cwieOrbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (max-width: 991.98px) { .cwie-orb { display: none; } }

/* แดชบอร์ดแอดมิน: ทรงกลมแก้วใน hero (ไม่ต้องแก้ markup ของแดชบอร์ดทุกบทบาท) */
.dsh-hero::before,
.dsh-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	box-shadow: inset -8px -12px 20px rgba(0, 0, 0, .26), 0 18px 28px rgba(4, 30, 70, .3);
	animation: cwieOrbFloat 7s ease-in-out infinite;
}
.dsh-hero::before { width: 96px; height: 96px; top: -18px; right: 30%; background: radial-gradient(circle at 32% 28%, #d6fff0 0%, #34d399 30%, #0a8a6a 68%, #065f46 100%); }
.dsh-hero::after { width: 54px; height: 54px; bottom: 16px; right: 26%; background: radial-gradient(circle at 32% 28%, #e0f7ff 0%, #4cc3ff 32%, #1d6fe0 70%, #0e3a8a 100%); animation-delay: -3s; }
.dsh-hero-content { z-index: 1; }
@media (max-width: 991.98px) { .dsh-hero::before, .dsh-hero::after { display: none; } }