/* ==========================================================================
   Pink Purple Readable Theme
   Theme: ชมพู–ม่วงแบบทางการ อ่านง่าย ไม่ฉูดฉาด
   Purpose: ลดความจืดของธีมทางการ แต่ยังคง contrast สูงและไม่ใช้ gradient หนัก
   ========================================================================== */

:root{
  --tw-primary:#6D28D9;
  --tw-primary-700:#5B21B6;
  --tw-primary-900:#3B0764;

  --tw-secondary:#DB2777;
  --tw-secondary-600:#BE185D;

  --tw-amber:#B45309;
  --tw-success:#047857;
  --tw-danger:#B91C1C;
  --tw-warning:#B45309;
  --tw-info:#1D4ED8;

  --tw-bg:#FCF7FF;
  --tw-bg-soft:#F8F0FF;
  --tw-card:#FFFFFF;
  --tw-card-soft:#FFFFFF;

  --tw-border:#E9D5FF;
  --tw-border-strong:#D8B4FE;

  --tw-text:#1F1235;
  --tw-text-soft:#2F2347;
  --tw-muted:#67577F;
  --tw-muted-2:#7C3AED;

  --tw-shadow-sm:0 1px 3px rgba(88,28,135,.07);
  --tw-shadow:0 8px 22px rgba(88,28,135,.09);
  --tw-shadow-lg:0 16px 40px rgba(88,28,135,.12);

  --tw-radius:16px;
  --tw-radius-sm:10px;
  --tw-ring:0 0 0 4px rgba(109,40,217,.16);
}

html[data-theme="dark"]{
  --tw-bg:#120B1F;
  --tw-bg-soft:#1B1230;
  --tw-card:#211633;
  --tw-card-soft:#211633;
  --tw-border:#49325F;
  --tw-border-strong:#6D28D9;
  --tw-text:#FAF5FF;
  --tw-text-soft:#F3E8FF;
  --tw-muted:#D8B4FE;
  --tw-muted-2:#F9A8D4;
  --tw-shadow-sm:0 1px 3px rgba(0,0,0,.22);
  --tw-shadow:0 8px 22px rgba(0,0,0,.26);
  --tw-shadow-lg:0 16px 40px rgba(0,0,0,.32);
}

/* Base */
.tw-app{
  background:
    radial-gradient(circle at 8% 6%, rgba(219,39,119,.08), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(109,40,217,.07), transparent 28%),
    var(--tw-bg) !important;
  color:var(--tw-text) !important;
  font-size:14px;
  line-height:1.7;
}

/* Sidebar: ชมพู–ม่วงแบบอ่านง่าย */
.tw-app .sidebar{
  background:#4C1D95 !important;
  border-right:1px solid rgba(255,255,255,.14) !important;
  box-shadow:8px 0 24px rgba(88,28,135,.16) !important;
}

.tw-app .sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 10%, rgba(236,72,153,.20), transparent 26%),
    radial-gradient(circle at 70% 92%, rgba(219,39,119,.18), transparent 30%);
  pointer-events:none;
}

.tw-app .sidebar-inner{
  position:relative;
  z-index:1;
  padding:16px 12px !important;
}

.tw-app .brand,
.tw-app .user-panel,
.tw-app .nav-group{
  background:rgba(255,255,255,.09) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:none !important;
}

.tw-app .brand-title,
.tw-app .user-name,
.tw-app .nav-group-title{
  color:#FFFFFF !important;
  font-weight:850 !important;
  text-shadow:none !important;
}

.tw-app .brand-sub,
.tw-app .user-scope,
.tw-app .user-role,
.tw-app .nav-section-title{
  color:#F3E8FF !important;
  opacity:1 !important;
  text-shadow:none !important;
}

.tw-app .nav a,
.tw-app .nav-link{
  color:#FDF4FF !important;
  background:transparent !important;
  border:1px solid transparent !important;
  font-weight:760 !important;
  box-shadow:none !important;
}

.tw-app .nav a:hover,
.tw-app .nav-link:hover{
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(255,255,255,.12) !important;
  transform:none !important;
}

.tw-app .nav a.active,
.tw-app .nav-link.active{
  background:#FFFFFF !important;
  color:#4C1D95 !important;
  border-color:#FFFFFF !important;
  box-shadow:none !important;
}

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

/* Topbar */
.tw-app .app-topbar{
  background:#FFFFFF !important;
  border:1px solid var(--tw-border) !important;
  border-radius:18px !important;
  margin:0 0 18px !important;
  padding:12px 18px !important;
  box-shadow:var(--tw-shadow-sm) !important;
  backdrop-filter:none !important;
}

html[data-theme="dark"] .tw-app .app-topbar{
  background:#211633 !important;
  border-color:#49325F !important;
}

.tw-app .topbar-kicker{
  color:#DB2777 !important;
  font-weight:850 !important;
  letter-spacing:.04em !important;
}

.tw-app .topbar-title{
  color:var(--tw-text) !important;
  font-size:16px !important;
  font-weight:900 !important;
}

.tw-app .topbar-chip,
.tw-app .theme-toggle{
  background:#FFFFFF !important;
  border:1px solid var(--tw-border) !important;
  color:#2F2347 !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .tw-app .topbar-chip,
html[data-theme="dark"] .tw-app .theme-toggle{
  background:#120B1F !important;
  color:#FAF5FF !important;
  border-color:#49325F !important;
}

/* Login */
.tw-app.auth-page{
  background:
    radial-gradient(circle at top left, rgba(219,39,119,.10), transparent 34%),
    radial-gradient(circle at bottom right, rgba(109,40,217,.12), transparent 36%),
    #FCF7FF !important;
}

.tw-app .login-shell{
  background:#FFFFFF !important;
  border:1px solid var(--tw-border) !important;
  box-shadow:var(--tw-shadow-lg) !important;
}

.tw-app .login-visual{
  background-image:
    linear-gradient(0deg, rgba(76,29,149,.50), rgba(76,29,149,.34)),
    var(--login-bg) !important;
  background-size:cover,cover !important;
  background-position:center,center !important;
}

.tw-app .login-panel{
  background:#FFFFFF !important;
}

html[data-theme="dark"] .tw-app .login-panel{
  background:#211633 !important;
}

.tw-app .login-tab.active,
.tw-app .auth-tabs .active{
  background:#6D28D9 !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
}

/* Cards / Hero */
.tw-app .hero,
.tw-app .card,
.tw-app .filter-card,
.tw-app .premium-table-card,
.tw-app .trait5-form-card,
.tw-app .trait5-level-card,
.tw-app .graph-card,
.tw-app .report-card{
  background:#FFFFFF !important;
  border:1px solid var(--tw-border) !important;
  border-radius:16px !important;
  box-shadow:var(--tw-shadow-sm) !important;
}

html[data-theme="dark"] .tw-app .hero,
html[data-theme="dark"] .tw-app .card,
html[data-theme="dark"] .tw-app .filter-card,
html[data-theme="dark"] .tw-app .premium-table-card,
html[data-theme="dark"] .tw-app .trait5-form-card,
html[data-theme="dark"] .tw-app .trait5-level-card,
html[data-theme="dark"] .tw-app .graph-card,
html[data-theme="dark"] .tw-app .report-card{
  background:#211633 !important;
  border-color:#49325F !important;
}

.tw-app .hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(219,39,119,.07), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(109,40,217,.07), transparent 30%) !important;
  pointer-events:none;
}

.tw-app .hero{
  padding:20px !important;
}

.tw-app .hero-eyebrow,
.tw-app .section-chip,
.tw-app .pill{
  background:#F3E8FF !important;
  color:#5B21B6 !important;
  border:1px solid #E9D5FF !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .tw-app .hero-eyebrow,
html[data-theme="dark"] .tw-app .section-chip,
html[data-theme="dark"] .tw-app .pill{
  background:#2E174D !important;
  color:#F3E8FF !important;
  border-color:#6D28D9 !important;
}

/* Typography */
.tw-app h1,
.tw-app .page-title,
.tw-app .hero h1{
  color:var(--tw-text) !important;
  font-size:clamp(20px,1.75vw,26px) !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

.tw-app h2,
.tw-app .card-head h2{
  color:var(--tw-text) !important;
  font-size:18px !important;
  font-weight:850 !important;
}

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

/* Buttons: solid purple with pink accent only on special focus */
.tw-app .btn,
.tw-app button,
.tw-app .print-btn{
  border-radius:10px !important;
  box-shadow:none !important;
  transform:none !important;
}

.tw-app .btn:hover,
.tw-app button:hover{
  transform:none !important;
}

.tw-app .btn-primary,
.tw-app button[type="submit"],
.tw-app .print-btn{
  background:#6D28D9 !important;
  color:#FFFFFF !important;
  border:1px solid #6D28D9 !important;
  box-shadow:none !important;
}

.tw-app .btn-primary:hover,
.tw-app button[type="submit"]:hover,
.tw-app .print-btn:hover{
  background:#5B21B6 !important;
  border-color:#5B21B6 !important;
}

.tw-app .btn-outline,
.tw-app .btn-secondary{
  background:#FFFFFF !important;
  color:#5B21B6 !important;
  border:1px solid #D8B4FE !important;
}

html[data-theme="dark"] .tw-app .btn-outline,
html[data-theme="dark"] .tw-app .btn-secondary{
  background:#120B1F !important;
  color:#F3E8FF !important;
  border-color:#49325F !important;
}

/* Forms */
.tw-app input[type="text"],
.tw-app input[type="number"],
.tw-app input[type="password"],
.tw-app input[type="date"],
.tw-app input[type="file"],
.tw-app select,
.tw-app textarea{
  border:1px solid #D8B4FE !important;
  background:#FFFFFF !important;
  color:#1F1235 !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .tw-app input[type="text"],
html[data-theme="dark"] .tw-app input[type="number"],
html[data-theme="dark"] .tw-app input[type="password"],
html[data-theme="dark"] .tw-app input[type="date"],
html[data-theme="dark"] .tw-app input[type="file"],
html[data-theme="dark"] .tw-app select,
html[data-theme="dark"] .tw-app textarea{
  background:#120B1F !important;
  color:#FAF5FF !important;
  border-color:#49325F !important;
}

.tw-app input:focus,
.tw-app select:focus,
.tw-app textarea:focus{
  border-color:#6D28D9 !important;
  box-shadow:0 0 0 3px rgba(109,40,217,.16) !important;
}

/* Tables */
.tw-app .table-wrap{
  border:1px solid var(--tw-border) !important;
  box-shadow:none !important;
}

.tw-app th{
  background:#F3E8FF !important;
  color:#3B0764 !important;
  border-bottom:1px solid #E9D5FF !important;
}

html[data-theme="dark"] .tw-app th{
  background:#2E174D !important;
  color:#F5D0FE !important;
  border-bottom-color:#49325F !important;
}

.tw-app th,
.tw-app td{
  color:var(--tw-text-soft) !important;
  border-bottom:1px solid #F0E4FF !important;
}

html[data-theme="dark"] .tw-app th,
html[data-theme="dark"] .tw-app td{
  color:#F3E8FF !important;
  border-bottom-color:#49325F !important;
}

.tw-app tbody tr:hover{
  background:#FCF7FF !important;
}

html[data-theme="dark"] .tw-app tbody tr:hover{
  background:#1B1230 !important;
}

/* Assessment choices */
.tw-app .answer-option{
  background:#FFFFFF !important;
  border:1px solid #D8B4FE !important;
  color:#2F2347 !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .tw-app .answer-option{
  background:#120B1F !important;
  color:#FAF5FF !important;
  border-color:#49325F !important;
}

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

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

/* Trait 5 */
.tw-app .trait5-score-chip{
  background:#FFFFFF !important;
  border:1px solid #D8B4FE !important;
  color:#2F2347 !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .tw-app .trait5-score-chip{
  background:#120B1F !important;
  color:#FAF5FF !important;
  border-color:#49325F !important;
}

.tw-app .trait5-score-chip span{
  color:#6D28D9 !important;
}

html[data-theme="dark"] .tw-app .trait5-score-chip span{
  color:#F0ABFC !important;
}

.tw-app .trait5-score-chip:hover,
.tw-app .trait5-score-chip:has(input:checked),
.tw-app .trait5-score-chip.checked{
  background:#6D28D9 !important;
  color:#FFFFFF !important;
  border-color:#6D28D9 !important;
  transform:none !important;
  box-shadow:none !important;
}

.tw-app .trait5-score-chip:hover span,
.tw-app .trait5-score-chip:hover small,
.tw-app .trait5-score-chip:has(input:checked) span,
.tw-app .trait5-score-chip:has(input:checked) small,
.tw-app .trait5-score-chip.checked span,
.tw-app .trait5-score-chip.checked small{
  color:#FFFFFF !important;
}

/* Badges */
.tw-app .badge-success{
  background:#DCFCE7 !important;
  color:#14532D !important;
}

.tw-app .badge-warning{
  background:#FEF3C7 !important;
  color:#78350F !important;
}

.tw-app .badge-danger{
  background:#FEE2E2 !important;
  color:#7F1D1D !important;
}

/* Footer */
.tw-app .app-footer{
  color:var(--tw-muted) !important;
  border-top:1px solid var(--tw-border) !important;
}

.tw-app .app-footer-main{
  color:#5B21B6 !important;
}

html[data-theme="dark"] .tw-app .app-footer-main{
  color:#F0ABFC !important;
}

/* Mobile */
@media(max-width:980px){
  .tw-app .app-topbar{
    border-radius:0 0 16px 16px !important;
    margin:-14px -14px 14px !important;
  }

  .tw-app .sidebar{
    box-shadow:18px 0 50px rgba(15,23,42,.20) !important;
  }
}

@media(max-width:640px){
  .tw-app h1,
  .tw-app .hero h1{
    font-size:20px !important;
  }

  .tw-app .answer-option{
    min-height:34px !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;
}


/* ==========================================================================
   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;
  }
}