/* joint-topbar.css */
@import url('/public/fonts.css?v=20260905a');
/* Palette lives in tokens.css. This file used to redeclare a :root block here,
   which loaded after tokens.css and silently overrode it — including pinning
   colours that then could not follow a theme. */

html {
    background: var(--top-bar-bg);
}

body {
    margin: 0;
    font-family: var(--font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    color: var(--text, #1f2937);
    background: var(--bg, #f8f9fa);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.app-shell-page .app-layout,
body.app-shell-page .db-layout,
.top-bar + .app-layout,
.top-bar + .db-layout,
.top-bar + .container {
    margin-top: var(--top-bar-h);
}

.top-bar {
    background: var(--top-bar-surface);
    backdrop-filter: blur(14px);
    color: var(--primary-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* The bar is EXACTLY the height reserved for it below, by construction.
       It used to be auto-height — content plus 0.65rem of vertical padding —
       which made it 63.8px against a 60px reservation on desktop and ~59px
       against 50px on mobile, so every page whose first element had no top
       margin sat under the bar. Height here rather than padding keeps the two
       from drifting apart again when the bar's contents change.
       Horizontal padding only; align-items:center does the vertical work. */
    height: var(--top-bar-h);
    padding: 0 1rem;
    padding-top: env(safe-area-inset-top, 0px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Must clear the page-control band (Leaflet controls, map toolbars, tab bars all sit at
       1000–1200). This bar has both a z-index and a backdrop-filter, either of which makes it
       a stacking context — so .dropdown-content's z-index below is scoped INSIDE the bar and
       cannot lift the menu over page content. The bar's own value is the only lever. */
    z-index: var(--z-topbar);
    transition: height 0.3s ease;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    line-height: 1.2;
}

.top-bar,
.top-bar * {
    box-sizing: border-box;
}

.top-bar .home-button {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s;
    color: var(--text-accent);
}

.top-bar .home-button:hover {
    opacity: 0.8;
}

.top-bar .logo-container {
    background-color: var(--logo-bg);
    border-radius: 20%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.75rem;
    transition: width 0.3s ease, height 0.3s ease;
}

.top-bar .home-button img {
    width: 30px;
    height: 30px;
    transition: width 0.3s ease, height 0.3s ease;
}

.top-bar .product-name {
    font-size: 0.9rem;
    font-weight: bold;
}

.top-bar .product-name1 {
    font-size: 0.9rem;
    color:white;
}

/* Styles for dynamic top bar */
.top-bar .user-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.top-bar .username-link {
    color: var(--primary-text);
    text-decoration: none;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
    line-height: 1;
    min-height: 40px;
    margin: 0;
}

.top-bar .username-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
}

.top-bar .username-link:focus,
.top-bar .username-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(53,122,255,0.22);
    border-color: rgba(91,155,255,0.45);
}

.top-bar .username-link i {
    font-size: 10px;
    opacity: 0.7;
}

.top-bar .user-avatar-chip {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #357aff, #5b9bff);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.top-bar .user-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-bar .logout-button {
    padding: 0.5rem 1rem;
    /* Fixed slate, not var(--primary-accent). The bar is dark in BOTH themes, so its
       controls must not use a token that lifts for dark grounds — when --primary-accent
       was lifted so the page kicker could clear AA, this button's white label fell to
       2.61:1. A token used as text colour and as a fill has two conflicting jobs. */
    background-color: #526279;
    color: var(--primary-text);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: bold;
    transition: background-color 0.2s, padding 0.3s ease;
    display: flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    min-height: 40px;
}

.top-bar .logout-button:hover {
    background-color: #6b7a8d;
}

.top-bar .logout-button svg {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

.top-bar .dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown — matches sidebar item style */
.top-bar .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--card-bg);
    min-width: 248px;
    box-shadow: 0 18px 40px rgba(15,23,42,0.16), 0 0 0 1px rgba(15,23,42,0.06);
    z-index: 10000;
    border-radius: 16px;
    margin-top: 0;
    border: 1px solid #e2e8f0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 10px;
}

.top-bar .dropdown-content.show {
    display: block;
    animation: fadeInDown 0.18s ease-out;
}

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

.top-bar .dropdown-content a {
    color: #1f2937;
    padding: 11px 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.12s, color 0.12s;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 12px;
    min-height: 40px;
}

.top-bar .dropdown-content a i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
    color: #718096;
}

.top-bar .dropdown-content a:hover {
    background: var(--tint-info);
    color: var(--on-tint-info);
}

.top-bar .dropdown-content a:hover i {
    color: #357aff;
}

.show { display: block; }

.top-bar .dropdown-content .divider {
    height: 1px;
    background: var(--tint-info);
    margin: 8px 2px;
}

.top-bar .dropdown-label,
.top-bar .dropdown-content .availability-indicator {
    display: block;
    font-size: 10px;
    color: #94a3b8;
    background: transparent;
    padding: 2px 10px 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.top-bar .dropdown-content a.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.top-bar .dropdown-content a.disabled:hover {
    background: transparent;
    color: #1f2937;
}

.top-bar .dropdown-content a.disabled:hover i { color: #718096; }

/* The .top-nav-links quick-link pills were removed: they rendered at the same
   >=900px breakpoint as the sidebar, which already lists those destinations
   and every other one. */

.top-bar .dropdown-content,
.top-bar .dropdown-content a,
.top-bar .username-link,
.top-bar .logout-button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.top-bar .dropdown-content {
    background: var(--card-bg) !important;
}

.top-bar .dropdown-content a,
.top-bar .dropdown-content a:visited,
.top-bar .dropdown-content a:active {
    color: #1f2937 !important;
    text-decoration: none !important;
}

.top-bar .dropdown-label {
    color: #64748b !important;
}

.top-bar .username-link {
    color: #ffffff !important;
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

.top-bar .logout-button,
.top-bar .logout-button:visited,
.top-bar .logout-button:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

.top-bar .username-link,
.top-bar .logout-button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.top-bar .username-link .user-label {
    display: inline-block;
    transform: translateY(-0.5px);
}

/* Refresh button — only visible in PWA standalone mode */
.pwa-refresh-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s, color 0.15s, transform 0.2s;
    flex-shrink: 0;
}
.pwa-refresh-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.pwa-refresh-btn:active {
    transform: rotate(180deg);
}
@media (display-mode: standalone) {
    .pwa-refresh-btn { display: flex; }
}

/* Theme toggle — same chrome treatment as the refresh button, but always shown.
   The top bar sits on a dark ground in both themes, so these stay white-on-dark. */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
/* Show the icon for the theme you'd switch TO, not the one you're in. */
.theme-toggle-btn .theme-icon-dark  { display: none; }
:root[data-theme="dark"] .theme-toggle-btn .theme-icon-dark  { display: inline; }
:root[data-theme="dark"] .theme-toggle-btn .theme-icon-light { display: none; }

/* Styles for static top bar */
.language-toggle {
    display: flex;
    align-items: center;
}

.language-flag {
    cursor: pointer;
    width: 25px;
    height: auto;
    margin: 0 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.langslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg);
    transition: .4s;
    border-radius: 34px;
}

.langslider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 3px;
    background-color: var(--card-bg);
    transition: .4s;
    border-radius: 50%;
}

input:checked + .langslider {
    background-color: #2196F3;
}

input:checked + .langslider:before {
    transform: translateX(18px);
}

.hamburger {
    display: none;
    font-size: 20px;
    cursor: pointer;
}

/* Responsive styles */
@media (max-width: 768px) {
    :root {
        --top-bar-h: calc(50px + env(safe-area-inset-top, 0px));
    }

    body {
        margin: 0;
    }

    .top-bar {
        /* Horizontal only, as above: the bar's height is fixed to --top-bar-h,
           so vertical padding here just squeezes the 42px controls into a 33px
           content box and pushes them outside the bar. */
        padding: 0 0.5rem;
        padding-top: env(safe-area-inset-top, 0px);
    }

    .top-bar .logo-container {
        width: 35px;
        height: 35px;
    }

    .top-bar .home-button img {
        width: 25px;
        height: 25px;
    }

    .top-bar .product-name {
        font-size: 0.875rem;
    }

    .top-bar .logout-button svg {
        width: 16px;
        height: 16px;
        margin-right: 0;
    }

    .top-bar .username-link svg {
        width: 16px;
        height: 16px;
    }

    .top-bar .username-link {
        padding-right: 8px;
    }

    .top-bar .logout-button {
        padding: 0 0 0 8px;
        width: 32px;
        height: 32px;
        min-height: unset;
        background: transparent;
        border-radius: 50%;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0;
    }
    .top-bar .logout-button svg {
        width: 17px;
        height: 17px;
        margin: 0;
        opacity: 0.7;
        flex-shrink: 0;
    }

    .top-bar .dropdown-content {
        width: 100%;
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        border-radius: 0 0 12px 12px;
        margin-top: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        padding: 4px 8px 8px;
    }

    .top-bar .dropdown-content a {
        padding: 11px 10px;
        font-size: 14px;
        border-radius: 8px;
    }

    .top-bar .dropdown-content .availability-indicator {
        padding: 8px 10px 2px;
        font-size: 0.65rem;
    }

    .top-bar .user-label {
        max-width: 82px;
    }

    .hamburger {
        display: block;
        margin-left: auto;
    }
}