/**
 * Vulcan Academy — primary palette (identity, โหมดปกติเท่านั้น)
 * Purple #7C3AED · White #FFFFFF · Black #222221
 * Dark purple #5B21B6 · Biscuit 25% #F3F2EE · Dark grey #4A4F53 · Light grey #999999
 * โหลดหลัง Tailwind CDN — sky/* และ brandPrimary = ม่วงแบรนด์
 * blue/emerald/amber/red ของปุ่ม action ใช้สี Tailwind ตามเดิม (ไม่ remap)
 * โหมด High contrast ใช้ a11y-toolbar.css แยกต่างหาก
 */
:root {
  --palette-purple: #7c3aed;
  --palette-purple-dark: #5b21b6;
  --palette-white: #ffffff;
  --palette-black: #222221;
  --palette-biscuit-25: #f3f2ee;
  --palette-grey-dark: #4a4f53;
  --palette-grey-light: #999999;

  --brand: var(--palette-purple);
  --brand-hover: #6d28d9;
  --brand-text: #6d28d9;
  --brand-text-dark: #5b21b6;
  --brand-50: #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-300: #c4b5fd;
  --brand-400: #a78bfa;
}

/* Shared helpers (ชนะ inline .focus-ring / toggle ใน HTML) */
.focus-ring:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px;
}

/* WCAG 2.4.1 — ลิงก์ข้ามไปยังเนื้อหาหลัก (มองเห็นเมื่อโฟกัสด้วยแป้น Tab) */
.dots-skip-link {
  position: fixed;
  left: 0.75rem;
  top: -5rem;
  z-index: 100001;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.35;
  color: #fff;
  background: #0284c7;
  border-radius: 0.5rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: top 0.15s ease-out;
}
.dots-skip-link:focus,
.dots-skip-link:focus-visible {
  top: 0.75rem;
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

/* SweetAlert2 — โฟกัสมองเห็นชัด (WCAG 2.4.7) */
.swal2-container .swal2-confirm:focus-visible,
.swal2-container .swal2-cancel:focus-visible,
.swal2-container .swal2-deny:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
}

.toggle-wrap input:checked + .toggle-track {
  background-color: var(--brand) !important;
}

/* ----- Tailwind extend: brandPrimary ----- */
.bg-brandPrimary {
  background-color: var(--brand) !important;
}
.text-brandPrimary {
  color: var(--brand) !important;
}
.ring-brandPrimary {
  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity, 1)) !important;
}
.focus-within\:ring-brandPrimary:focus-within {
  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity, 1)) !important;
}
.focus\:ring-brandPrimary:focus {
  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity, 1)) !important;
}
.selection\:bg-brandPrimary::selection {
  background-color: var(--brand) !important;
}

/* ----- Sky: backgrounds ----- */
.bg-sky-50 {
  background-color: var(--brand-50) !important;
}
.bg-sky-100 {
  background-color: var(--brand-100) !important;
}
.bg-sky-500 {
  background-color: var(--brand) !important;
}
.bg-sky-600 {
  background-color: var(--brand-hover) !important;
}

.hover\:bg-sky-50:hover {
  background-color: var(--brand-50) !important;
}
.hover\:bg-sky-100:hover {
  background-color: var(--brand-100) !important;
}
.hover\:bg-sky-600:hover {
  background-color: var(--brand-hover) !important;
}
.hover\:bg-sky-50\/50:hover {
  background-color: rgb(245 243 255 / 0.5) !important;
}

.group:hover .group-hover\:bg-brandPrimary {
  background-color: var(--brand) !important;
}
.group:hover .group-hover\:bg-sky-500 {
  background-color: var(--brand) !important;
}
.group:hover .group-hover\:bg-sky-600 {
  background-color: var(--brand-hover) !important;
}

.peer:checked ~ .peer-checked\:bg-sky-500 {
  background-color: var(--brand) !important;
}

.ring-sky-500 {
  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity, 1)) !important;
}

.file\:bg-sky-50::file-selector-button {
  background-color: var(--brand-50) !important;
}
.hover\:file\:bg-sky-100:hover::file-selector-button {
  background-color: var(--brand-100) !important;
}

.focus\:bg-sky-500:focus {
  background-color: var(--brand) !important;
}

/* ----- Sky: text ----- */
.text-sky-500 {
  color: var(--brand) !important;
}
.text-sky-600 {
  color: var(--brand-text) !important;
}
.text-sky-700 {
  color: var(--brand-text-dark) !important;
}
.text-sky-800 {
  color: #4c1d95 !important;
}

.hover\:text-sky-600:hover {
  color: var(--brand-text) !important;
}
.hover\:text-sky-700:hover {
  color: var(--brand-text-dark) !important;
}
.hover\:text-sky-800:hover {
  color: #4c1d95 !important;
}

.file\:text-sky-700::file-selector-button {
  color: var(--brand-text-dark) !important;
}

.group:hover .group-hover\:text-sky-600 {
  color: var(--brand-text) !important;
}

/* ----- Sky: borders ----- */
.border-sky-100 {
  border-color: var(--brand-100) !important;
}
.border-sky-100\/80 {
  border-color: rgb(237 233 254 / 0.8) !important;
}
.border-sky-200 {
  border-color: var(--brand-200) !important;
}
.border-sky-300 {
  border-color: var(--brand-300) !important;
}
.border-sky-400 {
  border-color: var(--brand-400) !important;
}
.border-sky-500 {
  border-color: var(--brand) !important;
}

.hover\:border-sky-300:hover {
  border-color: var(--brand-300) !important;
}
.hover\:border-sky-400:hover {
  border-color: var(--brand-400) !important;
}

.focus\:border-sky-500:focus {
  border-color: var(--brand) !important;
}

/* ----- Sky: rings / focus ----- */
.focus\:ring-sky-500:focus {
  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity, 1)) !important;
}
.focus\:ring-sky-500\/20:focus {
  --tw-ring-color: rgb(124 58 237 / 0.2) !important;
}
.focus-visible\:ring-sky-500:focus-visible {
  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity, 1)) !important;
}

.text-sky-500.focus\:ring-sky-500:focus,
input.focus\:ring-sky-500:focus {
  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity, 1)) !important;
}

.focus\:ring-offset-sky-500:focus {
  --tw-ring-offset-color: var(--brand) !important;
}

.peer:focus-visible ~ .peer-focus-visible\:ring-sky-500 {
  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity, 1)) !important;
}

.focus\:ring-sky-500.focus\:ring-offset-2:focus {
  --tw-ring-offset-color: #fff !important;
}

/* ----- Sky: divide ----- */
.divide-sky-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--brand-100) !important;
}

/* ----- Gradients (dashboard / grading / index) ----- */
.from-sky-50 {
  --tw-gradient-from: var(--brand-50) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-blue-50 {
  --tw-gradient-to: var(--brand-50) var(--tw-gradient-to-position) !important;
}

.bg-gradient-to-br.from-sky-50.to-blue-50 {
  background-image: linear-gradient(to bottom right, var(--brand-50), var(--brand-50)) !important;
}

/* ----- Blue scale: ไม่ remap — ปุ่ม/สถานะ action สีน้ำเงิน Tailwind ตามเดิม ----- */

/* Checkbox / radio accent */
.text-sky-600,
.rounded.border-slate-300.text-sky-600 {
  color: var(--brand-text) !important;
}

.hover\:bg-brandPrimary:hover {
  background-color: var(--brand) !important;
}

/* login.html */
.logo-ring {
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.3) !important;
}
.google-btn:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px;
}

/* ----- App font: Sarabun (ไทย) ----- */
html,
body {
  font-family: 'Sarabun', ui-sans-serif, system-ui, sans-serif;
}
.font-sans {
  font-family: 'Sarabun', ui-sans-serif, system-ui, sans-serif !important;
}
.ql-editor,
.ql-toolbar {
  font-family: 'Sarabun', ui-sans-serif, system-ui, sans-serif;
}

/* Respect prefers-reduced-motion across pages */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}