:root {
  --theme-indigo: #4f46e5;
  --theme-violet: #7c3aed;
  --theme-pink: #ec4899;
  --theme-cyan: #06b6d4;
  --theme-ink: #312e81;
  --theme-muted: #64748b;
  --theme-border: #dbeafe;
  --theme-shadow: 0 10px 30px rgba(79, 70, 229, 0.12);
}

html {
  color-scheme: light;
}

body {
  color: #27324a;
  background: #fff;
}

h1,
h2,
h3,
.section-title,
.menu-label,
.sub-label,
.checklist-title,
.month-label,
.task-panel h2,
.modal-header h3 {
  color: var(--theme-ink);
}

h1 {
  text-shadow: 0 2px 12px rgba(124, 58, 237, 0.12);
}

.back-link,
.forgot-password a {
  color: var(--theme-indigo) !important;
  font-weight: 700;
}

.welcome-bar {
  background: linear-gradient(120deg, #06b6d4 0%, #6366f1 45%, #ec4899 100%);
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.28);
}

.welcome-bar h2,
.welcome-bar p {
  color: #fff;
}

.login-card,
.register-card,
.forgot-card,
.welcome-card,
.form-section,
.checklist-section,
.news-card,
.task-card,
.menu-item,
.sub-menu-item,
.report-card,
.summary-card,
.chart-card,
.contact-card,
.month-nav,
.calendar,
.task-panel,
.modal-box,
.emp-card,
.edit-card {
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

.login-card,
.register-card,
.forgot-card,
.welcome-card {
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 22px 60px rgba(49, 46, 129, 0.22);
}

.task-card,
.menu-item,
.sub-menu-item,
.news-card {
  position: relative;
  overflow: hidden;
}

.task-card::before,
.menu-item::before,
.sub-menu-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--theme-cyan), var(--theme-indigo), var(--theme-pink));
}

.task-card:nth-child(4n + 1),
.menu-item:nth-child(4n + 1),
.sub-menu-item:nth-child(4n + 1) {
  background: linear-gradient(145deg, #ffffff, #ecfeff);
}

.task-card:nth-child(4n + 2),
.menu-item:nth-child(4n + 2),
.sub-menu-item:nth-child(4n + 2) {
  background: linear-gradient(145deg, #ffffff, #f5f3ff);
}

.task-card:nth-child(4n + 3),
.menu-item:nth-child(4n + 3),
.sub-menu-item:nth-child(4n + 3) {
  background: linear-gradient(145deg, #ffffff, #fdf2f8);
}

.task-card:nth-child(4n),
.menu-item:nth-child(4n),
.sub-menu-item:nth-child(4n) {
  background: linear-gradient(145deg, #ffffff, #fffbeb);
}

.task-card:hover,
.menu-item:hover,
.sub-menu-item:hover,
.news-card.clickable:hover {
  transform: translateY(-4px);
  border-color: #a5b4fc;
  box-shadow: 0 16px 34px rgba(99, 102, 241, 0.2);
}

.task-icon,
.menu-icon,
.sub-icon,
.login-header .icon {
  filter: drop-shadow(0 5px 8px rgba(99, 102, 241, 0.2));
}

.tab-btn.active,
.menu-btn,
.btn-save,
.btn-login,
.btn-register,
.btn-submit,
.btn-add-task,
button[type="submit"] {
  color: #fff;
  background: linear-gradient(110deg, var(--theme-cyan), var(--theme-indigo) 48%, var(--theme-violet)) !important;
  border: 0;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
}

.menu-btn:hover,
.btn-save:hover,
.btn-login:hover,
.btn-register:hover,
.btn-submit:hover,
.btn-add-task:hover,
button[type="submit"]:hover {
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-1px);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background-color: rgba(255, 255, 255, 0.92);
  border-color: #c7d2fe;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--theme-indigo);
}

.checklist-section,
.area-check-grid,
.task-item,
.form-pick {
  background-color: #f8faff;
  border-color: #dbeafe;
}

.news-card {
  border-left-color: var(--theme-cyan);
}

.news-card:nth-child(even) {
  border-left-color: var(--theme-pink);
}

.tab-btn:not(.active),
.month-nav button {
  background: #eef2ff;
  color: var(--theme-ink);
}

.tab-btn:not(.active):hover,
.month-nav button:hover {
  background: #ddd6fe;
}

option.saved-choice-option {
  color: #166534;
  background: #dcfce7;
  font-weight: 700;
}

select.saved-choice-selected {
  color: #166534;
  background-color: #dcfce7;
  border-color: #22c55e;
  font-weight: 700;
}

.saved-choice-item {
  color: #166534 !important;
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  font-weight: 700 !important;
}

.saved-choice-item:not(div)::after {
  content: " ✓ บันทึกแล้ว";
  margin-left: 5px;
  color: #15803d;
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body {
    background: #fff !important;
  }

  .paper,
  .title-bar,
  .company-header {
    box-shadow: none !important;
    filter: none !important;
  }
}