/* Status colours (--fs-empty / --fs-low / --fs-plenty / --fs-me) are injected
   from variables.R by ui.R, with dark-mode values under [data-bs-theme=dark] */

.fs-container { max-width: 600px; margin: 0 auto; padding: 1rem; }

.fs-header { display: flex; justify-content: space-between; align-items: center; }
.fs-title { font-size: 1.5rem; margin: 0; font-weight: 600; }
/* "Fillari" in the brand accent (red; lighter red on dark), "Status" in the text colour: same as the project pages */
.fs-title-accent { color: var(--fs-accent); }

.fs-controls { display: flex; gap: 1.5rem; align-items: flex-end; flex-wrap: wrap; }
.fs-controls .form-group, .fs-controls .shiny-input-container { margin-bottom: 0.5rem; }

.fs-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

.fs-notice {
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.fs-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-left: 6px solid var(--bs-secondary-color);
    border-radius: 0.5rem;
    background-color: var(--bs-body-bg);
}
.fs-card.fs-empty { border-left-color: var(--fs-empty); }
.fs-card.fs-low { border-left-color: var(--fs-low); }
.fs-card.fs-plenty { border-left-color: var(--fs-plenty); }

.fs-name { font-weight: 600; }
.fs-distance { color: var(--bs-secondary-color); font-size: 0.85rem; }
.fs-count { font-size: 2rem; font-weight: 700; }
.fs-directions { font-size: 0.85rem; }

.fs-fav {
    background: none;
    border: 0;
    padding: 0 0.35rem 0 0;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--bs-secondary-color);
}
/* The favourite star is never compared with the status colours, so it can be
   darker than --fs-low on light backgrounds (3.6:1 vs 2.3:1 on white) */
:root { --fs-star: #B87A00; }
[data-bs-theme=dark] { --fs-star: #FFD700; }
.fs-fav.is-fav { color: var(--fs-star); }

/* Map. The map is only drawn once its tab is first shown, which can take a
   few seconds after a cold start; until Leaflet adds .leaflet-container the box
   would be an invisible empty div, so give it a visible "Loading map" panel. */
#map:not(.leaflet-container) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    border-radius: 0.5rem;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}
#map:not(.leaflet-container)::before { content: var(--fs-map-loading); }
/* Shiny dims outputs that are still calculating; the placeholder is exactly
   what should be readable at that moment */
#map.recalculating:not(.leaflet-container) { opacity: 1; }

/* isolation keeps Leaflet's internal z-indexes (controls 1000, popups 700...)
   inside the map, so page UI such as open dropdowns always stacks above it */
.leaflet-container { border-radius: 0.5rem; min-height: 350px; isolation: isolate; }
.fs-marker-label {
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
    text-shadow: none;
}
/* Popups stay white in dark mode, so keep their text dark */
.leaflet-popup-content { color: #000; font-size: 14px; }
.leaflet-popup-content a { color: #0072B2; }
/* The popup is white in both themes, so the star needs fixed, readable colours */
.leaflet-popup-content .fs-fav { color: #6c757d; padding-right: 0.3rem; }
.leaflet-popup-content .fs-fav.is-fav { color: #B87A00; }

.fs-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}
.fs-footer p { margin-bottom: 0.25rem; }

/* Breathing room between the List/Map tabs and the first card / the map */
.fs-container .tab-content { padding-top: 1rem; }

/* Brand accent on the active tab's underline */
.fs-container .nav-underline .nav-link.active { border-bottom-color: var(--fs-accent); }

.fs-footer-links a { margin: 0 0.35rem; white-space: nowrap; }