/* ── Base / Mobile-first — Warm earthy palette ──── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: #FAF8F5; color: #32221B;
  -webkit-tap-highlight-color: transparent;
}
header {
  background: linear-gradient(135deg, hsl(20,50%,22%) 0%, hsl(20,45%,32%) 100%);
  color: #FAF8F5;
  position: sticky; top: 0; z-index: 2000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
header .header-content {
  max-width: calc(1280px + 48px); margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
}
header .logo-img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
header .header-text { flex: 1; }
header h1 { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 4px; }
header p { font-size: 0.85rem; opacity: 0.85; }

@media (min-width: 768px) {
  header .header-content { padding: 20px 32px; max-width: calc(1280px + 64px); }
}
.stats-bar {
  background: #fff; border-bottom: 1px solid #E8E4E0;
  box-shadow: 0 1px 3px rgba(50,34,27,0.05);
}
.stats-bar-inner {
  max-width: calc(1280px + 48px); margin: 0 auto; padding: 20px 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}

@media (min-width: 768px) {
  .stats-bar-inner { padding: 24px 32px; gap: 48px; max-width: calc(1280px + 64px); }
}
.stat {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  padding: 8px;
  border-radius: 12px;
}
.stat:hover {
  transform: translateY(-2px);
  background: rgba(232,95,64,0.05);
}
.stat:active {
  transform: translateY(0);
}
.stat strong { 
  color: hsl(18,75%,50%); font-size: 2rem; display: block; 
  margin-bottom: 4px; font-weight: 700; line-height: 1;
}
.stat-label {
  color: hsl(20,20%,45%); font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px;
}

@media (max-width: 640px) {
  .stats-bar-inner { 
    grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px 16px;
  }
  .stat strong { font-size: 1.6rem; }
  .stat-label { font-size: 0.72rem; }
}
.content { max-width: calc(1280px + 48px); margin: 0 auto; padding: 32px 24px; }

@media (max-width: 640px) {
  .content { padding: 24px 16px; }
  .section-header { font-size: 1.2rem; margin-bottom: 16px; }
  #map-section { margin-bottom: 32px; }
}

@media (min-width: 768px) {
  .content { padding: 48px 32px; max-width: calc(1280px + 64px); }
}

#map-section { margin-bottom: 48px; }
.section-header {
  font-size: 1.4rem; font-weight: 700; color: hsl(20,40%,22%); 
  margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.section-header-icon { font-size: 1.5rem; }

#map { height: 420px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(50,34,27,0.12); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.legend-item {
  display: flex; align-items: center; gap: 5px; background: #F2EEEA;
  border-radius: 16px; padding: 4px 10px; font-size: 0.73rem;
  box-shadow: 0 1px 3px rgba(50,34,27,0.06);
  cursor: pointer; transition: all 0.2s;
  border: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.legend-item:hover { background: #E8E2DC; transform: translateY(-1px); }
.legend-item.active {
  border-color: hsl(18,75%,50%);
  box-shadow: 0 2px 8px rgba(232,95,64,0.3);
  background: #FFF8F5;
}
.legend-item.dimmed { opacity: 0.4; }
.legend-item span { white-space: nowrap; }

@media (max-width: 480px) {
  .legend-item { padding: 3px 8px; font-size: 0.7rem; gap: 4px; }
  .legend-dot { width: 8px; height: 8px; }
}
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Cards (mobile default) ──────────────────────── */
.cards-container { display: flex; flex-direction: column; gap: 12px; }
.group-card {
  background: #F2EEEA; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(50,34,27,0.07); transition: transform 0.15s;
  border: 1px solid rgba(50,34,27,0.05);
}
.group-card:active { transform: scale(0.985); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 8px; gap: 8px;
}
.card-leader { font-weight: 700; font-size: 0.95rem; color: hsl(20,40%,22%); }
.card-body { padding: 0 14px 14px; }
.card-row {
  display: flex; align-items: center; gap: 6px;
  color: hsl(20,20%,40%); font-size: 0.84rem; padding: 3px 0;
}
.card-row-icon { flex-shrink: 0; width: 18px; text-align: center; font-size: 0.85rem; }
.card-dates {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(50,34,27,0.08);
}
.card-dates-label {
  font-size: 0.72rem; font-weight: 700; color: hsl(20,20%,55%);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}

/* ── Table (hidden on mobile, shown on desktop) ──── */
.table-wrap { display: none; overflow-x: auto; border-radius: 14px; box-shadow: 0 4px 18px rgba(50,34,27,0.08); }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.88rem; }
thead tr { background: linear-gradient(135deg, hsl(20,50%,22%) 0%, hsl(20,45%,30%) 100%); color: #FAF8F5; }
thead th { padding: 12px 12px; text-align: left; font-weight: 600; white-space: nowrap; }
tbody tr { border-bottom: 1px solid #F0EBE6; transition: background 0.15s; }
tbody tr:hover { background: #FDF9F5; }
tbody td { padding: 10px 12px; vertical-align: middle; }

/* ── Shared badges & chips ────────────────────────── */
.district-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 0.75rem; font-weight: 700; color: white; white-space: nowrap;
}
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.status-active   { background: #E8F5E9; color: #2E7D32; }
.status-starting { background: #FFF3E0; color: #E65100; }
.status-ready    { background: #FDE8D8; color: #BF5A1A; }
.phone-link { color: hsl(18,75%,45%); text-decoration: none; font-size: 0.88rem; font-weight: 500; }
.phone-link:hover { text-decoration: underline; }
.meeting-cell { min-width: 130px; padding: 8px 12px !important; }
.dates-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.date-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 20px;
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
  transition: transform 0.12s, box-shadow 0.12s;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.date-chip:hover { transform: scale(1.06); box-shadow: 0 2px 8px rgba(50,34,27,0.15); }
.date-chip:active { transform: scale(0.96); }
.chip-next    { background: #FFF3E0; color: #E65100; border: 1.5px solid #FFCC80; }
.chip-today   { background: #FDE8D8; color: #BF360C; border: 1.5px solid #FFAB91; }
.chip-future  { background: #F2EEEA; color: hsl(20,40%,35%); border: 1.5px solid hsl(25,25%,82%); }
.chip-past    { background: #F5F3F0; color: #bbb; border: 1.5px solid #E8E4E0; text-decoration: line-through; }
.chip-soon    { background: #FFF8E1; color: #F57F17; border: 1.5px solid #FFE082; }
.chip-dot     { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── Banners ──────────────────────────────────────── */
#data-banner {
  display: none; text-align: center; padding: 6px 12px; font-size: 0.78rem;
  background: #F0EBE6; color: hsl(20,30%,40%); border-bottom: 1px solid hsl(25,15%,85%);
}
#data-banner.warn { background: #FFF8E1; color: #795548; border-color: #FFE082; }
#geo-banner {
  display: none; text-align: center; padding: 5px 12px; font-size: 0.76rem;
  background: #FDE8D8; color: hsl(18,60%,40%); border-bottom: 1px solid hsl(18,50%,75%);
}
footer {
  text-align: center; padding: 20px 12px; color: hsl(20,15%,60%); font-size: 0.78rem;
  border-top: 1px solid #F0EBE6;
}
footer a { color: hsl(18,75%,45%); text-decoration: none; }
.loading-msg { text-align: center; color: hsl(20,15%,60%); padding: 40px 16px; font-style: italic; font-size: 0.9rem; }
.loading-row td { text-align: center; color: hsl(20,15%,60%); padding: 32px; font-style: italic; }

/* ── Desktop (768px+) ────────────────────────────── */
@media (min-width: 768px) {
  header .logo-img { width: 56px; height: 56px; }
  header h1 { font-size: 1.6rem; }
  header p { font-size: 0.95rem; }
  #map-section { margin-bottom: 56px; }
  #map { height: 500px; border-radius: 16px; }
  .section-header { font-size: 1.6rem; margin-bottom: 24px; }
  .section-header-icon { font-size: 1.8rem; }
  .legend-item { font-size: 0.85rem; padding: 6px 16px; }
  .legend-dot { width: 12px; height: 12px; }
  .cards-container { display: none; }
  .table-wrap { display: block; }
  .group-card { background: #fff; }
  .date-chip { padding: 4px 10px; font-size: 0.76rem; }
}

/* ── Leaflet popup compact ────────────────────────── */
.leaflet-popup-content-wrapper { border-radius: 10px !important; }
.leaflet-popup-content { margin: 8px 12px !important; font-size: 0.82rem; }
.leaflet-control-zoom { z-index: 100 !important; }
.leaflet-control { z-index: 100 !important; }
.leaflet-top { z-index: 100 !important; }
.leaflet-left { z-index: 100 !important; }
@media (max-width: 767px) {
  .leaflet-popup-content-wrapper { border-radius: 10px !important; }
  .leaflet-popup-content { margin: 6px 10px !important; }
  .leaflet-popup { max-width: 240px !important; }
}

/* ── Animations ───────────────────────────────────── */
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.group-card { animation: fadeIn 0.3s ease-out both; }
.group-card:nth-child(2) { animation-delay: 0.04s; }
.group-card:nth-child(3) { animation-delay: 0.08s; }
.group-card:nth-child(4) { animation-delay: 0.12s; }
.group-card:nth-child(5) { animation-delay: 0.16s; }
.group-card:nth-child(6) { animation-delay: 0.20s; }

/* ── Filters ──────────────────────────────────────── */
.filters {
  display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto;
  padding: 0 0 8px 0; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
  background: #F2EEEA; color: hsl(20,30%,35%); border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.filter-chip:hover { background: #E8E2DC; }
.filter-chip.active {
  background: hsl(18,75%,50%); color: white; border-color: hsl(18,75%,45%);
  box-shadow: 0 2px 8px rgba(232,95,64,0.3);
}
.filter-chip span { font-size: 0.85rem; }

@media (max-width: 380px) {
  .filter-chip { padding: 7px 10px; font-size: 0.72rem; gap: 4px; }
  .filter-chip span { font-size: 0.8rem; }
}

/* ── FAB (Floating Action Button) ─────────────────── */
.fab {
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: hsl(18,75%,50%); color: white;
  border: none; cursor: pointer; font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(232,95,64,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  display: none;
}
.fab:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(232,95,64,0.5); }
.fab:active { transform: scale(0.95); }
.fab.show { display: flex; align-items: center; justify-content: center; }

@media (min-width: 768px) {
  .fab { display: none !important; }
}