/* RLA BOTTOM-NAV-COMPACT 1.1 | CSS implementation 1.0.0 | 09/10/2026.
 * OPT-IN: existing ID + .bottom-nav.rla-bottom-nav[data-rla-bottom-nav].
 * DOM: __track > __button, or __item > input.__button + __icon.
 * Site.Master retains position, z-index, --bottom-nav-h measurement and offset.
 * No new JS/observer. Do not auto-migrate unmarked pages via a global include.
 * Shell-aware specificity and !important beat Master .btn rules emitted after
 * HeadContent, including success/danger states. Keep IDs/events/permissions.
 */

/* 01. Configuration: override only required tokens under the existing nav ID.
 * Height is a minimum, never a clipping height. Icon = font, SVG or image.
 * Cell width is a desktop preference; long labels may exceed it.
 * Safe area uses the shell variable OR env(), never both added together. */
.bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] {
    --rla-nav-dark: #484848;
    --rla-nav-primary: #EB8023;
    --rla-nav-kicker: #FED7AA;
    --rla-nav-text: #FFFFFF;
    --rla-nav-button-height: 48px;
    --rla-nav-icon-size: 20px;
    --rla-nav-label-size: 11px;
    --rla-nav-cell-width: 104px;
    --rla-nav-button-padding: 4px;
    --rla-nav-icon-gap: 3px;
    --rla-nav-gap: 4px;
    --rla-nav-padding-y: 4px;
    --rla-nav-padding-x: 8px;
    --rla-nav-radius: 8px;
    --rla-nav-motion: .18s ease;
    --rla-nav-safe-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
    --rla-nav-safe-left: var(--safe-left, env(safe-area-inset-left, 0px));
    --rla-nav-safe-right: var(--safe-right, env(safe-area-inset-right, 0px));
}

/* 02. Visual owner only: no fixed/inset/z-index/content padding here. */
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] {
    box-sizing: border-box !important; display: flex !important; flex-wrap: nowrap !important;
    align-items: stretch !important; justify-content: center !important; gap: 0 !important;
    min-width: 0; margin: 0 !important;
    padding: var(--rla-nav-padding-y) calc(var(--rla-nav-padding-x) + var(--rla-nav-safe-right)) calc(var(--rla-nav-padding-y) + var(--rla-nav-safe-bottom)) calc(var(--rla-nav-padding-x) + var(--rla-nav-safe-left)) !important;
    border: 0 !important; border-top: 1px solid #e8edf3 !important; border-radius: 0 !important;
    background: var(--rla-nav-dark) !important; box-shadow: 0 -3px 12px rgba(15,23,42,.06) !important;
    overflow: visible !important; font-family: inherit;
}

/* 03. The inner track is the ONLY horizontal scroll owner. */
.bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__track {
    display: flex; align-items: stretch; flex-wrap: nowrap; gap: var(--rla-nav-gap);
    width: max-content; max-width: 100%; min-width: 0; overflow-x: auto;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--rla-nav-primary) var(--rla-nav-dark);
}
.bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__track::-webkit-scrollbar { height: 5px; }
.bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__track::-webkit-scrollbar-track { background: var(--rla-nav-dark); }
.bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__track::-webkit-scrollbar-thumb { background: var(--rla-nav-primary); border-radius: 8px; }

/* 04. a / HTML button / LinkButton / original input rendered by asp:Button. */
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__button {
    position: relative; box-sizing: border-box !important; display: flex !important;
    flex-direction: column; align-items: center !important; justify-content: center !important;
    flex: 0 0 auto !important; gap: var(--rla-nav-icon-gap) !important;
    width: var(--rla-nav-cell-width) !important; min-width: max-content !important; max-width: none !important;
    height: auto !important; min-height: var(--rla-nav-button-height) !important; max-height: none !important;
    margin: 0 !important; padding: var(--rla-nav-button-padding) !important;
    border: 1px solid transparent !important; border-radius: var(--rla-nav-radius) !important;
    background: transparent !important; background-image: none !important; box-shadow: none !important; transform: none !important;
    color: var(--rla-nav-text) !important; font-family: inherit; font-size: var(--rla-nav-label-size) !important;
    font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: normal !important;
    text-align: center !important; text-decoration: none !important; white-space: nowrap !important;
    appearance: none; cursor: pointer; transition: color var(--rla-nav-motion), border-color var(--rla-nav-motion) !important;
}
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__button:is(:hover,:focus,:focus-visible,:active,:disabled,.disabled,[aria-disabled="true"],[aria-current]) {
    background: transparent !important; background-image: none !important; box-shadow: none !important; transform: none !important;
}
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__button:is(:hover,:focus-visible,[aria-current="page"],[aria-current="location"],[aria-pressed="true"]):not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: var(--rla-nav-kicker) !important; border-color: var(--rla-nav-primary) !important;
}
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__button:focus-visible { outline: 2px solid var(--rla-nav-primary) !important; outline-offset: -2px; }
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__button:is(:disabled,.disabled,[aria-disabled="true"]) { opacity: .58 !important; cursor: not-allowed !important; }
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__button::before,
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__button::after { content: none !important; }

/* 05. Bootstrap glyph: bi-arrow-left WITHOUT .bi (the VAS legacy image
 * adapter owns .bi). No global icon override. Keep labels if fonts fail. */
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--rla-nav-icon-size);
    width: var(--rla-nav-icon-size) !important; height: var(--rla-nav-icon-size) !important;
    margin: 0; padding: 0; font-size: var(--rla-nav-icon-size) !important; line-height: 1 !important;
    color: var(--rla-nav-primary) !important; object-fit: contain; pointer-events: none;
}
.bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__icon::before { font-size: inherit !important; line-height: 1 !important; }
.bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__label { display: block; color: inherit; font-size: inherit; line-height: inherit; pointer-events: none; }

/* 06. Optional asp:Button wrapper: no tabindex/handler on wrapper; original
 * input covers the whole item. Hide wrapper together with hidden control. */
.bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__item { position: relative; display: flex; flex: 0 0 auto; width: var(--rla-nav-cell-width); min-width: max-content; }
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__item > input.rla-bottom-nav__button {
    width: 100% !important; padding-top: calc(var(--rla-nav-button-padding) + var(--rla-nav-icon-size) + var(--rla-nav-icon-gap)) !important;
}
.bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__item > .rla-bottom-nav__icon { position: absolute; top: var(--rla-nav-button-padding); left: calc(50% - var(--rla-nav-icon-size) / 2); }

/* 07. Respect server/HTML hidden state and avoid empty cells/bar. Existing
 * code using custom hiding classes must hide its wrapper/bar too. CSS is not
 * a permission gate; aria-disabled alone does not block clicks. */
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id][hidden],
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] [hidden],
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__item:not(:has(> .rla-bottom-nav__button:not([hidden]))),
:is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id]:not(:has(.rla-bottom-nav__track > .rla-bottom-nav__button:not([hidden]),.rla-bottom-nav__track > .rla-bottom-nav__item:not([hidden]) > .rla-bottom-nav__button:not([hidden]))) { display: none !important; }

/* 08. Mobile equal cells use the actual number of visible children. */
@media (max-width: 767.98px) {
    .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__track { width: 100%; }
    :is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__track > .rla-bottom-nav__button,
    .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__track > .rla-bottom-nav__item { flex: 1 1 0 !important; width: auto !important; min-width: max-content !important; max-width: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    :is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__button { transition: none !important; }
    .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] .rla-bottom-nav__track { scroll-behavior: auto !important; }
}
@media print {
    :is(body .app-main.vas-ui-scope, body) .bottom-nav.rla-bottom-nav[data-rla-bottom-nav][id] { display: none !important; }
}