/* ============================================================
   navbar.css — EverAfter navbar, user dropdown, toast messages
   ============================================================ */

/* ============================================================
   App shell — the fixed-height, inner-scrolling layout.

   This is scoped to body.with-wedding (set in base.html whenever a wedding
   context is active). Everything else — landing page, legal pages, guest
   pages — keeps normal document scrolling, which is what makes scroll
   restoration, anchors and the iOS URL bar behave.
   Uses 100dvh so the mobile URL bar does not clip the content.
   ============================================================ */
body.with-wedding {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    /* styles.css sets min-height:100vh on every body. min-height is a different
       property from height, so the shell never neutralised it — whenever 100vh
       and 100dvh disagree (mobile URL bar, older engines), body ends up taller
       than the viewport. */
    min-height: 0;
    /* Propagates to the viewport and takes scrolling away from the document
       entirely. Without it the document is a scroll container regardless
       (body's overflow-x:hidden forces its overflow-y to compute to auto), so
       any overflow at all painted a second vertical scrollbar next to
       .container's. .container below stays the one and only scroller. */
    overflow: hidden;
    margin: 0;
}

body.with-wedding nav {
    flex-shrink: 0;
}

body.with-wedding #app-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Container takes remaining space and stacks content + footer */
body.with-wedding .container {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

body.with-wedding .main-content {
    flex: 1;
}

/* A flex row with one child since the mobile drawer became a bottom sheet.
   Kept rather than dropped to block: it is what gives .container `min-width: 0`
   a flex context to act in, which is what stops wide tables inside it from
   pushing the document sideways. */
#app-layout {
    display: flex;
}

#app-layout > .container {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   Navigation
   ============================================================ */

.navbar {
    /* Side padding lives in a custom property because interaction.css raises it
       to the notch inset with max(); without a shared token its hardcoded 2rem
       floor silently outranked every responsive override below. */
    --navbar-pad-x: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem var(--navbar-pad-x);
    background: rgba(10, 18, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    position: sticky;
    top: 0;
    z-index: 100;
    animation: navbarSlideDown 0.3s ease-out;
}

.navbar-brand {
    /* inline-flex, not the default inline: it drops the whitespace text node
       between mark and wordmark (which otherwise opens a second line box once
       the wordmark is hidden on phones) and owns the gap explicitly. The
       padding reset is for landing.css, which blankets `nav a` with
       0.7rem 1.4rem and so indents the logo away from the bar's own edge. */
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    letter-spacing: -0.5px;
    transition: color 0.2s;
    flex-shrink: 0;
}

.navbar-brand:hover {
    color: var(--primary-hover);
}

.vertical-spacer {
    width: 1.5rem;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .vertical-spacer {
        width: 0.75rem;
    }
}

@media (max-width: 768px) {
    .vertical-spacer {
        display: none;
    }
}

/* Desktop-Navigation: drei Zonen — Marke | Links | Aktionen.
   `nowrap` ist hier die eigentliche Korrektur. Mit `wrap` und
   `justify-content: space-between` (oben gesetzt) passierten zwei Dinge
   gleichzeitig: die Restbreite verteilte sich als gleich große Lücken zwischen
   ALLE Punkte statt zwischen die drei Gruppen, und sobald Marke + Links +
   Aktionen breiter wurden als die Leiste, rutschte der Aktionscluster als
   einziges Element in eine zweite Zeile. Bei 1377 px Fensterbreite fehlten
   dafür 122 px — also auf so gut wie jedem Notebook. */
.navbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0;
    /* Nimmt den Platz zwischen Marke und Aktionen ein und zentriert die Links
       darin. min-width: 0 erlaubt das Schrumpfen unter die Inhaltsbreite —
       ohne das erzwingt der Inhalt wieder eine zu breite Leiste. */
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

/* Kein overflow/scroll auf .navbar-nav: die Dropdowns sind absolut
   positionierte Kinder und würden abgeschnitten, weil overflow-x: auto
   zwangsläufig auch overflow-y beschneidet. Eng wird es stattdessen über die
   Beschriftungen — siehe die Breakpoint-Regel weiter unten. */

.navbar-nav-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
    border: none;
    background: transparent;
    border-radius: 0;
    color: rgba(240, 237, 231, 0.68);
    font-family: 'Barlow', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease-out;
    white-space: nowrap;
    position: relative;
    height: 44px;
    flex-shrink: 0;
}

.navbar-nav-link:hover {
    background: transparent;
    color: var(--primary);
}

.navbar-nav-link.active {
    background: transparent;
    color: var(--primary);
    font-weight: 600;
}

.navbar-nav-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.navbar-nav-link-label {
    display: inline;
    white-space: nowrap;
}

/* Icons ohne Beschriftung. Die Klasse setzt static/js/navbar-fit.js, sobald
   die Punkte nicht mehr in eine Zeile passen — gemessen wird der Inhalt, nicht
   die Fensterbreite, weil der Platzbedarf an der Sprache haengt (Deutsch
   1372 px, Franzoesisch 1435 px bei identischem Fenster). Ein fester
   Breakpoint waere fuer die eine Sprache zu frueh, fuer die andere zu spaet. */
.navbar--icons-only .navbar-nav-link-label {
    display: none;
}

.navbar--icons-only .navbar-nav-link {
    padding: 0.45rem 0.6rem;
    gap: 0;
}

/* Ohne JavaScript bleibt die alte Fensterregel als Netz: unter 1024px sind
   sieben beschriftete Punkte in keiner Sprache unterzubringen. */
@media (max-width: 1024px) {
    .navbar-nav-link-label {
        display: none;
    }

    .navbar-nav-link {
        padding: 0.45rem 0.6rem;
        gap: 0;
    }

    .navbar-nav-dropdown-wrapper {
        display: flex;
    }
}

.navbar-nav-dropdown-wrapper {
    position: relative;
}

@media (max-width: 768px) {
    .navbar-nav-dropdown-wrapper {
        display: none;
    }
}

.navbar-nav-dropdown-trigger {
    position: relative;
}

.navbar-nav-dropdown-chevron {
    transition: transform 0.22s ease-out;
    color: rgba(240, 237, 231, 0.4);
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

.navbar-nav-dropdown-trigger[aria-expanded="true"] .navbar-nav-dropdown-chevron {
    transform: rotate(180deg);
}

.navbar-nav-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    background: rgba(10, 18, 10, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(129, 216, 208, 0.15);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 0.65rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 200;
    pointer-events: none;
}

.navbar-nav-dropdown-trigger[aria-expanded="true"] + .navbar-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* The rightmost dropdown is centred under its trigger and used to stick 27px
   past the container edge — enough to give the whole document a horizontal
   scrollbar while the menu was closed and invisible. Anchor it to its right
   edge instead. */
.navbar-nav-dropdown-wrapper:not(:has(~ .navbar-nav-dropdown-wrapper)) .navbar-nav-dropdown {
    left: auto;
    right: 0;
    transform: translateY(-10px);
    max-width: calc(100vw - 1rem);
}

.navbar-nav-dropdown-wrapper:not(:has(~ .navbar-nav-dropdown-wrapper)) .navbar-nav-dropdown-trigger[aria-expanded="true"] + .navbar-nav-dropdown {
    transform: translateY(0);
}

.navbar-nav-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.15rem;
    color: rgba(240, 237, 231, 0.75);
    text-decoration: none;
    font-family: 'Barlow', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    position: relative;
}

.navbar-nav-dropdown-link:first-child {
    border-radius: 8px 8px 0 0;
}

.navbar-nav-dropdown-link:last-child {
    border-radius: 0 0 8px 8px;
}

.navbar-nav-dropdown-link:hover {
    background: rgba(129, 216, 208, 0.12);
    color: var(--primary);
    padding-left: 1.35rem;
}

.navbar-nav-dropdown-link--locked {
    color: rgba(240, 237, 231, 0.35);
    cursor: not-allowed;
    opacity: 0.55;
}

.navbar-nav-dropdown-link--locked:hover {
    background: transparent;
    color: rgba(240, 237, 231, 0.35);
    padding-left: 1.15rem;
}

.navbar-right {
    display: flex;
    align-items: center;
    /* 2rem waren bei vier Bedienelementen 96 px allein an Zwischenraum —
       Platz, der der Navigation fehlte und sie in die zweite Zeile drueckte. */
    gap: 0.75rem;
    flex: 0 0 auto;
    margin-left: auto;
}

/* ── Notification Bell ───────────────────────────────────────── */
.navbar-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: rgba(240, 237, 231, 0.7);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.navbar-bell:hover {
    background: var(--at-08);
    color: var(--primary);
}
html.dark-mode .navbar-bell:hover {
    background: var(--at-08);
}

.navbar-bell {
    background: transparent;
    border: none;
    cursor: pointer;
}

.navbar-bell-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--primary);
    color: var(--bg-body);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ============================================================
   Notification Bell Dropdown
   ============================================================ */

.bell-dropdown-wrapper {
    position: relative;
}

.bell-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 340px;
    max-width: calc(100vw - 2rem);
    background: rgba(12, 22, 12, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    z-index: 200;
    overflow: hidden;
}

.bell-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bell-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bell-dropdown-title {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
}

.bell-dropdown-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--primary);
    color: var(--bg-body);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.bell-dropdown-body {
    max-height: 380px;
    overflow-y: auto;
}

.bell-group {
    display: block;
    padding: 0.85rem 1.1rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.bell-group:last-child {
    border-bottom: none;
}

.bell-group:hover {
    background: var(--at-08);
}

.bell-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.bell-group-wedding {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bell-group-badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--at-12, rgba(196, 168, 96, 0.18));
    color: var(--accent);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.bell-group-desc {
    display: block;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: rgba(240, 237, 231, 0.7);
}

.bell-group-guests {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: rgba(240, 237, 231, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Light mode */
html:not(.dark-mode) .bell-dropdown {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

html:not(.dark-mode) .bell-dropdown-header,
html:not(.dark-mode) .bell-group {
    border-color: rgba(0, 0, 0, 0.06);
}

html:not(.dark-mode) .bell-group-desc {
    color: rgba(26, 26, 26, 0.7);
}

html:not(.dark-mode) .bell-group-guests {
    color: rgba(26, 26, 26, 0.45);
}

/* Language Switcher - see static/css/lang-switcher.css */

/* ============================================================
   Staff Dropdown
   ============================================================ */

.staff-dropdown-wrapper {
    position: relative;
}

.staff-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--at-08);
    border: 1px solid var(--at-25);
    padding: 0.35rem 0.75rem;
    min-height: 44px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--primary);
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.staff-trigger:hover {
    background: var(--at-15);
    border-color: var(--at-50);
}

.staff-trigger[aria-expanded="true"] {
    background: var(--at-20);
    border-color: var(--at-60);
}

.staff-chevron {
    transition: transform 0.25s ease;
    color: var(--at-70);
}

.staff-trigger[aria-expanded="true"] .staff-chevron {
    transform: rotate(180deg);
}

.staff-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: rgba(12, 22, 12, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--at-20);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--at-05);
    padding: 0.4rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    z-index: 200;
}

.staff-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.staff-dropdown-header {
    padding: 0.5rem 1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    opacity: 0.7;
}

.staff-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    color: rgba(240, 237, 231, 0.75);
    text-decoration: none;
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.staff-dropdown-link:hover {
    background: var(--at-08);
    color: var(--primary);
}

.staff-dropdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--at-10);
    color: var(--primary);
    flex-shrink: 0;
}

.staff-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0.35rem 0;
}

/* ============================================================
   User Dropdown
   ============================================================ */

.user-dropdown-wrapper {
    position: relative;
}

.user-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: none;
    padding: 0.6rem 0.8rem;
    min-height: 44px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--dark-text);
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.user-trigger:hover {
    background: var(--at-08);
    color: var(--primary);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--bg-body);
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.user-name {
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark-text);
}

.user-chevron {
    transition: transform 0.3s ease;
    color: rgba(240, 237, 231, 0.5);
}

.user-trigger[aria-expanded="true"] .user-chevron {
    transform: rotate(180deg);
}

/* ============================================================
   Dropdown Menu
   ============================================================ */

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: rgba(12, 22, 12, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    z-index: 200;
}

.user-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: rgba(240, 237, 231, 0.75);
    text-decoration: none;
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-link:first-child {
    border-radius: 8px 8px 0 0;
}

.dropdown-link:last-child {
    border-radius: 0 0 8px 8px;
}

.dropdown-link:hover {
    background: var(--at-08);
    color: var(--primary);
}

.dropdown-link--danger {
    color: rgba(240, 237, 231, 0.75);
}

.dropdown-link--danger:hover {
    background: rgba(212, 99, 92, 0.1);
    color: #f08080;
}

.dropdown-icon {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.dropdown-link:hover .dropdown-icon {
    opacity: 1;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0.25rem 0;
}

/* ============================================================
   Animations
   ============================================================ */

@keyframes navbarSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   Responsive — Mobile
   ============================================================ */

@media (max-width: 768px) {
    /* Single row: brand on the left, utility cluster + hamburger on the right.
       Without nowrap the three groups wrapped onto separate lines and the
       action cluster overflowed the viewport. */
    .navbar {
        /* Override the generic `nav { flex-direction: column }` mobile rule in
           styles.css, which otherwise stacks brand/actions/hamburger vertically. */
        --navbar-pad-x: 0.75rem;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 0.75rem var(--navbar-pad-x);
        gap: 0.35rem;
    }

    .navbar-brand {
        font-size: 1.1rem;
        margin-right: auto;
        min-width: 0;
    }

    .navbar-nav,
    .navbar-nav-link,
    .navbar-nav-dropdown-wrapper {
        display: none;
    }

    .navbar-right {
        gap: 0.25rem;
        order: 2;
    }

    .hamburger-btn {
        order: 3;
        margin-left: 0.15rem;
    }

    /* Staff tools are dev-only and too wide for phones — hide on mobile. */
    .staff-dropdown-wrapper {
        display: none;
    }

    .user-name,
    .user-chevron {
        display: none;
    }

    .user-trigger {
        padding: 0.4rem;
    }

    .user-dropdown {
        right: -0.5rem;
    }
}

/* ========== Theme Toggle Button ========== */

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--at-08);
    border: 1px solid var(--at-20);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    gap: 0.25rem;
    transition: background 0.2s ease, border-color 0.2s ease;
    color: var(--primary);
    font-family: 'Barlow', sans-serif;
}

.theme-toggle-btn:hover {
    background: var(--at-15);
    border-color: var(--at-50);
}

.theme-toggle-btn:active {
    background: var(--at-20);
    transform: scale(0.98);
}

.theme-icon-sun,
.theme-icon-moon {
    display: none;
}

/* Light mode (default): show moon icon to switch to dark */
html:not(.dark-mode) .theme-icon-moon {
    display: block;
}

/* Dark mode: show sun icon to switch to light */
html.dark-mode .theme-icon-sun {
    display: block;
}

.theme-icon-text,
.theme-icon-text-moon {
    display: none;
}

.theme-icon-text {
    font-size: 12px;
}

.theme-icon-text-moon {
    font-size: 12px;
}

/* Show emoji icons */
html:not(.dark-mode) .theme-icon-text-moon {
    display: inline;
}

html.dark-mode .theme-icon-text {
    display: inline;
}

/* Light mode (default) toggle button styles */
html:not(.dark-mode) .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: #1a1a1a;
}

html:not(.dark-mode) .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.3);
}

/* Dark mode toggle button styles */
html.dark-mode .theme-toggle-btn {
    background: var(--at-08);
    border-color: var(--at-20);
    color: var(--primary);
}

html.dark-mode .theme-toggle-btn:hover {
    background: var(--at-15);
    border-color: var(--at-50);
}

@media (prefers-reduced-motion: reduce) {
    .navbar,
    .staff-dropdown,
    .user-dropdown,
    .navbar-brand,
    .staff-trigger,
    .user-trigger,
    .staff-chevron,
    .user-chevron,
    .dropdown-link,
    .staff-dropdown-link,
    .theme-toggle-btn {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ============================================================
   Navbar Nav — Light Mode Overrides
   ============================================================ */

html:not(.dark-mode) .navbar-nav-link {
    color: rgba(26, 26, 26, 0.65);
}

html:not(.dark-mode) .navbar-nav-link:hover {
    background: transparent;
    color: var(--primary);
}

html:not(.dark-mode) .navbar-nav-link.active {
    background: transparent;
    color: var(--primary);
    font-weight: 600;
}

html:not(.dark-mode) .navbar-nav-dropdown {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(129, 216, 208, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(129, 216, 208, 0.08);
}

html:not(.dark-mode) .navbar-nav-dropdown-link {
    color: rgba(26, 26, 26, 0.7);
}

html:not(.dark-mode) .navbar-nav-dropdown-link:hover {
    background: rgba(129, 216, 208, 0.12);
    color: var(--primary);
}

html:not(.dark-mode) .navbar-nav-dropdown-link--locked {
    color: rgba(26, 26, 26, 0.3);
}

html:not(.dark-mode) .navbar-nav-dropdown-chevron {
    color: rgba(26, 26, 26, 0.35);
}

/* ============================================================
   Light Mode Overrides
   ============================================================ */

html:not(.dark-mode) .navbar {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

html:not(.dark-mode) .navbar-brand:hover {
    color: var(--primary-hover);
}

html:not(.dark-mode) .navbar-bell {
    color: rgba(26, 26, 26, 0.5);
}

html:not(.dark-mode) .navbar-bell-badge {
    color: #ffffff;
}

html:not(.dark-mode) .user-chevron {
    color: rgba(26, 26, 26, 0.35);
}

html:not(.dark-mode) .user-trigger:hover {
    background: var(--at-10);
    color: var(--dark-text);
}

html:not(.dark-mode) .user-avatar {
    color: #ffffff;
}

/* User dropdown */
html:not(.dark-mode) .user-dropdown {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

html:not(.dark-mode) .dropdown-link {
    color: rgba(26, 26, 26, 0.7);
}

html:not(.dark-mode) .dropdown-link--danger {
    color: rgba(26, 26, 26, 0.7);
}

html:not(.dark-mode) .dropdown-link:hover {
    background: var(--at-08);
    color: var(--dark-text);
}

html:not(.dark-mode) .dropdown-divider {
    background: rgba(0, 0, 0, 0.06);
}

/* Staff dropdown */
html:not(.dark-mode) .staff-trigger {
    background: var(--at-08);
    border-color: var(--at-30);
}

html:not(.dark-mode) .staff-trigger:hover {
    background: var(--at-15);
    border-color: var(--at-50);
}

html:not(.dark-mode) .staff-trigger[aria-expanded="true"] {
    background: var(--at-20);
    border-color: var(--at-60);
}

html:not(.dark-mode) .staff-chevron {
    color: var(--at-70);
}

html:not(.dark-mode) .staff-dropdown {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--at-20);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

html:not(.dark-mode) .staff-dropdown-link {
    color: rgba(26, 26, 26, 0.7);
}

html:not(.dark-mode) .staff-dropdown-link:hover {
    background: var(--at-08);
}

html:not(.dark-mode) .staff-dropdown-icon {
    background: var(--at-10);
}

html:not(.dark-mode) .staff-dropdown-divider {
    background: rgba(0, 0, 0, 0.06);
}

/* ── Landing Hamburger Menu (unauthenticated, mobile only) ──── */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: var(--dark-text);
    transition: background 0.2s ease;
}

.hamburger-btn:hover {
    background: var(--at-08);
}

.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease-out, opacity 0.15s ease-out;
    will-change: transform;
}

.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.3);
}
.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    .hamburger-btn { display: flex; }
}

/* The CTA carries two labels so the button can shrink without the wording
   going with it. Base state: the long one. */
.navbar-cta-short {
    display: none;
}

/* 560px, not the 480px the rest of this section uses: "Start Planning" is
   15 characters in English and 26 in French ("Commencer la planification"),
   and the French bar still overflows a 481px viewport. The breakpoint has to
   clear the longest catalogue, not the shortest. */
@media (max-width: 560px) {
    .navbar-cta-full {
        display: none;
    }

    .navbar-cta-short {
        display: inline;
    }
}

/* ── Public navbar, mobile (≤768px) ──────────────────────────────
   Signed out there are four controls — language, theme, Login, CTA —
   and three of them are already icon-sized. They used to sit inside a
   hamburger panel; the panel cost a tap on every page and, on the pages
   whose template never carried the toggle script (/support, /howto, the
   legal pages), it hid Login behind a button that did nothing at all.

   So the row simply stays open, and the widths are trimmed until it
   fits: ~294px of content in German, ~349px in French (the longest
   catalogue), against a 360px design floor. Nothing here touches the
   signed-in bar, which keeps its hamburger and its nav sheet.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .navbar-right--public {
        flex-wrap: nowrap;
        gap: 0.3rem;
    }

    /* The two text controls read as a pair: a quiet link, then the CTA.
       Both keep a 44px tap target without inflating the row's height. */
    .navbar-right--public > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        white-space: nowrap;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .navbar-right--public > a:not(.btn-primary) {
        padding: 0 0.25rem;
        border-radius: 6px;
    }

    .navbar-right--public > a.btn-primary {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .navbar-right--public .lang-trigger {
        padding: 0.4rem 0.3rem;
    }

    /* Utility controls shrink to their icons: .lang-text is already hidden
       on mobile by lang-switcher.css, so the chevron is the last thing
       left that carries no information at this width. */
    .navbar-right--public .lang-chevron {
        display: none;
    }

    .navbar-right--public .theme-toggle-btn {
        width: 40px;
        height: 40px;
    }
}

/* Below 480px the wordmark is the widest thing on the bar that the logo mark
   already says, and the row needs ~450px to carry both. The mark keeps a full
   tap target on its own; its radial mask fades the artwork out well inside the
   box, so 40px here still reads the same size as 50px did. */
@media (max-width: 480px) {
    .navbar {
        --navbar-pad-x: 0.65rem;
        padding: 0.65rem var(--navbar-pad-x);
    }

    .navbar-brand-name {
        display: none;
    }

    .navbar .brand-icon {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hamburger-btn span {
        transition: none;
    }
}

/* ── Public nav CTA button ───────────────────────────────── */
.navbar .btn-primary {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: var(--primary);
    color: var(--bg-body);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.navbar .btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}