/* YousoroFinance redesign-web — navigation: top bar, section switcher, period control, profile menu */

/* ── Top bar: frosted glass, light ─────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth > .yf-authorized-nav,
:root body.yf-redesign.yf-dashboard-auth .yf-authorized-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--rd-nav-h);
    padding-block: 10px;
    background: var(--rd-nav-bg) !important;
    border-bottom: 1px solid var(--rd-line-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 24px -18px rgba(15, 23, 42, .18);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

:root body.yf-redesign.yf-dashboard-auth .yf-authorized-nav .yf-nav-wordmark--light { display: none; }
:root body.yf-redesign.yf-dashboard-auth .yf-authorized-nav .yf-nav-wordmark--dark { display: block; }
:root body.yf-redesign.yf-dashboard-auth .yf-authorized-nav .yf-nav-wordmark { height: 30px; width: auto; }

:root body.yf-redesign.yf-dashboard-auth .yf-authorized-nav :is(.nav-link, .text-white, [data-account-name]) {
    color: var(--rd-ink-2) !important;
}

/* YouFiHub + notifications: quiet toolbar buttons */
:root body.yf-redesign.yf-dashboard-auth .yf-authorized-nav > :is(.yf-youfihub-nav-item, .yf-notifications-nav-item, .yf-authorized-extra-link) {
    padding-top: 0 !important;
    display: flex;
    align-items: center;
}

:root body.yf-redesign.yf-dashboard-auth .yf-authorized-nav > :is(.yf-youfihub-nav-item, .yf-notifications-nav-item, .yf-authorized-extra-link) > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    margin-inline: 2px;
    padding: 0 12px !important;
    border: 0;
    border-radius: var(--rd-radius-pill);
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: var(--rd-tracking-snug);
    transition: background var(--rd-dur-fast) var(--rd-ease), color var(--rd-dur-fast) var(--rd-ease);
}

:root body.yf-redesign.yf-dashboard-auth .yf-authorized-nav > :is(.yf-youfihub-nav-item, .yf-notifications-nav-item, .yf-authorized-extra-link) > .nav-link:hover {
    background: var(--rd-fill-soft);
    color: var(--rd-ink) !important;
}

:root body.yf-redesign.yf-dashboard-auth .yf-authorized-nav #tasks-btn i { font-size: 16px !important; color: var(--rd-accent); }

:root body.yf-redesign.yf-dashboard-auth .yf-notifications-button {
    width: 36px;
    justify-content: center;
    padding: 0 !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-notifications-button i { font-size: 18px; }

:root body.yf-redesign.yf-dashboard-auth .yf-notifications-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border: 2px solid var(--rd-nav-solid);
    border-radius: 999px;
    background: var(--rd-negative);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
}

:root body.yf-redesign.yf-dashboard-auth .yf-youfi-indicator,
:root body.yf-redesign.yf-dashboard-auth .notify-dot {
    background: var(--rd-negative) !important;
    box-shadow: 0 0 0 2px var(--rd-nav-solid);
}

/* Profile trigger */
:root body.yf-redesign.yf-dashboard-auth .yf-authorized-profile > .nav-link {
    height: 40px;
    margin-left: 6px;
    padding: 3px 12px 3px 4px !important;
    border-radius: var(--rd-radius-pill);
    background: var(--rd-surface);
    box-shadow: var(--rd-shadow-control);
    font-size: 13.5px;
    font-weight: 650;
    transition: box-shadow var(--rd-dur-fast) var(--rd-ease), background var(--rd-dur-fast) var(--rd-ease);
}
:root body.yf-redesign.yf-dashboard-auth .yf-authorized-profile > .nav-link:hover { box-shadow: var(--rd-shadow-card-hover); }
:root body.yf-redesign.yf-dashboard-auth .yf-authorized-profile > .nav-link::after { margin-left: 8px; color: var(--rd-subtle); border-top-color: currentColor; }
:root body.yf-redesign.yf-dashboard-auth .yf-authorized-profile .yf-profile-avatar-wrap { margin-right: 8px !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-authorized-profile .photo {
    box-sizing: border-box;
    display: grid !important;
    place-items: center;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 50%;
    background: var(--rd-fill-soft);
    vertical-align: middle;
}
/* The picture fills the ring exactly: a fixed 32px image inside a 30px bordered ring was shifted right/down. */
:root body.yf-redesign.yf-dashboard-auth .yf-authorized-profile .photo img { display: block; width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; }

/* ── Menus (profile dropdown, generic dropdowns) ───────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .dropdown-menu,
:root body.yf-redesign.yf-dashboard-auth .dropdown-menu-dark {
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-color: var(--rd-ink);
    --bs-dropdown-link-color: var(--rd-ink);
    --bs-dropdown-link-hover-color: var(--rd-ink);
    --bs-dropdown-link-hover-bg: var(--rd-fill-soft);
    --bs-dropdown-link-active-bg: var(--rd-accent);
    --bs-dropdown-divider-bg: var(--rd-line);
    --bs-dropdown-header-color: var(--rd-muted);
    min-width: 260px;
    padding: 6px;
    border: 0;
    border-radius: var(--rd-radius-md);
    background: var(--rd-menu-bg) !important;
    color: var(--rd-ink);
    box-shadow: var(--rd-shadow-raised);
}

:root body.yf-redesign.yf-dashboard-auth .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 9px;
    color: var(--rd-ink) !important;
    font-size: 13.5px;
    font-weight: 550;
    transition: background var(--rd-dur-fast) var(--rd-ease);
}
:root body.yf-redesign.yf-dashboard-auth .dropdown-menu .dropdown-item > i:first-child { width: 18px; color: var(--rd-muted); font-size: 17px; text-align: center; }
:root body.yf-redesign.yf-dashboard-auth .dropdown-menu .dropdown-item:hover,
:root body.yf-redesign.yf-dashboard-auth .dropdown-menu .dropdown-item:focus { background: var(--rd-fill-soft); }
:root body.yf-redesign.yf-dashboard-auth .dropdown-menu .dropdown-item:hover > i:first-child { color: var(--rd-accent); }
:root body.yf-redesign.yf-dashboard-auth .dropdown-menu .dropdown-divider { margin: 6px 4px; border-color: var(--rd-line); opacity: 1; }

:root body.yf-redesign.yf-dashboard-auth .yf-profile-languages summary { list-style: none; }
:root body.yf-redesign.yf-dashboard-auth .yf-profile-languages__links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 38px;
    border-radius: 9px;
    color: var(--rd-ink-2);
    font-size: 13px;
}
:root body.yf-redesign.yf-dashboard-auth .yf-profile-languages__links a:hover { background: var(--rd-fill-soft); color: var(--rd-ink); }
:root body.yf-redesign.yf-dashboard-auth .yf-profile-languages__links a[aria-current="page"] { color: var(--rd-accent); font-weight: 650; }

/* ── Command bar: section switcher + period ────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-commandbar {
    position: sticky;
    top: calc(var(--rd-nav-h) + 10px);
    z-index: 40;
    gap: 16px;
    margin-bottom: 24px !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Segmented control (macOS style) */
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav {
    flex: 0 1 auto;
    width: auto !important;
    gap: 2px;
    min-height: 40px;
    padding: 3px;
    border-radius: 12px;
    background: var(--rd-fill);
    box-shadow: inset 0 0 0 .5px rgba(15, 23, 42, .04);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element {
    min-height: 34px;
    min-width: 104px;
    padding: 8px 18px !important;
    border-radius: 9px;
    color: var(--rd-ink-2) !important;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: var(--rd-tracking-snug);
    box-shadow: none;
    transition: background var(--rd-dur) var(--rd-ease), color var(--rd-dur) var(--rd-ease), box-shadow var(--rd-dur) var(--rd-ease);
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element:hover {
    color: var(--rd-ink) !important;
    background: var(--rd-seg-hover);
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element.nav-element-active {
    color: var(--rd-ink) !important;
    background: var(--rd-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 3px 8px -2px rgba(15, 23, 42, .08), 0 0 0 .5px rgba(15, 23, 42, .06);
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-commandbar.is-assets .yf-section-nav { width: auto !important; }

/* Period control: one grouped pill */
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period {
    grid-template-columns: 34px minmax(118px, 148px) minmax(76px, 90px) 34px;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--rd-surface);
    box-shadow: var(--rd-shadow-card);
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__step,
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__trigger {
    min-height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--rd-ink);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: none;
}
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__step { width: 34px; color: var(--rd-muted); }
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__step i { font-size: 16px; }
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__trigger { padding: 6px 10px 6px 12px; }
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__trigger i { color: var(--rd-subtle); font-size: 12px; }

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__step:hover,
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__step:focus-visible,
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__trigger:hover,
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__trigger:focus-visible,
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__trigger[aria-expanded="true"] {
    border: 0;
    background: var(--rd-fill-soft);
    color: var(--rd-ink);
    box-shadow: none;
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__menu {
    padding: 6px;
    border: 0;
    border-radius: var(--rd-radius-md);
    background: var(--rd-surface-glass-strong);
    box-shadow: var(--rd-shadow-raised);
    backdrop-filter: blur(30px) saturate(190%);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__menu button {
    min-height: 34px;
    border-radius: 8px;
    color: var(--rd-ink);
    font-size: 13.5px;
    font-weight: 550;
}
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__menu button:hover { background: var(--rd-fill-soft); }
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__menu button[aria-selected="true"] { color: var(--rd-accent); background: var(--rd-accent-soft); font-weight: 650; }
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period__menu button i { color: var(--rd-accent); }

/* ── Compact widths ────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    :root body.yf-redesign.yf-dashboard-auth .yf-dashboard-commandbar {
        top: calc(var(--rd-nav-h) + 6px);
        gap: 10px;
        margin-bottom: 18px !important;
    }
    :root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav {
        display: grid !important;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        width: 100% !important;
    }
    :root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element {
        min-width: 0;
        padding: 8px 6px !important;
        font-size: 13px;
    }
    :root body.yf-redesign.yf-dashboard-auth .yf-dashboard-period { width: 100%; grid-template-columns: 34px minmax(0, 1fr) minmax(0, .7fr) 34px; }
}

@media (max-width: 575.98px) {
    :root body.yf-redesign.yf-dashboard-auth { --rd-nav-h: 56px; }
    :root body.yf-redesign.yf-dashboard-auth .yf-authorized-profile > .nav-link { padding-right: 10px !important; font-size: 13px; }
    :root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element { padding: 8px 2px !important; font-size: 12.5px; letter-spacing: -.01em; }
}

/* Phones: section switcher and period stay in the page flow instead of following the scroll */
@media (max-width: 767.98px) {
    :root body.yf-redesign.yf-dashboard-auth .yf-dashboard-commandbar { position: relative !important; top: auto !important; }
}
/* Balance chip (base in css/financeDashboard/account-nav.css) */
:root body.yf-redesign.yf-dashboard-auth .yf-balance-chip {
    height: 36px;
    padding: 0 7px 0 14px;
    border: 0;
    background: var(--rd-surface);
    color: var(--rd-ink);
    font-size: 13.5px;
    font-weight: 650;
    box-shadow: var(--rd-shadow-control);
}
:root body.yf-redesign.yf-dashboard-auth .yf-balance-chip:hover,
:root body.yf-redesign.yf-dashboard-auth .yf-balance-chip:focus-visible { background: var(--rd-surface); box-shadow: var(--rd-shadow-card-hover); }
:root body.yf-redesign.yf-dashboard-auth .yf-balance-chip__plus { width: 22px; height: 22px; background: rgba(var(--rd-accent-rgb), .14); color: var(--rd-accent); font-size: 13px; box-shadow: none; transition: background-color .35s ease, color .35s ease, transform .55s cubic-bezier(.4, 0, .2, 1); }
:root body.yf-redesign.yf-dashboard-auth .yf-balance-chip:hover .yf-balance-chip__plus { background: var(--rd-accent); color: #fff; transform: rotate(90deg); }
:root body.yf-redesign.yf-dashboard-auth.dark-theme .yf-balance-chip__plus { background: rgba(var(--rd-accent-rgb), .18); color: var(--rd-accent-ink); }