/*
 * Colors, fonts and the brand patterns come from KBM.Blazor.UI (kbm.css, kbm-mudblazor.css and KbmTheme). Use the
 * MudBlazor palette (var(--mud-palette-…)) or the KBM tokens (var(--kbm-…)) here, never own colors, and keep the
 * corners square ("keine Ecken").
 */

/* Shown until the app has loaded, before MudBlazor's palette exists, so only the KBM tokens are used. */
.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100vh;
}

.app-loading-title {
    font-family: var(--kbm-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--kbm-blau);
}

/* A square bar that runs from left to right while the app loads. */
.app-loading-bar {
    position: relative;
    width: 200px;
    height: 4px;
    overflow: hidden;
    background: var(--kbm-blau-15);
}

.app-loading-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: var(--kbm-blau);
    animation: app-loading 1.2s ease-in-out infinite;
}

@keyframes app-loading {
    to {
        left: 100%;
    }
}

/* A warning (Warnhinweis): black text on Alpengelb. */
#blazor-error-ui {
    background: var(--kbm-alpengelb);
    color: var(--kbm-schwarz);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* FocusOnNavigate (App.razor) focuses the page title after navigation; no focus frame for that. */
h1:focus {
    outline: none;
}

/* Only for screen readers, e.g. the heading of a table's action column. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A table that scrolls sideways keeps such headings inside it instead of widening the page. */
.mud-table-container {
    position: relative;
}

/* Page title with the page's main action on the right; the action wraps below the title on a phone. */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

/* A record's name as the title ("Drehmomentschlüssel DMS 3") breaks a word longer than the mobile view with a hyphen
   (in the language of its lang attribute) instead of making the page scroll sideways. */
.page-header > *, .page-header h1 {
    min-width: 0;
}

.page-header h1 {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* A record number in the line below a record's name ("PR-202610-002") never breaks at its hyphen. */
.record-number {
    white-space: nowrap;
}

/* The header's actions wrap as whole buttons onto a second line on a phone instead of being cut or broken into lines. */
.page-header > .d-flex {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page-header > .d-flex > .mud-button-root {
    white-space: nowrap;
}

/* Portal tiles and the cards of the Administration overview: the whole tile is the link. */
.portal-tile {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.portal-tile-paper {
    height: 100%;
    border-top: 2px solid var(--mud-palette-primary);
    transition: box-shadow 0.15s ease-in-out;
}

.portal-tile:hover .portal-tile-paper,
.portal-tile:focus-visible .portal-tile-paper {
    box-shadow: var(--mud-elevation-4);
}

.portal-tile:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.portal-tile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

/* The cards of the start page and the Cockpit (RUL-PLT-32): title and period left, Open right; a hidden card shows ••••
   until tapped (RUL-PLT-33). */
.card-board {
    margin-bottom: 24px;
}

.card-board-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 8px;
    margin-bottom: 4px;
}

.card-frame {
    height: 100%;
    border-top: 2px solid var(--mud-palette-primary);
}

.card-frame-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.card-frame-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    min-width: 0;
}

.card-frame-title h2 {
    overflow-wrap: anywhere;
}

.card-frame-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.card-frame-open {
    white-space: nowrap;
}

/* The Cockpit's cards (SCR-CP-1): a big figure with its label, small figure rows and tables that fit the phone. */
.cockpit-figure {
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.cockpit-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px 16px;
    margin-bottom: 8px;
}

.cockpit-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.cockpit-table th,
.cockpit-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: right;
    white-space: nowrap;
}

.cockpit-table th:first-child,
.cockpit-table td:first-child {
    min-width: 7rem;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    padding-left: 0;
}

.cockpit-table th {
    font-weight: 600;
}

.cockpit-table tr.cockpit-row-sum td {
    font-weight: 600;
}

.cockpit-scroll {
    overflow-x: auto;
}

.cockpit-period {
    max-width: 16rem;
}

.treuhand-year {
    min-width: min(17rem, 100%);
    max-width: min(22rem, 100%);
}

.cockpit-chart {
    max-height: 260px;
}

/* Margin per business line (SCR-CP-2): a line below another is indented. */
.margin-level-1 {
    padding-left: 16px;
}

.card-frame-hidden {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.card-frame-hidden:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.card-frame-dots {
    font-size: 1.5rem;
    letter-spacing: 0.15em;
}

.card-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}

.card-lines li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.card-lines li:last-child {
    border-bottom: 0;
}

.card-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.card-lines .card-line-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Customize cards (SCR-PLT-9): period and Show directly under the card's name. */
.cards-row {
    align-items: flex-start;
    padding: 4px 8px;
}

.cards-row .drag-handle {
    margin-top: 4px;
}

.cards-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cards-row-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 0 0 8px 8px;
}

.cards-row-period {
    max-width: 220px;
}

/* The portal's groups (SCR-PLT-1): compact tiles with a short text of at most two lines, cut with "…" when it is longer
   (a phone shows no tooltip). */
.portal-group + .portal-group {
    margin-top: 24px;
}

.portal-group-title {
    margin-bottom: 8px;
}

.portal-tile-head-compact {
    margin-bottom: 4px;
}

.portal-tile-text {
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* A switch next to a "?" tip, level with the outlined fields of the same row. */
.settings-switch {
    align-items: center;
    min-height: 40px;
}

/* The company's logo on the settings page: shown whole in a box as wide as a letterhead's logo, the buttons beside it
   (below it on a phone). */
.settings-logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.settings-logo-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    max-width: 100%;
    height: 96px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}

.kbm-field-with-tip:has(> .mud-link) > .kbm-help-tip-root {
    margin-top: 0;
}

/* Send the PDF (RUL-SR-13): a long address wraps in mobile view instead of widening the dialog. */
.send-pdf-recipient .mud-typography,
.parts-pdf-sent {
    overflow-wrap: anywhere;
}

/* Send the PDF: each PDF the e-mail carries is a row with a PDF icon, lined up with the recipients' checkboxes below. */
.send-pdf-part {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 4px 12px;
    overflow-wrap: anywhere;
}

.settings-logo-picture .file-thumb {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* Number ranges on the company settings page: the actions stay on one line. */
.number-range-actions {
    white-space: nowrap;
    text-align: right;
}

/* Below the md breakpoint the table shows each range as a card (Breakpoint.Sm): both buttons together on the right. */
@media (max-width: 960px) {
    .number-ranges .mud-table-cell.number-range-actions {
        justify-content: flex-end;
        gap: 8px;
    }

    .number-ranges .mud-table-cell.number-range-actions::before {
        display: none;
    }
}

/* History tab (RUL-PLT-6): one block per entry, newest first. */
.history-entry {
    padding: 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.history-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.history-changes {
    margin: 8px 0 0 0;
    overflow-wrap: anywhere;
}

/* E-mail log (RUL-PLT-18): a row opens the whole e-mail; the dialog lists its fields and keeps the text's lines. */
.mail-log .mail-log-row {
    cursor: pointer;
}

.mail-fields {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 16px;
    margin: 0;
}

.mail-fields dt {
    color: var(--mud-palette-text-secondary);
}

.mail-fields dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Values of a record shown as label and value side by side, e.g. the cards of a project's Overview tab. */
.overview-values {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 16px;
    margin: 0;
}

.overview-values dt {
    color: var(--mud-palette-text-secondary);
}

.overview-values dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.mail-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
}

@media (max-width: 599.98px) {
    .mail-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .mail-fields dd {
        margin-bottom: 8px;
    }
}

/* Help page: the contents of the guide on the left (sticky while the guide scrolls), the guide on the right. */
.help-guide-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.help-guide-contents {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A long word or address breaks only where it would overflow, so table columns keep their words whole. */
.help-guide {
    max-width: 860px;
    overflow-wrap: break-word;
}

/* A section a link jumps to stays clear of the app bar. */
.help-guide h2,
.help-guide h3 {
    scroll-margin-top: 80px;
}

/* A wide table scrolls on its own instead of widening the page. */
.help-guide table {
    display: block;
    overflow-x: auto;
}

/* Phones and narrow windows: the contents become a row of links above the guide. */
@media (max-width: 900px) {
    .help-guide-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .help-guide-contents {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 16px;
    }

    .help-guide-contents > .mud-typography-overline {
        flex-basis: 100%;
    }
}

/* File store (RUL-PLT-14). The file input of FileUploader: invisible but not display:none, so phones open its chooser. */
.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* FileUploader on desktop: the card files are dragged over (its dialog or paper), outlined and labelled by files.js. */
.file-drop-active {
    position: relative;
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -2px;
}

.file-drop-active::after {
    content: attr(data-drop-label);
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    text-align: center;
    font-family: var(--kbm-font-heading);
    font-size: 1.125rem;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent);
    pointer-events: none;
}

/* A stored file's picture or type icon in a square (FileThumbnail); images are never framed or rounded (brand). */
.file-thumb {
    display: block;
    flex: none;
    object-fit: cover;
    background: var(--kbm-panel);
}

.file-thumb-contain {
    object-fit: contain;
}

/* As wide as its place, and square: the tiles of a photo grid. */
.file-thumb-fluid {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.file-thumb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* FileUploader: one row per chosen file with its progress or why it was refused. */
.file-uploads {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.file-upload-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 4px;
}

.file-upload-name {
    overflow-wrap: anywhere;
}

.file-upload-state {
    margin-left: auto;
}

/* FilePreviewDialog: the whole image, as large as the dialog and the window allow. */
.file-preview {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    object-fit: contain;
}

/* The restore check on the company settings page: an id and a hash break anywhere rather than widen the page. */
.file-problem-id {
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Article documents (RUL-MD-36). Photos: a grid of square tiles, each a button that opens the document. */
.article-documents-section + .article-documents-section {
    margin-top: 24px;
}

.article-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.article-photo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.article-photo:focus-visible,
.article-header-photo:focus-visible,
.article-list-photo:focus-visible {
    outline: 2px solid var(--kbm-accent);
    outline-offset: 2px;
}

/* The mobile view's article cards keep to text: the photo column leaves no gap on the meta line. */
.overview-card-meta > span:has(> .article-list-photo) {
    display: none;
}

/* The star of the main photo: brand surface with its text colour, square like everything else. */
.article-photo-main {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    padding: 4px;
    background: var(--kbm-brand-surface);
    color: var(--kbm-on-brand-surface);
}

.article-photo-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.875rem;
}

/* Related articles, browse view (RUL-MD-35, RUL-MD-41): a shelf of article cards per kind, like a shop; in the mobile
   view a shelf scrolls sideways with two cards in sight. */
.relation-shelf {
    margin-bottom: 24px;
}

.relation-shelf-title {
    margin: 0 0 8px;
    font-family: var(--kbm-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.relation-shelf-count {
    margin-left: 4px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.relation-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.relation-cards-small {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.relation-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
}

.relation-card:hover {
    border-color: var(--mud-palette-primary);
}

.relation-card:focus-visible {
    outline: 2px solid var(--kbm-accent);
    outline-offset: 2px;
}

.relation-card-photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    margin-bottom: 6px;
    background: var(--kbm-panel);
    overflow: hidden;
}

.relation-card-photo img,
.relation-card-photo .file-thumb {
    width: 100%;
    height: 100%;
}

.relation-card-icon.mud-icon-root {
    width: 40%;
    height: 40%;
    color: var(--mud-palette-text-secondary);
}

.relation-card-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 6px;
    font-size: 0.75rem;
    background: var(--kbm-brand-surface);
    color: var(--kbm-on-brand-surface);
}

.relation-card-inactive .relation-card-photo > img {
    opacity: 0.5;
}

.relation-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.relation-card-number,
.relation-card-fact,
.relation-card-replaced,
.relation-card-differs,
.relation-card-note {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.relation-card-fact {
    color: var(--mud-palette-text-primary);
}

@media (max-width: 599.98px) {
    .relation-cards {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
    }

    .relation-card {
        flex: 0 0 calc(50% - 6px);
        scroll-snap-align: start;
    }
}

/* A plant photo taken before its component changed (RUL-MD-58): "Before change (date)" over the picture's top edge. */
.plant-photo-mark {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 6px;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    font-size: 0.75rem;
}

.plant-photo-mark.plant-photo-mark-inline {
    position: static;
}

/* A plant's Structure tab (SCR-MD-20): a toolbar, the tree and, from 600 px, the panel of the chosen component beside it
   (below it up to 960 px). Rows fold with a chevron, are dragged by their handle (plant-structure.js marks the row under
   the pointer with data-drop) and indent by their depth along a line. */
.plant-structure-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.plant-structure-search {
    flex: 0 1 280px;
    min-width: 200px;
}

.plant-structure-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.plant-structure-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 12px;
    margin-bottom: 8px;
    background: var(--mud-palette-background-gray);
}

.plant-structure {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 960px) {
    .plant-structure {
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: start;
    }

    .plant-structure-hint {
        grid-column: 1;
    }
}

.plant-structure-tree {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.plant-structure-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding-right: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.plant-structure-row.plant-structure-selected {
    background: var(--mud-palette-primary-hover);
}

.plant-structure-row[data-drop="before"] {
    box-shadow: inset 0 3px 0 var(--mud-palette-info);
}

.plant-structure-row[data-drop="after"] {
    box-shadow: inset 0 -3px 0 var(--mud-palette-info);
}

.plant-structure-row[data-drop="inside"] {
    box-shadow: inset 0 0 0 2px var(--mud-palette-info);
    background: var(--mud-palette-info-hover);
}

.plant-structure-row.plant-structure-dragged {
    opacity: 0.4;
}

.plant-structure-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    align-self: stretch;
    flex-shrink: 0;
    cursor: grab;
    color: var(--mud-palette-text-secondary);
    touch-action: none;
}

.plant-structure-handle:hover {
    color: var(--mud-palette-primary);
}

.plant-structure-indent {
    flex-shrink: 0;
    align-self: stretch;
}

.plant-structure-indent.plant-structure-indented {
    border-right: 1px solid var(--mud-palette-lines-default);
    margin-right: 4px;
}

.plant-structure-chevron .mud-icon-root {
    transition: transform 0.15s;
}

.plant-structure-chevron.plant-structure-open .mud-icon-root {
    transform: rotate(90deg);
}

.plant-structure-leaf {
    width: 34px;
    flex-shrink: 0;
}

.plant-structure-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.plant-structure-name:focus-visible {
    outline: 2px solid var(--kbm-accent);
    outline-offset: 2px;
}

.plant-structure-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
}

.plant-structure-code {
    font-family: var(--kbm-font-heading, inherit);
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.plant-structure-label {
    font-weight: 600;
}

.plant-structure-token,
.plant-structure-machine {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.plant-structure-count {
    padding: 0 6px;
    font-size: 0.75rem;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.plant-structure-uses {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.plant-structure-parts {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.plant-structure-side {
    padding: 16px;
    background: var(--mud-palette-background-gray);
}

.plant-component-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.plant-component-head {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.plant-component-title {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    margin-top: 2px;
    font-family: var(--kbm-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
}

.plant-component-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
}

.plant-component-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.plant-component-part {
    padding: 4px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.plant-component-actions .mud-button-root {
    justify-content: flex-start;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-height: 48px;
}

/* The mobile view: a narrower indent; the handle stays (a finger drags it) and the sheet moves rows too. */
@media (max-width: 599.98px) {
    .plant-structure-search {
        flex: 1 1 100%;
    }

    .plant-structure-toolbar-actions {
        margin-left: 0;
    }
}

.article-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}

.article-video video,
.article-document-video {
    display: block;
    width: 100%;
    max-height: 60vh;
    background: var(--kbm-schwarz);
}

.article-video-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Plant documents (SCR-DOC-1): a row per document with its picture or type icon, text and actions, and its versions
   below when opened. */
.plant-documents-section + .plant-documents-section {
    margin-top: 24px;
}

.plant-document {
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.plant-document-row,
.plant-document-version {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.plant-document-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.plant-document-notes {
    white-space: pre-line;
}

.plant-document-actions {
    display: inline-flex;
    flex: none;
    align-items: center;
}

.plant-document-versions-toggle {
    margin-left: 40px;
}

.plant-document-versions {
    margin: 4px 0 0 52px;
}

.plant-document-version {
    padding: 6px 0;
}

.plant-document-version + .plant-document-version {
    border-top: 1px dashed var(--mud-palette-lines-default);
}

/* "Current" beside the newest version: brand surface with its text colour, square like everything else. */
.plant-document-current {
    padding: 0 6px;
    background: var(--kbm-brand-surface);
    color: var(--kbm-on-brand-surface);
    font-size: 0.75rem;
    line-height: 1.5rem;
}

/* A copy of a library master (RUL-DOC-6): where it came from, "Newer master V4" in the warning colour with "Take V4"
   beside it, and a waiting proposal; a version's source line. */
.document-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
}

.document-newer,
.document-proposed,
.library-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.document-newer {
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

.document-proposed {
    border: 1px solid var(--mud-palette-lines-default);
}

/* The library (SCR-DOC-2), an overview table: the title cell keeps room for the title and its versions and has no
   line of its own (the row has one); tags as small square labels, open proposals as a link-button; proposals in the
   document dialog. */
.library-document {
    min-width: 240px;
    padding: 0;
    border-bottom: none;
}

.library-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.library-tag {
    background: var(--kbm-brand-surface);
    color: var(--kbm-on-brand-surface);
}

.library-tag-remove {
    margin-left: 4px;
    padding: 0 2px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.library-proposals {
    margin-left: -8px;
}

.library-proposal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    padding: 8px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.library-proposal-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* "Use a master": one button per master, its title and facts on two lines. */
.use-master-list {
    display: flex;
    flex-direction: column;
}

.use-master-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px;
    border: none;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.use-master-option:hover:not(:disabled),
.use-master-option:focus-visible {
    background: var(--mud-palette-action-default-hover);
}

.use-master-option:disabled {
    cursor: default;
    color: var(--mud-palette-text-disabled);
}

.use-master-facts {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* The document search (SCR-DOC-3): a row per hit with the icon of where it is. */
.document-hit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
}

.document-hit + .document-hit {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.document-hit-icon {
    flex: none;
    margin-top: 2px;
}

@media (max-width: 599.98px) {
    .plant-document-versions-toggle {
        margin-left: 0;
    }

    .plant-document-versions {
        margin-left: 0;
    }

    .library-proposal-actions {
        margin-left: 0;
    }
}

/* The main photo next to the article's name and in the first column of the list. */
.article-header-photo,
.article-list-photo {
    display: block;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.article-document-facts {
    overflow-wrap: anywhere;
}

.article-document-uses li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
}

/* A caption with its "?" over a group of values, such as a filter's values in an overview table. */
.field-caption {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 26px;
}

/* A signature on a form (SignatureField, SCR-PLT-8): "Tap to sign" in a white box like paper, the signature small after
   Done. The drawing itself is given in the full-screen signing view below. */
.signature-field-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    height: 96px;
    background: white;
    color: black;
    border: 1px dashed var(--mud-palette-lines-inputs);
    font: inherit;
    cursor: pointer;
}

.signature-field-empty:disabled {
    cursor: default;
    opacity: 0.6;
}

.signature-field-empty:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.signature-field-preview {
    display: block;
    width: 240px;
    max-width: 100%;
    aspect-ratio: 3 / 1;
    background: white;
    border: 1px solid var(--mud-palette-lines-default);
}

/* The signing view (SigningView, SCR-PLT-8): one line on top, the pad fills the rest of the screen, the buttons at the
   bottom. dvh keeps the bottom bar above a phone's address bar. The pad is white like paper in both themes, so the
   black strokes read in the PDF; the finger draws instead of scrolling the page. */
.mud-dialog.signing-view {
    height: 100dvh;
}

.signing-view .signing-view-content {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
}

.signing-view-head,
.signing-view-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    flex: 0 0 auto;
}

.signing-view-line {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.signing-view-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.signing-view-signer {
    font-weight: 600;
}

.signing-view-pad {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 12px;
}

.signing-view-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: white;
    border: 1px solid var(--mud-palette-lines-inputs);
    touch-action: none;
    cursor: crosshair;
}

.signing-view-turn {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    pointer-events: none;
}

.signing-view-hint {
    flex: 1 1 auto;
    min-width: 0;
}

/* A stored signature (RUL-SR-18) as drawn: white like paper in both themes. */
.stored-signature {
    display: block;
    max-width: 320px;
    width: 100%;
    background: white;
    border: 1px solid var(--mud-palette-lines-default);
}

/* The summary before signing (SCR-SR-3, SCR-SR-4): labels on the left of the report's facts, photos as thumbnails. */
.signing-facts th {
    width: 1%;
    white-space: nowrap;
    text-align: left;
    font-weight: 500;
}

/* The day's tables fit a 360 px phone: narrower cell padding there; a table still too wide scrolls on its own. */
.signing-table .mud-table-container {
    overflow-x: auto;
}

@media (max-width: 599.98px) {
    .signing-table th,
    .signing-table td {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .signing-table th {
        letter-spacing: normal !important;
        font-size: 0.75rem !important;
        hyphens: auto;
    }

    /* A dialog that shows the summary (Release without signature) takes the whole width in mobile view, so its tables
       fit as they do on the Sign page. */
    .mud-dialog:has(.signing-summary) {
        margin: 8px;
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
    }

    .mud-dialog:has(.signing-summary) .mud-dialog-content {
        padding-left: 8px;
        padding-right: 8px;
    }
}

.signing-photo {
    margin: 0;
    width: 160px;
}

.signing-photo img {
    display: block;
    width: 160px;
    height: 120px;
    object-fit: cover;
}

/* A report's photo the phone can't show (offline, or waiting to be sent, RUL-SR-14): a box with an icon in its place. */
.report-photo-offline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    vertical-align: middle;
}

.signing-photo .report-photo-offline {
    width: 160px;
    height: 120px;
}

/* The positions of a document (PositionsEditor, RUL-PLT-23): a group's positions indented, the totals right-aligned. */
.positions-table .positions-in-group {
    padding-left: 24px;
}

.positions-table .positions-number input {
    text-align: right;
}

/* The columns keep their widths and the text takes the rest; below 960 px the rows stack. */
@media (min-width: 960px) {
    .positions-table table {
        table-layout: fixed;
    }

    .positions-table.mud-table .mud-table-row .mud-table-cell {
        padding-left: 4px;
        padding-right: 4px;
        vertical-align: top;
    }

    /* Rows align at the top, so a longer description or the account line below it leaves the fields beside it at the
       height of its first line; plain values (number, amount, handle, menu) sit at the middle of that line. */
    .positions-table.mud-table .mud-table-row .mud-table-cell:not(:has(.mud-input-control)) {
        padding-top: 22px;
    }

    .positions-table.mud-table .mud-table-row .mud-table-cell:has(.mud-menu) {
        padding-top: 18px;
    }

    .positions-table.mud-table .mud-table-row .mud-table-cell.positions-handle-cell {
        padding-top: 16px !important;
    }
}

/* Positions 2: the drag handle (in the mobile view a bar across the top of each stacked row, so only the bar drags and
   the rest of the row scrolls), the row being dragged (positions-editor.js), the formatting toolbar and a formatted text
   shown like its field. */
.positions-table .positions-handle-cell {
    width: 28px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 959.98px) {
    .positions-table.mud-table .mud-table-row .mud-table-cell.positions-handle-cell {
        display: flex;
        justify-content: center;
        width: auto;
        padding: 0 !important;
    }

    .positions-table .positions-handle-cell .drag-handle {
        width: 100%;
        min-height: 36px;
    }

    .positions-table .positions-handle-cell .drag-handle .mud-icon-root {
        transform: rotate(90deg);
    }

    /* Every label of a stacked position is as wide as the longest one, so all fields start at the same edge and run
       to the right edge. */
    .positions-table.mud-table .mud-table-row .mud-table-cell:not(.positions-handle-cell)::before {
        flex: 0 0 7.5rem;
        overflow-wrap: anywhere;
    }

    .positions-table.mud-table .mud-table-row .mud-table-cell:not(.positions-handle-cell) > .mud-input-control,
    .positions-table.mud-table .mud-table-row .mud-table-cell:not(.positions-handle-cell) > div {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.positions-table .drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-height: 32px;
    cursor: grab;
    touch-action: none;
    color: var(--mud-palette-text-secondary);
}

.positions-table .drag-handle:hover {
    color: var(--mud-palette-primary);
}

.positions-table .sortable-ghost {
    opacity: 0.35;
}

.positions-table .sortable-drag {
    opacity: 0.9 !important;
    background: var(--mud-palette-surface);
}

.positions-format-bar {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}

.positions-format-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.positions-format-button:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-primary);
}

/* The same type and spacing as the outlined dense field it stands for. */
.positions-text {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.positions-formatted {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 8.5px 14px;
    font-size: 18px;
    line-height: 1.4375;
    text-align: left;
    overflow-wrap: anywhere;
    white-space: normal;
}

.positions-formatted-editable {
    border: 1px solid var(--mud-palette-lines-inputs);
    cursor: text;
}

.positions-formatted-editable:hover {
    border-color: var(--mud-palette-text-primary);
}

.positions-formatted-editable:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.positions-formatted-error {
    border-color: var(--mud-palette-error);
}

.positions-formatted ul {
    margin: 0;
    padding-left: 20px;
}

.positions-formatted strong {
    font-weight: 600;
}

/* A position of a group that shows only its total: its amount counts but is not printed. */
.positions-table .positions-price-hidden {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.positions-group-title input {
    font-weight: 600;
}

.positions-totals {
    margin-left: auto;
    max-width: 420px;
}

.positions-total-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    font-variant-numeric: tabular-nums;
}

.positions-grand-total {
    border-top: 2px solid var(--kbm-blau);
    font-weight: 600;
}

/* An offer's options (RUL-SAL-8): their sum below the total, which doesn't hold it. */
.positions-options-total {
    color: var(--mud-palette-text-secondary);
}

.positions-option {
    margin-top: 4px;
}

/* A position's text with its caption and Option chip below it, one column also in the mobile view. */
.positions-text-cell {
    flex: 1 1 auto;
    min-width: 0;
}

/* A position's account and business line (RUL-PLT-30) below its text, side by side while they fit. */
.positions-accounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.positions-accounts > * {
    flex: 1 1 180px;
    min-width: 0;
}

/* The same as one grey line (answer 128 A); a click opens the two pickers. */
.positions-accounts-line {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    max-width: 100%;
    overflow-wrap: anywhere;
}

button.positions-accounts-line:hover span,
button.positions-accounts-line:focus-visible span {
    text-decoration: underline;
}

/* The notices under the bell (NoticesMenu, RUL-PLT-24): wrapped lines in a menu no wider than a phone, unread in bold. */
.notices-menu {
    width: min(380px, calc(100vw - 32px));
}

.notices-menu .notice .notice-text {
    white-space: normal;
}

.notices-menu .notice-unread .notice-text {
    font-weight: 600;
}

.notices-menu .notice-dot {
    width: 10px;
    flex: 0 0 10px;
    color: var(--mud-palette-primary);
    font-size: 10px;
    line-height: 20px;
}

/* The report board (SCR-SR-7): a column per step side by side, scrolling sideways inside the board on narrow screens;
   on a phone the columns stack. A card waiting long for release gets a yellow edge. */
.report-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
}

@media (max-width: 599.98px) {
    .report-board {
        grid-template-columns: 1fr;
        overflow-x: visible;
    }
}

.report-board-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.report-board-column-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid var(--mud-palette-primary);
    padding-bottom: 4px;
}

.report-board-card {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 8px 12px;
}

.report-board-card-long {
    border-left: 4px solid var(--kbm-alpengelb);
}

/* A cell with several lines (a number and its kind, several plants): one block, so on a phone, where the rows of a
   table stack, the lines stay under each other next to the label instead of widening the row. */
@media (max-width: 959.98px) {
    .mud-table-cell .cell-lines {
        text-align: right;
    }
}

/* The bar below the app bar that offers a new version of the app (UpdateNotice, RUL-PLT-17). */
.update-notice-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* Overview tables (RUL-PLT-25, OverviewTable): one toolbar line with the search, a chip per filter and Columns. In the
   mobile view (< 600 px) the chips scroll sideways in their own line and a filter opens as a sheet at the bottom. */
.overview-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}

/* In the mobile view the count takes a line of its own, so the buttons stay on one row. */
.overview-action-bar .overview-action-count {
    flex-basis: 100%;
}

.overview-search {
    flex: 0 1 320px;
    min-width: 200px;
}

.overview-chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.overview-chip-anchor {
    position: relative;
}

/* A filter looks like a small dropdown: its name, when set ": value" in bold on a light primary ground, and a chevron,
   or a × that clears it. Same height as the search field. */
.overview-chip {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.overview-chip:hover {
    border-color: var(--mud-palette-text-primary);
}

.overview-chip.set {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    border-color: transparent;
}

.overview-chip.open {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.overview-chip-open,
.overview-chip-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
}

.overview-chip-open {
    padding: 0 8px 0 12px;
}

.overview-chip.set .overview-chip-open {
    padding-right: 2px;
}

.overview-chip-open .mud-icon-root,
.overview-chip-clear .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.overview-chip.set .mud-icon-root {
    color: var(--mud-palette-primary);
}

.overview-chip-clear {
    padding: 0 8px 0 4px;
}

.overview-chip-text b {
    font-weight: 600;
}

.overview-chip-open:focus-visible,
.overview-chip-clear:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.overview-columns-button {
    margin-left: auto;
}

.overview-popover {
    min-width: 280px;
    max-width: 360px;
}

.overview-popover:has(.overview-date) {
    width: 340px;
}

.overview-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 12px;
}

.overview-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1301;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--mud-palette-surface);
    border-top: 2px solid var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-8);
}

.overview-sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 0 16px;
}

/* The date filter: the ready ranges as a list (the picked one ticked, with its days), then Custom with From and To. */
.overview-date {
    display: flex;
    flex-direction: column;
    margin: -8px -12px -12px;
    padding: 6px 0 12px;
}

.overview-panel-head {
    padding: 6px 16px 4px;
    font-family: var(--kbm-font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.overview-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 6px 16px 6px 12px;
    border: 0;
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    justify-content: flex-start;
    cursor: pointer;
}

.overview-option:hover,
.overview-option:focus-visible {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.overview-option.selected {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    font-weight: 600;
}

.overview-option-check {
    display: inline-flex;
    width: 20px;
    flex-shrink: 0;
    color: var(--mud-palette-primary);
}

.overview-option-days {
    margin-left: 4px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.overview-panel-divider {
    margin: 6px 0;
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.overview-custom-dates {
    display: flex;
    gap: 8px;
    padding: 4px 16px 0;
}

.overview-custom-dates > *,
.overview-custom-dates .mud-input-control,
.overview-custom-dates .mud-input {
    flex: 1 1 0;
    min-width: 0;
}

.overview-custom-apply {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px 0;
}

/* The Excel menu of an overview table: an icon, the entry and how many columns and rows it holds. */
.overview-export-entry {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.overview-export-detail {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.overview-export-menu .mud-menu-item {
    min-width: 260px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.overview-summary {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    font-weight: 600;
}

/* Mobile view cards: the title and its amount, then the other columns on one line. */
.overview-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.overview-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.overview-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.overview-card-main {
    font-weight: 600;
    min-width: 0;
}

.overview-card-amount {
    font-weight: 700;
    white-space: nowrap;
}

.overview-card-meta {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.overview-card-meta > span:empty {
    display: none;
}

.overview-card-meta > span:not(:empty):not(:has(> .article-list-photo)) ~ span:not(:empty)::before {
    content: " · ";
}

/* A cell of several lines (cell-lines, MudText) runs on in the card's one meta line. */
.overview-card-meta > span * {
    display: inline;
}

.overview-card-meta .cell-lines > * + *::before {
    content: " · ";
}

/* Row buttons and tick boxes of an overview table: the buttons stay on one line at the end of the row, or at the foot of
   the card in the mobile view; a ticked card is marked like a selected row. */
.overview-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.overview-table .overview-row-actions {
    text-align: right;
    white-space: nowrap;
}

.overview-table .overview-check {
    width: 48px;
    padding-right: 0;
}

.overview-card-head:has(.overview-card-check) {
    justify-content: flex-start;
}

.overview-card-head:has(.overview-card-check) .overview-card-main {
    flex: 1;
}

.overview-card-check {
    margin: -6px 0 -6px -8px;
    align-self: center;
}

.overview-card.selected {
    border-color: var(--mud-palette-primary);
}

.overview-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
}

.overview-table .mud-table-foot .overview-total {
    font-weight: 600;
    border-top: 2px solid var(--mud-palette-lines-default);
}

.overview-sort {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* One line per currency. */
.overview-total-lines span {
    display: block;
    white-space: nowrap;
}

.overview-sort:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
}

@media (max-width: 599.98px) {
    /* Search and Columns share the first line; the chips get the second and scroll sideways. */
    .overview-search {
        flex: 1 1 0;
        min-width: 0;
    }

    .overview-columns-button {
        order: 1;
    }

    .overview-chips {
        order: 2;
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .overview-chips .overview-chip-anchor {
        flex-shrink: 0;
    }

    .overview-date {
        margin: 0;
    }
}

/* Columns dialog (SCR-PLT-7): fixed columns with a lock, then the movable ones, dragged by their handle. */
.columns-fixed-row,
.columns-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.columns-fixed-row {
    color: var(--mud-palette-text-secondary);
    padding-left: 12px;
}

.columns-row:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
}

/* Clear of the checkbox, whose invisible input MudBlazor pulls to the left over its neighbour. */
.columns-row .drag-handle {
    position: relative;
    z-index: 2;
    padding: 8px 4px;
    margin-inline-end: 12px;
    display: inline-flex;
    cursor: grab;
    touch-action: none;
    color: var(--mud-palette-text-secondary);
}

.columns-row.sortable-ghost {
    background: var(--kbm-blau-15);
}

.columns-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.columns-actions-more,
.columns-actions-main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.columns-actions-main {
    margin-left: auto;
}

/* A chip with a long text (the ERP connection's state with the company name) wraps in the mobile view. */
.mud-chip.chip-wrap {
    height: auto;
    min-height: 24px;
    max-width: 100%;
}

.mud-chip.chip-wrap .mud-chip-content {
    white-space: normal;
    word-break: break-word;
    padding-block: 2px;
}

/* A row of text buttons that must stay on one line in the mobile view (Work packages: Take hours, Close booking,
   New): their start icons give way below 600 px. */
@media (max-width: 599.98px) {
    .actions-one-row .mud-button-text .mud-button-icon-start {
        display: none;
    }
}

/* "+2" after a project's main plant in the project list. */
.project-more-plants {
    margin-left: 4px;
    white-space: nowrap;
}

/* A stocktake's lines (SCR-IN-9): the article on the left, its count field a fixed width on the right, also on a phone;
   the search keeps a readable width on desktop. */
.stocktake-line .stocktake-count {
    flex: 0 0 150px;
    max-width: 150px;
}

.stocktake-line .cell-lines {
    flex: 1 1 160px;
    min-width: 0;
}

.stocktake-search {
    flex: 1 1 240px;
    max-width: 420px;
}

/* A caption with its "?" next to the article's stock figures keeps the line height of the captions without one. */
.stock-figure-caption {
    height: 1.25rem;
    overflow: visible;
}

/* The supplier bill (SCR-PUR-7): its PDF stays in view beside the lines on desktop while the page scrolls; a scan shows
   as a picture the width of the column. No border radius (brand). */
@media (min-width: 960px) {
    .bill-pdf {
        position: sticky;
        top: 72px;
    }
}

.bill-pdf-frame {
    display: block;
    width: 100%;
    height: 75vh;
    border: 1px solid var(--mud-palette-lines-default);
}

.bill-pdf-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.bill-line .cell-lines {
    flex: 1 1 200px;
    min-width: 0;
}

/* The facts of the system status page (SCR-GL-1): a label column and its value, also in the mobile view. */
.status-facts th {
    text-align: left;
    font-weight: 500;
    width: 40%;
    vertical-align: top;
}

.status-facts td,
.status-table td.text-break,
.status-facts td.text-break {
    overflow-wrap: anywhere;
}

/* The value field of a measured check (RUL-SR-19), next to its result buttons. */
.sr-check-value {
    max-width: 9rem;
}

/*
 * Form sections (Platform.Client FormCard, FormSection, FormGrid, FormField, FormFact; CLAUDE.md "Form sections"):
 * one card per tab with sections, a thin line between them. The card is a container: from 960 px of card width the
 * section titles sit in a column on the left, below that above their fields. The grid is a container of its own: four
 * columns from 720 px, two from 480 px, one below (the mobile view). Every field keeps the slot of its "?" (24 px
 * button and 2 px on each side), so the edges of all fields line up whether they have a tip or not.
 */
.form-card {
    container: form-card / inline-size;
}

.form-section {
    padding: 16px;
}

.form-section + .form-section {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* A dialog's sections (FormCard Outlined="false"): no frame, flush with the dialog's own padding. */
.form-card-plain > .form-section {
    padding-left: 0;
    padding-right: 0;
}

.form-card-plain > .form-section:first-child {
    padding-top: 0;
}

/* A one-column field (date, number, code) is narrow on a four-column grid: its end icon (calendar, unit) sits close to
   the value so a date such as 23.10.2026 shows whole. */
.form-field.form-span-1 .mud-input-adornment-end {
    margin-inline-start: 0;
}

.form-section-head {
    margin-bottom: 16px;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-section-heading {
    color: var(--kbm-accent);
}

.form-section-text {
    color: var(--kbm-text-secondary);
    margin-top: 2px;
}

@container form-card (min-width: 960px) {
    .form-section {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 24px;
        padding: 24px;
    }

    .form-section-head {
        margin-bottom: 0;
        padding-top: 6px;
    }
}

.form-grid-host {
    container-type: inline-size;
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@container (min-width: 480px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid > .form-span-2,
    .form-grid > .form-span-4 {
        grid-column: span 2;
    }
}

@container (min-width: 720px) {
    .form-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .form-grid > .form-span-4 {
        grid-column: span 4;
    }
}

.form-field {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.form-field-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Level with the middle of the input line, as .kbm-field-with-tip does; centred beside a switch, check box or button. */
.form-field-tip {
    flex: 0 0 28px;
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.form-field:has(> .form-field-input > .mud-switch, > .form-field-input > .mud-checkbox, > .form-field-input > .mud-button-root) {
    align-items: center;
}

.form-field:has(> .form-field-input > .mud-switch, > .form-field-input > .mud-checkbox, > .form-field-input > .mud-button-root) > .form-field-tip {
    margin-top: 0;
}

.form-fact {
    min-width: 0;
    overflow-wrap: anywhere;
}

.form-fact-label {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Sales plan (SCR-CRM-6): the month of today stands out; every row opens the list behind its actual; amounts never wrap. */
.plan-current-month {
    cursor: pointer;
    background: var(--mud-palette-action-default-hover);
}

.plan-current-month td {
    font-weight: 600;
}

.plan-table td {
    white-space: nowrap;
}

/* Sales overview (SCR-CRM-8): a chart is as high as its drawing and legend, with room to the line below it. */
.overview-chart {
    margin-bottom: 16px;
}

/* Retrofit Check, Positions tab of a check (267 A, 270 A): the plant structure as one tree like Master data's Structure
   tab. A module is a band on Papier with its code in a filled box, a component a row with its code in a framed box,
   positions below them; rows indent by their depth along guide lines (24 px, 12 px in the mobile view), fold with a
   chevron and are dragged by their handle (check-tree.js marks the row under the pointer with data-drop). Priorities
   show in their colour: 1 Fehlerrot, 2 Alpengelb, 3 Blau-70, none framed in grey. */
.check-tree-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.check-tree-filter {
    min-width: 150px;
}

.check-tree-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.check-tree-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin: 4px 0 8px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.check-tree-warnings {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.check-tree-summary-end {
    display: inline-flex;
    margin-left: auto;
}

.check-tree {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.check-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 48px;
    padding-right: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.check-tree-module {
    min-height: 52px;
    background: var(--mud-palette-background-gray);
}

.check-tree-row[data-drop="before"] {
    box-shadow: inset 0 3px 0 var(--mud-palette-info);
}

.check-tree-row[data-drop="after"] {
    box-shadow: inset 0 -3px 0 var(--mud-palette-info);
}

.check-tree-row[data-drop="inside"] {
    box-shadow: inset 0 0 0 2px var(--mud-palette-info);
    background: var(--mud-palette-info-hover);
}

.check-tree-row.check-tree-dragged {
    opacity: 0.4;
}

.check-tree-handle,
.check-tree-handle-room {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    align-self: stretch;
    flex-shrink: 0;
}

.check-tree-handle {
    cursor: grab;
    color: var(--mud-palette-text-secondary);
    touch-action: none;
}

.check-tree-handle:hover {
    color: var(--mud-palette-primary);
}

.check-tree-level {
    flex: 0 0 24px;
    align-self: stretch;
    background: linear-gradient(var(--mud-palette-lines-default), var(--mud-palette-lines-default)) no-repeat 11px 0 / 1px 100%;
}

.check-tree-mobile .check-tree-level {
    flex-basis: 12px;
    background-position: 5px 0;
}

.check-tree-chevron .mud-icon-root {
    transition: transform 0.15s;
}

.check-tree-group .check-tree-chevron.check-tree-open .mud-icon-root,
.check-tree-position .check-tree-chevron.check-tree-unfolded .mud-icon-root {
    transform: rotate(90deg);
}

.check-tree-position .check-tree-chevron.check-tree-unfolded .mud-icon-root {
    transform: rotate(180deg);
}

.check-tree-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 16px;
    padding: 6px 0;
}

.check-tree-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    min-width: 0;
}

.check-tree-code {
    padding: 0 6px;
    border: 1px solid var(--mud-palette-primary);
    font-family: var(--kbm-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.check-tree-module .check-tree-code {
    padding: 0 7px;
    font-size: 1.125rem;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.check-tree-label {
    font-family: var(--kbm-font-heading);
    font-weight: 600;
}

.check-tree-module .check-tree-label {
    font-size: 1.25rem;
    font-weight: 700;
}

.check-tree-token,
.check-tree-count,
.check-tree-meta {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.check-tree-link {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 8px 8px;
    color: inherit;
    text-decoration: none;
}

.check-tree-link:focus-visible {
    outline: 2px solid var(--kbm-accent);
    outline-offset: 2px;
}

.check-tree-line {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
}

.check-tree-position-code {
    min-width: 76px;
    font-family: var(--kbm-font-heading);
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.check-tree-position-title {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* In the mobile view the code stands above the title on every row, so short and long titles look alike. */
.check-tree-mobile .check-tree-position-code {
    flex-basis: 100%;
}

.check-tree-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    flex-shrink: 0;
}

.check-tree-mobile .check-tree-chips {
    flex-shrink: 1;
}

.check-tree-prio,
.check-tree-done {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    font-family: var(--kbm-font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.check-tree-prio-1 {
    background: var(--kbm-fehlerrot);
    color: var(--kbm-weiss);
}

.check-tree-prio-2 {
    background: var(--kbm-alpengelb);
    color: var(--kbm-schwarz);
}

.check-tree-prio-3 {
    background: var(--kbm-blau-70);
    color: var(--kbm-weiss);
}

.check-tree-prio-none {
    border: 1px solid var(--kbm-titan);
    color: var(--mud-palette-text-secondary);
}

.check-tree-done {
    border: 1px solid var(--mud-palette-success);
    color: var(--mud-palette-success);
}

.check-tree-photos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    font-size: 0.875rem;
}

.check-tree-hidden {
    visibility: hidden;
}

.check-tree-warning {
    display: inline-flex;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
}

.check-tree-price {
    flex: 0 0 110px;
    text-align: right;
    font-family: var(--kbm-font-heading);
    font-weight: 600;
}

.check-tree-detail-row {
    align-items: stretch;
}

.check-tree-detail {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 12px 8px;
    padding: 12px 16px;
    background: var(--mud-palette-background-gray);
}

.check-tree-mobile .check-tree-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    margin-left: 4px;
}

.check-tree-detail-label {
    margin-bottom: 4px;
    font-family: var(--kbm-font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.check-tree-detail-text {
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-line;
}

.check-tree-detail-end {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.check-tree-photo {
    width: 88px;
}

.check-tree-mobile .check-tree-photo {
    width: 72px;
}

.check-tree-spacer {
    flex: 1;
}

.check-tree-open-link {
    padding: 12px 0;
    font-family: var(--kbm-font-heading);
    font-weight: 600;
}

.check-tree-empty-text {
    padding: 10px 0 10px 40px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.check-tree-mobile .check-tree-empty-text {
    padding-left: 32px;
}

/* The overview of a check (CHK-16) and other lists of the tree: a code in a box next to a name. */
.check-code-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
}

/* The Overview of a check (CHK-16): every position as a card, fully open: head with code, title, chips and the two
   buttons, the three texts side by side (stacked in the mobile view), then the calculation lines in fixed columns
   (kind, line, quantity, sales; in the mobile view the quantity goes below the line), group rows, the total and the
   warnings. */
.check-overview-position {
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.check-overview-mobile .check-overview-position {
    padding: 10px 12px;
}

.check-overview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.check-overview-name {
    display: flex;
    flex: 1 1 260px;
    flex-wrap: wrap;
    column-gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.check-overview-name:hover .check-tree-position-title {
    text-decoration: underline;
}

.check-overview-mobile .check-overview-name .check-tree-position-code {
    flex-basis: 100%;
}

.check-overview-actions {
    display: flex;
    margin-left: auto;
}

.check-overview-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.check-overview-texts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 24px;
    margin-top: 10px;
}

.check-overview-mobile .check-overview-texts {
    grid-template-columns: minmax(0, 1fr);
}

.check-overview-calc {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.check-overview-line {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 150px 140px;
    column-gap: 12px;
    align-items: start;
    padding: 5px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.875rem;
}

.check-overview-mobile .check-overview-line {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    column-gap: 8px;
}

.check-overview-mobile .check-overview-quantity {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
}

.check-overview-mobile .check-overview-amount {
    grid-column: 3;
    grid-row: 1;
}

.check-overview-grouped .check-overview-text {
    padding-left: 16px;
}

.check-overview-group {
    font-weight: 600;
    background: var(--mud-palette-background-gray);
}

.check-overview-total {
    font-weight: 700;
    border-bottom: none;
}

.check-overview-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.check-overview-meta,
.check-overview-reserve {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.check-overview-quantity {
    text-align: right;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.check-overview-amount {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.check-overview-line-warning {
    margin-right: 4px;
    vertical-align: text-bottom;
    color: var(--mud-palette-warning);
}

.check-overview-empty {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.check-overview-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.875rem;
}

.check-overview-warning .mud-icon-root {
    color: var(--mud-palette-warning);
}

/* Back from a position (CHK-10): the position shown last is marked for a moment. */
.check-returned {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    transition: outline-color 0.6s;
}

/* Retrofit Check, Calculation of a position (SCR-RC-3): one row per line in fixed columns (handle, kind, line, quantity,
   reserve, cost, sales, menu; without prices the two amounts go), group bands with their own background, the open line's
   fields in a panel below its row, a sheet over the page in the mobile view and the totals bar sticking to the bottom.
   calculation-editor.js drags rows and groups by their handles. */
.calc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.calc-toolbar-end {
    margin-left: auto;
}

.calc-editor {
    border: 1px solid var(--kbm-line);
}

.calc-grid {
    display: grid;
    grid-template-columns: 24px 24px minmax(0, 1fr) 88px 168px 112px 112px 40px;
    column-gap: 8px;
    align-items: center;
    padding: 0 4px;
}

.calc-no-prices .calc-grid {
    grid-template-columns: 24px 24px minmax(0, 1fr) 88px 168px 40px;
}

.calc-head {
    min-height: 36px;
    background: var(--kbm-brand-surface);
    color: var(--kbm-on-brand-surface);
    font-family: var(--kbm-font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
}

.calc-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.calc-strong {
    font-weight: 600;
}

.calc-group + .calc-group,
.calc-section + .calc-groups .calc-group:first-child {
    border-top: 2px solid var(--kbm-brand-surface);
}

.calc-band {
    min-height: 52px;
    background: var(--kbm-line);
    color: var(--kbm-text);
}

.calc-band-none {
    min-height: 40px;
    background: var(--kbm-panel);
}

.calc-band-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    width: 100%;
    column-gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.calc-band-main:disabled {
    cursor: default;
}

.calc-band-name {
    font-family: var(--kbm-font-heading);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.calc-band-component,
.calc-band-count,
.calc-band-help,
.calc-each {
    font-size: 0.8125rem;
    color: var(--kbm-text-secondary);
}

.calc-band-count {
    font-family: var(--kbm-font-body);
    font-weight: 400;
}

.calc-band-quantity .mud-input-control {
    margin: 0;
}

.calc-band-help {
    line-height: 1.3;
}

.calc-each {
    display: block;
    font-weight: 400;
}

.calc-group-handle,
.calc-line-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    cursor: grab;
    color: var(--kbm-text-secondary);
}

.calc-group-handle:hover,
.calc-line-handle:hover {
    color: var(--kbm-accent);
}

.calc-lines {
    min-height: 8px;
}

.calc-item {
    border-top: 1px solid var(--kbm-line);
}

.calc-row {
    min-height: 52px;
}

.calc-row.calc-open {
    background: var(--kbm-panel);
    box-shadow: inset 3px 0 0 var(--kbm-accent);
}

.calc-row.calc-error {
    box-shadow: inset 3px 0 0 var(--mud-palette-error);
}

.calc-kind {
    display: inline-flex;
    color: var(--kbm-accent);
}

.calc-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 2px;
    min-width: 0;
    min-height: 44px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.calc-title {
    overflow-wrap: anywhere;
}

.calc-meta {
    font-size: 0.875rem;
    color: var(--kbm-text-secondary);
}

.calc-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--kbm-text-secondary);
    overflow-wrap: anywhere;
}

.calc-note .mud-icon-root {
    flex-shrink: 0;
    margin-top: 1px;
}

.calc-warning {
    font-size: 0.875rem;
    color: var(--mud-palette-warning-darken);
}

.calc-reserve {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--kbm-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.calc-reserve-inherited {
    border-style: dashed;
}

.calc-panel {
    padding: 12px 16px 16px 60px;
    background: var(--kbm-panel);
    border-top: 1px solid var(--kbm-line);
}

.calc-group-add {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 4px 6px 56px;
    border-top: 1px solid var(--kbm-line);
}

.calc-narrow {
    display: none;
}

.calc-ghost {
    opacity: 0.4;
}

.calc-totals {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 24px;
    margin-top: 12px;
    padding: 10px 12px;
    border-top: 2px solid var(--kbm-accent);
    background: var(--kbm-ground);
}

.calc-total {
    display: flex;
    flex-direction: column;
}

.calc-total-label {
    font-size: 0.8125rem;
    color: var(--kbm-text-secondary);
}

.calc-total-main {
    font-family: var(--kbm-font-heading);
    font-size: 1.25rem;
    color: var(--kbm-accent);
}

.calc-sheet {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 1150;
    display: flex;
    flex-direction: column;
    background: var(--kbm-ground);
}

.calc-sheet-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 6px 12px 6px 4px;
    border-bottom: 1px solid var(--kbm-line);
}

.calc-sheet-title {
    flex: 1;
    min-width: 0;
}

.calc-sheet-kind {
    font-family: var(--kbm-font-heading);
    font-weight: 600;
    font-size: 1.125rem;
}

.calc-sheet-group {
    font-size: 0.8125rem;
    color: var(--kbm-text-secondary);
}

.calc-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 24px;
}

@media (max-width: 599.98px) {
    .calc-grid {
        grid-template-columns: 24px minmax(0, 1fr) auto 40px;
        padding-left: 8px;
    }

    .calc-no-prices .calc-grid {
        grid-template-columns: 24px minmax(0, 1fr) 40px;
    }

    .calc-head,
    .calc-wide,
    .calc-group-handle,
    .calc-line-handle,
    .calc-band-help {
        display: none;
    }

    .calc-narrow {
        display: inline;
    }

    /* The band keeps its name wide: the quantity goes to a second row below the name. */
    .calc-prices .calc-band {
        grid-template-columns: 32px minmax(0, 1fr) auto 40px;
    }

    .calc-no-prices .calc-band {
        grid-template-columns: 32px minmax(0, 1fr) 40px;
    }

    .calc-band-quantity {
        grid-column: 2;
        grid-row: 2;
        max-width: 140px;
        padding-bottom: 6px;
    }

    .calc-band-quantity:empty {
        display: none;
    }

    .calc-panel {
        padding: 12px;
    }

    .calc-group-add {
        padding-left: 4px;
    }
}

/* Parts list tab (SCR-MD-5): build quantity and date stay narrow beside each other. */
.parts-list-toolbar .parts-list-quantity,
.parts-list-toolbar .parts-list-date {
    flex: 0 1 180px;
    min-width: 140px;
}

.parts-list-article {
    min-width: 0;
}

.parts-list-row + .parts-list-row {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 12px;
}

/* Lists ordered by hand (SortableRows, DragHandle, MoveMenu): the handle starts a drag with mouse or touch. */
.sortable-rows .drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 28px;
    min-height: 36px;
    cursor: grab;
    color: var(--mud-palette-text-secondary);
    touch-action: none;
}

/* A form grid beside the handle takes the rest of the row (its host measures its own width, so it has none of its own). */
.sortable-rows .sortable-row > .form-grid-host,
.sortable-rows .sortable-row > .mud-grid {
    flex: 1 1 0;
    min-width: 0;
}

.sortable-rows .drag-handle:hover {
    color: var(--mud-palette-primary);
}

.sortable-rows .drag-handle-disabled {
    visibility: hidden;
}

.sortable-rows .sortable-ghost {
    background: var(--kbm-blau-15);
}

.sortable-rows .sortable-drag {
    opacity: 0.9 !important;
    background: var(--mud-palette-surface);
}

/* A list of named choices of a settings page (ChoiceEntries: CRM channels, Resource planning block reasons): handle,
   name, then Active and the Move menu; where the row is too narrow (mobile view) these go under the name, so the name
   keeps the full width (F35). */
.choice-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.choice-entry > .drag-handle {
    margin-top: 6px;
}

.choice-entry-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

/* Narrow rows (mobile view): Active and Move under the name, at its right edge. */
@media (max-width: 599.98px) {
    .choice-entry {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .choice-entry-actions {
        grid-column: 2;
        justify-self: end;
        margin-top: 0;
    }
}

/* Change order (OrderDialog, F21): one row per record, a record under another one indented below it. */
.order-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.order-row-child {
    padding-inline-start: 24px;
}

.order-row-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Marketing: a newsletter's content (SCR-MKT-2) and a template (SCR-MKT-8): the block editor beside the mail's preview
   from 1280 px, the preview below it in narrower windows and the mobile view. */
.mail-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* Beside each other only where the blocks keep about 400 px next to the 600 px mail; narrower, the preview follows. */
@media (min-width: 1440px) {
    .mail-editor {
        grid-template-columns: minmax(0, 1fr) 620px;
        align-items: start;
    }

    .mail-editor > .mail-preview {
        position: sticky;
        top: 72px;
    }
}

/* Marketing: the preferences page of a newsletter's link (SCR-MKT-12), a narrow column like a mail. */
.preferences-page {
    max-width: 640px;
}

/* Marketing: the sign-up page's fields one below the other, and its honeypot out of sight (RUL-MKT-23). */
.signup-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.signup-website {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.signup-consent,
.signup-snippet {
    white-space: pre-line;
}

.signup-snippet {
    font-family: var(--mud-typography-default-family), monospace;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.block-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.mail-preview-frame-box {
    background: var(--kbm-papier);
    border: 1px solid var(--mud-palette-lines-default);
    overflow-x: auto;
}

.mail-preview-frame {
    display: block;
    border: 0;
    margin: 0 auto;
    height: 70vh;
    min-height: 480px;
    background: var(--kbm-weiss);
}

.mail-preview-desktop {
    width: 100%;
    min-width: 600px;
}

.mail-preview-mobile {
    width: 360px;
    max-width: 100%;
}

/* Two-option toggles (MudToggleGroup): every option as wide as its own text with room on both sides, never squeezed
   against its frame or broken into two lines, the same on every page. */
.mud-toggle-group.mud-toggle-group-horizontal {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    width: fit-content;
    max-width: 100%;
}

.mud-toggle-group.mud-toggle-group-horizontal > .mud-toggle-item {
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
}

/* AddressTabs Wrap: from 960 px every tab shows, on a second line where needed, the open one underlined (the slider
   and the scroll arrows only work on one line). */
@media (min-width: 960px) {
    .address-tabs-wrap .mud-tabs-tabbar-wrapper {
        flex-wrap: wrap;
        width: 100%;
        transform: none !important;
    }

    .address-tabs-wrap .mud-tabs-scroll-button,
    .address-tabs-wrap .mud-tab-slider {
        display: none;
    }

    .address-tabs-wrap .mud-tab {
        min-height: 40px;
        border-bottom: 2px solid transparent;
    }

    .address-tabs-wrap .mud-tab.mud-tab-active {
        border-bottom-color: var(--mud-palette-primary);
    }
}

/* Tables inside a page on a phone. A stacked MudTable (Breakpoint Sm) with class stacked-cells puts its label on the
   left and every line of a cell under each other on the right, instead of side by side word by word. */
@media (max-width: 959.98px) {
    .stacked-cells.mud-table .mud-table-row .mud-table-cell {
        display: grid;
        grid-template-columns: minmax(6rem, 40%) minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        text-align: right !important;
    }

    .stacked-cells.mud-table .mud-table-row .mud-table-cell::before {
        grid-column: 1;
        grid-row: 1 / span 20;
        padding: 0;
        text-align: left;
    }

    .stacked-cells.mud-table .mud-table-row .mud-table-cell > * {
        grid-column: 2;
        justify-self: end;
        min-width: 0;
    }

    .stacked-cells.mud-table .mud-table-row .mud-table-cell:not([data-label]),
    .stacked-cells.mud-table .mud-table-row .mud-table-cell[data-label=""] {
        display: flex;
        justify-content: flex-end;
    }
}

/* A plain table (MudSimpleTable) with class mobile-cards shows each row as a card of label and value lines below 600 px;
   each td names its column in data-label. */
@media (max-width: 599.98px) {
    .mobile-cards.mud-simple-table table thead {
        display: none;
    }

    .mobile-cards table,
    .mobile-cards tbody,
    .mobile-cards tr,
    .mobile-cards td {
        display: block;
        width: 100%;
    }

    .mobile-cards tr {
        padding: 6px 0;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .mobile-cards.mud-simple-table table tbody tr td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 4px 16px;
        border-bottom: none;
        text-align: right !important;
    }

    .mobile-cards td::before {
        content: attr(data-label);
        font-weight: 500;
        text-align: left;
    }

    /* Facts of a page (label in th, value in td): the value under its label. */
    .erp-facts tr,
    .erp-facts th,
    .erp-facts td {
        display: block;
        width: 100%;
    }

    .erp-facts.mud-simple-table table tbody tr th {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* The card board (CardBoard): one column in the mobile view, two from 960 px, three from 1280 px; a wide card takes
   two. Dense flow fills the hole a wide card would leave after two narrow ones. */
.card-board-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.card-board-item {
    min-width: 0;
}

@media (min-width: 960px) {
    .card-board-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row dense;
    }

    .card-board-wide {
        grid-column: span 2;
    }
}

@media (min-width: 1280px) {
    .card-board-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Warning texts (Color.Warning on MudText): Alpengelb is never a text colour (1.9:1 on white). The text stays black on
   a light Alpengelb ground, like a filled warning chip, in light and dark mode; a block text is only as wide as its
   words. An icon in Color.Warning next to text is drawn in the text colour: its shape says "warning". Outlined
   warning chips keep black text through KBM.Blazor.UI 0.4.3. MudBlazor sets .mud-warning-text with !important. */
.mud-typography.mud-warning-text {
    color: var(--kbm-schwarz) !important;
    background-color: var(--kbm-alpengelb-40);
    padding: 0 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.mud-typography.mud-warning-text:not(span) {
    width: fit-content;
    max-width: 100%;
}

.mud-icon-root.mud-warning-text {
    color: var(--mud-palette-text-primary) !important;
}