/**
 * Adaptive navigation — mobile / tablet / desktop shell behavior.
 * Breakpoints: mobile <768 | tablet 768–1024 | desktop >1024
 * Load after mobile-native.css and shell-chrome.
 */

:root {
    --app-nav-tablet-max: 1024px;
    --app-nav-desktop-min: 1025px;
    --app-nav-touch-min: 44px;
}

/* Early html class (set in head) — phone vs tablet dock visibility */
html.app-mobile-mode .app-tablet-quick-dock,
html.app-desktop-mode .app-mobile-bottom-nav,
html.app-desktop-mode .app-tablet-quick-dock {
    display: none !important;
}

html.app-tablet-mode .app-mobile-bottom-nav {
    display: none !important;
}

/* ── Phone: bottom tab bar only ── */
@media (max-width: 767px) {
    .app-mobile-bottom-nav {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        height: auto !important;
        opacity: 1 !important;
    }

    .app-tablet-quick-dock,
    .app-shell-tablet-dock {
        display: none !important;
    }
}

/* ── Tablet: floating quick dock only ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .app-mobile-bottom-nav,
    .app-shell-mobile-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .app-shell-tablet-dock {
        display: block !important;
        visibility: visible !important;
        pointer-events: none;
        height: auto !important;
        opacity: 1 !important;
    }

    .app-tablet-quick-dock {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        height: auto !important;
        opacity: 1 !important;
    }
}

/* ── Desktop: hide compact docks ── */
@media (min-width: 1025px) {
    .app-mobile-bottom-nav,
    .app-tablet-quick-dock,
    .app-shell-mobile-nav,
    .app-shell-tablet-dock {
        display: none !important;
    }
}

/* ── Tablet: drawer nav only — hide rail sidebar to avoid double logo/header clash ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .app-sidebar.app-sidebar--tablet,
    aside.app-sidebar.app-sidebar--tablet {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .app-shell-main,
    .app-theme-content.app-shell-main {
        padding-bottom: calc(var(--app-tablet-dock-height, 4rem) + 1rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .app-header-native-brand__menu .app-header-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: var(--app-nav-touch-min);
        min-height: var(--app-nav-touch-min);
        width: var(--app-nav-touch-min);
        height: var(--app-nav-touch-min);
    }

    .app-tablet-mode .app-header-native-brand__copy {
        display: block !important;
    }

    .app-tablet-mode .app-header-native-brand__eyebrow {
        display: none !important;
    }
}

/* ── Mobile header: hamburger + title + actions ── */
@media (max-width: 1024px) {
    .app-shell-header .app-shell-header__bar.app-theme-shell {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .app-shell-header__bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        overflow: visible;
        padding-inline: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px));
    }

    .app-header-leading {
        flex: none;
        min-width: 0;
        max-width: none;
        overflow: hidden;
        justify-content: flex-start;
    }

    .app-header-native-brand {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        justify-content: start;
        justify-items: start;
        width: 100%;
        min-width: 0;
        gap: 0.5rem;
    }

    .app-header-native-brand__menu {
        grid-column: 1;
        justify-self: start;
    }

    .app-header-native-brand__logo {
        grid-column: 2;
        justify-self: start;
    }

    .app-header-native-brand__copy {
        grid-column: 3;
        min-width: 0;
        overflow: hidden;
        text-align: left;
    }

    .app-header-native-brand__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-header-actions {
        flex: 0 0 auto;
        grid-column: 2;
        justify-self: end;
        margin-left: 0;
        overflow: visible;
    }

    .app-header-actions [x-ref="trigger"]:has(.app-header-profile) {
        margin-left: 0;
        padding-left: 0;
        overflow: visible;
    }

    .app-shell-header-wrap,
    .app-shell-header,
    .app-shell-header .app-shell-header__bar {
        overflow: visible;
    }

    .app-header-profile__meta,
    .app-header-profile__name,
    .app-header-profile__chevron {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .app-header-native-brand__copy {
        display: none !important;
    }

    .app-header-native-brand {
        grid-template-columns: auto auto;
        width: auto;
    }

    .app-header-native-brand__menu {
        grid-column: 1;
    }

    .app-header-native-brand__logo {
        grid-column: 2;
    }

    .app-header-native-brand__menu {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .app-header-native-brand__menu .app-header-menu-btn,
    .app-header-native-brand__menu .app-header-icon-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: var(--app-nav-touch-min);
        min-height: var(--app-nav-touch-min);
        width: var(--app-nav-touch-min);
        height: var(--app-nav-touch-min);
    }

    .app-shell-header-wrap {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .app-shell-header-wrap.is-hidden {
        transform: translateY(0) !important;
    }

    .app-header-actions .app-header-icon-btn,
    .app-header-actions [x-ref="trigger"] > button {
        min-width: var(--app-nav-touch-min);
        min-height: var(--app-nav-touch-min);
    }

    .app-header-actions [x-ref="trigger"]:has(.app-header-profile) {
        min-width: var(--app-nav-touch-min);
        min-height: var(--app-nav-touch-min);
    }

    .app-header-actions [x-ref="trigger"] > button.app-header-profile {
        width: 2.25rem !important;
        height: 2.25rem !important;
        min-width: 2.25rem !important;
        max-width: 2.25rem !important;
    }
}

/* ── Bottom nav: 5 slots, safe area, touch targets ── */
@media (max-width: 767px) {
    .app-mobile-bottom-nav__item {
        min-height: var(--app-nav-touch-min);
    }

    .app-mobile-bottom-nav__icon {
        min-width: 1.75rem;
        min-height: 1.75rem;
    }
}

/* ── Mobile drawer (phone + tablet) ── */
.app-mobile-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 140;
}

.app-mobile-sidebar-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
}

.app-mobile-sidebar__panel {
    position: relative;
    z-index: 141;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: min(20.5rem, 92vw);
    max-width: 92vw;
    border-right: 1px solid var(--app-border-strong);
    background: var(--theme-surface-base, #ffffff);
    color: var(--theme-header-text-color, #0f172a);
    box-shadow: 0 24px 48px -20px rgba(15, 23, 42, 0.35);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) and (max-width: 1024px) {
    .app-mobile-sidebar__panel {
        width: min(22.5rem, 42vw);
        max-width: 42vw;
    }
}

.app-mobile-sidebar__brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 4.25rem;
    padding: 0.875rem 1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--app-border-subtle);
    background: var(--theme-surface-base, #ffffff);
}

.app-mobile-sidebar__brand-inner {
    display: flex;
    height: 2.5rem;
    align-items: center;
    justify-content: flex-start;
}

.app-mobile-sidebar__logo {
    display: block;
    height: 2rem;
    width: auto;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
}

.app-mobile-sidebar__scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.875rem 0.875rem 1.25rem;
    background: var(--lb-h-canvas, var(--theme-surface-subtle, #f1f5f9));
}

.app-mobile-sidebar__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.app-mobile-sidebar__user-avatar {
    flex-shrink: 0;
}

.app-mobile-sidebar__user-copy {
    min-width: 0;
}

.app-mobile-sidebar__user-name {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--theme-header-text-color);
}

.app-mobile-sidebar__user-email {
    margin: 0.125rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--theme-muted-text-color);
}

.app-mobile-sidebar__switch-icon {
    margin-right: 0.5rem;
    font-size: 0.75rem;
}

.app-mobile-sidebar-enter,
.app-mobile-sidebar-leave {
    transition: transform 0.22s ease;
}

.app-mobile-sidebar-enter-start,
.app-mobile-sidebar-leave-end {
    transform: translateX(-100%);
}

.app-mobile-sidebar-enter-end,
.app-mobile-sidebar-leave-start {
    transform: translateX(0);
}

.app-mobile-sidebar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-mobile-sidebar .app-sidebar-nav__trigger {
    min-height: var(--app-nav-touch-min);
}

.app-mobile-sidebar .lb-native-menu-tile {
    min-height: var(--app-nav-touch-min);
}

/* Permanent sidebar — desktop only; phone/tablet use header + drawer */
.app-sidebar {
    display: none;
}

@media (min-width: 1025px) {
    .app-sidebar {
        display: block !important;
    }

    .app-mobile-bottom-nav,
    .app-mobile-sidebar-overlay,
    .app-shell-tablet-dock,
    .app-tablet-quick-dock {
        display: none !important;
    }

    .app-shell-header .app-header-native-brand {
        display: none;
    }

    .app-shell-header .app-header-desktop-leading {
        display: flex !important;
    }
}

/* ── Header nav visibility at 1025+ ── */
@media (max-width: 1024px) {
    .app-shell-header .app-header-nav,
    .app-shell-header .app-header-start-cluster {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .app-shell-header .app-header-compact-nav {
        display: none !important;
    }

    .app-shell-header .app-header-nav,
    .app-shell-header .app-header-start-cluster {
        display: flex !important;
    }
}

/* ── Active route persistence (visual) ── */
.app-tablet-quick-dock__item.is-active,
.app-mobile-bottom-nav__item.is-active,
.app-sidebar-nav__trigger.is-current,
.app-mobile-drawer-nav__link.is-active,
.app-mobile-sidebar a[aria-current="page"] {
    font-weight: 700;
}

.app-sidebar-nav__trigger.is-current .app-sidebar-nav__icon {
    color: var(--theme-accent);
}

/* Drawer open: lock body scroll */
html.app-shell-menu-open {
    overflow: hidden;
}

html.app-shell-menu-open body {
    overflow: hidden;
    touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
    .app-mobile-bottom-nav__item,
    .app-sidebar-nav__trigger,
    .app-shell-header-wrap {
        transition: none !important;
    }
}