/* ScoutBus custom styles */

/* ---- Status colors ---- */
.status-ok { color: #22c55e; font-weight: 600; }
.status-pending { color: #eab308; font-weight: 600; }
.status-error { color: #ef4444; font-weight: 600; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: 0.5rem 1rem;
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #9ca3af; border-bottom: 1px solid #374151;
}
tbody td { padding: 0.5rem 1rem; }
tbody tr { border-bottom: 1px solid #1f2937; }
tbody tr:hover { background-color: #111827; }

/* ---- Cards ---- */
.stat-card {
  background-color: #1f2937; border-radius: 0.5rem;
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.stat-card .stat-label { font-size: 0.875rem; color: #9ca3af; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: #f3f4f6; }

/* ---- Nav active link ---- */
nav a.active { color: #60a5fa; border-bottom: 2px solid #60a5fa; }

/* ---- Empty state ---- */
.empty-state { text-align: center; padding: 3rem 1rem; color: #6b7280; font-size: 0.875rem; }

/* ---- Dialog modals ---- */
dialog { background: #1f2937; color: #f3f4f6; border: 1px solid #374151; border-radius: 0.5rem; }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog input, dialog select {
  background: #111827; color: #f3f4f6; border: 1px solid #374151;
}
dialog input:focus, dialog select:focus {
  outline: none; border-color: #60a5fa; box-shadow: 0 0 0 1px #60a5fa;
}

/* ---- Filter bar ---- */
.filter-bar {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  align-items: end; margin-bottom: 1rem;
}
.filter-bar label { font-size: 0.75rem; color: #9ca3af; display: flex; flex-direction: column; gap: 0.25rem; }
.filter-bar select, .filter-bar input {
  background: #111827; color: #f3f4f6; border: 1px solid #374151;
  border-radius: 0.375rem; padding: 0.375rem 0.5rem; font-size: 0.875rem;
}