/* Topbar profile actions and notifications */
html .vario-topbar-profile,
html[data-vario-theme] .vario-topbar-profile {
    position: relative !important;
    gap: 9px !important;
}

html .vario-topbar-action-icon,
html[data-vario-theme] .vario-topbar-action-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    color: var(--vario-component-topbar-action-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    --vario-filter-button-hover: brightness(1);
    transition:
        background-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        filter var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        box-shadow var(--vario-motion-button-return-duration) var(--vario-motion-button-easing) !important;
}

/* The sidebar owns its own icon sizing. Keep the direct topbar actions at
   their established 20 px metric instead of inheriting a navigation rule. */
html .vario-topbar-action-icon > .nav-icon,
html[data-vario-theme] .vario-topbar-action-icon > .nav-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    opacity: 1 !important;
    shape-rendering: geometricPrecision !important;
}

html .vario-topbar-action-icon:hover,
html[data-vario-theme] .vario-topbar-action-icon:hover {
    color: var(--vario-component-topbar-action-hover-text) !important;
    background: var(--vario-component-topbar-action-hover-bg) !important;
    border-color: transparent !important;
}

html .vario-topbar-action-icon:is(:active, [data-vario-pressed="true"]),
html[data-vario-theme] .vario-topbar-action-icon:is(:active, [data-vario-pressed="true"]) {
    color: var(--vario-component-topbar-action-hover-text) !important;
    background: var(--vario-component-topbar-action-hover-bg) !important;
    filter: var(--vario-filter-button-pressed) !important;
    box-shadow: var(--vario-shadow-button-pressed) !important;
    transition-duration: var(--vario-motion-button-press-duration) !important;
    transition-timing-function: var(--vario-motion-button-easing) !important;
}

html .vario-topbar-svg-icon,
html[data-vario-theme] .vario-topbar-svg-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    color: currentColor !important;
    stroke: currentColor !important;
    stroke-width: var(--vario-topbar-icon-stroke, 2.15) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transform: translate(var(--vario-topbar-icon-x, 0px), var(--vario-topbar-icon-y, 0px)) !important;
}

html .vario-notification-panel,
html[data-vario-theme] .vario-notification-panel {
    right: -8px !important;
    width: 270px !important;
    z-index: 20000 !important;
}

html .vario-notification-list,
html[data-vario-theme] .vario-notification-list {
    max-height: 420px !important;
}

html .vario-notification-item,
html[data-vario-theme] .vario-notification-item {
    min-height: 86px !important;
    padding: 12px 14px !important;
}

html .vario-topbar-action-icon:hover .vario-topbar-svg-icon,
html[data-vario-theme] .vario-topbar-action-icon:hover .vario-topbar-svg-icon {
    stroke: currentColor !important;
}

html .vario-notification-backdrop,
html[data-vario-theme] .vario-notification-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 19990 !important;
    background: transparent !important;
}

html .vario-notification-badge,
html[data-vario-theme] .vario-notification-badge {
    color: #ffffff !important;
    background: #e11d48 !important;
}

html .vario-notification-panel,
html[data-vario-theme] .vario-notification-panel {
    color: #111827 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18) !important;
    z-index: 20000 !important;
}

html .vario-user-avatar,
html[data-vario-theme] .vario-user-avatar {
    display: none !important;
}