/* Navbar for non-home pages (home gets the same rules from style.css). */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background-color: var(--bg-navbar);
    border-bottom: 1px solid var(--border-card);
    z-index: 1000;
    box-shadow: var(--shadow-premium);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.nav-container {
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.nav-logo:hover {
    transform: scale(1.02);
}

.logo-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: var(--border-radius-md);
    background-color: transparent;
    border: 1px solid transparent;
    transition: all var(--transition-speed) ease;
}

body.dark-theme .logo-frame {
    background-color: transparent;
    box-shadow: none;
}

.logo-start-img {
    height: 51px;
    width: auto;
    display: block;
}

.logo-name-img {
    height: 33px;
    width: auto;
    display: block;
    transition: filter var(--transition-speed) ease;
}

body.dark-theme .logo-name-img {
    filter: invert(1);
}

/* Pages other than home have no sidebar layout: clear the fixed navbar. */
body.has-navbar { padding-top: 72px; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Pages like teams don't load base.css's global border-box reset, which
   would make the container 48px wider than elsewhere and shift the logo. */
.navbar, .navbar *, .navbar *::before, .navbar *::after { box-sizing: border-box; }

/* Reserve the scrollbar's width on every page, so the centered navbar doesn't
   shift sideways between short pages (no scrollbar) and long ones. */
html { scrollbar-gutter: stable; }

/* Floating back button below the fixed navbar: visible across all screens. */
.back-fab {
    display: flex;
    position: fixed;
    top: 84px;
    left: 24px;
    z-index: 900;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--color-text-main);
    font-size: 15px;
    box-shadow: var(--shadow-premium);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                color var(--transition-speed) ease,
                transform 0.2s ease,
                box-shadow var(--transition-speed) ease;
}

.back-fab,
.back-fab:hover,
.back-fab:focus,
.back-fab:visited,
.back-fab:active {
    text-decoration: none;
    color: var(--color-text-main);
}

.back-fab:hover {
    transform: scale(1.05);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.back-fab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Line up with the 16px page gutter on phones instead of straddling card edges. */
@media (max-width: 768px) {
    .back-fab { left: 16px; }
}

/* Decorative glows/toasts wider than a phone must not widen the page: a wider
   page makes the fixed navbar as wide as the glow, pushing its right side
   (theme toggle) off screen. */
html, body { overflow-x: clip; }