/* Event Map - styles */

:root {
  --bg: #eef2fd;
  --bg-panel: #ffffff;
  --berry: #3d72c8;
  --sage: #4ea882;
  --gold: #d4972a;
  --plum: #7c5cc8;
  --terracotta: #c86060;
  --ink: #1a2740;
  --ink-soft: #526080;
  --line: #c8d8f0;
  --shadow: 0 2px 8px rgba(26, 39, 64, 0.10);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
}

/* Unified shell: top-nav + view containers fill the full viewport. */
body:has(.top-nav) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Events view container — fills remaining height, events-list scrolls inside. */
#events-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Inside the unified shell, events-app fills events-view. */
#events-view #events-app {
  flex: 1;
  min-height: 0;
}

/* Map view container — fills remaining height, Leaflet handles its own layout. */
#map-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px 8px 16px;
  flex-shrink: 0;
}

h1 {
  margin: 0 0 8px 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--berry);
  letter-spacing: 0.2px;
}

h1 .subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: 8px;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-transform: capitalize;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.chip:hover {
  background: var(--bg);
}

.chip-active {
  background: var(--berry);
  color: var(--bg-panel);
  border-color: var(--berry) !important;
}

.dropdown-row {
  display: flex;
  gap: 8px;
}

.dropdown-row select {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b5544'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 18px;
  padding-right: 32px;
}

.toggle-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}

.toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--berry);
  cursor: pointer;
}

#map {
  flex: 1;
  width: 100%;
  background: #1a1a1a;
}

.map-pin {
  background: transparent !important;
  border: none !important;
}

.map-pin svg {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

.result-count {
  font-size: 12px;
  color: var(--ink-soft);
  padding-top: 2px;
}

/* Detail panel slides up from bottom on mobile, side panel on desktop */
.detail-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 16px rgba(58, 40, 32, 0.15);
  max-height: 60vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  z-index: 1000;
  padding: 16px 20px 24px 20px;
}

.detail-panel.open {
  transform: translateY(0);
}

.detail-panel .close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  font-size: 20px;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 50%;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(58,40,32,0.10);
}

.detail-panel .close-btn:hover {
  background: var(--bg);
  color: var(--ink);
}

.detail-panel h2 {
  margin: 0 36px 4px 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 20px;
  color: var(--berry);
}

.detail-panel .meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.detail-panel .section {
  margin-top: 14px;
}

.detail-panel .section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 4px;
}

.detail-panel a {
  color: var(--berry);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.detail-panel a:hover {
  border-bottom-color: var(--berry);
}

.crop-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crop-tag {
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink);
}

.crop-tag.pyo {
  border-color: var(--berry);
  color: var(--berry);
}

.flag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.flag {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.flag-organic { background: var(--sage); color: var(--bg-panel); }
.flag-pesticide-free { background: var(--gold); color: var(--ink); }
.flag-low-chemical { background: var(--terracotta); color: var(--bg-panel); }

/* User location indicator */
.user-location-icon {
  background: transparent !important;
  border: none !important;
}

.user-location-dot {
  position: relative;
  width: 18px;
  height: 18px;
  background: #1e88e5;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(30, 136, 229, 0.4), 0 2px 6px rgba(0,0,0,0.3);
}

.user-location-dot::after {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(30, 136, 229, 0.25);
  animation: locate-pulse 2s ease-out infinite;
}

@keyframes locate-pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* Notes section in detail panel */
.notes-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.note-card {
  background: var(--bg);
  border-left: 3px solid var(--sage);
  border-radius: 6px;
  padding: 10px 12px;
  position: relative;
}

.note-card .note-text {
  font-size: 14px;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-right: 32px;
}

.note-card .note-date {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 6px;
}

.note-card .note-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}

.note-card .note-delete:hover {
  background: var(--berry);
  color: var(--bg-panel);
}

.note-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-input-wrap textarea {
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

.note-input-wrap textarea:focus {
  outline: none;
  border-color: var(--berry);
}

.note-input-wrap .add-btn {
  align-self: flex-end;
  padding: 7px 16px;
  background: var(--berry);
  color: var(--bg-panel);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.note-input-wrap .add-btn:hover {
  filter: brightness(1.1);
}

.note-input-wrap .add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.note-empty {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}

/* Desktop: side panel instead of bottom sheet */
@media (min-width: 768px) {
  .detail-panel {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 400px;
    border-radius: 16px;
    max-height: calc(100vh - 140px);
  }
}

/* Minimum 44px touch targets on mobile */
.detail-panel .close-btn { width: 44px !important; height: 44px !important; z-index: 900 !important; }
.note-card .note-delete { width: 44px !important; height: 44px !important; }

/* Hide scrollbar on filter chip row — scrollable but visually clean */
.chip-row::-webkit-scrollbar { display: none; }
.chip-row { -ms-overflow-style: none; scrollbar-width: none; }

/* ── View-toggle row (inside .filters, below h1) ────────────────────────────── */
.view-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── Map / List view toggle ─────────────────────────────────────────────────── */
.view-toggle {
  display: flex;
  flex-shrink: 0;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.view-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.view-btn.view-btn-active {
  background: var(--berry);
  color: #fff;
}

/* ── List view container ────────────────────────────────────────────────────── */
#list-view {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 24px 12px;
  background: var(--bg);
}

.list-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
}

.list-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.list-card:hover {
  border-color: var(--berry);
  box-shadow: var(--shadow);
}

.list-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.list-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
  flex: 1;
}

.list-card-cat {
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.list-card-location {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.list-card-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.list-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Mini-map inside detail panel ───────────────────────────────────────────── */
#detail-minimap {
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

#detail-minimap:hover {
  opacity: 0.9;
}

/* ── Directions button in detail panel ───────────────────────────────────────── */
.directions-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--berry);
  color: #fff !important;
  text-align: center;
  text-decoration: none !important;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  margin-top: 16px;
  border: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.directions-btn:hover {
  filter: brightness(1.1);
  border-bottom: none !important;
}

/* ── Back-to-list button in detail panel ────────────────────────────────────── */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0 0 10px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--berry);
  cursor: pointer;
  font-family: inherit;
}

.back-btn:hover {
  text-decoration: underline;
}

/* ── chip-active state managed via inline JS styles for per-category color ─── */
.chip-active {
  font-weight: 600;
}

/* ── List search box ────────────────────────────────────────────────────────── */
.list-search-wrap {
  max-width: 720px;
  margin: 0 auto 8px auto;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 4px 0 4px 0;
}

.list-search {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
}

.list-search:focus {
  border-color: var(--berry);
}

/* ── Top navigation bar (Events ↔ Map ↔ Admin) ───────────────────────────── */
.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  z-index: 9999;
  position: relative;
}

.top-nav-link {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.top-nav-link:hover {
  background: var(--bg);
  color: var(--ink);
}

.top-nav-active {
  background: var(--berry);
  color: #fff !important;
}

.top-nav-admin {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.6;
}

.top-nav-admin:hover {
  opacity: 1;
}

/* Saved button in top nav — desktop only, hidden on mobile (bottom nav handles it) */
.top-nav-saved {
  display: none;
  background: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 641px) {
  .top-nav-saved {
    display: inline-flex;
    align-items: center;
  }
}

/* Active state: gold tint, matches card saved indicator */
.top-nav-saved-active {
  background: rgba(212, 151, 42, 0.12) !important;
  color: var(--gold) !important;
}

/* ── Events view toggle (All Events / Saved Events) ─────────────────────── */
.ev-view-row {
  display: flex;
  padding: 6px 12px 0 12px;
  gap: 0;
}

.ev-view-btn {
  padding: 5px 16px;
  border: 1.5px solid var(--line);
  background: var(--bg-panel);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.ev-view-btn:first-child {
  border-radius: 6px 0 0 6px;
}

.ev-view-btn:last-child {
  border-radius: 0 6px 6px 0;
  border-left: none;
}

.ev-view-btn-active {
  background: var(--berry);
  color: #fff;
  border-color: var(--berry);
  font-weight: 600;
}

/* Gold tint for Saved Events active state */
#ev-view-saved.ev-view-btn-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* ── Map collapsible filter panel ────────────────────────────────────────── */
.map-filters-panel {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}

.map-filters-panel.map-filters-open {
  display: flex;
}

/* Panel open/closed state is managed entirely by JS (setMapFiltersOpen).
   The media-query default-open override was removed because it prevented
   the Refine toggle from closing the panel on desktop. */

.map-filter-summary {
  flex: 1;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  align-self: center;
}

.map-refine-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}

.map-refine-btn:hover,
.map-refine-btn.map-refine-active {
  border-color: var(--berry);
  color: var(--berry);
}

/* ── Events feed page ────────────────────────────────────────────────────── */
#events-app {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 37px);
  background: var(--bg);
}

.events-header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  padding: 7px 12px 6px 12px;
  flex-shrink: 0;
}

.events-title {
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--berry);
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.events-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.events-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ev-filter-btn {
  padding: 6px 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
}

.ev-filter-btn:hover {
  border-color: var(--berry);
  color: var(--berry);
}

.ev-filter-active {
  background: var(--berry) !important;
  border-color: var(--berry) !important;
  color: #fff !important;
}

.events-sort-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ev-sort-label {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
}

.ev-sort-btn {
  padding: 4px 10px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.ev-sort-btn:hover {
  border-color: var(--berry);
}

.ev-sort-active {
  background: var(--berry);
  border-color: var(--berry);
  color: var(--bg-panel);
}

/* ── Status banner ──────────────────────────────────────────────────────── */
.events-status {
  padding: 10px 16px;
  font-size: 13px;
  text-align: center;
  flex-shrink: 0;
}

.events-status-loading {
  background: #ddeaff;
  color: #1a4080;
  border-bottom: 1px solid #b8cdf8;
}

.events-status-error {
  background: #fee2e2;
  color: #991b1b;
  border-bottom: 1px solid #fecaca;
}

.events-status-info {
  background: #eff6ff;
  color: #1d4ed8;
  border-bottom: 1px solid #bfdbfe;
}

/* ── Events list + date dividers ────────────────────────────────────────── */
.events-list {
  flex: 1;
  padding: 12px 12px 32px 12px;
  overflow-y: auto;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  align-content: start;
  align-items: start;
}

.ev-date-divider {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-soft);
  padding: 14px 0 6px 2px;
  margin-top: 4px;
}

.ev-date-divider:first-child {
  padding-top: 2px;
  margin-top: 0;
}

/* ── Event card ─────────────────────────────────────────────────────────── */
.ev-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: visible;
  height: auto;
  min-height: auto;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.ev-card:hover {
  box-shadow: 0 2px 10px rgba(61, 114, 200, 0.12);
  border-color: rgba(61, 114, 200, 0.25);
}

.ev-card-saved {
  border-color: var(--gold);
  border-width: 1.5px;
}

/* ── Card header: source chip + date ───────────────────────────────────── */
.ev-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px 0 12px;
  gap: 8px;
}

.ev-source-chip {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.ev-source-chip-link {
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.12s;
}

.ev-source-chip-link:hover,
.ev-source-chip-link:focus {
  filter: brightness(1.18);
  text-decoration: underline;
  outline: none;
}

.ev-header-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--berry);
  white-space: nowrap;
  text-align: right;
}

.ev-header-time {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 11px;
}

/* ── Card body ──────────────────────────────────────────────────────────── */
.ev-card-body {
  padding: 5px 12px 8px 12px;
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.ev-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta row: category tag + drive pill */
.ev-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.ev-category-tag {
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: capitalize;
}

.ev-drive-pill {
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.ev-free-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #236b48;
  background: rgba(78, 168, 130, 0.15);
  border: 1.5px solid rgba(78, 168, 130, 0.5);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.ev-paid-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #7a5500;
  background: rgba(212, 151, 42, 0.12);
  border: 1.5px solid rgba(212, 151, 42, 0.45);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.ev-unknown-pill {
  display: inline-block;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  opacity: 0.75;
}

/* Address block */
.ev-address {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 4px;
}

.ev-address-line {
  display: block;
}

.ev-address-line + .ev-address-line {
  color: var(--ink-soft);
  opacity: 0.8;
}

.ev-admission {
  font-size: 12px;
  font-weight: 500;
  color: var(--sage);
  margin-bottom: 3px;
}

.ev-desc {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Card actions ───────────────────────────────────────────────────────── */
.ev-actions {
  display: flex;
  gap: 5px;
  padding: 0 12px 10px 12px;
  flex-wrap: wrap;
}

.ev-btn {
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.ev-btn-primary {
  background: var(--berry);
  color: #fff;
  border-color: var(--berry);
}

.ev-btn-primary:hover {
  filter: brightness(1.1);
}

.ev-btn-secondary {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line);
}

.ev-btn-secondary:hover {
  border-color: var(--berry);
  color: var(--berry);
}

.ev-btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}

.ev-btn-ghost:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}

/* Save button — gold tone when the event is already saved */
.ev-save-btn-saved {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  font-weight: 600 !important;
}

.ev-save-btn-saved:hover {
  background: rgba(212, 151, 42, 0.08) !important;
}

/* ── Empty / refresh link ────────────────────────────────────────────────── */
.ev-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.ev-refresh-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--berry);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

/* ── Grouped filter controls ─────────────────────────────────────────────── */
.ev-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ev-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
}

.ev-custom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ev-date-sep,
.ev-label-small {
  font-size: 13px;
  color: var(--ink-soft);
}

.ev-date-input {
  padding: 5px 8px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  min-width: 130px;
}

.ev-date-input:focus {
  outline: none;
  border-color: var(--berry);
}

.ev-miles-input {
  width: 80px;
  padding: 5px 8px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
}

.ev-miles-input:focus {
  outline: none;
  border-color: var(--berry);
}

.ev-quick-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.ev-sort-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Saved button uses gold when active to distinguish from date/distance filters */
.ev-saved-btn.ev-filter-active {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--ink) !important;
}

/* ── Event search ────────────────────────────────────────────────────────── */
.ev-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ev-search-input {
  width: 100%;
  padding: 7px 34px 7px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
}

.ev-search-input:focus {
  border-color: var(--berry);
}

.ev-search-input::placeholder {
  color: var(--ink-soft);
  opacity: 0.75;
}

.ev-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: var(--bg);
  color: var(--ink-soft);
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}

.ev-search-clear:hover {
  background: var(--line);
  color: var(--ink);
}

/* ── Compact headerbar ────────────────────────────────────────────────────── */
.ev-headerbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Mobile: search wraps to a full-width second row */
.ev-headerbar .ev-search-wrap {
  flex-basis: 100%;
  width: 100%;
}

.ev-filter-summary {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  /* pill affordance — signals it's tappable */
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  transition: border-color 0.15s, color 0.15s;
}

.ev-filter-summary:hover {
  border-color: var(--berry);
  color: var(--berry);
}

.ev-filters-toggle-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
}

.ev-filters-toggle-btn:hover {
  border-color: var(--berry);
  color: var(--berry);
}

.ev-toggle-active {
  background: var(--berry) !important;
  border-color: var(--berry) !important;
  color: #fff !important;
}

/* Refine button tint when any filter is non-default — panel is still closed */
.ev-refine-active {
  border-color: var(--berry) !important;
  color: var(--berry) !important;
  background: rgba(61, 114, 200, 0.06) !important;
}

.ev-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Mobile: filter panel hidden until toggled */
.ev-filters-panel {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.ev-filters-panel.ev-filters-open {
  display: flex;
}

/* Desktop: search inline, filters collapsible (toggle visible) */
@media (min-width: 700px) {
  /* Search moves between title and summary, fills available width */
  .ev-headerbar .ev-search-wrap {
    order: 1;
    flex: 1;
    flex-basis: auto;
    width: auto;
  }
  /* Summary compact, before toggle */
  .ev-filter-summary {
    order: 2;
    flex: none;
    max-width: 210px;
  }
  /* Toggle stays visible on desktop, placed last */
  .ev-filters-toggle-btn {
    order: 3;
  }
  /* Filter panel stays hidden until toggled — same as mobile */
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .events-filter-row {
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) {
  .events-list {
    padding: 16px 24px 48px 24px;
    gap: 14px;
  }

  .ev-card-header {
    padding: 10px 16px 0 16px;
  }

  .ev-card-body {
    padding: 6px 16px 10px 16px;
  }

  .ev-actions {
    padding: 0 16px 12px 16px;
  }

  .ev-title {
    font-size: 16px;
  }
}

/* ── Mobile bottom nav (events page only) ──────────────────────────────────── */
.mob-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 640px) {
  /* Events view: hide top-nav, show mob-nav at bottom */
  body.view-events-active .top-nav {
    display: none;
  }

  /* Let events-app fill the events-view container on mobile */
  body.view-events-active #events-app {
    min-height: 0;
    flex: 1 1 auto;
  }

  /* Push list content above bottom nav */
  #events-app .events-list {
    padding-bottom: 76px;
  }

  /* Bottom nav bar — only shown in events view; map view keeps top-nav */
  body.view-events-active .mob-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg-panel);
    border-top: 1px solid var(--line);
    z-index: 9998;
    box-shadow: 0 -2px 8px rgba(26, 39, 64, 0.08);
    /* safe area for notched phones */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .mob-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    border: none;
    border-top: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-family: inherit;
    padding: 8px 4px;
    transition: color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
  }

  .mob-nav-item:hover {
    color: var(--berry);
  }

  .mob-nav-active {
    color: var(--berry);
    font-weight: 700;
    border-top-color: var(--berry);
  }

  /* Saved active state — gold to match card saved indicator */
  .mob-saved-active {
    color: var(--gold) !important;
    font-weight: 700 !important;
    border-top-color: var(--gold) !important;
  }

  /* Admin link in bottom nav — slightly muted */
  .mob-nav-admin-item {
    font-size: 11px;
    opacity: 0.65;
  }

  .mob-nav-admin-item:hover {
    opacity: 1;
  }
}