:root {
    color-scheme: light dark;
    --color-bg: #f6f7f8;
    --color-rail: #18212a;
    --color-rail-muted: #8fa0ad;
    --color-surface: #ffffff;
    --color-surface-alt: #eef2f4;
    --color-surface-strong: #e3e9ed;
    --color-text: #17202a;
    --color-muted: #5f6f7a;
    --color-border: #cfd8de;
    --color-primary: #1d6f8f;
    --color-primary-soft: #d9edf3;
    --color-success: #1d7a45;
    --color-success-soft: #dff3e7;
    --color-warning: #996500;
    --color-warning-soft: #fff0cc;
    --color-danger: #b3261e;
    --color-danger-soft: #ffe2df;
    --color-focus: #0d7fa6;
    --shadow-soft: 0 1px 2px rgba(23, 32, 42, 0.1);
    --rail-width: 16rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #101417;
        --color-rail: #11191f;
        --color-rail-muted: #8da0ad;
        --color-surface: #182026;
        --color-surface-alt: #202a31;
        --color-surface-strong: #29343c;
        --color-text: #e9eef1;
        --color-muted: #b6c3ca;
        --color-border: #3a4851;
        --color-primary: #65c7e3;
        --color-primary-soft: #173b47;
        --color-success: #7ddf9d;
        --color-success-soft: #173b27;
        --color-warning: #ffd06f;
        --color-warning-soft: #493719;
        --color-danger: #ffb4ab;
        --color-danger-soft: #4d211f;
        --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
}

@font-face {
    font-family: "Space Grotesk";
    src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("/fonts/manrope-latin.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Material Symbols Outlined";
    src: url("/fonts/material-symbols-outlined-500.full.woff2") format("woff2");
    font-display: block;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--color-bg);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: Manrope, Arial, sans-serif;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.material-symbol {
    display: inline-grid;
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 1.4rem;
    overflow: hidden;
    place-items: center;
    font-family: "Material Symbols Outlined", "Segoe UI Symbol", sans-serif;
    font-size: 1.2rem;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.header-icon .material-symbol,
.icon-button .material-symbol,
.quiet-icon .material-symbol,
.notification-icon .material-symbol,
.service-card .material-symbol,
.nav-module.is-active .material-symbol:first-child,
.stat-icon .material-symbol,
.card-open-icon.material-symbol,
.card-open-icon .material-symbol,
.footer-metric .material-symbol,
.event-status-icon .material-symbol,
.events-illustration .material-symbol,
.reference-warning > .material-symbol,
.accountant-banner .material-symbol,
.settings-subnav a .material-symbol {
    width: 100%;
    height: 100%;
    flex-basis: auto;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    min-height: 100vh;
}

.nav-rail {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100vh;
    padding: 1rem 0.75rem;
    background: var(--color-rail);
    color: #eef6f9;
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0 0.75rem;
    color: #ffffff;
    font-weight: 850;
    text-decoration: none;
}

.brand-symbol {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 8px;
    background: var(--color-primary);
    color: #ffffff;
}

.nav-list {
    display: grid;
    gap: 0.25rem;
}

.nav-group-label {
    margin: 0.85rem 0.75rem 0.25rem;
    color: var(--color-rail-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.55rem;
    border-radius: 8px;
    padding: 0 0.75rem;
    color: #d8e4ea;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
}

.nav-item:hover,
.nav-item.is-active {
    background: rgba(255, 255, 255, 0.11);
    color: #ffffff;
}

.main-pane {
    min-width: 0;
    padding: 1rem 1.25rem 2rem;
}

.top-app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
    margin-bottom: 1rem;
}

.top-app-bar h1,
.workbench-hero h2,
.auth-panel h2,
.section-heading h2,
.empty-state h2 {
    margin: 0;
    font-family: "Space Grotesk", Manrope, Arial, sans-serif;
    letter-spacing: 0;
}

.top-app-bar h1 {
    font-size: 1.45rem;
}

.eyebrow {
    margin: 0 0 0.25rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.top-actions,
.table-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.icon-button {
    display: inline-grid;
    min-width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-weight: 850;
    text-decoration: none;
}

.content-grid {
    display: grid;
    gap: 1rem;
}

.workbench-hero,
.alert-banner,
.data-surface,
.auth-panel,
.empty-state,
.metric-card,
.exception-card,
.copy-box,
.snackbar {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.workbench-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

.workbench-hero h2 {
    font-size: 1.35rem;
}

.muted-copy {
    margin: 0.35rem 0 0;
    color: var(--color-muted);
}

.alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
    background: var(--color-warning-soft);
}

.alert-banner strong {
    display: block;
    margin-bottom: 0.2rem;
}

.alert-banner p {
    margin: 0;
    color: var(--color-muted);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.summary-grid.is-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card,
.exception-card {
    min-width: 0;
    padding: 0.9rem;
}

.metric-card span,
.exception-card span {
    display: block;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.metric-card strong,
.exception-card strong {
    display: block;
    margin-top: 0.55rem;
    overflow-wrap: anywhere;
    font-size: 1.35rem;
}

.tone-primary strong {
    color: var(--color-primary);
}

.tone-success strong {
    color: var(--color-success);
}

.tone-warning strong {
    color: var(--color-warning);
}

.tone-danger strong {
    color: var(--color-danger);
}

.data-surface,
.empty-state,
.auth-panel {
    padding: 1rem;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.section-heading h2 {
    font-size: 1rem;
}

.segmented-control {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-alt);
}

.segment {
    min-height: 2rem;
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.segment.is-active {
    background: var(--color-surface);
    color: var(--color-text);
}

.exception-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.bar-list {
    display: grid;
    gap: 0.65rem;
}

.bar-row {
    display: grid;
    grid-template-columns: 4rem minmax(10rem, 1fr) minmax(8rem, auto);
    align-items: center;
    gap: 0.75rem;
    font-weight: 850;
}

.bar-track {
    height: 0.7rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-surface-alt);
}

.bar-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 44rem;
    border-spacing: 0;
}

.dense-table {
    min-width: 72rem;
}

th,
td {
    border-bottom: 1px solid var(--color-border);
    padding: 0.65rem 0.7rem;
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    font-size: 0.9rem;
}

tbody tr:hover {
    background: var(--color-surface-alt);
}

.empty-row td {
    height: 12rem;
    color: var(--color-muted);
    text-align: center;
}

.empty-row strong,
.empty-row p {
    display: block;
    margin: 0.35rem auto 0;
    max-width: 30rem;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    max-width: 100%;
    border-radius: 999px;
    padding: 0 0.65rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
}

.status-chip.is-muted {
    background: var(--color-surface-alt);
    color: var(--color-muted);
}

.mono-value {
    font-family: Consolas, "Liberation Mono", monospace;
    font-size: 0.85rem;
}

.text-link {
    color: var(--color-primary);
    font-weight: 900;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    color: var(--color-muted);
    font-weight: 850;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.form-grid-wide {
    grid-column: 1 / -1;
}

label {
    display: grid;
    gap: 0.35rem;
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 850;
}

input,
select,
textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
}

input,
select {
    min-height: 2.55rem;
    padding: 0 0.75rem;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.35rem;
    min-width: 1.35rem;
    min-height: 1.35rem;
    padding: 0;
}

textarea {
    min-height: 5.5rem;
    padding: 0.75rem;
    resize: vertical;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.55rem;
    border: 0;
    border-radius: 8px;
    padding: 0 1rem;
    cursor: pointer;
    font-weight: 900;
    text-decoration: none;
}

.button .material-symbol {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
}

.button.is-primary {
    background: var(--color-primary);
    color: #ffffff;
}

.button.is-secondary {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.button.is-danger {
    background: var(--color-danger);
    color: #ffffff;
}

.button.is-compact {
    min-height: 2.1rem;
    padding: 0 0.75rem;
    font-size: 0.85rem;
}

.snackbar {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
}

.snackbar.is-error {
    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));
    color: var(--color-danger);
}

.copy-box {
    margin-bottom: 1rem;
    padding: 1rem;
}

.auth-layout {
    display: grid;
    max-width: 28rem;
}

.form-stack,
.local-preview {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.form-subtle {
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
}

.empty-state {
    display: grid;
    min-height: 18rem;
    place-items: center;
    align-content: center;
    text-align: center;
}

.empty-state p {
    max-width: 36rem;
    color: var(--color-muted);
}

.settings-list,
.detail-grid {
    display: grid;
    gap: 0.75rem;
}

.detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-list div,
.detail-grid div {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-alt);
}

.settings-list div {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1rem;
}

.detail-grid-wide {
    grid-column: 1 / -1;
}

.settings-list dt,
.detail-grid dt {
    color: var(--color-muted);
    font-weight: 900;
}

.settings-list dd,
.detail-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 1100px) {
    .two-column-table {
        align-self: start;
    }
}

@media (max-width: 1100px) {
    .summary-grid,
    .summary-grid.is-compact,
    .exception-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    :root {
        --rail-width: 4.75rem;
    }

    .brand-copy,
    .nav-group-label,
    .nav-item {
        font-size: 0;
    }

    .brand-mark,
    .nav-item {
        justify-content: center;
        padding: 0;
    }

    .nav-item .material-symbol {
        width: 1.5rem;
    }
}

@media (max-width: 680px) {
    .app-shell {
        grid-template-columns: 1fr;
        padding-bottom: 4.75rem;
    }

    .nav-rail {
        position: fixed;
        z-index: 10;
        inset: auto 0 0;
        height: 4.75rem;
        flex-direction: row;
        align-items: center;
        padding: 0.5rem;
    }

    .brand-mark,
    .nav-group-label {
        display: none;
    }

    .nav-list {
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr));
    }

    .main-pane {
        padding: 0.85rem;
    }

    .top-app-bar,
    .workbench-hero,
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .summary-grid,
    .summary-grid.is-compact,
    .exception-list,
    .form-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .settings-list div {
        grid-template-columns: 1fr;
    }

    .bar-row {
        grid-template-columns: 3rem minmax(8rem, 1fr);
    }

    .bar-row strong {
        grid-column: 1 / -1;
    }

    .segmented-control {
        width: 100%;
    }
}

/* Reference-aligned Billingo-style pass. */
:root {
    color-scheme: light;
    --color-bg: #eef5f7;
    --color-rail: #f7fafc;
    --color-rail-muted: #8198ab;
    --color-surface: #ffffff;
    --color-surface-alt: #f4f8fb;
    --color-surface-strong: #e8f1f6;
    --color-text: #062b52;
    --color-muted: #5f7487;
    --color-border: #c7d5df;
    --color-primary: #1557e5;
    --color-primary-soft: #e8f0ff;
    --color-success: #137a43;
    --color-success-soft: #e7f8ee;
    --color-warning: #9c6500;
    --color-warning-soft: #fff3d9;
    --color-danger: #b3261e;
    --color-danger-soft: #ffe8e8;
    --color-focus: #1557e5;
    --shadow-soft: 0 4px 14px rgba(5, 39, 69, 0.12);
    --ref-blue: #1557e5;
    --ref-blue-dark: #07345f;
    --ref-bg: #eef5f7;
    --ref-sidebar: #f7fafc;
    --ref-panel: #ffffff;
    --ref-border: #c7d5df;
    --ref-muted: #8198ab;
    --ref-text: #062b52;
    --ref-green: #20d368;
    --ref-orange: #ff8a00;
    --ref-red: #ff5d66;
    --ref-shadow: 0 4px 14px rgba(5, 39, 69, 0.12);
    --rail-width: 16.5rem;
}

html,
body {
    color-scheme: light;
}

body {
    background: var(--ref-bg);
    color: var(--ref-text);
}

.demo-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 3.35rem;
    background: var(--ref-blue);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.demo-button {
    min-width: 7.75rem;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 6px;
    padding: 0.65rem 1.1rem;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
}

.global-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.45rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid #d9e3ea;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(5, 39, 69, 0.12);
}

.brand-logo {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--ref-blue);
    font-family: "Space Grotesk", Manrope, Arial, sans-serif;
    font-size: 1.85rem;
    font-weight: 900;
    text-decoration: none;
}

.brand-logo small {
    color: var(--ref-muted);
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.global-tools {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.global-tool-form {
    display: inline-flex;
    margin: 0;
}

.header-icon {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ref-blue-dark);
    cursor: pointer;
    font-weight: 900;
    text-decoration: none;
}

.header-icon.has-ring {
    outline: 4px solid #ffe2dc;
}

.notification-center {
    position: relative;
}

.notification-center > summary {
    position: relative;
    list-style: none;
}

.notification-center > summary::-webkit-details-marker {
    display: none;
}

.notification-center.has-unread > summary::before {
    content: "";
    position: absolute;
    inset: -0.32rem;
    border: 4px solid #ffb1aa;
    border-radius: 999px;
    animation: notification-ripple 1.8s ease-out infinite;
}

@keyframes notification-ripple {
    0% {
        opacity: 0.9;
        transform: scale(0.92);
    }
    100% {
        opacity: 0;
        transform: scale(1.22);
    }
}

.notification-badge {
    position: absolute;
    top: 0.05rem;
    right: 0.05rem;
    display: grid;
    min-width: 1rem;
    height: 1rem;
    place-items: center;
    border-radius: 999px;
    background: #ff5d66;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 900;
}

.notification-panel {
    position: absolute;
    z-index: 160;
    top: calc(100% + 0.65rem);
    right: 0;
    width: min(27.5rem, calc(100vw - 2rem));
    max-height: calc(100vh - 7rem);
    overflow: auto;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(5, 39, 69, 0.2);
}

.notification-panel > header {
    padding: 0.85rem 1rem 0.35rem;
}

.notification-panel h2,
.notification-panel h3 {
    margin: 0;
}

.notification-panel h2 {
    font-size: 1.05rem;
}

.notification-tabs {
    display: flex;
    gap: 1.1rem;
    border-bottom: 1px solid #d9e3ea;
    padding: 0 1rem;
}

.notification-tabs button {
    min-height: 2.25rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ref-text);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
}

.notification-tabs button.is-active {
    border-color: var(--ref-blue);
    color: var(--ref-blue);
}

.notification-empty {
    margin: 0;
    padding: 1rem;
    color: var(--ref-muted);
    font-size: 0.84rem;
}

.notification-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    border-bottom: 1px solid #d9e3ea;
    padding: 1rem;
}

.notification-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 6px;
    background: #fff3d9;
    color: #ff7a00;
}

.notification-item header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.notification-item h3 {
    font-size: 0.88rem;
}

.notification-item time {
    display: block;
    margin-top: 0.12rem;
    color: var(--ref-muted);
    font-size: 0.76rem;
    font-weight: 750;
}

.notification-item p {
    margin: 0.6rem 0 0;
    color: #274d70;
    font-size: 0.84rem;
    line-height: 1.45;
}

.notification-item a {
    display: inline-flex;
    margin-top: 0.65rem;
    color: var(--ref-blue);
    font-size: 0.82rem;
    font-weight: 900;
}

.unread-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--ref-blue);
}

.account-context {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 13rem;
}

.account-context strong,
.account-context small {
    display: block;
}

.account-context small {
    color: #5d7690;
}

.app-shell {
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
}

.nav-rail {
    top: 0;
    z-index: 90;
    height: calc(100vh - 7.8rem);
    overflow: visible;
    padding: 1.6rem 1rem;
    border-right: 1px solid #cbd9e2;
    background: var(--ref-sidebar);
    color: var(--ref-text);
    box-shadow: none;
}

.nav-list {
    gap: 0.45rem;
}

.nav-item,
.nav-module,
.nav-subitem {
    color: var(--ref-text);
    text-decoration: none;
}

.nav-module {
    display: grid;
    appearance: none;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 0.75rem;
    background: transparent;
    cursor: default;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    text-align: left;
    white-space: normal;
}

.nav-module > .material-symbol:first-child {
    align-self: center;
}

.nav-module > .material-symbol:last-of-type {
    justify-self: end;
}

.nav-module small {
    justify-self: end;
}

.service-switcher {
    position: relative;
    z-index: 1;
}

.nav-group {
    display: grid;
    gap: 0.15rem;
}

.nav-group > summary {
    list-style: none;
}

.nav-group > summary::-webkit-details-marker {
    display: none;
}

.nav-group[open] > summary .material-symbol:last-child {
    transform: rotate(180deg);
}

.service-switcher[open] {
    z-index: 100;
}

.service-switcher > summary {
    list-style: none;
}

.service-switcher > summary::-webkit-details-marker {
    display: none;
}

.service-switcher[open] > summary .material-symbol:last-child {
    transform: rotate(180deg);
}

.service-menu {
    position: absolute;
    z-index: 110;
    top: calc(100% + 0.6rem);
    left: 0;
    display: grid;
    width: min(31rem, calc(100vw - 2rem));
    gap: 1rem;
    border: 1px solid var(--ref-border);
    border-radius: 6px;
    padding: 1.15rem;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(5, 39, 69, 0.18);
}

.service-menu strong {
    color: var(--ref-text);
    font-size: 1.05rem;
    line-height: 1.2;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.service-card {
    display: grid;
    min-height: 6.6rem;
    place-items: center;
    align-content: center;
    gap: 0.45rem;
    border: 1px solid var(--ref-border);
    border-radius: 4px;
    background: #ffffff;
    color: var(--ref-text);
    font-size: 0.9rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
}

.service-card:first-child {
    grid-row: span 1;
}

.service-card.is-active,
.service-card:hover,
.service-card:focus {
    border-color: var(--ref-blue);
    color: var(--ref-blue);
}

.service-card .material-symbol {
    width: 2rem;
    height: 2rem;
    color: currentColor;
    font-size: 2rem;
}

.nav-module.is-active {
    border-color: var(--ref-blue);
    background: #ffffff;
}

.nav-module.is-expanded {
    color: var(--ref-text);
    font-weight: 650;
}

.nav-module.is-active .material-symbol:first-child {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    margin-left: -0.75rem;
    place-items: center;
    border-radius: 6px 0 0 6px;
    background: var(--ref-blue);
    color: #ffffff;
}

.nav-item {
    min-height: 2.5rem;
    border-radius: 6px;
    padding: 0 0.65rem;
    color: var(--ref-text);
    font-size: 0.86rem;
    font-weight: 650;
    white-space: normal;
}

.nav-item:hover,
.nav-item.is-active {
    background: transparent;
    color: var(--ref-blue);
}

.nav-item.is-active {
    font-weight: 950;
}

.nav-item.is-disabled {
    cursor: default;
    opacity: 0.68;
}

.nav-item.is-disabled small {
    margin-left: auto;
    color: var(--ref-muted);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.nav-sublist {
    display: grid;
    gap: 0.25rem;
    margin: 0.25rem 0 0.6rem 1.35rem;
    border-left: 1px solid #cbd9e2;
    padding-left: 1.05rem;
}

.nav-subitem {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) 2.1rem;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.15rem;
    color: var(--ref-text);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: normal;
}

.nav-subitem > span:first-child {
    align-self: start;
    margin-top: 0.55rem;
}

.nav-subitem small {
    align-self: start;
    justify-self: end;
    padding-top: 0.18rem;
    white-space: nowrap;
}

.nav-subitem span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #cad8e1;
}

.nav-subitem.is-active {
    color: var(--ref-blue);
    font-weight: 950;
}

.nav-subitem.is-active span {
    background: var(--ref-blue);
}

.nav-subitem.is-disabled {
    cursor: default;
    color: color-mix(in srgb, var(--ref-text) 72%, #8aa0b2);
}

.nav-subitem.is-disabled small,
.nav-group-stub small {
    color: var(--ref-muted);
    font-size: 0.65rem;
    font-weight: 950;
    text-transform: uppercase;
}

.nav-group-stub {
    color: var(--ref-text);
    text-decoration: none;
}

.nav-group-stub.is-disabled {
    cursor: default;
    opacity: 0.82;
}

.nav-separator {
    height: 1px;
    margin: 0.9rem -1rem;
    background: #d5e0e8;
}

.main-pane {
    padding: 1.8rem 1.6rem 2.5rem;
}

.top-app-bar {
    min-height: 2.65rem;
    margin-bottom: 0.85rem;
}

.top-app-bar > div:first-child {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.top-app-bar h1 {
    color: var(--ref-text);
    font-size: 1.35rem;
    line-height: 1;
}

.eyebrow {
    margin: 0;
    color: var(--ref-muted);
    font-size: 0.82rem;
    text-transform: none;
}

.top-search {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) 3rem;
    align-items: stretch;
    border: 1px solid var(--ref-border);
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.top-search input {
    min-height: 2.7rem;
    border: 0;
    border-radius: 0;
}

.top-search button {
    border: 0;
    border-left: 1px solid var(--ref-border);
    background: #ffffff;
    color: var(--ref-blue-dark);
    cursor: pointer;
}

.welcome-panel {
    min-height: 5.25rem;
    border: 0;
    border-radius: 6px;
    padding: 1.15rem 1.25rem;
    background: #ffffff;
    box-shadow: none;
}

.welcome-panel h2 {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
}

.welcome-panel p {
    margin: 0;
}

.dashboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.segmented-control {
    gap: 0.45rem;
    border: 0;
    background: transparent;
    padding: 0;
}

.segment,
.date-range-control {
    min-height: 2.75rem;
    border: 1px solid var(--ref-border);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ref-text);
    padding: 0.65rem 1.15rem;
    font-weight: 900;
}

.segment.is-active {
    border-color: var(--ref-blue);
    background: var(--ref-blue);
    color: #ffffff;
}

.date-range-control {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-width: 18rem;
    justify-content: space-between;
}

.accountant-banner {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto 2rem;
    align-items: center;
    gap: 1rem;
    min-height: 5.25rem;
    border-radius: 6px;
    padding: 0.9rem 1rem;
    background: linear-gradient(105deg, #b9f4f6 0%, #d8edff 48%, #eefbc9 100%);
    box-shadow: var(--ref-shadow);
}

.accountant-banner .material-symbol {
    font-size: 2.2rem;
}

.quiet-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ref-blue-dark);
    cursor: pointer;
}

.billingo-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.billingo-card,
.billingo-panel,
.reference-table-panel,
.reference-toolbar,
.invoice-analytics-panel {
    border: 0;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: var(--ref-shadow);
}

.billingo-card {
    min-height: 10rem;
    overflow: hidden;
}

.billingo-card header,
.billingo-panel .section-heading,
.reference-table-panel .section-heading {
    min-height: 4rem;
    margin: 0;
    padding: 0 1rem;
    background: #ffffff;
}

.billingo-card h2 {
    margin: 0;
    font-size: 1.1rem;
}

.billingo-card > strong {
    display: block;
    margin: 1.4rem 1rem 0.35rem;
    font-size: 2rem;
    line-height: 1;
}

.billingo-card > p {
    margin: 0 1rem 1rem;
    color: var(--ref-muted);
}

.billingo-card footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #e0e8ee;
}

.billingo-card footer span {
    padding: 0.7rem 0.8rem;
    border-right: 1px solid #e0e8ee;
    font-weight: 750;
}

.events-card {
    grid-row: span 2;
}

.events-tabs {
    display: flex;
    gap: 1rem;
    padding: 0 1rem 0.75rem;
    color: var(--ref-muted);
    font-weight: 900;
}

.events-tabs .is-active {
    color: var(--ref-blue);
    border-bottom: 3px solid var(--ref-blue);
}

.event-row {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 1rem;
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    background: var(--ref-muted);
}

.status-dot.tone-success {
    background: var(--ref-green);
}

.status-dot.tone-warning {
    background: var(--ref-orange);
}

.status-dot.tone-danger {
    background: var(--ref-red);
}

.status-dot.tone-primary {
    background: var(--ref-blue);
}

.reference-warning {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 2rem;
    gap: 1rem;
    border: 1px solid #ffa51e;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
}

.reference-warning > .material-symbol {
    width: 100%;
    height: 100%;
    min-height: 5.5rem;
    background: #fff3d9;
    color: #ffa51e;
}

.reference-warning div {
    padding: 1rem 0;
}

.reference-warning strong,
.reference-warning p,
.reference-warning a {
    display: block;
    margin: 0 0 0.45rem;
}

.reference-warning a {
    color: var(--ref-blue-dark);
    font-weight: 900;
}

.invoice-analytics-panel {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(32rem, 36rem);
    gap: 1rem;
    padding: 0;
    overflow: hidden;
}

.invoice-chart-card {
    min-width: 0;
}

.invoice-chart-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.6rem;
    padding: 0 0.75rem;
    background: #ffffff;
    border-bottom: 1px solid #e5edf3;
}

.invoice-chart-card header div {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.invoice-chart-card h2 {
    margin: 0;
    color: var(--ref-text);
    font-size: 0.95rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-chart-wrap {
    min-height: 13.1rem;
}

.invoice-browser-line-chart,
.invoice-browser-bar-chart {
    min-height: 9.7rem;
}

.chart-bar-pair.is-single-series {
    grid-template-columns: minmax(1rem, 3.25rem);
}

.chart-area,
.invoice-chart-area {
    min-height: 8rem;
}

.invoice-chart-area {
    min-width: 0;
    overflow-x: auto;
}

.fake-chart {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
    gap: 0.7rem;
    height: 8rem;
    border-bottom: 2px solid #d7e2ea;
}

.fake-chart span {
    display: block;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, rgba(21, 87, 229, 0.9), rgba(21, 87, 229, 0.18));
}

.invoice-mini-chart {
    display: grid;
    grid-template-columns: repeat(var(--invoice-chart-columns, 12), minmax(3.75rem, 1fr));
    align-items: end;
    min-width: var(--invoice-chart-min-width, 44rem);
    min-height: 9.1rem;
    border-bottom: 2px solid #d7e2ea;
}

.invoice-mini-chart span {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 9.1rem;
    border-left: 1px solid #d8e4ec;
    padding: 0 0.55rem 1.35rem;
}

.invoice-mini-chart span:first-child {
    border-left: 0;
}

.invoice-mini-chart i {
    display: block;
    height: var(--bar-height, 4%);
    min-height: 0.35rem;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, rgba(21, 87, 229, 0.92), rgba(21, 87, 229, 0.2));
}

.invoice-mini-chart strong {
    position: absolute;
    right: 0.15rem;
    bottom: 0.15rem;
    left: 0.15rem;
    overflow: hidden;
    color: var(--ref-text);
    font-size: 0.6rem;
    font-weight: 900;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-mini-chart strong.is-muted-label {
    opacity: 0;
}

.dashboard-reference {
    display: grid;
    gap: 0.75rem;
}

.dashboard-welcome {
    min-height: 4.8rem;
    border-radius: 6px;
    padding: 1.05rem 1rem;
    background: #ffffff;
}

.dashboard-welcome h2 {
    margin: 0 0 0.28rem;
    color: var(--ref-text);
    font-size: 1.15rem;
    line-height: 1.1;
}

.dashboard-welcome p {
    margin: 0;
    color: var(--ref-text);
    font-size: 0.82rem;
}

.dashboard-reference-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.period-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.period-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    border: 1px solid var(--ref-border);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ref-text);
    padding: 0 1.05rem;
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
}

.period-tab.is-active {
    border-color: var(--ref-blue);
    background: var(--ref-blue);
    color: #ffffff;
}

.dashboard-date-range {
    display: inline-grid;
    grid-template-columns: minmax(7.8rem, auto) auto minmax(7.8rem, auto) 2.6rem;
    align-items: center;
    min-height: 2.6rem;
    overflow: hidden;
    border: 1px solid var(--ref-border);
    border-radius: 6px;
    background: #ffffff;
}

.dashboard-date-range.is-active {
    border-color: var(--ref-blue);
}

.dashboard-date-range label {
    display: grid;
}

.dashboard-date-range label span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.dashboard-date-range input {
    min-height: 2.55rem;
    border: 0;
    border-radius: 0;
    padding: 0 0.55rem;
    color: var(--ref-text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 850;
}

.dashboard-date-range > span {
    color: var(--ref-muted);
    font-weight: 900;
}

.dashboard-date-range button {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border: 0;
    border-left: 1px solid var(--ref-border);
    background: #ffffff;
    color: var(--ref-blue-dark);
    cursor: pointer;
}

.dashboard-new-invoice {
    justify-content: flex-start;
    min-height: 2.6rem;
    min-width: 9.2rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.split-action {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}

.split-action .dashboard-new-invoice {
    border-radius: 6px 0 0 6px;
}

.split-action details {
    position: relative;
}

.split-action-toggle {
    display: grid;
    width: 3rem;
    min-height: 2.6rem;
    place-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 0 6px 6px 0;
    background: var(--ref-blue);
    color: #ffffff;
    cursor: pointer;
    list-style: none;
}

.split-action-toggle::-webkit-details-marker {
    display: none;
}

.split-action-menu {
    position: absolute;
    z-index: 150;
    top: calc(100% + 0.15rem);
    right: 0;
    display: grid;
    min-width: 10rem;
    overflow: hidden;
    border-radius: 0 0 6px 6px;
    background: var(--ref-blue);
    box-shadow: 0 10px 24px rgba(5, 39, 69, 0.2);
}

.split-action-menu a {
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    padding: 0.75rem 1rem;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
}

.split-action-menu a:hover,
.split-action-menu a:focus {
    background: rgba(255, 255, 255, 0.12);
}

.accountant-access-banner {
    display: grid;
    grid-template-columns: 2.55rem minmax(0, 1fr) auto 2rem;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.85rem;
    overflow: hidden;
    border-radius: 6px;
    padding: 0.75rem 0.85rem;
    background: linear-gradient(110deg, #b5f4f5 0%, #d8eeff 48%, #ecfac2 100%);
    box-shadow: var(--ref-shadow);
}

.is-session-dismissed {
    display: none !important;
}

.accountant-access-banner > .material-symbol {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    color: var(--ref-blue-dark);
    font-size: 2.25rem;
}

.accountant-access-banner strong {
    color: var(--ref-text);
    font-size: 1rem;
    line-height: 1.2;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 13.2rem;
    gap: 0.75rem;
    align-content: start;
}

.dashboard-stat-card,
.dashboard-events-card,
.dashboard-chart-card {
    border-radius: 6px;
    background: #ffffff;
    box-shadow: var(--ref-shadow);
}

.dashboard-stat-card {
    display: grid;
    grid-template-rows: 3.6rem minmax(0, 1fr) auto;
    min-height: 13.2rem;
    overflow: visible;
}

.dashboard-stat-card.has-ring-chart {
    grid-template-rows: 3.6rem minmax(8rem, 1fr) auto;
}

.dashboard-stat-card header,
.dashboard-events-card header,
.dashboard-chart-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 3.6rem;
    min-height: 3.6rem;
    padding: 0 0.75rem;
    background: #f7f7f7;
    border-bottom: 1px solid #e5edf3;
}

.dashboard-stat-card header div,
.dashboard-chart-card header div {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.dashboard-stat-card h2,
.dashboard-events-card h2,
.dashboard-chart-card h2 {
    margin: 0;
    color: var(--ref-text);
    font-size: 0.95rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-events-card h2 {
    white-space: normal;
}

.stat-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.stat-icon {
    display: grid;
    width: 1.3rem;
    height: 1.3rem;
    place-items: center;
    border-radius: 999px;
    background: var(--ref-blue);
    color: #ffffff;
}

.stat-icon .material-symbol {
    width: 100%;
    height: 100%;
    font-size: 0.85rem;
}

.tone-orange .stat-icon,
.stat-icon.tone-orange,
.dashboard-stat-card.tone-orange .stat-icon {
    background: #ff7a00;
}

.gross-switch,
.chart-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ref-text);
    font-size: 0.68rem;
    font-weight: 750;
    text-decoration: none;
}

.gross-switch i,
.chart-switch i {
    display: block;
    position: relative;
    width: 1.8rem;
    height: 1rem;
    border: 1px solid #bfd0dc;
    border-radius: 999px;
    background: #dce7ef;
}

.gross-switch i::after,
.chart-switch i::after {
    content: "";
    position: absolute;
    top: 0.1rem;
    left: 0.12rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(5, 39, 69, 0.22);
}

.gross-switch.is-active i,
.chart-switch.is-active i,
.dashboard-stat-card.tone-primary .gross-switch.is-active i {
    border-color: var(--ref-blue);
    background: var(--ref-blue);
}

.gross-switch.is-active i::after,
.chart-switch.is-active i::after,
.dashboard-stat-card.tone-primary .gross-switch.is-active i::after {
    left: 0.85rem;
}

.dashboard-stat-card.is-message {
    align-content: stretch;
}

.stat-body {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 0.75rem;
}

.dashboard-stat-card.has-ring-chart .stat-body {
    grid-template-columns: minmax(0, 1fr) 7rem;
    align-items: center;
    gap: 0.75rem;
}

.stat-body strong {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ref-text);
    font-size: clamp(1.5rem, 2.25vw, 2.1rem);
    line-height: 1;
}

.stat-help {
    display: inline-grid;
    width: 1.05rem;
    height: 1.05rem;
    place-items: center;
    border: 1px solid var(--ref-text);
    border-radius: 999px;
    color: var(--ref-text);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
}

.revenue-ring-chart {
    position: relative;
    width: 5.8rem;
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 50%;
    background: conic-gradient(var(--ring-stops));
}

.revenue-ring-chart::after {
    content: "";
    position: absolute;
    inset: 1.2rem;
    border-radius: inherit;
    background: #ffffff;
}

.stat-body p {
    margin: 0.55rem 0 0;
    color: #7f97aa;
    font-size: 0.78rem;
}

.stat-message {
    margin: 0;
    max-width: 23rem;
    color: var(--ref-text);
    font-size: 0.78rem;
    line-height: 1.45;
}

.stat-link {
    margin: 0.55rem 0 0;
    color: var(--ref-text);
    font-size: 0.78rem;
    font-weight: 900;
}

.card-open-icon {
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    color: var(--ref-blue);
    text-decoration: none;
}

.card-open-icon.material-symbol,
.card-open-icon .material-symbol {
    font-size: 1.05rem;
}

.stat-footer {
    display: grid;
    border-top: 1px solid #e2e8ed;
    border-radius: 0 0 6px 6px;
    background: #ffffff;
}

.stat-footer.columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-footer.columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.footer-metric {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.95rem;
    border-right: 1px solid #e2e8ed;
    padding: 0 0.6rem;
    color: var(--ref-text);
    font-size: 0.78rem;
    font-weight: 750;
}

.footer-metric[data-tooltip]::before,
.footer-metric[data-tooltip]::after {
    position: absolute;
    left: 50%;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(0.35rem);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.footer-metric[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 0.55rem);
    width: max-content;
    max-width: 15rem;
    border-radius: 4px;
    padding: 0.45rem 0.55rem;
    background: #ffffff;
    color: var(--ref-text);
    box-shadow: 0 4px 12px rgba(5, 39, 69, 0.22);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
}

.footer-metric[data-tooltip]::after {
    content: "";
    bottom: calc(100% + 0.25rem);
    border-width: 0.35rem 0.35rem 0;
    border-style: solid;
    border-color: #ffffff transparent transparent;
}

.footer-metric[data-tooltip]:hover::before,
.footer-metric[data-tooltip]:hover::after,
.footer-metric[data-tooltip]:focus::before,
.footer-metric[data-tooltip]:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.footer-metric:last-child {
    border-right: 0;
}

.footer-metric .material-symbol {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    font-size: 0.8rem;
}

.footer-metric.tone-success .material-symbol {
    color: #1fc75f;
}

.footer-metric.tone-primary .material-symbol {
    color: #1aa8ff;
}

.footer-metric.tone-danger .material-symbol {
    color: #ff5d66;
}

.footer-metric.tone-orange .material-symbol {
    color: #ff7a00;
}

.dashboard-events-card {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-self: start;
    height: 27.15rem;
    max-height: 27.15rem;
    min-height: 27.15rem;
    overflow: hidden;
}

.dashboard-events-card .events-tabs {
    padding: 0.75rem 0.95rem 0.45rem;
    font-size: 0.78rem;
}

.dashboard-events-card p {
    margin: 0;
    padding: 0.75rem 0.95rem 0.42rem;
    color: var(--ref-text);
    font-size: 0.78rem;
    line-height: 1.45;
}

.dashboard-events-card a {
    padding: 0 0.95rem;
    color: var(--ref-text);
    font-size: 0.78rem;
    font-weight: 900;
}

.events-tabs a {
    padding: 0;
    color: var(--ref-muted);
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.events-tabs a.is-active {
    color: var(--ref-blue);
    border-bottom: 3px solid var(--ref-blue);
}

.event-list {
    min-height: 0;
    overflow: auto;
}

.event-document-row {
    display: grid;
    grid-template-columns: 3rem 2.1rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
    border-top: 1px solid #dce6ed;
    padding: 0.58rem 0.95rem !important;
    text-decoration: none;
}

.event-document-row time {
    color: #ff5d66;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.1;
}

.event-status-icon {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 999px;
    background: var(--ref-blue);
    color: #ffffff;
}

.event-status-icon .material-symbol {
    font-size: 1rem;
}

.event-document-row strong,
.event-document-row small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-document-row small {
    margin-top: 0.18rem;
    color: var(--ref-text);
    font-weight: 650;
}

.event-amount {
    grid-column: 3;
    text-align: left;
}

.event-full-list {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    border-top: 1px solid #dce6ed;
}

.events-illustration {
    display: grid;
    grid-template-columns: 2.25rem 2.25rem;
    align-content: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.1rem;
    background: #eef3fb;
}

.events-illustration .material-symbol {
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid #0d365d;
    border-radius: 6px;
    background: #ffffff;
    color: #0d365d;
    font-size: 1.25rem;
}

.dashboard-chart-card {
    overflow: hidden;
}

.dashboard-chart-card header {
    background: #ffffff;
}

.dashboard-chart-wrap {
    position: relative;
    min-height: 12.2rem;
    overflow-x: auto;
    padding: 2.15rem 1.15rem 1.25rem;
}

.chart-legend {
    position: absolute;
    top: 0.85rem;
    right: 1.5rem;
    display: flex;
    gap: 0.9rem;
    font-size: 0.78rem;
    font-weight: 900;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.chart-legend i {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
}

.income-dot {
    background: var(--ref-blue);
}

.expense-dot {
    background: #ff7a00;
}

.dashboard-line-chart {
    position: relative;
    min-width: var(--chart-min-width, 56rem);
    min-height: 9.7rem;
    border-bottom: 2px solid #dde6ed;
    background: repeating-linear-gradient(90deg, transparent 0, transparent calc((100% / var(--chart-columns, 12)) - 1px), #cdd9e2 calc((100% / var(--chart-columns, 12)) - 1px), #cdd9e2 calc(100% / var(--chart-columns, 12)));
}

.line-chart-svg {
    display: block;
    width: 100%;
    height: 8.45rem;
    overflow: visible;
}

.income-fill {
    fill: rgba(21, 87, 229, 0.24);
}

.income-line,
.expense-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.income-line {
    stroke: var(--ref-blue);
    stroke-width: 4;
}

.expense-line {
    stroke: #ff7a00;
    stroke-width: 3;
}

.income-point,
.expense-point {
    vector-effect: non-scaling-stroke;
}

.income-point {
    fill: var(--ref-blue);
    stroke: var(--ref-blue);
}

.expense-point {
    fill: #ff7a00;
    stroke: #ff7a00;
}

.chart-label-row {
    display: grid;
    grid-template-columns: repeat(var(--chart-columns, 12), minmax(4.5rem, 1fr));
    min-height: 1.25rem;
}

.chart-month {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 9.1rem;
    padding: 0 0.65rem 1.5rem;
    border-left: 1px solid #cdd9e2;
}

.dashboard-bar-chart {
    display: grid;
    grid-template-columns: repeat(var(--chart-columns, 12), minmax(4.5rem, 1fr));
    align-items: end;
    min-width: var(--chart-min-width, 56rem);
    min-height: 9.7rem;
    border-bottom: 2px solid #dde6ed;
}

.chart-bar-pair {
    display: grid;
    grid-template-columns: minmax(0.8rem, 3rem) minmax(0.8rem, 3rem);
    align-items: end;
    justify-content: center;
    gap: 0.18rem;
    height: 7.5rem;
}

.income-bar,
.expense-bar {
    display: block;
    min-height: 0;
    border-radius: 6px 6px 0 0;
}

.income-bar {
    background: var(--ref-blue);
}

.expense-bar {
    background: #ff7a00;
}

.chart-month strong,
.chart-label-row strong {
    position: absolute;
    right: 0.25rem;
    bottom: 0.15rem;
    left: 0.25rem;
    overflow: hidden;
    color: var(--ref-text);
    font-size: 0.62rem;
    font-weight: 900;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-month strong.is-muted-label,
.chart-label-row strong.is-muted-label {
    opacity: 0;
}

.chart-label-row strong {
    position: static;
    padding: 0.2rem 0.25rem 0;
}

.analytics-stack {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: 1rem;
    background: linear-gradient(180deg, #f7fbfd 0%, #ffffff 100%);
}

.analytics-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.analytics-metric,
.analytics-total {
    position: relative;
    display: grid;
    align-content: start;
    min-width: 0;
    border: 1px solid #dce9f1;
    border-radius: 6px;
    background: #ffffff;
}

.analytics-metric {
    min-height: 6.1rem;
    padding: 0.75rem 0.65rem 0.7rem;
}

.analytics-metric::before,
.analytics-total::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    border-radius: 6px 0 0 6px;
    background: var(--ref-blue);
}

.analytics-metric .material-symbol {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    background: #edf6ff;
    color: var(--ref-blue);
    font-size: 1.12rem;
}

.analytics-metric small,
.analytics-total small {
    min-width: 0;
    margin-top: 0.55rem;
    color: var(--ref-muted);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-metric strong,
.analytics-total strong {
    min-width: 0;
    margin-top: 0.18rem;
    color: var(--ref-text);
    font-size: clamp(1.02rem, 0.95vw, 1.24rem);
    font-weight: 950;
    line-height: 1.05;
    overflow-wrap: normal;
    white-space: nowrap;
}

.analytics-metric.tone-success::before {
    background: var(--ref-green);
}

.analytics-metric.tone-success .material-symbol {
    background: #e8fbef;
    color: var(--ref-green);
}

.analytics-metric.tone-primary::before {
    background: var(--ref-blue);
}

.analytics-metric.tone-danger::before {
    background: var(--ref-red);
}

.analytics-metric.tone-danger .material-symbol {
    background: #fff0f1;
    color: var(--ref-red);
}

.analytics-total {
    grid-template-columns: 2.7rem minmax(0, 1fr);
    column-gap: 0.7rem;
    align-items: center;
    min-height: 5.35rem;
    padding: 0.85rem 0.9rem 0.85rem 1rem;
    background: #f2f7fa;
}

.analytics-total .material-symbol {
    grid-row: span 2;
    display: inline-grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border-radius: 999px;
    background: #fff6e8;
    color: var(--ref-orange);
    font-size: 1.35rem;
}

.analytics-total::before {
    background: var(--ref-orange);
}

.analytics-total small {
    margin-top: 0;
}

.analytics-total strong {
    font-size: clamp(1.05rem, 1.1vw, 1.38rem);
}

.reference-toolbar {
    padding: 1rem;
}

.reference-toolbar .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.export-workflow .reference-toolbar .form-grid {
    grid-template-columns: minmax(0, 1fr);
}

.export-criteria-section {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
    padding: 0.85rem;
    border: 1px solid #dbe7ef;
    border-radius: 6px;
    background: #f8fbfd;
}

.export-criteria-section legend {
    padding: 0 0.35rem;
    color: #5f7487;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.export-criteria-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.export-date-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.export-subset-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
    min-width: 0;
}

.export-subset-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 2.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #dbe7ef;
    border-radius: 6px;
    background: #ffffff;
    color: var(--ref-text);
    font-size: 0.86rem;
    font-weight: 850;
}

.export-subset-option input[type="radio"] {
    width: 1.2rem;
    min-width: 1.2rem;
    height: 1.2rem;
    min-height: 1.2rem;
    flex: 0 0 1.2rem;
    margin: 0;
    padding: 0;
}

.export-subset-option span {
    min-width: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.export-subset-option.is-active {
    border-color: var(--ref-blue);
    background: #eef6ff;
    color: var(--ref-blue);
}

.export-search-field {
    margin-top: 0.15rem;
}

.invoice-filter-toolbar .form-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.partner-list-header,
.partner-filter-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 6px;
    background: #ffffff;
}

.partner-search-form {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) 3rem;
    min-width: min(28rem, 100%);
}

.partner-search-form input {
    border-radius: 6px 0 0 6px;
}

.partner-search-form button {
    display: grid;
    place-items: center;
    border: 1px solid var(--ref-border);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: #ffffff;
    color: var(--ref-text);
}

.partner-bulk-select {
    margin-right: auto;
}

.partner-bulk-select .button {
    min-width: 14.5rem;
    justify-content: space-between;
}

.partner-filter-strip {
    margin-top: -0.45rem;
}

.partner-table {
    min-width: 78rem;
}

.partner-table td:first-child,
.partner-table th:first-child {
    width: 2.75rem;
}

.partner-type-icon {
    display: inline-grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    color: #6e2c91;
    font-size: 1.1rem;
}

.partner-type-icon .material-symbol {
    font-size: 1.2rem;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.partner-flow-panel {
    display: grid;
    gap: 1.1rem;
    padding: 1.25rem;
    border-radius: 6px;
    background: #ffffff;
}

.partner-import-panel {
    gap: 0;
    padding: 0;
}

.partner-import-template-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 5.2rem;
    padding: 1rem 1.25rem;
}

.partner-import-file-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.6rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #d8e3ea;
}

.partner-import-file-inner {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 34rem);
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.45rem;
    width: min(41rem, 100%);
}

.partner-import-file-inner > label {
    justify-self: end;
    color: var(--ref-text);
    font-weight: 900;
    text-align: right;
}

.partner-import-hint {
    grid-column: 2;
    max-width: 34rem;
    color: #53657a;
    font-size: 0.93rem;
    line-height: 1.35;
}

.partner-import-hint p {
    margin: 0.15rem 0 0;
}

.partner-template-row,
.partner-file-row {
    display: flex;
    align-items: end;
    justify-content: flex-start;
    gap: 0.75rem;
}

.partner-template-row {
    align-items: center;
    margin-bottom: 1.1rem;
}

.partner-file-row label {
    width: auto;
    min-width: 7.25rem;
    text-align: right;
}

.partner-bulk-inner,
.partner-flow-copy {
    width: min(34rem, 100%);
    margin: 0 auto;
    color: var(--ref-text);
}

.partner-flow-copy p,
.partner-info-note p {
    margin: 0.25rem 0 0;
    color: #42566b;
}

.partner-bulk-form {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.1rem;
}

.partner-info-note {
    grid-template-columns: 3rem minmax(0, 1fr);
    width: 100%;
    padding: 0;
}

.partner-file-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.75rem;
    width: 100%;
}

.partner-file-control input {
    border-radius: 6px 0 0 6px;
}

.partner-file-control .button {
    border-radius: 0 6px 6px 0;
}

.partner-wide-action {
    width: 100%;
    margin-top: 1rem;
}

.partner-import-action {
    min-width: 7rem;
}

.partner-sticky-actions {
    justify-content: flex-end;
    margin-top: 0.25rem;
}

.partner-import-actions {
    justify-content: center;
    gap: 0.5rem;
}

.align-end {
    justify-content: flex-end;
}

.quick-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.55rem;
    color: var(--ref-text);
    font-size: 0.92rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.quick-filter-button .material-symbol {
    display: inline-grid;
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 2.55rem;
    place-items: center;
    border: 1px solid var(--ref-border);
    border-radius: 6px;
    background: #ffffff;
    font-size: 1.35rem;
}

.quick-filter-button strong {
    color: var(--ref-text);
    font: inherit;
}

.quick-filter-button.tone-success .material-symbol {
    color: #1fc75f;
}

.quick-filter-button.tone-primary .material-symbol {
    color: var(--ref-blue);
}

.quick-filter-button.tone-danger .material-symbol {
    color: #ff5d66;
}

.quick-filter-button.is-active .material-symbol {
    border-color: currentColor;
    background: #eef5ff;
}

.reference-table-panel {
    overflow: hidden;
    border-radius: 6px;
    background: #ffffff;
}

.reference-table-panel table,
.dense-table {
    min-width: 86rem;
}

.reference-table-panel .section-heading {
    border-bottom: 1px solid #e0e8ee;
}

th {
    color: var(--ref-muted);
    font-size: 0.86rem;
    text-transform: none;
}

.sort-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem;
    color: inherit;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.sort-link.align-end {
    justify-content: flex-end;
    width: 100%;
}

.sort-link:hover,
.sort-link.is-active {
    color: var(--ref-text);
}

.sort-glyph {
    position: relative;
    display: inline-block;
    width: 0.65rem;
    height: 1rem;
    flex: 0 0 0.65rem;
}

.sort-glyph::before,
.sort-glyph::after {
    position: absolute;
    left: 0;
    color: #8da2b4;
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1;
}

.sort-glyph::before {
    top: -0.02rem;
    content: "↑";
}

.sort-glyph::after {
    bottom: -0.02rem;
    content: "↓";
}

.sort-link.is-asc .sort-glyph::before,
.sort-link.is-desc .sort-glyph::after {
    color: var(--ref-blue);
}

td {
    height: 4.1rem;
    font-size: 0.92rem;
}

.document-cell {
    min-width: 12rem;
}

.document-cell small {
    display: block;
    margin-top: 0.18rem;
    overflow: hidden;
    color: var(--ref-muted);
    font-size: 0.72rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amount-cell {
    color: var(--ref-text);
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
}

.amount-cell.is-native-total {
    font-weight: 950;
}

.amount-cell small,
.partner-cell small,
.due-date-note {
    display: block;
    margin-top: 0.16rem;
    color: var(--ref-muted);
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 750;
    text-align: inherit;
}

.select-column {
    width: 3rem;
    text-align: center;
}

.select-column input {
    margin: 0 auto;
}

.invoice-list-row td {
    height: 4.35rem;
}

.invoice-type-icon {
    display: inline-grid;
    width: 3.35rem;
    height: 3.35rem;
    place-items: center;
    border-radius: 6px;
    background: #d8f4fb;
    color: #087194;
}

.invoice-type-icon.is-fee-request {
    background: #ffe2a8;
    color: #b16b00;
}

.invoice-type-icon > span {
    position: relative;
    display: block;
    width: 1.45rem;
    height: 1.65rem;
    border: 2px solid currentColor;
    border-radius: 2px;
}

.invoice-type-icon > span::before,
.invoice-type-icon > span::after {
    position: absolute;
    content: "";
}

.invoice-type-icon > span::before {
    top: -2px;
    right: -2px;
    width: 0.55rem;
    height: 0.55rem;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    background: color-mix(in srgb, currentColor 12%, #ffffff);
}

.invoice-type-icon.is-electronic > span::after {
    content: "e";
    top: 0.42rem;
    left: 0.34rem;
    color: currentColor;
    font-family: "Space Grotesk", Manrope, Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1;
}

.invoice-type-icon.is-invoice > span::after {
    top: 0.52rem;
    left: 0.28rem;
    width: 0.76rem;
    height: 0.44rem;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.invoice-type-icon.is-fee-request > span {
    width: 1.65rem;
    height: 1.25rem;
    border-radius: 2px;
}

.invoice-type-icon.is-fee-request > span::before {
    top: -0.32rem;
    right: auto;
    left: 0.18rem;
    width: 0.88rem;
    height: 0.5rem;
    border: 2px solid currentColor;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
}

.invoice-type-icon.is-fee-request > span::after {
    top: 0.38rem;
    left: 0.28rem;
    width: 0.82rem;
    height: 0.38rem;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.invoice-document-cell {
    min-width: 15rem;
}

.invoice-document-cell .text-link {
    color: var(--ref-text);
    font-size: 0.96rem;
}

.source-badge {
    display: inline-grid;
    min-width: 1.28rem;
    height: 1.28rem;
    margin-right: 0.28rem;
    place-items: center;
    border-radius: 4px;
    background: #72d13f;
    color: #ffffff;
    font-size: 0;
    vertical-align: middle;
}

.source-badge::before {
    content: "work";
    font-family: "Material Symbols Outlined", "Segoe UI Symbol", sans-serif;
    font-size: 1rem;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    line-height: 1;
}

.partner-cell {
    min-width: 15rem;
}

.partner-cell strong {
    display: block;
    overflow: hidden;
    max-width: 18rem;
    color: var(--ref-text);
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partner-cell small {
    max-width: 18rem;
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-payment-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 7.8rem;
    min-height: 2rem;
    border-radius: 999px;
    padding: 0 0.8rem;
    background: #e3efff;
    color: var(--ref-blue);
    font-weight: 950;
    white-space: nowrap;
}

.invoice-payment-chip .material-symbol {
    width: 1.18rem;
    height: 1.18rem;
    font-size: 1.18rem;
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}

.invoice-payment-chip.tone-success {
    background: #d9fbe7;
    color: #119844;
}

.invoice-payment-chip.tone-danger {
    background: #ffe6eb;
    color: #d33847;
}

.invoice-payment-chip.tone-warning {
    background: #fff0d9;
    color: #b35b00;
}

.invoice-payment-chip.is-muted {
    background: #eef3f7;
    color: #6f8598;
}

.indicator-cell {
    width: 4.1rem;
    text-align: center;
}

.invoice-indicator {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: #8ba0b1;
}

.invoice-indicator.is-ok {
    color: #7d96aa;
}

.invoice-indicator .material-symbol {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
}

.issued-cell {
    min-width: 7rem;
    color: var(--ref-text);
    font-weight: 850;
    white-space: nowrap;
}

.amount-heading {
    text-align: right;
}

.invoice-row-actions {
    min-width: 9.5rem;
    white-space: nowrap;
}

.invoice-action-button,
.invoice-more-button {
    display: inline-grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    color: var(--ref-text);
    text-decoration: none;
    vertical-align: middle;
}

.invoice-action-button {
    border: 1px solid var(--ref-border);
    border-radius: 6px;
    background: #ffffff;
}

.invoice-more-button {
    color: var(--ref-blue);
}

.invoice-action-button .material-symbol,
.invoice-more-button .material-symbol {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 1.35rem;
}

.issued-heading small {
    display: block;
    margin-top: 0.12rem;
    color: var(--ref-blue);
    font-size: 0.66rem;
    font-weight: 850;
    text-transform: none;
}

.pager {
    min-height: 3.85rem;
    margin: 0;
    border-top: 1px solid #e0e8ee;
    padding: 0.6rem 1rem;
    color: var(--ref-muted);
}

.pager span:not(.material-symbol) {
    color: var(--ref-muted);
    font-size: 0.92rem;
    font-weight: 900;
}

.pager-button {
    display: inline-grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border: 1px solid var(--ref-border);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ref-text);
    text-decoration: none;
}

.pager-button .material-symbol {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.2rem;
}

.pager-button.is-disabled {
    opacity: 0.42;
}

tbody tr:nth-child(even) {
    background: #f7fafc;
}

.button {
    border-radius: 6px;
}

.button.is-primary {
    background: var(--ref-blue);
}

.button.is-secondary {
    border: 1px solid var(--ref-border);
    background: #ffffff;
    color: var(--ref-text);
}

.status-chip {
    border-radius: 999px;
    background: #e9f3ff;
    color: var(--ref-blue);
}

.status-chip.is-muted {
    background: #eef3f7;
    color: #6f8598;
}

.status-chip.tone-success {
    background: #def8e9;
    color: #12723a;
}

.status-chip.tone-primary {
    background: #e3efff;
    color: var(--ref-blue);
}

.status-chip.tone-danger {
    background: #ffe7ea;
    color: #c92d39;
}

.status-chip.tone-warning {
    background: #fff0d9;
    color: #b35b00;
}

.data-surface,
.auth-panel,
.empty-state,
.copy-box,
.snackbar,
.settings-list div,
.detail-grid div {
    border: 0;
    border-radius: 6px;
    background: #ffffff;
    color: var(--ref-text);
    box-shadow: var(--ref-shadow);
}

.settings-list div,
.detail-grid div {
    border: 1px solid #d8e3ea;
    box-shadow: none;
}

.settings-list dt,
.detail-grid dt,
label {
    color: var(--ref-text);
}

.settings-list dd,
.detail-grid dd,
.muted-copy,
.empty-state p {
    color: #5f7487;
}

input,
select,
textarea {
    border: 1px solid #b9c9d5;
    background: #ffffff;
    color: var(--ref-text);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: #eef5f7;
    color: #7890a2;
}

.settings-list {
    gap: 0.65rem;
}

.settings-list div {
    min-height: 3.15rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
}

.settings-list dt {
    font-size: 0.9rem;
}

.settings-list dd {
    font-size: 0.9rem;
}

.data-surface > .section-heading:first-child {
    margin: -1rem -1rem 0.85rem;
    border-bottom: 1px solid #e0e8ee;
    border-radius: 6px 6px 0 0;
    padding: 0.9rem 1rem;
    background: #ffffff;
}

.data-surface .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-surface .form-grid-wide {
    grid-column: 1 / -1;
}

.snackbar {
    border: 1px solid #d8e3ea;
}

.snackbar.is-error {
    border-color: #ffc7c7;
    background: #fff4f4;
    color: #a32424;
}

.sticky-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.9rem 0 0;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0), #f8fafc 34%);
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.metric-card strong.tone-success {
    color: #138a4d;
}

.metric-card strong.tone-danger {
    color: #b42318;
}

.metric-card strong.tone-warning {
    color: #a15c07;
}

.export-workflow .detail-grid dd {
    overflow-wrap: anywhere;
}

.document-detail-surface {
    padding-bottom: 0.9rem;
}

.document-summary .summary-grid.is-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.document-payment-card.tone-success {
    border-color: #bfe9cf;
    background: #f0fbf4;
}

.document-payment-card.tone-warning {
    border-color: #f4d19a;
    background: #fff8eb;
}

.document-payment-card.tone-danger {
    border-color: #ffc7c7;
    background: #fff4f4;
}

.document-detail-surface > .section-heading:first-child {
    min-height: auto;
    margin-bottom: 0.65rem;
    padding-block: 0.7rem;
}

.document-detail-surface > .section-heading:first-child h2 {
    font-size: 1rem;
}

.document-evidence-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid #d8e3ea;
    border-radius: 6px;
    background: #ffffff;
}

.document-evidence-grid div {
    min-height: 0;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-right: 1px solid #e1e9ef;
    border-bottom: 1px solid #e1e9ef;
    border-radius: 0;
    background: #ffffff;
}

.document-evidence-grid .document-empty-cell {
    background: #fbfdff;
}

.document-evidence-grid div:nth-child(3n) {
    border-right: 0;
}

.document-evidence-grid .detail-grid-wide {
    grid-column: 1 / -1;
    border-right: 0;
}

.document-evidence-grid dt {
    font-size: 0.74rem;
    line-height: 1.2;
}

.document-evidence-grid dd {
    margin-top: 0.15rem;
    color: var(--ref-text);
    font-size: 0.9rem;
    line-height: 1.25;
}

.document-audit-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.document-audit-grid div:nth-child(3n) {
    border-right: 1px solid #e1e9ef;
}

.document-audit-grid div:nth-child(6n) {
    border-right: 0;
}

.document-lines-table th,
.document-lines-table td {
    padding-block: 0.55rem;
}

.parallel-money {
    min-width: 8rem;
}

.parallel-money strong,
.parallel-money small {
    display: block;
}

.parallel-money strong {
    color: var(--ref-text);
    font-size: 0.92rem;
}

.parallel-money small {
    margin-top: 0.15rem;
    color: #6f8598;
    font-size: 0.76rem;
}

.settings-workbench {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1rem;
}

.settings-subnav {
    position: sticky;
    top: 1rem;
    display: grid;
    align-self: start;
    gap: 1rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.settings-subnav h2,
.settings-nav-block h3 {
    margin: 0;
}

.settings-subnav h2 {
    color: var(--ref-text);
    font-size: 1rem;
    font-weight: 900;
}

.settings-nav-block {
    display: grid;
    gap: 0;
}

.settings-nav-block h3 {
    margin-bottom: 0.45rem;
    color: #6e89a1;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.settings-subnav a {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr) 1.1rem;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0 0.8rem;
    border-radius: 0;
    background: #ffffff;
    color: var(--ref-text);
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
}

.settings-nav-block a:nth-of-type(1) {
    border-radius: 6px 6px 0 0;
}

.settings-nav-block a:last-child {
    border-radius: 0 0 6px 6px;
}

.settings-nav-block a:nth-of-type(1):last-child {
    border-radius: 6px;
}

.settings-subnav a .material-symbol {
    color: #6e89a1;
    font-size: 1rem;
}

.settings-subnav a .material-symbol:last-child {
    justify-self: end;
    color: var(--ref-text);
}

.settings-subnav a .material-symbol:first-child:last-child {
    justify-self: auto;
}

.settings-subnav a:hover,
.settings-subnav a:focus {
    background: #edf6ff;
    color: var(--ref-blue);
}

.settings-panels {
    display: grid;
    gap: 1rem;
}

.settings-personal-grid {
    display: grid;
    gap: 1rem;
}

.settings-personal-grid .form-grid {
    padding: 0;
}

@media (max-width: 1100px) {
    .billingo-dashboard-grid,
    .invoice-analytics-panel,
    .dashboard-main-grid,
    .dashboard-reference-toolbar,
    .status-grid,
    .settings-workbench {
        grid-template-columns: 1fr;
    }

    .settings-subnav {
        position: static;
    }

    .document-evidence-grid,
    .document-audit-grid,
    .document-summary .summary-grid.is-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-evidence-grid div:nth-child(3n),
    .document-audit-grid div:nth-child(3n),
    .document-audit-grid div:nth-child(6n) {
        border-right: 1px solid #e1e9ef;
    }

    .document-evidence-grid div:nth-child(2n),
    .document-audit-grid div:nth-child(2n) {
        border-right: 0;
    }

    .invoice-filter-toolbar .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-date-range,
    .dashboard-new-invoice,
    .dashboard-create-menu {
        width: 100%;
    }

    .split-action .dashboard-new-invoice {
        justify-content: flex-start;
    }
}

@media (max-width: 820px) {
    :root {
        --rail-width: 16.5rem;
    }

    .nav-item {
        justify-content: flex-start;
        padding: 0 0.65rem;
        font-size: 0.92rem;
    }

    .nav-item .material-symbol {
        width: 1.5rem;
    }
}

@media (max-width: 680px) {
    :root {
        --rail-width: 4.75rem;
    }

    .demo-strip,
    .global-header {
        position: static;
    }

    .demo-strip {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 0.5rem;
        padding: 0.65rem 0.75rem;
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .demo-strip > span {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .demo-button {
        min-width: 0;
        padding: 0.45rem 0.8rem;
    }

    .global-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 0.75rem;
    }

    .app-shell {
        grid-template-columns: 1fr;
        padding-bottom: 4.75rem;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .main-pane,
    .content-grid,
    .content-grid > *,
    .top-actions,
    .top-search {
        max-width: 100%;
        min-width: 0;
    }

    .main-pane {
        width: calc(100vw - 1.7rem);
        max-width: calc(100vw - 1.7rem);
        box-sizing: border-box;
        padding: 1rem 0.85rem 5.5rem;
        overflow-x: hidden;
    }

    .top-actions {
        width: 100%;
    }

    .partner-list-header,
    .partner-filter-strip,
    .partner-template-row,
    .partner-file-row {
        align-items: stretch;
        flex-direction: column;
    }

    .partner-search-form {
        width: 100%;
        min-width: 0;
    }

    .partner-file-control {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .partner-import-template-row {
        align-items: stretch;
        flex-direction: column;
    }

    .partner-import-file-inner {
        grid-template-columns: 1fr;
    }

    .partner-import-file-inner > label {
        justify-self: stretch;
        text-align: left;
    }

    .partner-import-hint {
        grid-column: 1;
    }

    .partner-file-control input,
    .partner-file-control .button {
        border-radius: 6px;
    }

    .top-search {
        grid-template-columns: minmax(0, 1fr) 3rem;
    }

    .nav-rail {
        position: fixed;
        z-index: 20;
        inset: auto 0 0 0;
        height: 4.75rem;
        padding: 0.5rem;
        background: var(--ref-sidebar);
    }

    .nav-list {
        display: flex;
        width: 100%;
        gap: 0.2rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    .nav-item {
        flex: 0 0 3.15rem;
        justify-content: center;
        min-height: 3rem;
        padding: 0;
        font-size: 0;
    }

    .nav-item .material-symbol {
        width: 1.5rem;
        font-size: 1.25rem;
    }

    .nav-module,
    .service-switcher,
    .nav-subitem,
    .nav-separator {
        display: none;
    }

    .dashboard-toolbar,
    .accountant-banner,
    .reference-warning,
    .accountant-access-banner,
    .dashboard-stat-grid,
    .document-evidence-grid,
    .document-audit-grid,
    .document-summary .summary-grid.is-compact,
    .sticky-action-bar,
    .export-criteria-grid,
    .export-date-pair,
    .export-subset-options,
    .invoice-filter-toolbar .form-grid {
        grid-template-columns: 1fr;
    }

    .reference-warning {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .reference-warning > .material-symbol {
        min-height: 4rem;
    }

    .analytics-mini-grid {
        grid-template-columns: 1fr;
    }

    .document-evidence-grid div,
    .document-audit-grid div,
    .document-evidence-grid div:nth-child(2n),
    .document-audit-grid div:nth-child(2n),
    .document-evidence-grid div:nth-child(3n),
    .document-audit-grid div:nth-child(3n),
    .document-audit-grid div:nth-child(6n) {
        border-right: 0;
    }

    .reference-warning div {
        padding: 0.85rem;
    }

    .reference-warning div,
    .reference-warning p,
    .reference-warning a,
    .reference-warning strong {
        min-width: 0;
        max-width: 17.5rem;
        overflow-wrap: anywhere;
    }

    .sticky-action-bar {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .date-range-control,
    .top-search,
    .dashboard-date-range,
    .dashboard-new-invoice,
    .dashboard-create-menu {
        width: 100%;
    }

    .global-tools {
        flex-wrap: wrap;
    }

    .notification-panel {
        right: auto;
        left: 0;
        width: calc(100vw - 1.5rem);
    }

    .dashboard-date-range {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 2.6rem;
    }

    .dashboard-date-range input {
        width: 100%;
        min-width: 0;
        padding: 0 0.35rem;
        font-size: 0.72rem;
    }

    .split-action .dashboard-new-invoice {
        flex: 1 1 auto;
        min-width: 0;
    }

    .event-document-row {
        grid-template-columns: 2.5rem 1.9rem minmax(0, 1fr);
    }

    .event-amount {
        grid-column: 3;
        text-align: left;
    }

    .dashboard-welcome {
        min-height: 0;
    }

    .period-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .period-tab {
        padding: 0 0.85rem;
    }

    .accountant-access-banner {
        justify-items: start;
    }

    .dashboard-events-card {
        height: 21rem;
        max-height: 21rem;
        min-height: 21rem;
    }

    .dashboard-stat-card.has-ring-chart .stat-body {
        grid-template-columns: 1fr;
    }

    .revenue-ring-chart {
        width: 5rem;
    }

    .dashboard-chart-wrap {
        padding: 3rem 0.75rem 1rem;
    }

    .chart-legend {
        right: 0.75rem;
        left: 0.75rem;
        justify-content: flex-end;
    }
}