/* Neighbr Map — mobile-first responsive layout + brand polish.
   Augments .map-layout / .map-column / .map-filter-button / panel cards
   from app.css with the landing-page brand system, without touching the
   shared stylesheet. This file only loads on /map/. */

/* ---- Brand tokens (mirror Tailwind @theme on the landing page) ---- */
:root {
    --neighbr-primary:   #0B5FFF;
    --neighbr-primary-700: #0A4FD6;
    --neighbr-navy:      #071B4D;
    --neighbr-purple:    #6D35E8;
    --neighbr-green:     #16A34A;
    --neighbr-orange:    #F97316;
    --neighbr-rose:      #E11D48;
    --neighbr-bg:        #F8FAFC;
    --neighbr-card:      #FFFFFF;
    --neighbr-border:    #E5E7EB;
    --neighbr-ink:       #0F172A;
    --neighbr-muted:     #475569;
    --neighbr-shadow-soft: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
    --neighbr-shadow-card: 0 1px 3px rgba(15,23,42,.05), 0 12px 32px rgba(7,27,77,.08);
    --neighbr-shadow-float: 0 8px 30px rgba(7,27,77,.18);
}

/* Marker cluster overrides — make Leaflet.markercluster's default
   div round and align with the civic-marker visual language. We
   return our own civic divIcon via iconCreateFunction, so the library's
   default .marker-cluster background should not paint. */
.leaflet-marker-icon.marker-cluster {
    background: transparent !important;
    border: 0 !important;
}
.leaflet-marker-icon.marker-cluster div {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Filter chip row scrolls horizontally on narrow widths so all civic
   object types stay reachable without crowding the map header. */
.map-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}
.map-filter-bar > .map-filter-button {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* The map element itself: give it a sensible minimum height across
   breakpoints so the tile area stays usable. */
#neighbr-map {
    width: 100%;
    min-height: 480px;
    border-radius: 14px;
    overflow: hidden;
}

/* ---- Mobile breakpoint: stack the three columns vertically ----
   The existing .map-layout uses a multi-column grid at desktop widths
   defined in app.css. Below the tablet breakpoint we collapse to a
   single column with the map at the top and the side cards stacked
   below as scroll-reachable panels. */
@media (max-width: 900px) {
    .map-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
    }
    .map-column.map-main {
        order: 1;
    }
    .map-column.map-activity {
        order: 2;
    }
    .map-column.map-sidebar {
        order: 3;
    }
    .map-column {
        width: 100%;
        max-width: 100%;
    }
    #neighbr-map {
        min-height: 60vh;
    }
}

/* ---- Small phone tweaks: tighter spacing, slightly shorter map. ---- */
@media (max-width: 540px) {
    #neighbr-map {
        min-height: 55vh;
        border-radius: 12px;
    }
    .map-filter-bar > .map-filter-button {
        padding-inline: 0.7rem;
    }
}

/* Respect users who prefer reduced motion: marker-cluster's spider
   animation can be disorienting; keep it but skip the transform-based
   zoom-pan ease where possible. */
@media (prefers-reduced-motion: reduce) {
    .leaflet-zoom-animated {
        transition: none !important;
    }
}

/* ===== Brand-aligned polish (filter chips, cards, popups) =====
   Scoped to .map-layout descendants so these only apply on /map/. */

/* Filter chip row: tighten spacing, give the active chip the landing-page
   pill treatment. */
.map-layout .map-filter-bar {
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.map-layout .map-filter-button {
    background: var(--neighbr-card);
    border: 1px solid var(--neighbr-border);
    color: var(--neighbr-muted);
    padding: 0.45rem 0.95rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 160ms ease, color 160ms ease,
                border-color 160ms ease, box-shadow 160ms ease,
                transform 160ms ease;
    box-shadow: none;
    white-space: nowrap;
}

.map-layout .map-filter-button:hover {
    color: var(--neighbr-navy);
    border-color: var(--neighbr-primary);
    background: rgba(11, 95, 255, 0.06);
}

.map-layout .map-filter-button:focus-visible {
    outline: 2px solid var(--neighbr-primary);
    outline-offset: 2px;
}

.map-layout .map-filter-button.active {
    background: var(--neighbr-primary);
    color: #fff;
    border-color: var(--neighbr-primary);
    box-shadow: var(--neighbr-shadow-soft);
}

.map-layout .map-filter-button.active:hover {
    background: var(--neighbr-primary-700);
    border-color: var(--neighbr-primary-700);
    color: #fff;
}

.map-layout .map-filter-button i {
    font-size: 0.95rem;
}

/* Section heading badge above the map ("Community", "Preview", "Live", etc.) */
.map-layout .map-panel .badge,
.map-layout .map-activity .badge,
.map-layout .map-sidebar .badge {
    background: rgba(11, 95, 255, 0.10);
    color: var(--neighbr-primary);
    border-radius: 9999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(11, 95, 255, 0.18);
}

/* Card panels: subtle landing-page-style elevation + brand-aligned heading. */
.map-layout .activity-card,
.map-layout .stat-card,
.map-layout .map-panel {
    background: var(--neighbr-card);
    border: 1px solid var(--neighbr-border);
    border-radius: 18px;
    box-shadow: var(--neighbr-shadow-soft);
    transition: box-shadow 200ms ease;
}

.map-layout .activity-card:hover,
.map-layout .stat-card:hover {
    box-shadow: var(--neighbr-shadow-card);
}

.map-layout .activity-card h3,
.map-layout .stat-card h3,
.map-layout .map-panel h2 {
    color: var(--neighbr-navy);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.map-layout .muted {
    color: var(--neighbr-muted);
}

/* Activity list & stat list — tighten and brand-align */
.map-layout .activity-entry strong {
    color: var(--neighbr-navy);
}

.map-layout .stat-list li {
    color: var(--neighbr-ink);
    font-weight: 500;
}

/* Quick-poll bars: brand-coloured fills (override colored inline width). */
.map-layout .poll-bar {
    background: rgba(11, 95, 255, 0.10);
    border-radius: 9999px;
    overflow: hidden;
    height: 8px;
}

.map-layout .poll-bar > span {
    height: 100%;
    display: block;
    border-radius: inherit;
}

/* Leaflet popup: match the brand card system. */
.leaflet-popup-content-wrapper {
    border-radius: 14px !important;
    box-shadow: var(--neighbr-shadow-card) !important;
    border: 1px solid var(--neighbr-border);
    padding: 0;
}

.leaflet-popup-content {
    margin: 14px 16px;
    color: var(--neighbr-ink);
    font-size: 0.875rem;
    line-height: 1.45;
}

.leaflet-popup-content strong,
.leaflet-popup-content .popup-entry-title {
    color: var(--neighbr-navy);
    font-weight: 700;
}

.leaflet-popup-content .popup-link {
    color: var(--neighbr-primary);
    font-weight: 600;
    text-decoration: none;
}

.leaflet-popup-content .popup-link:hover {
    text-decoration: underline;
}

.leaflet-popup-tip {
    box-shadow: var(--neighbr-shadow-card) !important;
}

/* ===== Mobile "Show panels" floating toggle (drawer feel) =====
   On mobile, the side cards (Activity + Civic Pulse) stack below the map.
   A floating chip lets users jump straight to them without scrolling. */
.map-panel-jump {
    display: none;
    position: fixed;
    z-index: 900;
    right: 16px;
    bottom: 20px;
    padding: 0.7rem 1.05rem;
    border-radius: 9999px;
    background: var(--neighbr-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: var(--neighbr-shadow-float);
    border: 0;
    cursor: pointer;
    align-items: center;
    gap: 0.4rem;
    transition: background 160ms ease, transform 160ms ease;
}

.map-panel-jump:hover {
    background: var(--neighbr-primary-700);
}

.map-panel-jump:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .map-panel-jump {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-layout .map-filter-button,
    .map-layout .activity-card,
    .map-layout .stat-card,
    .map-panel-jump {
        transition: none;
    }
}