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

* { font-family: 'Noto Sans Thai', system-ui, -apple-system, sans-serif; }
body { background: #f1f5f9; color: #0f172a; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #e2e8f0; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

.tab-btn { transition: all .15s; }
.tab-btn.active { color: #fff !important; }

/* progress bar */
.bar-track { background:#e2e8f0; border-radius:9999px; overflow:hidden; height:8px; }
.bar-fill  { height:100%; border-radius:9999px; transition:width .4s ease; }

/* cascade tree levels */
.lvl-pill { font-size:10px; font-weight:700; padding:2px 8px; border-radius:9999px; letter-spacing:.3px; }

/* card hover */
.card { transition: box-shadow .15s, transform .15s; }
.card:hover { box-shadow: 0 8px 24px rgba(15,23,42,.10); }

/* flash highlight when linked */
@keyframes flashRow { 0%{background:#fef9c3;} 100%{background:transparent;} }
.flash { animation: flashRow 2s ease; }

/* sticky table head */
.thead-sticky th { position: sticky; top: 0; z-index: 5; }

table.grid { border-collapse: collapse; width:100%; }
table.grid th, table.grid td { border:1px solid #e2e8f0; padding:6px 8px; }

.badge { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:9999px; }

input, select, textarea { outline: none; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(99,102,241,.18); border-color:#6366f1; }

@media (max-width: 640px) {
  .hide-sm { display: none; }
}