@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;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; }

.badge { display:inline-block; padding:2px 10px; border-radius:9999px; font-size:11px; font-weight:600; white-space:nowrap; }
.b-draft     { background:#f1f5f9; color:#475569; }
.b-submitted { background:#fef3c7; color:#b45309; }
.b-approved  { background:#d1fae5; color:#047857; }
.b-rejected  { background:#fee2e2; color:#b91c1c; }
.b-po_created{ background:#dbeafe; color:#1d4ed8; }
.b-pending   { background:#fef3c7; color:#b45309; }
.b-partial   { background:#e0e7ff; color:#4338ca; }
.b-received  { background:#d1fae5; color:#047857; }
.b-closed    { background:#e2e8f0; color:#334155; }
.b-cancelled { background:#fee2e2; color:#b91c1c; }
.b-open      { background:#fef3c7; color:#b45309; }
.b-paid      { background:#d1fae5; color:#047857; }
.b-active    { background:#d1fae5; color:#047857; }
.b-inactive  { background:#e2e8f0; color:#64748b; }

.tbl th { position: sticky; top: 0; background:#f8fafc; z-index: 5; }
.tbl td, .tbl th { padding: 8px 10px; border-bottom: 1px solid #e2e8f0; font-size: 13px; }
.tbl tbody tr:hover { background:#f8fafc; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:50; display:flex; align-items:flex-start; justify-content:center; padding:24px; overflow-y:auto; }
.modal-card { background:#fff; border-radius:16px; width:100%; box-shadow:0 25px 60px rgba(0,0,0,.25); margin:auto 0; }

.tab-btn { padding:8px 14px; border-radius:10px; font-size:14px; font-weight:600; color:#64748b; white-space:nowrap; }
.tab-btn:hover { background:#f1f5f9; }
.tab-btn.active { background:var(--app-color, #3498db); color:#fff; }

.pill { padding:5px 12px; border-radius:9999px; font-size:12px; font-weight:600; background:#f1f5f9; color:#475569; cursor:pointer; }
.pill.active { background:#7c3aed; color:#fff; }

input, select, textarea { outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--app-color, #3498db) !important; box-shadow: 0 0 0 2px rgba(52,152,219,.15); }

@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  #printArea { position: absolute; left: 0; top: 0; width: 100%; }
  .no-print { display: none !important; }
}