.top-actions{height:100%;align-items:center}
.top-dx-toolbar{display:flex!important;align-items:center!important;min-height:40px;border:0!important;background:transparent!important}
.top-dx-toolbar .dxbl-toolbar-items{align-items:center!important}
.top-actions form{display:flex;align-items:center;height:40px;margin:0}
.top-actions .user-chip,.top-actions .link-button{display:inline-flex;align-items:center;min-height:36px}
.top-actions .account-link{display:inline-flex;align-items:center;gap:8px;min-height:36px;color:#45565f;text-decoration:none}
.account-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e8f1f2;color:var(--navy);font-size:12px;font-weight:800}
.account-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-link:hover .account-name{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

:root[data-theme="dark"]{
    color-scheme:dark;
    --panel:#18242a;
    --line:#33434a;
    --muted:#a8b7bd;
    --navy:#0b252e;
    color:#e7eef0;
    background:#10191e;
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] .content{background:#10191e;color:#e7eef0}
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .company-toolbar,
:root[data-theme="dark"] .tab-panel,
:root[data-theme="dark"] .billing-overview>div,
:root[data-theme="dark"] .overview-card,
:root[data-theme="dark"] .dx-grid-shell,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .details-grid section,
:root[data-theme="dark"] .company-invoice-actions{background:#18242a;color:#e7eef0;border-color:#33434a}
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .danger-outline{background:#202f36;color:#e7eef0;border-color:#45575f}
:root[data-theme="dark"] .top-actions a,
:root[data-theme="dark"] .link-button,
:root[data-theme="dark"] .tabs button,
:root[data-theme="dark"] .grid-hint,
:root[data-theme="dark"] .panel-heading p,
:root[data-theme="dark"] .workspace-subtitle{color:#a8b7bd}
:root[data-theme="dark"] .user-chip,
:root[data-theme="dark"] .account-avatar,
:root[data-theme="dark"] .count{background:#26373e;color:#e7eef0}
:root[data-theme="dark"] .tabs{border-color:#33434a}
:root[data-theme="dark"] .modal-backdrop{background:#020608bb}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .manual-invoice-line{background:#202f36;color:#e7eef0;border-color:#45575f}

/* Blazor focuses the page heading after navigation for screen-reader context. */
h1[tabindex="-1"]:focus-visible{outline:none}

@media(max-width:560px){
    .top-actions .account-link{display:inline-flex}
    .account-name{display:none}
}