html, body {
    font-family: var(--rz-text-font-family);
}

h1:focus {
    outline: none;
}

/*
 * The Developer menu is a system-role menu, so it gets its own colour: the theme's primary hue, pulled 40% towards the menu's own text colour. Most themes keep a dark sidebar even in
 * light mode, and --rz-primary-light alone drops below 3:1 on some (Software, Humanistic); the mix stays above
 * 4.5:1 in every free theme. Standard Dark leaves the menu colour unset, hence the fallback. The item inherits
 * color; icons and sub-items take their own variables because Material sets both explicitly.
 */
.system-role-menu {
    --system-role-menu-color: color-mix(in srgb, var(--rz-primary-light) 60%, var(--rz-panel-menu-item-color, var(--rz-text-contrast-color)));
    --rz-panel-menu-icon-color: var(--system-role-menu-color);
    --rz-panel-menu-item-2nd-level-color: var(--system-role-menu-color);
    color: var(--system-role-menu-color);
}

.rz-dialog-content {
    flex-basis: 100% !important;
}

/* The company's mark and name in the footer, as one link to its site. */
.company-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none;
}

.company-link:hover {
    text-decoration: underline;
}

/* SpartaBok's mark at the top left, before the breadcrumbs; it leads to the start page. */
.product-logo {
    display: inline-flex;
    align-items: center;
    margin: 0 0.5rem 0 0.25rem;
}

.product-logo img {
    display: block;
}

/* The annual report as the page shows it (Årsredovisning): plain tables, amounts right-aligned, sums set off. */
.annual-report h3 { margin-top: 2rem; }
.annual-report h4, .annual-report h5 { margin-top: 1.25rem; }
.annual-report-text { white-space: pre-line; }
.annual-report-muted { color: var(--rz-text-secondary-color); }
/* A struck Grundbok line is muted, as on the desktop; Radzen colours the cell content itself, so the row's colour alone
   would not reach it (JournalGrid.razor). */
tr[data-journal-struck] td .rz-cell-data { color: var(--rz-text-secondary-color); }
.annual-report-table { border-collapse: collapse; width: 100%; max-width: 48rem; margin: 0.5rem 0 1rem; }
.annual-report-table th, .annual-report-table td { padding: 0.2rem 0.5rem; vertical-align: top; text-align: left; }
.annual-report-table th { font-weight: 600; border-bottom: 1px solid var(--rz-base-300); }
.annual-report-table .amount { text-align: right; white-space: nowrap; }
.annual-report-table tr.section td { font-weight: 600; padding-top: 0.75rem; }
.annual-report-table tr.summary td { font-weight: 600; border-top: 1px solid var(--rz-base-300); }
.annual-report-table tr.grand-total td { font-weight: 700; border-top: 2px solid var(--rz-base-400); }

/* The context bar (UX contract U2): the header's second row across the full width, set off by a 1 px seam, in the
   desktop toolbar's order; the Årsremsan (parity 1.7) will sit before Årsåtgärder. Below 600 px the company name goes. */
.context-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.375rem 1rem;
    border-top: 1px solid var(--rz-base-300);
}
.context-bar-company { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-bar-year { min-width: 16rem; }
/* Body text, not Radzen's warning-darker (2.9:1 on white); the warning hue comes with parity 1.4's tokens. */
.context-bar-locked { font-weight: 600; }
/* Radzen's danger colour as text on its lighter alert is 2:1 (U11); the page failure's sentence is body text until the
   tokens of parity 1.4, and the alert's icon and tint keep the tone (SbErrorBoundary). */
.page-failure-text { color: var(--rz-text-color); }
/* The page's status line (SbStatusLine; DESIGN.md, Status line): sticky at the bottom of the body, and after the page's
   last row once scrolled to the end, so it never covers the last button. It reaches through the body's padding to the
   window's edge, so nothing shows below it, and has no shadow: it is part of the page, not a toast (U5). Radzen's
   lighter tints are translucent, so the line stands on the colour behind it: body text on the tint is 7.4:1 or more on
   the body and 6:1 or more in a dialog, in both themes. A control the keyboard reaches scrolls clear of it. */
.sb-status-line { position: sticky; bottom: 0; z-index: 2; }
/* Only while it shows something: an empty line must leave the body's padding below the page alone. */
.sb-status-line:has(.rz-alert) { bottom: calc(-1 * var(--rz-layout-body-padding)); margin-bottom: calc(-1 * var(--rz-layout-body-padding)); }
.sb-status-line > div:not(:empty) { padding: 1rem 0 var(--rz-layout-body-padding); background-color: var(--rz-body-background-color); }
.rz-dialog .sb-status-line:has(.rz-alert) { bottom: 0; margin-bottom: 0; }
.rz-dialog .sb-status-line > div:not(:empty) { padding-bottom: 0; background-color: var(--rz-dialog-background-color); }
/* Radzen's theme loads after this file, so its filled alert's shadow needs the stronger selector. */
.sb-status-line .rz-alert.rz-variant-filled { margin: 0; box-shadow: none; }
.sb-status-line-text { color: var(--rz-text-color); }
.rz-body:has(.sb-status-line .rz-alert) { scroll-padding-bottom: 7rem; }
/* A page of records (SbMasterDetail; DESIGN.md U3, Page anatomy; parity 1.3d): list 2 : detail 3 with a splitter, each
   scrolling on its own in a frame as tall as the window leaves below the header and the page's heading; stacked below
   1050 px of the frame's own width, as the desktop's ResponsiveSplitGrid (A9; CloudPageAnatomyGuardTests holds the two
   numbers equal). The detail's title is DESIGN.md's 20 px, and its action row comes last (U4). */
.sb-master-detail { container-type: inline-size; --sb-master-detail-chrome: 13rem; }
.sb-master-detail > .rz-splitter { height: max(24rem, calc(100dvh - var(--sb-master-detail-chrome))); }
.sb-master-detail .rz-splitter-pane { overflow: auto; }
.sb-master-detail-list { display: flex; flex-direction: column; gap: 0.75rem; padding-right: 0.75rem; }
.sb-master-detail-toolbar:not(:empty) { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; }
.sb-master-detail-detail { padding-left: 1rem; }
.sb-detail-title { font-size: 20px; font-weight: 600; margin: 0 0 0.75rem; color: var(--rz-text-title-color); }
.sb-detail-placeholder { color: var(--rz-text-secondary-color); }
.sb-action-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* A file shown in the page (SbFilePreview, DESIGN.md Files and PDFs): a PDF fills the width, an image keeps its shape. */
iframe.sb-file-preview { width: 100%; height: 75vh; border: 1px solid var(--rz-base-300); }
img.sb-file-preview { max-width: 100%; max-height: 75vh; object-fit: contain; align-self: flex-start; }
/* Radzen draws no ring on the splitter's grip when the keyboard reaches it (U9, WCAG 2.4.7). */
.sb-master-detail .rz-splitter-bar .rz-resize:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }
@container (max-width: 1049.98px) {
    .sb-master-detail > .rz-splitter { flex-direction: column; height: auto; --sb-stacked: 1; }
    .sb-master-detail .rz-splitter-pane { flex-basis: auto !important; }
    .sb-master-detail > .rz-splitter > .rz-splitter-bar { display: none; } /* Radzen's own rule loads later */
    .sb-master-detail-list { max-height: 40vh; padding-right: 0; }
    .sb-master-detail-detail { padding: 1rem 0 0; }
}
.context-bar-separator { list-style: none; margin: 0.25rem 0; border-top: 1px solid var(--rz-base-300); }

@media (max-width: 600px) {
    .context-bar-company, .context-bar-label { display: none; }
    .context-bar-year { flex: 1 1 12rem; min-width: 10rem; }
}

/* The header's first row stays one line: the breadcrumbs give way with an ellipsis, and below 600 px only the page's
   own crumb shows. On a narrow screen the footer (tagline and Husiki link; About names the service) gives its height
   to the page (U12). */
.header-start { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.header-start > span { display: flex; min-width: 0; overflow: hidden; } /* Tharga's BreadCrumbs: a span of items. */
.header-start .rz-breadcrumb-item { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
    .header-start .product-logo, .header-start .rz-breadcrumb-item:not(:last-child) { display: none; }
    .header-start .rz-breadcrumb-item + .rz-breadcrumb-item::before { display: none; }
}

@media (max-width: 768px) {
    .rz-footer { display: none; }
}

/* The left menu's bands (DESIGN.md, Navigation map): a gap before the first shown entry of the menu bar's groups and
   before the first of the cloud's own groups, whichever entries the person's scopes leave. */
.main-menu li:not(.menu-band-lower) + li.menu-band-lower,
.main-menu li:not(.menu-band-cloud) + li.menu-band-cloud { margin-top: 0.75rem; }

/* The left menu: above 768 px the toggle folds it to a rail of icons; below, it is Radzen's drawer (U12). Open, it is
   12rem, which holds its longest entry (Bokföringsinställningar) and leaves a page of records 1056 px at 1280, so the
   list and the detail stay side by side there as on the desktop (parity 1.3d, D5; DESIGN.md Narrow screens). */
@media (min-width: 769px) {
    .main-menu.rz-sidebar-expanded { width: 12rem; }
    .rz-layout > .main-menu.rz-sidebar-collapsed { width: max-content !important; opacity: 1; }
}

/* The open drawer lies over the page, in the body's cell of Radzen's layout grid, instead of pushing it aside. */
@media (max-width: 768px) {
    .rz-layout > .main-menu.rz-sidebar-expanded { grid-area: rz-body; justify-self: start; position: relative; z-index: 3; height: 100%; }
}

/* The lost connection's dialog (Components/Layout/ReconnectModal.razor, from the .NET 10 template): centred over the
   dimmed page like a Radzen dialog, in Radzen's own variables, and within a 320 px screen. Blazor sets one state class
   on it; each line and button shows only in its state. */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

/* Blazor keeps the first attempt's class while it retries; one line per state. */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible {
    display: none;
}

#components-reconnect-modal {
    box-sizing: border-box;
    width: min(20rem, calc(100vw - 2rem));
    margin: 20vh auto;
    padding: var(--rz-dialog-content-padding);
    border: 0;
    border-radius: var(--rz-dialog-border-radius);
    background-color: var(--rz-dialog-background-color);
    color: var(--rz-text-color);
    box-shadow: var(--rz-dialog-shadow);
}

/* The dialog takes focus when it opens; its buttons show the focus, not its frame. */
#components-reconnect-modal:focus {
    outline: none;
}

#components-reconnect-modal::backdrop {
    background-color: var(--rz-dialog-mask-background-color);
    opacity: 0.5;
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button {
    padding: 0.5rem 1.5rem;
    border: 0;
    border-radius: var(--rz-button-border-radius);
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
    font: inherit;
    cursor: pointer;
}

#components-reconnect-modal button:hover {
    background-color: var(--rz-primary-dark);
}

#components-reconnect-modal button:focus-visible {
    outline: var(--rz-outline-focus);
    outline-offset: var(--rz-outline-offset);
}