:root {
    --rz-primary: #D20000;
    --rz-primary-light: #e85555;
    --rz-primary-lighter: rgba(210, 0, 0, 0.15);
    --rz-secondary: #8D844D;
    --rz-secondary-light: #d5dcd5;
    --rz-secondary-lighter: rgba(91, 99, 113, 0.3);
    /* Text on a "lighter" primary/secondary surface. Radzen puts this on the selected segment
       of a RadzenSelectBar (the Ja/Nein toggles), on a hovered outlined or text button and on a
       "lighter" badge - the template left a blue here, which read as a second signal colour next
       to the Telenot red. Black, like every other piece of text on the page. */
    --rz-on-primary-lighter: #1a1a1a;
    --rz-on-secondary-lighter: #1a1a1a;
    --rz-input-disabled-color: var(--rz-input-value-color);
    --rz-input-disabled-background-color: #e9ecef;
    --rz-upload-choose-background-color: var(--rz-primary);
    --rz-upload-choose-color: var(--rz-on-primary);
    --rz-upload-choose-active-background-color: var(--rz-primary);
    --rz-upload-choose-active-color: var(--rz-on-primary);
    --rz-upload-choose-hover-background-color: var(--rz-primary);
    --rz-upload-choose-hover-color: var(--rz-on-primary);
    --rz-text-font-family: ManRope, sans-serif;
    --rz-grid-cell-font-size: 18px;
    --rz-grid-header-font-size: 18px;
    /*--rz-card-background-color: RGBA(229,180,45,0.2);*/
    --rz-grid-background-color: RGBA(0,0,0,0);
    --rz-text-h5-color: #000000;
    /*--rz-grid-header-background-color: #E5B42D;*/
    --rz-grid-header-background-color: RGBA(0,0,0,0);
    --rz-layout-body-padding: 0.5rem;
    --main-background-color: #F0EADC;
    --rz-tabs-tab-text-transform: none;
    --rz-header-background-color: #F0EADC;
    --rz-profile-menu-top-item-background-color: transparent;
    --greifcon-primary: rgb(0, 116, 85);
    --greifcon-primary-dark: rgb(0, 96, 70);
    --greifcon-primary-light: rgb(0, 136, 100);
    --greifcon-background: #ffffff;
    --telenot-primary: #C8102E;
    --telenot-primary-dark: #9E0C24;
    --telenot-primary-light: #E13A50;
    --rz-warning: #fbbc6e;
    --rz-info: #60aeeb;
}

@font-face {
    font-family: ManRope;
    src: src(manrope/Manrope-VariableFont_wght.ttf)
}

@font-face {
    font-family: ManRope;
    src: src(manrope/static/Manrope-Bold.ttf);
    font-weight: bold;
}

html, body {
    font-family: ManRope, sans-serif;
    font-size: 16px;
    /*background-color: var(--main-background-color);*/
    background-color: white;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    /*color: red;*/
    color: #ff5858;
}

.rz-cell-data {
    height: 30px;
}

#blazor-error-ui {
    background: lightyellow;
    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: 1000;
}

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.row {
    margin-bottom: 16px;
}

.logout-form-btn {
    background-color: #000000 !important;
    color: #4f4f50 !important;
    font-size: 14px !important;
    font-weight: unset !important;
    cursor: pointer !important;
    padding: 8px !important;
    width: 100%;
    text-align: left;
}

    .logout-form-btn:hover {
        background-color: #D9E3FD !important;
        color: #1151F3 !important;
    }

.rz-navigation-item-link {
    cursor: pointer !important;
}

.rz-footer {
    font-size: 10px;
    color: #576238;
    background-color: var(--main-background-color);
    ;
    text-align: center;
    height: 25px;
    padding: 6px 0px 0px 16px;
}

.rz-fileupload-buttonbar .rz-fileupload-choose {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

    .rz-fileupload-buttonbar .rz-fileupload-choose .rz-button-text {
        font-size: 14px;
    }

.rz-tabview-panels div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.rz-login {
    max-width: 500px;
}

.rz-login-buttons {
    justify-content: start !important;
}

.np-overview input {
    width: 30%;
}

.np-details input {
    width: 100%;
}

.np-details textarea {
    width: 100%;
}

.np-form-row-icon .rz-label:has(+ span) {
    flex: 0 0 auto !important;
}

.np-form-row-icon .rz-label + span {
    flex: 1 1 auto;
}

.np-icon-link {
    font-size: var(--rz-icon-size) !important;
}

.np-login-title {
    text-transform: uppercase;
}

hr.section-separator {
    width: 100%;
    height: 2px;
    border: 0;
    background-color: var(--rz-primary);
}

div.rz-body {
    /*background-color: var(--main-background-color);*/
    /*background-color: rgb(246, 246, 246);*/
    background-color: white;
    padding-left: 0;
    padding-right: 0;
}

.mw-0 {
    min-width: 0 !important;
}

.rz-inputtext:disabled {
    background-color: var(--rz-input-disabled-background-color);
}

.rz-link {
    color: var(--rz-primary) !important;
    text-decoration: underline !important;
}

    .rz-link .rz-link-text {
        color: var(--rz-primary);
        text-decoration: underline;
    }

.rz-label {
    color: #576238;
}

.add-button {
    width: 3rem;
    height: 3rem;
    border-radius: 30px;
    border: 1px solid var(--rz-primary);
}

.table-fat-header .rz-column-title * {
    font-weight: bold;
    padding-right: 0.5rem;
}

.compact-table tr td *, .compact-table tr th * {
    font-size: 13px !important;
}

.compact-table .rz-cell-data {
    height: 40px;
    line-height: 40px !important;
}

/*.larger-table tr td *, .larger-table tr th * {*/
/*    font-size: 0.8rem !important;*/
/*}*/

.larger-table tr th * {
    font-size: 0.8rem !important;
}

.larger-table th {
    border: none !important;
}

.larger-table tr:last-child td {
    border-bottom: none !important;
}

.larger-table .rz-cell-data {
    height: 55px;
    line-height: 55px !important;
}

.headerless-table thead {
    display: none;
}

.centered-tab-titles .rz-tabview-nav {
    justify-content: space-around;
}

.rz-footer {
    background-color: var(--rz-primary);
    padding-left: 0;
}

    .rz-footer * {
        color: var(--main-background-color);
    }

.borderless-table {
    border: none;
}

.rz-body {
    transform: none !important;
}

.rz-navigation-menu {
    top: -100% !important;
}

.rz-profile-menu .rz-navigation-item-icon-children {
    display: none; /* remove arrow */
}

.rz-profile-menu {
    padding: 0.75rem !important; /* same padding as buttons */
}

.small-line {
    line-height: 11px;
    font-size: 0.8rem !important;
}

.popup-without-title .rz-dialog-titlebar {
    display: none;
}

.rz-header {
    box-shadow: none;
}

.bg-yellow {
    background-color: #fdfd8c;
    background-color: var(--rz-primary);
    border-radius: 10px;
    color: white;
    border-radius: 35px 10px 10px 36px
}

#app-footer {
    background-color: white;
    border-top: solid 1px whitesmoke;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.selected-menu-button {
    border-bottom: var(--rz-primary) 2px solid;
    /*box-shadow: 0 -2px 0 var(--rz-primary) inset !important;*/
}

.circle-option {
    display: flex;
    border: solid var(--rz-primary) 1px;
    width: 2.5em;
    height: 2.5em;
    border-radius: 33px;
    text-align: center;
    cursor: pointer;
}

.circle-option-content {
    margin: auto;
}

.circle-option.selected {
    background-color: var(--rz-primary);
    color: white;
}

/* ============================================================
   BUTTONS - the admin panel's button, ported from
   Sources/Telenot.Configurator.Web/wwwroot/css/theme-overrides.css ("BUTTONS - mockup v24").

   The material theme draws ButtonStyle.Light as a grey slab with a shadow under it. The admin
   panel writes the same button the way the mockup does: a white ground, a 1 px border, no shadow.
   Client and admin are two front ends of one product, so the neutral button is the same button in
   both. What is taken over is the colour, the flat ground and the radius; the admin's size scale
   is not, because the client's rows and dialogs are laid out around the material sizes and would
   have to be re-measured for it.

   The theme's base rule ships "border: none", so every rule below writes the border out in full;
   a bare border-color would draw nothing. The buttons are box-sizing: border-box, so the 1 px does
   not make them any taller than the grey slab was.
   ============================================================ */

:root {
    /* The neutral button (ButtonStyle.Light): the admin's white ground with a quiet border. */
    --dp-btn-border-color: var(--rz-base-300);
    --dp-btn-border-hover-color: #c9cfcb;
    --dp-btn-surface: #ffffff;
    --dp-btn-surface-hover: #f6f8f6;

    /* The theme's own button tokens, set to the admin's values: flat instead of raised, and the
       radius the cards and panels of this app already use. These two are deliberately global
       rather than scoped to the neutral button - "Abbrechen" and "Herunterladen" stand next to
       each other in the same dialog footer, and a white 8 px button beside a red 4 px raised one
       reads as two different controls. */
    --rz-button-border-radius: var(--dp-radius);
    --rz-button-shadow: none;
    --rz-button-hover-shadow: none;
    --rz-button-focus-shadow: none;
    --rz-button-active-shadow: none;
}

.rz-button {
    text-transform: none;
}

/* ---------------------------------------------------------------- neutral (ButtonStyle.Light) */

.rz-button.rz-light:not(.rz-variant-text):not(.rz-variant-outlined) {
    background-color: var(--dp-btn-surface);
    border: 1px solid var(--dp-btn-border-color);
    color: var(--dp-text);
    box-shadow: none;
}

    .rz-button.rz-light:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-state-disabled):hover {
        background-color: var(--dp-btn-surface-hover);
        border-color: var(--dp-btn-border-hover-color);
        box-shadow: none;
    }

/* Destructive (ButtonStyle.Danger) is deliberately NOT written here. The delete of a saved door is
   a Variant.Text button, and both the admin panel and this app leave that one to the theme: a red
   caption on nothing, no ground and no frame. It stays that way. */

.numeric-no-padding input {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

.rz-dialog, .rz-dialog > .rz-dialog-content {
    padding: 0.5rem !important;
}

.grid-no-head thead {
    display: none;
}


.rz-body {
    padding-top: 0;
}

#page-content {
    background-color: white;
}

/*font-size: 0.8rem*/

.datepicker-grey-icon button {
    color: grey;
}

span.diary-amount {
    font-size: 1.3rem !important;
    color: grey;
}


.link-no-underline, .link-no-underline > .rz-link-text {
    text-decoration: none !important;
}

.smaller-button-paddings button {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.rz-navigation-item {
    list-style: none;
    margin: 0;
    padding: 0;
}


.rz-profile-menu .rz-navigation-item-link {
    display: flex;
    align-items: center; /* vertikal zentriert */
    gap: 0.5rem; /* Abstand zwischen Icon und Text */
    /* optional, je nach Design: */
    text-decoration: none;
}

.rz-profile-menu .rz-navigation-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* optional, wenn du eine fixe Icon-Größe willst */
    width: 24px;
    height: 24px;
    /* falls das ein Icon-Font ist und der Text minimal „springt“ */
    line-height: 1;
}


.diary-amount-input,
.diary-amount-input .rz-spinner-input,
.diary-amount-input .rz-inputtext {
    -webkit-appearance: none;
    appearance: none;
    /* Vertikale Zentrierung erzwingen */
    line-height: 1.2;
    /* Fixe Höhe + passende Padding-Werte */
    height: 2.5rem; /* oder was du verwendest */
    padding: 4px 8px;
    /* Verhindert, dass Safari irgendwas „komisches“ macht */
    display: inline-flex;
    align-items: center;
}


/* Der Login-Block in der Mitte */
.login-form {
    width: 100%;
    max-width: 400px; /* ggf. 450px/500px – nach Geschmack */
    margin: 0 auto; /* zentriert horizontal */
    gap: 1.5rem; /* etwas Abstand zwischen den Elementen */
}

    /* Radzen-Textfelder im Login: einmal über gesamte Breite */
    .login-form .rz-inputtext {
        width: 100%;
        box-sizing: border-box;
    }

    /* Passwort-Feld ist auch rz-inputtext, zur Sicherheit nochmal */
    .login-form .rz-password {
        width: 100%;
        box-sizing: border-box;
    }

    /* Optional: „Passwort vergessen“ rechts ausrichten über Container */
    .login-form a.link-no-underline {
        display: block;
        text-align: right;
    }

#app-footer .rz-button, #app-footer .rz-button::before {
    background-color: transparent !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

:root {
    --greifcon-primary: rgb(0, 116, 85);
    --greifcon-primary-dark: rgb(0, 96, 70);
    --dp-bg: #f2f4f3;
    --dp-text: #0d0d0d;
    --dp-text-secondary: #4a4a4a;
    --dp-text-muted: #888;
    --dp-border: rgba(0, 0, 0, 0.09);
    --dp-radius: 8px;
    --dp-radius-sm: 6px;
}

.login-page-layout {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.login-page-left {
    width: 42%;
    background-color: var(--telenot-primary);
    display: flex;
    flex-direction: column;
    padding: 48px 52px;
    flex-shrink: 0;
}

.login-page-customer-logo {
    display: block;
    max-width: 220px;
    height: auto;
    margin-bottom: 28px;
    filter: brightness(0) invert(1);
}

.login-page-left-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-page-right {
    flex: 1;
    background-color: var(--dp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    overflow-y: auto;
}

.login-page-form-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: var(--dp-radius);
    border: 1px solid var(--dp-border);
    padding: 36px 32px;
}

.login-page-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--dp-text);
    margin: 0 0 24px 0;
}

.login-page-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    gap: 8px;
}

.login-page-primary-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--telenot-primary);
    color: #ffffff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s;
    font-family: inherit;
    white-space: nowrap;
}

    .login-page-primary-btn:hover {
        background-color: var(--telenot-primary-dark);
    }

.login-page-forgot-link {
    font-size: 0.8125rem;
    color: var(--telenot-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

    .login-page-forgot-link:hover {
        color: var(--telenot-primary-dark);
        text-decoration: underline;
    }

.login-page-forgot-link--disabled,
.login-page-forgot-link--disabled:hover {
    color: var(--rz-text-disabled-color, #9e9e9e);
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
}

/* Tablet landscape and smaller - reduce left panel width */
@media (max-width: 1024px) {
    .login-page-left {
        width: 35%;
        padding: 32px 24px;
    }

    .login-page-customer-logo {
        max-width: 180px;
    }

    .login-page-right {
        padding: 32px 24px;
    }

    .login-page-form-card {
        max-width: 380px;
        padding: 32px 28px;
    }
}

/* Tablet portrait - hide left panel, optimize spacing */
@media (max-width: 768px) {
    .login-page-left {
        display: none;
    }

    .login-page-right {
        padding: 32px 24px;
        background-color: #ffffff;
    }

    .login-page-form-card {
        max-width: 100%;
        border: none;
        padding: 24px 16px;
        box-shadow: none;
    }

    .login-page-title {
        font-size: 1.25rem;
        margin-bottom: 20px;
    }

    .login-page-fields {
        gap: 14px;
    }

    .login-page-actions {
        margin-top: 18px;
        flex-wrap: wrap;
    }
}

/* Mobile devices - optimize for small screens */
@media (max-width: 480px) {
    .login-page-right {
        padding: 20px 16px;
    }

    .login-page-form-card {
        padding: 16px 12px;
    }

    .login-page-title {
        font-size: 1.125rem;
        margin-bottom: 16px;
    }

    .login-page-fields {
        gap: 12px;
    }

    .login-page-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        margin-top: 16px;
        gap: 12px;
    }

    .login-page-primary-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 0.9375rem;
    }

    .login-page-forgot-link {
        text-align: center;
        display: block;
        padding: 8px;
    }
}

/* Ensure touch-friendly input sizes on all mobile devices */
@media (max-width: 768px) {
    .login-page-fields .rz-textbox,
    .login-page-fields .rz-password,
    .login-page-fields input {
        min-height: 44px;
        font-size: 16px;
        padding: 10px 12px;
    }

    .login-page-primary-btn {
        min-height: 44px;
    }
}

/* Landscape orientation on mobile - adjust layout */
@media (max-width: 768px) and (orientation: landscape) {
    .login-page-right {
        padding: 20px 24px;
    }

    .login-page-form-card {
        padding: 20px 24px;
    }

    .login-page-title {
        font-size: 1.125rem;
        margin-bottom: 12px;
    }

    .login-page-fields {
        gap: 10px;
    }

    .login-page-actions {
        margin-top: 12px;
    }
}

/* ============================================================
   MEINE AUFTRÄGE – MOBILE APP LAYOUT
   ============================================================ */

:root {
    --ma-primary: #1A6B4A;
    --ma-primary-dark: #14532D;
    --ma-bg: #F0F2F5;
    --ma-header-height: 68px;
    --ma-bottom-nav-height: 64px;
}

/* Full-screen shell */
.ma-app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background-color: var(--ma-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

/* ---- Header ---- */
.ma-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--ma-header-height);
    padding: 0 16px;
    background-color: #ffffff;
    border-bottom: 3px solid var(--rz-primary, var(--ma-primary));
    flex-shrink: 0;
    padding-top: env(safe-area-inset-top);
}

.ma-header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ma-header-titles {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ma-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.ma-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--ma-bg);
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    line-height: 1;
}

/* ---- Main content area (scrollable) ---- */
.ma-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ---- Hero Banner ---- */
.ma-hero-banner {
    background-color: var(--ma-primary);
    padding: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ma-hero-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ma-hero-right {
    flex-shrink: 0;
}

.ma-hero-greeting {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ma-hero-date {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

/* ---- Orders scrollable list ---- */
.ma-orders-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 8px 16px;
}

/* ---- Day navigator (arrow ← label →) ---- */
.ma-day-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ma-day-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background-color 0.15s;
}

.ma-day-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.ma-day-nav-btn:not(:disabled):hover {
    background-color: rgba(255, 255, 255, 0.35);
}

.ma-day-nav-btn .material-icons {
    font-size: 20px;
}

.ma-day-nav-label {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 80px;
    width: 150px;
    text-align: center;
}

/* ---- Day header ---- */
.ma-day-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #888;
    text-transform: uppercase;
    margin: 12px 0 8px 0;
}

    .ma-day-header:first-child {
        margin-top: 0;
    }

/* ---- Order card ---- */
.ma-order-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ---- Time block ---- */
.ma-time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    width: 48px;
    height: 48px;
    background-color: var(--ma-primary);
    border-radius: 10px;
    flex-shrink: 0;
}

.ma-time-value {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.ma-time-uhr {
    color: rgba(255,255,255,0.75);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-top: 2px;
}

/* ---- Order info ---- */
.ma-order-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ma-order-number {
    font-size: 15px;
    font-weight: 700;
    color: #0d0d0d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ma-order-address {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Status badges ---- */
.ma-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.ma-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
}

.ma-status-abgeschlossen {
    background-color: #E8EDF8;
    color: #2d4dbf;
}

.ma-status-abgebrochen {
    background-color: #FDECEA;
    color: #b71c1c;
}

.ma-status-aktiv {
    background-color: #E6F9EE;
    color: #1a7a3a;
}

.ma-status-freigegeben {
    background-color: #E3F2FD;
    color: #1565c0;
}

.ma-status-geplant {
    background-color: #F3F4F6;
    color: #6B7280;
}

.ma-status-in-arbeit {
    background-color: #FFF8E1;
    color: #e65100;
}

.ma-status-offen {
    background-color: #FFF3E0;
    color: #b35a00;
}

.ma-status-pausiert {
    background-color: #FFF9E6;
    color: #7a5a00;
}

/* ---- Chevron ---- */
.ma-chevron {
    color: #bbb;
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

/* ---- Bottom Navigation ---- */
.ma-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: var(--ma-bottom-nav-height);
    background-color: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
    padding-bottom: env(safe-area-inset-bottom);
}

.ma-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.ma-nav-icon {
    font-size: 20px;
    line-height: 1;
    color: #9CA3AF;
}

.ma-nav-label {
    font-size: 11px;
    color: #9CA3AF;
    font-weight: 500;
}

.ma-nav-tab--active .ma-nav-icon,
.ma-nav-tab--active .ma-nav-label {
    color: var(--ma-primary);
}

/* Override Radzen body background for the mobile layout */
body:has(.ma-app-shell) {
    background-color: var(--ma-bg);
}

/* Make order cards clickable */
.ma-order-card {
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

    .ma-order-card:active {
        transform: scale(0.98);
    }

/* ============================================================
   AUFTRAGSDETAILS (ORDER DETAILS) – MOBILE APP LAYOUT
   ============================================================ */

/* Order Details page container */
.od-page {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background-color: #F3F4F6;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

/* ---- Header ---- */
.od-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
    padding-top: env(safe-area-inset-top);
}

.od-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 28px;
    font-weight: 300;
    color: #1A6B4A;
    padding: 0;
    line-height: 1;
}

.od-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.od-header-number {
    display: inline;
    font-size: 16px;
    font-weight: 750;
    color: #6a6a6a;
    margin-left: 4px;
    letter-spacing: 0.01em;
}

.dn-header-number-white {
    color: #dfdfdf;
}

.od-header-title-group {
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
}

.od-header-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 15px;
    background-color: #E8EDF8;
    color: #2d4dbf;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.od-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #E5E7EB;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    line-height: 1;
    filter: grayscale(100%);
}

    .od-icon-btn--disabled,
    .od-icon-btn[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

.od-icon-btn--green {
    background-color: #1A6B4A;
    color: #ffffff;
    filter: none;
    width: auto;
    border-radius: 20px;
    padding: 0 12px;
    gap: 4px;
}

    .od-icon-btn--green[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

.od-icon-btn--white {
    background-color: rgba(255,255,255,0.15);
    color: #ffffff;
    border: 1.5px solid rgba(255,255,255,0.6);
    filter: none;
    width: auto;
    border-radius: 20px;
    padding: 0 12px;
    gap: 4px;
}

    .od-icon-btn--white:hover {
        background-color: rgba(255,255,255,0.25);
    }

    .od-icon-btn--white[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

.od-icon-btn-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.od-data-value--action {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.od-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1A6B4A;
    font-size: 20px;
    text-decoration: none;
    flex-shrink: 0;
}

    .od-action-icon:hover {
        color: #145538;
    }

.od-timer-above-tabs {
    margin: 12px 16px 0 16px;
    border-radius: 12px;
}

/* ---- Split layout (OrderData tab) ---- */
.od-split-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.od-split-col {
    flex: 0 0 calc(50% - 8px);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.od-split-col--timer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.od-card--entries {
    flex-shrink: 0;
}

/* Cards inside split layout columns fill the available height */
.od-split-col > .od-card,
.od-split-col > .zt-card,
.od-split-col--timer > .od-card,
.od-split-col--timer > .zt-card {
    flex: 1;
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 600px) {
    .od-split-layout {
        flex-direction: column;
        align-items: stretch;
        flex: unset;
    }

    .od-split-col {
        flex: 1 1 auto;
    }

    .od-split-col > .od-card,
    .od-split-col > .zt-card,
    .od-split-col--timer > .od-card,
    .od-split-col--timer > .zt-card {
        flex: unset;
        margin-bottom: 16px;
        overflow: visible;
    }

    .zt-entries--incard {
        flex: unset;
        overflow-y: auto;
        max-height: 38vh;
    }

    .od-data-rows {
        flex: unset;
        overflow-y: visible;
    }
}

/* ============================================================
   LANDSCAPE TABLET OPTIMISATION
   Targets devices in landscape orientation wider than 600 px
   (tablets, foldables). Maximises use of available height by
   tightening chrome (header, tabs) and making the content area
   fill the remaining space compactly.
   ============================================================ */

@media (orientation: landscape) and (min-width: 601px) {

    /* Tighter header */
    .od-header {
        height: 44px;
    }

    /* Tighter tab strip */
    .od-tab {
        padding: 8px 8px;
    }

    /* Content area: switch to a flex-column that fills all remaining height
       so the split layout can stretch both columns to full height. */
    .od-content {
        padding: 10px 12px;
    }

    /* Split layout fills height and stretches both columns equally */
    .od-split-layout {
        gap: 12px;
    }

    /* Each column is a flex column so its inner card can fill height */
    .od-split-col {
        display: flex;
        flex-direction: column;
    }

    /* Cards in split layout fill the column height */
    .od-split-col > .od-card,
    .od-split-col > .zt-card {
        flex: 1;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Timer: compact big number */
    .zt-main-timer {
        font-size: 40px;
        padding: 4px 16px;
    }

    /* Subtitle under timer */
    .zt-pause-subtitle {
        padding-bottom: 8px;
    }

    /* Stats row more compact */
    .zt-stat {
        padding: 8px 6px;
    }

    .zt-stat-value {
        font-size: 15px;
    }

    /* Action buttons tighter */
    .zt-actions {
        padding: 10px 12px;
    }

    .zt-btn {
        height: 20px;
        font-size: 13px;
    }

    /* Card header compact */
    .zt-card-header {
        padding: 8px 12px;
    }

    /* Data rows tighter */
    .od-data-row {
        padding: 6px 12px;
    }

    .od-card-header {
        padding: 8px 12px;
    }

    /* Entries list: slightly tighter row padding */
    .zt-entry {
        padding: 8px 12px;
    }

    /* Positions rows tighter */
    .od-pos-row {
        padding: 7px 12px;
        min-height: 40px;
    }

    /* Image grid: slightly tighter */
    .od-img-grid {
        gap: 8px;
        padding: 8px;
    }

    .od-card {
        margin-bottom: 10px;
    }
}

/* ---- Tab Bar ---- */
.od-tabs {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 1px solid #E5E7EB;
    overflow-x: auto;
    flex-shrink: 0;
}

.od-tab {
    flex: 1;
    min-width: max-content;
    padding: 12px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.od-tab--active {
    color: #1A6B4A;
    border-bottom-color: #1A6B4A;
}

/* ---- Content Area ---- */
.od-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ---- Card ---- */
.od-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 16px;
}

.od-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #F3F4F6;
}

.od-info-icon {
    font-size: 18px;
    color: #3B82F6;
}

.od-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

/* ---- Data Rows ---- */
.od-data-rows {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.od-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #F3F4F6;
}

    .od-data-row:last-child {
        border-bottom: none;
    }

.od-data-label {
    font-size: 13px;
    color: #6B7280;
    flex-shrink: 0;
}

.od-data-value {
    font-size: 14px;
    color: #111827;
    text-align: right;
    margin-left: 12px;
}

/* ---- Status Badge (Order Details) ---- */
.od-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.od-status-offen {
    background-color: #FEF3C7;
    color: #92400E;
}

.od-status-aktiv {
    background-color: #E6F9EE;
    color: #1a7a3a;
}

.od-status-abgeschlossen {
    background-color: #E8EDF8;
    color: #2d4dbf;
}

/* ---- Timer status badge colours (used on Index order list) ---- */
.ma-status-zt-arbeit {
    background-color: #E6F9EE;
    color: #1a7a3a;
}

.ma-status-zt-pause {
    background-color: #FFF9E6;
    color: #7a5a00;
}

.ma-status-zt-gestoppt {
    background-color: #E8EDF8;
    color: #2d4dbf;
}

.ma-status-zt-nicht-gestartet {
    background-color: #F3F4F6;
    color: #6B7280;
}

/* ---- Primary Action Button ---- */
.od-primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    background-color: var(--greifcon-primary); /*#2563EB;*/
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background-color 0.15s;
}

    .od-primary-btn:hover {
        background-color: var(--greifcon-primary-dark); /*#1d4ed8;*/
    }

    .od-primary-btn:active {
        transform: scale(0.98);
    }

.od-danger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    background-color: #dc2626;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background-color 0.15s;
}

    .od-danger-btn:hover {
        background-color: #b91c1c;
    }

    .od-danger-btn:active {
        transform: scale(0.98);
    }

.od-btn-icon {
    font-size: 20px;
    line-height: 1;
}

/* ---- Placeholder ---- */
.od-placeholder {
    padding: 32px 16px;
    text-align: center;
    color: #6B7280;
}

/* ======================================================
   Zeiterfassung Tab
   ====================================================== */

/* Card header shared between timer and entries cards */
/* Timer card: flex column so stats+actions can be pushed to the bottom */
.zt-card {
    display: flex;
    flex-direction: column;
}

/* Wrapper for the big timer number + pause subtitle:
   fills remaining space and centers its content vertically */
.zt-timer-center {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.zt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #F3F4F6;
}

.zt-status-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Status dot */
.zt-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.zt-status-dot--arbeit {
    background-color: #22C55E;
}

.zt-status-dot--pause {
    background-color: #F59E0B;
}

.zt-status-dot--stopped {
    background-color: #9CA3AF;
}

.zt-since {
    font-size: 13px;
    color: #6B7280;
}

.zt-list-icon {
    font-size: 18px;
    color: #3B82F6;
    line-height: 1;
}

/* Main timer display */
.zt-main-timer {
    font-size: 56px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    padding: 4px 16px;
    letter-spacing: -1px;
    line-height: 1;
}

.zt-main-timer--stopped {
    color: #6B7280;
}

.zt-pause-subtitle {
    font-size: 13px;
    color: #6B7280;
    text-align: center;
    padding-bottom: 16px;
}

/* Stats row */
.zt-stats {
    display: flex;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}

.zt-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    gap: 4px;
}

.zt-stat--bordered {
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
}

.zt-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.zt-stat-label {
    font-size: 12px;
    color: #6B7280;
}

/* Action buttons */
.zt-actions {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
}

.zt-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

    .zt-btn:active {
        opacity: 0.8;
        transform: scale(0.98);
    }

.zt-btn-icon {
    font-size: 12px;
    line-height: 1;
}

.zt-btn--pause {
    background-color: #FEF3C7;
    color: #92400E;
}

.zt-btn--resume {
    background-color: #D1FAE5;
    color: #1A6B4A;
}

    .zt-btn--disabled {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

.zt-btn--stop {
    background-color: #FEE2E2;
    color: #DC2626;
}

/* Time entries list */
.zt-entries {
    display: flex;
    flex-direction: column;
}

.zt-entries--incard {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: 240px;
}

.zt-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
}

.zt-entry--bordered {
    border-bottom: 1px solid #F3F4F6;
}

.zt-entry-num {
    font-size: 11px;
    color: #9CA3AF;
    width: 14px;
    flex-shrink: 0;
    text-align: center;
}

.zt-entry-mid {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.zt-entry-icon-box {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

.zt-icon-arbeit {
    background-color: #D1FAE5;
    color: #1A6B4A;
}

.zt-icon-pause {
    background-color: #FEF3C7;
    color: #92400E;
}

.zt-entry-info {
    display: flex;
    flex-direction: column;
    gap: 0px;
    min-width: 0;
}

.zt-entry-range {
    font-size: 13px;
    color: #111827;
    white-space: nowrap;
}

.zt-entry-range--active {
    color: #1A6B4A;
}

.zt-entry-type {
    font-size: 12px;
    color: #6B7280;
}

.zt-entry-duration {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
    text-align: right;
    flex-shrink: 0;
}

.zt-entry-duration--active {
    color: #1A6B4A;
    font-weight: 700;
}

.zt-entry-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.zt-entry-comment {
    font-size: 12px;
    color: #6B7280;
    font-style: italic;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zt-entry-comment-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px !important;
    padding: 2px 4px;
    opacity: 0.5;
    border-radius: 4px;
    line-height: 1;
}

    .zt-entry-comment-btn:hover {
        opacity: 1;
        background-color: #F3F4F6;
    }

/* ---- Positionen Tab ---- */

/* Card header with add button */
.od-pos-header {
    justify-content: space-between;
}

.od-pos-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.od-pos-list-icon {
    font-size: 18px;
    color: #3B82F6;
}

.od-pos-add-btn {
    background-color: var(--greifcon-primary); /*#2563EB;*/
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
    white-space: nowrap;
}

    .od-pos-add-btn:hover {
        background-color: var(--greifcon-primary-dark); /*#1d4ed8;*/
    }

    .od-pos-add-btn:active {
        transform: scale(0.97);
    }

    .od-pos-add-btn--disabled,
    .od-pos-add-btn:disabled {
        background-color: #9CA3AF;
        cursor: not-allowed;
        opacity: 0.7;
    }

/* Position rows container */
.od-pos-rows {
    display: flex;
    flex-direction: column;
}

/* Individual position row */
.od-pos-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #F3F4F6;
    gap: 8px;
    min-height: 48px;
}

    .od-pos-row:last-child {
        border-bottom: none;
    }

/* Name column (grows to fill space) */
.od-pos-name {
    flex: 1;
    font-size: 14px;
    color: #111827;
}

/* Name column for automatic rows (flex column) */
.od-pos-name-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.od-pos-name-auto {
    font-size: 14px;
    color: #1A6B4A;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.od-pos-sublabel {
    font-size: 12px;
    color: #6B7280;
}

.od-pos-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    background-color: #D1FAE5;
    color: #065F46;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 8px;
}

/* Quantity column */
.od-pos-qty {
    font-size: 13px;
    color: #6B7280;
    min-width: 28px;
    text-align: center;
}

.od-pos-qty--num {
    min-width: 40px;
    text-align: right;
}

.od-pos-qty--unit {
    min-width: 50px;
    text-align: left;
}

/* Price column */
.od-pos-price {
    font-size: 14px;
    color: #111827;
    text-align: right;
    min-width: 64px;
}

/* Action button container for edit + delete in position rows */
.od-pos-action-buttons {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Edit button (outline primary style) */
.od-pos-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--greifcon-primary);
    color: var(--greifcon-primary);
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 16px !important;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}

    .od-pos-edit-btn .material-icons {
        font-size: 16px !important;
    }

    .od-pos-edit-btn:hover {
        background-color: rgba(0, 116, 85, 0.08);
    }

/* Delete button (outline danger style) */
.od-pos-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
    padding: 3px 5px;
    border-radius: 6px;
    font-size: 14px !important;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}

    .od-pos-delete-btn .material-icons {
        font-size: 14px !important;
    }

    .od-pos-delete-btn:hover {
        background-color: rgba(220, 38, 38, 0.07);
    }

/* Placeholder for action buttons in automatic/read-only rows */
.od-pos-action-placeholder {
    width: 68px; /* 2 × ~30px button + 4px gap */
    flex-shrink: 0;
}

/* Total row */
.od-pos-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #E5E7EB;
}

.od-pos-total-label {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.od-pos-total-value {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

/* ---- Bilder Tab ---- */

.od-img-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #EFF6FF;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.od-img-banner-icon {
    font-size: 16px;
    flex-shrink: 0;
    color: #3B82F6;
}

.od-img-banner-text {
    font-size: 13px;
    color: #1D4ED8;
    line-height: 1.4;
}

.od-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    padding-bottom: 116px;
}

.od-img-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
}

.od-img-tile--filled {
    background-color: #E5E7EB;
}

.od-img-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.od-img-tile-img--clickable {
    cursor: zoom-in;
}

.od-img-tile-label {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 0 0 0 12px;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-img-tile-actions {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.od-img-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

    .od-img-action-btn .material-icons {
        font-size: 14px !important;
    }

.od-img-action-btn--edit {
    background-color: #ffffff;
    border: 1px solid var(--greifcon-primary);
    color: var(--greifcon-primary);
}

.od-img-action-btn--delete {
    background-color: #ffffff;
    border: 1px solid #dc2626;
    color: #dc2626;
}

.od-img-tile--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #ffffff;
    border: 1.5px dashed #D1D5DB;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
}

    .od-img-tile--add:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.od-img-add-icon {
    font-size: 32px;
    color: var(--greifcon-primary); /*#2563EB;*/
    line-height: 1;
}

.od-img-add-text {
    font-size: 13px;
    color: #6B7280;
}

.od-img-uploading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    color: #6B7280;
    font-size: 13px;
}

.od-img-uploading-spinner {
    animation: od-spin 1s linear infinite;
    font-size: 18px;
}

.od-img-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    color: #6B7280;
    font-size: 13px;
}

.od-img-loading-spinner {
    animation: od-spin 1s linear infinite;
    font-size: 16px;
}

@keyframes od-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ---- Lightbox (fullscreen image view) ---- */

.od-lightbox-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 950;
}

.od-lightbox {
    position: fixed;
    inset: 0;
    z-index: 960;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

.od-lightbox-close {
    position: fixed;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 961;
}

    .od-lightbox-close:hover {
        background: rgba(0, 0, 0, 0.8);
    }

.od-lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}

.od-lightbox-label {
    margin-top: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* ---- Position dialog (add / edit / delete confirm) ---- */

.od-pos-name-link {
    flex: 1;
    font-size: 14px;
    color: #1A6B4A;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .od-pos-name-link:hover {
        color: var(--greifcon-primary-dark);
    }

/* Full-screen overlay backdrop */
.od-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 900;
}

/* Centered modal card */
.od-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 910;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: calc(100% - 32px);
    max-width: 400px;
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.od-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.od-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.od-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #6B7280;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

    .od-modal-close:hover {
        color: #111827;
    }

.od-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.od-modal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.od-modal-select,
.od-modal-input,
.od-modal-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    background-color: #ffffff;
    box-sizing: border-box;
    appearance: auto;
}

.od-modal-textarea {
    resize: vertical;
    font-family: inherit;
    appearance: none;
}

    .od-modal-select:focus,
    .od-modal-input:focus,
    .od-modal-textarea:focus {
        outline: none;
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

.od-modal-row {
    display: flex;
    gap: 12px;
}

.od-modal-field {
    flex: 1;
}

.od-modal-input--price {
    text-align: right;
}

.od-modal-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

    .od-modal-input-wrapper .od-modal-input {
        flex: 1;
    }

.od-modal-input--with-unit {
    padding-right: 44px;
}

.od-modal-input-unit {
    position: absolute;
    right: 12px;
    font-size: 13px;
    color: #6B7280;
    pointer-events: none;
    user-select: none;
}

.od-modal-confirm-text {
    font-size: 14px;
    color: #374151;
    margin: 0;
}

/* Action buttons */
.od-modal-btn {
    display: block;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background-color 0.15s, opacity 0.15s;
}

    .od-modal-btn:last-child {
        margin-bottom: 0;
    }

    .od-modal-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.od-modal-btn--primary {
    background-color: var(--greifcon-primary); /*#2563EB;*/
    color: #ffffff;
}

    .od-modal-btn--primary:hover:not(:disabled) {
        background-color: var(--greifcon-primary-dark); /*#1d4ed8;*/
    }

.od-modal-btn--secondary {
    background-color: #ffffff;
    color: #111827;
    border: 1.5px solid #D1D5DB;
}

    .od-modal-btn--secondary:hover {
        background-color: #F9FAFB;
    }

.od-modal-btn--danger {
    background-color: #DC2626;
    color: #ffffff;
}

    .od-modal-btn--danger:hover {
        background-color: #b91c1c;
    }

/* ============================================================
   PROFIL – MOBILE APP LAYOUT
   ============================================================ */

.ma-profil-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ma-profil-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}

.ma-profil-title {
    font-size: 20px;
    font-weight: 700;
    color: #0d0d0d;
}

.ma-profil-content {
    flex: 1;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.ma-profil-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.ma-profil-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--ma-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ma-profil-name {
    font-size: 18px;
    font-weight: 700;
    color: #0d0d0d;
    text-align: center;
}

.ma-profil-email {
    font-size: 14px;
    color: #6B7280;
    text-align: center;
}

.ma-profil-logout-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1.5px solid #DC2626;
    background-color: transparent;
    color: #DC2626;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

    .ma-profil-logout-btn:hover,
    .ma-profil-logout-btn:active {
        background-color: #DC2626;
        color: #ffffff;
    }

/* ============================================================
   DELIVERY NOTE (DN) – MOBILE APP LAYOUT
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────────── */

.dn-page {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background-color: #F2F4F7;
    overflow: hidden;
}

/* ── Top navigation bar ─────────────────────────────────────── */

.dn-nav-bar {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
    gap: 8px;
    z-index: 10;
}

.dn-back-btn {
    background: none;
    border: none;
    font-size: 26px;
    color: #374151;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.dn-nav-title {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
}

/* ── Loading state ──────────────────────────────────────────── */

.dn-loading {
    padding: 32px 16px;
    text-align: center;
    color: #6B7280;
}

/* ── Hero banner ────────────────────────────────────────────── */
/* (hero banner removed – header is now the green title bar) */

/* ── Scrollable content ─────────────────────────────────────── */

.dn-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: #ffffff;
}

/* ── Green header modifier (delivery note) ──────────────────── */

.dn-header-green {
    background-color: #0E7A5F !important;
    border-bottom: none !important;
}

.dn-back-btn-white {
    color: #ffffff !important;
}

.dn-header-title-white {
    color: #ffffff !important;
}

.dn-header-completed-badge {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.55);
    border-radius: 20px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Body / scrollable area ─────────────────────────────────── */

.dn-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #F2F4F7;
}

/* ── Top row: Kopfdaten + Artikel side by side ──────────────── */

.dn-top-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

@media (min-width: 600px) {
    .dn-top-row {
        flex-direction: row;
        align-items: stretch;
    }

    .dn-card--header-data,
    .dn-card--articles {
        flex: 1;
        min-width: 0;
    }
}

/* ── Card base ──────────────────────────────────────────────── */

.dn-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.dn-card--articles {
    display: flex;
    flex-direction: column;
}

.dn-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #9CA3AF;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    width: 100%;
}

.dn-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

    .dn-card-title-row .dn-card-title {
        margin-bottom: 0;
    }

.dn-card-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: #9CA3AF;
    letter-spacing: 0.04em;
    margin: 8px 0 6px;
}

.dn-card-divider {
    height: 1px;
    background-color: #F2F4F7;
    margin: 10px -16px;
}

/* ── Signatures card: full width, two sig-rows side by side ── */

.dn-card--signatures {
    flex-shrink: 0;
}

.dn-sig-row-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 600px) {
    .dn-sig-row-group {
        flex-direction: row;
        gap: 12px;
    }

    .dn-sig-row-group .dn-sig-row {
        flex: 1;
        border-radius: 8px;
        border: 1px solid #E5E7EB;
    }
}

/* ── Header data rows (shared by card) ──────────────────────── */

.dn-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0;
    gap: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 14px;
}

    .dn-header-row:last-of-type {
        border-bottom: none;
    }

.dn-header-label {
    color: #374151;
    font-size: 14px;
    flex: 1;
    min-width: 100px;
}

.dn-header-input {
    width: 90px;
    padding: 5px 10px;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    font-family: ManRope, sans-serif;
    color: #111827;
    background-color: #ffffff;
    text-align: left;
    flex-shrink: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    appearance: auto;
}

    .dn-header-input:focus {
        outline: none;
        border-color: var(--greifcon-primary);
        box-shadow: 0 0 0 3px rgba(0,116,85,0.12);
    }

    .dn-header-input:disabled {
        background-color: #F3F4F6;
        color: #9CA3AF;
        cursor: not-allowed;
    }

.dn-header-row--datetime {
    align-items: center;
}

.dn-header-datetime {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.dn-header-input--date {
    width: 120px;
}

.dn-header-input--time {
    width: 90px;
}

.dn-header-save-btn {
    display: block;
    margin-top: 12px;
    width: 100%;
    padding: 10px;
    background-color: #0E7A5F;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
}

    .dn-header-save-btn:hover {
        background-color: #0b6450;
    }

    .dn-header-save-btn--saving,
    .dn-header-save-btn:disabled {
        background-color: #9CA3AF;
        cursor: not-allowed;
    }

/* ── Automatic position row ─────────────────────────────────── */

.dn-article-row--automatic {
    background-color: #F9FAFB;
    color: #6B7280;
}

    .dn-article-row--automatic .dn-article-name {
        color: #6B7280;
    }

/* ── Header value (non-editable display text in Kopfdaten card) ─ */

.dn-header-value {
    font-size: 14px;
    color: #374151;
    text-align: right;
    flex-shrink: 0;
    max-width: 55%;
    word-break: break-word;
}

.dn-header-value--bold {
    font-weight: 600;
    color: #111827;
}

.dn-header-label-icon {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
    color: #6B7280;
}

.dn-header-value-readonly {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #374151;
    text-align: right;
    flex-shrink: 0;
    max-width: 55%;
}

.dn-header-field-icon {
    font-size: 16px;
    color: #6B7280;
    flex-shrink: 0;
}

.dn-header-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.dn-header-input-icon {
    position: absolute;
    right: 15px;
    font-size: 14px;
    color: black;
    pointer-events: none;
}

.dn-header-input--with-icon {
    padding-left: 10px !important;
}

/* ── Info rows section ──────────────────────────────────────── */

.dn-info-section {
    padding: 4px 0 0;
    border-bottom: 8px solid #F2F4F7;
}

.dn-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 14px;
}

.dn-info-row--last {
    border-bottom: none;
}

.dn-info-label {
    color: #6B7280;
    flex: 1;
}

.dn-info-value {
    color: #111827;
    text-align: right;
    max-width: 60%;
}

.dn-info-value--bold {
    font-weight: 600;
}

/* ── Articles section ───────────────────────────────────────── */

.dn-articles-section {
    padding: 0 0 4px;
    border-bottom: 8px solid #F2F4F7;
}

.dn-articles-header {
    display: flex;
    align-items: center;
    padding: 12px 20px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap: 8px;
}

.dn-articles-col-label {
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    color: #9CA3AF;
    letter-spacing: 0.05em;
}

.dn-articles-col-total {
    font-size: 11px;
    font-weight: 700;
    color: #9CA3AF;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.dn-add-btn {
    background-color: var(--greifcon-primary); /*#2563EB;*/
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    align-content: baseline;
}

    .dn-add-btn:hover {
        background-color: var(--greifcon-primary-dark); /*#1d4ed8;*/
    }

    .dn-add-btn--disabled,
    .dn-add-btn:disabled {
        background-color: #9CA3AF;
        cursor: not-allowed;
        opacity: 0.7;
    }

.dn-article-row {
    display: flex;
    align-items: center;
    padding: 7px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    gap: 8px;
    min-height: 36px;
}

    .dn-article-row:last-child {
        border-bottom: none;
    }

.dn-article-name {
    flex: 1;
    font-size: 14px;
    color: #111827;
}

.dn-article-qty {
    font-size: 13px;
    color: #6B7280;
    margin-left: 2px;
}

.dn-article-total {
    font-size: 14px;
    color: #111827;
    min-width: 70px;
    text-align: right;
    flex-shrink: 0;
}

/* Edit button (outline primary style) */
.dn-row-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--greifcon-primary);
    color: var(--greifcon-primary);
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 16px !important;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}

    .dn-row-edit-btn .material-icons {
        font-size: 16px !important;
    }

    .dn-row-edit-btn:hover {
        background-color: rgba(0, 116, 85, 0.08);
    }

/* Delete button (outline danger style) */
.dn-row-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
    padding: 3px 5px;
    border-radius: 6px;
    font-size: 14px !important;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}

    .dn-row-delete-btn .material-icons {
        font-size: 14px !important;
    }

    .dn-row-delete-btn:hover {
        background-color: rgba(220, 38, 38, 0.07);
    }

.dn-row-action-spacer {
    width: 68px; /* 2 × ~30px button + 4px gap */
    flex-shrink: 0;
}

/* ── Grand total row ────────────────────────────────────────── */

.dn-grand-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px 10px;
    border-top: 2px solid rgba(0,0,0,0.10);
    margin-top: 2px;
}

.dn-grand-total-label {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.dn-grand-total-value {
    font-size: 17px;
    font-weight: 700;
    color: #2563EB;
}

/* ── Generic section ────────────────────────────────────────── */

.dn-section {
    padding: 16px 20px 4px;
    border-bottom: 8px solid #F2F4F7;
}

.dn-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #9CA3AF;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

/* ── Images grid ────────────────────────────────────────────── */

.dn-img-scroll-wrapper {
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dn-img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.dn-img-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.dn-img-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #eee;
    transition: opacity 0.15s;
}

.dn-img-tile:hover .dn-img-thumb {
    opacity: 0.85;
}

.dn-img-label {
    font-size: 10px;
    color: #777;
    text-align: center;
    word-break: break-word;
    max-width: 80px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Signature rows ─────────────────────────────────────────── */

.dn-sig-row-wrapper {
    width: 100%;
    margin-bottom: 10px;
}

    .dn-sig-row-wrapper .dn-sig-row {
        margin-bottom: 0;
    }

.dn-sig-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}

    .dn-sig-delete-btn:hover {
        background-color: rgba(220, 38, 38, 0.07);
    }

    .dn-sig-delete-btn .material-icons {
        font-size: 16px;
    }

.dn-sig-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1.5px solid #D1D5DB;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s;
}

    .dn-sig-row:hover {
        border-color: #2563EB;
        background: #f8faff;
    }

.dn-sig-row--signed {
    border-color: #16A34A;
    background: #F0FDF4;
}

    .dn-sig-row--signed:hover {
        border-color: #15803d;
        background: #dcfce7;
    }

.dn-sig-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #DBEAFE;
    font-size: 18px;
    flex-shrink: 0;
}

.dn-sig-icon--signed {
    background-color: #DCFCE7;
}

.dn-sig-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dn-sig-row-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.dn-sig-row-sub {
    font-size: 12px;
    color: #6B7280;
}

.dn-sig-row--signed .dn-sig-row-sub {
    color: #16A34A;
}

.dn-sig-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.dn-sig-arrow {
    font-size: 22px;
    color: #9CA3AF;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Signature pad ──────────────────────────────────────────── */

.dn-sig-pad-section {
    margin-bottom: 12px;
    border: 1.5px solid #D1D5DB;
    border-radius: 12px;
    padding: 12px;
    background: #FAFAFA;
}

.dn-sig-pad-label {
    font-size: 12px;
    color: #6B7280;
    margin-bottom: 8px;
}

.dn-sig-canvas-wrapper {
    position: relative;
    border: 1.5px solid #D1D5DB;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    touch-action: none;
}

.dn-sig-canvas {
    display: block;
    width: 100%;
    height: 130px;
    cursor: crosshair;
}

.dn-sig-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.dn-sig-clear-btn {
    flex: 1;
    padding: 9px;
    border: 1.5px solid #D1D5DB;
    border-radius: 10px;
    background-color: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

    .dn-sig-clear-btn:hover {
        background-color: #F3F4F6;
    }

.dn-sig-save-btn {
    flex: 2;
    padding: 9px;
    border: none;
    border-radius: 10px;
    background-color: var(--greifcon-primary); /*#2563EB;*/
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
}

    .dn-sig-save-btn:hover {
        background-color: var(--greifcon-primary-dark); /*#1d4ed8;*/
    }

    .dn-sig-save-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── Complete order ─────────────────────────────────────────── */

.dn-complete-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 16px 16px 8px;
    padding: 16px 24px;
    background: var(--greifcon-primary); /*#2563EB;*/
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    text-align: center;
}

    .dn-complete-btn:hover:not(:disabled) {
        background: var(--greifcon-primary-dark); /*#1d4ed8;*/
    }

    .dn-complete-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.dn-complete-done {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 16px 8px;
    padding: 14px 18px;
    background: #F0FDF4;
    border: 2px solid #16A34A;
    border-radius: 12px;
    color: #15803d;
    font-weight: 600;
    font-size: 15px;
}

/* ── Disabled button modifier ──────────────────────────────── */

.od-primary-btn--disabled,
.od-primary-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.od-primary-btn--complete {
    background-color: #16a34a;
}

    .od-primary-btn--complete:hover {
        background-color: #15803d;
    }
#app {
    min-height: 100dvh;
}

/* ============================================================
   COLD START PROGRESS
   One panel for the whole start, shared by the splash in
   index.html (framework download) and AppLoadingOverlay.razor
   (everything after it) - identical markup on both sides, so the
   hand-over between them is invisible.
   Deliberately free of icon fonts and of every image but the
   logo: while the splash is on screen, nothing except this
   stylesheet has been downloaded yet.
   ============================================================ */

.cfg-boot {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: #ffffff;
    font-family: ManRope, sans-serif;
    transition: opacity 260ms ease;
}

/* Matches AppLoadingOverlay.FadeOutMs - the panel covers the whole window, and cutting it away in
   a single frame reads as a flash. */
.cfg-boot--closing {
    opacity: 0;
    pointer-events: none;
}

.cfg-boot-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
}

.cfg-boot-logo {
    height: 42px;
    width: auto;
    margin-bottom: 18px;
}

.cfg-boot-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
}

.cfg-boot-subtitle {
    margin-top: 4px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
}

.cfg-boot-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background-color: #e9e6e0;
    overflow: hidden;
}

.cfg-boot-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background-color: var(--rz-primary, #D20000);
    transition: width 220ms ease-out;
}

.cfg-boot-meter {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
}

.cfg-boot-meter-current {
    font-weight: 600;
    color: #1a1a1a;
}

.cfg-boot-meter-percent {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.cfg-boot-stages {
    width: 100%;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.cfg-boot-stage {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 13.5px;
    color: #9ca3af;
    transition: color 160ms ease;
}

.cfg-boot-stage-label {
    flex: 1;
    min-width: 0;
}

.cfg-boot-stage-detail {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

/* The state marker is drawn in CSS instead of with an icon font: the splash is painted before any
   stylesheet the application brings has been applied, and an unresolved ligature would show its
   name ("check") as plain text - the first thing the user would read. */
.cfg-boot-stage-icon {
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid #d8d4cd;
    border-radius: 50%;
}

.cfg-boot-stage--running {
    font-weight: 600;
    color: #1a1a1a;
}

    .cfg-boot-stage--running .cfg-boot-stage-icon {
        border-color: #e9e6e0;
        border-top-color: var(--rz-primary, #D20000);
        animation: cfg-boot-spin 700ms linear infinite;
    }

.cfg-boot-stage--done {
    color: #4b5563;
}

    .cfg-boot-stage--done .cfg-boot-stage-icon {
        border-color: var(--rz-primary, #D20000);
        background-color: var(--rz-primary, #D20000);
    }

        .cfg-boot-stage--done .cfg-boot-stage-icon::after {
            content: "";
            position: absolute;
            top: 2.5px;
            left: 2.5px;
            width: 6px;
            height: 3px;
            border-left: 2px solid #ffffff;
            border-bottom: 2px solid #ffffff;
            transform: rotate(-45deg);
        }

@keyframes cfg-boot-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cfg-boot,
    .cfg-boot-bar-fill {
        transition: none;
    }

    .cfg-boot-stage--running .cfg-boot-stage-icon {
        animation: none;
    }
}

/* ============================================================
   KONFIGURATOR PAGE
   ============================================================ */

.cfg-layout {
    height: 100%;
    overflow: hidden;
    /* No header row anymore - the header moved to MainLayout's ma-header. Keep the sidebar
       running the full height and the footer confined to the body column, instead of Radzen's
       default full-width footer row. */
    grid-template-areas:
        "rz-sidebar rz-body"
        "rz-sidebar rz-footer" !important;
    grid-template-rows: 1fr auto !important;
}

.cfg-header-logo-img {
    height: 38px;
    width: auto;
}

.cfg-header-title {
    margin: 0;
    font-weight: 700;
    color: #1a1a1a;
}

.cfg-header-subtitle {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.cfg-list-button-wrap {
    position: relative;
    display: inline-flex;
}

.cfg-list-button .rz-button-text {
    padding-right: 1.5rem;
}

.cfg-list-button-badge {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background-color: var(--rz-danger, #d32f2f);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

/* ---- Sidebar ---- */

.cfg-sidebar {
    width: 264px;
    overflow-x: hidden;
}

.cfg-sidebar-content {
    padding: 1rem 0.75rem;
    max-width: 100%;
}

.cfg-sidebar-heading {
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.cfg-roadmap {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.cfg-roadmap-item {
    display: flex;
    gap: 0.75rem;
    max-width: 100%;
}

.cfg-roadmap-item--clickable {
    cursor: pointer;
}

.cfg-roadmap-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.cfg-roadmap-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #d32f2f;
    color: #d32f2f;
    font-size: 0.8rem;
    font-weight: 700;
    background-color: #fff;
    box-sizing: border-box;
}

.cfg-roadmap-item--completed .cfg-roadmap-circle {
    background-color: #d32f2f;
    color: #fff;
}

/* The step on screen: a filled badge like a finished step, but ringed so it does not read as done.
   Before this the current step was drawn like the ones still ahead - pale - and the list gave no
   sign of where the configuration stood. */
.cfg-roadmap-item--current .cfg-roadmap-circle {
    background-color: #d32f2f;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.22);
}

.cfg-roadmap-circle-icon {
    font-size: 16px;
}

.cfg-roadmap-line {
    width: 2px;
    flex: 1 1 auto;
    min-height: 10px;
    margin: 2px 0;
    background-color: #f0b8b8;
}

.cfg-roadmap-content {
    min-width: 0;
    max-width: 100%;
    padding-bottom: 1.25rem;
}

.cfg-roadmap-title {
    font-weight: 700;
    color: #c9a3a3;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cfg-roadmap-item--completed .cfg-roadmap-title {
    color: #1a1a1a;
}

.cfg-roadmap-item--current .cfg-roadmap-title {
    color: #d32f2f;
}

.cfg-roadmap-field {
    font-size: 0.8rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cfg-roadmap-field-label {
    color: #c9a3a3;
}

.cfg-roadmap-field-value {
    font-weight: 600;
    color: #c9a3a3;
}

.cfg-roadmap-item--completed .cfg-roadmap-field-label,
.cfg-roadmap-item--current .cfg-roadmap-field-label {
    color: var(--rz-text-secondary-color);
}

.cfg-roadmap-item--completed .cfg-roadmap-field-value,
.cfg-roadmap-item--current .cfg-roadmap-field-value {
    color: #a30000;
}

/* The description of the answer - the diameter of a Knauf - beside its caption. */
.cfg-roadmap-field-note {
    color: #c9a3a3;
}

.cfg-roadmap-field-note::before {
    content: " · ";
}

.cfg-roadmap-item--completed .cfg-roadmap-field-note,
.cfg-roadmap-item--current .cfg-roadmap-field-note {
    color: var(--rz-text-secondary-color);
}

/* The picture of the answer, repeated under the attribute it belongs to. It is the picture of an
   option card, so it is scaled down to the width of the sidebar rather than shown at card size.
   Greyed out while the step is still ahead, in step with the text above it. */
.cfg-roadmap-field-img {
    display: block;
    width: 100%;
    max-width: 96px;
    height: auto;
    margin: 0.35rem 0 0.15rem;
    border-radius: 4px;
    opacity: 0.45;
    filter: grayscale(1);
}

.cfg-roadmap-item--completed .cfg-roadmap-field-img,
.cfg-roadmap-item--current .cfg-roadmap-field-img {
    opacity: 1;
    filter: none;
}

.cfg-roadmap-hint {
    color: var(--rz-text-secondary-color);
    margin-top: 0.5rem;
}

/* ---- Body ---- */

.cfg-body {
    min-height: 0;
    overflow: hidden;
}

/* Spacing is data-driven: the --cfg-* custom properties are set inline from the
   database (configurator-level with optional per-step overrides). When unset, the
   fallback in each var() reproduces the previous hard-coded spacing exactly. */
.cfg-body-content {
    padding: var(--cfg-content-padding, 1.5rem 2rem);
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--cfg-row-gap, 1rem);
}

.cfg-step-title {
    margin: 0;
    font-weight: 700;
}

.cfg-step-subtitle {
    color: var(--rz-text-secondary-color);
    margin-top: -0.5rem;
}

/* ---- Cards of a value block ("Wert vom anderen Attribut") ----
   The three shapes a block repeating other answers is drawn in: the hero card, the overview card
   and the section card. A result page ("Ihre Konfiguration") is an ordinary page, so the cards are
   placed by the field grid below - only how a card looks lives here, not where it sits. */

/* Two cards beside each other read as one band only when they end on the same line. The field grid
   aligns its columns to the top, which would leave the shorter of the two floating. */
.cfg-field-grid-col:has(> .cfg-summary-card) {
    align-self: stretch;
}

.cfg-summary-card {
    border: 1px solid var(--rz-border-base-200);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: none;
    height: 100%;
}

.cfg-summary-card-title {
    margin: 0;
    font-weight: 700;
}

.cfg-summary-card-sub {
    margin: 0.15rem 0 0;
    color: var(--rz-text-secondary-color);
}

/* Hero card */
.cfg-summary-hero-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* The pictured sides of the product, side by side and of equal width - the two halves of one
   door. Below a phone-sized viewport they stack; a picture squeezed into half of a narrow card
   says nothing. */
.cfg-summary-sides {
    margin-top: 0.85rem;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

/* Each side is a card of its own. Two product photos of the same door, side by side and both cut
   out against white, otherwise read as one wide picture - the frame is what separates them. */
.cfg-summary-side {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--rz-border-base-200);
    border-radius: 10px;
    background: var(--rz-base-100);
}

.cfg-summary-side-caption {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-weight: 600;
}

.cfg-summary-side-value {
    margin: 0;
    font-weight: 700;
}

/* No frame of its own: the card around it already is one, and two borders around one picture only
   compete with each other. */
.cfg-summary-hero-frame {
    flex: 1;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
}

.cfg-summary-hero-img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}

/* The far side of the door: the same photograph, seen from the other side. */
.cfg-summary-hero-img--mirrored {
    transform: scaleX(-1);
}

/* Overview card */
.cfg-summary-overview-card {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Highlight chips */
.cfg-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cfg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.cfg-chip-icon {
    font-size: 1rem;
}

.cfg-chip--feature {
    background: rgba(35, 134, 54, 0.12);
    color: #1a7f37;
}

/* Section cards */
.cfg-summary-section-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.cfg-summary-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cfg-summary-section-icon {
    font-size: 1.3rem;
    color: var(--rz-primary);
}

.cfg-summary-section-title {
    margin: 0;
    font-weight: 700;
}

.cfg-summary-section-rows {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* Label above value instead of side by side. The section cards sit four across, so the two
   columns had barely any room: long single words ("Sonderlackierung", "Schlüsselrosette") could
   not wrap, ran into the value next to them and were cut off at the card edge. Stacking keeps
   every entry readable no matter how narrow the card gets. */
.cfg-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
}

.cfg-summary-row-label,
.cfg-summary-row-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cfg-summary-row-label {
    color: var(--rz-text-secondary-color);
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.3;
}

.cfg-summary-row-value {
    font-weight: 700;
    line-height: 1.35;
}

/* ---- Elektronischer Knauf (KnaufPanel step) ----
   A control bar (Antipanik / Brandschutz / Kernziehschutz) on top of a responsive
   4-column layout: outside knob, profile-cylinder housing, inside knob, cylinder colour.
   Everything is data-driven; only the column arrangement is fixed. */

.cfg-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cfg-panel-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
}

.cfg-panel-radiogroup {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.cfg-panel-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-weight: 500;
}

.cfg-panel-radio-icon,
.cfg-panel-check-icon {
    color: var(--rz-text-secondary-color);
}

.cfg-panel-radio--selected .cfg-panel-radio-icon,
.cfg-panel-check-icon--on {
    color: var(--rz-primary);
}

.cfg-panel-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--rz-border-base-200);
    border-radius: 6px;
}

/* No "margin-left: auto" any more: pushed against the right edge the bar stood far away from the
   two switches beside it and was simply overlooked there. It now runs along in the control row. */
.cfg-panel-selectbar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cfg-panel-selectbar-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--rz-text-secondary-color);
}

/* align-items: a hint is as wide as its text, not as wide as the row it stands in. Stretched to the
   full panel width, a single short sentence read as a mostly empty blue band running the whole way
   across the screen. The card column below is the one exception, and for a reason of its own. */
.cfg-panel-warnings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* fit-content is what makes the box end with the sentence - Radzen's own alert style is width: 100%,
   so without it the box kept the full row no matter how short the text. The cap then makes a long
   hint wrap rather than run the whole way across: never wider than the row it sits in, and never
   wider than a comfortable line of text. */
.cfg-panel-warn {
    margin: 0;
    width: fit-content;
    max-width: min(100%, 78ch);
}

/* How far a free-standing notice on an ordinary step may run: the info box of an attribute and the
   note card of a Segment option. Both stop here, so their right edges line up down the page instead
   of each one ending wherever its own text happens to.
   In pixels rather than "ch" on purpose - "ch" is measured in the font size of the box it is written
   in, and these boxes are not all set in the same size, so a shared ch-value would still leave their
   edges apart. About 78 characters of the 15px the notices are set in. */
.cfg-body-content,
.cfg-modal {
    --cfg-notice-max-width: 640px;
}

/* The hint of a single attribute on an ordinary step - the alert directly inside the attribute's
   block. It takes the full width of the block up to that ceiling, rather than ending with its own
   sentence: a short hint under a long one stopped well short of it and the two read as unrelated
   scraps. The ceiling is what keeps it from running the whole way across the screen. The child
   selector wins over Radzen's own width: 100% without an extra class on every alert. */
.cfg-field-wrap > .rz-alert {
    margin: 0;
    width: 100%;
    max-width: min(100%, var(--cfg-notice-max-width, 640px));
}

/* Inside a card column a hint does span the whole width - here the box has a frame to line up with,
   the card it sits in, and a hint ending short of the card's edge read as a scrap dropped into it.
   min-width takes the width the card already has while width: 0 keeps the hint from deciding that
   width: a card column is as wide as its content, so otherwise a long sentence would set the card's
   width and push everything beside it to the right. The block around the hints is held the same way,
   or it passes the hint's own width on to the card and the guard on the hint changes nothing. */
.cfg-cardcol .cfg-panel-warnings {
    align-items: stretch;
}

.cfg-cardcol .cfg-panel-warnings,
.cfg-cardcol .cfg-panel-warn {
    width: 0;
    min-width: 100%;
    max-width: none;
}

/* --cfg-panel-cols is set inline per step: the number of card columns is data-driven
   (ConfigurationField.LayoutColumn), so it is passed through as a CSS custom property. */
/* The card columns take the width of their content and start at the left edge, instead of splitting
   the row into equal shares: a column holding a compact tile grid left half its share empty, and the
   card beside it was pushed to the middle of the page for no reason. The gap between them is the
   step's own ColumnGap - spacing is configuration here, like everywhere else on the page. */
.cfg-panel-columns {
    display: grid;
    grid-template-columns: repeat(var(--cfg-panel-cols, 4), minmax(0, auto));
    justify-content: start;
    gap: var(--cfg-col-gap, 1.25rem);
    align-items: start;
}

/* The hints of the control row, given a row of their own above the columns and held to the first
   track. That is the whole point of putting them in this grid: they end where the first column ends,
   and the first column is the card they are talking about. Nothing else on the page knows that
   width - the columns are as wide as their content, so it is not a number anyone can write down.
   width: 0 with min-width: 100% is what keeps the traffic one-way: the hints take the track's width
   without having any say in it, otherwise a long sentence would widen the card underneath. */
.cfg-panel-warnings--lead {
    grid-column: 1;
    grid-row: 1;
    align-items: stretch;
    width: 0;
    min-width: 100%;
}

.cfg-panel-warnings--lead .cfg-panel-warn {
    width: 0;
    min-width: 100%;
    max-width: none;
}

/* Only with that lead row present - an empty first row would still cost a row gap. */
.cfg-panel-columns--with-lead > .cfg-cardcol {
    grid-row: 2;
}

.cfg-cardcol {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Wrapped in a bordered card when the column's field has ShowAsCard = true - and it has to actually
   look like one. The border used to read "1px solid var(--rz-border-base-200)", and that token is
   not a colour but a whole border shorthand ("1px solid #eeeeee"): the declaration was invalid, the
   browser dropped it and the column stood there with no frame at all. Same trap as .cfg-panel-tile
   further down. The literal colour sidesteps it, a shade darker than the Radzen default so the card
   holds its own beside the tiles inside it. */
.cfg-cardcol--card {
    border: 1px solid #d8dde3;
    border-radius: 12px;
    padding: 1.25rem;
}

.cfg-cardcol-title {
    margin: 0;
    font-weight: 700;
}

.cfg-cardcol-sub {
    margin: -0.35rem 0 0.25rem;
    color: var(--rz-text-secondary-color);
}

.cfg-panel-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 2px solid var(--rz-border-base-200);
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    flex-wrap: wrap;
}

.cfg-panel-card--selected {
    border-color: var(--rz-primary);
}

.cfg-panel-card--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* The answer of a fixed attribute: unchanged to look at - the answer is what it states - only the
   pointer says there is nothing to click. Every other choice on such an attribute carries
   .cfg-option-card--disabled instead: it is out of reach for the rest of the run, and in its
   ordinary look it invited a click that then did nothing. */
.cfg-option-card--fixed {
    cursor: default;
}

/* A control field locked by a DisableField rule, and a single choice locked by DisableOption.
   Same treatment as the option cards, so a locked control reads as locked instead of just
   ignoring the click. */
.cfg-panel-control--disabled,
.cfg-panel-radio--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.cfg-panel-card-radio {
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
}

.cfg-panel-card-radio--on {
    color: var(--rz-primary);
}

.cfg-panel-card-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.cfg-panel-card-img--wide {
    width: 60px;
}

.cfg-panel-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.cfg-swatch {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.cfg-panel-card-label {
    font-weight: 700;
}

.cfg-panel-card--selected .cfg-panel-card-label {
    color: var(--rz-primary);
}

.cfg-panel-card-art,
.cfg-panel-card-sub {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.cfg-panel-card-standard {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--rz-primary);
}

.cfg-panel-variants {
    flex: 1 1 100%;
    margin-top: 0.25rem;
}

.cfg-panel-mass {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Several tile attributes of one card column stand side by side instead of one below the other:
   two sets of measurements (Außenmaß / Innenmaß) each a few tiles wide made a needlessly tall
   column stacked, while beside each other they read as the one card they belong to. A column with
   a single tile attribute is unaffected - it simply is the only item in the row. */
.cfg-panel-tilefields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 2rem;
}

/* An attribute drawn as tiles: caption above, then its choices as a grid of small buttons. The
   number of columns is the attribute's own (--cfg-tile-cols), so a set of measurements can be laid
   out four across while another attribute stays at two. */
.cfg-panel-tilefield {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* The tracks are capped instead of sharing the column ("1fr"), and the grid starts at the left edge
   rather than filling the width: a two-digit measurement needs no more room than this, and with
   stretched tracks a low column count blew the tiles up again instead of shortening the row. The
   tiles per row come from the attribute (LayoutColumns), the ceiling per tile from here.
   The cap is also what sets the width of the card the tiles sit in - the Profilzylinder-Gehäuse is
   two of these grids side by side and nothing else, so its width is six of these tracks plus the
   gaps. The hints in that card run the card's full width, which is the other reason the ceiling is
   not as low as the digits alone would allow. */
.cfg-panel-tiles {
    display: grid;
    grid-template-columns: repeat(var(--cfg-tile-cols, 4), minmax(0, 96px));
    justify-content: start;
    gap: 0.4rem;
}

/* The resting border is spelled out in a literal colour on purpose. The Radzen tokens are not
   colours: --rz-border-base-200 holds a whole shorthand ("1px solid #eeeeee") and
   --rz-border-disabled-color is not defined at all, so "2px solid var(--rz-border-<either>)"
   is an invalid declaration - the browser drops the entire border and the tile ends up with none.
   Only --rz-primary below is a real colour token. */
.cfg-panel-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.35rem 0.25rem;
    border: 2px solid #ccd2da;
    border-radius: 8px;
    background: #fff;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.cfg-panel-tile:hover {
    border-color: var(--rz-primary);
}

.cfg-panel-tile--selected {
    border-color: var(--rz-primary);
    background: rgba(210, 0, 0, 0.06);
    color: var(--rz-primary);
}

.cfg-panel-tile--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.cfg-panel-mass-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cfg-panel-mass-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

/* Literal colour for the same reason as .cfg-cardcol--card above. */
.cfg-computed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid #d8dde3;
    border-radius: 10px;
    text-align: center;
}

/* Inside a card column the computed block already is the card: the column brings the border and the
   padding, so a box of its own around the same content only drew a frame inside a frame. */
.cfg-cardcol--card .cfg-computed {
    border: 0;
    border-radius: 0;
    padding: 0;
}

.cfg-computed-img {
    width: 100%;
    max-width: 150px;
    height: 130px;
    object-fit: contain;
}

.cfg-computed-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--rz-border-base-300, #d4d4d4);
    border-radius: 8px;
    color: #c4c4c4;
}

.cfg-computed-img--placeholder i {
    font-size: 2.5rem;
}

.cfg-computed-lines {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    color: #333;
}

.cfg-computed-article {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: rgba(35, 134, 54, 0.12);
    color: #1a7f37;
    font-weight: 700;
    font-size: 0.85rem;
    word-break: break-word;
}

@media (max-width: 1200px) {
    /* auto-fit rather than a fixed count: a step with fewer columns than fit keeps the
       full width instead of leaving empty tracks beside its cards. */
    .cfg-panel-columns {
        grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    }
}

@media (max-width: 760px) {
    .cfg-panel-columns {
        grid-template-columns: 1fr;
    }
}

/* ---- Field layout (rows / columns) ----
   Multi-column rows lay out on a 12-column grid. Each column spans --cfg-span grid
   tracks, which is data-driven (ConfigurationField.ColumnSpan, e.g. 5 = "col-5").
   When no ColumnSpan is configured the engine assigns every column an equal span,
   reproducing the previous equal-width flex layout. */

.cfg-field-row {
    display: flex;
    flex-direction: column;
    gap: var(--cfg-field-gap, 1rem);
}

.cfg-field-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--cfg-col-gap, 1.5rem);
    align-items: start;
}

.cfg-field-grid-col {
    grid-column: span var(--cfg-span, 12);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cfg-field-gap, 1rem);
}

.cfg-field-col-full {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cfg-field-gap, 1rem);
}

/* Collapse the field grid to a single column when the viewport is too narrow to
   hold two side-by-side option grids without squeezing them below a usable width.
   The compact option tiles (Türdicke/Vierkant) are fixed-size and cannot shrink,
   so ~1280px is the threshold below which stacking reads cleaner than cramming
   (leaves headroom for a vertical scrollbar next to two 420px tile grids). */
@media (max-width: 1280px) {
    .cfg-field-grid {
        grid-template-columns: 1fr;
    }

    .cfg-field-grid-col {
        grid-column: 1 / -1;
    }
}

.cfg-field-wrap {
    width: 100%;
}

.cfg-field-help-below {
    display: block;
    /* A hint may be written as several lines - the note blocks are set the same way. */
    white-space: pre-line;
    color: var(--rz-text-secondary-color);
}

/* A locked attribute fades - but only what is locked. The hint below it keeps its ordinary look:
   it is the one thing on a locked attribute that still has something to say, and a hint at 45 %
   reads as switched off along with the input.

   Therefore per child and not on the wrapper: opacity builds its own compositing group, so a child
   can never be less transparent than its parent - a faded wrapper cannot be undone further in. */
.cfg-field-wrap--disabled > *:not(.rz-alert) {
    opacity: 0.45;
    pointer-events: none;
}

.cfg-field-label {
    font-weight: 600;
    margin: 0;
}

/* A "Bild" block shows no caption, but it keeps the caption's line: standing next to an attribute
   that has one, the picture would otherwise begin a caption-height higher and the row would read as
   misaligned. Hidden rather than removed, so the reserved height is exactly a caption's - no magic
   number to keep in step with the font. */
.cfg-field-label-reserved {
    visibility: hidden;
}

/* ---- Generic small helpers reused across the page ---- */

.cfg-title-sm {
    margin: 0;
    font-weight: 600;
}

.cfg-title-sm-ellipsis {
    margin: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfg-title-sm-center {
    margin: 0;
    font-weight: 600;
    text-align: center;
}

.cfg-text-secondary {
    color: var(--rz-text-secondary-color);
}

.cfg-flex-1 {
    flex: 1;
}

.cfg-flex-1-minw0 {
    flex: 1;
    min-width: 0;
}

.cfg-flex-1-minh0 {
    flex: 1;
    min-height: 0;
}

.cfg-flex-shrink-0 {
    flex-shrink: 0;
}

/* ---- Segment field images / notes ---- */

.cfg-img-140 {
    max-height: 140px;
    object-fit: contain;
    border-radius: 4px;
}

.cfg-img-note {
    width: 160px;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

/* The note block of a Segment option - the pictures and the list belonging to one answer. It is
   held to the same ceiling as the info boxes above it (see --cfg-notice-max-width): the attributes
   of an ordinary step take the full content width, so without it the card ran to the far edge of the
   screen while the hints above stopped in the middle. */
.cfg-note-card {
    padding: 1rem;
    max-width: min(100%, var(--cfg-notice-max-width, 640px));
    background: var(--rz-base-100);
    border: 1px solid var(--rz-border-base-200);
}

.cfg-note-text {
    white-space: pre-line;
    color: var(--rz-text-secondary-color);
}

/* ---- Option cards (grid of selectable options) ---- */

.cfg-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}

/* --cfg-cols is set inline per field: the number of grid columns is
   data-driven (ConfiguratorFieldDto.LayoutColumns) and has no fixed set
   of values, so it is passed through as a single CSS custom property. */
.cfg-options-grid {
    display: grid;
    grid-template-columns: repeat(var(--cfg-cols, 2), 1fr);
    gap: var(--cfg-options-gap, 0.75rem);
    align-content: start;
    flex: 1;
    min-width: 0;
}

/* Used for compact fields (e.g. Türdicke/Vierkant) whose cards should be
   small, uniform tiles rather than stretching to fill whatever row width
   happens to be left over. Each field renders its own independent grid, so
   only a fixed (not content-driven) column size guarantees Türdicke's tiles
   match Vierkant's exactly instead of drifting apart based on which one has
   longer labels/badges. Fixed-length tracks can't shrink on their own, so
   this relies on the flex-wrap on .cfg-options-row (and the field-col-flex
   wrap on the row above it) to reflow instead of forcing a horizontal
   scrollbar on narrow viewports. */
.cfg-options-grid--fit-content {
    grid-template-columns: repeat(var(--cfg-cols, 2), 132px);
    justify-content: start;
    align-items: stretch;
    flex: 0 0 auto;
}

/* Equalises height within a row even when only some cards carry a badge. */
.cfg-options-grid--fit-content .cfg-option-card {
    height: 100%;
}

/* --cfg-card-padding / --cfg-card-height come from per-option configuration
   data (ConfiguratorOptionDto.CardPadding / CardHeight) and are likewise
   passed through as CSS custom properties rather than fixed classes. */
.cfg-option-card {
    cursor: pointer;
    opacity: 1;
    border: 2px solid var(--rz-border-disabled-color);
    background: var(--rz-base-background-color);
    padding: var(--cfg-card-padding, 16px) !important;
    height: var(--cfg-card-height, auto);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

.cfg-option-card--disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.cfg-option-card--selected {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
}

.cfg-option-body--fill {
    height: 100%;
    overflow: hidden;
}

/* --cfg-img-max-height is derived per-card from CardHeight/CardPadding data. */
.cfg-option-img {
    width: 100%;
    object-fit: contain;
    border-radius: 4px;
    max-height: var(--cfg-img-max-height, 140px);
}

.cfg-option-img-right {
    max-height: 80px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Picture between the mark and the caption: a fixed, non-shrinking column. Without a
   width of its own the picture is a flex item of width:100% and claims the row the
   caption is supposed to share with it. */
.cfg-option-img-left {
    width: 140px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 4px;
    max-height: var(--cfg-img-max-height, 120px);
}

/* Progressive disclosure: the choices an attribute marks as secondary
   (ConfigurationOption.IsSecondary) wait behind this row. It spans the whole option
   grid whatever number of columns the attribute uses, and the unfolded choices sit
   indented below it so they read as belonging to the row that revealed them. */
.cfg-options-fold {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--cfg-options-gap, 0.75rem);
    min-width: 0;
}

.cfg-options-fold-toggle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cfg-options-fold-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.cfg-options-fold-toggle.cfg-option-card--selected .cfg-options-fold-label {
    color: var(--rz-primary);
}

.cfg-options-fold-icon {
    flex-shrink: 0;
    color: var(--rz-text-secondary-color);
}

.cfg-options-fold-items {
    padding-left: 1.5rem;
}

.cfg-option-icon {
    margin-top: 2px;
    color: var(--rz-text-secondary-color);
}

.cfg-option-icon--selected {
    color: var(--rz-primary);
}

.cfg-option-icon-sized {
    font-size: 24px;
    color: var(--rz-text-secondary-color);
}

.cfg-option-icon-sized--compact {
    font-size: 16px;
}

.cfg-option-icon-sized--selected {
    color: var(--rz-primary);
}

/* ---- Notices: hints and warnings ----
   One look for every alert of the configurator - inside a step and inside its dialogs alike, which
   is what the two-part prefix is for; a notice must not change its appearance by being read in a
   modal. Whatever it says: the fill is a light wash of the
   severity colour, the border the same colour at half strength - clearly stronger than the fill -
   and the icon a filled disc at the left. Radzen's own alert is a borderless block whose fill
   carries the whole signal; on a page made of white cards that read as a coloured smear rather
   than a notice, and the smaller the card, the less of a box was left of it. The rules per
   severity below swap nothing but --cfg-alert-accent.
   Every notice here is permanent - each call site passes AllowClose="false". A hint belongs to the
   option or the attribute it explains, and stays as long as that one is on screen. */
:is(.cfg-body-content, .cfg-modal) .rz-alert {
    --cfg-alert-accent: var(--rz-info);
    --cfg-alert-text: var(--rz-info-darker);
    --cfg-alert-disc: 1.5rem;
    --rz-alert-gap: 0.6rem;
    --rz-alert-padding: 0.5rem 0.75rem;
    align-items: center;
    /* One type size for every notice, whatever size the call site asks for - a hint is read the same
       way wherever it stands, and the sizes only decide how much box there is around it. */
    font-size: 15px;
    line-height: 1.25;
    border: 2px solid color-mix(in srgb, var(--cfg-alert-accent) 58%, #fff);
    border-radius: 12px;
    background: color-mix(in srgb, var(--cfg-alert-accent) 10%, #fff);
    color: var(--cfg-alert-text);
    box-shadow: none !important;
    filter: none;
}

/* The warning of an option card sits inside a tile that is often no wider than its picture, so it
   takes the same look one size down - box, disc and padding only. The text keeps the one size every
   notice is set in. */
:is(.cfg-body-content, .cfg-modal) .rz-alert.rz-alert-xs {
    --cfg-alert-disc: 1.15rem;
    --rz-alert-gap: 0.4rem;
    --rz-alert-padding: 0.3rem 0.5rem;
    border-width: 1.5px;
    border-radius: 9px;
}

:is(.cfg-body-content, .cfg-modal) .rz-alert .rz-alert-item {
    align-items: center;
}

:is(.cfg-body-content, .cfg-modal) .rz-alert .rz-alert-message {
    margin: 0;
    font-weight: 500;
}

:is(.cfg-body-content, .cfg-modal) .rz-alert .rz-alert-title {
    margin-bottom: 0.1rem;
    color: var(--cfg-alert-text);
}

/* The icon as a filled disc: the saturated colour sits in one small spot, which is what lets the
   box itself stay pale. Width and height beat .rzi's own 1em, so the disc keeps its shape no
   matter which glyph the call site picks. */
:is(.cfg-body-content, .cfg-modal) .rz-alert .rz-alert-icon {
    --rz-icon-fill: 1;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--cfg-alert-disc);
    height: var(--cfg-alert-disc);
    margin: 0;
    border-radius: 50%;
    background: var(--cfg-alert-accent);
    color: #fff;
    font-size: calc(var(--cfg-alert-disc) * 0.68);
    line-height: 1;
}

:is(.cfg-body-content, .cfg-modal) .rz-alert.rz-info {
    --cfg-alert-accent: var(--rz-info);
    --cfg-alert-text: var(--rz-info-darker);
}

:is(.cfg-body-content, .cfg-modal) .rz-alert.rz-warning {
    --cfg-alert-accent: var(--rz-warning);
    --cfg-alert-text: var(--rz-warning-darker);
}

:is(.cfg-body-content, .cfg-modal) .rz-alert.rz-danger,
:is(.cfg-body-content, .cfg-modal) .rz-alert.rz-error {
    --cfg-alert-accent: var(--rz-danger);
    --cfg-alert-text: var(--rz-danger-darker);
}

:is(.cfg-body-content, .cfg-modal) .rz-alert.rz-success {
    --cfg-alert-accent: var(--rz-success);
    --cfg-alert-text: var(--rz-success-darker);
}

/* A "Light" alert says something without ranking it - the neutral note of the live preview. Same
   shape, no colour signal. */
:is(.cfg-body-content, .cfg-modal) .rz-alert.rz-light,
:is(.cfg-body-content, .cfg-modal) .rz-alert.rz-base,
:is(.cfg-body-content, .cfg-modal) .rz-alert.rz-secondary {
    --cfg-alert-accent: var(--rz-base-500);
    --cfg-alert-text: var(--rz-text-color);
}

.cfg-warn-top {
    margin-bottom: 0.4rem;
}

.cfg-warn-above-image {
    margin-bottom: 0.25rem;
}

.cfg-warn-below-image {
    margin-top: 0.25rem;
}

.cfg-warn-bottom {
    margin-top: 0.4rem;
}

.cfg-child-field {
    margin-top: 0.75rem;
}

.cfg-child-field-label {
    color: var(--rz-text-secondary-color);
    margin: 0 0 0.25rem 0;
}

/* The picture of a "Bild" attribute - a block of its own on the field grid, so where it sits is
   said by its grid position. --cfg-field-img-width comes from ConfiguratorFieldDto.ImageWidth
   (data-driven) and caps it inside that column. */
.cfg-field-img {
    height: auto;
    align-self: stretch;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
    width: var(--cfg-field-img-width, 220px);
    /* The width above is what the picture asks for, not what it gets: a column narrower than that
       - a narrow window, or simply a small ColumnSpan - would otherwise let it spill over its
       neighbour. */
    max-width: 100%;
}

.cfg-warning-img {
    width: 80px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

/* The base statement of an attribute as a symbol beside its caption: the disc the info box carries
   at its left, in the same info colour, with a white "i" in it - so the symbol and the box are
   read as one and the same notice; only the text has moved into the tooltip. It takes the small
   size of an .rz-alert-xs disc: standing beside a caption rather than at the head of a box, the
   full 1.5rem read as a control instead of as a mark on one. See the disc under "Notices" above.

   The outer span is the hit area, the inner one is the disc with the letter in it. */
.cfg-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* A quarter rem of reach on every side, taken straight back off the layout so the row is
       spaced by the disc alone: a circle this small is otherwise a hard thing to hit. */
    padding: 0.25rem;
    margin: -0.25rem;
    cursor: help;
}

.cfg-notice-icon:focus-visible {
    outline: none;
}

.cfg-notice-icon-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--rz-info);
    color: #fff;
    /* The page font, not the icon font: this is a letter, and it should be the same one the
       caption beside it is set in. */
    font-size: 0.8rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    /* One hit target, and only one: while the mark answered for itself, crossing from the ring
       onto it counted as leaving the span and the tooltip closed again under the pointer. */
    pointer-events: none;
    user-select: none;
}

.cfg-notice-icon:hover .cfg-notice-icon-mark,
.cfg-notice-icon:focus-visible .cfg-notice-icon-mark {
    filter: brightness(0.92);
}

/* The tooltip carries whole sentences, so it needs a width to wrap in - the default sizes itself
   to the text and would run off the page. Several hints stand as several paragraphs. */
.cfg-notice-tooltip {
    max-width: 22rem;
    font-size: 0.875rem;
    white-space: normal;
    line-height: 1.35;
}

.cfg-notice-tooltip > div + div {
    margin-top: 0.5rem;
}

.cfg-article-number {
    color: var(--rz-success);
    font-weight: 600;
}

/* ---- Footer ---- */

.cfg-progress-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--rz-border-base-200);
}

.cfg-progress-fill {
    height: 100%;
    background-color: #d32f2f;
    transition: width 0.3s ease;
}

.cfg-footer {
    min-height: 60px;
    background-color: var(--rz-base-100);
    border-top: 1px solid var(--rz-border-base-200);
    position: relative;
    display: flex;
    align-items: center;
}

.cfg-footer-inner {
    width: 100%;
    padding: 0 1.25rem;
}

.cfg-footer-step-label {
    margin: 0;
    color: black;
}

/* ---- Add-door / configuration-list modals ---- */

.cfg-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.cfg-modal {
    background-color: #fff;
    border-radius: 8px;
    width: 640px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.cfg-modal--wide {
    width: 980px;
}

/* The configuration list keeps one height whatever it holds - its rows scroll rather than push
   the footer down the screen. */
.cfg-modal--list {
    display: flex;
    flex-direction: column;
    /* Wider than an ordinary wide dialog: the width beyond the fixed columns all goes to the remark,
       which is the column that was too narrow to read. max-width on .cfg-modal still caps it on a
       narrow window. */
    width: 1180px;
    height: 700px;
    max-height: 90vh;
    overflow: hidden;
}

.cfg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--rz-border-base-200);
}

.cfg-modal-title {
    margin: 0;
    font-weight: 700;
    color: #1a1a1a;
}

.cfg-modal-close {
    cursor: pointer;
    display: flex;
    color: var(--rz-text-secondary-color);
}

/* Import and export sit up here beside the close button - they act on the whole list, not on the
   product line the tabs select, which is what the footer downloads are about. */
.cfg-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cfg-modal-body {
    padding: 1.25rem 1.5rem;
}

/* Holds the tab strip at the top and gives the rest of the height to the scrolling rows. The notice
   is the first thing in it and reads as part of the header, so it sits closer to the title than the
   body's own padding would put it. */
.cfg-modal-body--list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 0.75rem;
}

.cfg-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--rz-border-base-200);
    background-color: #fafafa;
}

/* PDF and Excel share the right-hand side of the footer; they wrap rather than push the modal
   wider on a narrow screen. */
.cfg-modal-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* The file input behind the Import button - it is opened from that button, never shown itself. */
.cfg-file-input {
    display: none;
}

.cfg-modal-field-row {
    margin-bottom: 1.25rem;
}

.cfg-modal-field {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.cfg-modal-field--narrow {
    flex: 0 0 140px;
}

.cfg-modal-field-label {
    font-size: 0.85rem;
    color: #333;
}

.cfg-modal-section-title {
    display: block;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.6rem;
}

.cfg-continue-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cfg-continue-tile {
    /* One tile per option, sharing the row evenly - three options or four, no fixed columns. */
    flex: 1 1 120px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.15rem 0.6rem;
    min-height: 118px;
    border-radius: 10px;
    border: 1px solid var(--rz-border-base-200);
    background-color: #fff;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.cfg-continue-tile .rzi {
    font-size: 2.1rem;
    line-height: 1;
}

.cfg-continue-tile-caption {
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.25;
}

/* Clicking a tile carries out its option straight away, so there is no selected state to show -
   only the pointer feedback that says which one is about to be taken. The :not() keeps that feedback
   off a tile the door rules out: a hover that lights up says "click me", and this one does nothing. */
.cfg-continue-tile:not(.cfg-continue-tile--disabled):hover {
    border-color: #d32f2f;
    background-color: #fdecec;
    color: #d32f2f;
}

/* An option this door rules out - it keeps its place so the set of ways on stays the same from door
   to door, and reads as switched off rather than missing. The signal is the fill against the white
   tiles beside it plus the greyed caption; no border is drawn, because the tiles carry none. */
.cfg-continue-tile--disabled {
    background-color: #f1f2f4;
    color: #9aa0a6;
    cursor: not-allowed;
}

.cfg-modal-hint {
    color: var(--rz-text-secondary-color);
}

/* The web shop hint at the top of the configuration list. The body is a flex column whose remaining
   height belongs to the scrolling rows, so the alert keeps its own height and nothing more. The look
   itself is the one every notice of the configurator has - see "Notices: hints and warnings". */
.cfg-list-webshop-hint {
    flex: 0 0 auto;
    margin: 0 0 1rem;
}

/* The link takes the notice's own text colour rather than the link colour: inside the pale box a
   blue anchor was the one thing in it that did not belong to the notice. */
.cfg-list-webshop-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Modal tabs – one tab per product line of the configuration list ---- */

/* The rule under the tabs belongs to the row, not to the tabs, or it would stop where the last
   tab does. */
.cfg-modal-tabs-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--rz-border-base-200);
}

.cfg-modal-tabs {
    display: flex;
    gap: 0.25rem;
}

.cfg-modal-tab {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
    background-color: transparent;
    color: var(--rz-text-secondary-color);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.cfg-modal-tab:hover:not(.cfg-modal-tab--disabled):not(.cfg-modal-tab--active) {
    color: #1a1a1a;
}

.cfg-modal-tab--active {
    border-color: var(--rz-border-base-200);
    background-color: #fff;
    color: #d32f2f;
    box-shadow: inset 0 2px 0 0 #d32f2f;
}

/* A product line without a single position - nothing to show and nothing to export. */
.cfg-modal-tab--disabled {
    color: #b8b8b8;
    cursor: default;
}

.cfg-modal-tab-count {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background-color: #f0f0f0;
    color: inherit;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ---- Configuration list table ---- */

/* Takes what the dialog has left over and scrolls, so a long list does not resize the frame.

   The gutter is reserved whether the list is long enough to need a scrollbar or not: the rows keep
   their widths as doors are added, and the padding beside it keeps the scrollbar off the action
   buttons, which would otherwise sit right against it. */
.cfg-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
    padding-right: 0.5rem;
}

.cfg-list-table {
    /* What the three action buttons of a row need - download, edit, delete, none of which may be
       squeezed or wrapped. It is the one column whose width is dictated from outside, by the length
       of three labels, so it is named once here and used by the grid and the minimum alike. */
    --cfg-list-actions: 320px;
    width: 100%;
    /* Below this the remark has no room left to speak of - the container scrolls sideways instead
       of letting the columns eat each other. */
    min-width: calc(32px + 170px + 52px + 200px + var(--cfg-list-actions) + 4 * 0.75rem);
}

.cfg-list-row {
    display: grid;
    grid-template-columns: 32px 170px 52px 1fr var(--cfg-list-actions);
    /* Top, not centred: the name column runs to two lines and the remark to more than that, and a
       row of vertically centred cells of different heights reads as a mess. */
    align-items: start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rz-border-base-200);
}

.cfg-list-row--head {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
}

.cfg-list-col {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cfg-list-col-name {
    display: flex;
    flex-direction: column;
}

.cfg-list-name {
    font-weight: 600;
}

/* When the door was saved. It lost the column of its own and now reads as a second line of the
   name, which is where it belongs anyway. */
.cfg-list-saved-at {
    color: var(--rz-text-secondary-color);
    font-size: 0.78rem;
}

.cfg-list-col-remark {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    color: var(--rz-text-secondary-color);
}

.cfg-list-remark-text {
    min-width: 0;
    line-height: 1.35;
}

/* Two lines of the remark are enough to tell the doors apart; the rest is one click on the icon
   beside it away, so the row keeps its height whatever was written into it.

   Clipped by height rather than by -webkit-line-clamp: the line clamp puts an ellipsis at the cut
   whatever text-overflow says, and here the icon is what tells the reader that the text goes on. */
.cfg-list-remark-text--clamped {
    max-height: 2.7em;
    overflow: hidden;
}

/* Sits at the right edge of the column, centred against the text, so it keeps its place whether the
   remark is one line or ten.

   Hidden rather than absent until the row is marked: the place stays reserved on every row, so the
   remarks all end at the same edge and the measurement that decides the mark cannot change the very
   width it measured. */
.cfg-list-remark-toggle {
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
    color: var(--rz-text-secondary-color);
    line-height: 1;
    cursor: pointer;
    visibility: hidden;
}

.cfg-list-col-remark--cut > .cfg-list-remark-toggle {
    visibility: visible;
}

.cfg-list-remark-toggle:hover {
    color: var(--rz-text-color);
}

.cfg-list-remark-toggle .rzi {
    font-size: 1.15rem;
    line-height: 1;
}

.cfg-list-col-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.4rem;
    white-space: nowrap;
}

/* No shrinking: a flex item gives up width before it overflows, and a button that gives up width
   presses its own label against its right edge. The column is wide enough for all three - they keep
   the width their text asks for. */
.cfg-list-col-actions > .rz-button {
    flex: 0 0 auto;
}

/* ============================================================
   BADGES – one shape, one palette (mockup v24)
   Same rules as in the admin's theme-overrides.css, so a badge reads the
   same in the configurator and in the back office. Shape and colour are
   pinned per BadgeStyle and Shade/Variant is deliberately ignored - a page
   keeps using a plain <RadzenBadge> and still lands on the mockup's pill.
   Mapping: Success = green, Warning = orange, Danger/Primary = red,
   Info = blue, everything else = grey.
   ============================================================ */

:root {
    --dp-badge-green-bg: #e6f4ea;
    --dp-badge-green-text: #1a7f37;
    --dp-badge-gray-bg: #eef1ee;
    --dp-badge-gray-text: #5c6b62;
    --dp-badge-orange-bg: #fff2e2;
    --dp-badge-orange-text: #a35b00;
    --dp-badge-red-bg: #fdecec;
    --dp-badge-red-text: #af0000;
    --dp-badge-blue-bg: #e8f0fe;
    --dp-badge-blue-text: #1a56c4;
}

.rz-badge {
    display: inline-block;
    padding: 3px 10px;
    border: none;
    border-radius: 999px;
    box-shadow: none;
    font-size: 11.5px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

.rz-badge.rz-badge-success {
    background-color: var(--dp-badge-green-bg);
    color: var(--dp-badge-green-text);
}

.rz-badge.rz-badge-warning {
    background-color: var(--dp-badge-orange-bg);
    color: var(--dp-badge-orange-text);
}

.rz-badge.rz-badge-danger,
.rz-badge.rz-badge-error,
.rz-badge.rz-badge-primary {
    background-color: var(--dp-badge-red-bg);
    color: var(--dp-badge-red-text);
}

.rz-badge.rz-badge-info {
    background-color: var(--dp-badge-blue-bg);
    color: var(--dp-badge-blue-text);
}

.rz-badge.rz-badge-light,
.rz-badge.rz-badge-base,
.rz-badge.rz-badge-secondary,
.rz-badge.rz-badge-dark {
    background-color: var(--dp-badge-gray-bg);
    color: var(--dp-badge-gray-text);
}

/* ---------------------------------------------------------------------------------------------
   Icon font

   The .material-icons spans used to be rendered by a stylesheet from fonts.googleapis.com. That
   link is gone: an application that has to start without a network connection cannot depend on a
   third-party host, and the glyphs it provided are already in the Material Symbols font Radzen
   ships with the package. Mapping the class onto that family keeps the existing markup working
   without a single external request. Ligature names such as "lock" and "person" resolve in both
   fonts.

   Only the base rule lives here; the size overrides further up the file are more specific and keep
   winning, whatever order the rules end up in.
   --------------------------------------------------------------------------------------------- */
.material-icons {
    font-family: "Material Symbols";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    display: inline-block;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------------------------
   Update banner

   Shown once the service worker has a new version ready and waiting. It is an offer, not an
   interruption: it sits at the bottom edge, leaves the application fully usable behind it, and the
   switch happens only when the user asks for it - see Shared/AppUpdateBanner.razor.cs.
   --------------------------------------------------------------------------------------------- */
.cfg-update-banner {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: #2b2b2b;
    color: #ffffff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    font-family: var(--rz-text-font-family);
    font-size: 0.9375rem;
}

.cfg-update-banner-text {
    flex: 1 1 auto;
}

.cfg-update-banner-reload,
.cfg-update-banner-dismiss {
    flex: 0 0 auto;
    border: none;
    border-radius: 0.25rem;
    padding: 0.375rem 0.875rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cfg-update-banner-reload {
    background: var(--rz-primary);
    color: #ffffff;
}

.cfg-update-banner-reload:hover {
    background: var(--rz-primary-light);
}

.cfg-update-banner-dismiss {
    background: transparent;
    color: #cccccc;
    font-weight: 400;
    text-decoration: underline;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.cfg-update-banner-dismiss:hover {
    color: #ffffff;
}

/* While the handover is under way. The reload follows within a few seconds, so this is a short-lived
   state - it exists so the click is visibly acknowledged instead of the banner looking dead. */
.cfg-update-banner-reload:disabled,
.cfg-update-banner-dismiss:disabled {
    cursor: default;
    opacity: 0.6;
}