.top-actions{height:100%;align-items:center}
html{scrollbar-gutter:stable}
.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}
.login-card a{color:var(--teal);font-weight:650}

: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"] .system-log-summary>button{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}
:root[data-theme="dark"] .brand{color:#e7eef0}
:root[data-theme="dark"] .app-version{background:#202f36;color:#a8b7bd;border-color:#45575f}
:root[data-theme="dark"] .login-card{background:#18242a;color:#e7eef0}
:root[data-theme="dark"] .form-grid label,
:root[data-theme="dark"] .manual-invoice-line label,
:root[data-theme="dark"] .status-period-bar label,
:root[data-theme="dark"] .employee-source-picker>label{color:#b7c5ca}
:root[data-theme="dark"] .form-section,
:root[data-theme="dark"] .overview-card strong,
:root[data-theme="dark"] .empty-state h2,
:root[data-theme="dark"] .empty-state h3,
:root[data-theme="dark"] .help-statuses strong{color:#e7eef0}
:root[data-theme="dark"] .history-item p,
:root[data-theme="dark"] .dashboard-card small,
:root[data-theme="dark"] .dashboard-card span,
:root[data-theme="dark"] .dashboard-state-row span,
:root[data-theme="dark"] .dashboard-attention>a span,
:root[data-theme="dark"] .billing-overview span,
:root[data-theme="dark"] .billing-overview small,
:root[data-theme="dark"] .company-invoice-actions span,
:root[data-theme="dark"] .line-total span,
:root[data-theme="dark"] .invoice-status-overview span,
:root[data-theme="dark"] .invoice-status-overview small,
:root[data-theme="dark"] .invoice-detail-heading span,
:root[data-theme="dark"] .billing-confirm-summary span,
:root[data-theme="dark"] th{color:#b7c5ca}
:root[data-theme="dark"] .status{background:#2b3a40;color:#e7eef0}
:root[data-theme="dark"] .status.active{background:#173f36;color:#a9ead8}
:root[data-theme="dark"] .invoice-status-overview button.attention,
:root[data-theme="dark"] .invoice-status-overview>a.attention{background:#332b18;border-color:#7d672f;color:#e7eef0}
:root[data-theme="dark"] .dx-row-action{color:#74c8bd}
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .tabs button.active,
:root[data-theme="dark"] .row-actions button,
:root[data-theme="dark"] .help-open,
:root[data-theme="dark"] .account-link:hover .account-name{color:#74c8bd}
:root[data-theme="dark"] .login-card a{color:#74c8bd}

/* Blazor focuses the page heading after navigation for screen-reader context. */
h1[tabindex="-1"]:focus-visible{outline:none}
.workspace-selection{font-size:.58em;font-weight:600;color:var(--muted);white-space:nowrap}

.settings-warning{margin-bottom:18px}
.global-settings-panel{overflow:hidden}
.global-settings-grid{margin-top:10px}
.invoice-pdf-panel{margin:18px 0;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel)}
.invoice-pdf-panel .panel-heading{margin-bottom:12px}
.invoice-pdf-viewer{display:block;height:760px;min-height:520px}
.membership-intro{max-width:760px;padding:22px}
.membership-intro h2{margin-top:0}
.membership-heading-actions{display:flex;gap:10px;flex-wrap:wrap}
.membership-control-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.membership-control-grid .membership-intro{max-width:none}
.membership-deadline-field{display:grid;gap:7px;margin:18px 0;color:#354a52;font-weight:700}.membership-deadline-field input{min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;color:inherit;background:var(--panel)}
.membership-counts{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.membership-counts span{padding:9px 12px;border-radius:8px;background:#e8f5f2;color:#17675d}.membership-counts .warning{background:#fff4dc;color:#805b12}
.membership-simulation-note{margin-bottom:0;color:var(--muted);font-size:13px}
.membership-missing-card{padding:22px}.membership-missing-card .panel-heading{margin-bottom:12px}
.membership-missing-grid-shell{margin-top:0;box-shadow:none}.membership-missing-grid{border:0}.membership-grid-action{display:inline-flex;font:inherit;text-decoration:none}.membership-grid-action:hover{text-decoration:underline}
.membership-preview-backdrop{padding:28px;overflow:auto;align-items:flex-start}
.membership-preview-modal{width:min(1080px,100%);max-height:none;margin:auto}
.membership-preview-modal>.modal-title{align-items:flex-start}
.membership-preview-hint{display:flex;align-items:center;gap:7px;margin:7px 0 0;color:var(--muted);font-size:12px}.membership-preview-hint>span{width:13px;height:13px;border:1px dashed #65a69e;border-radius:3px;background:#eaf6f3}
.membership-document{margin-top:16px;padding:46px 52px;background:#fff;color:#17252b;border:1px solid #d9e1e4;border-radius:8px;box-shadow:0 12px 30px #102a3514}
.membership-document>header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding-bottom:22px;border-bottom:3px solid var(--teal)}
.membership-document h1{margin:0;font-size:30px}
.membership-period{font-size:18px;font-weight:750;color:var(--teal)}
.membership-document-subtitle{padding-top:10px;color:#52666e;font-weight:650}
.membership-document-heading{display:grid;grid-template-columns:minmax(300px,42%) minmax(360px,1fr);gap:24px;align-items:center}.membership-document-deadline{box-sizing:border-box;width:100%;margin-top:8px;color:#344850;font-size:16px;line-height:1.25;white-space:nowrap}.membership-document-deadline strong{font-weight:500}
.membership-company{display:grid;grid-template-columns:1fr auto;gap:28px;padding:22px 0;color:#43555d;line-height:1.6}
.membership-company strong{font-size:18px;color:#17252b}
.membership-company-meta{display:grid;grid-template-columns:auto minmax(180px,auto);column-gap:16px;row-gap:6px;align-content:start}
.membership-company-meta span{text-align:right}.membership-company-meta strong{font-size:14px;text-align:right;white-space:nowrap}
.membership-text{padding:18px 22px;background:#eef8f5;border-left:4px solid var(--teal);line-height:1.6}
.membership-text>:first-child{margin-top:0}.membership-text>:last-child{margin-bottom:0}
.membership-table{width:100%;margin-top:28px;border-collapse:collapse}
.membership-table th,.membership-table td{padding:11px 10px;text-align:left;border-bottom:1px solid #dce4e7}
.membership-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#52666e;background:#f5f8f9}
.membership-table .number{text-align:right;white-space:nowrap}
.membership-document footer{margin-top:34px;padding-top:20px;border-top:1px solid #dce4e7;line-height:1.6}
.membership-configurable{position:relative;outline:1px dashed #65a69e;outline-offset:7px;border-radius:2px}.membership-setting-label{position:absolute;top:-17px;left:-7px;padding:2px 6px;border-radius:8px;background:#eaf6f3;color:#39766f;font-size:9px;font-weight:750;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}.membership-text.membership-configurable{margin-top:7px}.membership-document footer.membership-configurable{margin-top:41px}
@media(max-width:760px){.membership-document{padding:26px 22px}.membership-company,.membership-document-heading{grid-template-columns:1fr}.membership-table{font-size:13px}.membership-preview-backdrop{padding:10px}.membership-heading-actions{width:100%}.membership-heading-actions button{flex:1}}
.system-log-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 20px}.system-log-summary>button{display:flex;flex-direction:column;gap:5px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;text-align:left;cursor:pointer;font:inherit}.system-log-summary>button:hover{border-color:#77aaa5;box-shadow:0 0 0 2px #d7ebe8}.system-log-summary>button.selected{border-color:#4d9990;background:#f4faf9;box-shadow:0 0 0 2px #d7ebe8}.system-log-summary span{font-size:12px;color:var(--muted)}.system-log-summary strong{font-size:22px;line-height:1.1;color:var(--navy);font-variant-numeric:tabular-nums}.system-log-summary>button.selected strong{color:var(--teal)}
:root[data-theme="dark"] .system-log-summary>button.selected{background:#17312f;border-color:#416f69;box-shadow:0 0 0 2px #294d49}:root[data-theme="dark"] .system-log-summary strong{color:#e7eef0}:root[data-theme="dark"] .system-log-summary>button.selected strong{color:#74c8bd}
@media(max-width:1000px){.system-log-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:620px){.system-log-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.system-log-summary>button:first-child{grid-column:span 2}}

/* Administrator-only workspaces share a restrained system accent in the sidebar. */
.sidebar nav a.system-nav{color:#f0d58d}
.sidebar nav a.system-nav .nav-icon{background:#735f2f;color:#fff4cf;box-shadow:inset 0 0 0 1px #ffffff1f}
.sidebar nav a.system-nav:hover,
.sidebar nav a.system-nav.active{color:#fff3c7}
.sidebar nav a.system-nav.active{background:#ffffff1f}

/* Links styled as primary buttons must keep button contrast and alignment. */
.login-card a.primary.action-link{
    justify-content:center;
    color:#fff;
    text-align:center;
}

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