.jvpn-brand {
    display: inline-flex;
    height: 100%;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.jvpn-brand-mark {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    object-fit: contain;
}

/* The ink ring flips to a light tone on dark surfaces. */
.jvpn-brand-mark-dark,
.dark .jvpn-brand-mark-light {
    display: none;
}

.dark .jvpn-brand-mark-dark {
    display: block;
}

.jvpn-brand-name {
    color: var(--gray-950);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}

.dark .jvpn-brand-name {
    color: var(--color-white);
}

/* Show the account name only inside the topbar user-menu button. */
.jvpn-topbar-account-name {
    display: none;
}

.fi-topbar .fi-user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fi-topbar .fi-user-menu-trigger .fi-user-avatar {
    flex-shrink: 0;
}

.fi-topbar .fi-user-menu-trigger .jvpn-topbar-account-name {
    display: block;
    max-width: min(12rem, 30vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-950);
}

.dark .fi-topbar .fi-user-menu-trigger .jvpn-topbar-account-name {
    color: var(--color-white);
}

/* Keep the actions available while horizontally scrolling wide tables. */
@media (min-width: 640px) {
    .fi-ta-content-ctn .fi-ta-table > thead > tr > .fi-ta-actions-header-cell {
        position: sticky;
        inset-inline-end: 0;
        z-index: 4;
        background-color: var(--gray-50);
        border-inline-start: 1px solid var(--gray-200);
    }

    .fi-ta-content-ctn .fi-ta-table > tbody > .fi-ta-row > .fi-ta-cell:has(> .fi-ta-actions) {
        position: sticky;
        inset-inline-end: 0;
        z-index: 2;
        background-color: var(--color-white);
        border-inline-start: 1px solid var(--gray-200);
    }

    .fi-ta-content-ctn .fi-ta-table > tbody > .fi-ta-row.fi-striped > .fi-ta-cell:has(> .fi-ta-actions),
    .fi-ta-content-ctn .fi-ta-table > tbody > .fi-ta-row.fi-selected > .fi-ta-cell:has(> .fi-ta-actions) {
        background-color: var(--gray-50);
    }

    .dark .fi-ta-content-ctn .fi-ta-table > thead > tr > .fi-ta-actions-header-cell,
    .dark .fi-ta-content-ctn .fi-ta-table > tbody > .fi-ta-row > .fi-ta-cell:has(> .fi-ta-actions) {
        background-color: var(--gray-900);
        border-inline-start-color: var(--gray-700);
    }

    .dark .fi-ta-content-ctn .fi-ta-table > tbody > .fi-ta-row.fi-striped > .fi-ta-cell:has(> .fi-ta-actions),
    .dark .fi-ta-content-ctn .fi-ta-table > tbody > .fi-ta-row.fi-selected > .fi-ta-cell:has(> .fi-ta-actions) {
        background-color: var(--gray-800);
    }
}

@media (min-width: 640px) and (hover: hover) {
    .fi-ta-content-ctn .fi-ta-table > tbody > .fi-ta-row.fi-clickable:hover > .fi-ta-cell:has(> .fi-ta-actions) {
        background-color: var(--gray-50);
    }

    .dark .fi-ta-content-ctn .fi-ta-table > tbody > .fi-ta-row.fi-clickable:hover > .fi-ta-cell:has(> .fi-ta-actions) {
        background-color: var(--gray-800);
    }
}