/* Scholar map — research-hub pin.
 *
 * Distinct from the default Leaflet teardrop used for individual scholars:
 * a circular brand-coloured glyph with a pulsing ring around it so hubs are
 * spottable on a busy map at a glance. The marker is rendered via L.divIcon
 * from backend/assets/js/scholar_map.js — see hubIcon there.
 */

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

.hub-pin-body {
    position: absolute;
    inset: 4px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgb(var(--color-dark-blue)) 0%, rgb(var(--color-blue)) 100%);
    border: 3px solid #fff;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 4px 12px rgb(var(--color-dark-blue) / 0.45);
    z-index: 2;
}

.hub-pin-ring {
    position: absolute;
    inset: 0;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: rgb(var(--color-blue) / 0.35);
    animation: hub-pin-pulse 1.8s ease-out infinite;
    z-index: 1;
}

@keyframes hub-pin-pulse {
    0%   { transform: scale(0.85); opacity: 0.9; }
    70%  { transform: scale(1.45); opacity: 0;   }
    100% { transform: scale(1.45); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
    .hub-pin-ring {
        animation: none;
        opacity: 0.4;
    }
}

/* Hub-popup chrome. Lives in scholar_map.js as inline HTML strings (Leaflet
 * popups don't have great class-binding hooks), but the parts we can scope
 * via a wrapper class live here so designers can re-skin without touching JS. */
.hub-popup-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgb(var(--color-dark-blue));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 9999px;
    margin-bottom: 6px;
}

/* Scholar / hub visibility toggles — horizontal bar above the map.
 * Two pill-shaped toggles, both ON by default; clicking either dims it and
 * hides the corresponding cluster layer on the Leaflet map below. */
.map-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid rgb(var(--color-light-blue) / 0.45);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(10, 35, 75, 0.08);
    font-size: 0.9rem;
    user-select: none;
}

.map-filter-bar__title {
    color: rgb(var(--color-dark-blue));
    font-weight: 600;
    margin-right: 4px;
}

.map-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1.5px solid rgb(var(--color-dark-blue) / 0.18);
    background: #fff;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.map-filter-toggle:hover {
    background: rgb(var(--color-light-blue) / 0.14);
    border-color: rgb(var(--color-dark-blue) / 0.32);
}

.map-filter-toggle:active {
    transform: scale(0.97);
}

.map-filter-toggle input[type="checkbox"] {
    /* Hide the native checkbox — the whole pill is the click target. */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.map-filter-toggle:has(input:checked) {
    border-color: rgb(var(--color-dark-blue));
    background: rgb(var(--color-dark-blue) / 0.06);
}

.map-filter-dot {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgb(var(--color-dark-blue) / 0.25);
}

.map-filter-dot--scholar {
    background: rgb(var(--color-blue));
}

.map-filter-dot--hub {
    background: linear-gradient(135deg, rgb(var(--color-dark-blue)) 0%, rgb(var(--color-blue)) 100%);
}

.map-filter-label {
    color: rgb(var(--color-dark-blue));
    font-weight: 600;
}

.map-filter-count {
    background: rgb(var(--color-dark-blue) / 0.1);
    color: rgb(var(--color-dark-blue));
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 9999px;
    min-width: 22px;
    text-align: center;
}

/* When the checkbox is OFF: visually dim the whole pill so the user sees it
 * as the "hidden" state, but keep it clickable to re-enable. */
.map-filter-toggle:not(:has(input:checked)) {
    opacity: 0.5;
}