/* Right side of the app navigation bar (navbar.html): Playground, Help, Admin (staff), balance pill, account.
   The account menu holds everything (Playground, Help, Admin too), so on phones only the balance and
   the account menu stay in the bar. */

.nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-family: inherit;
    color: #1f2328;
}

/* Playground: a plain link, not a button */
.nav-link-quiet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: #3d4148;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.nav-link-quiet:hover { background: #f4f3f1; color: #1f2328; }

/* Menus */
.nav-menu-wrap { position: relative; }
.nav-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 1100;
    width: 290px;
    box-sizing: border-box;
    padding: 6px;
    background: #fff;
    border: 1px solid #e7e5e1;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.14);
    text-align: left;
}
.nav-menu.show { display: block; }
.nav-menu-help { width: 300px; }
.nav-menu-admin { width: 230px; }

.nav-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #1f2328;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.nav-menu-item:hover, .nav-menu-item:focus-visible { background: #f4f3f1; color: #1f2328; }
.nav-menu-item > svg { flex: none; margin-top: 2px; color: #6b6f76; }
.nav-menu-item > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-menu-item b { font-weight: 600; }
.nav-menu-item small, .nav-user-head small { font-size: 0.75rem; color: #5f636a; }
.nav-menu-sep { height: 1px; margin: 4px 6px; background: #ebe7e2; }
.nav-menu-label {
    display: block;
    padding: 8px 10px 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #5f636a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nav-shortcuts { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 10px; font-size: 0.8rem; }
.nav-shortcuts .nav-menu-label { padding: 6px 0 2px; }
.nav-shortcuts > span:not(.nav-menu-label) { display: flex; justify-content: space-between; gap: 12px; }
.nav-shortcuts kbd {
    padding: 0 6px;
    border: 1px solid #dcdad6;
    border-radius: 4px;
    background: #f7f6f4;
    color: #3d4148;
    font: 600 0.7rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    box-shadow: none;
}

/* Help: a quiet round "?" */
.nav-help-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #dcdad6;
    border-radius: 50%;
    background: #fff;
    color: #3d4148;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}
.nav-help-btn:hover, .nav-help-btn[aria-expanded="true"] { background: #f1ede8; }

/* Admin: dashed outline says "staff only" */
.nav-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px dashed #9a9ea5;
    border-radius: 6px;
    background: #fff;
    color: #3d4148;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.nav-admin-btn:hover, .nav-admin-btn[aria-expanded="true"] { background: #f1ede8; }

/* Balance pill: normal, low (amber + Top up), empty (red + Top up) */
.nav-balance {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    box-sizing: border-box;
    margin-left: 6px;
    padding: 0 4px 0 12px;
    border: 1px solid #e7e5e1;
    border-radius: 999px;
    background: #fff;
    color: #1f2328;
}
.nav-balance-main {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-right: 8px;
    color: inherit;
    font-size: 0.82rem;
    text-decoration: none;
    white-space: nowrap;
}
.nav-balance-main:hover { color: inherit; }
.nav-balance-main strong { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.nav-balance-topup {
    display: none;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #c2522d;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.nav-balance-topup:hover { background: #a8441f; color: #fff; }
.nav-balance.is-low { background: #fff7ed; border-color: #f5c89a; color: #7c2d12; }
.nav-balance.is-empty { background: #fef3f2; border-color: #f4b8b2; color: #9a1c13; }
.nav-balance.is-low .nav-balance-main, .nav-balance.is-empty .nav-balance-main { padding-right: 0; }
.nav-balance.is-low .nav-balance-topup, .nav-balance.is-empty .nav-balance-topup { display: inline-flex; }

/* What the balance covers, on hover or keyboard focus */
.nav-balance .balance-estimates {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 1100;
    width: 280px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #1f2328;
    color: #fff;
    font-size: 0.8rem;
    text-align: left;
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.2);
}
.nav-balance .balance-estimates small { padding-top: 4px; color: #c9ccd1; font-size: 0.75rem; }
.nav-balance:hover .balance-estimates,
.nav-balance:focus-within .balance-estimates { display: flex; }

/* Account */
.nav-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 8px 0 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #3d4148;
    cursor: pointer;
}
.nav-avatar-btn:hover, .nav-avatar-btn[aria-expanded="true"] { background: #f1ede8; }
.nav-avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #E67E5C;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}
.nav-avatar-lg { width: 36px; height: 36px; flex: none; font-size: 0.95rem; }
.nav-user-head { display: flex; align-items: center; gap: 10px; padding: 10px; }
.nav-user-head > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-user-head b { font-size: 0.875rem; }
.nav-user-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-legal { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; font-size: 0.75rem; }
.nav-legal a { color: #5f636a; text-decoration: underline; text-underline-offset: 2px; }
.nav-legal a:hover { color: #1f2328; }
.nav-logout, .nav-logout > svg { color: #b42318; }
.nav-logout:hover { color: #b42318; }

.nav-balance-note {
    margin: 2px 10px 8px;
    padding: 10px 12px;
    border: 1px solid #ebe7e2;
    border-radius: 10px;
    background: #f7f6f4;
    color: #3d4148;
    font-size: 0.8rem;
    line-height: 1.5;
}
.nav-balance-note.is-low { background: #fff7ed; border-color: #f5c89a; color: #7c2d12; }
.nav-balance-note.is-empty { background: #fef3f2; border-color: #f4b8b2; color: #9a1c13; }

.nav-right :focus-visible { outline: 2px solid #E67E5C; outline-offset: 2px; }

/* Phones: logo, balance (amount + Top up) and account only */
@media (max-width: 767.98px) {
    .nav-wide, .nav-balance-photos { display: none; }
    .nav-right { gap: 6px; }
    .nav-balance { margin-left: 0; }
    .nav-balance .balance-estimates { display: none !important; }   /* the account menu explains it */
    .nav-menu-user {
        position: fixed;
        left: 8px;
        right: 8px;
        top: 64px;
        width: auto;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
}

/* No hamburger any more: the bar stays on one line at every width */
.navbar > .container-fluid { flex-wrap: nowrap; }
.navbar .logo { flex: none; }

/* Neutralise the old balance styles in navbar.css (divider line, hidden-by-opacity tooltip, dark text) */
.nav-balance .balance-details { border: 0; padding-left: 0; cursor: pointer; }
.nav-balance .balance-details:focus-visible { box-shadow: none; }
.nav-balance .balance-estimates { opacity: 1; visibility: visible; transform: none; transition: none; }
.nav-balance .balance-estimates strong,
.nav-balance .balance-estimates b { color: #fff; }

/* The account line wraps instead of cutting off a long email */
.nav-user-head small { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
    .navbar > .container-fluid { padding-left: 12px; padding-right: 12px; }
    .navbar .logo { gap: 8px; min-width: 0; }
    .navbar .logo-img { height: 32px; }
    .navbar .logo-text { font-size: 1rem; }
    .nav-avatar-btn { padding: 0 4px; }
    .nav-avatar-btn > svg { display: none; }
}
@media (max-width: 359.98px) {
    .navbar .logo-text { display: none; }   /* very small phones: the mark alone */
}