/* =================================================================
   css/nav.css: styles for partials/nav.html only
   (sidebar, company switcher, + New menu, user menu, phone tab bar)
   Uses var(--eb-*) tokens from eb-tokens.css.
   ================================================================= */

/* ---------- Sidebar ---------------------------------------------- */
.eb-sidebar {
    flex: 1 1 var(--eb-sidebar-w);
    max-width: 280px;
    padding: var(--eb-space-5) 14px;
    display: flex; flex-direction: column; gap: 18px;
    background: var(--eb-bg-sidebar);
    border-right: 1px solid var(--eb-line);
    position: relative;
}
.eb-sidebar__brand { padding: 4px 10px 0; display: block; }
.eb-sidebar__brand:hover { text-decoration: none; }
.eb-sidebar__tools { display: flex; gap: 8px; position: relative; }
.eb-sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; position: relative; }

/* ---------- Company switcher ------------------------------------- */
.eb-switcher-wrap { position: relative; }
.eb-switcher {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px; border-radius: 10px;
    border: 1px solid var(--eb-line); background: var(--eb-surface);
    font: inherit; color: var(--eb-ink); text-align: left; cursor: pointer;
}
.eb-switcher:hover { border-color: var(--eb-line-strong); }
.eb-switcher__mark {
    width: 34px; height: 34px; border-radius: var(--eb-radius-md); flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--eb-primary); color: var(--eb-on-primary);
    font-size: var(--eb-text-sm); font-weight: 600;
}
.eb-switcher__text { display: flex; flex-direction: column; min-width: 0; }
.eb-switcher__name { font-size: var(--eb-text-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-switcher__hint { font-size: var(--eb-text-xs); color: var(--eb-ink-2); }
.eb-switcher__chev { margin-left: auto; width: 16px; height: 16px; color: var(--eb-ink-2); flex: none; }
.eb-switcher-menu { top: calc(100% + 6px); left: 0; right: 0; }
.eb-switcher-menu .eb-menu__item.is-current { font-weight: 600; color: var(--eb-selected-fg); }
.eb-company-mark {
    width: 24px; height: 24px; border-radius: 6px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--eb-neutral-bg); color: var(--eb-ink-body); font-size: var(--eb-text-xs); font-weight: 600;
}

/* ---------- Search + New ------------------------------------------ */
.eb-search-btn {
    flex: 1; display: flex; align-items: center; gap: 8px;
    height: var(--eb-control-h); padding: 0 12px; border-radius: var(--eb-radius-md);
    border: 1px solid var(--eb-line); background: var(--eb-surface);
    font: 400 var(--eb-text-md) var(--eb-font-ui); color: var(--eb-ink-2); cursor: pointer;
}
.eb-search-btn svg { width: 16px; height: 16px; flex: none; }
.eb-kbd { margin-left: auto; font-size: var(--eb-text-xs); border: 1px solid var(--eb-line); border-radius: 4px; padding: 1px 5px; }
.eb-new-menu { top: calc(100% + 6px); right: 0; }

/* ---------- Nav list ---------------------------------------------- */
.eb-nav { display: flex; flex-direction: column; gap: 2px; }
.eb-nav__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    height: 36px; padding: 0 10px; border: 0; border-radius: var(--eb-radius-md);
    background: transparent; font: 400 var(--eb-text-md) var(--eb-font-ui);
    color: var(--eb-ink-body); text-align: left; cursor: pointer;
}
.eb-nav__item:hover { background: var(--eb-neutral-bg); color: var(--eb-ink); text-decoration: none; }
.eb-nav__item.is-active { background: var(--eb-selected-bg); color: var(--eb-selected-fg); font-weight: 600; }
.eb-nav__item.is-open { color: var(--eb-selected-fg); font-weight: 600; }
.eb-nav__item svg { width: 18px; height: 18px; flex: none; }
.eb-nav__caret { margin-left: auto; transition: transform .15s; }
.eb-nav__item[aria-expanded="true"] .eb-nav__caret { transform: rotate(180deg); }

.eb-nav__group { display: flex; flex-direction: column; gap: 2px; }
.eb-nav__group[hidden] { display: none; }
.eb-nav__sub {
    display: flex; align-items: center; justify-content: space-between;
    height: 32px; padding: 0 10px 0 38px; border-radius: var(--eb-radius-md);
    font-size: var(--eb-text-md); color: var(--eb-ink-2);
}
.eb-nav__sub:hover { background: var(--eb-neutral-bg); color: var(--eb-ink); text-decoration: none; }
.eb-nav__sub.is-active {
    background: var(--eb-surface); color: var(--eb-selected-fg); font-weight: 600;
    box-shadow: 0 0 0 1px var(--eb-line);
}
.eb-nav__label {
    padding: 10px 10px 4px 38px;
    font-size: var(--eb-text-xs); font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--eb-ink-3);
}

/* Count badges filled by nav.js; hidden while empty */
.eb-badge {
    min-width: 20px; height: 20px; padding: 0 7px; border-radius: var(--eb-radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--eb-text-xs); font-weight: 600;
    background: var(--eb-warning-bg); color: var(--eb-warning-fg);
}
.eb-nav__item .eb-badge { margin-left: auto; }
.eb-nav__item .eb-badge + .eb-nav__caret { margin-left: 6px; }
.eb-badge--negative { background: var(--eb-negative-bg); color: var(--eb-negative-fg); }
.eb-badge:empty, .eb-badge[hidden] { display: none; }

/* ---------- User menu --------------------------------------------- */
.eb-user {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px; margin-top: 8px; border: 0; border-top: 1px solid var(--eb-line);
    background: transparent; font: 400 var(--eb-text-md) var(--eb-font-ui); color: var(--eb-ink);
    text-align: left; cursor: pointer; border-radius: 0;
}
.eb-user__avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--eb-selected-bg); color: var(--eb-selected-fg);
    font-size: var(--eb-text-xs); font-weight: 600;
}
.eb-user__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-user-menu { bottom: calc(100% + 6px); left: 0; right: 0; }
.eb-user-menu .eb-segmented { margin: 6px 4px; display: flex; }
.eb-user-menu .eb-segmented button { flex: 1; padding: 0 8px; }
.eb-menu__heading { padding: 8px 10px 2px; font-size: var(--eb-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--eb-ink-3); }

/* ---------- Phone: tab bar + drawer ------------------------------- */
.eb-tabbar { display: none; }
.eb-scrim { display: none; }

@media (max-width: 720px) {
    .eb-sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 50;
        width: min(86vw, 320px); max-width: none;
        transform: translateX(-100%); transition: transform .2s ease;
        overflow-y: auto;
    }
    .eb-sidebar.is-open { transform: none; box-shadow: var(--eb-shadow-pop); }
    .eb-scrim.is-open { display: block; position: fixed; inset: 0; z-index: 45; background: var(--eb-overlay); }

    .eb-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        height: 76px; padding: 0 12px 14px;
        justify-content: space-between; align-items: flex-start;
        background: var(--eb-surface); border-top: 1px solid var(--eb-line);
    }
    .eb-tabbar__item {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        min-width: 56px; padding-top: 8px; border: 0; background: transparent;
        font: 500 var(--eb-text-xs) var(--eb-font-ui); color: var(--eb-ink-2); cursor: pointer;
    }
    .eb-tabbar__item svg { width: 22px; height: 22px; }
    .eb-tabbar__item:hover { text-decoration: none; color: var(--eb-ink); }
    .eb-tabbar__item.is-active { color: var(--eb-selected-fg); font-weight: 600; }
    .eb-tabbar__new {
        width: 52px; height: 52px; margin-top: -14px; border: 0; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: var(--eb-primary); color: var(--eb-on-primary); cursor: pointer;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    }
    .eb-tabbar__new svg { width: 24px; height: 24px; }
}

/* ---------- additions for the easiBooks app ----------------------- */
.eb-company-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-company-cur { font-size: var(--eb-text-xs); color: var(--eb-ink-3); }
.eb-switcher-menu { max-height: 60vh; overflow-y: auto; }
.eb-user__text { display: flex; flex-direction: column; min-width: 0; }
.eb-user__role { font-size: var(--eb-text-xs); color: var(--eb-ink-2); }
.eb-badge--neutral { background: var(--eb-neutral-bg); color: var(--eb-ink-body); }
.eb-sidebar { position: sticky; top: 0; align-self: flex-start; min-height: 100vh; max-height: 100vh; overflow-y: auto; }
@media (max-width: 720px) { .eb-sidebar { position: fixed; min-height: 0; max-height: none; } }

/* Phone: offer of the mobile app */
.eb-mobile-offer { position: fixed; left: 12px; right: 12px; top: 12px; z-index: 60; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; background: var(--eb-surface); border: 1px solid var(--eb-line); border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-pop);
    font-size: var(--eb-text-md); color: var(--eb-ink); }
.eb-mobile-offer > span { flex: 1 1 160px; }
.eb-mobile-offer[hidden] { display: none; }