/* ==========================================================================
   beta-surfaces.css — Fase 6 / refresh 3
   Dark-glass surfaces for: MapLibre popups, #navModal, location/filter
   dropdowns inside the footer modal.

   ALL rules are scoped under body.beta-ui — non-beta users are byte-identical.
   Design token system — "Deep Slate" (same as nav-beta.css / map controls):
     --nbeta-surface:        rgba(20,26,42,.72)
     --nbeta-surface-strong: rgba(13,17,28,.86)
     --nbeta-surface-2:      rgba(28,35,56,.66)
     --nbeta-line:           rgba(120,135,170,.22)
     --nbeta-text:           #e9edf7
     --nbeta-muted:          #cdd6ea
     --nbeta-accent:         #16c8db
     --nbeta-accent-ink:     #04222a
     --nbeta-accent-soft:    rgba(22,200,219,.14)
     --nbeta-blur:           blur(16px) saturate(140%)
   (Variables declared on body.beta-ui in nav-beta.css — referenced here.)
   ========================================================================== */

/* ==========================================================================
   1. MapLibre marker popups
   ========================================================================== */

/* Popup panel */
body.beta-ui .maplibregl-popup-content {
    background: var(--nbeta-surface-strong) !important;
    -webkit-backdrop-filter: var(--nbeta-blur) !important;
    backdrop-filter: var(--nbeta-blur) !important;
    border: 1px solid var(--nbeta-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--rds-shadow-2) !important;
    color: var(--nbeta-text) !important;
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 500;
}

/* Popup tip — match surface-strong color */
body.beta-ui .maplibregl-popup-tip {
    border-top-color:    var(--nbeta-surface-strong) !important;
    border-bottom-color: var(--nbeta-surface-strong) !important;
    border-left-color:   var(--nbeta-surface-strong) !important;
    border-right-color:  var(--nbeta-surface-strong) !important;
    opacity: 0.95;
}

/* Popup close button */
body.beta-ui .maplibregl-popup-close-button {
    color: var(--nbeta-muted) !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 4px 6px !important;
    transition: color 0.15s ease, background 0.15s ease;
}
body.beta-ui .maplibregl-popup-close-button:hover {
    color: var(--nbeta-text) !important;
    background: var(--nbeta-accent-soft) !important;
}

/* Links and action buttons inside popups */
body.beta-ui .maplibregl-popup-content a {
    color: var(--nbeta-accent) !important;
    text-decoration: none;
    transition: color 0.15s ease;
}
body.beta-ui .maplibregl-popup-content a:hover {
    color: var(--rds-accent-hover) !important;
    text-decoration: underline;
}

/* .maplibre-popup-btn — inline action button inside popup */
body.beta-ui .maplibre-popup-btn {
    background: var(--nbeta-accent) !important;
    color: var(--nbeta-accent-ink) !important;
    border-radius: 7px !important;
    padding: 5px 10px !important;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-block;
    transition: opacity 0.15s ease;
}
body.beta-ui .maplibre-popup-btn:hover {
    opacity: 0.85;
    color: var(--nbeta-accent-ink) !important;
    text-decoration: none !important;
}

/* Muted meta rows inside the popup */
body.beta-ui .maplibre-popup-meta {
    color: var(--nbeta-muted) !important;
}

body.beta-ui .maplibre-dev-meta {
    border-top-color: var(--nbeta-line) !important;
    color: var(--nbeta-muted) !important;
}

/* ==========================================================================
   2. #navModal — "Meer" nav modal (Bootstrap modal)
   ========================================================================== */

/* Modal content: surface-strong glass */
body.beta-ui #navModal .modal-content {
    background: var(--nbeta-surface-strong);
    -webkit-backdrop-filter: var(--nbeta-blur);
    backdrop-filter: var(--nbeta-blur);
    border: 1px solid var(--nbeta-line);
    border-radius: 16px;
    color: var(--nbeta-text);
    box-shadow: var(--rds-shadow-3);
}

/* Modal header */
body.beta-ui #navModal .modal-header {
    background: transparent;
    border-bottom: 1px solid var(--nbeta-line);
    padding: 16px 20px 14px;
}

body.beta-ui #navModal .modal-title {
    color: var(--nbeta-text);
    font-weight: 700;
    font-size: 1rem;
}

/* X close button */
body.beta-ui #navModal .btn-close {
    filter: invert(1) opacity(0.55);
    transition: opacity 0.15s ease;
}
body.beta-ui #navModal .btn-close:hover {
    filter: invert(1) opacity(0.9);
}

/* Modal body */
body.beta-ui #navModal .modal-body {
    padding: 20px;
    background: transparent;
}

/* HR dividers inside modal */
body.beta-ui #navModal hr {
    border-color: var(--nbeta-line);
    opacity: 1;
}

/* Layer navigation buttons (All / Gyms / Incidents / PokéStops / Routes) */
body.beta-ui #navModal .btn.btn-primary {
    background: var(--nbeta-surface-2);
    -webkit-backdrop-filter: var(--nbeta-blur);
    backdrop-filter: var(--nbeta-blur);
    border: 1px solid var(--nbeta-line);
    border-radius: 12px;
    color: var(--nbeta-text);
    width: 100%;
    padding: 14px 8px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.beta-ui #navModal .btn.btn-primary:hover {
    background: var(--nbeta-accent-soft);
    border-color: rgba(22, 200, 219, 0.50);
    color: var(--nbeta-accent);
}
body.beta-ui #navModal .btn.btn-primary.active {
    background: var(--nbeta-accent-soft);
    border-color: rgba(22, 200, 219, 0.55);
    color: var(--nbeta-accent);
    box-shadow: inset 0 0 0 1px var(--rds-accent-line);
}
body.beta-ui #navModal .btn.btn-primary img {
    width: 28px;
    height: 28px;
    opacity: 0.9;
}

/* Quick filter section label */
body.beta-ui #navModal .form-label {
    color: var(--nbeta-muted);
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* All-map quick-filter toggle buttons (.toggle-marker-type) */
body.beta-ui #navModal .btn.btn-sm.btn-outline-primary.toggle-marker-type {
    background: var(--nbeta-surface-2);
    border: 1px solid var(--nbeta-line);
    border-radius: 10px;
    color: var(--nbeta-muted);
    font-size: 0.82rem;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.beta-ui #navModal .btn.btn-sm.btn-outline-primary.toggle-marker-type:hover {
    background: var(--nbeta-accent-soft);
    border-color: rgba(22, 200, 219, 0.50);
    color: var(--nbeta-text);
}
body.beta-ui #navModal .btn.btn-sm.btn-outline-primary.toggle-marker-type.active {
    background: var(--nbeta-accent-soft);
    border-color: rgba(22, 200, 219, 0.55);
    color: var(--nbeta-accent);
    box-shadow: inset 0 0 0 1px var(--rds-accent-line);
}

/* ==========================================================================
   3. Location / filter dropdowns inside #navModal
      (AJAX-loaded via /assets/tpl/a.footer.php into #locations / #filters)
   ========================================================================== */

/* Trigger button placeholder state */
body.beta-ui #navModal #locations .btn.btn-secondary,
body.beta-ui #navModal #filters .btn.btn-secondary {
    background: var(--nbeta-surface-2);
    border: 1px solid var(--nbeta-line);
    border-radius: 12px;
    color: var(--nbeta-muted);
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    min-height: 52px;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.beta-ui #navModal #locations .btn.btn-secondary:hover,
body.beta-ui #navModal #filters .btn.btn-secondary:hover {
    background: var(--nbeta-accent-soft);
    border-color: rgba(22, 200, 219, 0.40);
    color: var(--nbeta-text);
}

/* Placeholder animation tint */
body.beta-ui #navModal #locations .placeholder,
body.beta-ui #navModal #filters .placeholder {
    background: var(--nbeta-muted);
    opacity: 0.25;
    border-radius: 4px;
}

/* Dropdown toggle trigger (loaded AJAX btn) */
body.beta-ui #navModal #locations .btn[data-bs-toggle="dropdown"],
body.beta-ui #navModal #filters .btn[data-bs-toggle="dropdown"] {
    background: var(--nbeta-surface-2);
    border: 1px solid var(--nbeta-line);
    border-radius: 12px;
    color: var(--nbeta-text);
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    min-height: 52px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
body.beta-ui #navModal #locations .btn[data-bs-toggle="dropdown"]:hover,
body.beta-ui #navModal #filters .btn[data-bs-toggle="dropdown"]:hover {
    background: var(--nbeta-accent-soft);
    border-color: rgba(22, 200, 219, 0.45);
}

/* Dropdown menu */
body.beta-ui #navModal #locations .dropdown-menu,
body.beta-ui #navModal #filters .dropdown-menu {
    background: var(--rds-sheet);
    -webkit-backdrop-filter: var(--rds-blur-strong);
    backdrop-filter: var(--rds-blur-strong);
    border: 1px solid var(--nbeta-line);
    border-radius: 12px;
    box-shadow: var(--rds-shadow-2);
    padding: 6px;
    color: var(--nbeta-text);
    min-width: 100%;
}

/* Dropdown items */
body.beta-ui #navModal #locations .dropdown-item,
body.beta-ui #navModal #filters .dropdown-item {
    color: var(--nbeta-text);
    border-radius: 8px;
    padding: 10px 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}
body.beta-ui #navModal #locations .dropdown-item:hover,
body.beta-ui #navModal #filters .dropdown-item:hover {
    background: var(--nbeta-accent-soft);
    color: var(--nbeta-accent);
}
body.beta-ui #navModal #locations .dropdown-item.active,
body.beta-ui #navModal #filters .dropdown-item.active {
    background: var(--nbeta-accent-soft);
    color: var(--nbeta-accent);
}
body.beta-ui #navModal #locations .dropdown-item:active,
body.beta-ui #navModal #filters .dropdown-item:active {
    background: var(--rds-accent-soft-strong);
    color: var(--nbeta-accent);
}

/* Dropdown dividers */
body.beta-ui #navModal #locations .dropdown-divider,
body.beta-ui #navModal #filters .dropdown-divider {
    border-color: var(--nbeta-line);
    opacity: 1;
    margin: 4px 6px;
}

/* Dropdown header labels */
body.beta-ui #navModal #locations .dropdown-header,
body.beta-ui #navModal #filters .dropdown-header {
    color: var(--nbeta-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 14px 4px;
}

/* Any other .btn inside #locations / #filters (e.g. add/manage buttons) */
body.beta-ui #navModal #locations .btn:not([data-bs-toggle="dropdown"]):not(.btn-secondary),
body.beta-ui #navModal #filters .btn:not([data-bs-toggle="dropdown"]):not(.btn-secondary) {
    background: var(--nbeta-surface-2);
    border: 1px solid var(--nbeta-line);
    border-radius: 10px;
    color: var(--nbeta-text);
    padding: 8px 14px;
    min-height: 44px;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.beta-ui #navModal #locations .btn:not([data-bs-toggle="dropdown"]):not(.btn-secondary):hover,
body.beta-ui #navModal #filters .btn:not([data-bs-toggle="dropdown"]):not(.btn-secondary):hover {
    background: var(--nbeta-accent-soft);
    border-color: rgba(22, 200, 219, 0.45);
    color: var(--nbeta-accent);
}

/* ==========================================================================
   4. De-duplicate filter UI — hide old per-type filter dropdown
      The inline filter panel (beta map) replaces the old #filters block
      in the footer modal. #locations (scan-area picker) is kept visible.
   ========================================================================== */
body.beta-ui #filters {
    display: none !important;
}

/* ==========================================================================
   5. Reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    body.beta-ui .maplibregl-popup-close-button,
    body.beta-ui #navModal .btn,
    body.beta-ui #navModal #locations .dropdown-item,
    body.beta-ui #navModal #filters .dropdown-item {
        transition: none;
    }
}