/*
 * app.css – Bootstrap 5.3 structural additions
 * Uses Bootstrap’s default palette as a base, with a few scoped custom colours
 * for popup and utility styles.
 */

/* ── Body font ───────────────────────────────────────────────────────────── */
body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Map wrap – responsive height ────────────────────────────────────────── */
#map-wrap { height: calc(100vh - 3rem); }
@media (min-width: 576px) { #map-wrap { height: calc(100vh - 3.5rem); } }

/* ── Map container – fill parent absolutely ─────────────────────────────── */
#map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* ── Map floating controls width ─────────────────────────────────────────── */
.map-controls { width: 320px; }

/* ── Map popup styles (CSP-safe, no inline styles) ─────────────────────── */
.popup-wrap {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 12px;
    min-width: 260px;
    max-width: 340px;
    line-height: 1.5;
}
.popup-wrap table { width: 100%; border-collapse: collapse; }
.popup-wrap tr { border-bottom: 1px solid #e5e7eb; }
.popup-wrap tr:last-child { border-bottom: none; }
.popup-wrap td { padding: 3px 6px; }
.popup-label    { color: #6b7280; font-size: 10px; white-space: nowrap; }
.popup-mono     { font-family: monospace; }
.popup-bold     { font-weight: 500; }
.popup-date     { color: #9ca3af; font-size: 10px; }
.popup-jubilee  { font-weight: 600; color: #16a34a; }
.popup-cdk {
    display: inline-block;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 10px;
    padding: 0 4px;
    border-radius: 8px;
    margin-right: 4px;
}
.popup-name-link { color: inherit; text-decoration: none; font-weight: 700; }

/* ── Sortable table headers ──────────────────────────────────────────────── */
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { background-color: var(--bs-tertiary-bg); }

/* ── Admin navigation pills ─────────────────────────────────────────────── */
.admin-nav .btn-primary {
    pointer-events: none;
}

/* ── Map loading overlay spinner ────────────────────────────────────────── */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spinner-map {
    animation: spin 1s linear infinite;
}

/* ── Table loading spinner ───────────────────────────────────────────────── */
.spinner-table {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--bs-border-color);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

/* ── Jubilee year highlight ──────────────────────────────────────────────── */
.year-green { color: #16a34a; }

/* ── Search input icon wrapper ───────────────────────────────────────────── */
.input-icon-wrap { position: relative; }

.input-icon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 4px 0 0 4px;
    color: #6b7280;
    pointer-events: none;
    z-index: 2;
}

.form-control-sm.ps-icon { padding-left: 2.4rem; }

/* ── Range filter fieldset ───────────────────────────────────────────────── */
.filter-range-group {
    border-color: var(--bs-border-color) !important;
}

.filter-range-legend {
    float: left;
    width: auto;
    margin-bottom: 0;
    line-height: 1;
    padding: 0 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}