/* ============================================================
   SDQ STUDENT CARE PLATFORM — Modern UI 2025
   Design: Refined dark sidebar + light content area
   Typography: Kanit (Thai) — expressive & legible
   Palette: Deep navy · electric cyan · warm amber accent
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg: #f0f4f9;
  --bg-2: #e8eef6;
  --surface: #ffffff;
  --surface-2: #f7fafd;
  --surface-glass: rgba(255,255,255,.72);
  --line: #dde5ef;
  --line-strong: #c6d3e3;
  --text: #0e1d2f;
  --text-soft: #5a7291;
  --text-xsoft: #8faabb;
  --navy:   #0a1f35;
  --navy-2: #0f2d4a;
  --navy-3: #16395f;
  --navy-4: #1d4975;
  --cyan:   #00c2e0;
  --cyan-2: #00aac9;
  --cyan-3: #00d8fa;
  --cyan-glow: rgba(0,194,224,.28);
  --sky:    #4da8ff;
  --sky-soft: #e8f4ff;
  --amber:  #f0b429;
  --amber-soft: #fff8e6;
  --success: #0ab87a;
  --success-soft: #e6faf3;
  --warning: #d98f0a;
  --warning-soft: #fff5e0;
  --danger:  #e03d5a;
  --danger-soft: #fff0f3;
  --shadow-xs: 0 1px 3px rgba(10,31,53,.07), 0 1px 2px rgba(10,31,53,.04);
  --shadow-sm: 0 4px 16px rgba(10,31,53,.08), 0 1px 4px rgba(10,31,53,.04);
  --shadow:    0 8px 32px rgba(10,31,53,.11), 0 2px 8px rgba(10,31,53,.05);
  --shadow-lg: 0 20px 60px rgba(10,31,53,.14), 0 6px 20px rgba(10,31,53,.07);
  --shadow-xl: 0 32px 80px rgba(10,31,53,.18), 0 8px 24px rgba(10,31,53,.08);
  --radius:    20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --sidebar-w: 272px;
  --ease: cubic-bezier(.22,.68,0,1.2);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Kanit', Tahoma, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 40% at 20% -5%, rgba(0,194,224,.09) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 100% 5%, rgba(77,168,255,.07) 0%, transparent 55%),
    linear-gradient(180deg, #eef4fb 0%, #e8eef6 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; }
button, input, select, textarea { font: inherit; }

input, select, textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  box-shadow: var(--shadow-xs);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan-2);
  box-shadow: 0 0 0 4px rgba(0,194,224,.14), var(--shadow-sm);
}
label {
  display: block;
  font-size: 13.5px; font-weight: 700;
  color: var(--text); margin-bottom: 7px;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em; background: var(--bg-2);
  padding: 2px 6px; border-radius: 5px; color: var(--navy-3);
}
.muted { color: var(--text-soft); }
.center { text-align: center; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Layout Shell ───────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; position: relative; }
.main { flex: 1; padding: 28px 32px 40px; min-width: 0; }
.main-inner { max-width: 1440px; margin: 0 auto; }
.main-auth { padding: 0; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--navy);
  background-image:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(0,194,224,.12) 0%, transparent 60%),
    linear-gradient(180deg, #0c2440 0%, #091929 60%, #07151f 100%);
  color: #cde2f5;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  box-shadow: 4px 0 40px rgba(0,0,0,.22), 1px 0 0 rgba(255,255,255,.04);
  z-index: 60; flex-shrink: 0;
}
.sidebar-inner {
  display: flex; flex-direction: column; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  padding: 24px 16px 20px; gap: 20px;
  scrollbar-width: none;
}
.sidebar-inner::-webkit-scrollbar { display: none; }

.brand {
  display: flex; gap: 13px; align-items: center;
  padding: 4px 6px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand-mark {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(145deg, rgba(0,194,224,.22), rgba(255,255,255,.07));
  border: 1px solid rgba(0,194,224,.25);
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0,194,224,.2), inset 0 1px 0 rgba(255,255,255,.1);
}
.brand-mark img, .login-badge img, .auth-logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-mark span, .login-badge span, .auth-logo span { display: none; font-size: 18px; font-weight: 800; color: #fff; }
.brand-mark.fallback span, .login-badge.fallback span, .auth-logo.fallback span { display: grid; place-items: center; width: 100%; height: 100%; }
.brand-title { font-size: 15px; font-weight: 800; line-height: 1.3; color: #fff; letter-spacing: -.01em; }
.brand-sub { font-size: 11.5px; line-height: 1.5; color: rgba(180,210,235,.6); margin-top: 2px; }

.user-panel {
  display: flex; gap: 12px; align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 13px 14px;
}
.user-avatar {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px; color: #fff;
  background: linear-gradient(135deg, var(--cyan), var(--sky));
  box-shadow: 0 6px 18px rgba(0,194,224,.3);
}
.user-name { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.35; }
.user-role { font-size: 11.5px; color: rgba(180,210,235,.65); margin-top: 2px; }
.user-scope { font-size: 11px; color: var(--cyan-3); margin-top: 3px; font-weight: 600; }

.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.nav-section-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(160,200,230,.4);
  padding: 4px 12px 8px; margin-top: 6px;
}
.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 12px;
  color: rgba(200,225,245,.75);
  transition: background .16s, color .16s, transform .14s var(--ease);
  border: 1px solid transparent; cursor: pointer; position: relative;
}
.nav-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.07);
  font-size: 16px; color: rgba(180,215,240,.7);
  flex-shrink: 0; transition: background .16s, color .16s;
}
.nav-label { font-weight: 600; font-size: 13.5px; flex: 1; line-height: 1.3; }
.nav-arrow { opacity: .3; font-size: 18px; line-height: 1; }
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.nav-link:hover .nav-icon { background: rgba(0,194,224,.16); color: var(--cyan-3); border-color: rgba(0,194,224,.2); }
.nav-link.active {
  background: linear-gradient(135deg, rgba(0,194,224,.2), rgba(77,168,255,.14));
  border-color: rgba(0,194,224,.22); color: #fff;
}
.nav-link.active .nav-icon { background: rgba(0,194,224,.24); border-color: rgba(0,194,224,.3); color: var(--cyan-3); }
.nav-link.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow);
  margin-left: -12px;
}
.side-footer {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 14px 8px 2px;
  font-size: 11.5px; color: rgba(150,190,220,.45); line-height: 1.7;
}
.side-footer-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(0,194,224,.4); margin-bottom: 4px; font-weight: 700;
}
.sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(5,15,28,.48); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 55;
}
body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

/* ── Topbar ─────────────────────────────────────────────────── */
.app-topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-bottom: 24px; padding: 14px 20px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(16px);
  border: 1.5px solid rgba(220,232,245,.8);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.app-topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sidebar-toggle {
  display: none; width: 40px; height: 40px; border-radius: 11px;
  border: 1.5px solid var(--line); background: var(--surface);
  color: var(--text); cursor: pointer; box-shadow: var(--shadow-xs);
  transition: background .15s, border-color .15s;
}
.sidebar-toggle:hover { background: var(--bg-2); border-color: var(--cyan-2); }
.topbar-kicker {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-xsoft); margin-bottom: 3px; font-weight: 700;
}
.topbar-title { font-size: 24px; line-height: 1.15; font-weight: 800; color: var(--text); letter-spacing: -.025em; }
.app-topbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.topbar-chip {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 8px 16px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
  box-shadow: var(--shadow-xs); white-space: nowrap;
}
.muted-chip { color: var(--text-soft); background: var(--bg); border-color: var(--line); }

/* ── Page Head ──────────────────────────────────────────────── */
.page-head, .hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 20px; }
.page-head h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }

/* ── Hero Banner ────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #0a1f35 0%, #0f2d4a 42%, #0c3d5c 100%);
  border-radius: 24px; padding: 32px 36px;
  position: relative; overflow: hidden; color: #fff;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.04);
}
.hero::before {
  content: ''; position: absolute;
  width: 500px; height: 500px; right: -160px; top: -200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,224,.18), transparent 65%); pointer-events: none;
}
.hero::after {
  content: ''; position: absolute;
  width: 300px; height: 300px; left: -80px; bottom: -130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(77,168,255,.14), transparent 65%); pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 860px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; background: rgba(0,194,224,.12);
  border: 1px solid rgba(0,194,224,.22); border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 14px; color: var(--cyan-3);
}
.hero-content h1 { font-size: 38px; font-weight: 900; letter-spacing: -.03em; margin: 0 0 12px; line-height: 1.08; }
.hero-text { margin: 10px 0 0; color: rgba(220,240,255,.78); font-size: 15px; line-height: 1.85; max-width: 680px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--navy);
  font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm);
}
.pill-soft { background: rgba(255,255,255,.1); color: rgba(220,240,255,.9); border: 1px solid rgba(255,255,255,.14); box-shadow: none; }
.hero-side-card {
  min-width: 290px; max-width: 340px; position: relative; z-index: 1;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 22px; color: #fff; backdrop-filter: blur(12px);
}
.hero-side-card.compact { min-width: 260px; }
.hero-side-label { font-size: 11px; text-transform: uppercase; letter-spacing: .13em; color: var(--cyan-3); font-weight: 700; }
.hero-side-value { font-size: 46px; font-weight: 900; line-height: 1; margin-top: 10px; letter-spacing: -.04em; }
.hero-side-caption { font-size: 13px; line-height: 1.75; color: rgba(220,240,255,.7); margin-top: 10px; }
.hero-mini-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }
.hero-mini-stats div { background: rgba(255,255,255,.07); border-radius: 14px; padding: 12px 10px; border: 1px solid rgba(255,255,255,.06); }
.hero-mini-stats strong { display: block; font-size: 22px; font-weight: 900; line-height: 1.15; letter-spacing: -.03em; }
.hero-mini-stats span { display: block; font-size: 11.5px; color: rgba(220,240,255,.65); margin-top: 4px; }
.progress-text { font-size: 15px; font-weight: 700; margin-top: 12px; }
.progress-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 12px; }
.progress-track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--sky)); box-shadow: 0 0 12px rgba(0,194,224,.5); }
.section-chip {
  display: inline-flex; align-items: center;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(0,194,224,.08); color: #0a7a94;
  font-size: 12px; font-weight: 700; border: 1px solid rgba(0,194,224,.18);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1.5px solid rgba(210,225,240,.8);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.card-head h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.cards { display: grid; gap: 16px; }
.cards.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.cards.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stack { display: grid; gap: 16px; }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; }
.meta dt { font-weight: 700; color: var(--text-soft); }
.meta dd { margin: 0; color: var(--text); }

/* ── Stat Cards ─────────────────────────────────────────────── */
.premium-stats { margin-bottom: 20px; }
.premium-stat {
  position: relative; overflow: hidden; background: #fff;
  border: 1.5px solid rgba(210,225,240,.8);
  border-radius: 20px; padding: 22px; min-height: 148px;
  box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s;
}
.premium-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.premium-stat::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 110px; height: 110px; border-radius: 50%; pointer-events: none; opacity: .7;
}
.premium-stat-students  { border-top: 3px solid var(--cyan); }
.premium-stat-students::after  { background: radial-gradient(circle, rgba(0,194,224,.12), transparent); }
.premium-stat-submissions { border-top: 3px solid var(--sky); }
.premium-stat-submissions::after { background: radial-gradient(circle, rgba(77,168,255,.12), transparent); }
.premium-stat-rooms { border-top: 3px solid var(--amber); }
.premium-stat-rooms::after { background: radial-gradient(circle, rgba(240,180,41,.14), transparent); }
.premium-stat-risk  { border-top: 3px solid var(--danger); }
.premium-stat-risk::after  { background: radial-gradient(circle, rgba(224,61,90,.12), transparent); }
.stat-label { font-size: 12.5px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-size: 44px; font-weight: 900; line-height: 1; margin: 14px 0 8px; color: var(--text); letter-spacing: -.04em; }
.stat-hint { font-size: 13px; color: var(--text-soft); line-height: 1.65; }

/* ── Dashboard ──────────────────────────────────────────────── */
.dashboard-main-grid { margin-bottom: 20px; }
.chart-box { width: 100%; min-height: 300px; }
.premium-chart-card, .premium-insight-card, .premium-table-card { overflow: hidden; }
.insight-stack { display: grid; gap: 13px; }
.insight-row { display: grid; grid-template-columns: minmax(130px,168px) 48px 1fr; gap: 12px; align-items: center; }
.insight-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.insight-value { font-weight: 900; font-size: 19px; letter-spacing: -.02em; }
.insight-bar { height: 10px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.insight-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--sky)); }
.insight-note { margin-top: 16px; color: var(--text-soft); line-height: 1.85; font-size: 13.5px; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-normal  { background: var(--success); }
.dot-risk    { background: var(--warning); }
.dot-problem { background: var(--danger); }

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap { overflow: auto; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; }
.table { width: 100%; border-collapse: collapse; min-width: 760px; }
.table th, .table td { padding: 13px 16px; border-bottom: 1px solid #edf2f8; text-align: left; vertical-align: middle; }
.table th {
  background: linear-gradient(180deg, #f8fbff, #f3f7fc);
  color: var(--text-soft); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 800; position: sticky; top: 0; z-index: 1;
}
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: #f7faff; }
.table tbody tr:last-child td { border-bottom: none; }
.table a { color: #1460a0; font-weight: 700; }
.table a:hover { color: var(--cyan-2); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 10px 18px; border-radius: var(--radius-md);
  border: 1.5px solid transparent; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: all .18s var(--ease);
  letter-spacing: -.01em; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--sky));
  color: #fff; box-shadow: 0 6px 20px rgba(0,194,224,.3), 0 2px 6px rgba(0,194,224,.2);
}
.btn-primary:hover { box-shadow: 0 10px 28px rgba(0,194,224,.38), 0 4px 10px rgba(0,194,224,.22); }
.btn-outline { background: #fff; border-color: var(--line); color: var(--text); box-shadow: var(--shadow-xs); }
.btn-outline:hover { border-color: var(--cyan-2); color: var(--cyan-2); background: rgba(0,194,224,.04); }
.btn-danger { background: var(--danger-soft); border-color: rgba(224,61,90,.25); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 6px 18px rgba(224,61,90,.25); }
.btn-sm  { min-height: 34px; padding: 7px 13px; border-radius: var(--radius-sm); font-size: 13px; }
.btn-lg, .btn-xl { min-height: 50px; padding: 13px 22px; border-radius: 16px; font-size: 15px; }
.btn-full { width: 100%; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; border: 1px solid transparent;
}
.badge-success { background: var(--success-soft); color: var(--success); border-color: rgba(10,184,122,.22); }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(217,143,10,.2); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(224,61,90,.2); }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { border-radius: var(--radius-md); padding: 13px 16px; margin-bottom: 16px; border: 1.5px solid; font-size: 14px; font-weight: 500; line-height: 1.7; }
.alert-success { background: var(--success-soft); color: #067a52; border-color: rgba(10,184,122,.22); }
.alert-danger  { background: var(--danger-soft);  color: #b02040; border-color: rgba(224,61,90,.22); }

/* ── Filters ────────────────────────────────────────────────── */
.filters { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; align-items: end; margin-bottom: 18px; }
.filters .btn { width: 100%; }
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Sticky Form Bar ────────────────────────────────────────── */
.form-meta-card { background: linear-gradient(180deg,#fff,#fbfdff); }
.form-actions-sticky {
  position: sticky; bottom: 16px; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: rgba(9,28,47,.92); color: #fff; padding: 14px 20px;
  border-radius: 18px; backdrop-filter: blur(16px);
  box-shadow: var(--shadow-xl); border: 1px solid rgba(255,255,255,.08);
}
.form-actions-note { font-size: 13px; color: rgba(180,215,240,.8); }
.note-card textarea { resize: vertical; min-height: 120px; }

/* ── Template Cards ─────────────────────────────────────────── */
.template-card { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 172px; position: relative; overflow: hidden; cursor: pointer; }
.template-card::after { content: ''; position: absolute; right: -24px; bottom: -20px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(0,194,224,.08), transparent); pointer-events: none; }
.template-card h3 { margin: 0; font-size: 21px; font-weight: 800; }
.template-card p { margin: 0; line-height: 1.85; color: var(--text-soft); font-size: 14px; }
.template-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ── Evaluation Questions ───────────────────────────────────── */
.evaluation-form { margin-top: 20px; }
.question-list { display: grid; gap: 14px; }
.question-card { padding: 22px; }
.question-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.question-number, .question-domain { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.question-number { background: rgba(0,194,224,.1); color: #0a7a94; border: 1px solid rgba(0,194,224,.18); }
.question-domain { background: var(--bg-2); color: var(--text-soft); border: 1px solid var(--line); }
.question-text { font-size: 18px; font-weight: 700; line-height: 1.65; color: var(--text); margin: 12px 0 18px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.choice-pill { position: relative; display: block; cursor: pointer; }
.choice-pill input { position: absolute; opacity: 0; pointer-events: none; }
.choice-pill span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 60px; border-radius: 14px; padding: 14px 12px;
  background: var(--bg); border: 1.5px solid var(--line);
  color: var(--text); font-weight: 700; font-size: 14px; transition: all .18s var(--ease);
}
.choice-pill:hover span { background: rgba(0,194,224,.06); border-color: var(--cyan-2); color: var(--navy); }
.choice-pill input:checked + span { background: linear-gradient(135deg, var(--cyan), var(--sky)); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(0,194,224,.28); }
.impact-box select { background: #fff; }
.premium-impact { border-top: 3px solid var(--cyan); }

/* ── Score Cards ────────────────────────────────────────────── */
.score-grid-premium { margin-bottom: 20px; }
.score-card { text-align: center; padding: 22px 16px; min-height: 152px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.score-title { font-size: 13px; font-weight: 700; color: var(--text-soft); line-height: 1.65; text-transform: uppercase; letter-spacing: .05em; }
.score-value { font-size: 44px; font-weight: 900; line-height: 1; color: var(--navy); letter-spacing: -.04em; }

/* ── Login / Auth ───────────────────────────────────────────── */
.login-shell { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr); min-height: 100vh; }
.login-visual {
  position: relative; overflow: hidden; display: flex; align-items: stretch;
  background:
    linear-gradient(130deg, rgba(6,18,34,.88), rgba(10,38,60,.7)),
    var(--login-bg, linear-gradient(145deg, #07172a, #123252)) center/cover no-repeat;
}
.login-visual::before {
  content: ''; position: absolute;
  width: 480px; height: 480px; right: -140px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,224,.24), transparent 65%); filter: blur(2px);
}
.login-visual::after {
  content: ''; position: absolute;
  width: 320px; height: 320px; left: -90px; bottom: -90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,180,41,.14), transparent 65%);
}
.login-visual-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,14,26,.4), transparent 50%); }
.login-visual-content {
  position: relative; z-index: 1; padding: 56px 54px 50px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; min-height: 100vh;
}
.login-badge {
  width: 90px; height: 90px; border-radius: 26px; overflow: hidden;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 48px rgba(0,0,0,.24); margin-bottom: 26px;
}
.login-kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: .18em; color: var(--cyan-3); font-weight: 800; margin-bottom: 14px; }
.login-visual h1 { font-size: 56px; line-height: 1.02; margin: 0 0 16px; font-weight: 900; letter-spacing: -.04em; max-width: 680px; }
.login-visual p { font-size: 17px; line-height: 1.95; color: rgba(220,240,255,.76); max-width: 660px; margin: 0; }
.login-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 30px; }
.login-feature-grid-minimal { display: none; }
.login-feature-card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(12px); border-radius: 20px; padding: 18px; min-height: 136px;
  transition: background .16s;
}
.login-feature-card:hover { background: rgba(255,255,255,.11); }
.login-feature-card strong { display: block; font-size: 14px; color: #fff; margin-bottom: 8px; }
.login-feature-card span { display: block; font-size: 13px; line-height: 1.85; color: rgba(215,238,255,.7); }
.login-panel {
  background: linear-gradient(160deg, #f5f9fd 0%, #edf2f8 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 36px; position: relative;
}
.login-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(0,194,224,.08), transparent 40%), radial-gradient(circle at 80% 80%, rgba(77,168,255,.07), transparent 40%);
}
.auth-card {
  width: min(500px, 100%); position: relative; z-index: 1;
  background: rgba(255,255,255,.9); backdrop-filter: blur(20px);
  border: 1.5px solid rgba(220,232,245,.9); border-radius: 28px; padding: 32px;
  box-shadow: 0 24px 64px rgba(10,31,53,.13), 0 4px 16px rgba(10,31,53,.06);
}
.auth-logo-wrap { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.auth-logo {
  width: 68px; height: 68px; border-radius: 20px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--navy), var(--cyan));
  box-shadow: 0 12px 30px rgba(10,31,53,.2); flex-shrink: 0;
}
.auth-logo-wrap h1 { margin: 4px 0 8px; font-size: 28px; line-height: 1.1; font-weight: 900; letter-spacing: -.03em; }
.auth-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--text-xsoft); font-weight: 800; }
.auth-form-grid { margin-top: 20px; }
.login-panel-footer { margin-top: 18px; display: grid; gap: 10px; }
.auth-footer { font-size: 12px; color: #7991a7; }

/* ── Print ──────────────────────────────────────────────────── */
.print-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 9px 15px; border-radius: 11px;
  border: 1.5px solid var(--line); background: #fff;
  font-weight: 700; cursor: pointer; font-size: 13.5px; box-shadow: var(--shadow-xs);
}
.print-btn:hover { border-color: var(--cyan-2); color: var(--cyan-2); }
.top { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }

/* ── Branding Console ───────────────────────────────────────── */
.brand-hero .hero-side-value { font-size: 36px; }
.brand-grid { margin-top: 18px; }
.brand-card { min-height: 100%; }
.brand-form .muted { font-size: 12px; line-height: 1.75; margin-top: 8px; }
.branding-preview-stack { display: grid; gap: 18px; }
.brand-preview-head { font-size: 13px; font-weight: 700; color: var(--text-soft); margin-bottom: 10px; }
.brand-preview-logo-box {
  min-height: 176px; border-radius: 20px; border: 1.5px solid var(--line);
  background: radial-gradient(circle at top, rgba(0,194,224,.1), transparent 35%), linear-gradient(180deg, #f8fcff, #edf5fb);
  display: grid; place-items: center; padding: 24px;
}
.brand-preview-logo-box img { max-width: 180px; max-height: 160px; object-fit: contain; filter: drop-shadow(0 14px 28px rgba(10,31,53,.14)); }
.brand-preview-hero-box {
  position: relative; min-height: 270px; border-radius: 22px; overflow: hidden;
  background: center/cover no-repeat; border: 1.5px solid rgba(10,31,53,.1); box-shadow: var(--shadow-sm);
}
.brand-preview-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(6,18,34,.78), rgba(10,38,60,.35) 54%, rgba(0,194,224,.2)); }
.brand-preview-hero-content { position: absolute; left: 22px; right: 22px; bottom: 22px; color: #fff; display: grid; gap: 6px; }
.brand-preview-hero-content strong { font-size: 26px; line-height: 1.1; letter-spacing: -.03em; font-weight: 900; }
.brand-preview-hero-content span { font-size: 13.5px; color: rgba(220,240,255,.8); }
.brand-guide-card { margin-top: 18px; }
.mini-card { padding: 18px; border-radius: 18px; background: #fff; border: 1.5px solid var(--line); }
.mini-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 800; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.card, .premium-stat, .template-card { animation: fadeInUp .36s cubic-bezier(.16,1,.3,1) both; }
.premium-stat:nth-child(2) { animation-delay: .06s; }
.premium-stat:nth-child(3) { animation-delay: .12s; }
.premium-stat:nth-child(4) { animation-delay: .18s; }
.alert { animation: fadeIn .2s ease both; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(10,31,53,.15); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(10,31,53,.25); }

/* ── Focus ──────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .cards.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .login-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform .24s cubic-bezier(.16,1,.3,1); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-toggle { display: grid; place-items: center; }
  .main { padding: 18px 18px 32px; }
  .grid.two, .cards.three { grid-template-columns: 1fr; }
  .hero, .page-head { flex-direction: column; align-items: stretch; }
  .hero-side-card { max-width: none; min-width: 0; }
  .filters { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-visual { min-height: 52vh; }
  .login-visual-content { min-height: 52vh; padding: 40px 28px 28px; }
  .login-visual h1 { font-size: 40px; }
  .login-feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cards.four, .cards.three, .choice-grid, .grid.two, .filters { grid-template-columns: 1fr; }
  .table { min-width: 640px; }
  .auth-card { padding: 22px; }
  .auth-logo-wrap { flex-direction: column; }
  .topbar-title { font-size: 20px; }
  .page-head h1, .hero h1 { font-size: 26px; }
  .hero { padding: 22px; }
  .insight-row { grid-template-columns: 1fr; gap: 8px; }
  .form-actions-sticky { flex-direction: column; align-items: stretch; }
}
@media (max-width: 520px) {
  .main { padding: 14px 14px 24px; }
  .topbar-chip { padding: 7px 12px; font-size: 12px; }
  .hero-mini-stats { grid-template-columns: 1fr; }
  .question-card, .card { padding: 16px; }
  .login-visual-content { padding: 28px 18px 22px; }
  .login-visual h1 { font-size: 34px; }
  .auth-card { border-radius: 22px; }
  .app-topbar { padding: 12px 14px; border-radius: 16px; }
}
@media print {
  .sidebar, .app-topbar, .sidebar-toggle, .form-actions-sticky { display: none !important; }
  .main { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ============================================================
   Revamp 2026 — สดขึ้น ทันสมัยขึ้น และปรับ Login แยกบทบาท
   ============================================================ */
:root {
  --bg: #eef4ff;
  --bg-2: #e7f0ff;
  --surface: rgba(255,255,255,.92);
  --surface-2: #f8fbff;
  --surface-glass: rgba(255,255,255,.78);
  --line: #d9e5f6;
  --line-strong: #bed0ea;
  --text: #13233b;
  --text-soft: #58708f;
  --navy: #112847;
  --navy-2: #173761;
  --navy-3: #1d4777;
  --cyan: #22c7e8;
  --cyan-2: #16afd1;
  --sky: #5c8dff;
  --amber: #f7b43b;
  --success: #0baa71;
  --warning: #da930a;
  --danger: #df4963;
  --shadow: 0 16px 42px rgba(24, 55, 97, .11), 0 6px 16px rgba(24, 55, 97, .06);
  --shadow-lg: 0 24px 64px rgba(24, 55, 97, .16), 0 10px 24px rgba(24, 55, 97, .08);
  --radius: 24px;
  --radius-md: 16px;
}

body {
  background-image:
    radial-gradient(circle at 8% 10%, rgba(92,141,255,.18), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(34,199,232,.18), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(247,180,59,.10), transparent 28%),
    linear-gradient(180deg, #f5f9ff 0%, #edf3fb 100%);
}

.card,
.premium-stat,
.template-card,
.auth-card,
.app-topbar {
  backdrop-filter: blur(18px);
}

.card,
.premium-stat,
.template-card {
  border: 1px solid rgba(194, 210, 232, .72);
  box-shadow: var(--shadow);
}

.card:hover,
.template-card:hover,
.premium-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.sidebar {
  background-image:
    radial-gradient(ellipse 120% 60% at 30% 0%, rgba(34,199,232,.16) 0%, transparent 56%),
    radial-gradient(ellipse 100% 50% at 100% 12%, rgba(92,141,255,.16) 0%, transparent 44%),
    linear-gradient(180deg, #102540 0%, #0b1d32 55%, #081726 100%);
}

.nav-link {
  border-radius: 14px;
}

.nav-link.active {
  background: linear-gradient(135deg, rgba(92,141,255,.22), rgba(34,199,232,.20));
}

.btn {
  border-radius: 14px;
}

.btn-primary {
  background: linear-gradient(135deg, #5c8dff 0%, #22c7e8 100%);
  box-shadow: 0 14px 30px rgba(46, 118, 255, .25);
}

.btn-primary:hover {
  box-shadow: 0 18px 34px rgba(34, 199, 232, .34), 0 8px 16px rgba(92, 141, 255, .22);
}

.login-shell {
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
  background:
    radial-gradient(circle at 10% 10%, rgba(92,141,255,.12), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(34,199,232,.12), transparent 28%),
    linear-gradient(180deg, #eef5ff 0%, #e8f0fa 100%);
}

.login-visual {
  position: relative;
  overflow: hidden;
}

.login-visual::after {
  content: '';
  position: absolute;
  inset: auto 32px 38px 32px;
  height: 140px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.18));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.auth-card-revamp {
  width: min(100%, 560px);
  padding: 28px;
  border: 1px solid rgba(189, 204, 225, .8);
  box-shadow: 0 28px 80px rgba(16, 37, 64, .16), 0 12px 24px rgba(16, 37, 64, .07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,251,255,.92) 100%);
}

.auth-logo-wrap-stacked {
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.auth-logo-lg {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(34,199,232,.16);
}

.login-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px;
  background: #edf4ff;
  border-radius: 18px;
  border: 1px solid #d9e5f6;
}

.login-switch {
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  transition: all .18s ease;
}

.login-switch.active {
  color: #fff;
  background: linear-gradient(135deg, #5c8dff 0%, #22c7e8 100%);
  box-shadow: 0 10px 24px rgba(46,118,255,.24);
}

.login-tab-panel {
  display: none;
}

.login-tab-panel.active {
  display: block;
}

.auth-section-head {
  margin-bottom: 14px;
}

.auth-section-head h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.auth-section-head p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
}

.auth-form-student input[name="student_code"] {
  text-align: center;
  font-size: 22px;
  letter-spacing: .06em;
  font-weight: 700;
}

.login-panel-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e7eef8;
}

.table-wrap {
  border-radius: 18px;
}

.table th {
  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
  color: #16395f;
}

@media (max-width: 860px) {
  .auth-card-revamp {
    width: 100%;
    padding: 22px;
  }

  .login-switcher {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Theme Toggle + Dark Mode
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(34,199,232,.4);
}
.theme-toggle-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 14px;
  border-radius: 999px;
  background: rgba(92,141,255,.12);
}
.theme-toggle-text {
  font-size: 12.5px;
  font-weight: 700;
}
.theme-toggle-login {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07111d;
  --bg-2: #0d1a2a;
  --surface: rgba(14, 26, 41, .92);
  --surface-2: #111f32;
  --surface-glass: rgba(13, 24, 37, .82);
  --line: #21364d;
  --line-strong: #2d4762;
  --text: #edf5ff;
  --text-soft: #a8bfd7;
  --text-xsoft: #7f97b1;
  --navy: #08131f;
  --navy-2: #102033;
  --navy-3: #17304b;
  --navy-4: #21405f;
  --cyan: #30d7f7;
  --cyan-2: #1cc2e3;
  --cyan-3: #7be9ff;
  --cyan-glow: rgba(48,215,247,.3);
  --sky: #7c9fff;
  --sky-soft: rgba(124,159,255,.12);
  --amber: #ffbf55;
  --amber-soft: rgba(255,191,85,.1);
  --success: #2bd39a;
  --success-soft: rgba(43,211,154,.12);
  --warning: #ffb648;
  --warning-soft: rgba(255,182,72,.12);
  --danger: #ff6f88;
  --danger-soft: rgba(255,111,136,.12);
  --shadow-xs: 0 1px 3px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.12);
  --shadow-sm: 0 8px 22px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.14);
  --shadow: 0 18px 42px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.18);
  --shadow-lg: 0 26px 64px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.2);
}

html[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(48,215,247,.12), transparent 24%),
    radial-gradient(circle at 88% 6%, rgba(124,159,255,.14), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(255,191,85,.08), transparent 28%),
    linear-gradient(180deg, #08121d 0%, #0a1522 100%);
}

html[data-theme="dark"] .app-topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .premium-stat,
html[data-theme="dark"] .template-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .mini-card,
html[data-theme="dark"] .brand-preview-logo-box,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .topbar-chip,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .login-switcher,
html[data-theme="dark"] .question-pill span,
html[data-theme="dark"] .score-tile,
html[data-theme="dark"] .pill-soft,
html[data-theme="dark"] .section-chip,
html[data-theme="dark"] .user-panel {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] .table th {
  background: linear-gradient(180deg, #142436 0%, #102031 100%);
  color: var(--text-soft);
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  border-bottom-color: rgba(255,255,255,.06);
}
html[data-theme="dark"] .table tbody tr:hover {
  background: rgba(124,159,255,.08);
}
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .print-btn,
html[data-theme="dark"] .sidebar-toggle {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .question-domain,
html[data-theme="dark"] code,
html[data-theme="dark"] .muted-chip {
  background: rgba(255,255,255,.04);
  color: var(--text-soft);
  border-color: var(--line);
}
html[data-theme="dark"] .login-shell {
  background:
    radial-gradient(circle at 10% 10%, rgba(124,159,255,.12), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(48,215,247,.12), transparent 28%),
    linear-gradient(180deg, #08121d 0%, #0c1724 100%);
}
html[data-theme="dark"] .auth-card-revamp {
  background: linear-gradient(180deg, rgba(10,19,31,.95) 0%, rgba(12,24,38,.92) 100%);
  border-color: rgba(124,159,255,.18);
}
html[data-theme="dark"] .login-panel-footer {
  border-top-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .login-switch {
  color: var(--text-soft);
}
html[data-theme="dark"] .login-switch.active {
  color: #08121d;
}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .brand-preview-hero-box {
  box-shadow: var(--shadow-lg);
}
html[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #0a1521 0%, #102233 42%, #12314a 100%);
}
html[data-theme="dark"] .form-meta-card {
  background: linear-gradient(180deg, rgba(12,24,38,.95), rgba(11,22,35,.92));
}
html[data-theme="dark"] .insight-bar {
  background: rgba(255,255,255,.06);
}
html[data-theme="dark"] .alert-success { color: #9df0cf; }
html[data-theme="dark"] .alert-danger { color: #ffb8c5; }
html[data-theme="dark"] .table a { color: #8ccfff; }
html[data-theme="dark"] .topbar-kicker,
html[data-theme="dark"] .auth-section-head p,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .stat-hint,
html[data-theme="dark"] .insight-note,
html[data-theme="dark"] .brand-form .muted,
html[data-theme="dark"] .brand-preview-head,
html[data-theme="dark"] .brand-preview-hero-content span {
  color: var(--text-soft);
}
html[data-theme="dark"] .theme-toggle-icon {
  background: rgba(48,215,247,.16);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.22);
}

@media (max-width: 860px) {
  .theme-toggle-login {
    top: 14px;
    right: 14px;
  }
}
@media (max-width: 520px) {
  .theme-toggle-text {
    display: none;
  }
  .theme-toggle {
    padding-inline: 11px;
  }
}

.login-panel { position: relative; }



/* ── Production polish add-on ─────────────────────────────── */
:root { color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }
body, .card, .app-topbar, .hero, .login-panel, .quick-action-card, .theme-toggle, .alert, input, select, textarea, .btn {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .18s ease, opacity .22s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-xsoft); }
.table-wrap { overflow: auto; border-radius: 18px; }
.table thead th { position: sticky; top: 0; z-index: 2; }
.alert { position: relative; overflow: hidden; }
.alert.is-leaving { opacity: 0; transform: translateY(-6px); }
.btn[disabled], button[disabled] { opacity: .82; cursor: wait; }
.btn-loading-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px;
  background: currentColor; opacity: .8; animation: sdqPulse .9s infinite ease-in-out;
}
@keyframes sdqPulse { 0%,100% { transform: scale(.7); opacity: .45; } 50% { transform: scale(1); opacity: 1; } }

.login-feature-grid-minimal {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px;
}
.login-feature-item {
  padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06); backdrop-filter: blur(6px);
}
.login-feature-item strong { display: block; font-size: 14px; color: #fff; margin-bottom: 4px; }
.login-feature-item span { display: block; font-size: 12px; color: rgba(220,235,250,.74); line-height: 1.6; }

.quick-action-board {
  margin: 22px 0 24px; border-radius: 24px; padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.64));
  border: 1.5px solid rgba(214,226,238,.85); box-shadow: var(--shadow-sm);
}
.quick-action-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px;
}
.quick-action-head h2 { margin: 0 0 4px; font-size: 24px; line-height: 1.15; }
.quick-action-head p { margin: 0; color: var(--text-soft); }
.quick-action-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.quick-action-card {
  display: flex; flex-direction: column; gap: 8px; min-height: 154px;
  padding: 18px; border-radius: 20px; background: var(--surface);
  border: 1.5px solid var(--line); box-shadow: var(--shadow-xs);
}
.quick-action-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(0,194,224,.28); }
.quick-action-icon {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,194,224,.14), rgba(77,168,255,.16)); font-size: 20px;
}
.quick-action-card strong { font-size: 16px; line-height: 1.35; color: var(--text); }
.quick-action-card span:last-child { color: var(--text-soft); line-height: 1.6; font-size: 13px; }

.card, .premium-table-card, .premium-chart-card, .premium-insight-card, .quick-action-board {
  backdrop-filter: blur(12px);
}

html[data-theme='dark'] body {
  background: #09131d;
  background-image:
    radial-gradient(ellipse 70% 38% at 20% -6%, rgba(0,194,224,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 26% at 100% 0%, rgba(77,168,255,.10) 0%, transparent 50%),
    linear-gradient(180deg, #0a131d 0%, #0d1723 100%);
}
html[data-theme='dark'] .quick-action-board {
  background: linear-gradient(180deg, rgba(16,26,38,.88), rgba(12,21,31,.82));
  border-color: rgba(82,107,132,.4);
}
html[data-theme='dark'] .quick-action-card {
  background: rgba(15,26,38,.95); border-color: rgba(82,107,132,.36);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
html[data-theme='dark'] .quick-action-card strong { color: #eef6ff; }
html[data-theme='dark'] .quick-action-card span:last-child,
html[data-theme='dark'] .quick-action-head p { color: #9fb6ca; }
html[data-theme='dark'] .quick-action-head h2 { color: #f1f7ff; }
html[data-theme='dark'] .table thead th { background: #102030; }

@media (max-width: 1180px) {
  .quick-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .quick-action-board { padding: 18px; border-radius: 20px; }
  .quick-action-head { flex-direction: column; align-items: stretch; }
  .quick-action-grid { grid-template-columns: 1fr; }
  .quick-action-card { min-height: unset; }
  .login-feature-item { padding: 12px 14px; }
}
@media print {
  .sidebar, .sidebar-overlay, .app-topbar, .theme-toggle, .sidebar-toggle, .quick-action-board { display: none !important; }
  .main, .main-inner { padding: 0 !important; max-width: none !important; }
  body { background: #fff !important; }
  .card, .hero, .premium-table-card { box-shadow: none !important; border-color: #ddd !important; }
}


/* ============================================================
   Final Branding — โรงเรียนนนทบุรีวิทยาลัย
   Purple · Gold · Premium School Identity
   ============================================================ */
:root {
  --brand-primary: #6f45d9;
  --brand-primary-2: #8a5cf0;
  --brand-secondary: #c084fc;
  --brand-accent: #f6c453;
  --brand-accent-2: #f7d98b;
  --brand-ink: #241748;
  --brand-soft: #f6f1ff;
  --brand-soft-2: #fdf8ef;
  --bg: #f6f3fb;
  --bg-2: #ede7f9;
  --surface: #ffffff;
  --surface-2: #fbf9ff;
  --line: #e2d9f4;
  --line-strong: #ccbde9;
  --text: #261b44;
  --text-soft: #6e6490;
  --text-xsoft: #968cb3;
  --navy: #231240;
  --navy-2: #321a5a;
  --navy-3: #452279;
  --navy-4: #5a2f99;
  --cyan: #8a5cf0;
  --cyan-2: #7a49ea;
  --cyan-3: #e7d7ff;
  --cyan-glow: rgba(138,92,240,.32);
  --sky: #c084fc;
  --sky-soft: #f4ebff;
  --amber: #f6c453;
  --amber-soft: #fff6df;
  --shadow-xs: 0 1px 3px rgba(36,23,72,.08), 0 1px 2px rgba(36,23,72,.04);
  --shadow-sm: 0 8px 20px rgba(61,34,111,.10), 0 2px 6px rgba(36,23,72,.04);
  --shadow: 0 16px 40px rgba(61,34,111,.12), 0 4px 14px rgba(36,23,72,.05);
  --shadow-lg: 0 26px 64px rgba(61,34,111,.15), 0 10px 24px rgba(36,23,72,.07);
}

body {
  background-image:
    radial-gradient(ellipse 70% 45% at 15% -8%, rgba(138,92,240,.14) 0%, transparent 58%),
    radial-gradient(ellipse 60% 35% at 100% 0%, rgba(246,196,83,.16) 0%, transparent 52%),
    linear-gradient(180deg, #faf7ff 0%, #f2ecfb 100%);
}

.sidebar {
  background-image:
    radial-gradient(ellipse 130% 62% at 18% 0%, rgba(192,132,252,.18) 0%, transparent 48%),
    radial-gradient(ellipse 110% 70% at 95% 12%, rgba(246,196,83,.13) 0%, transparent 42%),
    linear-gradient(180deg, #2a1650 0%, #210f3e 56%, #190b2f 100%);
}

.brand { border-bottom-color: rgba(255,255,255,.09); }
.brand-mark, .auth-logo, .login-badge {
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(246,196,83,.18));
  border: 1px solid rgba(246,196,83,.34);
  box-shadow: 0 14px 34px rgba(87,47,158,.26), inset 0 1px 0 rgba(255,255,255,.28);
}
.brand-mark img, .login-badge img, .auth-logo img { object-fit: contain; padding: 6px; }
.brand-sub { color: rgba(246,228,186,.74); }
.user-avatar { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); box-shadow: 0 10px 26px rgba(111,69,217,.34); }
.nav-link:hover .nav-icon, .nav-link.active .nav-icon { background: rgba(246,196,83,.16); border-color: rgba(246,196,83,.22); color: #ffe9ad; }
.nav-link.active { background: linear-gradient(135deg, rgba(138,92,240,.24), rgba(246,196,83,.14)); border-color: rgba(246,196,83,.24); }
.nav-link.active::before { background: linear-gradient(180deg, var(--brand-accent), var(--brand-primary-2)); box-shadow: 0 0 10px rgba(246,196,83,.3); }
.side-footer-label { color: rgba(246,196,83,.64); }

.app-topbar {
  background: rgba(255,255,255,.86);
  border-color: rgba(223,212,246,.85);
  box-shadow: 0 14px 34px rgba(77,45,133,.09);
}
.topbar-kicker, .auth-kicker, .hero-eyebrow { color: var(--brand-primary); }
.topbar-chip { border-color: #e1d6f6; }
.theme-toggle:hover, .sidebar-toggle:hover { border-color: rgba(138,92,240,.42); }

.hero {
  background: linear-gradient(135deg, #35185f 0%, #4c2388 45%, #6d37b7 100%);
}
.hero::before { background: radial-gradient(circle, rgba(246,196,83,.22), transparent 65%); }
.hero-text, .login-visual p { color: rgba(255,245,220,.86); }
.pill { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.pill-soft { background: rgba(246,196,83,.14); border-color: rgba(246,196,83,.22); color: #7d5a00; }

.btn-primary, .login-switch.active {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 68%, var(--brand-accent) 100%);
  box-shadow: 0 16px 34px rgba(111,69,217,.24);
}
.btn-primary:hover { box-shadow: 0 18px 38px rgba(111,69,217,.30), 0 10px 18px rgba(246,196,83,.16); }

.login-shell {
  background:
    radial-gradient(circle at 8% 8%, rgba(138,92,240,.14), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(246,196,83,.13), transparent 28%),
    linear-gradient(180deg, #f8f3ff 0%, #f3ecfa 100%);
}
.login-visual {
  background:
    linear-gradient(180deg, rgba(27,10,51,.12) 0%, rgba(27,10,51,.42) 100%),
    var(--login-bg) center/cover no-repeat;
}
.login-visual::before { background: linear-gradient(180deg, rgba(44,18,84,.26), rgba(19,8,38,.08)); }
.login-visual::after { background: radial-gradient(circle at 20% 20%, rgba(246,196,83,.22), transparent 36%); }
.login-visual-overlay { background: linear-gradient(to top, rgba(28,11,51,.56), rgba(77,37,122,.18) 48%, rgba(0,0,0,0) 100%); }
.login-kicker { color: rgba(250,227,170,.95); }
.login-feature-item {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.auth-card-revamp {
  background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(251,247,255,.95) 100%);
  border-color: rgba(214,199,242,.9);
}
.login-switcher { background: #f2ebff; border-color: #dfd1fb; }
.auth-form-student input[name="student_code"] { color: var(--brand-primary); }
.auth-footer { color: #8f82af; }

.brand-card, .card, .premium-stat, .template-card, .table-wrap {
  border-color: rgba(214,199,242,.85);
}
.table th { background: linear-gradient(180deg, #fbf7ff 0%, #f3ecff 100%); color: #51307f; }
.section-chip { background: #f4edff; border-color: #dfcffc; color: #6235a8; }

html[data-theme="dark"] {
  --bg: #120a20;
  --bg-2: #1a102d;
  --surface: rgba(27, 16, 44, .94);
  --surface-2: #23173a;
  --surface-glass: rgba(24, 15, 38, .84);
  --line: #3d295f;
  --line-strong: #5a3d87;
  --text: #f7efff;
  --text-soft: #c6b3e8;
  --text-xsoft: #a38ec8;
  --navy: #150a26;
  --navy-2: #211038;
  --navy-3: #311756;
  --navy-4: #47216e;
  --cyan: #bc8cff;
  --cyan-2: #a86fff;
  --cyan-3: #f3e5ff;
  --cyan-glow: rgba(188,140,255,.34);
  --sky: #e7b95b;
  --sky-soft: rgba(231,185,91,.10);
  --amber: #f6c453;
  --amber-soft: rgba(246,196,83,.10);
  --shadow-xs: 0 1px 3px rgba(0,0,0,.26), 0 1px 2px rgba(0,0,0,.16);
  --shadow-sm: 0 10px 24px rgba(0,0,0,.28), 0 3px 10px rgba(0,0,0,.16);
  --shadow: 0 18px 42px rgba(0,0,0,.32), 0 6px 18px rgba(0,0,0,.22);
  --shadow-lg: 0 28px 68px rgba(0,0,0,.38), 0 12px 28px rgba(0,0,0,.24);
}
html[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 15% 8%, rgba(188,140,255,.14), transparent 24%),
    radial-gradient(circle at 92% 6%, rgba(246,196,83,.10), transparent 22%),
    linear-gradient(180deg, #120a20 0%, #171027 100%);
}
html[data-theme="dark"] .sidebar {
  background-image:
    radial-gradient(ellipse 120% 56% at 18% 0%, rgba(188,140,255,.18) 0%, transparent 50%),
    radial-gradient(ellipse 110% 66% at 95% 12%, rgba(246,196,83,.10) 0%, transparent 44%),
    linear-gradient(180deg, #180c2b 0%, #12091f 56%, #0e0718 100%);
}
html[data-theme="dark"] .app-topbar { background: rgba(24,14,39,.88); }
html[data-theme="dark"] .hero { background: linear-gradient(135deg, #1f1036 0%, #34175a 42%, #542889 100%); }
html[data-theme="dark"] .login-shell {
  background:
    radial-gradient(circle at 8% 8%, rgba(188,140,255,.12), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(246,196,83,.08), transparent 28%),
    linear-gradient(180deg, #120a20 0%, #171027 100%);
}
html[data-theme="dark"] .auth-card-revamp {
  background: linear-gradient(180deg, rgba(25,14,40,.96) 0%, rgba(30,18,48,.94) 100%);
  border-color: rgba(188,140,255,.18);
}
html[data-theme="dark"] .login-switcher { background: rgba(255,255,255,.03); border-color: rgba(188,140,255,.16); }
html[data-theme="dark"] .login-switch.active { color: #130a20; }
html[data-theme="dark"] .pill-soft,
html[data-theme="dark"] .section-chip { color: #f7d98b; }
html[data-theme="dark"] .table th { background: linear-gradient(180deg, #24153c 0%, #1b102e 100%); color: #dbc8ff; }
html[data-theme="dark"] .brand-sub,
html[data-theme="dark"] .auth-footer { color: #c0abd8; }


/* ===== Final mobile + official export refinements ===== */
.topbar-brand-mini {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(255,247,222,.95), rgba(241,218,144,.85));
  border: 1px solid rgba(183,144,48,.24);
  box-shadow: 0 12px 22px rgba(109,77,20,.12);
  flex: 0 0 auto;
}
.topbar-brand-mini img { width: 100%; height: 100%; object-fit: contain; }
.topbar-brand-mini span { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-weight: 900; color: #6e4d10; }
.topbar-brand-mini.fallback span { display: flex; }
.page-head-note {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(126, 85, 221, .09);
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 600;
}
.template-badge {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(138,92,240,.12);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 700;
}
.question-card.is-incomplete {
  border-color: #d14b4b !important;
  box-shadow: 0 0 0 4px rgba(209,75,75,.14), 0 18px 42px rgba(91,35,35,.10) !important;
  transform: translateY(-1px);
}
.question-card.is-incomplete .question-number {
  background: #d14b4b !important;
  color: #fff !important;
}
@media (max-width: 980px) {
  html.drawer-lock, html.drawer-lock body { overflow: hidden; }
  .sidebar {
    width: min(86vw, 340px) !important;
    border-top-right-radius: 26px;
    border-bottom-right-radius: 26px;
    box-shadow: 32px 0 54px rgba(17, 10, 33, .26);
    transition: transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s ease;
  }
  .sidebar-overlay {
    backdrop-filter: blur(6px);
    background: rgba(17, 10, 33, .26);
    transition: opacity .28s ease;
  }
  .app-topbar {
    position: sticky;
    top: 10px;
    z-index: 45;
  }
  .app-topbar-left {
    gap: 12px;
    min-width: 0;
  }
  .app-topbar-right {
    gap: 6px;
  }
  .topbar-chip { display: none; }
  .topbar-title {
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42vw;
  }
  .topbar-kicker {
    font-size: 10px;
    line-height: 1.25;
    max-width: 42vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cards.four.premium-stats,
  .quick-action-grid,
  .dashboard-main-grid,
  .cards.three,
  .cards.two,
  .grid.two {
    grid-template-columns: 1fr !important;
  }
  .premium-stat {
    padding: 18px 18px 16px;
    border-radius: 22px;
  }
  .stat-value {
    font-size: 32px !important;
    line-height: 1;
  }
  .quick-action-grid {
    display: grid;
    gap: 12px;
  }
  .quick-action-card {
    border-radius: 22px;
    min-height: 0;
    padding: 16px 16px 15px;
  }
  .quick-action-card strong { font-size: 16px; }
  .quick-action-card span:last-child { font-size: 13px; line-height: 1.6; }
  .dashboard-main-grid .premium-chart-card { order: 2; }
  .dashboard-main-grid .premium-insight-card { order: 1; }
  .premium-table-card { order: 3; }
  .table-wrap {
    border-radius: 20px;
    overflow: visible;
    background: transparent;
    border: none;
  }
  .table-wrap .table,
  .table-wrap .table thead,
  .table-wrap .table tbody,
  .table-wrap .table tr,
  .table-wrap .table th,
  .table-wrap .table td {
    display: block;
    width: 100%;
  }
  .table-wrap .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .table-wrap .table tbody {
    display: grid;
    gap: 12px;
  }
  .table-wrap .table tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 10px 12px;
    box-shadow: 0 14px 34px rgba(42, 31, 68, .06);
  }
  .table-wrap .table td {
    border: none;
    padding: 8px 0;
    min-height: 0;
  }
  .table-wrap .table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .table-wrap .table td.center::before,
  .table-wrap .table td[colspan]::before { display: none; }
  .question-card,
  .card,
  .hero,
  .premium-insight-card,
  .premium-chart-card,
  .premium-table-card,
  .quick-action-board {
    border-radius: 22px;
  }
  .hero-side-card {
    width: 100%;
  }
  .form-actions-sticky {
    position: sticky;
    bottom: 12px;
    z-index: 8;
    padding: 14px;
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(40, 24, 72, .14);
  }
}
html[data-theme="dark"] .page-head-note {
  background: rgba(246, 196, 83, .12);
  color: #f6d489;
}
html[data-theme="dark"] .template-badge {
  background: rgba(246, 196, 83, .12);
  color: #f6d489;
}
html[data-theme="dark"] .topbar-brand-mini {
  background: linear-gradient(135deg, rgba(73,49,15,.95), rgba(128,89,12,.7));
  border-color: rgba(246,196,83,.24);
}
html[data-theme="dark"] .topbar-brand-mini span { color: #f6d489; }


/* === Soft readability refresh === */
:root {
  --bg: #f7f5fb;
  --bg-2: #f1eef8;
  --surface: #ffffff;
  --surface-2: #fbfaff;
  --surface-glass: rgba(255,255,255,.82);
  --line: #e5def2;
  --line-strong: #d6cbe8;
  --text: #2d2440;
  --text-soft: #6b6480;
  --text-xsoft: #998faf;
  --navy: #6a4ea4;
  --navy-2: #7a60b5;
  --navy-3: #8a70c2;
  --navy-4: #9b82cf;
  --cyan: #8b75db;
  --cyan-2: #7c67cf;
  --cyan-3: #aa93ec;
  --cyan-glow: rgba(124,103,207,.18);
  --sky: #b69ef0;
  --sky-soft: #f2edff;
  --amber: #e8bf67;
  --amber-soft: #fff7e6;
  --shadow-xs: 0 1px 2px rgba(57,38,92,.05), 0 1px 3px rgba(57,38,92,.04);
  --shadow-sm: 0 8px 22px rgba(85,67,125,.08), 0 2px 6px rgba(85,67,125,.04);
  --shadow: 0 12px 32px rgba(85,67,125,.10), 0 3px 8px rgba(85,67,125,.05);
  --shadow-lg: 0 20px 50px rgba(85,67,125,.12), 0 6px 18px rgba(85,67,125,.07);
}
body {
  background-image:
    radial-gradient(ellipse 80% 40% at 20% -5%, rgba(171,144,233,.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 100% 5%, rgba(234,211,146,.10) 0%, transparent 55%),
    linear-gradient(180deg, #faf7fd 0%, #f3eff8 100%);
}
.sidebar {
  background-image:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(255,255,255,.14) 0%, transparent 60%),
    linear-gradient(180deg, #7b61b5 0%, #6b50a5 58%, #5a428f 100%);
  color: #f3ecff;
}
.brand-sub, .user-role { color: rgba(243,236,255,.72); }
.user-panel { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); }
.app-topbar {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(219,211,238,.9);
  backdrop-filter: blur(16px);
}
.hero {
  background: linear-gradient(135deg, #faf5ff 0%, #f4efff 46%, #fff7ec 100%);
  border: 1px solid #e7ddf5;
}
.hero-eyebrow, .topbar-kicker { color: #7e67b7; }
.hero-text, .insight-note, .quick-action-head p, .auth-section-head p, .stat-hint { color: var(--text-soft); }
.card, .premium-stat, .table-wrap, .quick-action-board {
  border-color: #e8dff4;
  box-shadow: 0 14px 36px rgba(96,74,141,.08);
}
.quick-action-card {
  background: linear-gradient(180deg, #ffffff 0%, #fcfaff 100%);
  border: 1px solid #ebe2f7;
}
.login-shell {
  background: linear-gradient(135deg, rgba(250,247,253,.96), rgba(245,239,249,.94));
}
.login-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(252,248,255,.94) 100%);
}
.auth-card-revamp {
  background: rgba(255,255,255,.9);
  border-color: #ebe2f7;
}
.theme-toggle, .topbar-chip, .sidebar-toggle { background: #fff; border-color: #e6ddf3; color: #5c4a85; }
.table thead th {
  background: linear-gradient(180deg, #faf7ff 0%, #f2ebfb 100%);
  color: #5a4b78;
}
@media (max-width: 860px) {
  .hero-content p,
  .quick-action-head p,
  .stat-hint,
  .insight-note,
  .auth-logo-wrap .muted,
  .auth-section-head p,
  .login-feature-grid,
  .brand-hero .hero-pills {
    display: none !important;
  }
}
html[data-theme="dark"] {
  --bg: #1c1726;
  --bg-2: #241d31;
  --surface: #241d31;
  --surface-2: #2b233a;
  --line: #3a314d;
  --line-strong: #4a3d61;
  --text: #f3eefc;
  --text-soft: #c2b8d7;
  --text-xsoft: #978cad;
  --navy: #241b34;
  --navy-2: #2d2141;
  --navy-3: #392a52;
  --navy-4: #473465;
  --cyan: #b598ff;
  --cyan-2: #a88bf4;
  --cyan-3: #d6c4ff;
  --sky: #e2bc73;
}
html[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 80% 40% at 20% -5%, rgba(141,111,214,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 100% 5%, rgba(226,188,115,.10) 0%, transparent 55%),
    linear-gradient(180deg, #191521 0%, #16111d 100%);
}
html[data-theme="dark"] .sidebar {
  background-image:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(255,255,255,.07) 0%, transparent 60%),
    linear-gradient(180deg, #34264a 0%, #2b203d 58%, #21182f 100%);
}
html[data-theme="dark"] .app-topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .premium-stat,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .auth-card-revamp,
html[data-theme="dark"] .quick-action-board,
html[data-theme="dark"] .quick-action-card,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .topbar-chip,
html[data-theme="dark"] .sidebar-toggle {
  background: #241d31;
  border-color: #3d3151;
}
html[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #2a203a 0%, #322644 48%, #42304d 100%);
  border-color: #433557;
}
html[data-theme="dark"] .table thead th {
  background: linear-gradient(180deg, #2d2340 0%, #261d35 100%);
  color: #e8dcff;
}


/* ===== Unified tone for evaluation / reports / students ===== */
.page-head-unified{align-items:flex-start;margin-bottom:16px}
.page-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--sky-soft);border:1px solid rgba(77,168,255,.22);color:var(--navy-3);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.page-intro-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px;padding:16px 18px;border-radius:20px;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);border:1px solid #d7e5f0;box-shadow:var(--shadow-sm)}
.intro-block{display:flex;flex-direction:column;gap:6px;padding:6px 2px}
.intro-label{font-size:12px;font-weight:700;color:var(--text-soft)}
.intro-block strong{font-size:16px;color:var(--text);line-height:1.45}
.unified-card{border:1px solid #d7e5f0;box-shadow:0 10px 26px rgba(10,31,53,.06),0 2px 8px rgba(10,31,53,.03);background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)}
.form-card,.list-card,.template-card,.report-table,.question-card,.note-card,.impact-box{border-radius:22px}
.filters-unified{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px;padding:0}
.filters-unified select,.filters-unified input{min-width:180px;background:#fff}
.students-intro-card{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-unified{margin-top:0}
.template-card{position:relative;overflow:hidden}
.template-card::after{content:'';position:absolute;inset:auto -60px -70px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(77,168,255,.12),transparent 65%);pointer-events:none}
.template-card h3{margin:8px 0 8px;font-size:20px}
.page-head-note{display:inline-flex;margin-top:10px;padding:8px 12px;border-radius:12px;background:#eef7ff;border:1px solid #d2e8ff;color:#315a84;font-size:13px;font-weight:600}
.hero-form-unified{background:linear-gradient(135deg,#edf7ff 0%,#e9f2ff 48%,#f6fbff 100%);color:var(--text);border:1px solid #d7e5f0;box-shadow:var(--shadow-sm)}
.hero-form-unified::before,.hero-form-unified::after{opacity:.55}
.hero-form-unified .hero-eyebrow{background:rgba(77,168,255,.12);color:#315a84;border-color:rgba(77,168,255,.22)}
.hero-form-unified .hero-text{color:var(--text-soft)}
.hero-form-unified .pill{background:#fff;border:1px solid #d7e5f0;color:var(--text)}
.hero-form-unified .pill-soft{background:#f4f9ff;color:#456b92}
.hero-form-unified .hero-side-card{background:rgba(255,255,255,.92);border:1px solid #d7e5f0;color:var(--text);box-shadow:none}
.hero-form-unified .hero-side-label,.hero-form-unified .progress-text{color:var(--text)}
.hero-form-unified .hero-side-caption{color:var(--text-soft)}
.route-evaluate .question-list{display:grid;gap:16px}
.route-evaluate .question-card{padding:20px 22px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.route-evaluate .question-top{align-items:center;margin-bottom:12px}
.route-evaluate .question-number{background:#eef7ff;color:#285887;border:1px solid #cfe4fb}
.route-evaluate .question-domain{background:#f4f8fc;color:#53708d;border:1px solid #d8e4ef}
.route-evaluate .question-text{font-size:18px;line-height:1.65;color:var(--text);margin-bottom:14px}
.route-evaluate .choice-grid{gap:12px}
.route-evaluate .choice-pill{background:#fff;border:1.5px solid #d9e6f2;box-shadow:none}
.route-evaluate .choice-pill:hover{border-color:#8bc0f3;background:#f6fbff}
.route-evaluate .choice-pill:has(input:checked){background:#eef7ff;border-color:#66a9ea;box-shadow:0 0 0 3px rgba(77,168,255,.10)}
.route-reports .report-table tbody tr:nth-child(odd),.route-students .table tbody tr:nth-child(odd),.route-evaluate_select .table tbody tr:nth-child(odd){background:#fbfdff}
.route-reports .table th,.route-students .table th,.route-evaluate_select .table th{background:#f5f9fd;color:#486582;border-bottom-color:#d8e4ef}
.route-reports .table td,.route-students .table td,.route-evaluate_select .table td{vertical-align:middle}
.route-students .list-card .actions .btn,.route-reports .actions .btn,.route-evaluate_select .btn{min-height:42px}
.route-students .card-head h2,.route-reports .page-head h1,.route-evaluate_select .page-head h1,.route-evaluate .hero h1{letter-spacing:-.02em}
[data-theme="dark"] .page-kicker{background:rgba(68,129,196,.18);border-color:rgba(120,173,231,.2);color:#d7ebff}
[data-theme="dark"] .page-intro-card,[data-theme="dark"] .unified-card,[data-theme="dark"] .hero-form-unified .hero-side-card{background:linear-gradient(180deg,#172535 0%,#152130 100%);border-color:rgba(143,170,197,.18);box-shadow:none}
[data-theme="dark"] .intro-label,[data-theme="dark"] .page-head-note,[data-theme="dark"] .hero-form-unified .hero-side-caption{color:#aac1d8}
[data-theme="dark"] .intro-block strong,[data-theme="dark"] .hero-form-unified,[data-theme="dark"] .hero-form-unified .hero-side-label,[data-theme="dark"] .hero-form-unified .progress-text,[data-theme="dark"] .route-evaluate .question-text{color:#eff7ff}
[data-theme="dark"] .hero-form-unified{background:linear-gradient(135deg,#132131 0%,#18283a 52%,#142233 100%);border-color:rgba(143,170,197,.18)}
[data-theme="dark"] .hero-form-unified .pill,[data-theme="dark"] .route-evaluate .choice-pill{background:#1b2a3a;border-color:rgba(143,170,197,.2);color:#eff7ff}
[data-theme="dark"] .route-evaluate .choice-pill:hover,[data-theme="dark"] .route-evaluate .choice-pill:has(input:checked){background:#203246;border-color:#69aef0}
[data-theme="dark"] .route-reports .table th,[data-theme="dark"] .route-students .table th,[data-theme="dark"] .route-evaluate_select .table th{background:#1a2a3b;color:#dcecff;border-bottom-color:rgba(143,170,197,.2)}
[data-theme="dark"] .route-reports .report-table tbody tr:nth-child(odd),[data-theme="dark"] .route-students .table tbody tr:nth-child(odd),[data-theme="dark"] .route-evaluate_select .table tbody tr:nth-child(odd){background:rgba(255,255,255,.015)}
@media (max-width: 980px){.page-intro-card,.students-intro-card{grid-template-columns:1fr}.filters-unified{display:grid;grid-template-columns:1fr 1fr}.filters-unified .btn{width:100%}.route-evaluate .question-text{font-size:16px}}
@media (max-width: 640px){.filters-unified{grid-template-columns:1fr}.page-head-note{display:flex}.page-kicker{font-size:10px}.template-card h3{font-size:18px}}



/* ===== Final Production Deploy – SaaS Polish ===== */
:root{
  --saas-bg:#f6f8fc;
  --saas-card:#ffffff;
  --saas-border:#d9e3f0;
  --saas-text:#182230;
  --saas-muted:#607086;
  --saas-primary:#7c3aed;
  --saas-primary-2:#8b5cf6;
  --saas-primary-soft:#f3e8ff;
  --saas-sky:#eef6ff;
}

body{
  color:var(--saas-text);
  background-color:var(--saas-bg);
  font-size:14px;
  line-height:1.6;
}

.app-shell{gap:22px}
.sidebar{
  background-image:
    radial-gradient(ellipse 120% 60% at 20% 0%, rgba(255,255,255,.14) 0%, transparent 55%),
    linear-gradient(180deg,#7b56d8 0%,#6f4fcb 46%,#5f42b8 100%);
}
.sidebar .school-meta p,
.sidebar .menu-label,
.sidebar .footer-copy{color:rgba(255,255,255,.8)}
.sidebar .nav-link{
  min-height:48px;
  border-radius:16px;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.is-active{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.18);
}
.app-topbar,.card,.table-wrap,.hero-side-card,.quick-action-board,.quick-action-card,.auth-card-revamp{
  background:var(--saas-card);
  border:1px solid var(--saas-border);
  box-shadow:0 12px 34px rgba(15,23,42,.06),0 2px 10px rgba(15,23,42,.04);
}
.page-title,
.hero h1,
.route-students .card-head h2,
.route-reports .page-head h1,
.route-evaluate_select .page-head h1{
  font-size:clamp(22px,2vw,30px);
  line-height:1.2;
  letter-spacing:-.02em;
  color:#1b2340;
}
.hero-form-unified{
  background:linear-gradient(135deg,#f4f9ff 0%,#eff5ff 48%,#faf7ff 100%);
}
.hero-form-unified .hero-eyebrow{
  background:#edf4ff;
  border-color:#d5e5fb;
  color:#44658a;
  font-size:11px;
}
.hero-form-unified .hero-text{font-size:15px;color:var(--saas-muted)}
.hero-form-unified .pill{
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}
.hero-form-unified .pill-soft{
  background:#f7f9fc;
  color:#50647f;
}
.hero-form-unified .hero-side-card.compact{
  border-radius:20px;
  padding:18px 18px;
}
.hero-form-unified .hero-side-label{
  font-size:13px;
  color:#435673;
  font-weight:800;
}
.hero-form-unified .progress-text{
  font-size:28px;
  line-height:1.1;
  letter-spacing:-.03em;
  color:#1d2640;
  margin-bottom:10px;
}
.hero-form-unified .progress-track{
  height:8px;
  border-radius:999px;
  background:#e8eef7;
}
.hero-form-unified .progress-track span{
  background:linear-gradient(90deg,var(--saas-primary),var(--saas-primary-2));
  border-radius:999px;
}
.hero-form-unified .hero-side-caption{
  margin-top:10px;
  font-size:12px;
  color:#67778f;
}
.form-meta-card label,.impact-box label,.note-card label{
  font-size:12px;
  font-weight:800;
  color:#53657b;
}
.form-meta-card input,.impact-box select,.note-card textarea,
.filters-unified select,.filters-unified input{
  min-height:48px;
  border-radius:14px;
  border:1px solid var(--saas-border);
  background:#fff;
  color:var(--saas-text);
}
.note-card textarea{min-height:112px;padding-top:14px}
.route-evaluate .question-list{gap:14px}
.route-evaluate .question-card{
  padding:18px 20px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
  border:1px solid var(--saas-border);
  box-shadow:0 10px 26px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.03);
}
.route-evaluate .question-top{margin-bottom:10px}
.route-evaluate .question-number,
.route-evaluate .question-domain{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.route-evaluate .question-text{
  font-size:16px;
  line-height:1.55;
  color:#20283c;
  margin-bottom:12px;
}
.route-evaluate .choice-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.route-evaluate .choice-pill{
  min-height:58px;
  padding:0 12px;
  border-radius:14px;
  border:1.5px solid #dbe5f0;
  background:#fbfcfe;
  transition:all .18s ease;
}
.route-evaluate .choice-pill span{
  font-size:14px;
  font-weight:700;
  color:#27324a;
}
.route-evaluate .choice-pill:hover{
  transform:translateY(-1px);
  border-color:#b794f4;
  background:#faf5ff;
}
.route-evaluate .choice-pill:has(input:checked){
  background:linear-gradient(135deg,#7c3aed 0%,#9b7bf7 100%);
  border-color:#7c3aed;
  box-shadow:0 10px 22px rgba(124,58,237,.22);
}
.route-evaluate .choice-pill:has(input:checked) span{color:#fff}
.question-card.is-incomplete{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 4px rgba(239,68,68,.10),0 8px 22px rgba(15,23,42,.05);
}
.premium-impact .card-head{margin-bottom:12px}
.section-chip{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#eef6ff;
  color:#476687;
  border:1px solid #d3e4f8;
  font-size:12px;
  font-weight:800;
}
.form-actions-sticky{
  position:sticky;
  bottom:14px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid #d6e0ec;
  background:linear-gradient(90deg,#14273c 0%,#17314b 100%);
  box-shadow:0 18px 40px rgba(15,23,42,.18);
}
.form-actions-note{
  color:#d7e5f7;
  font-size:13px;
  line-height:1.5;
}
.btn{
  border-radius:14px;
  font-weight:800;
}
.btn-lg{
  min-height:50px;
  padding:0 20px;
  font-size:14px;
}
.btn-primary{
  background:linear-gradient(135deg,var(--saas-primary) 0%,#a57cf8 100%);
  border:none;
  box-shadow:0 10px 22px rgba(124,58,237,.22);
}
.btn-primary:hover{filter:brightness(.98);transform:translateY(-1px)}
.route-dashboard .premium-stat,
.route-reports .premium-stat{
  border-radius:20px;
}
.route-dashboard .premium-stat h3,
.route-reports .premium-stat h3{
  font-size:14px;
  color:#5f6e85;
}
.route-dashboard .premium-stat strong,
.route-reports .premium-stat strong{
  font-size:28px;
  letter-spacing:-.03em;
  color:#1b2340;
}
.route-dashboard .quick-action-card{
  border-radius:18px;
}
.route-dashboard .quick-action-card h3{
  font-size:16px;
}
.table th{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.table td{
  font-size:14px;
  color:#263043;
}
.report-table{
  border:1px solid var(--saas-border);
}
.report-table tbody tr:hover{
  background:#fbfcff;
}
.pdf-report-header,
.pdf-school-block{
  color:#1f2b40;
}
.auth-panel-hero{
  background:
    linear-gradient(180deg,rgba(22,29,58,.56),rgba(44,28,78,.72)),
    url('../img/school-hero.svg') center/cover no-repeat;
}
.auth-card-revamp h1{
  font-size:30px;
  line-height:1.18;
}
.auth-card-revamp .auth-subtitle{
  color:#5f6e85;
}
.theme-toggle,.topbar-chip,.sidebar-toggle{
  min-height:44px;
  border-radius:999px;
  font-weight:800;
}
html[data-theme="dark"] body{
  background-image:
    radial-gradient(ellipse 90% 44% at 18% -5%, rgba(141,111,214,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 100% 4%, rgba(226,188,115,.10) 0%, transparent 55%),
    linear-gradient(180deg,#181522 0%,#140f1b 100%);
}
html[data-theme="dark"] .app-topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .hero-side-card,
html[data-theme="dark"] .quick-action-card,
html[data-theme="dark"] .auth-card-revamp,
html[data-theme="dark"] .form-actions-sticky{
  background:#20192b;
  border-color:#3a3050;
  box-shadow:none;
}
html[data-theme="dark"] .hero-form-unified{
  background:linear-gradient(135deg,#1f1c2b 0%,#1a2134 48%,#1e1a2c 100%);
  border-color:#3a3050;
}
html[data-theme="dark"] .hero-form-unified .hero-text,
html[data-theme="dark"] .hero-form-unified .hero-side-caption,
html[data-theme="dark"] .form-meta-card label,
html[data-theme="dark"] .impact-box label,
html[data-theme="dark"] .note-card label{
  color:#b5c2d3;
}
html[data-theme="dark"] .hero-form-unified .progress-text,
html[data-theme="dark"] .route-evaluate .question-text,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .hero h1{
  color:#f5f7fb;
}
html[data-theme="dark"] .route-evaluate .question-card,
html[data-theme="dark"] .route-evaluate .choice-pill,
html[data-theme="dark"] .form-meta-card input,
html[data-theme="dark"] .impact-box select,
html[data-theme="dark"] .note-card textarea{
  background:#191522;
  border-color:#3a3050;
  color:#eef2f8;
}
html[data-theme="dark"] .route-evaluate .choice-pill:hover{
  background:#241c31;
  border-color:#8d72dd;
}
html[data-theme="dark"] .route-evaluate .choice-pill span{color:#e7ebf2}
html[data-theme="dark"] .route-evaluate .choice-pill:has(input:checked){
  background:linear-gradient(135deg,#7c3aed 0%,#9b7bf7 100%);
}
html[data-theme="dark"] .form-actions-note{color:#dfe6f4}
@media (max-width: 980px){
  .route-evaluate .choice-grid{grid-template-columns:1fr}
  .hero-form-unified .progress-text{font-size:24px}
  .form-actions-sticky{flex-direction:column;align-items:stretch}
  .btn-lg{width:100%}
}
@media (max-width: 640px){
  .page-title,.hero h1{font-size:24px}
  .route-evaluate .question-card{padding:16px}
  .route-evaluate .question-text{font-size:15px}
  .form-actions-sticky{bottom:10px;padding:12px 12px}
  .theme-toggle,.topbar-chip{min-height:40px}
}

/* ===== MOBILE COMPACT UX ===== */
.answer-group{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:6px;
}

.answer-option{
  padding:7px 10px;
  font-size:12.5px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.question-card{
  padding:10px;
  margin-bottom:10px;
}

.question-title{
  font-size:13.5px;
}

@media (max-width:768px){
  .answer-group{
    grid-template-columns: repeat(3,1fr);
  }
}


/* ==== MOBILE APP LEVEL UX ==== */
:root{
  --mobile-choice-height: 44px;
  --mobile-choice-radius: 14px;
}
.route-evaluate .question-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.route-evaluate .question-card{
  scroll-margin-top: 86px;
}
.route-evaluate .question-top{
  margin-bottom:10px;
}
.route-evaluate .question-text{
  font-size:16px;
  line-height:1.5;
  margin-bottom:12px;
  color:#1e293b;
}
.route-evaluate .choice-grid,
.answer-group{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.route-evaluate .choice-pill,
.answer-option{
  min-height:var(--mobile-choice-height);
  padding:0;
  border-radius:var(--mobile-choice-radius);
  border:1px solid #d8def1;
  background:#ffffff;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.route-evaluate .choice-pill span,
.answer-option{
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
}
.route-evaluate .choice-pill span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:var(--mobile-choice-height);
  padding:8px 10px;
  color:#334155;
}
.route-evaluate .choice-pill:hover,
.route-evaluate .choice-pill:focus-within,
.answer-option:hover{
  transform:translateY(-1px);
  border-color:#9b87f5;
  box-shadow:0 6px 16px rgba(124,58,237,.12);
}
.route-evaluate .choice-pill:has(input:checked){
  border-color:#7c3aed;
  background:linear-gradient(135deg,#7c3aed 0%,#9a7bf7 100%);
  box-shadow:0 10px 22px rgba(124,58,237,.22);
}
.route-evaluate .choice-pill:has(input:checked) span{color:#fff;}
.route-evaluate .choice-pill input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.route-evaluate .question-number,
.route-evaluate .question-domain{
  min-height:34px;
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
}
.route-evaluate .form-actions-sticky{
  gap:10px;
  padding:10px 12px;
  border-radius:18px;
  box-shadow:0 18px 35px rgba(15,23,42,.12);
}
.route-evaluate .form-actions-note{
  font-size:12px;
  line-height:1.45;
}
.route-evaluate .btn-lg{
  min-height:46px;
  padding:12px 16px;
  font-size:15px;
  border-radius:14px;
}
.route-evaluate .progress-track{
  height:8px;
}
.route-evaluate .hero-side-card.compact{
  min-width:220px;
}
.route-evaluate .question-card.is-next-target{
  border-color:#8b5cf6;
  box-shadow:0 0 0 4px rgba(139,92,246,.10), 0 16px 30px rgba(15,23,42,.06);
}
@media (max-width: 768px){
  :root{ --mobile-choice-height: 42px; }
  .route-evaluate .hero-unified{
    padding:16px;
    gap:14px;
  }
  .route-evaluate .hero h1,
  .page-title{font-size:20px;}
  .route-evaluate .hero-text{font-size:13px;}
  .route-evaluate .hero-pills{
    gap:6px;
  }
  .route-evaluate .pill{
    padding:7px 10px;
    font-size:11px;
  }
  .route-evaluate .form-card,
  .route-evaluate .note-card,
  .route-evaluate .impact-box,
  .route-evaluate .question-card{
    padding:14px;
    border-radius:18px;
  }
  .route-evaluate .question-top{
    gap:8px;
  }
  .route-evaluate .question-text{
    font-size:15px;
    margin-bottom:10px;
  }
  .route-evaluate .choice-grid,
  .answer-group{
    gap:6px;
  }
  .route-evaluate .choice-pill span,
  .answer-option{
    font-size:12px;
  }
  .route-evaluate .form-actions-sticky{
    position:sticky;
    bottom:8px;
    padding:10px;
    border-radius:16px;
  }
  .route-evaluate .form-actions-note{
    font-size:11px;
  }
  .route-evaluate .btn-lg{
    min-height:44px;
    padding:11px 14px;
    font-size:14px;
  }
}
@media (max-width: 420px){
  :root{ --mobile-choice-height: 40px; }
  .route-evaluate .question-number,
  .route-evaluate .question-domain{
    min-height:30px;
    padding:5px 10px;
    font-size:11px;
  }
  .route-evaluate .choice-pill span,
  .answer-option{
    font-size:11.5px;
    padding:6px 8px;
  }
  .route-evaluate .question-text{
    font-size:14px;
  }
}

/* Superadmin clear action + report export polish */
.btn.danger-soft{border-color:#fecaca;color:#b91c1c;background:#fff5f5}
.btn.danger-soft:hover{background:#fee2e2;color:#991b1b}
@media(max-width:768px){.page-head .actions form{width:100%}.page-head .actions .danger-soft{width:100%;justify-content:center}}

/* Classroom import form polish */
.import-card{max-width:1120px}
.import-form .field-note{margin:.45rem 0 0;color:#6b5b86;font-size:.86rem}
.import-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.import-grid select,.import-grid input[type="text"]{min-height:42px}
@media(max-width:900px){.import-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.import-grid{grid-template-columns:1fr}.import-card{padding:16px}.import-form .btn{width:100%;min-height:42px}}

/* Final admin/student workflow polish */
.user-admin-grid{align-items:start}
.field-note{font-size:.86rem;color:#6b5b86;margin:.4rem 0 0}
.room-delete-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 16px;padding:14px 16px;border:1px solid #fecaca;background:#fff7f7;border-radius:16px}
.room-delete-panel strong{display:block;color:#991b1b;font-weight:800}
.room-delete-panel span{display:block;color:#7f1d1d;font-size:.88rem;margin-top:2px}
.student-inline-name{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.student-inline-name strong{color:#1f2937;font-weight:800}
.student-inline-name span{color:#475569;font-weight:600}
@media(max-width:720px){.room-delete-panel{flex-direction:column;align-items:stretch}.room-delete-panel .btn{width:100%}.user-admin-grid{grid-template-columns:1fr!important}.student-inline-name strong{font-size:.9rem}.student-inline-name span{font-size:.9rem}}


/* Footer reposition: developer credit belongs to the page footer, not the sidebar */
.side-footer{
  display:none !important;
}

.app-footer{
  margin-top: 28px;
  padding: 16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-top:1px solid rgba(124,58,237,.14);
  color:#7b6a99;
  font-size:12.5px;
  line-height:1.5;
}

.app-footer-school{
  color:#9a8ab8;
  text-align:right;
}

@media(max-width:768px){
  .app-footer{
    margin-top:18px;
    padding:14px 4px 78px;
    flex-direction:column;
    align-items:flex-start;
    font-size:12px;
  }
  .app-footer-school{
    text-align:left;
  }
}

html[data-theme="dark"] .app-footer{
  border-top-color:rgba(255,255,255,.1);
  color:rgba(255,255,255,.68);
}

html[data-theme="dark"] .app-footer-school{
  color:rgba(255,255,255,.48);
}


/* Final footer + topbar polish */
.with-sidebar .main-inner{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar-kicker{
  color:#7c3aed;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.topbar-title{
  color:#1f2937;
  font-weight:900;
}

.app-footer{
  margin-top:auto !important;
  padding:18px 8px 22px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  gap:6px !important;
  border-top:1px solid rgba(124,58,237,.14) !important;
  color:#6f5b90 !important;
  text-align:center !important;
  font-size:12.5px !important;
  line-height:1.55 !important;
}

.app-footer-main{
  font-weight:800;
  color:#5b3aa4;
}

.app-footer-main span{
  color:#b8a6d9;
  margin:0 6px;
}

.app-footer-credit{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 10px;
  color:#8a7aa6;
}

.app-footer-credit span + span::before{
  content:'·';
  margin-right:10px;
  color:#c7b8e4;
}

.app-footer-school{display:none!important;}

@media(max-width:768px){
  .app-footer{
    padding:14px 8px 84px !important;
    font-size:12px !important;
  }
  .app-footer-credit{
    flex-direction:column;
    gap:2px;
  }
  .app-footer-credit span + span::before{
    content:'';
    margin:0;
  }
}

html[data-theme="dark"] .topbar-title{color:#fff;}
html[data-theme="dark"] .topbar-kicker{color:#c4b5fd;}
html[data-theme="dark"] .app-footer{
  border-top-color:rgba(255,255,255,.1)!important;
  color:rgba(255,255,255,.68)!important;
}
html[data-theme="dark"] .app-footer-main{color:#ddd6fe;}
html[data-theme="dark"] .app-footer-credit{color:rgba(255,255,255,.56);}


/* ============================================================
   Readability Theme + Bulk Student Update
   ============================================================ */
:root{
  --bg:#f7f8fc;
  --bg-2:#eef2f8;
  --surface:#ffffff;
  --surface-2:#f9fafc;
  --line:#d9e1ee;
  --line-strong:#c8d3e4;
  --text:#172033;
  --text-soft:#53627a;
  --text-xsoft:#7b8aa2;
  --primary:#6d4aff;
  --primary-2:#5936d8;
  --primary-soft:#f0ebff;
  --navy:#3f2ca5;
  --navy-2:#4c35bd;
  --cyan:#6d4aff;
  --cyan-2:#5936d8;
  --sky:#8b72ff;
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 6px 18px rgba(15,23,42,.07);
  --shadow:0 14px 36px rgba(15,23,42,.09);
}

body{
  color:#172033!important;
  background:#f7f8fc!important;
  background-image:radial-gradient(circle at 10% -10%, rgba(109,74,255,.10), transparent 34%),radial-gradient(circle at 100% 0%, rgba(80,130,255,.08), transparent 30%),linear-gradient(180deg,#fbfcff 0%,#f4f6fb 100%)!important;
  font-size:14px;
  line-height:1.65;
}

h1,h2,h3,.page-title,.topbar-title,.hero h1{
  color:#111827!important;
  letter-spacing:-.025em;
}

.muted,.field-note,.text-muted{
  color:#5f6f86!important;
}

.card,.unified-card,.list-card,.form-card,.import-card,.app-topbar,.login-panel,.report-paper,.question-card{
  background:#ffffff!important;
  border-color:#dbe3ef!important;
  color:#172033!important;
  box-shadow:0 14px 38px rgba(15,23,42,.075)!important;
}

input,select,textarea{
  color:#172033!important;
  background:#fff!important;
  border-color:#d8e0ed!important;
  box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
  font-weight:500;
}
input::placeholder,textarea::placeholder{color:#93a0b5!important;}
input:focus,select:focus,textarea:focus{
  border-color:#6d4aff!important;
  box-shadow:0 0 0 4px rgba(109,74,255,.13)!important;
}
label{color:#18233a!important;font-weight:700;}

.table th{
  color:#3f315f!important;
  background:#f3efff!important;
  border-bottom-color:#dcd3fb!important;
}
.table td{
  color:#1f2a3d!important;
  border-bottom-color:#e6ebf3!important;
}
.table tr:hover td{background:#faf8ff!important;}

.btn-primary,.login-switch.active{
  background:linear-gradient(135deg,#6438ea,#8a63ff)!important;
  color:#fff!important;
  box-shadow:0 12px 24px rgba(100,56,234,.22)!important;
}
.btn-outline,.theme-toggle,.topbar-chip{
  background:#fff!important;
  color:#382b5f!important;
  border-color:#d9d0f4!important;
}

.sidebar{
  background:linear-gradient(180deg,#6045d6 0%,#5638c3 48%,#472ea5 100%)!important;
  color:#fff!important;
}
.brand-title,.user-name,.nav-label{color:#fff!important;}
.brand-sub,.user-role,.user-scope,.nav-section-title{color:rgba(255,255,255,.72)!important;}
.nav-link{color:rgba(255,255,255,.86)!important;}
.nav-link:hover,.nav-link.active{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.18)!important;
}
.nav-icon{background:rgba(255,255,255,.13)!important;border-color:rgba(255,255,255,.14)!important;color:#fff!important;}
.user-panel{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.16)!important;}

.route-evaluate .choice-pill span,.answer-option{
  color:#1f2937!important;
  background:#f9fafc!important;
  border-color:#d7deea!important;
  font-weight:700;
}
.route-evaluate .choice-pill input:checked + span,.answer-option.active{
  color:#fff!important;
  background:linear-gradient(135deg,#6438ea,#8a63ff)!important;
  border-color:#6438ea!important;
}

.bulk-update-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0 16px;
  padding:14px 16px;
  border:1px solid #dcd3fb;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffff 0%,#f7f3ff 100%);
  box-shadow:0 10px 28px rgba(109,74,255,.08);
}
.bulk-update-main{display:flex;flex-direction:column;gap:2px;min-width:210px;}
.bulk-update-main strong{font-weight:800;color:#251a4a;}
.bulk-update-main span{font-size:12.5px;color:#6b5c8b;font-weight:600;}
.bulk-update-main span.is-warning{color:#b91c1c;}
.bulk-update-controls{display:grid;grid-template-columns:minmax(160px,1fr) minmax(140px,.8fr) auto;gap:10px;align-items:center;flex:1;}
.select-cell{width:48px;text-align:center!important;}
.check-mini{display:inline-grid!important;place-items:center;margin:0!important;cursor:pointer;}
.check-mini input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;}
.check-mini span{width:20px;height:20px;border-radius:7px;border:2px solid #c8c2df;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.08);position:relative;display:block;}
.check-mini input:checked + span{background:#6d4aff;border-color:#6d4aff;}
.check-mini input:checked + span::after{content:'✓';position:absolute;inset:-2px 0 0 0;color:#fff;font-size:14px;font-weight:900;line-height:20px;text-align:center;}
.check-mini input:indeterminate + span{background:#8b72ff;border-color:#8b72ff;}
.check-mini input:indeterminate + span::after{content:'–';position:absolute;inset:-4px 0 0 0;color:#fff;font-size:18px;font-weight:900;text-align:center;}

@media(max-width:900px){
  .bulk-update-panel{flex-direction:column;align-items:stretch;}
  .bulk-update-controls{grid-template-columns:1fr 1fr;}
  .bulk-update-controls .btn{grid-column:1/-1;width:100%;}
}
@media(max-width:640px){
  body{font-size:13.5px;}
  .bulk-update-controls{grid-template-columns:1fr;}
  .select-cell{width:38px;}
  .check-mini span{width:19px;height:19px;border-radius:6px;}
}

html[data-theme="dark"] body{background:#101624!important;color:#e5e7eb!important;}
html[data-theme="dark"] .card,html[data-theme="dark"] .unified-card,html[data-theme="dark"] .list-card,html[data-theme="dark"] .form-card,html[data-theme="dark"] .app-topbar,html[data-theme="dark"] .question-card{background:#182033!important;border-color:#2c3750!important;color:#e5e7eb!important;}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] .page-title,html[data-theme="dark"] .topbar-title{color:#fff!important;}
html[data-theme="dark"] .muted,html[data-theme="dark"] .field-note{color:#aeb9ca!important;}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#111827!important;color:#f3f4f6!important;border-color:#35415a!important;}
html[data-theme="dark"] .table th{background:#211a35!important;color:#ddd6fe!important;border-bottom-color:#3b3157!important;}
html[data-theme="dark"] .table td{color:#e5e7eb!important;border-bottom-color:#2b3548!important;}
html[data-theme="dark"] .bulk-update-panel{background:#171d2f!important;border-color:#3b3157!important;}
html[data-theme="dark"] .bulk-update-main strong{color:#fff!important;}
html[data-theme="dark"] .bulk-update-main span{color:#c7d2fe!important;}


/* ============================================================
   FINAL REBRAND 2026 — Purple Pink SaaS Theme
   Scope: whole system, home visit module, mobile readability
   ============================================================ */
:root{
  --bg:#fff7fd;
  --bg-2:#f7efff;
  --surface:#ffffff;
  --surface-2:#fff9fe;
  --surface-glass:rgba(255,255,255,.82);
  --line:#eadcf6;
  --line-strong:#d7c0f3;
  --text:#1f1630;
  --text-soft:#6d5c82;
  --text-xsoft:#9b8aaf;
  --brand-primary:#7c3aed;
  --brand-primary-2:#6d28d9;
  --brand-secondary:#ec4899;
  --brand-secondary-2:#db2777;
  --brand-gold:#f6c453;
  --brand-soft:#f3e8ff;
  --brand-pink-soft:#fce7f3;
  --navy:#34145d;
  --navy-2:#4c1d95;
  --cyan:#ec4899;
  --cyan-2:#7c3aed;
  --cyan-3:#f9a8d4;
  --sky:#a855f7;
  --sky-soft:#faf5ff;
  --amber:#f59e0b;
  --amber-soft:#fff7ed;
  --success:#10b981;
  --success-soft:#ecfdf5;
  --warning:#f59e0b;
  --warning-soft:#fffbeb;
  --danger:#ef4444;
  --danger-soft:#fef2f2;
  --shadow-xs:0 1px 3px rgba(76,29,149,.06),0 1px 2px rgba(236,72,153,.04);
  --shadow-sm:0 8px 22px rgba(76,29,149,.08),0 2px 8px rgba(236,72,153,.04);
  --shadow:0 16px 40px rgba(76,29,149,.10),0 4px 14px rgba(236,72,153,.05);
  --shadow-lg:0 28px 70px rgba(76,29,149,.16),0 10px 24px rgba(236,72,153,.08);
}
html,body{background:#fff7fd!important;color:var(--text)!important;font-size:14px;line-height:1.62;}
body{
  background-image:
    radial-gradient(circle at 12% -8%, rgba(236,72,153,.14) 0, transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(124,58,237,.14) 0, transparent 36%),
    linear-gradient(180deg,#fff8fd 0%,#f8f1ff 44%,#fff 100%)!important;
}
h1,h2,h3,.page-title,.card-head h2{color:#1f1630!important;letter-spacing:-.02em;}
.muted,.field-note,.auth-section-head p,.quick-action-head p,.hero-text{color:#6d5c82!important;}

/* Sidebar */
.sidebar{
  background:linear-gradient(180deg,#5b21b6 0%,#7c3aed 42%,#db2777 100%)!important;
  box-shadow:6px 0 42px rgba(76,29,149,.24)!important;
}
.sidebar::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 22% 10%,rgba(255,255,255,.22),transparent 32%),radial-gradient(circle at 100% 28%,rgba(252,231,243,.18),transparent 34%);pointer-events:none;}
.sidebar-inner{position:relative;z-index:1;}
.brand{border-bottom-color:rgba(255,255,255,.18)!important;}
.brand-mark,.topbar-brand-mini,.auth-logo,.login-badge{background:linear-gradient(135deg,#fff,#fce7f3)!important;border-color:rgba(255,255,255,.6)!important;box-shadow:0 12px 28px rgba(31,22,48,.16)!important;}
.brand-title,.user-name{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.12);}
.brand-sub,.user-role{color:rgba(255,255,255,.78)!important;}
.user-panel{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.22)!important;}
.user-avatar{background:linear-gradient(135deg,#f472b6,#c084fc)!important;box-shadow:0 8px 22px rgba(236,72,153,.28)!important;}
.user-scope{color:#fde68a!important;}
.nav-section-title{color:rgba(255,255,255,.6)!important;}
.nav-link{color:rgba(255,255,255,.82)!important;border-color:transparent!important;}
.nav-icon{background:rgba(255,255,255,.13)!important;border-color:rgba(255,255,255,.16)!important;color:#fff!important;}
.nav-link:hover{background:rgba(255,255,255,.16)!important;transform:translateX(3px);}
.nav-link.active{background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.26)!important;box-shadow:0 12px 26px rgba(31,22,48,.16)!important;}
.nav-link.active .nav-icon{background:#fff!important;color:#7c3aed!important;}
.nav-link.active::before{background:#f6c453!important;box-shadow:0 0 12px rgba(246,196,83,.62)!important;}

/* Topbar and footer */
.app-topbar{background:rgba(255,255,255,.86)!important;border:1px solid rgba(215,192,243,.82)!important;box-shadow:0 12px 32px rgba(76,29,149,.08)!important;}
.topbar-kicker,.hero-eyebrow{color:#db2777!important;}
.topbar-title{color:#2e174f!important;font-weight:800!important;}
.topbar-chip,.theme-toggle{background:#fff!important;border-color:#eadcf6!important;color:#4c1d95!important;}
.theme-toggle:hover,.topbar-chip:hover{border-color:#c4b5fd!important;background:#faf5ff!important;}
.app-footer{justify-content:center!important;align-items:center!important;text-align:center!important;flex-direction:column!important;border-top:1px solid rgba(215,192,243,.72)!important;color:#7c658f!important;background:linear-gradient(180deg,transparent,rgba(255,255,255,.56))!important;}
.app-footer-main{font-weight:800;color:#4c1d95;}
.app-footer-credit{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;color:#8f7aa6;}
.app-footer-credit span + span::before{content:'·';margin-right:10px;color:#d8b4fe;}

/* Cards, forms and tables */
.card,.unified-card,.list-card,.form-card,.premium-stat,.premium-table-card,.premium-chart-card,.premium-insight-card,.quick-action-board,.table-wrap,.auth-card,.auth-card-revamp,.import-card,.filter-card{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(234,220,246,.96)!important;
  border-radius:22px!important;
  box-shadow:0 14px 34px rgba(76,29,149,.08),0 4px 12px rgba(236,72,153,.035)!important;
}
.card:hover,.quick-action-card:hover{box-shadow:0 20px 46px rgba(76,29,149,.12),0 10px 22px rgba(236,72,153,.05)!important;}
input,select,textarea{background:#fff!important;border:1.4px solid #e8d9f6!important;color:#241632!important;border-radius:14px!important;box-shadow:0 2px 7px rgba(76,29,149,.04)!important;}
input:focus,select:focus,textarea:focus{border-color:#a855f7!important;box-shadow:0 0 0 4px rgba(168,85,247,.14)!important;}
label{color:#332047!important;font-weight:800!important;}
.btn{border-radius:13px!important;min-height:38px!important;padding:9px 15px!important;font-size:13.5px!important;font-weight:800!important;}
.btn-primary{background:linear-gradient(135deg,#7c3aed 0%,#ec4899 100%)!important;border:0!important;color:#fff!important;box-shadow:0 12px 28px rgba(124,58,237,.22)!important;}
.btn-primary:hover{box-shadow:0 18px 38px rgba(124,58,237,.28)!important;transform:translateY(-1px);}
.btn-outline{background:#fff!important;color:#5b21b6!important;border-color:#d8b4fe!important;}
.btn-outline:hover{background:#faf5ff!important;border-color:#a855f7!important;color:#7c3aed!important;}
.section-chip,.badge{border-radius:999px!important;font-weight:800!important;}
.section-chip{background:#fce7f3!important;color:#be185d!important;border:1px solid #fbcfe8!important;}
.table{font-size:13.25px!important;}
.table th{background:linear-gradient(180deg,#faf5ff,#fce7f3)!important;color:#4c1d95!important;border-bottom:1px solid #e9d5ff!important;font-weight:900!important;}
.table td{color:#2b2037!important;border-bottom-color:#f1e6fb!important;}
.table tbody tr:hover{background:#fff7fd!important;}

/* Hero / dashboard */
.hero{background:linear-gradient(135deg,#5b21b6 0%,#7c3aed 52%,#ec4899 100%)!important;border:0!important;color:#fff!important;box-shadow:0 22px 54px rgba(124,58,237,.22)!important;}
.hero::before{background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.24),transparent 34%)!important;}
.hero::after{background:radial-gradient(circle at 78% 0%,rgba(246,196,83,.18),transparent 36%)!important;}
.hero-content h1,.hero h1{color:#fff!important;font-size:clamp(25px,4vw,38px)!important;}
.hero-text{color:rgba(255,255,255,.84)!important;}
.pill{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important;}
.pill-soft{background:rgba(255,255,255,.12)!important;}
.hero-side-card{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important;}
.hero-side-label,.hero-side-caption{color:rgba(255,255,255,.74)!important;}
.quick-action-card{background:linear-gradient(180deg,#fff,#fff8fd)!important;border:1px solid #eadcf6!important;color:#27183a!important;}
.quick-action-icon{background:linear-gradient(135deg,#f3e8ff,#fce7f3)!important;color:#7c3aed!important;}
.quick-action-card strong{color:#2b1746!important;}
.quick-action-card small{display:block;margin-top:8px;color:#756389;font-size:12px;line-height:1.55;}
.quick-action-card.is-disabled{cursor:default;opacity:.96;}
.quick-action-homevisit{background:linear-gradient(135deg,#fff,#fff0f8)!important;}
.premium-stat .stat-label{color:#755e8f!important;}
.premium-stat .stat-value{background:linear-gradient(135deg,#7c3aed,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent!important;}

/* Login */
.login-shell{background:#fff7fd!important;}
.login-visual{background:linear-gradient(135deg,#4c1d95 0%,#7c3aed 48%,#ec4899 100%)!important;}
.login-visual::before{background:radial-gradient(circle at 24% 18%,rgba(255,255,255,.24),transparent 36%),radial-gradient(circle at 78% 82%,rgba(246,196,83,.18),transparent 34%)!important;}
.login-visual-overlay{background:linear-gradient(to top,rgba(31,22,48,.42),rgba(76,29,149,.06) 58%,transparent)!important;}
.login-kicker{color:#fce7f3!important;}
.login-visual h1{color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.18);}
.login-visual p{color:rgba(255,255,255,.86)!important;}
.login-switcher{background:#fdf2f8!important;border-color:#fbcfe8!important;}
.login-switch.active{background:linear-gradient(135deg,#7c3aed,#ec4899)!important;color:#fff!important;}
.auth-footer{color:#886f9f!important;text-align:center;}

/* Assessment / mobile app level */
.route-evaluate .assessment-hero,.assessment-hero{background:linear-gradient(135deg,#5b21b6,#ec4899)!important;color:#fff!important;}
.question-card{padding:12px!important;margin-bottom:10px!important;border-radius:18px!important;background:#fff!important;border:1px solid #eadcf6!important;box-shadow:0 8px 22px rgba(76,29,149,.055)!important;}
.question-title,.question-card h3{font-size:13.75px!important;line-height:1.5!important;color:#25183a!important;}
.choice-group,.answer-group{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;}
.choice-pill span,.answer-option{min-height:34px!important;padding:7px 8px!important;border-radius:11px!important;font-size:12.4px!important;font-weight:800!important;color:#312141!important;background:#fff!important;border:1px solid #e5d4f6!important;box-shadow:none!important;}
.choice-pill input:checked + span,.answer-option.active{color:#fff!important;background:linear-gradient(135deg,#7c3aed,#ec4899)!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(124,58,237,.20)!important;}
.submit-bar{background:rgba(255,255,255,.92)!important;border-color:#eadcf6!important;backdrop-filter:blur(18px)!important;}

/* Home visit */
.home-visit-hero{background:linear-gradient(135deg,#6d28d9,#db2777)!important;}
.home-visit-status-card .hero-side-value{font-size:34px!important;letter-spacing:-.03em;}
.home-visit-menu-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.home-visit-table-card .badge-warning{background:#fff7ed!important;color:#b45309!important;border:1px solid #fed7aa!important;}

/* CSV/import and bulk tools */
.import-card,.bulk-update-panel,.room-delete-panel{background:linear-gradient(135deg,#fff,#fff7fd)!important;border-color:#eadcf6!important;}
.bulk-update-main strong{color:#351a5a!important;}
.bulk-update-main span{color:#806597!important;}
.check-mini input:checked + span{background:linear-gradient(135deg,#7c3aed,#ec4899)!important;border-color:#7c3aed!important;}

@media(max-width:1100px){.home-visit-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:768px){
  .main{padding:16px 14px 28px!important;}
  .app-topbar{border-radius:18px!important;padding:10px 12px!important;}
  .topbar-title{font-size:14px!important;}
  .topbar-kicker{font-size:10.5px!important;}
  .hero{border-radius:22px!important;padding:20px!important;}
  .hero-content h1,.hero h1{font-size:24px!important;}
  .card,.quick-action-board,.table-wrap{border-radius:18px!important;}
  .home-visit-menu-grid,.quick-action-grid{grid-template-columns:1fr!important;}
  .cards.four,.cards.three{grid-template-columns:1fr!important;}
  .choice-group,.answer-group{gap:5px!important;}
  .choice-pill span,.answer-option{min-height:32px!important;font-size:12px!important;padding:6px 7px!important;}
}

/* Dark theme: purple-pink but readable */
html[data-theme="dark"] body{background:#12091f!important;color:#f5f3ff!important;background-image:radial-gradient(circle at 14% -8%,rgba(236,72,153,.18),transparent 34%),radial-gradient(circle at 96% 4%,rgba(124,58,237,.25),transparent 36%),linear-gradient(180deg,#12091f,#1a102a 54%,#0f0a18)!important;}
html[data-theme="dark"] .card,html[data-theme="dark"] .unified-card,html[data-theme="dark"] .list-card,html[data-theme="dark"] .form-card,html[data-theme="dark"] .premium-stat,html[data-theme="dark"] .premium-table-card,html[data-theme="dark"] .premium-chart-card,html[data-theme="dark"] .premium-insight-card,html[data-theme="dark"] .quick-action-board,html[data-theme="dark"] .table-wrap,html[data-theme="dark"] .app-topbar,html[data-theme="dark"] .auth-card,html[data-theme="dark"] .question-card{background:#20132f!important;border-color:#3c2558!important;color:#f5f3ff!important;}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] .topbar-title,html[data-theme="dark"] .card-head h2,html[data-theme="dark"] .question-title{color:#fff!important;}
html[data-theme="dark"] .muted,html[data-theme="dark"] .field-note,html[data-theme="dark"] .quick-action-card small{color:#cbbfe0!important;}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#140c20!important;border-color:#432c62!important;color:#fff!important;}
html[data-theme="dark"] .table th{background:#2a173f!important;color:#f5d0fe!important;border-bottom-color:#432c62!important;}
html[data-theme="dark"] .table td{color:#f3e8ff!important;border-bottom-color:#34224b!important;}
html[data-theme="dark"] .quick-action-card,html[data-theme="dark"] .import-card,html[data-theme="dark"] .bulk-update-panel,html[data-theme="dark"] .room-delete-panel{background:#20132f!important;border-color:#3c2558!important;}
html[data-theme="dark"] .quick-action-card strong,html[data-theme="dark"] .bulk-update-main strong{color:#fff!important;}
html[data-theme="dark"] .btn-outline,html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .topbar-chip{background:#1a102a!important;border-color:#432c62!important;color:#f5d0fe!important;}


/* ===== FIX: Restore school building image on login hero =====
   รอบ rebrand เดิมมี rule .login-visual background แบบ gradient !important
   ทำให้รูปโรงเรียนจาก --login-bg ถูกทับ จึงต้องประกาศ background-image ใหม่
   โดยใช้รูปโรงเรียนเป็น layer ด้านหลัง และ overlay สีม่วง-ชมพูด้านหน้า
*/
.login-visual{
  background-image:
    linear-gradient(135deg, rgba(76,29,149,.68) 0%, rgba(124,58,237,.48) 46%, rgba(236,72,153,.42) 100%),
    var(--login-bg, url('../img/school-hero.svg')) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}

.login-visual::before{
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.20), transparent 34%),
    radial-gradient(circle at 78% 82%, rgba(246,196,83,.14), transparent 32%) !important;
  pointer-events:none;
}

.login-visual-overlay{
  background: linear-gradient(to top, rgba(31,22,48,.58), rgba(76,29,149,.18) 58%, rgba(76,29,149,.08)) !important;
  pointer-events:none;
}

/* ทำให้ตัวหนังสือฝั่งภาพอ่านชัดขึ้นเมื่อมีรูปโรงเรียน */
.login-visual h1{
  text-shadow: 0 4px 22px rgba(0,0,0,.34) !important;
}

.login-visual p,
.login-kicker{
  text-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
}

/* ===== Sidebar module grouping: SDQ parent menu ===== */
.nav-group{
  margin:4px 0 2px;
  padding:5px;
  border-radius:22px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.11);
}
.nav-group.active{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 12px 30px rgba(31,22,48,.14);
}
.nav-group-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:8px 10px;
  border-radius:17px;
  color:#fff;
  user-select:none;
}
.nav-group-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  color:#7c3aed;
  background:linear-gradient(135deg,#fff,#fce7f3);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 18px rgba(31,22,48,.14);
}
.nav-group-label{
  flex:1;
  font-size:12.4px;
  font-weight:900;
  line-height:1.28;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.08);
}
.nav-group-caret{
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1;
  transform:translateY(-1px);
}
.nav-submenu{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:3px 0 2px 12px;
  margin-left:18px;
  border-left:1px solid rgba(255,255,255,.18);
}
.nav-submenu .nav-link{
  min-height:42px;
  padding:8px 10px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.06)!important;
}
.nav-submenu .nav-link:hover{
  background:rgba(255,255,255,.15)!important;
  transform:translateX(2px)!important;
}
.nav-submenu .nav-link.active{
  background:rgba(255,255,255,.23)!important;
  border-color:rgba(255,255,255,.26)!important;
}
.nav-submenu .nav-link.active::before{
  left:-12px!important;
  margin-left:0!important;
}
.nav-submenu .nav-icon{
  width:30px!important;
  height:30px!important;
  border-radius:11px!important;
  font-size:14px!important;
}
.nav-submenu .nav-label{
  font-size:12.8px!important;
  font-weight:800!important;
}
.nav-submenu .nav-arrow{
  opacity:.32;
}
@media(max-width:768px){
  .nav-group{border-radius:20px;padding:4px;}
  .nav-group-title{min-height:40px;padding:7px 9px;}
  .nav-group-icon{width:34px;height:34px;border-radius:12px;font-size:10.5px;}
  .nav-group-label{font-size:12px;}
  .nav-submenu{margin-left:15px;padding-left:10px;}
  .nav-submenu .nav-link{min-height:39px;padding:7px 9px!important;}
}

/* Assessment duplicate/edit notice */
.alert-warning{background:#fff7e6;border:1px solid #f4c66a;color:#7a4b00;border-radius:16px;padding:12px 14px;margin:12px 0;font-weight:600;}
.template-card.is-completed{border-color:#8b5cf6;background:linear-gradient(135deg,#fff,#faf5ff);}


/* SDQ graph report page */
.graph-page-head .actions{flex-wrap:wrap}.graph-filter-card{margin-bottom:18px}.graph-report-sheet{background:#fff;border:1px solid rgba(124,58,237,.16);border-radius:24px;padding:22px;box-shadow:0 18px 55px rgba(31,21,48,.08);margin-bottom:24px}.graph-report-title{background:linear-gradient(135deg,#6d28d9,#ec4899);color:#fff;border-radius:20px;padding:18px 22px;margin-bottom:18px}.graph-report-title h2{margin:0 0 6px;font-size:24px;line-height:1.25}.graph-report-title p{margin:0;color:rgba(255,255,255,.86)}.graph-card{background:#fff;border:1px solid #eadcff;border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(105,65,198,.06)}.graph-card-wide{margin-bottom:18px}.graph-card-title{font-weight:800;color:#2b1b45;margin-bottom:14px;font-size:17px}.sdq-stack-chart{height:340px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:end;border-left:1px solid #e6d9f8;border-bottom:1px solid #e6d9f8;padding:16px 18px 34px;background:linear-gradient(180deg,#fff,#fbf7ff);border-radius:16px}.sdq-stack-group{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}.sdq-stack-bars{height:245px;display:flex;align-items:flex-end;justify-content:center;gap:8px}.sdq-stack-bar{width:34px;border-radius:12px 12px 0 0;display:flex;align-items:flex-start;justify-content:center;font-weight:800;font-size:12px;color:#251635;padding-top:6px;min-height:14px;box-shadow:0 8px 18px rgba(31,21,48,.08)}.sdq-stack-bar.normal{background:linear-gradient(180deg,#86efac,#22c55e)}.sdq-stack-bar.risk{background:linear-gradient(180deg,#fde68a,#f59e0b)}.sdq-stack-bar.problem{background:linear-gradient(180deg,#fca5a5,#ef4444);color:#fff}.sdq-stack-label{text-align:center;font-weight:800;color:#463064;font-size:13px}.chart-legend{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:12px;color:#57436f;font-weight:700}.legend-dot{display:inline-flex;width:12px;height:12px;border-radius:999px;margin-right:6px;vertical-align:middle}.legend-dot.normal{background:#22c55e}.legend-dot.risk{background:#f59e0b}.legend-dot.problem{background:#ef4444}.legend-dot.social-strong{background:#6d28d9}.legend-dot.social-weak{background:#f9a8d4}.graph-grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.graph-data-table th,.graph-data-table td{text-align:center}.social-donut{width:190px;height:190px;border-radius:50%;margin:10px auto;background:conic-gradient(#6d28d9 calc(var(--strength)*1%),#f9a8d4 0);display:grid;place-items:center;box-shadow:0 16px 40px rgba(109,40,217,.18)}.social-donut>div{width:116px;height:116px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;box-shadow:inset 0 0 0 1px #eadcff}.social-donut strong{font-size:28px;color:#321b55}.social-donut span{display:block;color:#7a628f;font-size:12px}.social-summary{display:grid;gap:10px;margin-top:12px}.social-summary div{display:flex;justify-content:space-between;align-items:center;border:1px solid #eadcff;border-radius:12px;padding:10px 12px;color:#3b2a50}@media(max-width:900px){.graph-grid-2{grid-template-columns:1fr}.sdq-stack-chart{gap:8px;padding:12px 10px 30px}.sdq-stack-bar{width:24px;font-size:11px}.graph-report-sheet{padding:14px}.graph-report-title h2{font-size:20px}}@media(max-width:640px){.sdq-stack-chart{overflow-x:auto;grid-template-columns:repeat(5,110px)}.graph-page-head .actions .btn{width:100%}.graph-filter-card .filters{grid-template-columns:1fr}}
html[data-theme="dark"] .graph-report-sheet,html[data-theme="dark"] .graph-card{background:#15213a;border-color:rgba(255,255,255,.1)}html[data-theme="dark"] .graph-card-title,html[data-theme="dark"] .sdq-stack-label{color:#edf2ff}html[data-theme="dark"] .sdq-stack-chart{background:linear-gradient(180deg,#17223b,#121d33);border-color:rgba(255,255,255,.12)}html[data-theme="dark"] .social-donut>div{background:#15213a;color:#fff}html[data-theme="dark"] .social-summary div{border-color:rgba(255,255,255,.12);color:#e7efff}


/* Graph report signatures */
.graph-signature-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
  padding-top:18px;
}
.graph-signature-box{
  text-align:center;
  color:#3a2954;
  font-size:13px;
}
.graph-signature-line{
  border-top:1px solid #49345f;
  padding-top:9px;
  min-height:34px;
}
.graph-signature-name{
  margin-top:4px;
  color:#6d5a83;
  font-size:12px;
}
@media(max-width:900px){
  .graph-signature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;}
}
@media(max-width:560px){
  .graph-signature-grid{grid-template-columns:1fr;}
}
html[data-theme="dark"] .graph-signature-box{color:#edf2ff;}
html[data-theme="dark"] .graph-signature-name{color:rgba(255,255,255,.62);}

@media print{
  body, table, th, td, button, input, select, textarea{font-family:'Kanit',Tahoma,sans-serif !important;}
}


/* Export font/signature refinement */
.export-print,
.graph-report-sheet,
.graph-report-sheet *{
  font-family:'Kanit',Tahoma,sans-serif;
}

.graph-signature-grid{
  grid-template-columns:repeat(2,minmax(280px,1fr)) !important;
  gap:34px 42px !important;
  margin-top:34px !important;
  padding-top:22px !important;
  page-break-inside:avoid;
}

.graph-signature-box{
  min-height:104px;
  font-size:13.5px;
  line-height:1.65;
  page-break-inside:avoid;
}

.graph-signature-line{
  padding-top:12px !important;
  min-height:44px !important;
}

.graph-signature-name{
  margin-top:7px !important;
  font-size:13px !important;
  min-height:28px;
  white-space:normal;
  overflow-wrap:anywhere;
}

@media(max-width:640px){
  .graph-signature-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
}

@media print{
  html, body, table, th, td, div, span, strong, small, button, input, select, textarea{
    font-family:'Kanit',Tahoma,sans-serif !important;
  }

  .graph-signature-grid{
    grid-template-columns:repeat(2,minmax(280px,1fr)) !important;
    gap:32px 42px !important;
  }

  .graph-signature-box{
    min-height:104px !important;
  }
}


/* ===== Trait 5 Characteristics System ===== */
.route-trait5 .trait5-hero{
  background:
    radial-gradient(circle at 18% 20%, rgba(236,72,153,.16), transparent 30%),
    linear-gradient(135deg, rgba(124,58,237,.12), rgba(236,72,153,.08));
  border-color: rgba(124,58,237,.18);
}

.trait5-status-card .hero-side-value{
  color:#7c3aed;
}

.trait5-level-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.trait5-level-grid > div{
  border:1px solid rgba(124,58,237,.16);
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(252,231,243,.58));
  border-radius:16px;
  padding:14px;
  text-align:center;
}

.trait5-level-grid strong{
  display:block;
  font-size:22px;
  color:#7c3aed;
}

.trait5-level-grid span{
  color:#5b4c75;
  font-size:13px;
}

.trait5-student-box{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border:1px solid rgba(124,58,237,.18);
  background:#fbf7ff;
  border-radius:16px;
}

.trait5-student-box span{
  color:#6b5b86;
  font-size:13px;
}

.trait5-domain-list{
  display:grid;
  gap:12px;
}

.trait5-domain-card{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(360px,1.8fr);
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(124,58,237,.14);
  border-radius:18px;
  background:#fff;
}

.trait5-domain-card small{
  display:block;
  color:#7a6c91;
  margin-top:3px;
}

.trait5-score-options{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.trait5-score-chip{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:58px;
  border:1px solid rgba(124,58,237,.22);
  border-radius:14px;
  background:#fbfaff;
  cursor:pointer;
  transition:.18s ease;
}

.trait5-score-chip input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.trait5-score-chip span{
  font-weight:800;
  color:#7c3aed;
}

.trait5-score-chip small{
  font-size:11.5px;
  margin-top:2px;
  color:#6f5c8f;
}

.trait5-score-chip:hover,
.trait5-score-chip:has(input:checked),
.trait5-score-chip.checked{
  background:linear-gradient(135deg,#7c3aed,#ec4899);
  border-color:transparent;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(124,58,237,.22);
}

.trait5-score-chip:hover span,
.trait5-score-chip:hover small,
.trait5-score-chip:has(input:checked) span,
.trait5-score-chip:has(input:checked) small,
.trait5-score-chip.checked span,
.trait5-score-chip.checked small{
  color:#fff;
}

.trait5-table th,
.trait5-table td{
  font-size:13px;
}

@media(max-width:900px){
  .trait5-domain-card{
    grid-template-columns:1fr;
  }
  .trait5-level-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .trait5-score-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .trait5-score-chip{
    min-height:50px;
  }
  .trait5-level-grid{
    grid-template-columns:1fr;
  }
}


/* Trait 5 custom school characteristics */
.trait5-domain-card strong{
  letter-spacing:.01em;
}

.trait5-domain-card:nth-child(1) strong::before{content:"🛡️ ";}  /* เข้มแข็ง */
.trait5-domain-card:nth-child(2) strong::before{content:"⚡ ";}  /* รวดเร็ว */
.trait5-domain-card:nth-child(3) strong::before{content:"🎯 ";}  /* จริงจัง */
.trait5-domain-card:nth-child(4) strong::before{content:"📌 ";}  /* มีวินัย */
.trait5-domain-card:nth-child(5) strong::before{content:"🌟 ";}  /* ใฝ่คุณธรรม */


/* Formal readable theme safety overrides */
body.tw-app .sidebar{background:#312E81!important}
body.tw-app .btn-primary,
body.tw-app button[type="submit"]{background:#4F46E5!important;border-color:#4F46E5!important}
body.tw-app .answer-option.active,
body.tw-app .answer-option:has(input:checked){background:#4F46E5!important;color:#fff!important}
body.tw-app .hero,
body.tw-app .card,
body.tw-app .premium-table-card{background:#fff!important}


/* Pink purple readable theme safety overrides */
body.tw-app .sidebar{background:#4C1D95!important}
body.tw-app .btn-primary,
body.tw-app button[type="submit"]{background:#6D28D9!important;border-color:#6D28D9!important}
body.tw-app .answer-option.active,
body.tw-app .answer-option:has(input:checked){background:#6D28D9!important;color:#fff!important}
body.tw-app .hero,
body.tw-app .card,
body.tw-app .premium-table-card{background:#fff!important}


/* ==========================================================================
   Final Readability + Compact Assessment Override
   ========================================================================== */

/* Sidebar text readability */
.tw-app .sidebar{background:#4B168C !important;}
.tw-app .brand-title,
.tw-app .user-name,
.tw-app .nav-group-title,
.tw-app .nav a,
.tw-app .nav-link{
  color:#FFFFFF !important;
  opacity:1 !important;
  text-shadow:none !important;
}
.tw-app .brand-sub,
.tw-app .user-scope,
.tw-app .user-role{
  color:#F5EAFE !important;
  opacity:1 !important;
  font-weight:650 !important;
}
.tw-app .nav-section-title{
  color:#F9D8FF !important;
  opacity:1 !important;
  font-size:11.5px !important;
  font-weight:850 !important;
  letter-spacing:.06em !important;
}
.tw-app .nav a,
.tw-app .nav-link{
  font-size:13.5px !important;
  font-weight:850 !important;
  line-height:1.28 !important;
  min-height:38px !important;
  padding:8px 10px !important;
}
.tw-app .nav-submenu .nav-link{
  font-size:13px !important;
  font-weight:800 !important;
  min-height:34px !important;
  padding:7px 10px !important;
}
.tw-app .nav a.active,
.tw-app .nav-link.active{
  background:#FFFFFF !important;
  color:#3B0764 !important;
  border-color:#FFFFFF !important;
}
.tw-app .nav-icon,
.tw-app .nav-group-icon{
  background:#FFFFFF !important;
  color:#5B21B6 !important;
  min-width:34px !important;
  width:34px !important;
  height:34px !important;
  border-radius:11px !important;
}
.tw-app .brand,
.tw-app .user-panel,
.tw-app .nav-group{
  background:rgba(255,255,255,.105) !important;
  border-color:rgba(255,255,255,.22) !important;
}

/* Better text contrast */
.tw-app .muted,
.tw-app .hero-text,
.tw-app .field-note{
  color:#5A4A70 !important;
}
html[data-theme="dark"] .tw-app .muted,
html[data-theme="dark"] .tw-app .hero-text,
html[data-theme="dark"] .tw-app .field-note{
  color:#E9D5FF !important;
}

/* Compact assessment page */
.tw-app.route-assessment .main-inner,
.tw-app.route-assessment_form .main-inner,
.tw-app.route-assess .main-inner,
.tw-app.route-sdq .main-inner{
  max-width:1180px !important;
}

.tw-app .question-card,
.tw-app .assessment-card{
  padding:9px 10px !important;
  margin-bottom:8px !important;
  border-radius:14px !important;
  box-shadow:none !important;
}

.tw-app .question-card .section-chip,
.tw-app .assessment-card .section-chip,
.tw-app .question-card .pill,
.tw-app .assessment-card .pill{
  min-height:22px !important;
  padding:3px 8px !important;
  font-size:11px !important;
}

.tw-app .question-title,
.tw-app .assessment-question,
.tw-app .question-card h3,
.tw-app .assessment-card h3{
  font-size:13px !important;
  line-height:1.38 !important;
  margin:4px 0 8px !important;
  font-weight:850 !important;
  color:#241639 !important;
}

html[data-theme="dark"] .tw-app .question-title,
html[data-theme="dark"] .tw-app .assessment-question,
html[data-theme="dark"] .tw-app .question-card h3,
html[data-theme="dark"] .tw-app .assessment-card h3{
  color:#FAF5FF !important;
}

.tw-app .answer-group,
.tw-app .answer-options,
.tw-app .question-options{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:5px !important;
}

.tw-app .answer-option,
.tw-app .option-card,
.tw-app .choice-card,
.tw-app label.answer-option{
  min-height:30px !important;
  padding:5px 6px !important;
  border-radius:9px !important;
  font-size:11.8px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  box-shadow:none !important;
  text-align:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.tw-app .answer-option input,
.tw-app .option-card input,
.tw-app .choice-card input{
  width:0 !important;
  height:0 !important;
  opacity:0 !important;
  position:absolute !important;
}

.tw-app .answer-option:hover,
.tw-app .option-card:hover,
.tw-app .choice-card:hover{
  background:#F3E8FF !important;
  border-color:#A78BFA !important;
  color:#3B0764 !important;
}

.tw-app .answer-option.active,
.tw-app .answer-option:has(input:checked),
.tw-app .option-card.active,
.tw-app .option-card:has(input:checked),
.tw-app .choice-card.active,
.tw-app .choice-card:has(input:checked){
  background:#6D28D9 !important;
  color:#FFFFFF !important;
  border-color:#6D28D9 !important;
}

/* Smaller assessment header/progress */
.tw-app .assessment-hero,
.tw-app .hero-assessment,
.tw-app.route-assessment .hero,
.tw-app.route-assessment_form .hero{
  padding:14px 16px !important;
  margin-bottom:12px !important;
}
.tw-app .assessment-hero h1,
.tw-app .hero-assessment h1,
.tw-app.route-assessment .hero h1,
.tw-app.route-assessment_form .hero h1{
  font-size:20px !important;
  line-height:1.25 !important;
  margin:5px 0 !important;
}
.tw-app .assessment-hero .hero-text,
.tw-app .hero-assessment .hero-text{
  font-size:12.5px !important;
  margin:4px 0 !important;
}
.tw-app .hero-side-card,
.tw-app .progress-box,
.tw-app .assessment-progress-card{
  padding:10px 12px !important;
  border-radius:14px !important;
}
.tw-app .progress,
.tw-app .progress-bar-wrap{
  height:5px !important;
}

/* Form meta and submit bar */
.tw-app .assessment-meta,
.tw-app .form-meta,
.tw-app .assessment-info-card{
  padding:10px 12px !important;
  border-radius:14px !important;
  margin-bottom:10px !important;
}
.tw-app .assessment-meta input,
.tw-app .form-meta input,
.tw-app .assessment-meta select,
.tw-app .form-meta select{
  min-height:36px !important;
  padding:7px 10px !important;
}
.tw-app .submit-bar,
.tw-app .assessment-submit-bar{
  padding:8px 10px !important;
  border-radius:14px 14px 0 0 !important;
}
.tw-app .submit-bar .btn,
.tw-app .submit-bar button,
.tw-app .assessment-submit-bar .btn,
.tw-app .assessment-submit-bar button{
  min-height:34px !important;
  padding:7px 12px !important;
  font-size:12.5px !important;
}

@media(max-width:640px){
  .tw-app .question-card,
  .tw-app .assessment-card{
    padding:8px !important;
    margin-bottom:7px !important;
    border-radius:13px !important;
  }
  .tw-app .question-title,
  .tw-app .assessment-question,
  .tw-app .question-card h3,
  .tw-app .assessment-card h3{
    font-size:12.6px !important;
    margin-bottom:6px !important;
  }
  .tw-app .answer-group,
  .tw-app .answer-options,
  .tw-app .question-options{
    gap:4px !important;
  }
  .tw-app .answer-option,
  .tw-app .option-card,
  .tw-app .choice-card,
  .tw-app label.answer-option{
    min-height:28px !important;
    padding:4px 4px !important;
    border-radius:8px !important;
    font-size:11.2px !important;
  }
  .tw-app .assessment-hero,
  .tw-app .hero-assessment,
  .tw-app.route-assessment .hero,
  .tw-app.route-assessment_form .hero{
    padding:12px !important;
  }
  .tw-app .assessment-hero h1,
  .tw-app .hero-assessment h1,
  .tw-app.route-assessment .hero h1,
  .tw-app.route-assessment_form .hero h1{
    font-size:18px !important;
  }
}


/* ===== Home Visit System ===== */
.home-visit-layout{
  display:grid;
  grid-template-columns:minmax(420px,.95fr) minmax(560px,1.3fr);
  gap:18px;
  align-items:start;
}

.hv-student-list,
.hv-form-card{
  min-width:0;
}

.hv-table .is-selected-row{
  background:#f3e8ff !important;
}

.hv-student-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border:1px solid #e9d5ff;
  border-radius:14px;
  background:#fcf7ff;
}

.hv-student-summary span{
  color:#67577f;
  font-size:13px;
}

.hv-section{
  border:1px solid #eadfff;
  border-radius:16px;
  padding:14px;
  background:#fff;
}

.hv-section + .hv-section{
  margin-top:12px;
}

.hv-section h3{
  margin:0 0 10px;
  font-size:15px;
  color:#3b0764;
  font-weight:850;
}

.hv-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.hv-field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.hv-eval-item{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.hv-eval-item label{
  font-size:12.5px;
  color:#3b0764;
}

.hv-photo-upload{
  border:1px dashed #d8b4fe;
  border-radius:14px;
  padding:10px;
  background:#fcf7ff;
}

.hv-photo-upload img{
  width:100%;
  height:110px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #e9d5ff;
  margin-bottom:8px;
}

.hv-satisfaction-list{
  display:grid;
  gap:8px;
  margin:10px 0;
}

.hv-sat-item{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 250px;
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #eadfff;
  border-radius:12px;
}

.hv-sat-item strong{
  font-size:12.8px;
  color:#241639;
}

.hv-rating{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}

.hv-rating label{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d8b4fe;
  border-radius:9px;
  background:#fff;
  cursor:pointer;
}

.hv-rating input{
  position:absolute;
  opacity:0;
}

.hv-rating label.checked,
.hv-rating label:has(input:checked){
  background:#6d28d9;
  color:#fff;
  border-color:#6d28d9;
}

.hv-form-actions{
  position:sticky;
  bottom:0;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  padding:10px;
  border-top:1px solid #e9d5ff;
  border-radius:14px;
}

.hv-empty{
  padding:28px;
  text-align:center;
  border:1px dashed #d8b4fe;
  border-radius:16px;
  background:#fcf7ff;
}

@media(max-width:1100px){
  .home-visit-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .hv-grid,
  .hv-field-grid,
  .hv-sat-item{
    grid-template-columns:1fr;
  }

  .hv-section{
    padding:10px;
  }

  .hv-sat-item{
    gap:7px;
  }

  .hv-rating{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}


/* Home Visit submenu/report/student self mode */
.home-visit-layout.student-self-mode{
  grid-template-columns:1fr !important;
}
.home-visit-layout.student-self-mode .hv-form-card{
  max-width:980px;
  width:100%;
}
.hv-export-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.hv-export-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
  border:1px solid #e9d5ff;
  border-radius:16px;
  background:#fff;
  color:#241639;
}
.hv-export-card strong{
  color:#4c1d95;
  font-size:15px;
}
.hv-export-card span{
  color:#67577f;
  font-size:13px;
}
@media(max-width:900px){
  .hv-export-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   Home Visit Premium Polish
   เป้าหมาย: ฟอร์มเยี่ยมบ้านดูเนี๊ยบขึ้น เป็นระบบขึ้น และใช้งานง่ายขึ้น
   ========================================================================== */

.tw-app .hv-hero,
.tw-app .home-visit-hero,
.tw-app .hv-report-hero{
  background:
    linear-gradient(180deg,#FFFFFF,#FFFBFF) !important;
  border:1px solid #E9D5FF !important;
  box-shadow:0 8px 22px rgba(76,29,149,.07) !important;
}

.tw-app .hv-hero .hero-eyebrow,
.tw-app .hv-report-hero .hero-eyebrow{
  background:#F3E8FF !important;
  color:#4C1D95 !important;
  border-color:#E9D5FF !important;
}

.tw-app .hv-hero h1,
.tw-app .hv-report-hero h1{
  letter-spacing:-.025em !important;
}

.tw-app .hv-filter-card,
.tw-app .hv-report-filter{
  padding:14px !important;
  border-radius:18px !important;
}

.tw-app .home-visit-stats .stat,
.tw-app .hv-report-stats .stat{
  min-height:96px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.tw-app .home-visit-layout{
  align-items:start;
  gap:16px !important;
}

.tw-app .hv-student-list,
.tw-app .hv-form-card{
  border-radius:18px !important;
  overflow:hidden;
}

.tw-app .hv-student-list .card-head,
.tw-app .hv-form-card .card-head,
.tw-app .hv-export-panel .card-head{
  padding-bottom:12px;
  border-bottom:1px solid #F0E4FF;
  margin-bottom:12px;
}

.tw-app .hv-student-list .card-head h2,
.tw-app .hv-form-card .card-head h2,
.tw-app .hv-export-panel .card-head h2{
  font-size:17px !important;
}

.tw-app .hv-table th{
  font-size:12.5px !important;
}

.tw-app .hv-table td{
  font-size:12.8px !important;
}

.tw-app .hv-table .btn-sm{
  min-height:30px !important;
  padding:5px 9px !important;
  border-radius:9px !important;
  font-size:12px !important;
}

.tw-app .hv-table .is-selected-row{
  background:#FAF5FF !important;
  box-shadow:inset 3px 0 0 #6D28D9;
}

.tw-app .hv-student-summary{
  border:1px solid #E9D5FF !important;
  background:#FCF7FF !important;
  border-radius:16px !important;
  padding:12px 14px !important;
  margin-bottom:12px;
}

.tw-app .hv-student-summary strong{
  color:#2A173D;
  font-size:14px;
}

.tw-app .hv-student-summary span{
  color:#67577F;
  font-size:12.5px;
}

.tw-app .hv-section{
  background:#FFFFFF !important;
  border:1px solid #EADFFF !important;
  border-radius:16px !important;
  padding:13px !important;
  box-shadow:0 1px 3px rgba(88,28,135,.04);
}

.tw-app .hv-section + .hv-section{
  margin-top:10px !important;
}

.tw-app .hv-section h3{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px !important;
  font-size:14px !important;
  color:#3B0764 !important;
  line-height:1.35;
}

.tw-app .hv-section h3::before{
  content:"";
  width:7px;
  height:18px;
  border-radius:999px;
  background:#6D28D9;
  flex:0 0 auto;
}

.tw-app .hv-grid{
  gap:9px !important;
}

.tw-app .hv-form input[type="text"],
.tw-app .hv-form input[type="date"],
.tw-app .hv-form input[type="file"],
.tw-app .hv-form select,
.tw-app .hv-form textarea{
  min-height:38px !important;
  border-radius:11px !important;
  font-size:13px !important;
  padding:7px 10px !important;
}

.tw-app .hv-form textarea{
  min-height:80px;
}

.tw-app .hv-form label{
  color:#3F3159 !important;
  font-size:12.4px !important;
  font-weight:800 !important;
}

.tw-app .hv-field-grid{
  gap:8px !important;
}

.tw-app .hv-eval-item{
  border:1px solid #F0E4FF;
  background:#FFFCFF;
  border-radius:13px;
  padding:9px;
}

.tw-app .hv-eval-item label{
  color:#4C1D95 !important;
  line-height:1.35;
}

.tw-app .hv-eval-item select{
  margin-top:4px;
}

.tw-app .hv-photo-upload{
  background:#FFFCFF !important;
  border:1px dashed #C084FC !important;
  border-radius:14px !important;
  padding:10px !important;
}

.tw-app .hv-photo-upload label{
  display:block;
  margin-bottom:6px;
}

.tw-app .hv-photo-upload img{
  height:120px !important;
  border-radius:12px !important;
  object-fit:cover;
}

.tw-app .hv-satisfaction-list{
  gap:7px !important;
}

.tw-app .hv-sat-item{
  grid-template-columns:minmax(240px,1fr) 235px !important;
  border:1px solid #F0E4FF !important;
  background:#FFFCFF !important;
  padding:8px 9px !important;
  border-radius:13px !important;
}

.tw-app .hv-sat-item strong{
  font-size:12.5px !important;
  line-height:1.4;
}

.tw-app .hv-rating{
  gap:4px !important;
}

.tw-app .hv-rating label{
  min-height:28px !important;
  border-radius:8px !important;
  font-size:12px !important;
  font-weight:850;
}

.tw-app .hv-form-actions{
  position:sticky !important;
  bottom:0;
  z-index:5;
  background:rgba(255,255,255,.92) !important;
  border:1px solid #E9D5FF !important;
  box-shadow:0 -8px 24px rgba(76,29,149,.08);
  margin-top:12px;
  padding:9px !important;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.tw-app .hv-form-actions .btn{
  min-height:34px !important;
  padding:7px 12px !important;
  font-size:12.5px !important;
}

.tw-app .hv-empty{
  background:#FCF7FF !important;
  border-color:#D8B4FE !important;
}

.tw-app .hv-self-notice{
  background:#F5F3FF !important;
  color:#3B0764 !important;
  border-color:#DDD6FE !important;
}

/* Report / Export page polish */
.tw-app .hv-export-panel{
  padding:18px !important;
}

.tw-app .hv-export-grid{
  gap:12px !important;
}

.tw-app .hv-export-card{
  border:1px solid #E9D5FF !important;
  border-radius:16px !important;
  background:#FFFFFF !important;
  min-height:118px;
  padding:16px !important;
  transition:.18s ease;
}

.tw-app .hv-export-card:hover{
  background:#FCF7FF !important;
  border-color:#C084FC !important;
  transform:translateY(-1px);
}

.tw-app .hv-export-card strong{
  color:#3B0764 !important;
  font-size:15px !important;
}

.tw-app .hv-export-card span{
  color:#67577F !important;
  line-height:1.45;
}

/* Dark mode */
html[data-theme="dark"] .tw-app .hv-hero,
html[data-theme="dark"] .tw-app .home-visit-hero,
html[data-theme="dark"] .tw-app .hv-report-hero,
html[data-theme="dark"] .tw-app .hv-section,
html[data-theme="dark"] .tw-app .hv-eval-item,
html[data-theme="dark"] .tw-app .hv-sat-item,
html[data-theme="dark"] .tw-app .hv-export-card{
  background:#211633 !important;
  border-color:#49325F !important;
}

html[data-theme="dark"] .tw-app .hv-student-summary,
html[data-theme="dark"] .tw-app .hv-photo-upload,
html[data-theme="dark"] .tw-app .hv-empty{
  background:#1B1230 !important;
  border-color:#49325F !important;
}

html[data-theme="dark"] .tw-app .hv-form-actions{
  background:rgba(27,18,48,.94) !important;
  border-color:#49325F !important;
}

/* Mobile polish */
@media(max-width:900px){
  .tw-app .hv-sat-item{
    grid-template-columns:1fr !important;
  }
  .tw-app .hv-rating{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .tw-app .hv-section{
    padding:10px !important;
    border-radius:14px !important;
  }
  .tw-app .hv-section h3{
    font-size:13px !important;
    margin-bottom:8px !important;
  }
  .tw-app .hv-grid,
  .tw-app .hv-field-grid{
    gap:7px !important;
  }
  .tw-app .hv-eval-item{
    padding:8px !important;
  }
  .tw-app .hv-form-actions{
    justify-content:stretch;
  }
  .tw-app .hv-form-actions .btn{
    flex:1 1 100%;
  }
}


/* ==========================================================================
   Home Visit Student Form + Table Fix
   ========================================================================== */

/* Staff view: status table full width, no squeezed two-column layout */
.tw-app .home-visit-layout:not(.student-self-mode){
  grid-template-columns:1fr !important;
}

.tw-app .home-visit-layout:not(.student-self-mode) .hv-form-card{
  max-width:100% !important;
}

/* Table no longer cramped */
.tw-app .hv-student-list{
  overflow:hidden !important;
}

.tw-app .hv-student-list .table-wrap{
  width:100% !important;
  overflow-x:auto !important;
}

.tw-app .hv-table{
  min-width:880px !important;
  table-layout:auto !important;
}

.tw-app .hv-table th,
.tw-app .hv-table td{
  white-space:nowrap !important;
  padding:9px 11px !important;
}

.tw-app .hv-table th:nth-child(3),
.tw-app .hv-table td:nth-child(3){
  min-width:220px !important;
  white-space:normal !important;
}

.tw-app .hv-table th:nth-child(6),
.tw-app .hv-table td:nth-child(6){
  min-width:250px !important;
}

.tw-app .hv-table td[data-label="จัดการ"]{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

.tw-app .hv-table .badge{
  white-space:nowrap !important;
}

/* Student self mode form: one clean paper-like form */
.tw-app .home-visit-layout.student-self-mode{
  grid-template-columns:1fr !important;
}

.tw-app .home-visit-layout.student-self-mode .hv-form-card{
  max-width:980px !important;
  margin-inline:auto !important;
  width:100% !important;
}

.tw-app .hv-form-intro{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  margin-bottom:10px;
  border:1px solid #D8B4FE;
  border-radius:15px;
  background:#FAF5FF;
}

.tw-app .hv-form-intro strong{
  color:#3B0764;
  font-size:15px;
}

.tw-app .hv-form-intro span{
  color:#5A4A70;
  font-size:12.8px;
}

/* PDF-like form sections */
.tw-app .hv-form-card{
  background:#FFFFFF !important;
}

.tw-app .hv-section{
  border:1px solid #E5D6FF !important;
  background:#FFFFFF !important;
  border-radius:15px !important;
  padding:12px !important;
}

.tw-app .hv-section h3{
  border-bottom:1px solid #F0E4FF;
  padding-bottom:8px;
  margin-bottom:10px !important;
}

.tw-app .hv-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}

.tw-app .hv-section:nth-of-type(1) .hv-grid,
.tw-app .hv-section:nth-of-type(2) .hv-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.tw-app .hv-field-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

.tw-app .hv-eval-item{
  padding:8px !important;
  border-radius:12px !important;
}

.tw-app .hv-eval-item label{
  font-size:12px !important;
}

.tw-app .hv-form input[type="text"],
.tw-app .hv-form input[type="date"],
.tw-app .hv-form input[type="file"],
.tw-app .hv-form select,
.tw-app .hv-form textarea{
  min-height:34px !important;
  padding:6px 9px !important;
  font-size:12.5px !important;
  border-radius:10px !important;
}

.tw-app .hv-form textarea{
  min-height:68px !important;
}

.tw-app .hv-photo-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.tw-app .hv-photo-upload img{
  height:96px !important;
}

.tw-app .hv-sat-item{
  grid-template-columns:minmax(260px,1fr) 220px !important;
  padding:7px 8px !important;
}

.tw-app .hv-rating label{
  min-height:26px !important;
  font-size:11.5px !important;
}

.tw-app .hv-form-actions{
  position:sticky !important;
  bottom:0;
  z-index:10;
  justify-content:flex-end !important;
}

/* Mobile/tablet */
@media(max-width:980px){
  .tw-app .hv-grid,
  .tw-app .hv-section:nth-of-type(1) .hv-grid,
  .tw-app .hv-section:nth-of-type(2) .hv-grid,
  .tw-app .hv-field-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:720px){
  .tw-app .hv-table{
    min-width:760px !important;
  }

  .tw-app .hv-grid,
  .tw-app .hv-section:nth-of-type(1) .hv-grid,
  .tw-app .hv-section:nth-of-type(2) .hv-grid,
  .tw-app .hv-field-grid,
  .tw-app .hv-photo-grid,
  .tw-app .hv-sat-item{
    grid-template-columns:1fr !important;
  }

  .tw-app .hv-section{
    padding:9px !important;
  }

  .tw-app .hv-sat-item{
    gap:6px !important;
  }
}


/* Home Visit detailed original-form fields */
.tw-app .hv-detail-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.tw-app .hv-detail-grid > div{
  border:1px solid #F0E4FF;
  background:#FFFCFF;
  border-radius:12px;
  padding:8px;
}
.tw-app .hv-detail-grid label{
  color:#4C1D95 !important;
}
@media(max-width:980px){
  .tw-app .hv-detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:720px){
  .tw-app .hv-detail-grid{
    grid-template-columns:1fr !important;
  }
}

/* Home Visit bulk print action */
.tw-app .hv-export-card-primary{
  border-color:#C084FC !important;
  background:#FAF5FF !important;
}
.tw-app .hv-export-card-primary strong{
  color:#4C1D95 !important;
}


/* PDF Template Mapping + Satisfaction Summary */
.tw-app .hv-mapping-layout{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(720px,1.4fr);gap:16px;align-items:start}
.tw-app .hv-map-preview-card,.tw-app .hv-map-table-card{overflow:hidden}.tw-app .hv-map-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.tw-app .hv-map-page-wrap{max-height:78vh;overflow:auto;border:1px solid #e9d5ff;border-radius:14px;background:#f8f0ff;padding:10px}.tw-app .hv-map-page-img{position:relative;width:min(100%,520px);margin:auto;cursor:crosshair}.tw-app .hv-map-page-img img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 8px 24px rgba(76,29,149,.15)}.tw-app .hv-map-table-wrap{max-height:78vh;overflow:auto}.tw-app .hv-map-table{min-width:1180px}.tw-app .hv-map-table input,.tw-app .hv-map-table select{min-height:32px!important;padding:4px 6px!important;font-size:12px!important}.tw-app .hv-map-table td,.tw-app .hv-map-table th{padding:6px!important}.tw-app .hv-map-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.tw-app .hv-reset-form{margin-top:10px}.tw-app .hv-sat-summary-card .table td:first-child{min-width:320px;text-align:left}.tw-app .hv-export-card-primary{border-color:#c084fc!important;background:#faf5ff!important}@media(max-width:1100px){.tw-app .hv-mapping-layout{grid-template-columns:1fr}.tw-app .hv-map-page-img{width:100%}}


/* ======================================================================
   PDF Mapping Wizard 2.0
   ====================================================================== */
.tw-app .hv-map-wizard-hero{background:#fff!important;border-color:#e9d5ff!important;}
.tw-app .hv-map-toolbar{padding:14px 16px!important;margin-bottom:14px;}
.tw-app .hv-map-toolbar-main{display:flex;justify-content:space-between;gap:14px;align-items:center;}
.tw-app .hv-map-toolbar-main strong{display:block;color:#3b0764;font-size:15px;}
.tw-app .hv-map-toolbar-main span{display:block;color:#67577f;font-size:13px;}
.tw-app .hv-map-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;}
.tw-app .hv-map-wizard-layout{display:grid;grid-template-columns:minmax(560px,1fr) 380px;gap:16px;align-items:start;}
.tw-app .hv-map-preview-card,.tw-app .hv-map-bank-card,.tw-app .hv-map-list-card,.tw-app .hv-map-danger-zone{border:1px solid #e9d5ff!important;background:#fff!important;border-radius:18px!important;}
.tw-app .hv-map-preview-head{display:flex;justify-content:space-between;gap:12px;align-items:center;}
.tw-app .hv-map-preview-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.tw-app .hv-map-preview-controls select{min-height:34px!important;width:auto!important;}
.tw-app .hv-map-selected-card{display:flex;flex-direction:column;gap:3px;background:#faf5ff;border:1px solid #e9d5ff;border-radius:14px;padding:10px 12px;margin:10px 0;}
.tw-app .hv-map-selected-card strong{color:#3b0764;font-size:14px;}
.tw-app .hv-map-selected-card span{color:#67577f;font-size:12.5px;}
.tw-app .hv-map-nudge-panel{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.tw-app .hv-map-preview-scroll{--map-zoom:1;max-height:76vh;overflow:auto;background:#f8f4ff;border:1px solid #eadfff;border-radius:16px;padding:12px;text-align:center;}
.tw-app .hv-map-page-stage{position:relative;width:calc(210mm * var(--map-zoom));max-width:100%;margin:0 auto;background:#fff;box-shadow:0 10px 30px rgba(31,18,53,.15);}
.tw-app .hv-map-page-stage img{display:block;width:100%;height:auto;user-select:none;}
.tw-app .hv-map-marker-layer{position:absolute;inset:0;pointer-events:none;}
.tw-app .hv-map-marker{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:2px solid #7c3aed;background:rgba(124,58,237,.12);color:#3b0764;border-radius:999px;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;min-width:18px;min-height:18px;cursor:pointer;}
.tw-app .hv-map-marker.check{border-color:#16a34a;background:rgba(22,163,74,.14);color:#166534;}
.tw-app .hv-map-marker.image{border-color:#db2777;background:rgba(219,39,119,.12);color:#9d174d;border-radius:8px;font-size:9px;}
.tw-app .hv-map-marker.active{box-shadow:0 0 0 4px rgba(124,58,237,.24);background:#7c3aed;color:#fff;}
.tw-app .hv-map-bank-card{position:sticky;top:86px;padding:16px!important;max-height:calc(100vh - 110px);overflow:auto;}
.tw-app .hv-map-bank-card input[type="text"]{margin:8px 0 10px;}
.tw-app .hv-map-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px;}
.tw-app .hv-map-tabs button{min-height:34px!important;border:1px solid #e9d5ff!important;background:#fff!important;color:#4c1d95!important;border-radius:10px!important;font-size:12px!important;}
.tw-app .hv-map-tabs button.active{background:#6d28d9!important;color:#fff!important;border-color:#6d28d9!important;}
.tw-app .hv-map-bank-list{display:grid;gap:7px;}
.tw-app .hv-field-chip{display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:center!important;min-height:54px!important;text-align:left!important;border:1px solid #e9d5ff!important;border-radius:12px!important;background:#fff!important;color:#241639!important;padding:8px 10px!important;box-shadow:none!important;}
.tw-app .hv-field-chip span{font-size:12.8px;font-weight:850;line-height:1.25;}
.tw-app .hv-field-chip small{font-size:10.8px;color:#7b6a92;line-height:1.25;margin-top:2px;}
.tw-app .hv-field-chip:hover,.tw-app .hv-field-chip.selected{background:#faf5ff!important;border-color:#a855f7!important;}
.tw-app .hv-field-chip.check-chip{border-left:4px solid #16a34a!important;}
.tw-app .hv-field-chip.image-chip{border-left:4px solid #db2777!important;}
.tw-app .hv-map-quick-help{margin-top:12px;padding:10px;border:1px dashed #d8b4fe;border-radius:12px;background:#fcf7ff;color:#5a4a70;font-size:12px;}
.tw-app .hv-map-quick-help strong{display:block;color:#3b0764;margin-bottom:3px;}
.tw-app .hv-map-list-card{margin-top:16px;padding:16px!important;}
.tw-app .hv-map-table-wrap{max-height:420px;overflow:auto;}
.tw-app .hv-map-table{min-width:1180px;}
.tw-app .hv-map-table th{font-size:12px!important;white-space:nowrap;}
.tw-app .hv-map-table td{padding:6px!important;vertical-align:middle!important;}
.tw-app .hv-map-table input,.tw-app .hv-map-table select{min-height:30px!important;font-size:12px!important;padding:5px 7px!important;border-radius:8px!important;}
.tw-app .hv-map-table .map-match{margin-top:5px;}
.tw-app .hv-map-table tr.selected{background:#faf5ff!important;box-shadow:inset 3px 0 0 #6d28d9;}
.tw-app .hv-map-actions{display:flex;gap:8px;flex-wrap:wrap;}
.tw-app .hv-map-danger-zone{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding:12px!important;}
@media(max-width:1180px){.tw-app .hv-map-wizard-layout{grid-template-columns:1fr}.tw-app .hv-map-bank-card{position:static;max-height:none}.tw-app .hv-map-toolbar-main{align-items:flex-start;flex-direction:column}.tw-app .hv-map-preview-head{align-items:flex-start;flex-direction:column}.tw-app .hv-map-page-stage{width:100%;}}
@media(max-width:640px){.tw-app .hv-map-tabs{grid-template-columns:1fr}.tw-app .hv-map-preview-scroll{padding:8px}.tw-app .hv-map-nudge-panel .btn{flex:1 1 30%;}.tw-app .hv-map-toolbar-actions .btn{width:100%;}}


/* Mapping Wizard: test preview and page mapped text list */
.tw-app .hv-map-preview-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:6px 10px;
  border:1px solid #e9d5ff;
  border-radius:999px;
  background:#fff;
  color:#4c1d95;
  font-size:12px;
  font-weight:800;
}
.tw-app .hv-map-preview-toggle input{
  width:auto!important;
  min-height:0!important;
}
.tw-app .hv-map-preview-value{
  position:absolute;
  transform:translate(6px,-50%);
  max-width:180px;
  padding:3px 6px;
  border-radius:7px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(124,58,237,.32);
  color:#241639;
  font-size:10px;
  line-height:1.25;
  text-align:left;
  pointer-events:none;
  box-shadow:0 4px 12px rgba(31,18,53,.12);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tw-app .hv-map-preview-value.check{
  border-color:rgba(22,163,74,.45);
  color:#166534;
}
.tw-app .hv-map-preview-value.image{
  border-color:rgba(219,39,119,.45);
  color:#9d174d;
}
.tw-app .hv-map-preview-value.active{
  background:#6d28d9;
  color:#fff;
  border-color:#6d28d9;
}
.tw-app .hv-map-page-list-card{
  margin-top:12px;
  border:1px solid #e9d5ff;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.tw-app .hv-map-page-list-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid #f0e4ff;
  background:#fcf7ff;
}
.tw-app .hv-map-page-list-head strong{
  color:#3b0764;
  font-size:14px;
}
.tw-app .hv-map-page-list-head span{
  color:#67577f;
  font-size:12px;
}
.tw-app .hv-map-page-list{
  display:grid;
  gap:6px;
  padding:10px;
  max-height:260px;
  overflow:auto;
}
.tw-app .hv-map-page-empty{
  padding:12px;
  text-align:center;
  color:#7c6a92;
  border:1px dashed #d8b4fe;
  border-radius:12px;
  background:#fffcff;
}
.tw-app .hv-map-page-item{
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:8px!important;
  min-height:52px!important;
  padding:8px 10px!important;
  border:1px solid #eadfff!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#241639!important;
  text-align:left!important;
  box-shadow:none!important;
}
.tw-app .hv-map-page-item:hover,
.tw-app .hv-map-page-item.active{
  border-color:#a78bfa!important;
  background:#faf5ff!important;
}
.tw-app .hv-map-page-item .num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:#f3e8ff;
  color:#4c1d95;
  font-weight:900;
}
.tw-app .hv-map-page-item .main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.tw-app .hv-map-page-item .main strong{
  color:#241639;
  font-size:12.5px;
}
.tw-app .hv-map-page-item .main small{
  color:#67577f;
  font-size:11px;
}
.tw-app .hv-map-page-item .main em{
  color:#4c1d95;
  font-style:normal;
  font-size:11.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tw-app .hv-map-page-item .pos{
  color:#6b7280;
  font-size:11px;
  white-space:nowrap;
}
.tw-app .hv-map-page-item .ok,
.tw-app .hv-map-page-item .text,
.tw-app .hv-map-page-item .image,
.tw-app .hv-map-page-item .warn{
  border-radius:999px;
  padding:4px 7px;
  font-size:10.5px;
  font-weight:850;
  white-space:nowrap;
}
.tw-app .hv-map-page-item .ok{background:#dcfce7;color:#166534}
.tw-app .hv-map-page-item .text{background:#ede9fe;color:#5b21b6}
.tw-app .hv-map-page-item .image{background:#fce7f3;color:#9d174d}
.tw-app .hv-map-page-item .warn{background:#fef3c7;color:#92400e}

@media(max-width:760px){
  .tw-app .hv-map-page-item{
    grid-template-columns:24px minmax(0,1fr)!important;
  }
  .tw-app .hv-map-page-item .pos,
  .tw-app .hv-map-page-item .ok,
  .tw-app .hv-map-page-item .text,
  .tw-app .hv-map-page-item .image,
  .tw-app .hv-map-page-item .warn{
    grid-column:2;
    justify-self:start;
  }
}


/* Mapping Test Preview: force sample data visibility */
.starter-notice{
  position:absolute;
  left:8mm;
  top:8mm;
  z-index:25;
  max-width:118mm;
  padding:5px 8px;
  border-radius:8px;
  background:rgba(254,243,199,.95);
  color:#92400e;
  border:1px solid #f59e0b;
  font-family:'Kanit',Tahoma,sans-serif;
  font-size:9pt;
  font-weight:700;
}
.tw-app .hv-map-page-item .starter{
  border-radius:999px;
  padding:4px 7px;
  font-size:10.5px;
  font-weight:850;
  white-space:nowrap;
  background:#fef3c7;
  color:#92400e;
}
.tw-app .hv-map-page-item.starter-row{
  border-style:dashed!important;
  background:#fffbeb!important;
}
.tw-app .hv-map-preview-value{
  z-index:20;
}


/* ==========================================================================
   Full System Rebrand 2026
   - หน้า Login ใช้ม่วงชมพูเท่านั้น
   - ด้านในระบบเปลี่ยนเป็น Modern Clean Dashboard
   - Font stack อ่านง่าย ไม่บังคับฟอนต์เดียวตายตัว
   - ลดขนาดฟอร์มเพิ่มนักเรียนให้กระทัดรัด
   ========================================================================== */

:root{
  --app-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Sarabun", "Inter", "Segoe UI", Tahoma, sans-serif;
  --rb-bg:#F6F8FB;
  --rb-surface:#FFFFFF;
  --rb-surface-2:#F8FAFC;
  --rb-border:#E2E8F0;
  --rb-border-strong:#CBD5E1;
  --rb-text:#172033;
  --rb-text-2:#334155;
  --rb-muted:#64748B;
  --rb-primary:#2563EB;
  --rb-primary-2:#1D4ED8;
  --rb-primary-soft:#EFF6FF;
  --rb-accent:#0F766E;
  --rb-success:#059669;
  --rb-warning:#D97706;
  --rb-danger:#DC2626;
  --rb-sidebar:#0F172A;
  --rb-sidebar-2:#111827;
  --rb-sidebar-text:#F8FAFC;
  --rb-sidebar-muted:#CBD5E1;
  --rb-radius:14px;
  --rb-radius-lg:18px;
  --rb-shadow:0 10px 28px rgba(15,23,42,.07);
  --rb-shadow-sm:0 1px 3px rgba(15,23,42,.06);
}

html[data-theme="dark"]{
  --rb-bg:#0B1120;
  --rb-surface:#111827;
  --rb-surface-2:#0F172A;
  --rb-border:#263244;
  --rb-border-strong:#334155;
  --rb-text:#F8FAFC;
  --rb-text-2:#E2E8F0;
  --rb-muted:#AAB6C7;
  --rb-primary:#60A5FA;
  --rb-primary-2:#3B82F6;
  --rb-primary-soft:#12213A;
  --rb-sidebar:#060B16;
  --rb-sidebar-2:#0B1120;
  --rb-sidebar-text:#F8FAFC;
  --rb-sidebar-muted:#AAB6C7;
}

/* Typography base: readable dynamic font stack */
html,
body,
.tw-app,
.tw-app button,
.tw-app input,
.tw-app select,
.tw-app textarea,
.tw-app table,
.tw-app .btn{
  font-family:var(--app-font) !important;
  letter-spacing:0 !important;
}

.tw-app{
  color:var(--rb-text) !important;
  line-height:1.62 !important;
}

/* ===================== Login / Front Page: Pink-Purple Brand only ===================== */
.tw-app.auth-page{
  background:
    radial-gradient(circle at 14% 10%, rgba(236,72,153,.16), transparent 34%),
    radial-gradient(circle at 86% 16%, rgba(124,58,237,.18), transparent 36%),
    linear-gradient(135deg,#FFF7FB 0%,#F7F0FF 46%,#FDFBFF 100%) !important;
}

.tw-app.auth-page .main-auth{
  background:transparent !important;
}

.tw-app.auth-page .login-shell{
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(216,180,254,.75) !important;
  border-radius:28px !important;
  box-shadow:0 30px 90px rgba(88,28,135,.18) !important;
  overflow:hidden !important;
}

.tw-app.auth-page .login-visual{
  background-image:
    linear-gradient(135deg,rgba(88,28,135,.78),rgba(219,39,119,.46)),
    var(--login-bg) !important;
  background-size:cover,cover !important;
  background-position:center,center !important;
}

.tw-app.auth-page .login-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 20%,rgba(255,255,255,.20),transparent 26%),
    radial-gradient(circle at 80% 78%,rgba(236,72,153,.22),transparent 34%);
  pointer-events:none;
}

.tw-app.auth-page .login-visual-content{
  position:relative;
  z-index:2;
}

.tw-app.auth-page .login-kicker{
  color:#FDE7FF !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
}

.tw-app.auth-page .login-visual h1{
  color:#FFFFFF !important;
  text-shadow:0 12px 34px rgba(0,0,0,.28) !important;
}

.tw-app.auth-page .login-visual p{
  color:#FDF2F8 !important;
  opacity:1 !important;
}

.tw-app.auth-page .login-panel{
  background:#FFFFFF !important;
  color:#26123D !important;
}

.tw-app.auth-page .auth-tabs,
.tw-app.auth-page .login-tabs{
  background:#FDF2F8 !important;
  border:1px solid #F5D0FE !important;
}

.tw-app.auth-page .auth-tabs .active,
.tw-app.auth-page .login-tab.active{
  background:linear-gradient(135deg,#7C3AED,#DB2777) !important;
  color:#FFFFFF !important;
  box-shadow:0 10px 22px rgba(219,39,119,.18) !important;
}

.tw-app.auth-page .btn-primary,
.tw-app.auth-page button[type="submit"]{
  background:linear-gradient(135deg,#7C3AED,#DB2777) !important;
  border-color:transparent !important;
  color:#FFFFFF !important;
  box-shadow:0 12px 26px rgba(124,58,237,.18) !important;
}

.tw-app.auth-page input,
.tw-app.auth-page select{
  background:#FFFFFF !important;
  border-color:#E9D5FF !important;
  color:#241639 !important;
}

.tw-app.auth-page input:focus,
.tw-app.auth-page select:focus{
  border-color:#C026D3 !important;
  box-shadow:0 0 0 4px rgba(219,39,119,.13) !important;
}

/* ===================== Internal App: Modern Clean Theme ===================== */
.tw-app.with-sidebar{
  background:var(--rb-bg) !important;
  color:var(--rb-text) !important;
}

.tw-app.with-sidebar .shell,
.tw-app.with-sidebar .main{
  background:var(--rb-bg) !important;
}

.tw-app.with-sidebar .main-inner{
  color:var(--rb-text) !important;
}

/* Internal sidebar: clean navy, not pink/purple */
.tw-app.with-sidebar .sidebar{
  background:linear-gradient(180deg,var(--rb-sidebar),var(--rb-sidebar-2)) !important;
  border-right:1px solid rgba(148,163,184,.16) !important;
  box-shadow:10px 0 34px rgba(15,23,42,.16) !important;
}

.tw-app.with-sidebar .sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 0%,rgba(59,130,246,.16),transparent 28%),
    radial-gradient(circle at 78% 100%,rgba(20,184,166,.10),transparent 32%);
  pointer-events:none;
}

.tw-app.with-sidebar .sidebar-inner{
  position:relative;
  z-index:1;
}

.tw-app.with-sidebar .brand,
.tw-app.with-sidebar .user-panel,
.tw-app.with-sidebar .nav-group{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(226,232,240,.11) !important;
  box-shadow:none !important;
}

.tw-app.with-sidebar .brand-title,
.tw-app.with-sidebar .user-name,
.tw-app.with-sidebar .nav-group-title,
.tw-app.with-sidebar .nav a,
.tw-app.with-sidebar .nav-link{
  color:var(--rb-sidebar-text) !important;
  text-shadow:none !important;
}

.tw-app.with-sidebar .brand-sub,
.tw-app.with-sidebar .user-role,
.tw-app.with-sidebar .user-scope,
.tw-app.with-sidebar .nav-section-title{
  color:var(--rb-sidebar-muted) !important;
  opacity:1 !important;
}

.tw-app.with-sidebar .nav a,
.tw-app.with-sidebar .nav-link{
  min-height:38px !important;
  border-radius:12px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  font-size:13px !important;
  font-weight:700 !important;
}

.tw-app.with-sidebar .nav a:hover,
.tw-app.with-sidebar .nav-link:hover{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(226,232,240,.12) !important;
  transform:none !important;
}

.tw-app.with-sidebar .nav a.active,
.tw-app.with-sidebar .nav-link.active{
  background:#FFFFFF !important;
  color:#0F172A !important;
  border-color:#FFFFFF !important;
  box-shadow:0 8px 20px rgba(0,0,0,.16) !important;
}

.tw-app.with-sidebar .nav-icon,
.tw-app.with-sidebar .nav-group-icon,
.tw-app.with-sidebar .brand-mark,
.tw-app.with-sidebar .user-avatar{
  background:#FFFFFF !important;
  color:#1D4ED8 !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}

.tw-app.with-sidebar .nav-group-caret,
.tw-app.with-sidebar .nav-chevron,
.tw-app.with-sidebar .nav-arrow{
  color:#93C5FD !important;
  opacity:1 !important;
}

/* Topbar */
.tw-app.with-sidebar .app-topbar{
  background:rgba(255,255,255,.88) !important;
  border:1px solid var(--rb-border) !important;
  box-shadow:var(--rb-shadow-sm) !important;
  border-radius:18px !important;
  backdrop-filter:blur(16px) !important;
}

html[data-theme="dark"] .tw-app.with-sidebar .app-topbar{
  background:rgba(17,24,39,.88) !important;
}

.tw-app.with-sidebar .topbar-kicker{
  color:var(--rb-primary) !important;
  font-weight:800 !important;
}

.tw-app.with-sidebar .topbar-title,
.tw-app.with-sidebar .page-head h1,
.tw-app.with-sidebar .page-title,
.tw-app.with-sidebar h1{
  color:var(--rb-text) !important;
  font-weight:850 !important;
  letter-spacing:-.015em !important;
}

.tw-app.with-sidebar .topbar-chip,
.tw-app.with-sidebar .theme-toggle{
  background:var(--rb-surface) !important;
  border:1px solid var(--rb-border) !important;
  color:var(--rb-text-2) !important;
  box-shadow:none !important;
}

/* Cards, sections, tables */
.tw-app.with-sidebar .card,
.tw-app.with-sidebar .unified-card,
.tw-app.with-sidebar .filter-card,
.tw-app.with-sidebar .premium-table-card,
.tw-app.with-sidebar .report-card,
.tw-app.with-sidebar .graph-card,
.tw-app.with-sidebar .trait5-form-card,
.tw-app.with-sidebar .hv-form-card,
.tw-app.with-sidebar .hv-student-list,
.tw-app.with-sidebar .hv-export-panel{
  background:var(--rb-surface) !important;
  border:1px solid var(--rb-border) !important;
  border-radius:var(--rb-radius-lg) !important;
  box-shadow:var(--rb-shadow-sm) !important;
}

.tw-app.with-sidebar .hero,
.tw-app.with-sidebar .hv-hero,
.tw-app.with-sidebar .home-visit-hero,
.tw-app.with-sidebar .hv-report-hero{
  background:linear-gradient(180deg,var(--rb-surface),var(--rb-surface-2)) !important;
  border:1px solid var(--rb-border) !important;
  box-shadow:var(--rb-shadow-sm) !important;
  color:var(--rb-text) !important;
}

.tw-app.with-sidebar .hero::before,
.tw-app.with-sidebar .hv-hero::before{
  display:none !important;
}

.tw-app.with-sidebar .section-chip,
.tw-app.with-sidebar .pill,
.tw-app.with-sidebar .hero-eyebrow{
  background:var(--rb-primary-soft) !important;
  color:var(--rb-primary-2) !important;
  border:1px solid rgba(37,99,235,.16) !important;
  box-shadow:none !important;
}

.tw-app.with-sidebar .muted,
.tw-app.with-sidebar .field-note,
.tw-app.with-sidebar .hero-text,
.tw-app.with-sidebar p{
  color:var(--rb-muted) !important;
}

.tw-app.with-sidebar label{
  color:var(--rb-text-2) !important;
  font-weight:750 !important;
}

.tw-app.with-sidebar input[type="text"],
.tw-app.with-sidebar input[type="number"],
.tw-app.with-sidebar input[type="password"],
.tw-app.with-sidebar input[type="date"],
.tw-app.with-sidebar input[type="file"],
.tw-app.with-sidebar select,
.tw-app.with-sidebar textarea{
  background:var(--rb-surface) !important;
  color:var(--rb-text) !important;
  border:1px solid var(--rb-border-strong) !important;
  box-shadow:none !important;
}

.tw-app.with-sidebar input:focus,
.tw-app.with-sidebar select:focus,
.tw-app.with-sidebar textarea:focus{
  border-color:var(--rb-primary) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.14) !important;
}

.tw-app.with-sidebar .btn,
.tw-app.with-sidebar button{
  border-radius:11px !important;
  box-shadow:none !important;
  transform:none !important;
}

.tw-app.with-sidebar .btn-primary,
.tw-app.with-sidebar button[type="submit"],
.tw-app.with-sidebar .print-btn{
  background:var(--rb-primary) !important;
  border-color:var(--rb-primary) !important;
  color:#FFFFFF !important;
}

.tw-app.with-sidebar .btn-primary:hover,
.tw-app.with-sidebar button[type="submit"]:hover{
  background:var(--rb-primary-2) !important;
  border-color:var(--rb-primary-2) !important;
}

.tw-app.with-sidebar .btn-outline,
.tw-app.with-sidebar .btn-secondary{
  background:var(--rb-surface) !important;
  color:var(--rb-primary-2) !important;
  border:1px solid var(--rb-border-strong) !important;
}

.tw-app.with-sidebar .table-wrap{
  border:1px solid var(--rb-border) !important;
  box-shadow:none !important;
  border-radius:16px !important;
}

.tw-app.with-sidebar table{
  color:var(--rb-text) !important;
}

.tw-app.with-sidebar th{
  background:#F1F5F9 !important;
  color:#1E293B !important;
  border-bottom:1px solid var(--rb-border) !important;
}

html[data-theme="dark"] .tw-app.with-sidebar th{
  background:#162033 !important;
  color:#E2E8F0 !important;
}

.tw-app.with-sidebar td{
  color:var(--rb-text-2) !important;
  border-bottom:1px solid var(--rb-border) !important;
}

.tw-app.with-sidebar tbody tr:hover{
  background:#F8FAFC !important;
}

html[data-theme="dark"] .tw-app.with-sidebar tbody tr:hover{
  background:#0F172A !important;
}

/* ===================== Compact Student Add/Edit Form ===================== */
.tw-app.route-students .form-card{
  padding:14px 16px !important;
  margin-bottom:14px !important;
  border-radius:18px !important;
}

.tw-app.route-students .form-card .card-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:10px !important;
  padding-bottom:8px !important;
  border-bottom:1px solid var(--rb-border) !important;
}

.tw-app.route-students .form-card .card-head h2{
  font-size:16px !important;
  line-height:1.25 !important;
  margin:0 !important;
}

.tw-app.route-students .form-card .section-chip{
  min-height:26px !important;
  padding:4px 9px !important;
  font-size:11px !important;
}

.tw-app.route-students .form-card form.stack{
  gap:8px !important;
}

.tw-app.route-students .form-card .grid.two,
.tw-app.route-students .form-card .grid.three{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px 10px !important;
  margin:0 !important;
}

.tw-app.route-students .form-card .grid.two > div:first-child{
  grid-column:span 2;
}

.tw-app.route-students .form-card label{
  font-size:12px !important;
  line-height:1.25 !important;
  margin:0 0 4px !important;
}

.tw-app.route-students .form-card input,
.tw-app.route-students .form-card select{
  min-height:34px !important;
  height:34px !important;
  padding:6px 9px !important;
  border-radius:10px !important;
  font-size:13px !important;
}

.tw-app.route-students .form-card .actions{
  margin-top:2px !important;
  justify-content:flex-end !important;
}

.tw-app.route-students .form-card .btn{
  min-height:34px !important;
  padding:7px 13px !important;
  font-size:12.5px !important;
}

/* List and filters also more compact */
.tw-app.route-students .list-card{
  padding:14px 16px !important;
}

.tw-app.route-students .filters-unified{
  gap:8px !important;
  margin-bottom:10px !important;
}

.tw-app.route-students .filters-unified select,
.tw-app.route-students .filters-unified input,
.tw-app.route-students .filters-unified .btn{
  min-height:34px !important;
  height:34px !important;
  padding:6px 10px !important;
  font-size:12.5px !important;
}

/* Import form compact */
.tw-app.route-import_students input,
.tw-app.route-import_students select,
.tw-app.route-import_students .btn{
  min-height:36px !important;
  padding:7px 10px !important;
  font-size:13px !important;
}

/* Mobile responsive */
@media(max-width:1100px){
  .tw-app.route-students .form-card .grid.two,
  .tw-app.route-students .form-card .grid.three{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .tw-app.route-students .form-card .grid.two > div:first-child{
    grid-column:span 1;
  }
}

@media(max-width:640px){
  .tw-app.with-sidebar .app-topbar{
    border-radius:0 0 16px 16px !important;
    margin:-14px -14px 12px !important;
  }

  .tw-app.route-students .form-card{
    padding:12px !important;
  }

  .tw-app.route-students .form-card .card-head{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .tw-app.route-students .form-card .grid.two,
  .tw-app.route-students .form-card .grid.three{
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
  }

  .tw-app.route-students .form-card label{
    font-size:11.5px !important;
  }

  .tw-app.route-students .form-card input,
  .tw-app.route-students .form-card select{
    min-height:32px !important;
    height:32px !important;
    padding:5px 8px !important;
    font-size:12.5px !important;
  }

  .tw-app.route-students .form-card .actions .btn{
    width:100%;
  }
}

@media(max-width:430px){
  .tw-app.route-students .form-card .grid.two,
  .tw-app.route-students .form-card .grid.three{
    grid-template-columns:1fr !important;
  }
}

/* Print/PDF remains separated; do not force internal dashboard theme into print */
@media print{
  .tw-app.with-sidebar{
    background:#fff !important;
  }
}


/* ==========================================================================
   Student Front + Mapping UX Upgrade
   - ฟอร์มนักเรียน compact ลดการกรอก
   - dropdown คำนำหน้า/อาชีพ/รายได้
   - หลังบ้าน Mapping ระบุพิกัดง่ายขึ้น
   ========================================================================== */

/* Student-facing pages */
.tw-app.route-home_visit.student-self-mode,
.tw-app.route-home_visit .home-visit-layout.student-self-mode{
  --student-compact-gap:8px;
}

.tw-app.route-home_visit .hv-self-notice{
  border-radius:14px!important;
  padding:10px 12px!important;
  font-size:13px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-form-card{
  max-width:1080px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .card-head{
  padding-bottom:8px!important;
  margin-bottom:8px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-section{
  padding:10px!important;
  margin-top:8px!important;
  border-radius:14px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-section h3{
  font-size:13.5px!important;
  margin-bottom:8px!important;
  padding-bottom:6px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-field-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-detail-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode label{
  font-size:11.5px!important;
  margin-bottom:3px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode input,
.tw-app.route-home_visit .home-visit-layout.student-self-mode select,
.tw-app.route-home_visit .home-visit-layout.student-self-mode textarea{
  min-height:32px!important;
  height:32px!important;
  padding:5px 8px!important;
  font-size:12.5px!important;
  border-radius:9px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode textarea{
  height:auto!important;
  min-height:60px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-eval-item{
  padding:7px!important;
  border-radius:11px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-sat-item{
  padding:7px!important;
  border-radius:11px!important;
  grid-template-columns:minmax(220px,1fr) 220px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-rating label{
  min-height:25px!important;
  font-size:11px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-photo-upload{
  padding:8px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-form-actions{
  padding:8px!important;
}

.tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-form-actions .btn{
  min-height:32px!important;
  padding:6px 11px!important;
  font-size:12px!important;
}

@media(max-width:1100px){
  .tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-grid,
  .tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-field-grid,
  .tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  .tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-grid,
  .tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-field-grid,
  .tw-app.route-home_visit .home-visit-layout.student-self-mode .hv-detail-grid{
    grid-template-columns:1fr!important;
  }
}

/* Dropdowns that reduce typing */
.tw-app select[name="prefix"],
.tw-app select[name="father_occupation"],
.tw-app select[name="mother_occupation"],
.tw-app select[name="guardian_survey_occupation"],
.tw-app select[name="father_income"],
.tw-app select[name="mother_income"]{
  background-image:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.96))!important;
}

/* Mapping UX Upgrade */
.tw-app .hv-map-preview-controls{
  flex-wrap:wrap!important;
}

.tw-app #mapZoomRange{
  width:110px!important;
  min-height:24px!important;
  height:24px!important;
  padding:0!important;
}

.tw-app .hv-map-cursor{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  background:#EFF6FF;
  border:1px solid #BFDBFE;
  color:#1D4ED8;
  font-size:12px;
  font-weight:800;
}

.tw-app .hv-map-precision-panel{
  display:grid;
  gap:9px;
  padding:10px;
  margin:10px 0;
  border:1px solid var(--rb-border, #E2E8F0);
  border-radius:14px;
  background:var(--rb-surface-2, #F8FAFC);
}

.tw-app .hv-map-precision-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.tw-app .hv-map-precision-title strong{
  color:var(--rb-text, #172033);
  font-size:13px;
}

.tw-app .hv-map-precision-title span{
  color:var(--rb-muted, #64748B);
  font-size:12px;
}

.tw-app .hv-map-precision-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
}

.tw-app .hv-map-precision-grid label{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:11px!important;
  font-weight:800!important;
  color:var(--rb-text-2,#334155)!important;
}

.tw-app .hv-map-precision-grid input[type="number"]{
  min-height:30px!important;
  height:30px!important;
  padding:4px 7px!important;
  font-size:12px!important;
}

.tw-app .hv-map-precision-grid .hv-map-snap{
  justify-content:center;
  border:1px solid var(--rb-border,#E2E8F0);
  border-radius:10px;
  padding:5px 8px;
  background:#fff;
  flex-direction:row;
  align-items:center;
  gap:6px;
}

.tw-app .hv-map-precision-grid .hv-map-snap input{
  min-height:auto!important;
  height:auto!important;
  width:auto!important;
}

.tw-app .hv-map-precision-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.tw-app .hv-map-page-stage{
  background-image:
    linear-gradient(rgba(37,99,235,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px);
  background-size:18.9px 18.9px; /* roughly 5mm at base preview */
}

.tw-app .hv-map-table-wrap{
  max-height:420px;
  overflow:auto!important;
}

.tw-app .hv-map-table th,
.tw-app .hv-map-table td{
  padding:6px!important;
  font-size:12px!important;
}

.tw-app .hv-map-table input,
.tw-app .hv-map-table select{
  min-height:30px!important;
  height:30px!important;
  padding:4px 6px!important;
  font-size:12px!important;
}

.tw-app .hv-map-table .map-label{
  min-width:180px;
}

.tw-app .hv-map-table .map-source{
  min-width:190px;
}

.tw-app .hv-map-table .map-match{
  margin-top:4px;
}

@media(max-width:980px){
  .tw-app .hv-map-precision-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:560px){
  .tw-app .hv-map-precision-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* Mapping duplicate/noise prevention */
.tw-app .hv-map-page-help{
  margin:0 10px 10px;
  padding:8px 10px;
  border:1px dashed #BFDBFE;
  border-radius:12px;
  background:#EFF6FF;
  color:#1D4ED8;
  font-size:12px;
  line-height:1.5;
}
.tw-app .hv-map-preview-toggle{user-select:none;}
.tw-app .hv-map-page-item .warn{background:#FFF7ED!important;color:#9A3412!important;}
.tw-app .hv-map-preview-value.warn,
.tw-app .hv-map-preview-value.not-match{display:none!important;}


/* Exact occupation options from official home-visit form */
.tw-app select[name="father_occupation"],
.tw-app select[name="mother_occupation"],
.tw-app select[name="guardian_survey_occupation"],
.tw-app select[name="guardian_occupation_type"]{
  background:#fff!important;
}
.tw-app .hv-detail-grid input[name="guardian_occupation_other"]{
  background:#FFFCFF!important;
  border-color:#D8B4FE!important;
}


/* Clean printed PDF template output: remove mapping helper frames */
@media print{
  .tpl-text,
  .template-text,
  .pdf-map-text,
  .map-text,
  .mapped-text{
    background:transparent!important;
    outline:0!important;
    border:0!important;
    box-shadow:none!important;
  }
  .tpl-check,
  .template-check,
  .pdf-map-check,
  .map-check,
  .mapped-check{
    background:transparent!important;
    outline:0!important;
    border:0!important;
    box-shadow:none!important;
  }
  .tpl-img,
  .template-image,
  .pdf-map-image,
  .map-image,
  .mapped-image{
    outline:0!important;
    border:0!important;
    box-shadow:none!important;
  }
  .page-badge,
  .starter-notice,
  .tpl-debug-list,
  .print-debug,
  .mapping-debug,
  .debug-list{
    display:none!important;
  }
}

/* Test PDF page clean mode */
.tpl-page .tpl-text{
  background:transparent!important;
  outline:0!important;
  border:0!important;
  box-shadow:none!important;
}
.tpl-page .tpl-check{
  background:transparent!important;
  outline:0!important;
  border:0!important;
  box-shadow:none!important;
}
.tpl-page .tpl-img{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}


/* ===== SDQ Report Premium Dashboard ===== */
.report-page-head-premium .actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.report-highlight-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:18px 0 22px}
.report-highlight-card{border-radius:22px;padding:18px 18px 16px;color:#fff;box-shadow:0 18px 32px rgba(15,23,42,.08);display:flex;flex-direction:column;gap:6px}
.report-highlight-card span{font-size:.9rem;font-weight:700;opacity:.95}
.report-highlight-card strong{font-size:2rem;line-height:1;font-weight:800}
.report-highlight-card small{opacity:.9}
.report-highlight-card.blue{background:linear-gradient(180deg,#56a4ff,#1d66d8)}
.report-highlight-card.green{background:linear-gradient(180deg,#58d68d,#18a957)}
.report-highlight-card.violet{background:linear-gradient(180deg,#9b7cff,#6d43d6)}
.report-highlight-card.amber{background:linear-gradient(180deg,#ffb85a,#ee8a1b)}
.report-highlight-card.rose{background:linear-gradient(180deg,#ff7f93,#e1425f)}
.report-filter-shell{padding:16px 18px}
.report-toolbar-form{display:grid;grid-template-columns:180px 150px auto auto minmax(240px,1fr);gap:12px;align-items:center}
.report-search-input{width:100%;height:48px;border:1px solid var(--border-color,#d9dbe7);border-radius:14px;padding:0 14px;background:#fff;font:inherit}
.report-dashboard-card{padding:18px}
.report-table-head h2{margin:0 0 6px;font-size:1.65rem}
.report-dashboard-wrap{margin-top:14px;overflow:auto}
.report-dashboard-table{min-width:1480px}
.report-dashboard-table thead th{position:sticky;top:0;z-index:2;background:#1953ae;color:#fff;border-bottom:none;text-align:center;font-size:.95rem}
.report-dashboard-table td{vertical-align:middle}
.report-student-cell{display:flex;flex-direction:column;gap:4px;min-width:220px}
.report-student-cell strong{font-size:.98rem;color:#172033}
.report-student-cell span{font-size:.82rem;color:#677389}
.status-dot{width:34px;height:34px;border-radius:999px;display:inline-grid;place-items:center;font-weight:800;font-size:1rem;border:1px solid transparent}
.status-dot.done{background:#def7e8;color:#0d8a4f;border-color:#b7e6cb}
.status-dot.wait{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.report-result-chip{min-width:90px;border-radius:18px;padding:8px 10px;text-align:center;border:1px solid #e7eaf0;background:#f8fafc;display:flex;flex-direction:column;gap:2px}
.report-result-chip strong{font-size:.88rem}
.report-result-chip small{font-size:.78rem;color:#5f6b7f}
.report-result-chip.normal{background:#e9f9ef;border-color:#bde7ca;color:#127a45}
.report-result-chip.risk{background:#fff4de;border-color:#f6dca2;color:#9a5f00}
.report-result-chip.problem{background:#ffe7ea;border-color:#ffc2cb;color:#b42339}
.report-result-chip.pending{background:#f1f5f9;border-color:#d9e0e7;color:#64748b}

/* ===== Compact evaluation table ===== */
.evaluation-form-compact{gap:16px}
.evaluation-compact-shell{padding:18px}
.evaluation-compact-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.evaluation-compact-header h2{margin:0 0 6px;font-size:1.7rem}
.evaluation-progress-box{min-width:260px;max-width:320px;display:flex;flex-direction:column;gap:8px}
.evaluation-progress-box input{height:46px}
.evaluation-progress-box small{color:#6b7280}
.evaluation-matrix-wrap{max-height:68vh;overflow:auto;border:1px solid #e6e8f0;border-radius:18px}
.evaluation-matrix-table{min-width:920px}
.evaluation-matrix-table thead th{position:sticky;top:0;z-index:2;background:#f4ebff;color:#32185a;border-bottom:1px solid #e5d7ff;text-align:center;font-weight:700}
.evaluation-matrix-table .col-no{width:70px}
.evaluation-matrix-table .col-question{min-width:440px;text-align:left}
.evaluation-matrix-table .col-choice{width:110px}
.evaluation-matrix-table td.q-no{text-align:center;font-weight:800;color:#3b206b}
.evaluation-matrix-table td.q-text{min-width:420px}
.evaluation-question-text{font-weight:600;color:#1f2a37;line-height:1.55}
.evaluation-question-domain{margin-top:4px;font-size:.78rem;color:#7a8699}
.evaluation-matrix-table td.q-choice{text-align:center}
.matrix-radio{display:inline-grid;place-items:center;cursor:pointer}
.matrix-radio input{position:absolute;opacity:0;pointer-events:none}
.matrix-radio span{width:20px;height:20px;border-radius:999px;border:2px solid #bfa8ea;display:inline-block;position:relative;background:#fff}
.matrix-radio input:checked + span{border-color:#6d3ad6;background:#efe7ff}
.matrix-radio input:checked + span::after{content:'';position:absolute;inset:4px;border-radius:999px;background:#6d3ad6}
.compact-note-card,.impact-box-compact{padding:16px 18px}
.impact-box-compact .grid.two{gap:12px}

@media (max-width: 1200px){
  .report-highlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-toolbar-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-search-input{grid-column:1/-1}
}
@media (max-width: 768px){
  .report-highlight-grid{grid-template-columns:1fr}
  .report-toolbar-form{grid-template-columns:1fr}
  .evaluation-compact-header{flex-direction:column}
  .evaluation-progress-box{min-width:unset;max-width:none;width:100%}
  .evaluation-matrix-wrap{max-height:none}
}


/* ===== Assessment Progress Report ===== */
.assessment-progress-head .actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.assessment-progress-summary{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:14px;margin:18px 0 22px}
.progress-summary-card{border:1px solid #e6e9f2;background:#fff;border-radius:22px;padding:18px;box-shadow:0 16px 34px rgba(15,23,42,.06);display:flex;flex-direction:column;gap:6px}
.progress-summary-card span{font-weight:800;color:#546179;font-size:.9rem}
.progress-summary-card strong{font-size:2rem;line-height:1;color:#172033}
.progress-summary-card small{color:#6b7280}
.progress-summary-card.primary{background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;border-color:transparent}
.progress-summary-card.primary span,.progress-summary-card.primary strong,.progress-summary-card.primary small{color:#fff}
.progress-summary-card.danger strong{color:#dc2626}
.progress-summary-card.success strong{color:#059669}
.progress-filter-card{padding:16px 18px;margin-bottom:18px}
.progress-filter-form{display:grid;grid-template-columns:180px 160px auto minmax(260px,1fr);gap:12px;align-items:center}
.progress-search-input{height:46px;border:1px solid var(--border-color,#d9dbe7);border-radius:14px;padding:0 14px;background:#fff;font:inherit}
.progress-room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.progress-room-card{background:#fff;border:1px solid #e5e9f2;border-radius:24px;padding:18px;box-shadow:0 18px 36px rgba(15,23,42,.06);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.progress-room-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:#94a3b8}
.progress-room-card.complete::before{background:#10b981}
.progress-room-card.partial::before{background:#f59e0b}
.progress-room-card.none::before{background:#ef4444}
.progress-room-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.progress-room-kicker{font-size:.75rem;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.06em}
.progress-room-top h2{margin:4px 0 0;font-size:1.55rem;color:#172033}
.progress-status-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:800;white-space:nowrap}
.progress-status-badge.complete{background:#dcfce7;color:#047857}
.progress-status-badge.partial{background:#fef3c7;color:#92400e}
.progress-status-badge.none{background:#fee2e2;color:#b91c1c}
.progress-percent-main{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.progress-percent-main strong{font-size:2.4rem;line-height:.95;color:#172033}
.progress-percent-main span{color:#64748b;font-weight:700}
.progress-bar-track{height:12px;border-radius:999px;background:#eef2f7;overflow:hidden}
.progress-bar-track span{display:block;height:100%;border-radius:999px;background:#64748b}
.progress-bar-track span.complete{background:linear-gradient(90deg,#10b981,#34d399)}
.progress-bar-track span.partial{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.progress-bar-track span.none{background:linear-gradient(90deg,#ef4444,#fb7185)}
.progress-room-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.progress-room-meta div{border:1px solid #eef2f7;border-radius:16px;padding:10px;background:#f8fafc}
.progress-room-meta span{display:block;color:#64748b;font-size:.78rem;font-weight:800}
.progress-room-meta strong{color:#172033}
.progress-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.progress-breakdown>div{border:1px solid #edf1f7;border-radius:14px;padding:9px;background:#fff}
.progress-breakdown span{display:block;font-size:.78rem;color:#64748b;font-weight:800}
.progress-breakdown strong{font-size:.92rem;color:#172033}
.mini-progress{height:6px;border-radius:999px;background:#eef2f7;margin-top:7px;overflow:hidden}
.mini-progress i{display:block;height:100%;border-radius:999px;background:#2563eb}
.progress-alert-empty{border:1px dashed #fecaca;background:#fff1f2;color:#b91c1c;border-radius:14px;padding:10px;font-weight:800;text-align:center}
.progress-room-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.progress-room-actions .btn{flex:1;justify-content:center}
@media print{
  .progress-filter-card,.progress-room-actions,.assessment-progress-head .actions{display:none!important}
  .assessment-progress-summary{grid-template-columns:repeat(5,1fr)}
  .progress-room-grid{grid-template-columns:repeat(2,1fr)}
  .progress-room-card{break-inside:avoid;box-shadow:none}
}
@media(max-width:1200px){
  .assessment-progress-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .progress-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .progress-filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .progress-search-input{grid-column:1/-1}
}
@media(max-width:720px){
  .assessment-progress-summary,.progress-room-grid,.progress-filter-form{grid-template-columns:1fr}
  .progress-percent-main{align-items:flex-start;flex-direction:column}
}


/* ===== Split SDQ / Home Visit Progress Reports ===== */
.homevisit-progress-head .page-kicker{color:#0f766e}
.homevisit-progress-summary .progress-summary-card.primary{background:linear-gradient(135deg,#0f766e,#2dd4bf)}
.homevisit-progress-summary .progress-summary-card:nth-child(3) strong{color:#2563eb}
.homevisit-progress-summary .progress-summary-card:nth-child(4) strong{color:#7c3aed}
.progress-breakdown.two-cols{grid-template-columns:repeat(2,1fr)}
.homevisit-progress-grid .progress-room-card.complete::before{background:#0f766e}
.homevisit-progress-grid .progress-room-card.partial::before{background:#d97706}
.homevisit-progress-grid .progress-room-card.none::before{background:#dc2626}
.homevisit-progress-grid .mini-progress i{background:#0f766e}
.homevisit-progress-grid .progress-room-kicker{color:#0f766e}
@media(max-width:720px){
  .progress-breakdown.two-cols{grid-template-columns:1fr}
}


/* ==========================================================================
   BACKEND MODERN REBRAND 2026
   Goal:
   - Modern readable back-office theme
   - Google font stack
   - Mobile-first evaluation matrix
   - Distinct SDQ progress report and Home Visit progress report designs
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800;900&family=Sarabun:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --modern-font: "Noto Sans Thai", "Sarabun", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  --m-bg:#F6F8FB;
  --m-bg-soft:#F1F5F9;
  --m-card:#FFFFFF;
  --m-card-2:#FAFCFF;
  --m-line:#E2E8F0;
  --m-line-2:#CBD5E1;
  --m-text:#0F172A;
  --m-text-2:#334155;
  --m-muted:#64748B;
  --m-primary:#2563EB;
  --m-primary-2:#1D4ED8;
  --m-primary-soft:#EFF6FF;
  --m-teal:#0F766E;
  --m-teal-soft:#ECFDF5;
  --m-purple:#7C3AED;
  --m-purple-soft:#F5F3FF;
  --m-amber:#D97706;
  --m-amber-soft:#FFFBEB;
  --m-red:#DC2626;
  --m-red-soft:#FEF2F2;
  --m-green:#059669;
  --m-green-soft:#ECFDF5;
  --m-radius:18px;
  --m-radius-lg:24px;
  --m-shadow:0 16px 42px rgba(15,23,42,.08);
  --m-shadow-soft:0 8px 22px rgba(15,23,42,.055);
}

/* Global backend readability */
html,body,.tw-app,.tw-app *{
  font-family:var(--modern-font)!important;
  letter-spacing:0!important;
}
.tw-app.with-sidebar{
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.07), transparent 34%),
    radial-gradient(circle at 90% 5%, rgba(20,184,166,.06), transparent 36%),
    var(--m-bg)!important;
  color:var(--m-text)!important;
}
.tw-app.with-sidebar .main,
.tw-app.with-sidebar .shell,
.tw-app.with-sidebar .main-inner{
  background:transparent!important;
  color:var(--m-text)!important;
}

/* Sidebar rebrand: readable executive navy */
.tw-app.with-sidebar .sidebar{
  background:
    linear-gradient(180deg,#0B1220 0%,#101827 54%,#0F172A 100%)!important;
  border-right:1px solid rgba(148,163,184,.16)!important;
  box-shadow:14px 0 42px rgba(15,23,42,.20)!important;
}
.tw-app.with-sidebar .sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 4%,rgba(59,130,246,.18),transparent 25%),
    radial-gradient(circle at 95% 96%,rgba(45,212,191,.14),transparent 28%);
  pointer-events:none;
}
.tw-app.with-sidebar .brand,
.tw-app.with-sidebar .user-panel,
.tw-app.with-sidebar .nav-group{
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(226,232,240,.11)!important;
  border-radius:20px!important;
  box-shadow:none!important;
}
.tw-app.with-sidebar .brand-title,
.tw-app.with-sidebar .user-name,
.tw-app.with-sidebar .nav-group-title,
.tw-app.with-sidebar .nav a,
.tw-app.with-sidebar .nav-link{
  color:#F8FAFC!important;
  text-shadow:none!important;
}
.tw-app.with-sidebar .brand-sub,
.tw-app.with-sidebar .user-role,
.tw-app.with-sidebar .user-scope,
.tw-app.with-sidebar .nav-section-title{
  color:#CBD5E1!important;
  opacity:1!important;
}
.tw-app.with-sidebar .nav a,
.tw-app.with-sidebar .nav-link{
  min-height:40px!important;
  border-radius:14px!important;
  font-weight:760!important;
  font-size:13px!important;
  color:#E5E7EB!important;
  background:transparent!important;
  border:1px solid transparent!important;
}
.tw-app.with-sidebar .nav a:hover,
.tw-app.with-sidebar .nav-link:hover{
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(255,255,255,.10)!important;
  transform:translateX(2px)!important;
}
.tw-app.with-sidebar .nav a.active,
.tw-app.with-sidebar .nav-link.active{
  background:#FFFFFF!important;
  color:#0F172A!important;
  border-color:#FFFFFF!important;
  box-shadow:0 14px 24px rgba(0,0,0,.18)!important;
}
.tw-app.with-sidebar .nav-icon,
.tw-app.with-sidebar .nav-group-icon,
.tw-app.with-sidebar .brand-mark,
.tw-app.with-sidebar .user-avatar{
  background:#FFFFFF!important;
  color:#1D4ED8!important;
  box-shadow:0 10px 20px rgba(0,0,0,.12)!important;
}

/* Content cards */
.tw-app.with-sidebar .app-topbar,
.tw-app.with-sidebar .card,
.tw-app.with-sidebar .unified-card,
.tw-app.with-sidebar .list-card,
.tw-app.with-sidebar .report-dashboard-card,
.tw-app.with-sidebar .progress-filter-card,
.tw-app.with-sidebar .hv-form-card,
.tw-app.with-sidebar .trait5-form-card{
  background:rgba(255,255,255,.92)!important;
  border:1px solid var(--m-line)!important;
  border-radius:var(--m-radius-lg)!important;
  box-shadow:var(--m-shadow-soft)!important;
}
.tw-app.with-sidebar .page-head,
.tw-app.with-sidebar .page-head-unified{
  background:linear-gradient(180deg,#FFFFFF,#F8FAFC)!important;
  border:1px solid var(--m-line)!important;
  border-radius:28px!important;
  box-shadow:var(--m-shadow-soft)!important;
  padding:22px 24px!important;
}
.tw-app.with-sidebar h1,
.tw-app.with-sidebar h2,
.tw-app.with-sidebar h3,
.tw-app.with-sidebar .topbar-title{
  color:var(--m-text)!important;
  font-weight:850!important;
}
.tw-app.with-sidebar .page-kicker,
.tw-app.with-sidebar .topbar-kicker{
  color:var(--m-primary)!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
}
.tw-app.with-sidebar .muted,
.tw-app.with-sidebar p{
  color:var(--m-muted)!important;
}
.tw-app.with-sidebar label{
  color:var(--m-text-2)!important;
  font-weight:780!important;
}
.tw-app.with-sidebar input,
.tw-app.with-sidebar select,
.tw-app.with-sidebar textarea{
  border:1px solid var(--m-line-2)!important;
  background:#FFFFFF!important;
  color:var(--m-text)!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.tw-app.with-sidebar input:focus,
.tw-app.with-sidebar select:focus,
.tw-app.with-sidebar textarea:focus{
  border-color:var(--m-primary)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.13)!important;
}
.tw-app.with-sidebar .btn,
.tw-app.with-sidebar button{
  border-radius:14px!important;
  font-weight:820!important;
  box-shadow:none!important;
}
.tw-app.with-sidebar .btn-primary,
.tw-app.with-sidebar button[type="submit"]{
  background:linear-gradient(135deg,#2563EB,#1D4ED8)!important;
  color:#fff!important;
  border:0!important;
}
.tw-app.with-sidebar .btn-outline{
  background:#fff!important;
  border:1px solid var(--m-line)!important;
  color:var(--m-primary-2)!important;
}

/* ===== Evaluation matrix: desktop clean, mobile card table ===== */
.evaluation-compact-shell{
  padding:18px!important;
  border-radius:26px!important;
}
.evaluation-matrix-wrap{
  border:1px solid var(--m-line)!important;
  border-radius:22px!important;
  overflow:auto!important;
  max-height:70vh!important;
  background:#fff!important;
}
.evaluation-matrix-table{
  border-collapse:separate!important;
  border-spacing:0!important;
  min-width:920px!important;
}
.evaluation-matrix-table thead th{
  background:#EAF1FF!important;
  color:#173A73!important;
  border-bottom:1px solid #CFE0FF!important;
  font-size:13px!important;
  text-align:center!important;
  padding:12px 10px!important;
}
.evaluation-matrix-table tbody td{
  border-bottom:1px solid #EEF2F7!important;
  padding:10px!important;
}
.evaluation-question-text{
  font-weight:720!important;
  color:#172033!important;
}
.evaluation-question-domain{
  color:#64748B!important;
}
.matrix-radio span{
  width:22px!important;
  height:22px!important;
  border:2px solid #94A3B8!important;
}
.matrix-radio input:checked + span{
  border-color:#2563EB!important;
  background:#DBEAFE!important;
}
.matrix-radio input:checked + span::after{
  background:#2563EB!important;
}

/* Mobile evaluation: transform table rows to compact cards */
@media(max-width:720px){
  .evaluation-compact-shell{
    padding:12px!important;
    border-radius:20px!important;
  }
  .evaluation-compact-header{
    gap:10px!important;
    margin-bottom:10px!important;
  }
  .evaluation-compact-header h2{
    font-size:20px!important;
  }
  .evaluation-progress-box{
    width:100%!important;
    min-width:0!important;
  }
  .evaluation-progress-box input{
    height:38px!important;
    min-height:38px!important;
  }
  .evaluation-matrix-wrap{
    max-height:none!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
  }
  .evaluation-matrix-table{
    min-width:0!important;
    width:100%!important;
    border-collapse:separate!important;
  }
  .evaluation-matrix-table thead{
    display:none!important;
  }
  .evaluation-matrix-table,
  .evaluation-matrix-table tbody,
  .evaluation-matrix-table tr,
  .evaluation-matrix-table td{
    display:block!important;
    width:100%!important;
  }
  .evaluation-matrix-table tr{
    margin:0 0 10px!important;
    border:1px solid var(--m-line)!important;
    border-radius:18px!important;
    background:#fff!important;
    overflow:hidden!important;
    box-shadow:0 8px 18px rgba(15,23,42,.055)!important;
  }
  .evaluation-matrix-table td{
    border:0!important;
    padding:8px 10px!important;
  }
  .evaluation-matrix-table td.q-no{
    display:inline-flex!important;
    width:auto!important;
    margin:10px 10px 0!important;
    padding:4px 10px!important;
    border-radius:999px!important;
    background:#EFF6FF!important;
    color:#1D4ED8!important;
    font-size:12px!important;
  }
  .evaluation-matrix-table td.q-text{
    padding:8px 12px 10px!important;
    min-width:0!important;
  }
  .evaluation-question-text{
    font-size:14px!important;
    line-height:1.55!important;
  }
  .evaluation-matrix-table td.q-choice{
    display:inline-flex!important;
    width:33.333%!important;
    justify-content:center!important;
    align-items:center!important;
    float:left!important;
    padding:8px 4px 12px!important;
    background:#F8FAFC!important;
    border-top:1px solid #EEF2F7!important;
  }
  .evaluation-matrix-table td.q-choice::before{
    content:attr(data-label);
    display:block;
    margin-right:6px;
    color:#475569;
    font-size:12px;
    font-weight:800;
  }
  .evaluation-matrix-table tr::after{
    content:"";
    display:block;
    clear:both;
  }
  .form-actions-sticky{
    bottom:0!important;
    border-radius:18px 18px 0 0!important;
    padding:10px!important;
    background:rgba(15,23,42,.94)!important;
  }
  .form-actions-sticky .form-actions-note{
    color:#E2E8F0!important;
    font-size:12px!important;
  }
  .form-actions-sticky .btn{
    width:100%!important;
    min-height:42px!important;
  }
}

/* ===== Progress Reports: make both pages distinct and modern ===== */

/* SDQ Progress: dark command-center style */
.sdq-progress-neo-head{
  background:
    radial-gradient(circle at 12% 0%,rgba(96,165,250,.23),transparent 30%),
    linear-gradient(135deg,#0F172A 0%,#172554 60%,#1E1B4B 100%)!important;
  border:0!important;
  color:#fff!important;
  box-shadow:0 22px 54px rgba(15,23,42,.24)!important;
}
.sdq-progress-neo-head h1,
.sdq-progress-neo-head .page-kicker{
  color:#fff!important;
}
.sdq-progress-neo-head .muted,
.sdq-progress-neo-head p{
  color:#DBEAFE!important;
}
.sdq-progress-neo-head .btn-outline{
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.22)!important;
  color:#fff!important;
}
.sdq-progress-summary{
  display:grid!important;
  grid-template-columns:1.4fr repeat(4,1fr)!important;
  gap:16px!important;
}
.sdq-progress-summary .progress-summary-card{
  border:0!important;
  border-radius:26px!important;
  background:#fff!important;
  box-shadow:0 18px 46px rgba(15,23,42,.09)!important;
  position:relative!important;
  overflow:hidden!important;
}
.sdq-progress-summary .progress-summary-card::after{
  content:"";
  position:absolute;
  right:-30px;
  top:-30px;
  width:92px;
  height:92px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
}
.sdq-progress-summary .progress-summary-card.primary{
  background:linear-gradient(135deg,#2563EB,#7C3AED)!important;
}
.sdq-progress-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
.sdq-progress-grid .progress-room-card{
  border:0!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,#FFFFFF,#F8FAFC)!important;
  box-shadow:0 20px 48px rgba(15,23,42,.10)!important;
  padding:20px!important;
}
.sdq-progress-grid .progress-room-card::before{
  width:100%!important;
  height:5px!important;
  bottom:auto!important;
  background:linear-gradient(90deg,#2563EB,#7C3AED)!important;
}
.sdq-progress-grid .progress-percent-main strong{
  font-size:42px!important;
  color:#172554!important;
}
.sdq-progress-grid .progress-bar-track{
  height:14px!important;
  background:#E2E8F0!important;
}
.sdq-progress-grid .progress-breakdown>div{
  background:#F8FAFC!important;
  border-radius:18px!important;
}

/* Home Visit Progress: calm mint document-tracking style */
.homevisit-progress-neo-head{
  background:
    radial-gradient(circle at 92% 18%,rgba(45,212,191,.20),transparent 34%),
    linear-gradient(135deg,#ECFDF5 0%,#FFFFFF 58%,#F0FDFA 100%)!important;
  border:1px solid #CCFBF1!important;
  color:#064E3B!important;
}
.homevisit-progress-neo-head .page-kicker,
.homevisit-progress-neo-head h1{
  color:#064E3B!important;
}
.homevisit-progress-neo-head .muted,
.homevisit-progress-neo-head p{
  color:#0F766E!important;
}
.homevisit-progress-summary{
  grid-template-columns:1.35fr repeat(4,1fr)!important;
}
.homevisit-progress-summary .progress-summary-card{
  border:1px solid #CCFBF1!important;
  border-radius:26px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 18px 42px rgba(15,118,110,.09)!important;
}
.homevisit-progress-summary .progress-summary-card.primary{
  background:linear-gradient(135deg,#0F766E,#14B8A6)!important;
}
.homevisit-progress-grid .progress-room-card{
  border:1px solid #CCFBF1!important;
  border-radius:30px!important;
  background:
    linear-gradient(180deg,#FFFFFF,#F8FFFD)!important;
  box-shadow:0 22px 46px rgba(15,118,110,.10)!important;
  padding:20px!important;
}
.homevisit-progress-grid .progress-room-card::before{
  width:6px!important;
  border-radius:0 999px 999px 0!important;
}
.homevisit-progress-grid .progress-room-kicker,
.homevisit-progress-grid .progress-room-top h2{
  color:#064E3B!important;
}
.homevisit-progress-grid .progress-percent-main strong{
  color:#0F766E!important;
}
.homevisit-progress-grid .progress-bar-track span.complete,
.homevisit-progress-grid .progress-bar-track span.partial,
.homevisit-progress-grid .progress-bar-track span.none{
  background:linear-gradient(90deg,#0F766E,#2DD4BF)!important;
}
.homevisit-progress-grid .progress-breakdown.two-cols>div{
  background:#F0FDFA!important;
  border-color:#CCFBF1!important;
}

@media(max-width:1200px){
  .sdq-progress-summary,
  .homevisit-progress-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .sdq-progress-grid,
  .homevisit-progress-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:720px){
  .sdq-progress-summary,
  .homevisit-progress-summary,
  .sdq-progress-grid,
  .homevisit-progress-grid{
    grid-template-columns:1fr!important;
  }
  .sdq-progress-neo-head,
  .homevisit-progress-neo-head{
    border-radius:22px!important;
    padding:18px!important;
  }
  .progress-room-card{
    border-radius:22px!important;
  }
}
@media print{
  .sdq-progress-neo-head,
  .homevisit-progress-neo-head{
    background:#fff!important;
    color:#000!important;
    border:1px solid #ddd!important;
    box-shadow:none!important;
  }
  .sdq-progress-grid .progress-room-card,
  .homevisit-progress-grid .progress-room-card{
    box-shadow:none!important;
    break-inside:avoid!important;
  }
}


/* ==========================================================================
   FORCE BACKEND SIDEBAR BLUE FIX
   ใช้ selector แบบตรงกับ .sidebar เพื่อบังคับแก้เมนูจาง/มองไม่เห็น
   ไม่ใช้กับหน้า Login เพราะหน้า Login ไม่มี .sidebar หลังบ้าน
   ========================================================================== */

/* โครงหลังบ้าน */
html body .sidebar{
  background:
    linear-gradient(180deg,#07306F 0%,#0B4AA2 52%,#06265A 100%) !important;
  color:#FFFFFF !important;
  border-right:0 !important;
  box-shadow:12px 0 34px rgba(7,48,111,.24) !important;
}

html body .sidebar::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 18% 6%,rgba(147,197,253,.28),transparent 32%),
    radial-gradient(circle at 90% 92%,rgba(56,189,248,.18),transparent 28%) !important;
  pointer-events:none !important;
}

html body .sidebar-inner,
html body .sidebar .brand,
html body .sidebar .user-panel,
html body .sidebar .nav-group,
html body .sidebar .nav,
html body .sidebar .nav-section-title{
  position:relative !important;
  z-index:2 !important;
}

/* กล่องใน sidebar */
html body .sidebar .brand,
html body .sidebar .user-panel,
html body .sidebar .nav-group{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:22px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.12) !important;
}

/* บังคับสีข้อความทั้งหมดใน sidebar ให้มองเห็น */
html body .sidebar,
html body .sidebar *,
html body .sidebar a,
html body .sidebar span,
html body .sidebar div,
html body .sidebar p,
html body .sidebar small,
html body .sidebar strong,
html body .sidebar button{
  color:#EAF3FF !important;
  opacity:1 !important;
  text-shadow:none !important;
  -webkit-text-fill-color:currentColor !important;
}

/* หัวข้อสำคัญ */
html body .sidebar .brand-title,
html body .sidebar .user-name,
html body .sidebar .nav-group-title{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  font-weight:900 !important;
}

html body .sidebar .brand-sub,
html body .sidebar .user-role,
html body .sidebar .user-scope,
html body .sidebar .nav-section-title,
html body .sidebar .nav-group-subtitle{
  color:#BFDBFE !important;
  -webkit-text-fill-color:#BFDBFE !important;
  font-weight:700 !important;
}

/* ลิงก์เมนู */
html body .sidebar .nav a,
html body .sidebar .nav-link,
html body .sidebar a.nav-link{
  color:#EAF3FF !important;
  -webkit-text-fill-color:#EAF3FF !important;
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:15px !important;
  min-height:40px !important;
  font-weight:850 !important;
  font-size:13px !important;
}

html body .sidebar .nav a:hover,
html body .sidebar .nav-link:hover,
html body .sidebar a.nav-link:hover{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.22) !important;
}

/* Active menu ต้องอ่านชัด */
html body .sidebar .nav a.active,
html body .sidebar .nav-link.active,
html body .sidebar a.nav-link.active,
html body .sidebar .active > a{
  color:#07306F !important;
  -webkit-text-fill-color:#07306F !important;
  background:#FFFFFF !important;
  border-color:#FFFFFF !important;
  box-shadow:0 12px 24px rgba(0,0,0,.18) !important;
}

/* ให้ข้อความข้างใน active เปลี่ยนสีตาม */
html body .sidebar .nav a.active *,
html body .sidebar .nav-link.active *,
html body .sidebar a.nav-link.active *,
html body .sidebar .active > a *{
  color:#07306F !important;
  -webkit-text-fill-color:#07306F !important;
}

/* icon ในเมนู */
html body .sidebar .nav-icon,
html body .sidebar .nav-group-icon,
html body .sidebar .brand-mark,
html body .sidebar .user-avatar{
  background:rgba(255,255,255,.18) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:none !important;
}

html body .sidebar .nav a.active .nav-icon,
html body .sidebar .nav-link.active .nav-icon,
html body .sidebar a.nav-link.active .nav-icon{
  background:#EAF2FF !important;
  color:#0B4AA2 !important;
  -webkit-text-fill-color:#0B4AA2 !important;
  border-color:#CFE0FF !important;
}

/* ลูกศร/chevron */
html body .sidebar .nav-chevron,
html body .sidebar .nav-arrow,
html body .sidebar .nav-group-caret,
html body .sidebar .caret,
html body .sidebar [class*="chevron"],
html body .sidebar [class*="arrow"]{
  color:#BFDBFE !important;
  -webkit-text-fill-color:#BFDBFE !important;
  opacity:1 !important;
}

/* ล้าง rule เก่าที่ทำให้ตัวอักษรกลืนกับพื้น */
html body .sidebar [style*="color"]{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
}

/* พื้นที่เนื้อหาใช้ฟ้าอ่อน อ่านง่าย */
html body .tw-app.with-sidebar,
html body .with-sidebar{
  background:linear-gradient(180deg,#F8FBFF 0%,#EEF5FC 100%) !important;
}

html body .with-sidebar .card,
html body .with-sidebar .unified-card,
html body .with-sidebar .page-head,
html body .with-sidebar .page-head-unified,
html body .with-sidebar .app-topbar,
html body .with-sidebar .list-card,
html body .with-sidebar .report-dashboard-card{
  background:#FFFFFF !important;
  border-color:#D6E2F0 !important;
}

/* ตารางยังไม่ล้น */
html body .with-sidebar .table-wrap,
html body .with-sidebar .report-dashboard-wrap,
html body .with-sidebar .premium-table-wrap,
html body .with-sidebar .data-table-wrap{
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

html body .with-sidebar .report-dashboard-table{
  min-width:1080px !important;
  width:max-content !important;
}

@media(max-width:720px){
  html body .with-sidebar .report-dashboard-table{
    min-width:960px !important;
  }
}


/* ==========================================================================
   FORCE PURPLE READABLE BACKEND THEME
   กลับธีมหลังบ้านเป็นม่วง แต่เน้นอ่านง่าย / contrast สูง / ไม่แสบตา
   Scope: เฉพาะหลังบ้านที่มี .sidebar และ .with-sidebar
   ========================================================================== */

html body .tw-app.with-sidebar,
html body .with-sidebar{
  --pr-bg:#F7F4FC;
  --pr-surface:#FFFFFF;
  --pr-border:#DDD3F2;
  --pr-text:#201433;
  --pr-text-2:#3B2E4F;
  --pr-muted:#6B5E7C;
  --pr-purple:#5B21B6;
  --pr-purple-2:#4C1D95;
  --pr-purple-3:#6D28D9;
  --pr-purple-soft:#F2ECFF;
  background:
    radial-gradient(circle at 18% 0%, rgba(109,40,217,.10), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(168,85,247,.08), transparent 34%),
    linear-gradient(180deg,#FBF9FF 0%,#F5F0FC 100%) !important;
  color:var(--pr-text) !important;
}

/* Main content */
html body .with-sidebar .main,
html body .with-sidebar .main-inner,
html body .with-sidebar .shell{
  background:transparent !important;
  color:var(--pr-text) !important;
}

/* Sidebar purple: readable high contrast */
html body .sidebar{
  background:
    radial-gradient(circle at 18% 7%,rgba(216,180,254,.22),transparent 33%),
    linear-gradient(180deg,#3B0764 0%,#4C1D95 48%,#2E1065 100%) !important;
  color:#FFFFFF !important;
  border-right:0 !important;
  box-shadow:14px 0 36px rgba(46,16,101,.24) !important;
}

html body .sidebar::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.085),transparent 42%),
    radial-gradient(circle at 90% 92%,rgba(232,121,249,.16),transparent 26%) !important;
  pointer-events:none !important;
}

html body .sidebar-inner,
html body .sidebar .brand,
html body .sidebar .user-panel,
html body .sidebar .nav-group,
html body .sidebar .nav,
html body .sidebar .nav-section-title{
  position:relative !important;
  z-index:2 !important;
}

/* Sidebar blocks */
html body .sidebar .brand,
html body .sidebar .user-panel,
html body .sidebar .nav-group{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:22px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.14) !important;
}

/* Force all sidebar text visible */
html body .sidebar,
html body .sidebar *,
html body .sidebar a,
html body .sidebar span,
html body .sidebar div,
html body .sidebar p,
html body .sidebar small,
html body .sidebar strong,
html body .sidebar button{
  color:#F8F2FF !important;
  opacity:1 !important;
  text-shadow:none !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Important titles */
html body .sidebar .brand-title,
html body .sidebar .user-name,
html body .sidebar .nav-group-title{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  font-weight:900 !important;
}

html body .sidebar .brand-sub,
html body .sidebar .user-role,
html body .sidebar .user-scope,
html body .sidebar .nav-section-title,
html body .sidebar .nav-group-subtitle{
  color:#E9D5FF !important;
  -webkit-text-fill-color:#E9D5FF !important;
  font-weight:750 !important;
}

/* Navigation links */
html body .sidebar .nav a,
html body .sidebar .nav-link,
html body .sidebar a.nav-link{
  color:#F4E8FF !important;
  -webkit-text-fill-color:#F4E8FF !important;
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:15px !important;
  min-height:40px !important;
  font-weight:850 !important;
  font-size:13px !important;
}

html body .sidebar .nav a:hover,
html body .sidebar .nav-link:hover,
html body .sidebar a.nav-link:hover{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.22) !important;
}

/* Active menu: white background with dark purple text */
html body .sidebar .nav a.active,
html body .sidebar .nav-link.active,
html body .sidebar a.nav-link.active,
html body .sidebar .active > a{
  color:#3B0764 !important;
  -webkit-text-fill-color:#3B0764 !important;
  background:#FFFFFF !important;
  border-color:#FFFFFF !important;
  box-shadow:0 12px 24px rgba(0,0,0,.18), inset 5px 0 0 #F59E0B !important;
}

html body .sidebar .nav a.active *,
html body .sidebar .nav-link.active *,
html body .sidebar a.nav-link.active *,
html body .sidebar .active > a *{
  color:#3B0764 !important;
  -webkit-text-fill-color:#3B0764 !important;
}

/* Icons */
html body .sidebar .nav-icon,
html body .sidebar .nav-group-icon,
html body .sidebar .brand-mark,
html body .sidebar .user-avatar{
  background:rgba(255,255,255,.18) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:none !important;
}

html body .sidebar .nav a.active .nav-icon,
html body .sidebar .nav-link.active .nav-icon,
html body .sidebar a.nav-link.active .nav-icon{
  background:#F2ECFF !important;
  color:#5B21B6 !important;
  -webkit-text-fill-color:#5B21B6 !important;
  border-color:#DDD3F2 !important;
}

/* Arrows */
html body .sidebar .nav-chevron,
html body .sidebar .nav-arrow,
html body .sidebar .nav-group-caret,
html body .sidebar .caret,
html body .sidebar [class*="chevron"],
html body .sidebar [class*="arrow"]{
  color:#E9D5FF !important;
  -webkit-text-fill-color:#E9D5FF !important;
  opacity:1 !important;
}

/* Override inline old color */
html body .sidebar [style*="color"]{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
}

/* Content surfaces: soft purple, readable text */
html body .with-sidebar .app-topbar,
html body .with-sidebar .page-head,
html body .with-sidebar .page-head-unified,
html body .with-sidebar .card,
html body .with-sidebar .unified-card,
html body .with-sidebar .list-card,
html body .with-sidebar .report-dashboard-card,
html body .with-sidebar .progress-filter-card,
html body .with-sidebar .filter-card,
html body .with-sidebar .premium-table-card{
  background:rgba(255,255,255,.97) !important;
  color:var(--pr-text) !important;
  border:1px solid var(--pr-border) !important;
  box-shadow:0 10px 28px rgba(59,7,100,.065) !important;
}

html body .with-sidebar .page-head,
html body .with-sidebar .page-head-unified{
  border-radius:26px !important;
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFAFF 100%) !important;
}

html body .with-sidebar h1,
html body .with-sidebar h2,
html body .with-sidebar h3,
html body .with-sidebar .topbar-title{
  color:var(--pr-text) !important;
  font-weight:850 !important;
}

html body .with-sidebar .page-kicker,
html body .with-sidebar .topbar-kicker,
html body .with-sidebar .section-chip{
  color:var(--pr-purple) !important;
  font-weight:900 !important;
}

html body .with-sidebar p,
html body .with-sidebar .muted,
html body .with-sidebar small{
  color:var(--pr-muted) !important;
}

/* Forms */
html body .with-sidebar label{
  color:var(--pr-text-2) !important;
  font-weight:800 !important;
}

html body .with-sidebar input,
html body .with-sidebar select,
html body .with-sidebar textarea{
  color:var(--pr-text) !important;
  background:#FFFFFF !important;
  border:1px solid #CFC2EA !important;
  box-shadow:none !important;
}

html body .with-sidebar input::placeholder{
  color:#8F7FA6 !important;
}

html body .with-sidebar input:focus,
html body .with-sidebar select:focus,
html body .with-sidebar textarea:focus{
  border-color:var(--pr-purple) !important;
  box-shadow:0 0 0 4px rgba(91,33,182,.14) !important;
}

/* Buttons */
html body .with-sidebar .btn-primary,
html body .with-sidebar button[type="submit"]{
  background:linear-gradient(180deg,#6D28D9,#5B21B6) !important;
  border-color:#5B21B6 !important;
  color:#FFFFFF !important;
  box-shadow:0 10px 20px rgba(91,33,182,.18) !important;
}

html body .with-sidebar .btn-outline{
  background:#FFFFFF !important;
  border:1px solid #CFC2EA !important;
  color:#4C1D95 !important;
}

/* Tables: keep inside card, readable purple header */
html body .with-sidebar .table-wrap,
html body .with-sidebar .report-dashboard-wrap,
html body .with-sidebar .premium-table-wrap,
html body .with-sidebar .data-table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  border:1px solid #DDD3F2 !important;
  border-radius:20px !important;
  background:#FFFFFF !important;
  box-shadow:none !important;
}

html body .with-sidebar .report-dashboard-card,
html body .with-sidebar .list-card,
html body .with-sidebar .unified-card{
  overflow:hidden !important;
}

html body .with-sidebar table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}

html body .with-sidebar .report-dashboard-table{
  min-width:1080px !important;
  width:max-content !important;
}

html body .with-sidebar th{
  background:#F2ECFF !important;
  color:#2E1065 !important;
  border-bottom:1px solid #DDD3F2 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

html body .with-sidebar td{
  color:#3B2E4F !important;
  border-bottom:1px solid #F0EAFB !important;
}

html body .with-sidebar tbody tr:hover{
  background:#FCFAFF !important;
}

html body .with-sidebar .report-dashboard-table th,
html body .with-sidebar .report-dashboard-table td{
  padding:9px 10px !important;
  font-size:12.5px !important;
  vertical-align:middle !important;
}

/* Report chips compact */
html body .with-sidebar .report-result-chip{
  min-width:76px !important;
  max-width:92px !important;
  padding:6px 8px !important;
  border-radius:14px !important;
  box-shadow:none !important;
}

html body .with-sidebar .report-student-cell{
  min-width:170px !important;
  max-width:210px !important;
}

html body .with-sidebar .status-dot{
  width:28px !important;
  height:28px !important;
}

/* Scroll hint */
html body .with-sidebar .ds-scroll-hint,
html body .with-sidebar .table-scroll-hint{
  display:block !important;
  margin:0 0 8px !important;
  padding:8px 10px !important;
  border:1px dashed #CFC2EA !important;
  border-radius:12px !important;
  background:#FCFAFF !important;
  color:#6B5E7C !important;
  font-size:12px !important;
  font-weight:760 !important;
}

@media(max-width:720px){
  html body .with-sidebar .report-dashboard-table{
    min-width:960px !important;
  }
}