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

* { font-family: 'Noto Sans Thai', sans-serif; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

.card-hover { transition: transform .15s, box-shadow .15s; cursor: pointer; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(0,0,0,.15); }
.card-active { outline: 2px solid var(--app-color, #0ea5e9); outline-offset: 2px; }

.tab-btn { transition: all .15s; border-bottom: 3px solid transparent; }
.tab-btn.active { border-bottom-color: var(--app-color, #0ea5e9); color: #0f172a; font-weight: 700; }

table.data th { position: sticky; top: 0; z-index: 5; }

.flash { animation: flashRow 1.6s ease; }
@keyframes flashRow {
  0% { background: #fef9c3; }
  100% { background: transparent; }
}

.modal-backdrop { background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }

.cal-chip {
  display: block; padding: 3px 8px; border-radius: 8px; font-size: 11.5px;
  margin-bottom: 4px; line-height: 1.35; cursor: pointer;
}
.cal-chip:hover { filter: brightness(.95); }

.matrix-cell { min-width: 44px; cursor: pointer; }
.matrix-cell:hover { background: #e0f2fe !important; }

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