/* ==========================================================================
   READABLE TABLE FIX 2026
   ลดสีแสบตา + แก้ตารางรายงานล้นขอบ
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800;900&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --fix-font:"Noto Sans Thai","IBM Plex Sans Thai","Sarabun","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;
  --fix-bg:#F6F8FB;
  --fix-card:#FFFFFF;
  --fix-border:#D9E2EC;
  --fix-border-2:#C9D5E3;
  --fix-text:#172033;
  --fix-text-2:#334155;
  --fix-muted:#64748B;
  --fix-primary:#2F5CC8;
  --fix-primary-soft:#EDF3FF;
}

html,body,.tw-app,.tw-app *,.tw-app input,.tw-app select,.tw-app textarea,.tw-app button{
  font-family:var(--fix-font)!important;
  letter-spacing:0!important;
}

.tw-app.with-sidebar,
.tw-app.with-sidebar .main,
.tw-app.with-sidebar .main-inner,
.tw-app.with-sidebar .shell{
  background:#F6F8FB!important;
  color:var(--fix-text)!important;
}

.tw-app.with-sidebar .sidebar{
  background:#FFFFFF!important;
  border-right:1px solid var(--fix-border)!important;
  box-shadow:8px 0 24px rgba(15,23,42,.055)!important;
}
.tw-app.with-sidebar .sidebar::before,
.tw-app.with-sidebar .sidebar::after{display:none!important;}

.tw-app.with-sidebar .brand,
.tw-app.with-sidebar .user-panel,
.tw-app.with-sidebar .nav-group{
  background:#FFFFFF!important;
  border:1px solid var(--fix-border)!important;
  border-radius:20px!important;
  box-shadow:0 4px 14px rgba(15,23,42,.035)!important;
}

.tw-app.with-sidebar .brand-title,
.tw-app.with-sidebar .user-name,
.tw-app.with-sidebar .nav-group-title{
  color:var(--fix-text)!important;
  opacity:1!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:#64748B!important;
  opacity:1!important;
  text-shadow:none!important;
}
.tw-app.with-sidebar .nav a,
.tw-app.with-sidebar .nav-link{
  color:#334155!important;
  opacity:1!important;
  text-shadow:none!important;
  background:transparent!important;
  border:1px solid transparent!important;
  min-height:38px!important;
  border-radius:14px!important;
  font-size:13px!important;
  font-weight:750!important;
}
.tw-app.with-sidebar .nav a:hover,
.tw-app.with-sidebar .nav-link:hover{
  background:#EEF4FF!important;
  border-color:#D7E4FF!important;
  color:#244AA5!important;
}
.tw-app.with-sidebar .nav a.active,
.tw-app.with-sidebar .nav-link.active{
  background:#EAF1FF!important;
  border-color:#BDD0FF!important;
  color:#1E3A8A!important;
  box-shadow:inset 4px 0 0 #2F5CC8!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:#F1F5F9!important;
  border:1px solid #DCE6F1!important;
  color:#2F5CC8!important;
  box-shadow:none!important;
}

.tw-app.with-sidebar .app-topbar,
.tw-app.with-sidebar .page-head,
.tw-app.with-sidebar .page-head-unified,
.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 .filter-card{
  background:#FFFFFF!important;
  color:var(--fix-text)!important;
  border:1px solid var(--fix-border)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.045)!important;
}
.tw-app.with-sidebar .page-head,
.tw-app.with-sidebar .page-head-unified{border-radius: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(--fix-text)!important;
  font-weight:850!important;
}
.tw-app.with-sidebar .page-kicker,
.tw-app.with-sidebar .topbar-kicker{
  color:#2F5CC8!important;
  font-weight:900!important;
}
.tw-app.with-sidebar p,
.tw-app.with-sidebar .muted,
.tw-app.with-sidebar small{color:#64748B!important;}

.tw-app.with-sidebar label{color:#334155!important;font-weight:760!important;}
.tw-app.with-sidebar input,
.tw-app.with-sidebar select,
.tw-app.with-sidebar textarea{
  color:#172033!important;
  background:#FFFFFF!important;
  border:1px solid #C9D5E3!important;
  box-shadow:none!important;
}
.tw-app.with-sidebar input::placeholder{color:#94A3B8!important;}
.tw-app.with-sidebar input:focus,
.tw-app.with-sidebar select:focus,
.tw-app.with-sidebar textarea:focus{
  border-color:#2F5CC8!important;
  box-shadow:0 0 0 4px rgba(47,92,200,.13)!important;
}

.tw-app.with-sidebar .btn-primary,
.tw-app.with-sidebar button[type="submit"]{
  background:#2F5CC8!important;
  border-color:#2F5CC8!important;
  color:#FFFFFF!important;
}
.tw-app.with-sidebar .btn-outline{
  background:#FFFFFF!important;
  border:1px solid #C9D5E3!important;
  color:#1E3A8A!important;
}

/* แก้ตารางล้นขอบ */
.tw-app.with-sidebar .table-wrap,
.tw-app.with-sidebar .report-dashboard-wrap,
.tw-app.with-sidebar .premium-table-wrap,
.tw-app.with-sidebar .data-table-wrap{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  border:1px solid #D9E2EC!important;
  border-radius:18px!important;
  box-shadow:none!important;
  background:#FFFFFF!important;
}

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

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

.tw-app.with-sidebar .report-dashboard-table{
  min-width:1120px!important;
  width:max-content!important;
}

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

.tw-app.with-sidebar th{
  background:#F1F5F9!important;
  color:#1E293B!important;
  border-bottom:1px solid #D9E2EC!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
.tw-app.with-sidebar td{
  color:#334155!important;
  border-bottom:1px solid #EEF2F7!important;
}
.tw-app.with-sidebar tbody tr:hover{background:#FAFCFF!important;}

.report-result-chip{
  min-width:76px!important;
  max-width:92px!important;
  padding:6px 8px!important;
  border-radius:14px!important;
  box-shadow:none!important;
  font-size:12px!important;
}
.report-result-chip strong{font-size:12px!important;font-weight:820!important;}
.report-result-chip small{font-size:10.5px!important;color:#64748B!important;}

.report-student-cell{min-width:170px!important;max-width:210px!important;}
.report-student-cell strong{color:#172033!important;font-size:13px!important;}
.report-student-cell span{color:#64748B!important;font-size:11.5px!important;}

.status-dot{width:28px!important;height:28px!important;font-size:14px!important;}
.status-dot.done{background:#E7F8EF!important;color:#047857!important;border-color:#BFEBD4!important;}
.status-dot.wait{background:#FFF1F2!important;color:#B91C1C!important;border-color:#FECACA!important;}

.report-highlight-card,
.progress-summary-card{
  background:#FFFFFF!important;
  color:#172033!important;
  border:1px solid #D9E2EC!important;
  box-shadow:0 6px 18px rgba(15,23,42,.045)!important;
}
.report-highlight-card span,
.report-highlight-card small,
.progress-summary-card span,
.progress-summary-card small{color:#64748B!important;}
.report-highlight-card strong,
.progress-summary-card strong{color:#172033!important;}

.sdq-progress-neo-head,
.homevisit-progress-neo-head{
  background:#FFFFFF!important;
  border:1px solid #D9E2EC!important;
  box-shadow:0 8px 24px rgba(15,23,42,.045)!important;
}
.sdq-progress-neo-head h1,
.homevisit-progress-neo-head h1{color:#172033!important;}
.sdq-progress-neo-head .muted,
.homevisit-progress-neo-head .muted{color:#64748B!important;}

.progress-room-card{
  background:#FFFFFF!important;
  border:1px solid #D9E2EC!important;
  color:#172033!important;
  box-shadow:0 6px 18px rgba(15,23,42,.045)!important;
}

.ds-scroll-hint,
.table-scroll-hint{
  display:block!important;
  margin:0 0 8px!important;
  padding:8px 10px!important;
  border:1px dashed #C9D5E3!important;
  border-radius:12px!important;
  background:#F8FAFC!important;
  color:#64748B!important;
  font-size:12px!important;
  font-weight:760!important;
}

@media(max-width:1200px){
  .report-highlight-grid,
  .assessment-progress-summary,
  .progress-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:720px){
  .report-highlight-grid,
  .assessment-progress-summary,
  .progress-room-grid{grid-template-columns:1fr!important;}
  .tw-app.with-sidebar .page-head,
  .tw-app.with-sidebar .page-head-unified{
    padding:16px!important;
    border-radius:20px!important;
  }
  .tw-app.with-sidebar .report-dashboard-table{min-width:980px!important;}
  .tw-app.with-sidebar .report-dashboard-table th,
  .tw-app.with-sidebar .report-dashboard-table td{
    font-size:12px!important;
    padding:8px!important;
  }
}

@media print{
  .tw-app.with-sidebar .sidebar,
  .tw-app.with-sidebar .app-topbar,
  .progress-filter-card,
  .report-filter-shell,
  .ds-scroll-hint{display:none!important;}
  .tw-app.with-sidebar .table-wrap,
  .tw-app.with-sidebar .report-dashboard-wrap{overflow:visible!important;}
}


/* ==========================================================================
   BACKEND BLUE THEME OVERRIDE
   Scope: เฉพาะหลังบ้านที่มี .with-sidebar เท่านั้น ไม่กระทบหน้าบ้าน/Login
   ========================================================================== */

body .tw-app.with-sidebar{
  --bb-bg:#F3F7FC;
  --bb-surface:#FFFFFF;
  --bb-border:#D7E2F0;
  --bb-text:#102033;
  --bb-muted:#64748B;
  --bb-blue:#1E5BD8;
  --bb-blue-2:#153E9C;
  --bb-blue-soft:#EAF2FF;
  --bb-sidebar-1:#0B2A5B;
  --bb-sidebar-2:#0F3B82;
  --bb-sidebar-3:#1453B8;
  background:
    radial-gradient(circle at 22% 0%, rgba(30,91,216,.10), transparent 30%),
    linear-gradient(180deg,#F8FBFF 0%,#EFF5FC 100%)!important;
  color:var(--bb-text)!important;
}

/* Main area */
body .tw-app.with-sidebar .main,
body .tw-app.with-sidebar .main-inner,
body .tw-app.with-sidebar .shell{
  background:transparent!important;
  color:var(--bb-text)!important;
}

/* Sidebar: modern readable blue */
body .tw-app.with-sidebar .sidebar{
  background:
    radial-gradient(circle at 22% 8%, rgba(96,165,250,.24), transparent 30%),
    linear-gradient(180deg,var(--bb-sidebar-1) 0%,var(--bb-sidebar-2) 54%,#09214A 100%)!important;
  border-right:0!important;
  box-shadow:14px 0 36px rgba(8,31,72,.22)!important;
  color:#FFFFFF!important;
}

body .tw-app.with-sidebar .sidebar::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08),transparent 40%),
    radial-gradient(circle at 82% 92%,rgba(14,165,233,.18),transparent 26%)!important;
  pointer-events:none!important;
}

body .tw-app.with-sidebar .sidebar-inner,
body .tw-app.with-sidebar .brand,
body .tw-app.with-sidebar .user-panel,
body .tw-app.with-sidebar .nav-group{
  position:relative!important;
  z-index:1!important;
}

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

/* Force every sidebar text visible */
body .tw-app.with-sidebar .sidebar,
body .tw-app.with-sidebar .sidebar *,
body .tw-app.with-sidebar .brand-title,
body .tw-app.with-sidebar .user-name,
body .tw-app.with-sidebar .nav-group-title,
body .tw-app.with-sidebar .nav a,
body .tw-app.with-sidebar .nav-link{
  text-shadow:none!important;
}

body .tw-app.with-sidebar .brand-title,
body .tw-app.with-sidebar .user-name,
body .tw-app.with-sidebar .nav-group-title{
  color:#FFFFFF!important;
  opacity:1!important;
  font-weight:850!important;
}

body .tw-app.with-sidebar .brand-sub,
body .tw-app.with-sidebar .user-role,
body .tw-app.with-sidebar .user-scope,
body .tw-app.with-sidebar .nav-section-title,
body .tw-app.with-sidebar .nav-group-subtitle{
  color:#BFDBFE!important;
  opacity:1!important;
  font-weight:650!important;
}

/* Sidebar icons */
body .tw-app.with-sidebar .nav-icon,
body .tw-app.with-sidebar .nav-group-icon,
body .tw-app.with-sidebar .brand-mark,
body .tw-app.with-sidebar .user-avatar{
  background:rgba(255,255,255,.15)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  color:#FFFFFF!important;
  box-shadow:none!important;
}

/* Navigation links */
body .tw-app.with-sidebar .nav a,
body .tw-app.with-sidebar .nav-link{
  color:#EAF2FF!important;
  opacity:1!important;
  background:transparent!important;
  border:1px solid transparent!important;
  min-height:40px!important;
  border-radius:15px!important;
  font-size:13px!important;
  font-weight:800!important;
}

body .tw-app.with-sidebar .nav a:hover,
body .tw-app.with-sidebar .nav-link:hover{
  background:rgba(255,255,255,.13)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:#FFFFFF!important;
  transform:translateX(2px)!important;
}

body .tw-app.with-sidebar .nav a.active,
body .tw-app.with-sidebar .nav-link.active{
  background:#FFFFFF!important;
  border-color:#FFFFFF!important;
  color:#0B2A5B!important;
  box-shadow:0 12px 24px rgba(0,0,0,.17)!important;
}

body .tw-app.with-sidebar .nav a.active .nav-icon,
body .tw-app.with-sidebar .nav-link.active .nav-icon{
  background:var(--bb-blue-soft)!important;
  color:var(--bb-blue)!important;
  border-color:#D7E7FF!important;
}

/* Chevron/caret must be visible */
body .tw-app.with-sidebar .nav-chevron,
body .tw-app.with-sidebar .nav-arrow,
body .tw-app.with-sidebar .nav-group-caret,
body .tw-app.with-sidebar .caret{
  color:#BFDBFE!important;
  opacity:1!important;
}

/* Content surfaces: light blue SaaS */
body .tw-app.with-sidebar .app-topbar,
body .tw-app.with-sidebar .page-head,
body .tw-app.with-sidebar .page-head-unified,
body .tw-app.with-sidebar .card,
body .tw-app.with-sidebar .unified-card,
body .tw-app.with-sidebar .list-card,
body .tw-app.with-sidebar .report-dashboard-card,
body .tw-app.with-sidebar .progress-filter-card,
body .tw-app.with-sidebar .filter-card,
body .tw-app.with-sidebar .premium-table-card{
  background:rgba(255,255,255,.96)!important;
  color:var(--bb-text)!important;
  border:1px solid var(--bb-border)!important;
  box-shadow:0 10px 28px rgba(15,43,85,.065)!important;
}

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

body .tw-app.with-sidebar h1,
body .tw-app.with-sidebar h2,
body .tw-app.with-sidebar h3,
body .tw-app.with-sidebar .topbar-title{
  color:#102033!important;
  font-weight:850!important;
}

body .tw-app.with-sidebar .page-kicker,
body .tw-app.with-sidebar .topbar-kicker,
body .tw-app.with-sidebar .section-chip{
  color:var(--bb-blue)!important;
  font-weight:900!important;
}

body .tw-app.with-sidebar p,
body .tw-app.with-sidebar .muted,
body .tw-app.with-sidebar small{
  color:var(--bb-muted)!important;
}

/* Buttons */
body .tw-app.with-sidebar .btn-primary,
body .tw-app.with-sidebar button[type="submit"]{
  background:linear-gradient(180deg,#2F6BEA,#1E5BD8)!important;
  border-color:#1E5BD8!important;
  color:#FFFFFF!important;
  box-shadow:0 10px 20px rgba(30,91,216,.18)!important;
}

body .tw-app.with-sidebar .btn-outline{
  background:#FFFFFF!important;
  border:1px solid #BFD0E8!important;
  color:#153E9C!important;
}

/* Forms */
body .tw-app.with-sidebar label{
  color:#24364F!important;
  font-weight:800!important;
}

body .tw-app.with-sidebar input,
body .tw-app.with-sidebar select,
body .tw-app.with-sidebar textarea{
  color:#102033!important;
  background:#FFFFFF!important;
  border:1px solid #BFD0E8!important;
  box-shadow:none!important;
}

body .tw-app.with-sidebar input::placeholder{
  color:#8A9AB0!important;
}

body .tw-app.with-sidebar input:focus,
body .tw-app.with-sidebar select:focus,
body .tw-app.with-sidebar textarea:focus{
  border-color:#1E5BD8!important;
  box-shadow:0 0 0 4px rgba(30,91,216,.14)!important;
}

/* Tables: keep inside card */
body .tw-app.with-sidebar .table-wrap,
body .tw-app.with-sidebar .report-dashboard-wrap,
body .tw-app.with-sidebar .premium-table-wrap,
body .tw-app.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 #D7E2F0!important;
  border-radius:20px!important;
  background:#FFFFFF!important;
  box-shadow:none!important;
}

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

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

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

body .tw-app.with-sidebar th{
  background:#EDF3FF!important;
  color:#142B55!important;
  border-bottom:1px solid #D7E2F0!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

body .tw-app.with-sidebar td{
  color:#26364A!important;
  border-bottom:1px solid #EEF3F8!important;
}

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

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

/* Report result chips compact */
body .tw-app.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;
}

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

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

/* Scroll hint */
body .tw-app.with-sidebar .ds-scroll-hint,
body .tw-app.with-sidebar .table-scroll-hint{
  display:block!important;
  margin:0 0 8px!important;
  padding:8px 10px!important;
  border:1px dashed #BFD0E8!important;
  border-radius:12px!important;
  background:#F8FBFF!important;
  color:#52637A!important;
  font-size:12px!important;
  font-weight:760!important;
}

/* Do not touch frontend/login */
body .tw-app.auth-page .sidebar{
  all:unset;
}

@media(max-width:720px){
  body .tw-app.with-sidebar .report-dashboard-table{
    min-width:980px!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;
  }
}