/* ── BRAND ───────────────────────────────────────────── */
:root {
  --sage: #4a7c6f;
  --sage-light: #d4e8e3;
  --paper: #faf8f4;
  --paper-2: #f2efe8;
}

/* Override Bootstrap primary → sage */
.btn-primary {
  --bs-btn-bg: var(--sage);
  --bs-btn-border-color: var(--sage);
  --bs-btn-hover-bg: #3d6960;
  --bs-btn-hover-border-color: #3d6960;
  --bs-btn-active-bg: #3d6960;
  --bs-btn-active-border-color: #3d6960;
  --bs-btn-disabled-bg: var(--sage);
  --bs-btn-disabled-border-color: var(--sage);
  --bs-btn-focus-shadow-rgb: 74, 124, 111;
}
.nav-link.active,
.nav-link:hover,
.nav-link:focus {
  color: var(--sage) !important;
}
.nav-tabs .nav-link.active {
  color: var(--sage) !important;
  border-bottom-color: var(--sage) !important;
}
.nav-pills .nav-link.active {
  background-color: var(--sage) !important;
  color: #fff !important;
}

/* ── LAYOUT ──────────────────────────────────────────── */
body {
  font-family: "DM Sans", sans-serif;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
.navbar {
  background-color: var(--paper) !important;
}

/* ── TYPOGRAPHY ──────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
.navbar-brand {
  font-family: "DM Serif Display", serif;
}
.navbar-brand small {
  font-family: "DM Sans", sans-serif;
}

/* ── VIEWS ───────────────────────────────────────────── */
.view {
  display: none;
}
.view.active {
  display: block;
}

/* ── NAV ─────────────────────────────────────────────── */
.navbar-nav .nav-link {
  background: none;
  border: none;
  cursor: pointer;
}

/* ── COMMUNITY BADGE ─────────────────────────────────── */
.badge-sage {
  background-color: var(--sage-light);
  color: var(--sage);
}

/* ── RIDE CARDS ──────────────────────────────────────── */
.ride-route {
  font-family: "DM Serif Display", serif;
  font-size: 1.1rem;
}
.ride-dest {
  color: var(--sage);
  font-style: italic;
}

.driver-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper-2);
  border-radius: 20px;
  padding: 3px 10px 3px 3px;
  font-size: 0.8rem;
}
.driver-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sage-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--sage);
  flex-shrink: 0;
  overflow: hidden;
}
.driver-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.driver-avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

/* ── LOCATION PICKER ─────────────────────────────────── */
.location-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0 0 8px 8px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 500;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.location-suggestions li {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--bs-body-color);
  line-height: 1.4;
}
.location-suggestions li:hover {
  background: var(--bs-secondary-bg);
}
.location-suggestions li.no-results {
  color: var(--bs-secondary-color);
  cursor: default;
}

.offer-field-map {
  height: 200px;
}
.offer-field-map.leaflet-container {
  background: var(--bs-secondary-bg);
}

/* ── SEAT REQUESTS ───────────────────────────────────── */
.request-row {
  border-bottom: 1px solid var(--paper-2);
}
.request-row:last-child {
  border-bottom: none;
}
.req-pending {
  background: #faecd4;
  color: #c47d2a;
}
.req-accepted {
  background: var(--sage-light);
  color: var(--sage);
}
.req-declined {
  background: #f5dede;
  color: #b85050;
}
.req-removed {
  background: #e8e4f0;
  color: #6b5b8a;
}

/* ── DARK MODE ───────────────────────────────────────── */
[data-bs-theme="dark"] body {
  background-color: var(--bs-body-bg);
}
[data-bs-theme="dark"] .navbar {
  background-color: var(--bs-body-bg) !important;
}
[data-bs-theme="dark"] .driver-chip {
  background: var(--bs-secondary-bg);
}
[data-bs-theme="dark"] .driver-avatar {
  background: #1e3d38;
}
[data-bs-theme="dark"] .request-row {
  border-bottom-color: var(--bs-border-color);
}

/* Lighten sage for dark backgrounds */
[data-bs-theme="dark"] .ride-dest,
[data-bs-theme="dark"] .nav-link.active,
[data-bs-theme="dark"] .nav-link:hover,
[data-bs-theme="dark"] .nav-link:focus {
  color: #6fc4b4 !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  color: #6fc4b4 !important;
  border-bottom-color: #6fc4b4 !important;
}
[data-bs-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--sage) !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .badge-sage {
  background: #1e3d38;
  color: #6fc4b4;
}
[data-bs-theme="dark"] .req-accepted {
  background: #1e3d38;
  color: #6fc4b4;
}
[data-bs-theme="dark"] .req-pending {
  background: #3d2e0f;
  color: #d4956a;
}
[data-bs-theme="dark"] .req-declined {
  background: #3d1a1a;
  color: #d08080;
}
[data-bs-theme="dark"] .req-removed {
  background: #2a2040;
  color: #a899c8;
}

/* ── COMPLETED RIDE ACCORDIONS ───────────────────────────── */
.completed-ride-item {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  background: var(--bs-body-bg, #fff);
}
.completed-ride-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.completed-ride-summary::-webkit-details-marker {
  display: none;
}
.completed-ride-summary::after {
  content: "▸";
  flex-shrink: 0;
  color: var(--bs-secondary-color, #6c757d);
  transition: transform 0.2s ease;
}
.completed-ride-item[open] > .completed-ride-summary::after {
  transform: rotate(90deg);
}
.completed-ride-date {
  white-space: nowrap;
  flex-shrink: 0;
}
.completed-ride-item[open] > .completed-ride-summary .completed-ride-date {
  display: none;
}
.completed-ride-route {
  font-size: 0.95rem;
  min-width: 0;
}
.completed-ride-body {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.ride-highlight {
  outline: 2px solid var(--sage);
  transition: outline 2.5s ease-out;
}