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

:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e3e6eb;
  --text: #0f172a;
  --muted: #6b7280;
  --accent: #111827;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: var(--surface);
}

.nav-link {
  color: var(--muted);
  font-weight: 500;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--text);
}

.hero-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.content-card,
.metric-card,
.mini-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.metric-card h3 {
  font-size: 1.6rem;
  font-weight: 600;
}

.mini-card {
  padding: 16px;
}

.table {
  margin-bottom: 0;
}

.table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.table td {
  vertical-align: middle;
}

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-align: center;
  color: var(--muted);
  background: #fafafb;
}

.form-control,
.form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border);
}

.form-control:focus,
.form-select:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 0.2rem rgba(148, 163, 184, 0.25);
}

.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.btn-dark {
  background: var(--accent);
  border-color: var(--accent);
}

.btn-dark:hover {
  background: #0b1120;
  border-color: #0b1120;
}

.btn-outline-dark {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-outline-dark:hover {
  background: var(--accent);
  color: #fff;
}

.toast-container {
  z-index: 1055;
}

.badge {
  border-radius: 999px;
  font-weight: 500;
}

footer {
  background: var(--surface);
  margin-top: auto;
}

@media (max-width: 768px) {
  .hero-panel {
    padding: 20px;
  }
}