/* Workspace navigation, brand v2 (Figma "Sidebar" and "Bottom nav"): a fixed side bar on a desktop, an icon rail on a
   narrow desktop, a drawer with a bottom bar on a phone. top-navigation.js places the Money tabs and reads the routes.
   Width rules only (min-width / max-width), so the Mobile view switch (layout.js) can rewrite them. */

/* ---- the side bar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--canvas);
    border-right: 1px solid var(--border);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform .25s ease;
}
.sidebar-header { padding: 2px 4px 14px; }
.logo { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.logo-icon { width: 36px; height: 36px; flex: none; }
.logo-icon img { display: block; width: 36px; height: 36px; }
.logo-text { min-width: 0; }

.sidebar-action { padding: 0 0 16px; }
.sidebar-create {
    width: 100%;
    min-height: 40px;
    gap: 8px;
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}
.sidebar-create:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.sidebar-create svg { width: 18px; height: 18px; flex: none; }

.sidebar-nav { flex: 1 0 auto; display: flex; flex-direction: column; gap: 4px; }
.nav-section { display: flex; flex-direction: column; gap: 4px; }
.nav-section--end { margin-top: auto; padding-top: 16px; }
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--text-2);
    font: 500 14px/20px var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.nav-item:hover { background: var(--subtle); color: var(--text); }
/* The place you are: the selected fill, darker words, a heavier weight, and aria-current for assistive tech. */
.nav-item.active { background: var(--selected); color: var(--text); font-weight: 600; }
.nav-item svg { width: 20px; height: 20px; flex: none; }
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .nav-ref { display: none; }
.nav-badge { margin-left: auto; font: 500 12px/16px var(--font-mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.nav-item.active .nav-badge { color: var(--text); }

/* Night mode and Mobile view sit under Settings, as rows of the same height. */
.sidebar-appearance { display: flex; flex-direction: column; gap: 4px; }
.sidebar .theme-toggle {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 12px;
    gap: 12px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-2);
    font: 500 14px/20px var(--font-sans);
}
.sidebar .theme-toggle:hover { background: var(--subtle); color: var(--text); }
.sidebar .theme-toggle svg { width: 20px; height: 20px; }
.sidebar .theme-toggle :is([data-theme-status], [data-layout-status]) { margin-left: auto; font: 500 12px/16px var(--font-mono); color: var(--text-2); opacity: 1; }
.sidebar .theme-toggle[aria-pressed="true"] :is([data-theme-status], [data-layout-status]) { color: var(--accent-deep); font-weight: 600; }

/* Sync: the state in words, then Pull and Push once signed in. */
.sidebar-data { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px; border-radius: var(--radius); background: var(--subtle); }
.sync-card { display: flex; align-items: flex-start; gap: 10px; }
.sync-dot { width: 8px; height: 8px; margin-top: 6px; flex: none; border-radius: 50%; background: var(--control-edge); }
.sync-card-text { min-width: 0; }
.sync-card-title { margin: 0; font: 600 13px/18px var(--font-sans); color: var(--text); }
.sync-status-bar { margin: 0; padding: 0; border: 0; }
.sync-status-text { font: 400 12px/16px var(--font-sans); color: var(--text-2); }
.sidebar-data-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-2); }
.workspace-sync-tools { display: flex; gap: 6px; }
.workspace-sync-tools .sync-btn { flex: 1; justify-content: center; margin: 0; }

/* The account. */
.sidebar-footer { padding-top: 4px; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: var(--radius); }
.user-avatar {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--selected);
    color: var(--accent-deep);
    font: 600 12px var(--font-sans);
}
.user-info { flex: 1; min-width: 0; }
.user-name { font: 600 13px/18px var(--font-sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-email { font: 400 12px/16px var(--font-sans); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout-btn { flex: none; padding: 7px; line-height: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }
.sidebar-logout-btn:hover { color: var(--danger); background: var(--danger-bg); }

.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(22, 20, 46, .45); backdrop-filter: blur(2px); }
.sidebar-backdrop.active { display: block; }

/* ---- Money: one tab strip for Payments, Transactions and R&D Contracts, under the header of the open view */
.subnav { display: flex; gap: 24px; margin: 8px 32px 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav-tab {
    position: relative;
    flex: none;
    padding: 10px 2px 12px;
    color: var(--text-2);
    font: 500 14px/20px var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
}
.subnav-tab:hover { color: var(--text); }
.subnav-tab[aria-current="page"] { color: var(--text); font-weight: 600; }
.subnav-tab[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primary); }
.subnav-tab:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }

/* ---- a narrow desktop: the side bar becomes a rail of icons; every name stays for assistive tech */
@media (max-width: 1024px) and (min-width: 769px) {
    :root { --sidebar-width: 76px; }
    .sidebar { padding: 16px 12px; }
    .sidebar-header { display: flex; justify-content: center; padding: 2px 0 14px; }
    .logo-text, .sidebar-create-label, .nav-item .nav-label, .sidebar .theme-toggle > span,
    .sync-card-text, .sidebar-data-note, .workspace-sync-tools .sync-label, .user-info {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .sidebar-create { width: 44px; min-height: 44px; padding: 0; margin: 0 auto; border-radius: 50%; }
    .nav-item, .sidebar .theme-toggle { justify-content: center; gap: 0; padding: 10px; }
    .nav-badge { position: absolute; top: 3px; right: 3px; min-width: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-size: 11px; line-height: 16px; text-align: center; }
    .sidebar-data { align-items: center; padding: 10px 4px; background: transparent; }
    .sync-card { justify-content: center; }
    .sync-dot { margin: 0; }
    .workspace-sync-tools { flex-direction: column; }
    .workspace-sync-tools .sync-btn { width: 40px; min-height: 36px; padding: 0; }
    .user-card { justify-content: center; padding: 4px 0; flex-direction: column; gap: 6px; }
    .subnav { margin: 8px 22px 0; }
}

/* ---- a phone (and the Mobile view switch): the side bar is a drawer, and a bottom bar carries the main places */
@media (max-width: 768px) {
    .sidebar { width: min(288px, 86vw); background: var(--surface); }
    .sidebar.open { box-shadow: var(--shadow-lg); }
    .subnav { margin: 4px 18px 0; gap: 20px; }

    .mobile-workspace-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        gap: 4px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 20px rgba(22, 20, 46, .06);
    }
    .mobile-workspace-nav button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        min-height: 52px;
        padding: 6px 2px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: var(--text-2);
        font: 500 12px/16px var(--font-sans);
        cursor: pointer;
    }
    .mobile-workspace-nav button svg { width: 22px; height: 22px; flex: none; }
    .mobile-workspace-nav button:hover { color: var(--text); }
    /* The place you are: the selected pill, darker words, and aria-current. */
    .mobile-workspace-nav button[aria-current="page"], .mobile-workspace-nav .mobile-nav-more.active { background: var(--selected); color: var(--text); font-weight: 600; }
    .mobile-workspace-nav .mobile-nav-create {
        justify-self: center;
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 50%;
        background: var(--primary);
        color: var(--on-primary);
        box-shadow: 0 6px 16px rgba(91, 61, 245, .32);
    }
    .mobile-workspace-nav .mobile-nav-create:hover { background: var(--primary-hover); color: var(--on-primary); }
    .mobile-workspace-nav .mobile-nav-create svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition-duration: .001ms; }
}

@media print {
    .sidebar, .subnav { display: none !important; }
}