/* app.css — penyesuaian kecil di atas Tailwind CDN (utility-first). */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
  white-space: nowrap;
}
.badge-critical { background: #fee2e2; color: #991b1b; }
.badge-warning  { background: #fef3c7; color: #92400e; }
.badge-info     { background: #dbeafe; color: #1e40af; }

.badge-new            { background: #e0e7ff; color: #3730a3; }
.badge-in_review      { background: #fef3c7; color: #92400e; }
.badge-resolved       { background: #dcfce7; color: #166534; }
.badge-accepted       { background: #cffafe; color: #155e75; }
.badge-false_positive { background: #e2e8f0; color: #475569; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .5rem 1rem; border-radius: .5rem; font-weight: 600; font-size: .875rem;
  transition: background-color .15s; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: #0f172a; color: #fff; }
.btn-primary:hover { background: #1e293b; }
.btn-secondary { background: #fff; color: #0f172a; border-color: #cbd5e1; }
.btn-secondary:hover { background: #f1f5f9; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card { background: #fff; border-radius: .75rem; border: 1px solid #e2e8f0; }

input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], select, textarea {
  border: 1px solid #cbd5e1; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; width: 100%;
  background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #0f172a33; border-color: #0f172a; }

table.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data-table th { text-align: left; padding: .5rem .75rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
table.data-table td { padding: .5rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
table.data-table tbody tr:hover { background: #f8fafc; }