:root{
  --bg:#eef1ef;
  --surface:#ffffff;
  --surface-alt:#e4ebe7;
  --ink:#16233a;
  --ink-soft:#48566a;
  --ink-faint:#7c8798;
  --accent:#0b6e5c;
  --accent-ink:#ffffff;
  --accent-soft:#dcece7;
  --warn:#a5541f;
  --warn-soft:#f3e2d8;
  --danger:#a8334a;
  --danger-soft:#f5dde3;
  --ok:#1f7a4d;
  --ok-soft:#dcefe2;
  --line:#d5dbd6;
  --sidebar-admin-bg:#0d2e27;
  --sidebar-w:250px;
  --topbar-h:64px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Sarabun',-apple-system,'Noto Sans Thai',sans-serif;
  font-size:.98rem;
}
h1,h2,h3,h4,h5,h6,.brand,.stat-value{font-family:'Bai Jamjuree','Sarabun',sans-serif;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}

/* ---- auth ---- */
.auth-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,var(--ink) 0%,#1d3a34 55%,var(--accent) 130%);
  padding:1.5rem;
}
.auth-card{
  width:100%;
  max-width:400px;
  background:var(--surface);
  border-radius:16px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
  padding:2.2rem 2rem;
}
.auth-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.4rem;
}
.auth-card h1{font-size:1.3rem; font-weight:700; margin-bottom:1.4rem; line-height:1.4;}
.auth-card .form-label{font-size:.86rem; color:var(--ink-soft);}
.btn-brand{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
}
.btn-brand:hover{background:#095c4d; border-color:#095c4d; color:#fff;}

/* ---- app shell ---- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w);
  background:var(--ink);
  color:#dfe7e2;
  flex-shrink:0;
  position:fixed;
  top:0; bottom:0; left:0;
  overflow-y:auto;
  transition:transform .2s ease;
  z-index:1030;
}
.sidebar .brand{
  display:flex; align-items:center; gap:.6rem;
  padding:1.2rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff; font-weight:700; font-size:1rem; line-height:1.35;
}
.sidebar .brand .badge-dot{
  width:34px;height:34px;border-radius:9px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;
}
.sidebar nav{padding:.8rem .6rem;}
.sidebar .nav-section{
  font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:#7f9089; padding:.9rem .6rem .3rem;
}
.sidebar a.nav-link{
  color:#c9d6cf; padding:.55rem .7rem; border-radius:8px; font-size:.9rem;
  display:flex; align-items:center; gap:.6rem; margin-bottom:.15rem;
}
.sidebar a.nav-link i{font-size:1rem; width:1.1rem; text-align:center;}
.sidebar a.nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar a.nav-link.active{background:var(--accent); color:#fff; font-weight:600;}

.admin-shell .sidebar{background:var(--sidebar-admin-bg);}

.main-col{margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 1.4rem; position:sticky; top:0; z-index:1020;
}
.topbar h1{font-size:1.15rem; font-weight:700; margin:0;}
.topbar .user-chip{display:flex; align-items:center; gap:.6rem; font-size:.85rem;}
.topbar .user-chip .role-pill{
  font-family:'JetBrains Mono',monospace; font-size:.66rem; background:var(--accent-soft); color:var(--accent);
  padding:.15rem .5rem; border-radius:999px;
}
.sidebar-toggle{display:none;}

.content{padding:1.6rem 1.6rem 3rem;}

/* ---- cards / stats ---- */
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.stat-card .stat-label{font-size:.78rem; color:var(--ink-faint);}
.stat-card .stat-value{font-size:1.7rem; font-weight:700; font-variant-numeric:tabular-nums;}
.stat-card .stat-sub{font-size:.76rem; color:var(--ink-soft);}

.stat-card.stat-card-filter{cursor:pointer; transition:border-color .15s, box-shadow .15s;}
.stat-card.stat-card-filter:hover{border-color:var(--accent);}
.stat-card.stat-card-filter.active{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}

.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.3rem;
}
.panel-title{font-weight:700; font-size:1.02rem; margin-bottom:1rem; display:flex; align-items:center; justify-content:space-between;}

.badge-soft{font-weight:500; font-size:.72rem; padding:.28rem .6rem; border-radius:999px;}
.badge-soft.ok{background:var(--ok-soft); color:var(--ok);}
.badge-soft.accent{background:var(--accent-soft); color:var(--accent);}
.badge-soft.warn{background:var(--warn-soft); color:var(--warn);}
.badge-soft.danger{background:var(--danger-soft); color:var(--danger);}
.badge-soft.muted{background:var(--surface-alt); color:var(--ink-faint);}

.level-chip{
  background:var(--surface-alt); border-radius:10px; padding:.5rem .85rem;
  display:flex; flex-direction:column; gap:.1rem; min-width:84px;
}
.level-chip .lc-label{font-size:.7rem; font-weight:600; color:var(--ink-soft);}
.level-chip .lc-value{font-size:1.2rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.25;}
.level-chip .lc-value .lc-unit{font-size:.72rem; font-weight:500; color:var(--ink-faint); margin-left:.2rem;}

.domain-head{
  display:flex; align-items:center; gap:.7rem;
  margin:2.2rem 0 1rem;
}
.domain-head:first-child{margin-top:0;}
.domain-head .icon{
  width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0;
}
.domain-head .text h2{font-size:1.08rem; font-weight:700; margin:0;}
.domain-head .text p{font-size:.8rem; color:var(--ink-faint); margin:0;}

.info-chip-row{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem;}
@media (max-width:760px){.info-chip-row{grid-template-columns:repeat(2,1fr);}}
.info-chip{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:.95rem 1.05rem; display:flex; align-items:center; gap:.7rem;
}
.info-chip .icon{
  width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0; background:var(--surface-alt); color:var(--ink-soft);
}
.info-chip .icon.ok{background:var(--ok-soft); color:var(--ok);}
.info-chip .icon.accent{background:var(--accent-soft); color:var(--accent);}
.info-chip .icon.warn{background:var(--warn-soft); color:var(--warn);}
.info-chip .icon.danger{background:var(--danger-soft); color:var(--danger);}
.info-chip .v{font-weight:700; font-size:1.05rem; line-height:1.25; font-variant-numeric:tabular-nums;}
.info-chip .l{font-size:.74rem; color:var(--ink-faint);}
.info-chip .l b.up{color:var(--ok);}
.info-chip .l b.down{color:var(--danger);}

/* ---- RT/NT distribution + amphoe comparison bars ---- */
.dist-row{display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem;}
.dist-row:last-child{margin-bottom:0;}
.dist-year{width:52px; flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--ink-soft);}
.dist-bar{flex:1; display:flex; height:26px; border-radius:6px; overflow:hidden; background:var(--surface-alt);}
.dist-seg{display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#fff; font-weight:600; white-space:nowrap; overflow:hidden;}
.dist-n{width:60px; flex-shrink:0; text-align:right; font-size:.76rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;}

.amphoe-row{display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem;}
.amphoe-row:last-child{margin-bottom:0;}
.amphoe-name{width:100px; flex-shrink:0; font-size:.83rem; color:var(--ink-soft);}
.amphoe-track{flex:1; background:var(--surface-alt); border-radius:6px; height:22px; position:relative;}
.amphoe-fill{background:var(--accent); height:100%; border-radius:6px; display:flex; align-items:center; justify-content:flex-end; padding-right:.5rem; min-width:2.2rem;}
.amphoe-fill .val{font-size:.74rem; color:#fff; font-weight:600; font-variant-numeric:tabular-nums;}
.amphoe-flag{font-size:.7rem; color:var(--danger); font-weight:600; white-space:nowrap;}
.amphoe-row.sub{margin-left:.6rem; margin-bottom:.4rem;}

.prov-group{margin-bottom:.5rem;}
.prov-group + .prov-group{padding-top:.5rem; border-top:1px dashed var(--line);}
.prov-header{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:.82rem; color:var(--ink); margin-bottom:.4rem;
}
.prov-header .prov-n{font-weight:500; font-size:.74rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;}

table.dataTable{font-size:.87rem;}
.card-table thead th{
  background:var(--surface-alt); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);
}

@media (max-width:920px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-col{margin-left:0;}
  .sidebar-toggle{display:inline-flex;}
}