/* ── Color variables ────────────────────────────────────────────────── */
:root {
  --primary-dark: #1e3a5f;
  --primary-light-bg: #eff6ff;
  --success-light: #f0fdf4;
}

/* ── Navbar custom ──────────────────────────────────────────────────── */
.bg-primary-dark { background-color: var(--primary-dark) !important; }
.bg-primary-light { background-color: var(--primary-light-bg) !important; }

/* ── Project cards ──────────────────────────────────────────────────── */
.project-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}

/* ── Mini stat boxes ────────────────────────────────────────────────── */
.stat-mini { padding: .5rem .25rem; }
.stat-val { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.stat-lbl { font-size: .7rem; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; }

/* ── Tables ─────────────────────────────────────────────────────────── */
/* No text-transform: chemical units like CO₂ must keep their case. */
.table th { font-weight: 600; font-size: .8rem;
            letter-spacing: .03em; white-space: nowrap; }

/* ── Sticky table header ─────────────────────────────────────────────── */
.sticky-top { top: 0; z-index: 1; }

/* ── Code badges ─────────────────────────────────────────────────────── */
code { background: #f1f5f9; padding: .1em .4em; border-radius: .3rem;
       font-size: .85em; color: #1e40af; }

/* ── Scrollable area ─────────────────────────────────────────────────── */
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── QR code wrapper ─────────────────────────────────────────────────── */
.qr-wrapper { max-width: 320px; }
.qr-img { border: 8px solid #fff; box-shadow: 0 4px 20px rgba(0,0,0,.12);
          border-radius: .75rem; }

/* ── Alert sizing ────────────────────────────────────────────────────── */
.alert-sm { padding: .5rem .85rem; font-size: .875rem; }

/* ── Letter spacing ──────────────────────────────────────────────────── */
.letter-spacing-1 { letter-spacing: .05em; }

/* ── Footer fix ──────────────────────────────────────────────────────── */
body { display: flex; flex-direction: column; min-height: 100vh; }
footer { margin-top: auto; }

/* ── Transport mode cards (project detail) ───────────────────────────── */
.mode-card {
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mode-card-on {
  background: #eff6ff;
  border-color: #93c5fd !important;
  box-shadow: 0 1px 4px rgba(59, 130, 246, .12);
}
.mode-card .mode-toggle:hover { color: var(--primary-dark); }
.mode-category h6 { letter-spacing: .03em; }

/* Mode-list accordion */
.mode-accordion .accordion-button {
  background: #f8fafc;
  color: #334155;
  font-size: .95rem;
  box-shadow: none;
}
.mode-accordion .accordion-button:not(.collapsed) {
  background: #e0f2fe;
  color: #0c4a6e;
}
.mode-accordion .accordion-button:focus { box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .15); }
.mode-accordion .accordion-item { background: transparent; }
.mode-accordion .accordion-body { background: #fff; border-radius: 0 0 .375rem .375rem; }