/* ==========================================================================
   nav-beta.css — Fase 6 beta navigation (Direction "C")
   Dark-glass brand bar (top) + floating dark-glass dock (bottom).
   ALL rules are scoped under body.beta-ui so non-beta visitors are unaffected.

   Design token system — "Deep Slate / --rds-*" (F7 unified):
   Single source of truth for all beta-UI surfaces.
   Canonical location: body.beta-ui below.
   --nbeta-* / --mc-* kept as aliases so existing references are zero-churn.
   ========================================================================== */

body.beta-ui {
  /* ===== F7 unified --rds-* token block (verbatim from audit §1.2) ===== */

  /* ---- color: surfaces ---- */
  --rds-surface:        rgba(20, 26, 42, .78);   /* denser mc value for map overlay legibility */
  --rds-surface-strong: rgba(13, 17, 28, .90);
  --rds-surface-2:      rgba(28, 35, 56, .72);
  --rds-panel:          rgba(15, 19, 32, .95);   /* content-paneel: bijna dicht + frosted-blur → leesbaar over de kaart */
  --rds-line:           rgba(120, 135, 170, .22);

  /* ---- color: text ---- */
  --rds-text:           #e9edf7;
  --rds-muted:          #cdd6ea;

  /* ---- color: accent (cyan only) ---- */
  --rds-accent:         #16c8db;
  --rds-accent-hover:   #4dd9e8;
  --rds-accent-ink:     #04222a;
  --rds-accent-soft:    rgba(22, 200, 219, .16);
  --rds-accent-line:    rgba(22, 200, 219, .32);

  /* ---- secondary accents (filter panel — PvP amber, danger) ---- */
  --rds-pvp:            #ffb454;
  --rds-pvp-ink:        #1a0e00;
  --rds-danger:         #ff6b81;

  /* ---- spacing scale ---- */
  --rds-sp-1: 4px; --rds-sp-2: 6px; --rds-sp-3: 8px; --rds-sp-4: 12px;
  --rds-sp-5: 14px; --rds-sp-6: 16px; --rds-sp-7: 20px;

  /* ---- radii scale ---- */
  --rds-r-1: 8px; --rds-r-2: 10px; --rds-r-3: 12px; --rds-r-4: 16px; --rds-r-pill: 999px;

  /* ---- typography ---- */
  --rds-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rds-fs-xs: 11px; --rds-fs-sm: 12px; --rds-fs-md: 13px; --rds-fs-base: 14px;
  --rds-fw-reg: 400; --rds-fw-med: 500; --rds-fw-semi: 600; --rds-fw-bold: 700;

  /* ---- shadow levels ---- */
  --rds-shadow-1: 0 4px 20px rgba(0,0,0,.40);
  --rds-shadow-2: 0 10px 30px rgba(0,0,0,.55);
  --rds-shadow-3: 0 16px 48px rgba(0,0,0,.65);

  /* ---- blur / sheet variants ---- */
  --rds-blur:           blur(16px) saturate(140%);
  --rds-blur-strong:    blur(24px) saturate(160%);
  --rds-sheet:          rgba(10, 13, 22, .97);

  /* ---- line variants ---- */
  --rds-line-strong:    rgba(120, 135, 170, .30);
  --rds-line-faint:     rgba(120, 135, 170, .10);

  /* ---- accent-soft strong (burger hover / active wash) ---- */
  --rds-accent-soft-strong: rgba(22, 200, 219, .22);

  /* ---- motion ---- */
  --rds-dur-fast: .12s;
  --rds-dur:      .15s;
  --rds-dur-slow: .22s;
  --rds-ease:     ease;

  /* ---- layout ---- */
  --rds-top-h:    60px;
  --rds-dock-gap: 18px;
  --rds-inset:    12px;
  /* env(safe-area-inset-bottom) wordt 0 op iOS als de browser-chrome zichtbaar is;
     garandeer een vloer zodat de dock niet achter de home-indicator/toolbar valt. */
  --rds-safe:     max(env(safe-area-inset-bottom, 0px), 14px);

  /* ===== --nbeta-* aliases → --rds-* (zero visual churn for existing references) ===== */
  --nbeta-surface:        var(--rds-surface);
  --nbeta-surface-strong: var(--rds-surface-strong);
  --nbeta-surface-2:      var(--rds-surface-2);
  --nbeta-line:           var(--rds-line);
  --nbeta-text:           var(--rds-text);
  --nbeta-muted:          var(--rds-muted);
  --nbeta-accent:         var(--rds-accent);
  --nbeta-accent-ink:     var(--rds-accent-ink);
  --nbeta-accent-soft:    var(--rds-accent-soft);
  --nbeta-blur:           var(--rds-blur);
  --nbeta-top-h:          var(--rds-top-h);
  --nbeta-dock-gap:       var(--rds-dock-gap);
  --nbeta-safe:           var(--rds-safe);
}

/* Hide the legacy chrome should it ever co-render (defensive; gate already wraps). */
body.beta-ui .navbar-main,
body.beta-ui .footer-main { display: none !important; }

/* ==========================================================================
   TOP — dark-glass brand bar
   ========================================================================== */
.nav-beta-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: var(--nbeta-top-h);
    background: var(--rds-surface-strong);   /* dichter glas → tekst leest over drukke kaart */
    -webkit-backdrop-filter: var(--nbeta-blur);
    backdrop-filter: var(--nbeta-blur);
    border-bottom: 1px solid var(--nbeta-line);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    color: var(--nbeta-text);
}

.nav-beta-top-inner {
    max-width: 1140px;
    height: 100%;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-beta-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
    border-radius: 8px;
    transition: opacity 0.15s ease;
}
.nav-beta-brand img { height: 26px; width: auto; display: block; }
.nav-beta-brand:hover { opacity: 0.85; }
.nav-beta-brand:focus-visible {
    outline: 2px solid var(--nbeta-accent);
    outline-offset: 3px;
}

/* XS bell beside the brand (mobile notification entry, keeps #divNotificationCountXS) */
.nav-beta-xs-bell {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    color: var(--nbeta-text);
    border-radius: 10px;
    transition: background 0.15s ease;
}
.nav-beta-xs-bell .nbi { width: 21px; height: 21px; }
.nav-beta-xs-bell:hover { background: var(--nbeta-accent-soft); }
.nav-beta-xs-bell:focus-visible {
    outline: 2px solid var(--nbeta-accent);
    outline-offset: 2px;
}
.nav-beta-xs-bell #divNotificationCountXS { position: absolute; top: 2px; right: 2px; }
.nav-beta-xs-bell #divNotificationCountXS .badge {
    font-size: 0.62rem;
    padding: 0.2em 0.4em;
    border-radius: 999px;
    line-height: 1;
    background: var(--nbeta-accent) !important;
    color: var(--nbeta-accent-ink) !important;
    box-shadow: 0 0 0 1.5px rgba(4, 34, 42, 0.6); /* derived from accent-ink — intentional one-off */
}

/* Link cluster (right-aligned on desktop) */
.nav-beta-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-beta-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 11px;
    color: var(--rds-muted);                 /* helderder voor leesbaarheid over de kaart */
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.nav-beta-link .nbi {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    opacity: 0.85;
}
.nav-beta-link-icon { padding: 8px 10px; }

.nav-beta-link:hover {
    background: var(--nbeta-accent-soft);
    color: var(--nbeta-text);
}
.nav-beta-link:hover .nbi { opacity: 1; }
.nav-beta-link:active { transform: translateY(1px); }
.nav-beta-link:focus-visible {
    outline: 2px solid var(--nbeta-accent);
    outline-offset: 2px;
}

.nav-beta-link.is-active {
    background: var(--nbeta-accent-soft);
    color: var(--nbeta-accent);
    box-shadow: inset 0 0 0 1px var(--rds-accent-line);
}
.nav-beta-link.is-active .nbi { opacity: 1; }

/* Count badges as small pills */
.nav-beta-link .badge {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.22em 0.5em;
    border-radius: 999px;
    line-height: 1;
    vertical-align: middle;
    background: var(--nbeta-accent) !important;
    color: var(--nbeta-accent-ink) !important;
}

/* Burger (mobile only) */
.nav-beta-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid var(--nbeta-line);
    border-radius: 11px;
    background: var(--nbeta-accent-soft);
    color: var(--nbeta-text);
    cursor: pointer;
    transition: background 0.15s ease;
}
.nav-beta-burger .nbi { width: 22px; height: 22px; }
.nav-beta-burger:hover { background: var(--rds-accent-soft-strong); }
.nav-beta-burger:focus-visible {
    outline: 2px solid var(--nbeta-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   BOTTOM — floating dark-glass dock
   ========================================================================== */
.nav-beta-dock-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--nbeta-dock-gap) + var(--nbeta-safe));
    z-index: 1030;
    display: flex;
    justify-content: center;
    pointer-events: none;        /* only the dock catches events */
    padding: 0 12px;
}

.nav-beta-dock {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 7px;
    border-radius: 22px;
    background: var(--nbeta-surface-2);
    -webkit-backdrop-filter: var(--nbeta-blur);
    backdrop-filter: var(--nbeta-blur);
    border: 1px solid var(--nbeta-line);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    max-width: 100%;
}

.nav-beta-dock-item {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 62px;
    padding: 8px 12px;
    border-radius: 16px;
    color: var(--nbeta-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.nav-beta-dock-item .nbi {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
}
.nav-beta-dock-item .ndi-text { line-height: 1; }

.nav-beta-dock-item:hover {
    background: var(--nbeta-accent-soft);
    color: var(--nbeta-text);
}
.nav-beta-dock-item:active { transform: translateY(1px); }
.nav-beta-dock-item:focus-visible {
    outline: 2px solid var(--nbeta-accent);
    outline-offset: 2px;
}

.nav-beta-dock-item.is-active {
    color: var(--nbeta-accent);
    background: var(--nbeta-accent-soft);
    box-shadow: inset 0 0 0 1px var(--rds-accent-line);
}
.nav-beta-dock-item.is-active .nbi {
    filter: drop-shadow(0 0 6px rgba(22, 200, 219, 0.50));
}

/* ==========================================================================
   Layout offsets — push page content clear of the fixed top bar.
   ========================================================================== */
body.beta-ui {
    padding-top: var(--nbeta-top-h);
}
/* De body offset al voor de vaste nav; neutraliseer de oude .container-content
   top-offset (was 90px voor de oude navbar) zodat er geen dubbele witruimte ontstaat. */
body.beta-ui .container-content {
    padding-top: 14px;
}

/* ==========================================================================
   Responsive — collapse top links into a dark-glass sheet under the bar.
   ========================================================================== */
@media (min-width: 992px) {
    .nav-beta-burger { display: none !important; }
}

@media (max-width: 991.98px) {
    /* ---- Top bar row: burger / bell breathing room ---- */
    .nav-beta-xs-bell {
        display: inline-flex;
        width: 44px;
        height: 44px;
        margin-left: 6px;
    }
    .nav-beta-burger {
        display: inline-flex;
        width: 44px;
        height: 44px;
        margin-left: 4px;
    }

    /* ---- Drop-down sheet: dark-glass card with margin from screen edges ---- */
    .nav-beta-links {
        position: fixed;
        top: calc(var(--nbeta-top-h) + 6px);   /* small gap from bar */
        left: 10px;
        right: 10px;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;           /* comfortable item separation */
        padding: 14px 12px;
        border-radius: 18px;
        background: var(--rds-sheet);
        -webkit-backdrop-filter: var(--rds-blur-strong);
        backdrop-filter: var(--rds-blur-strong);
        border: 1px solid var(--rds-line-strong);
        box-shadow: var(--rds-shadow-3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) scale(0.98);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }
    .nav-beta-links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    /* ---- Sheet items: generous tap targets, icons left-aligned ---- */
    .nav-beta-link {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;          /* icon + label spacing */
        padding: 14px 16px;
        font-size: 1rem;
        border-radius: 13px;
        min-height: 52px;   /* ≥48px touch target with padding */
        justify-content: flex-start;
    }
    .nav-beta-link .nbi {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }
    /* Count badges pushed to the right */
    .nav-beta-link .badge { margin-left: auto; }

    /* Hairline separator between logical groups */
    .nav-beta-link + .nav-beta-link {
        border-top: 1px solid var(--rds-line-faint);
    }
}

/* ---- Mobile dock — full-width tab-bar (≤767px) ---- */
@media (max-width: 767px) {
    /* Dock clearance token: consumed by the Filters toggle and Stats pill
       to ensure they always float just above the dock's top edge.
       64px ≈ dock height (icon 23px + label ~13px + padding ~20px + gap).
       Change the 64px here if dock height changes; toggle/stats follow. */
    body.beta-ui {
        --rds-dock-clearance: calc(var(--rds-dock-gap) + var(--rds-safe) + 64px + 10px);
    }

    /* Keep the dock gap smaller on mobile — dock is now wider so it sits
       lower on screen; safe-area floor (≥20px via --rds-safe) still ensures
       clearance above the home indicator. */
    body.beta-ui {
        --rds-dock-gap: 8px;
        /* Strengthen the safe-area floor for notched iPhones (home indicator ~34px).
           max(env(safe-area-inset-bottom, 0px), 20px) guarantees ≥20px on
           no-notch and ≥34px on notched devices — well clear of the home bar. */
        --rds-safe: max(env(safe-area-inset-bottom, 0px), 20px);
    }

    /* Wrap spans full width; small side padding for breathing room */
    .nav-beta-dock-wrap {
        padding: 0 6px;
    }

    /* Dock itself fills the available width */
    .nav-beta-dock {
        width: 100%;
        border-radius: 18px;
        padding: 6px;
        gap: 2px;
    }

    /* Items distribute evenly, thumb-friendly height */
    .nav-beta-dock-item {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 4px;
        min-height: 56px;
        font-size: 0.63rem;
        border-radius: 13px;
    }
    .nav-beta-dock-item .nbi { width: 22px; height: 22px; }
    /* Labels: never truncate weirdly — clip with ellipsis if truly too narrow */
    .nav-beta-dock-item .ndi-text {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ≤420px: even tighter — narrower screen still fits 5 items */
@media (max-width: 420px) {
    .nav-beta-dock { gap: 1px; padding: 5px; }
    .nav-beta-dock-item {
        padding: 7px 2px;
        font-size: 0.60rem;
    }
    .nav-beta-dock-item .nbi { width: 20px; height: 20px; }
}

/* Reduced-motion: drop transforms/transitions */
@media (prefers-reduced-motion: reduce) {
    body.beta-ui .nav-beta-link,
    body.beta-ui .nav-beta-dock-item,
    body.beta-ui .nav-beta-links,
    body.beta-ui .nav-beta-brand { transition: none; }
}