/**
 * Dots to Dream — primary palette (identity)
 * Red #DA291C (Pantone 485 C, CMYK 0/95/100/0) · White #FFFFFF · Black #222221
 * Dark red #A51414 (gradients) · Biscuit 25% #F3F2EE · Dark grey #4A4F53 · Light grey #999999
 * โหลดหลัง Tailwind CDN เพื่อแทนที่สีฟ้า (sky/blue) ทั้งระบบ
 */
:root {
  --palette-red: #da291c;
  --palette-red-dark: #a51414;
  --palette-white: #ffffff;
  --palette-black: #222221;
  --palette-biscuit-25: #f3f2ee;
  --palette-grey-dark: #4a4f53;
  --palette-grey-light: #999999;

  --brand: var(--palette-red);
  --brand-hover: rgb(176, 31, 24);
  --brand-text: rgb(185, 35, 22);
  --brand-text-dark: rgb(139, 24, 18);
  --brand-50: #fef2f2;
  --brand-100: #fee2e2;
  --brand-200: #fecaca;
  --brand-300: #fca5a5;
  --brand-400: #f87171;
}

/* 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(218 41 28 / var(--tw-ring-opacity, 1)) !important;
}
.focus-within\:ring-brandPrimary:focus-within {
  --tw-ring-color: rgb(218 41 28 / var(--tw-ring-opacity, 1)) !important;
}
.focus\:ring-brandPrimary:focus {
  --tw-ring-color: rgb(218 41 28 / 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(254 242 242 / 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(218 41 28 / 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: rgb(107 20 15) !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: rgb(107 20 15) !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(254 226 226 / 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(218 41 28 / var(--tw-ring-opacity, 1)) !important;
}
.focus\:ring-sky-500\/20:focus {
  --tw-ring-color: rgb(218 41 28 / 0.2) !important;
}
.focus-visible\:ring-sky-500:focus-visible {
  --tw-ring-color: rgb(218 41 28 / var(--tw-ring-opacity, 1)) !important;
}

.text-sky-500.focus\:ring-sky-500:focus,
input.focus\:ring-sky-500:focus {
  --tw-ring-color: rgb(218 41 28 / 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(218 41 28 / 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 → brand reds (spinner, manual, kimi, etc.) ----- */
.bg-blue-50 {
  background-color: var(--brand-50) !important;
}
.bg-blue-100 {
  background-color: var(--brand-100) !important;
}
.bg-blue-200 {
  background-color: var(--brand-200) !important;
}
.bg-blue-500 {
  background-color: var(--brand) !important;
}
.bg-blue-600 {
  background-color: var(--brand-hover) !important;
}
.bg-blue-700 {
  background-color: rgb(139 24 18) !important;
}
.bg-blue-800 {
  background-color: rgb(120 22 16) !important;
}
.bg-blue-900 {
  background-color: rgb(90 18 14) !important;
}

.text-blue-100 {
  color: #fecaca !important;
}
.text-blue-200 {
  color: #fca5a5 !important;
}
.text-blue-300 {
  color: #f87171 !important;
}
.text-blue-400 {
  color: #ef4444 !important;
}
.text-blue-500 {
  color: var(--brand) !important;
}
.text-blue-600 {
  color: var(--brand-text) !important;
}
.text-blue-700 {
  color: var(--brand-text-dark) !important;
}
.text-blue-800 {
  color: rgb(107 20 15) !important;
}
.text-blue-900 {
  color: rgb(69 15 12) !important;
}

.border-blue-200 {
  border-color: var(--brand-200) !important;
}
.border-blue-400 {
  border-color: var(--brand-400) !important;
}
.border-blue-500 {
  border-color: var(--brand) !important;
}
.border-blue-800 {
  border-color: rgb(120 22 16) !important;
}

.hover\:text-blue-400:hover {
  color: #ef4444 !important;
}
.hover\:text-blue-600:hover {
  color: var(--brand-text) !important;
}
.hover\:border-blue-500:hover {
  border-color: var(--brand) !important;
}
.hover\:bg-blue-50:hover {
  background-color: var(--brand-50) !important;
}
.hover\:bg-blue-700:hover {
  background-color: rgb(139 24 18) !important;
}

.focus\:border-blue-500:focus {
  border-color: var(--brand) !important;
}
.focus\:ring-blue-200:focus {
  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity, 1)) !important;
}

.from-blue-400 {
  --tw-gradient-from: #f87171 var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-blue-500 {
  --tw-gradient-from: var(--brand) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-blue-600 {
  --tw-gradient-from: var(--brand-hover) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-blue-900 {
  --tw-gradient-from: rgb(90 18 14) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-600 {
  --tw-gradient-to: var(--brand-hover) var(--tw-gradient-to-position) !important;
}

.bg-gradient-to-r.from-blue-500.to-blue-600 {
  background-image: linear-gradient(to right, var(--brand), var(--brand-hover)) !important;
}
.bg-gradient-to-r.from-blue-600.to-indigo-700 {
  background-image: linear-gradient(to right, var(--brand-hover), #4338ca) !important;
}

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

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

/* 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(218, 41, 28, 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;
  }
}