/* =============================================================
   themes.css - ชุด Theme ทั้ง 4 แบบ
   Happinometer Survey System - โรงพยาบาลเชียงกลาง
   ============================================================= */

/* ============================================================
   THEME 1: ทางการ (Official) - Green Government
   ============================================================ */
[data-theme="official"] {
  --primary:         #1b5e20;
  --primary-mid:     #2e7d32;
  --primary-light:   #43a047;
  --primary-pale:    #e8f5e9;
  --primary-ultra:   #f1f8f1;

  --accent:          #00695c;
  --accent-light:    #e0f2f1;

  --text-dark:       #1a2e1a;
  --text-body:       #2d3a2d;
  --text-muted:      #607060;
  --text-white:      #ffffff;

  --border:          #c8dac8;
  --border-light:    #e2ede2;

  --bg-page:         #f5f7f5;
  --bg-card:         #ffffff;
  --bg-header:       #1b5e20;
  --bg-hero-from:    #1b5e20;
  --bg-hero-to:      #388e3c;

  --progress-from:   #43a047;
  --progress-to:     #00695c;

  --shadow-sm:       0 1px 3px rgba(0,0,0,.08);
  --shadow-md:       0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:       0 8px 24px rgba(0,0,0,.12);
  --card-border:     1px solid #e2ede2;

  --q-num-bg:        #2e7d32;
  --q-num-color:     #ffffff;
  --badge-bg:        #2e7d32;
  --badge-color:     #ffffff;
  --rating-hover-bg: #f1f8f1;
  --selected-bg:     #e8f5e9;
  --selected-border: #2e7d32;
}

/* ============================================================
   THEME 2: สดใส (Vibrant) - Orange & Teal Fresh
   ============================================================ */
[data-theme="vibrant"] {
  --primary:         #bf360c;
  --primary-mid:     #e64a19;
  --primary-light:   #ff7043;
  --primary-pale:    #fbe9e7;
  --primary-ultra:   #fff3e0;

  --accent:          #00838f;
  --accent-light:    #e0f7fa;

  --text-dark:       #1a0a00;
  --text-body:       #3e2012;
  --text-muted:      #78532f;
  --text-white:      #ffffff;

  --border:          #ffccbc;
  --border-light:    #ffe0cc;

  --bg-page:         #fffaf7;
  --bg-card:         #ffffff;
  --bg-header:       #d84315;
  --bg-hero-from:    #bf360c;
  --bg-hero-to:      #00838f;

  --progress-from:   #ff7043;
  --progress-to:     #00838f;

  --shadow-sm:       0 1px 3px rgba(230,74,25,.10);
  --shadow-md:       0 4px 12px rgba(230,74,25,.14);
  --shadow-lg:       0 8px 24px rgba(230,74,25,.16);
  --card-border:     1px solid #ffe0cc;

  --q-num-bg:        #e64a19;
  --q-num-color:     #ffffff;
  --badge-bg:        #e64a19;
  --badge-color:     #ffffff;
  --rating-hover-bg: #fff3e0;
  --selected-bg:     #fbe9e7;
  --selected-border: #e64a19;
}

/* ============================================================
   THEME 3: มืด (Dark) - Dark Mode
   ============================================================ */
[data-theme="dark"] {
  --primary:         #81c784;
  --primary-mid:     #66bb6a;
  --primary-light:   #a5d6a7;
  --primary-pale:    #1e3320;
  --primary-ultra:   #182c1a;

  --accent:          #4db6ac;
  --accent-light:    #1c3432;

  --text-dark:       #e8f5e9;
  --text-body:       #c8e6c9;
  --text-muted:      #81a882;
  --text-white:      #ffffff;

  --border:          #2e4a2e;
  --border-light:    #253d25;

  --bg-page:         #121a12;
  --bg-card:         #1a2a1a;
  --bg-header:       #0d1a0d;
  --bg-hero-from:    #0d1a0d;
  --bg-hero-to:      #1b3320;

  --progress-from:   #66bb6a;
  --progress-to:     #4db6ac;

  --shadow-sm:       0 1px 3px rgba(0,0,0,.35);
  --shadow-md:       0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:       0 8px 24px rgba(0,0,0,.55);
  --card-border:     1px solid #2e4a2e;

  --q-num-bg:        #66bb6a;
  --q-num-color:     #0d1a0d;
  --badge-bg:        #66bb6a;
  --badge-color:     #0d1a0d;
  --rating-hover-bg: #182c1a;
  --selected-bg:     #1e3320;
  --selected-border: #66bb6a;
}

/* ============================================================
   THEME 4: สว่าง (Light) - Clean Sky Blue
   ============================================================ */
[data-theme="light"] {
  --primary:         #0d47a1;
  --primary-mid:     #1565c0;
  --primary-light:   #1976d2;
  --primary-pale:    #e3f2fd;
  --primary-ultra:   #f0f8ff;

  --accent:          #6a1b9a;
  --accent-light:    #f3e5f5;

  --text-dark:       #0a1628;
  --text-body:       #1a2540;
  --text-muted:      #546e7a;
  --text-white:      #ffffff;

  --border:          #bbdefb;
  --border-light:    #deeeff;

  --bg-page:         #f0f7ff;
  --bg-card:         #ffffff;
  --bg-header:       #0d47a1;
  --bg-hero-from:    #0d47a1;
  --bg-hero-to:      #6a1b9a;

  --progress-from:   #1976d2;
  --progress-to:     #6a1b9a;

  --shadow-sm:       0 1px 3px rgba(13,71,161,.08);
  --shadow-md:       0 4px 12px rgba(13,71,161,.12);
  --shadow-lg:       0 8px 24px rgba(13,71,161,.16);
  --card-border:     1px solid #deeeff;

  --q-num-bg:        #1565c0;
  --q-num-color:     #ffffff;
  --badge-bg:        #1565c0;
  --badge-color:     #ffffff;
  --rating-hover-bg: #f0f8ff;
  --selected-bg:     #e3f2fd;
  --selected-border: #1565c0;
}

/* ============================================================
   Apply theme variables to elements
   (overrides :root in style.css using theme attributes)
   ============================================================ */

/* --- Body / Page --- */
[data-theme] body {
  background: var(--bg-page);
  color: var(--text-body);
  transition: background .3s ease, color .3s ease;
}

/* --- Site Header --- */
[data-theme] .site-header {
  background: var(--bg-header);
}

/* --- Hero Banner --- */
[data-theme] .survey-hero {
  background: linear-gradient(135deg, var(--bg-hero-from) 0%, var(--primary-mid) 50%, var(--bg-hero-to) 100%);
}

/* --- Cards --- */
[data-theme] .card {
  background: var(--bg-card);
  border: var(--card-border);
  box-shadow: var(--shadow-sm);
}

[data-theme] .card-header {
  background: var(--primary-pale);
  border-bottom-color: var(--primary-light);
}

[data-theme] .card-header h3 {
  color: var(--primary);
}

[data-theme] .card-header .cat-icon {
  background: var(--primary-mid);
}

/* --- Progress Bar --- */
[data-theme] .survey-progress {
  background: var(--bg-card);
  border-bottom-color: var(--border-light);
}

[data-theme] .progress-bar-fill {
  background: linear-gradient(90deg, var(--progress-from), var(--progress-to));
}

[data-theme] .progress-bar-wrap {
  background: var(--border-light);
}

/* --- Questions --- */
[data-theme] .question-num {
  background: var(--q-num-bg);
  color: var(--q-num-color);
}

[data-theme] .question-text {
  color: var(--text-dark);
}

[data-theme] .rating-option {
  border-color: var(--border-light);
}

[data-theme] .rating-option:hover {
  border-color: var(--primary-light);
  background: var(--rating-hover-bg);
}

[data-theme] .rating-option.selected {
  border-color: var(--selected-border);
  background: var(--selected-bg);
}

[data-theme] .rating-option input[type="radio"]:checked {
  border-color: var(--primary-mid);
}

[data-theme] .rating-option input[type="radio"]::after {
  background: var(--primary-mid);
}

[data-theme] .rating-option.selected .rating-badge {
  background: var(--badge-bg);
  color: var(--badge-color);
}

[data-theme] .rating-badge {
  background: var(--border-light);
  color: var(--text-muted);
}

/* --- Happiness Buttons --- */
[data-theme] .happiness-btn {
  border-color: var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
}

[data-theme] .happiness-btn:hover {
  border-color: var(--primary-light);
  background: var(--rating-hover-bg);
}

[data-theme] .happiness-btn.active {
  background: var(--primary-mid);
  border-color: var(--primary-mid);
  color: var(--q-num-color);
}

[data-theme] .happiness-value-display {
  color: var(--primary);
}

/* --- Form Controls --- */
[data-theme] .form-control {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-body);
}

[data-theme] .form-control:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-light) 20%, transparent);
}

/* --- Buttons --- */
[data-theme] .btn-primary {
  background: var(--primary-mid);
  border-color: var(--primary-mid);
  color: var(--q-num-color);
}

[data-theme] .btn-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--q-num-color);
}

[data-theme] .btn-outline {
  color: var(--primary-mid);
  border-color: var(--primary-mid);
}

[data-theme] .btn-outline:hover {
  background: var(--primary-pale);
}

/* --- Nav Pills (Sidebar) --- */
[data-theme] .nav-pills {
  background: var(--bg-card);
  border-color: var(--border-light);
}

[data-theme] .nav-pill-item {
  color: var(--text-muted);
  border-bottom-color: var(--border-light);
}

[data-theme] .nav-pill-item:hover {
  background: var(--primary-ultra);
  color: var(--primary);
}

[data-theme] .nav-pill-item.active {
  background: var(--primary-pale);
  color: var(--primary);
}

[data-theme] .nav-pill-item.active .nav-pill-dot {
  background: var(--primary-mid);
}

/* --- Info Box --- */
[data-theme] .info-box {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent-light);
}

/* --- Alerts --- */
[data-theme] .alert-error   { background: #ffebee; border-color: #c62828; color: #b71c1c; }
[data-theme] .alert-success { background: var(--primary-pale); border-color: var(--primary-mid); color: var(--primary); }
[data-theme] .alert-info    { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }

/* --- Dark mode specific overrides --- */
[data-theme="dark"] .alert-error {
  background: #2d0a0a;
  border-color: #ef5350;
  color: #ef9a9a;
}
[data-theme="dark"] .alert-info {
  background: var(--accent-light);
  border-color: #4db6ac;
  color: #80cbc4;
}

[data-theme="dark"] .question-block {
  border-bottom-color: var(--border-light);
}

[data-theme="dark"] select.form-control option {
  background: var(--bg-card);
  color: var(--text-body);
}

[data-theme="dark"] .survey-progress {
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

[data-theme="dark"] .thankyou-card {
  background: var(--bg-card);
  border-top-color: var(--primary-mid);
}

[data-theme="dark"] .thankyou-icon {
  background: var(--primary-pale);
  border-color: var(--primary-light);
}

/* --- Section divider --- */
[data-theme] .question-block {
  border-bottom-color: var(--border-light);
}

/* ============================================================
   Theme Switcher Widget
   ============================================================ */
.theme-switcher {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

.theme-toggle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-mid);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: all .2s ease;
  z-index: 2;
  position: relative;
}

.theme-toggle-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.30);
}

.theme-panel {
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.20);
  border: 1px solid var(--border-light);
  padding: 1rem;
  width: 230px;
  display: none;
  animation: slideUp .25s ease;
  position: relative;
  z-index: 1;
}

.theme-panel.open {
  display: block;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.theme-panel-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border-light);
}

.theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .6rem .4rem;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .2s ease;
  background: transparent;
  font-family: 'Sarabun', sans-serif;
}

.theme-option:hover {
  background: var(--primary-ultra);
  border-color: var(--border);
}

.theme-option.active {
  border-color: var(--primary-mid);
  background: var(--primary-pale);
}

.theme-swatch {
  width: 52px;
  height: 38px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  position: relative;
  flex-shrink: 0;
}

/* Swatch previews */
.swatch-official { background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #43a047 100%); }
.swatch-vibrant  { background: linear-gradient(135deg, #d84315 0%, #e64a19 50%, #00838f 100%); }
.swatch-dark     { background: linear-gradient(135deg, #0d1a0d 0%, #1a2a1a 50%, #66bb6a 100%); }
.swatch-light    { background: linear-gradient(135deg, #0d47a1 0%, #1565c0 50%, #6a1b9a 100%); }

.swatch-inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  padding: 4px;
}

.swatch-block {
  border-radius: 3px;
  opacity: .85;
}

/* Official swatch blocks */
.swatch-official .sb1 { background: #fff; }
.swatch-official .sb2 { background: #e8f5e9; }
.swatch-official .sb3 { background: #f5f7f5; }
.swatch-official .sb4 { background: #c8dac8; }

/* Vibrant swatch blocks */
.swatch-vibrant .sb1 { background: #fff; }
.swatch-vibrant .sb2 { background: #fbe9e7; }
.swatch-vibrant .sb3 { background: #fffaf7; }
.swatch-vibrant .sb4 { background: #ffccbc; }

/* Dark swatch blocks */
.swatch-dark .sb1 { background: #1a2a1a; }
.swatch-dark .sb2 { background: #1e3320; }
.swatch-dark .sb3 { background: #121a12; }
.swatch-dark .sb4 { background: #2e4a2e; }

/* Light swatch blocks */
.swatch-light .sb1 { background: #fff; }
.swatch-light .sb2 { background: #e3f2fd; }
.swatch-light .sb3 { background: #f0f7ff; }
.swatch-light .sb4 { background: #bbdefb; }

.theme-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-body);
  text-align: center;
  line-height: 1.2;
}

.theme-option.active .theme-name {
  color: var(--primary);
}

.theme-check {
  font-size: .7rem;
  color: var(--primary-mid);
  display: none;
}

.theme-option.active .theme-check {
  display: block;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .theme-switcher {
    bottom: 1rem;
    right: 1rem;
  }
  .theme-panel {
    width: 210px;
  }
}

/* ============================================================
   Login Page Theme Overrides
   ============================================================ */
[data-theme="vibrant"] .login-page {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,171,145,.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(178,235,242,.40) 0%, transparent 55%),
    linear-gradient(160deg, #fff3e0 0%, #fbe9e7 50%, #e0f7fa 100%);
}
[data-theme="vibrant"] .login-card {
  border-color: rgba(255,204,188,.7);
  box-shadow: 0 4px 24px rgba(230,74,25,.10), 0 1px 4px rgba(0,0,0,.05);
}

[data-theme="dark"] .login-page {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(30,51,32,.9) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(13,36,38,.8) 0%, transparent 55%),
    linear-gradient(160deg, #0d1a0d 0%, #121a12 50%, #0d2426 100%);
}
[data-theme="dark"] .login-card {
  background: rgba(26,42,26,.95);
  border-color: rgba(46,74,46,.8);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
[data-theme="dark"] .login-title { color: #81c784; }

[data-theme="light"] .login-page {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(187,222,251,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(225,190,231,.40) 0%, transparent 55%),
    linear-gradient(160deg, #e3f2fd 0%, #f0f7ff 50%, #f3e5f5 100%);
}
[data-theme="light"] .login-card {
  border-color: rgba(187,222,251,.7);
  box-shadow: 0 4px 24px rgba(13,71,161,.10), 0 1px 4px rgba(0,0,0,.05);
}
[data-theme="light"] .login-title { color: #0d47a1; }