/* Public site top navbar (_Layout.cshtml #navbar.lp-nav) - About, Contact, Login, Register, landing, etc.
   Mirrors the logged-in navbar (Content/AuthTopNav.css, .auth-topnav) on its default dark theme, so
   moving between the public site and the app doesn't change the bar: same 52px height, full width,
   near-black glassy bar with a top sheen and crimson accent edge, same logo size, same link pills,
   and "Register" / "Open OnTime" styled like the logged-in tenant chip. Keep the two in step. */

/* Keep the navbar and centred content from jumping sideways between pages that scroll (landing,
   Login) and pages that don't (About, Contact): always show the page scrollbar (no thumb when
   there's nothing to scroll). :root + !important beats Site.css's html{overflow:hidden} and the
   html,body{overflow:auto !important} overrides on scrolling pages.
   The scrollbar is transparent (Site.css ::-webkit-scrollbar), so its top is painted like the
   navbar (sheen fading into the bar colour) and the track starts below it - the bar reads as
   running edge to edge. #222 = the bar's rgba(24,24,24,0.95) over the RGB(232,232,232) page,
   #333 its sheen; #181818 / #282828 the solid scrolled version. 53px = 52px bar + accent edge.
   Firefox has no ::-webkit-scrollbar - scrollbar-gutter keeps its layout stable at least. */
:root { overflow-y: scroll !important; scrollbar-gutter: stable; }
@media (min-width: 768px) {
    html::-webkit-scrollbar { background: linear-gradient(to bottom, #333 0, #222 34px, #222 53px, transparent 53px); }
    html.lp-nav-scrolled::-webkit-scrollbar { background: linear-gradient(to bottom, #282828 0, #181818 34px, #181818 53px, transparent 53px); }
    html::-webkit-scrollbar-track:vertical { margin-top: 53px; }
}

/* _LoginPartial's no-picture avatar placeholder is styled for the logged-in navbar (AuthTopNav.css) only */
#navbar.lp-nav .TopNavAvatarPlaceholder { display: none; }

/* Bar: AuthTopNav's .is-frosted.is-dark-bar treatment with the default theme's colours baked in */
#navbar.lp-nav {
    min-height: 52px;
    margin-top: 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background-color: rgba(24,24,24,0.95);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 65%);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px -10px rgba(0,0,0,0.45);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Accent edge - same gradient as the logged-in bar */
#navbar.lp-nav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #9C1C3C 18%, color-mix(in srgb, #9C1C3C 80%, #fff) 50%, #9C1C3C 82%, transparent 100%);
    pointer-events: none;
}
/* Content scrolling underneath: go solid with a little more depth (lp-nav-scrolled, toggled in _Layout) */
#navbar.lp-nav.lp-nav-scrolled {
    background-color: rgb(24,24,24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 22px -10px rgba(0,0,0,0.55);
}
#navbar.lp-nav .PageTitle { display: none; }

/* Logo - same link + size as _AuthTopNav's .TopNavLogo */
#navbar.lp-nav .TopNavLogo {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-left: 10px;
    border-radius: 8px;
    transition: opacity 0.2s ease;
}
#navbar.lp-nav .TopNavLogo img {
    display: block;
    width: 148px;
    height: 40px;
    padding: 2px 4px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* colour logo -> white on the dark bar */
}
#navbar.lp-nav .TopNavLogo:hover { opacity: 0.85; }
#navbar.lp-nav .TopNavLogo:focus { outline: none; }
#navbar.lp-nav .TopNavLogo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Links: muted white pills that brighten on hover / current page, underline grows in */
#navbar.lp-nav .navbar-nav > li > a {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.84);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#navbar.lp-nav .navbar-nav > li > a::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, #9C1C3C 70%, #fff);
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
#navbar.lp-nav .navbar-nav > li > a:hover,
#navbar.lp-nav .navbar-nav > li > a:focus,
#navbar.lp-nav .navbar-nav > .active > a,
#navbar.lp-nav .navbar-nav > .active > a:hover,
#navbar.lp-nav .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: rgba(255,255,255,0.08);
    outline: none;
}
#navbar.lp-nav .navbar-nav > li > a:focus-visible { box-shadow: 0 0 0 2px #fff; }
#navbar.lp-nav .navbar-nav > li > a:hover::after,
#navbar.lp-nav .navbar-nav > li > a:focus-visible::after,
#navbar.lp-nav .navbar-nav > .active > a::after { transform: scaleX(1); }

/* Right side: "Log in" as a link, "Register" at the far right as the crimson chip - the same pill
   as the logged-in bar's tenant chip. Logged-in users get it as "Open OnTime" (_Layout's
   lp-nav-account list). */
#navbar.lp-nav .TopNavRightBar > li:first-child { -webkit-order: 2; order: 2; }
#navbar.lp-nav .navbar-nav > li > #registerLink,
#navbar.lp-nav .navbar-nav > li > .lp-nav-cta {
    gap: 8px;
    height: 32px;
    margin-left: 6px;
    padding: 0 15px;
    border: 1px solid color-mix(in srgb, #9C1C3C 82%, #000);
    border-radius: 999px;
    background-color: #9C1C3C;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.07) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 1px 2px rgba(0,0,0,0.12),
        0 4px 12px -4px color-mix(in srgb, #9C1C3C 65%, transparent);
    color: #fff;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.2s ease, -webkit-filter 0.2s ease, filter 0.2s ease;
}
#navbar.lp-nav #registerLink::after,
#navbar.lp-nav .lp-nav-cta::after { display: none; }
#navbar.lp-nav .navbar-nav > li > #registerLink:hover,
#navbar.lp-nav .navbar-nav > li > #registerLink:focus-visible,
#navbar.lp-nav .navbar-nav > li > .lp-nav-cta:hover,
#navbar.lp-nav .navbar-nav > li > .lp-nav-cta:focus-visible {
    color: #fff;
    background-color: #9C1C3C;
    -webkit-filter: brightness(1.06);
    filter: brightness(1.06);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 2px 4px rgba(0,0,0,0.10),
        0 8px 18px -6px color-mix(in srgb, #9C1C3C 75%, transparent);
}
#navbar.lp-nav .navbar-nav > li > #registerLink:focus:not(:focus-visible),
#navbar.lp-nav .navbar-nav > li > .lp-nav-cta:focus:not(:focus-visible) { background-color: #9C1C3C; }
#navbar.lp-nav .navbar-nav > li > #registerLink:active,
#navbar.lp-nav .navbar-nav > li > .lp-nav-cta:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-filter: brightness(0.97);
    filter: brightness(0.97);
}
#navbar.lp-nav #registerLink:focus-visible,
#navbar.lp-nav .lp-nav-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (min-width: 768px) {
    #navbar.lp-nav > .container-fluid {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        height: 52px;
    }
    /* Bootstrap clearfix pseudo-elements would otherwise become flex items */
    #navbar.lp-nav > .container-fluid::before, #navbar.lp-nav > .container-fluid::after,
    #navbar.lp-nav .navbar-collapse::before, #navbar.lp-nav .navbar-collapse::after,
    #navbar.lp-nav .navbar-header::before, #navbar.lp-nav .navbar-header::after { display: none; }
    #navbar.lp-nav .navbar-header {
        float: none;
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        height: 52px;
        margin-right: 12px;
    }
    #navbar.lp-nav .navbar-collapse {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex: 1;
        flex: 1;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        min-width: 0;
        height: 52px !important;
        padding: 0 14px 0 0;
    }
    #navbar.lp-nav .navbar-nav { float: none; margin: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 2px; }
    #navbar.lp-nav .navbar-nav > li { float: none; }
    #navbar.lp-nav .navbar-right { margin-right: 0; }
}

@media (max-width: 767px) {
    #navbar.lp-nav .navbar-header {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        height: 52px;
    }
    #navbar.lp-nav .navbar-header::before, #navbar.lp-nav .navbar-header::after { display: none; }
    #navbar.lp-nav .TopNavLogo { -webkit-order: 1; order: 1; }
    #navbar.lp-nav .navbar-toggle {
        -webkit-order: 2; order: 2;
        float: none;
        margin: 0;
        width: 44px; height: 44px;
        padding: 0;
        display: -webkit-flex; display: flex;
        -webkit-flex-direction: column; flex-direction: column;
        -webkit-align-items: center; align-items: center;
        -webkit-justify-content: center; justify-content: center;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 10px;
        background: transparent;
        transition: background-color 0.2s ease;
    }
    #navbar.lp-nav .navbar-toggle:hover,
    #navbar.lp-nav .navbar-toggle:focus { background: rgba(255,255,255,0.08); }
    #navbar.lp-nav .navbar-toggle .icon-bar { width: 20px; background: #fff; margin: 0; }
    #navbar.lp-nav .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
    #navbar.lp-nav .navbar-collapse { border-top: 1px solid rgba(255,255,255,0.08); box-shadow: none; padding-bottom: 12px; }
    #navbar.lp-nav .navbar-nav { margin: 8px 0 0; }
    #navbar.lp-nav .navbar-nav > li > a { height: 44px; }
    #navbar.lp-nav .navbar-nav > li > a::after { left: 12px; right: auto; width: 24px; bottom: 6px; }
    #navbar.lp-nav .TopNavRightBar,
    #navbar.lp-nav .lp-nav-account {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: stretch;
        align-items: stretch;
        gap: 8px;
        margin: 8px 0 0;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    #navbar.lp-nav .navbar-nav > li > #registerLink,
    #navbar.lp-nav .navbar-nav > li > .lp-nav-cta { -webkit-justify-content: center; justify-content: center; height: 44px; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #navbar.lp-nav, #navbar.lp-nav *, #navbar.lp-nav *::after { transition: none !important; }
}