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

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
  background-color: #f8f9fb;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  color: #1e293b;
  line-height: 1.65;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.site-navbar {
  border-bottom: 3px solid #0d9488;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}

.site-navbar .navbar-brand {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #0f172a;
}

.brand-eigen {
  color: #0d9488;
}

.site-navbar .nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  transition: color 0.15s, background-color 0.15s;
}

.site-navbar .nav-link:hover {
  color: #0d9488;
  background-color: rgba(13, 148, 136, 0.07);
}

.site-navbar .nav-link.active {
  color: #0d9488 !important;
  font-weight: 600;
}

/* Demo button in navbar */
.btn-demo {
  background-color: #0d9488;
  color: #fff !important;
  border: none;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.38rem 1rem;
  transition: background-color 0.15s;
}

.btn-demo:hover {
  background-color: #0f766e;
  color: #fff !important;
}

/* ── Headings ───────────────────────────────────────────────────────────── */
h1, .h1 { font-size: 2rem;   font-weight: 700; line-height: 1.2;  color: #0f172a; }
h2, .h2 { font-size: 1.6rem; font-weight: 600; line-height: 1.25; color: #0f172a; }
h3, .h3 { font-size: 1.3rem; font-weight: 600; color: #1e293b; }
h4, .h4 { font-size: 1.1rem; font-weight: 600; color: #1e293b; }
h5, .h5 { font-size: 1rem;   font-weight: 600; color: #1e293b; }
h6, .h6 { font-size: 0.9rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.card-body {
  padding: 1.5rem;
}

.card.shadow-sm {
  box-shadow: 0 1px 8px rgba(0, 0, 0, .07) !important;
  border: none;
}

/* Stat cards with colored top accent */
.stat-card {
  border-top: 3px solid #0d9488;
}

/* ── Code ───────────────────────────────────────────────────────────────── */
code {
  color: #0f766e;
  background-color: #f0fdf9;
  padding: 0.12em 0.35em;
  border-radius: 4px;
  font-size: 0.875em;
}

pre {
  font-size: 0.78rem;
  overflow-x: auto;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* ── Progress bars ──────────────────────────────────────────────────────── */
.progress {
  border-radius: 6px;
  background-color: #e2e8f0;
}

/* ── Images ─────────────────────────────────────────────────────────────── */
img {
  transition: opacity 0.2s;
}

img[src=""] {
  display: none;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
  border-radius: 10px;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  font-weight: 500;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  font-size: 0.8rem;
  color: #94a3b8;
  border-top: 1px solid #e2e8f0;
}

/* ── Metric table (stats page) ──────────────────────────────────────────── */
.metric-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  border-bottom: 2px solid #e2e8f0;
}

.metric-table td {
  font-size: 0.9rem;
  border-bottom: 1px solid #f1f5f9;
  padding: 0.6rem 0.75rem;
}

.metric-table tr:last-child td {
  font-weight: 600;
  border-top: 2px solid #e2e8f0;
  border-bottom: none;
}

/* Colored metric cells — !important needed to override Bootstrap's .table bg */
.metric-table td.metric-high   { color: #15803d !important; background-color: #f0fdf4 !important; }
.metric-table td.metric-medium { color: #92400e !important; background-color: #fffbeb !important; }
.metric-table td.metric-low    { color: #b91c1c !important; background-color: #fef2f2 !important; }