@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', system-ui, -apple-system, sans-serif; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

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

/* Cell state classes (5-color traffic light) */
.cell-done       { background:#dcfce7; color:#15803d; }
.cell-late-done  { background:#fef3c7; color:#a16207; }
.cell-pending    { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.cell-due-soon   { background:#ffedd5; color:#c2410c; border:1px solid #fdba74; animation:pulse 2s infinite; }
.cell-overdue    { background:#fee2e2; color:#b91c1c; border:1px solid #fca5a5; }
.cell-future     { background:#f8fafc; color:#cbd5e1; }
.cell-empty      { background:#fff; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0); }
}

/* Shopee-like card hover */
.shopee-card {
  transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.shopee-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* Active tab */
.tab-active { color:#06b6d4; border-color:#06b6d4 !important; background:#f5f3ff; }

/* Admin badge */
.admin-only { display: none; }
body.is-admin .admin-only { display: inline-flex; }

/* Sticky col */
.sticky-col {
  position: sticky; left: 0; z-index: 5;
  background: #fff; box-shadow: 1px 0 0 #e2e8f0;
}

/* Smooth modal */
.modal-backdrop { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(2px); }
.modal-card { animation: pop .15s ease; }
@keyframes pop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Severity badges */
.sev-low { background:#dbeafe; color:#1e40af; }
.sev-medium { background:#fef3c7; color:#92400e; }
.sev-high { background:#fed7aa; color:#c2410c; }
.sev-critical { background:#fecaca; color:#991b1b; }

.status-pending { background:#fef3c7; color:#92400e; }
.status-in_progress { background:#dbeafe; color:#1e40af; }
.status-resolved { background:#dcfce7; color:#166534; }
.status-closed { background:#e2e8f0; color:#475569; }

/* Touch-friendly */
button, a, .clickable { cursor: pointer; }
button:active { transform: scale(0.97); }

/* Mobile bottom bar */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .mobile-padding-bottom { padding-bottom: 80px; }
}
@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}