:root {
    /*
     * TOABAI Design System
     * Quelle: toabai Theme v1.0.1215
     */

    /* Farbe */
    --tb-color-primary: #2563eb;
    --tb-color-primary-hover: #1d4ed8;
    --tb-color-primary-strong: #1e40af;

    --tb-color-navy: #0f172a;
    --tb-color-text: #0f172a;
    --tb-color-text-muted: #475569;
    --tb-color-text-subtle: #64748b;

    --tb-color-canvas: #f8fafc;
    --tb-color-surface: #ffffff;
    --tb-color-surface-subtle: #f8fafc;

    --tb-color-border: #e2e8f0;
    --tb-color-border-strong: #cbd5e1;

    --tb-color-accent: var(--tb-color-primary);
    --tb-color-accent-hover: var(--tb-color-primary-hover);
    --tb-color-accent-contrast: #ffffff;

    --tb-color-info-bg: #eff6ff;
    --tb-color-info-text: #1d4ed8;

    --tb-color-success-bg: #f0fdf4;
    --tb-color-success-text: #15803d;

    --tb-color-warning-bg: #fffbeb;
    --tb-color-warning-text: #b45309;

    --tb-color-danger-bg: #fef2f2;
    --tb-color-danger-text: #b91c1c;

    --tb-color-focus: #2563eb;

    /* Typografie */
    --tb-font-sans:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --tb-weight-normal: 400;
    --tb-weight-medium: 600;
    --tb-weight-semibold: 700;
    --tb-weight-bold: 800;

    /* Form */
    --tb-radius-xs: 10px;
    --tb-radius-sm: 14px;
    --tb-radius-md: 20px;
    --tb-radius-lg: 28px;
    --tb-radius-xl: 34px;
    --tb-radius-pill: 999px;

    --tb-shadow-xs:
        0 1px 2px rgba(15, 23, 42, 0.04);

    --tb-shadow-sm:
        0 10px 30px rgba(15, 23, 42, 0.06);

    --tb-shadow-card:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 30px rgba(15, 23, 42, 0.05);

    --tb-shadow-card-hover:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 20px 48px rgba(15, 23, 42, 0.09);

    --tb-focus-ring:
        0 0 0 4px rgba(37, 99, 235, 0.18);

    /* Abstand · 4px-Raster */
    --tb-space-1: 4px;
    --tb-space-2: 8px;
    --tb-space-3: 12px;
    --tb-space-4: 16px;
    --tb-space-5: 20px;
    --tb-space-6: 24px;
    --tb-space-8: 32px;
    --tb-space-10: 40px;
    --tb-space-12: 48px;
    --tb-space-16: 64px;
    --tb-space-20: 80px;
    --tb-space-24: 96px;

    /* Application Layout */
    --tb-content-narrow: 720px;
    --tb-content-standard: 960px;
    --tb-content-wide: 1200px;

    /* Control-Ausprägung des TOABAI Kartensystems */
    --tb-card-radius: 24px;
    --tb-card-padding: 24px;
}

.tb-app {
    min-height: 100vh;
    margin: 0;
    background: var(--tb-color-canvas);
    color: var(--tb-color-text);
    font-family: var(--tb-font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tb-app *,
.tb-app *::before,
.tb-app *::after {
    box-sizing: border-box;
}

.tb-app a {
    color: inherit;
}

.tb-dev-banner {
    padding: 9px 16px;
    background: var(--tb-color-warning-bg);
    color: var(--tb-color-warning-text);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}



.tb-app-header {
    border-bottom: 1px solid var(--tb-color-border);
    background: rgba(255, 255, 255, 0.92);
}

.tb-app-header__inner {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tb-space-6);
}

.tb-product-mark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--tb-color-text);
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.tb-app-header__actions {
    display: flex;
    align-items: center;
    gap: var(--tb-space-3);
}

.tb-main {
    padding: var(--tb-space-10) 0 var(--tb-space-16);
}

.tb-shell {
    width: min(
        calc(100% - 48px),
        var(--tb-content-wide)
    );
    margin-inline: auto;
}

.tb-shell--narrow {
    max-width: var(--tb-content-narrow);
}

.tb-shell--standard {
    max-width: var(--tb-content-standard);
}

.tb-shell--wide {
    max-width: var(--tb-content-wide);
}



.tb-page-back {
    margin-bottom: var(--tb-space-5);
}

.tb-page-back__link {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-space-2);
    color: var(--tb-color-text-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.tb-page-back__link:hover {
    color: var(--tb-color-text);
}

.tb-page-back__link:focus-visible {
    outline: 3px solid var(--tb-color-focus);
    outline-offset: 3px;
    border-radius: 2px;
}

.tb-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tb-space-8);
    margin-bottom: var(--tb-space-8);
}

.tb-page-header__copy {
    min-width: 0;
}

.tb-page-eyebrow {
    margin: 0 0 var(--tb-space-2);
    color: var(--tb-color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.tb-page-title {
    margin: 0;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.tb-page-description {
    max-width: 720px;
    margin: var(--tb-space-3) 0 0;
    color: var(--tb-color-text-muted);
    font-size: 17px;
}

.tb-page-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--tb-space-3);
    flex-shrink: 0;
}

.tb-card {
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-lg);
    background: var(--tb-color-surface);
    box-shadow: var(--tb-shadow-sm);
}

.tb-card--padded {
    padding: var(--tb-space-6);
}

.tb-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tb-space-6);
    margin-bottom: var(--tb-space-6);
}

.tb-card__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.tb-card__description {
    margin: var(--tb-space-2) 0 0;
    color: var(--tb-color-text-muted);
    font-size: 14px;
}

.tb-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tb-space-2);
    border: 1px solid transparent;
    border-radius: var(--tb-radius-md);
    padding: 9px 15px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

.tb-button--sm {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 13px;
}

.tb-button--lg {
    min-height: 48px;
    padding: 12px 18px;
    font-size: 15px;
}

.tb-button--primary {
    background: var(--tb-color-accent);
    color: var(--tb-color-accent-contrast);
}

.tb-button--secondary {
    border-color: var(--tb-color-border);
    background: var(--tb-color-surface);
    color: var(--tb-color-text);
}

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

.tb-button:hover:not(:disabled) {
    filter: brightness(0.96);
}

.tb-button:disabled,
.tb-button[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.5;
}

.tb-button:focus-visible,
.tb-input:focus-visible,
.tb-select:focus-visible,
.tb-checkbox:focus-visible,
.tb-product-mark:focus-visible {
    outline: 3px solid var(--tb-color-focus);
    outline-offset: 2px;
}

.tb-field {
    display: grid;
    gap: var(--tb-space-2);
}

.tb-field__label {
    color: var(--tb-color-text);
    font-size: 14px;
    font-weight: 600;
}

.tb-field__required {
    color: var(--tb-color-danger-text);
}

.tb-field__hint {
    margin: 0;
    color: var(--tb-color-text-muted);
    font-size: 13px;
}

.tb-field-error {
    margin: 0;
    color: var(--tb-color-danger-text);
    font-size: 13px;
    font-weight: 500;
}

.tb-input,
.tb-select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--tb-color-border-strong);
    border-radius: var(--tb-radius-md);
    background: var(--tb-color-surface);
    color: var(--tb-color-text);
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    line-height: 1.3;
}

.tb-input::placeholder {
    color: var(--tb-color-text-muted);
}

.tb-input[aria-invalid='true'],
.tb-select[aria-invalid='true'] {
    border-color: var(--tb-color-danger-text);
}

.tb-input:disabled,
.tb-select:disabled {
    background: var(--tb-color-surface-subtle);
    color: var(--tb-color-text-muted);
    cursor: not-allowed;
}

.tb-checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: var(--tb-space-3);
}

.tb-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--tb-color-accent);
}

.tb-checkbox-field__copy {
    min-width: 0;
}

.tb-checkbox-field__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.tb-checkbox-field__hint {
    display: block;
    margin-top: var(--tb-space-1);
    color: var(--tb-color-text-muted);
    font-size: 13px;
}

.tb-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.tb-status--neutral {
    background: var(--tb-color-surface-subtle);
    color: var(--tb-color-text-muted);
}

.tb-status--info {
    background: var(--tb-color-info-bg);
    color: var(--tb-color-info-text);
}

.tb-status--success {
    background: var(--tb-color-success-bg);
    color: var(--tb-color-success-text);
}

.tb-status--warning {
    background: var(--tb-color-warning-bg);
    color: var(--tb-color-warning-text);
}

.tb-status--danger {
    background: var(--tb-color-danger-bg);
    color: var(--tb-color-danger-text);
}

.tb-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-lg);
    background: var(--tb-color-surface);
}

.tb-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.tb-table th,
.tb-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--tb-color-border);
    vertical-align: top;
}

.tb-table th {
    background: var(--tb-color-surface-subtle);
    color: var(--tb-color-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tb-table td {
    font-size: 14px;
}

.tb-table tr:last-child td {
    border-bottom: 0;
}

.tb-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 720px) {
    .tb-shell {
        width: min(
            calc(100% - 32px),
            var(--tb-content-wide)
        );
    }

    .tb-main {
        padding-top: var(--tb-space-8);
    }

    .tb-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--tb-space-5);
    }

    .tb-page-actions {
        width: 100%;
    }

    .tb-page-actions .tb-button {
        flex: 1 1 auto;
    }

    .tb-card--padded {
        padding: var(--tb-space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tb-button {
        transition: none;
    }
}

/*
 * Buttons können als <button> oder <a> gerendert werden.
 * Diese Selektoren sind bewusst spezifischer als .tb-app a,
 * damit Link-Buttons ihre semantische Button-Farbe behalten.
 */
.tb-app .tb-button--primary {
    color: var(--tb-color-accent-contrast);
}

.tb-app .tb-button--secondary {
    color: var(--tb-color-text);
}

.tb-app .tb-button--danger {
    color: #ffffff;
}

/*
 * Cards ohne allgemeines Innenpadding benötigen für einen
 * vorhandenen Card-Header trotzdem einen eigenen Innenabstand.
 */
.tb-card:not(.tb-card--padded) > .tb-card__header {
    margin-bottom: 0;
    padding: var(--tb-space-6);
    border-bottom: 1px solid var(--tb-color-border);
}

/*
 * Kompaktes Profilmenü im App-Header. Native <details>-Semantik hält
 * die Oberfläche build-frei und ohne zusätzliches JavaScript.
 */
.tb-profile-menu {
    position: relative;
}

.tb-profile-menu__trigger {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-md);
    background: var(--tb-color-surface);
    padding: 7px 12px;
    color: var(--tb-color-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
}

.tb-profile-menu__trigger::-webkit-details-marker {
    display: none;
}

.tb-profile-menu__trigger::after {
    content: '⌄';
    margin-left: var(--tb-space-2);
    color: var(--tb-color-text-muted);
    font-size: 14px;
}

.tb-profile-menu[open] .tb-profile-menu__trigger::after {
    content: '⌃';
}

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

.tb-profile-menu__panel {
    position: absolute;
    top: calc(100% + var(--tb-space-2));
    right: 0;
    z-index: 20;
    width: min(320px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-lg);
    background: var(--tb-color-surface);
    box-shadow: var(--tb-shadow-card);
}

.tb-profile-menu__section {
    padding: var(--tb-space-4);
}

.tb-profile-menu__section + .tb-profile-menu__section,
.tb-profile-menu__details + .tb-profile-menu__section {
    border-top: 1px solid var(--tb-color-border);
}

.tb-profile-menu__name {
    font-size: 14px;
    font-weight: 700;
}

.tb-profile-menu__meta {
    margin-top: var(--tb-space-1);
    color: var(--tb-color-text-muted);
    font-size: 13px;
}

.tb-profile-menu__details {
    display: grid;
    gap: var(--tb-space-3);
    margin: 0;
    padding: var(--tb-space-4);
    border-top: 1px solid var(--tb-color-border);
}

.tb-profile-menu__details div {
    display: grid;
    gap: var(--tb-space-1);
}

.tb-profile-menu__details dt {
    color: var(--tb-color-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tb-profile-menu__details dd {
    margin: 0;
    font-size: 13px;
}

.tb-profile-menu__link,
.tb-profile-menu__action {
    width: 100%;
    display: block;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--tb-color-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.tb-profile-menu__link:hover,
.tb-profile-menu__action:hover {
    text-decoration: underline;
}

.tb-profile-menu__link:focus-visible,
.tb-profile-menu__action:focus-visible {
    outline: 3px solid var(--tb-color-focus);
    outline-offset: 3px;
}

.tb-notice {
    border-radius: var(--tb-radius-md);
    padding: var(--tb-space-4);
    font-size: 14px;
}

.tb-notice--warning {
    background: var(--tb-color-warning-bg);
    color: var(--tb-color-warning-text);
}

/*
 * Kompakte Detailbereiche für Stammdaten.
 * Geeignet für Kunden-, Vertrags- und Einstellungsübersichten.
 */
.tb-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
}

.tb-detail-section {
    min-width: 0;
    padding: var(--tb-space-6);
}

.tb-detail-section + .tb-detail-section {
    border-left: 1px solid var(--tb-color-border);
}

.tb-detail-section__title {
    margin: 0 0 var(--tb-space-4);
    font-size: 14px;
    font-weight: 700;
}

.tb-detail-list {
    display: grid;
    gap: var(--tb-space-4);
    margin: 0;
}

.tb-detail-list > div {
    min-width: 0;
}

.tb-detail-list dt {
    margin: 0 0 var(--tb-space-1);
    color: var(--tb-color-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.tb-detail-list dd {
    margin: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

@media (max-width: 820px) {
    .tb-detail-grid {
        grid-template-columns: 1fr;
    }

    .tb-detail-section + .tb-detail-section {
        border-top: 1px solid var(--tb-color-border);
        border-left: 0;
    }
}


/* =========================================================
   TOABAI.CONTROL · UI FOUNDATION 1.0
   Application-Ausprägung des TOABAI Design Systems.
========================================================= */

/*
 * App-Grundfläche
 */

.tb-app {
    background: var(--tb-color-canvas);
    color: var(--tb-color-text);
    font-family: var(--tb-font-sans);
    line-height: 1.6;
}


/*
 * Header
 */

.tb-app-header {
    position: sticky;
    top: 0;
    z-index: 100;

    border-bottom:
        1px solid rgba(226, 232, 240, 0.76);

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.72);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.tb-app-header__inner {
    min-height: 76px;
}


/*
 * Produktmarke
 */

.tb-product-mark {
    display: inline-flex;
    align-items: baseline;

    min-height: auto;

    color: var(--tb-color-navy);

    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
}

.tb-product-mark__main {
    color: var(--tb-color-navy);
}

.tb-product-mark__dot {
    margin-inline: 0.015em;
    color: var(--tb-color-primary);
}

.tb-product-mark__sub {
    color: var(--tb-color-primary);
    font-weight: 600;
}

.tb-product-mark:hover
.tb-product-mark__dot,

.tb-product-mark:hover
.tb-product-mark__sub {
    opacity: 0.78;
}


/*
 * Seitenkopf
 *
 * Bewusst kompakter als auf toabai.media:
 * gleiche Designsprache, aber für eine Business-Anwendung.
 */

.tb-page-eyebrow {
    margin-bottom: 10px;

    color: var(--tb-color-primary);

    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tb-page-title {
    color: var(--tb-color-text);

    font-size:
        clamp(32px, 3.4vw, 46px);

    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.tb-page-description {
    max-width: 680px;

    color: var(--tb-color-text-muted);

    font-size: 16px;
    line-height: 1.65;
}


/*
 * Hauptbereich
 */

.tb-main {
    padding:
        var(--tb-space-10)
        0
        var(--tb-space-20);
}


/*
 * Fokus entsprechend TOABAI Design System
 */

.tb-button:focus-visible,
.tb-input:focus-visible,
.tb-select:focus-visible,
.tb-checkbox:focus-visible,
.tb-product-mark:focus-visible,
.tb-profile-menu__trigger:focus-visible,
.tb-profile-menu__link:focus-visible,
.tb-profile-menu__action:focus-visible {
    outline: none;
    box-shadow: var(--tb-focus-ring);
}


/*
 * Entwicklungsbanner bewusst außerhalb des
 * eigentlichen Markenauftritts lassen.
 */

.tb-dev-banner {
    background: var(--tb-color-warning-bg);
    color: var(--tb-color-warning-text);
}


/*
 * Mobile Foundation
 */

@media (max-width: 720px) {
    .tb-app-header__inner {
        min-height: 70px;
    }

    .tb-product-mark {
        font-size: 22px;
    }

    .tb-main {
        padding-top: var(--tb-space-8);
    }

    .tb-page-title {
        font-size:
            clamp(30px, 9vw, 40px);
    }
}

/* =========================================================
   TOABAI.CONTROL · APPLICATION SHELL 1.0
========================================================= */

.tb-app-header__inner {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: var(--tb-space-8);
}


/*
 * Hauptnavigation
 */

.tb-main-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tb-space-1);
}

.tb-main-nav__link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    border-radius: var(--tb-radius-sm);

    padding:
        8px
        12px;

    color: var(--tb-color-text-muted);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;

    text-decoration: none;

    transition:
        color 120ms ease,
        background-color 120ms ease;
}

.tb-app .tb-main-nav__link {
    color: var(--tb-color-text-muted);
    text-decoration: none;
}

.tb-main-nav__link:hover {
    background: rgba(37, 99, 235, 0.06);
    color: var(--tb-color-primary);
}

.tb-main-nav__link.is-active {
    background: rgba(37, 99, 235, 0.09);
    color: var(--tb-color-primary);
}

.tb-main-nav__link.is-active::after {
    content: "";

    position: absolute;
    right: 12px;
    bottom: -19px;
    left: 12px;

    height: 2px;

    border-radius: 999px;

    background: var(--tb-color-primary);
}

.tb-main-nav__link:focus-visible {
    outline: none;
    box-shadow: var(--tb-focus-ring);
}


/*
 * Rechte Header-Seite
 */

.tb-app-header__actions {
    justify-self: end;
}


/*
 * Responsive Navigation
 *
 * Auf kleineren Desktop-/Tablet-Breiten bleibt die Navigation
 * horizontal scrollbar, statt unkontrolliert umzubrechen.
 */

@media (max-width: 1040px) {
    .tb-app-header__inner {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

        gap: var(--tb-space-4);
    }

    .tb-main-nav {
        justify-content: flex-start;
        overflow-x: auto;

        padding:
            var(--tb-space-2)
            0;

        scrollbar-width: none;
    }

    .tb-main-nav::-webkit-scrollbar {
        display: none;
    }

    .tb-main-nav__link {
        flex: 0 0 auto;
    }
}


/*
 * Mobile Shell
 */

@media (max-width: 760px) {
    .tb-app-header {
        position: relative;
    }

    .tb-app-header__inner {
        min-height: auto;

        grid-template-columns:
            1fr
            auto;

        gap:
            var(--tb-space-3)
            var(--tb-space-4);

        padding-top: var(--tb-space-4);
        padding-bottom: var(--tb-space-3);
    }

    .tb-product-mark {
        grid-column: 1;
        grid-row: 1;
    }

    .tb-app-header__actions {
        grid-column: 2;
        grid-row: 1;
    }

    .tb-main-nav {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;

        justify-content: flex-start;

        margin-top: var(--tb-space-1);

        padding:
            0
            0
            var(--tb-space-1);
    }

    .tb-main-nav__link {
        min-height: 36px;

        padding:
            7px
            10px;

        font-size: 13px;
    }

    .tb-main-nav__link.is-active::after {
        right: 10px;
        bottom: -5px;
        left: 10px;
    }
}

/* =========================================================
   TOABAI.CONTROL · RESPONSIVE APPLICATION SHELL
========================================================= */

.tb-mobile-nav {
    display: none;
}


/*
 * Profil bleibt Bestandteil der globalen Shell.
 */

.tb-profile-menu__trigger {
    white-space: nowrap;
}


/*
 * Mobile Navigation
 */

@media (max-width: 760px) {
    .tb-app-header__inner {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap:
            var(--tb-space-3)
            var(--tb-space-4);
    }

    .tb-main-nav--desktop {
        display: none;
    }

    .tb-product-mark {
        grid-column: 1;
        grid-row: 1;
    }

    .tb-app-header__actions {
        grid-column: 2;
        grid-row: 1;

        min-width: 0;
    }

    .tb-profile-menu__trigger {
        max-width: 180px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tb-mobile-nav {
        display: block;

        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;
    }

    .tb-mobile-nav__trigger {
        width: 100%;
        min-height: 42px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        border: 1px solid var(--tb-color-border);
        border-radius: var(--tb-radius-sm);

        background: var(--tb-color-surface);

        padding:
            9px
            13px;

        color: var(--tb-color-text);

        font-size: 14px;
        font-weight: 700;

        cursor: pointer;
        list-style: none;
    }

    .tb-mobile-nav__trigger::-webkit-details-marker {
        display: none;
    }

    .tb-mobile-nav__trigger::after {
        content: "⌄";

        color: var(--tb-color-text-muted);
    }

    .tb-mobile-nav[open]
    .tb-mobile-nav__trigger::after {
        content: "⌃";
    }

    .tb-mobile-nav__trigger:focus-visible {
        outline: none;
        box-shadow: var(--tb-focus-ring);
    }

    .tb-mobile-nav__links {
        display: grid;
        gap: var(--tb-space-1);

        margin-top: var(--tb-space-2);

        border: 1px solid var(--tb-color-border);
        border-radius: var(--tb-radius-sm);

        background: var(--tb-color-surface);

        padding: var(--tb-space-2);

        box-shadow: var(--tb-shadow-sm);
    }

    .tb-mobile-nav__links
    .tb-main-nav__link {
        width: 100%;
        min-height: 42px;

        justify-content: flex-start;

        padding:
            10px
            12px;
    }

    .tb-mobile-nav__links
    .tb-main-nav__link.is-active {
        background: rgba(37, 99, 235, 0.09);
    }

    .tb-mobile-nav__links
    .tb-main-nav__link.is-active::after {
        display: none;
    }
}


@media (max-width: 480px) {
    .tb-product-mark {
        font-size: 20px;
    }

    .tb-profile-menu__trigger {
        max-width: 145px;

        padding:
            7px
            10px;
    }

    .tb-profile-menu__panel {
        position: fixed;

        top: auto;
        right: 16px;
        left: 16px;

        width: auto;
    }
}

/* =========================================================
   TOABAI.CONTROL · COMPONENTS 2A
   Kompakte Application-Ausprägung des TOABAI UI Systems
========================================================= */


/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */

.tb-button {
    min-height: 40px;

    border-radius: var(--tb-radius-sm);

    padding:
        8px
        14px;

    font-size: 14px;
    font-weight: 700;

    box-shadow: none;
}

.tb-button--sm {
    min-height: 34px;

    padding:
        6px
        11px;

    font-size: 13px;
}

.tb-button--lg {
    min-height: 46px;

    padding:
        10px
        17px;

    font-size: 15px;
}

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

.tb-button--primary:hover:not(:disabled) {
    background: var(--tb-color-primary-hover);
    filter: none;
}

.tb-button--secondary {
    border-color: var(--tb-color-border);
    background: var(--tb-color-surface);
}

.tb-button--secondary:hover:not(:disabled) {
    border-color: var(--tb-color-border-strong);
    background: var(--tb-color-surface-subtle);
    filter: none;
}


/* ---------------------------------------------------------
   Cards
--------------------------------------------------------- */

.tb-card {
    border-color: var(--tb-color-border);

    border-radius:
        var(--tb-card-radius);

    box-shadow:
        var(--tb-shadow-card);
}

.tb-card--padded {
    padding: var(--tb-card-padding);
}

.tb-card__header {
    gap: var(--tb-space-4);
    margin-bottom: var(--tb-space-5);
}

.tb-card__title {
    color: var(--tb-color-text);

    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;

    letter-spacing: -0.02em;
}

.tb-card__description {
    max-width: 760px;

    color: var(--tb-color-text-muted);

    font-size: 14px;
    line-height: 1.55;
}


/*
 * Cards ohne Innenpadding werden typischerweise
 * für Tabellen und Listen verwendet.
 */

.tb-card:not(.tb-card--padded) {
    overflow: hidden;
}

.tb-card:not(.tb-card--padded) > .tb-card__header {
    padding:
        20px
        24px;

    border-bottom:
        1px solid var(--tb-color-border);
}


/* ---------------------------------------------------------
   Formulare
--------------------------------------------------------- */

.tb-field {
    gap: 6px;
}

.tb-field__label {
    font-size: 13px;
    font-weight: 700;
}

.tb-field__hint {
    font-size: 12px;
    line-height: 1.45;
}

.tb-field-error {
    font-size: 12px;
}

.tb-input,
.tb-select {
    min-height: 40px;

    border-color: var(--tb-color-border-strong);

    border-radius: var(--tb-radius-sm);

    padding:
        8px
        12px;

    font-size: 14px;
    line-height: 1.3;

    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        background-color 120ms ease;
}

.tb-input:hover:not(:disabled),
.tb-select:hover:not(:disabled) {
    border-color: #94a3b8;
}

.tb-input:focus,
.tb-select:focus {
    border-color: var(--tb-color-primary);
    outline: none;
    box-shadow: var(--tb-focus-ring);
}

textarea.tb-input {
    min-height: 96px;
    resize: vertical;
}


/* ---------------------------------------------------------
   Tabellen
--------------------------------------------------------- */

.tb-table-wrap {
    border: 0;
    border-radius: 0;
    background: var(--tb-color-surface);
}

.tb-card > .tb-table-wrap {
    width: 100%;
}

.tb-table {
    font-variant-numeric: tabular-nums;
}

.tb-table th,
.tb-table td {
    padding:
        12px
        16px;

    border-bottom:
        1px solid var(--tb-color-border);

    vertical-align: middle;
}

.tb-table th {
    background: var(--tb-color-surface-subtle);

    color: var(--tb-color-text-muted);

    font-size: 11px;
    font-weight: 800;

    line-height: 1.3;
    letter-spacing: 0.025em;
}

.tb-table td {
    color: var(--tb-color-text);

    font-size: 13px;
    line-height: 1.45;
}

.tb-table tbody tr {
    transition:
        background-color 100ms ease;
}

.tb-table tbody tr:hover {
    background:
        rgba(37, 99, 235, 0.025);
}

.tb-table tbody tr:last-child td {
    border-bottom: 0;
}


/*
 * Tabellenlinks sind Inhalt, keine Website-Links.
 */

.tb-table a {
    color: var(--tb-color-text);

    font-weight: 600;

    text-decoration-line: underline;
    text-decoration-color: #cbd5e1;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.tb-table a:hover {
    color: var(--tb-color-primary);
    text-decoration-color: currentColor;
}


/* ---------------------------------------------------------
   Status
--------------------------------------------------------- */

.tb-status {
    min-height: 24px;

    padding:
        4px
        8px;

    font-size: 11px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   Detailbereiche
--------------------------------------------------------- */

.tb-detail-section {
    padding:
        20px
        24px;
}

.tb-detail-section__title {
    margin-bottom: var(--tb-space-3);

    font-size: 13px;
    font-weight: 800;
}

.tb-detail-list {
    gap: var(--tb-space-3);
}

.tb-detail-list dt {
    font-size: 11px;
}

.tb-detail-list dd {
    font-size: 13px;
}


/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 720px) {
    .tb-card--padded {
        padding: 20px;
    }

    .tb-card:not(.tb-card--padded) > .tb-card__header {
        padding:
            18px
            20px;
    }

    .tb-table th,
    .tb-table td {
        padding:
            11px
            13px;
    }
}

/* =========================================================
   TOABAI.CONTROL · DASHBOARD 1.0
========================================================= */

.tb-dashboard {
    display: grid;
    gap: var(--tb-space-10);
}

.tb-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tb-space-6);

    margin-bottom: var(--tb-space-4);
}

.tb-section-heading__title {
    margin: 0;

    color: var(--tb-color-text);

    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;

    letter-spacing: -0.02em;
}

.tb-section-heading__description {
    margin:
        var(--tb-space-1)
        0
        0;

    color: var(--tb-color-text-muted);

    font-size: 13px;
    line-height: 1.5;
}


/*
 * Kennzahlen
 */

.tb-dashboard-stats {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: var(--tb-space-4);
}

.tb-dashboard-stat {
    min-width: 0;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        var(--tb-color-border);

    border-radius:
        var(--tb-card-radius);

    background:
        var(--tb-color-surface);

    padding:
        20px;

    color:
        var(--tb-color-text);

    text-decoration: none;

    box-shadow:
        var(--tb-shadow-card);

    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
}

.tb-app .tb-dashboard-stat {
    color: var(--tb-color-text);
    text-decoration: none;
}

.tb-dashboard-stat:hover {
    border-color:
        rgba(37, 99, 235, 0.30);

    box-shadow:
        var(--tb-shadow-card-hover);

    transform:
        translateY(-1px);
}

.tb-dashboard-stat:focus-visible {
    outline: none;
    box-shadow:
        var(--tb-focus-ring),
        var(--tb-shadow-card);
}

.tb-dashboard-stat__label {
    color:
        var(--tb-color-primary);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tb-dashboard-stat__value {
    margin-top:
        var(--tb-space-4);

    color:
        var(--tb-color-text);

    font-size: 36px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.045em;
}

.tb-dashboard-stat__meta {
    margin-top:
        var(--tb-space-3);

    color:
        var(--tb-color-text-muted);

    font-size: 12px;
    line-height: 1.45;
}


/*
 * Schnellzugriff
 */

.tb-dashboard-actions {
    display: flex;
    flex-wrap: wrap;

    gap:
        var(--tb-space-3);
}


/*
 * Responsive
 */

@media (max-width: 1100px) {
    .tb-dashboard-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .tb-dashboard {
        gap: var(--tb-space-8);
    }

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

@media (max-width: 480px) {
    .tb-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .tb-dashboard-actions {
        display: grid;
    }

    .tb-dashboard-actions
    .tb-button {
        width: 100%;
    }
}

/* =========================================================
   TOABAI.CONTROL · DASHBOARD MOBILE FIX
========================================================= */

@media (max-width: 600px) {
    .tb-dashboard-stats {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   TOABAI.CONTROL · FORM LAYOUT
   Wiederverwendbares Raster für Application-Formulare
========================================================= */

.tb-form-stack {
    display: grid;
    gap: var(--tb-space-6);
}

.tb-form-grid {
    display: grid;
    gap:
        var(--tb-space-5)
        var(--tb-space-5);
}

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

.tb-form-grid__full {
    grid-column: 1 / -1;
    min-width: 0;
}

.tb-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tb-space-3);
}


/*
 * Auf schmalen Ansichten werden Formulare grundsätzlich
 * wieder einspaltig.
 */

@media (max-width: 720px) {
    .tb-form-grid--2 {
        grid-template-columns: 1fr;
    }

    .tb-form-grid__full {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .tb-form-actions {
        display: grid;
    }

    .tb-form-actions .tb-button {
        width: 100%;
    }
}

/* =========================================================
   TOABAI.CONTROL · CATALOG PICKER
   Kompakte Leistungsauswahl für Dokumentpositionen
========================================================= */

.tb-catalog-picker {
    display: grid;
    gap: var(--tb-space-7);
}

.tb-catalog-picker__group {
    display: grid;
    gap: var(--tb-space-3);
}

.tb-catalog-picker__group-title {
    margin: 0;
    color: var(--tb-color-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.tb-catalog-picker__group-items {
    display: grid;
    gap: var(--tb-space-2);
}

.tb-catalog-picker__item {
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-md);
    background: var(--tb-color-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.tb-catalog-picker__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, auto);
    align-items: center;
    gap: var(--tb-space-5);
    padding: 14px 16px;
}

.tb-catalog-picker__content {
    min-width: 0;
}

.tb-catalog-picker__title {
    margin: 0;
    color: var(--tb-color-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.012em;
}

.tb-catalog-picker__description {
    margin: 3px 0 0;
    max-width: 720px;
    color: var(--tb-color-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.tb-catalog-picker__offer {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: var(--tb-space-3);
    min-width: 0;
}

.tb-catalog-picker__offer > .tb-field {
    width: 105px;
}

.tb-catalog-picker__price {
    min-width: 150px;
}

.tb-catalog-picker__price .tb-field {
    min-width: 250px;
}

.tb-catalog-picker__price-summary {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.tb-catalog-picker__amount {
    color: var(--tb-color-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.tb-catalog-picker__billing {
    color: var(--tb-color-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.tb-catalog-picker__individual {
    justify-self: end;
    min-width: 0;
}

.tb-catalog-picker__individual-trigger {
    cursor: pointer;
    list-style: none;
    color: var(--tb-color-primary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.tb-catalog-picker__individual-trigger::-webkit-details-marker {
    display: none;
}

.tb-catalog-picker__individual-trigger::after {
    content: " +";
}

.tb-catalog-picker__individual[open] {
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-top: var(--tb-space-2);
    padding-top: var(--tb-space-4);
    border-top: 1px solid var(--tb-color-border);
}

.tb-catalog-picker__individual[open] .tb-catalog-picker__individual-trigger {
    margin-bottom: var(--tb-space-4);
}

.tb-catalog-picker__individual[open] .tb-catalog-picker__individual-trigger::after {
    content: " −";
}

.tb-catalog-picker__individual-form {
    display: grid;
    gap: var(--tb-space-4);
}

.tb-catalog-picker__fields {
    display: grid;
    grid-template-columns:
        minmax(140px, 0.8fr)
        repeat(3, minmax(130px, 1fr));
    gap: var(--tb-space-3);
}

@media (max-width: 1000px) {
    .tb-catalog-picker__main {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .tb-catalog-picker__offer {
        justify-content: flex-start;
    }

    .tb-catalog-picker__price-summary {
        justify-content: flex-start;
    }

    .tb-catalog-picker__individual {
        justify-self: start;
    }

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

@media (max-width: 600px) {
    .tb-catalog-picker {
        gap: var(--tb-space-6);
    }

    .tb-catalog-picker__main {
        gap: var(--tb-space-4);
        padding: 15px;
    }

    .tb-catalog-picker__offer {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .tb-catalog-picker__offer > .tb-field,
    .tb-catalog-picker__price,
    .tb-catalog-picker__price .tb-field {
        width: 100%;
        min-width: 0;
    }

    .tb-catalog-picker__fields {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   TOABAI.CONTROL · TABLE ACTIONS
========================================================= */

.tb-table-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tb-space-2);
}

.tb-table-actions form {
    margin: 0;
}

/* =========================================================
   TOABAI.CONTROL · ICONS
   Lucide-kompatible SVG-Icons
========================================================= */

.tb-icon {
    display: block;
    flex: 0 0 auto;
}

.tb-button--icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tb-table-actions {
    flex-wrap: nowrap;
}

/* HTML hidden muss auch bei Grid-/Flex-Komponenten Vorrang haben. */
[hidden] {
    display: none !important;
}

/* Catalog Picker: kompakte horizontale Bedienzeile */
@media (min-width: 1001px) {
    .tb-catalog-picker__offer {
        display: flex;
        align-items: center;
        gap: var(--tb-space-3);
    }

    .tb-catalog-picker__offer > .tb-field {
        display: flex;
        align-items: center;
        gap: var(--tb-space-2);
        width: auto;
    }

    .tb-catalog-picker__offer > .tb-field .tb-field__label {
        margin: 0;
        font-size: 12px;
        white-space: nowrap;
    }

    .tb-catalog-picker__offer > .tb-field .tb-input {
        width: 74px;
        min-height: 38px;
        padding: 7px 10px;
    }

    .tb-catalog-picker__price {
        display: flex;
        align-items: center;
        min-width: 155px;
    }

    .tb-catalog-picker__price .tb-field {
        display: flex;
        align-items: center;
        gap: var(--tb-space-2);
        min-width: 0;
    }

    .tb-catalog-picker__price .tb-field__label {
        margin: 0;
        font-size: 12px;
        white-space: nowrap;
    }

    .tb-catalog-picker__price .tb-input {
        width: 260px;
        min-height: 38px;
        padding: 7px 10px;
    }

    .tb-catalog-picker__price-summary {
        min-width: 155px;
    }

    .tb-catalog-picker__offer .tb-button {
        min-height: 38px;
        white-space: nowrap;
    }
}

.tb-catalog-picker__individual-trigger::marker {
    content: "";
}

/* Catalog Picker: Menge und individueller Preis kompakt */
.tb-catalog-picker__quantity {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-catalog-picker__quantity .tb-input {
    width: 64px;
    min-height: 38px;
    padding: 7px 10px;
}

.tb-catalog-picker__quantity-unit {
    color: var(--tb-color-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.tb-catalog-picker__custom-price {
    display: flex;
    align-items: end;
    gap: var(--tb-space-3);
}

.tb-catalog-picker__custom-price .tb-field {
    width: 180px;
}

.tb-catalog-picker__custom-price .tb-input {
    min-height: 40px;
}

.tb-catalog-picker__individual[open] {
    padding-bottom: 2px;
}

@media (max-width: 600px) {
    .tb-catalog-picker__quantity {
        width: 100%;
    }

    .tb-catalog-picker__quantity .tb-input {
        width: 90px;
    }

    .tb-catalog-picker__custom-price {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tb-catalog-picker__custom-price .tb-field {
        width: 100%;
    }
}

/* Catalog Picker: individueller Angebotspreis inline */
@media (min-width: 1001px) {
    .tb-catalog-picker__individual[open] {
        grid-column: auto;
        justify-self: end;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top: 0;
    }

    .tb-catalog-picker__individual[open] .tb-catalog-picker__individual-trigger {
        margin-bottom: 4px;
        text-align: right;
        font-size: 11px;
    }

    .tb-catalog-picker__individual-form {
        display: block;
    }

    .tb-catalog-picker__custom-price {
        display: flex;
        align-items: end;
        justify-content: flex-end;
        gap: var(--tb-space-2);
    }

    .tb-catalog-picker__custom-price .tb-field {
        display: flex;
        align-items: center;
        gap: var(--tb-space-2);
        width: auto;
    }

    .tb-catalog-picker__custom-price .tb-field__label {
        margin: 0;
        font-size: 12px;
        white-space: nowrap;
    }

    .tb-catalog-picker__custom-price .tb-input {
        width: 110px;
        min-height: 38px;
        padding: 7px 10px;
    }

    .tb-catalog-picker__custom-price .tb-button {
        min-height: 38px;
        white-space: nowrap;
    }
}

/* Catalog Picker: Kategorien deutlicher voneinander trennen */
.tb-catalog-picker__group {
    gap: var(--tb-space-4);
}

.tb-catalog-picker__group + .tb-catalog-picker__group {
    margin-top: var(--tb-space-3);
}

.tb-catalog-picker__group-title {
    margin: 0 0 var(--tb-space-1);
}

/* Catalog Picker: Kategorien als zusammenhängende Panels */
.tb-catalog-picker {
    gap: var(--tb-space-7);
}

.tb-catalog-picker__group {
    display: grid;
    gap: var(--tb-space-3);
    margin: 0;
}

.tb-catalog-picker__group + .tb-catalog-picker__group {
    margin-top: 0;
}

.tb-catalog-picker__group-title {
    margin: 0;
    padding: 0 2px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.tb-catalog-picker__group-items {
    display: block;
    overflow: hidden;
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-md);
    background: var(--tb-color-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.tb-catalog-picker__item {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tb-catalog-picker__item + .tb-catalog-picker__item {
    border-top: 1px solid var(--tb-color-border);
}

.tb-catalog-picker__main {
    padding: 13px 16px;
}

/* Catalog Picker: finale Abstände der Kategorien */
.tb-catalog-picker__group {
    gap: var(--tb-space-4);
}

.tb-catalog-picker__group + .tb-catalog-picker__group {
    margin-top: var(--tb-space-4);
}

.tb-catalog-picker__group-title {
    padding-left: 2px;
}

/* Catalog Picker: Mobile kompakter */
@media (max-width: 600px) {
    .tb-catalog-picker {
        gap: var(--tb-space-5);
    }

    .tb-catalog-picker__group {
        gap: var(--tb-space-3);
    }

    .tb-catalog-picker__group + .tb-catalog-picker__group {
        margin-top: var(--tb-space-2);
    }

    .tb-catalog-picker__group-title {
        font-size: 14px;
    }

    .tb-catalog-picker__main {
        padding: 12px 14px;
    }

    .tb-catalog-picker__content {
        margin-bottom: var(--tb-space-3);
    }

    .tb-catalog-picker__title {
        margin-bottom: 2px;
        font-size: 14px;
        line-height: 1.35;
    }

    .tb-catalog-picker__description {
        margin: 0;
        font-size: 12px;
        line-height: 1.45;
    }

    .tb-catalog-picker__offer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--tb-space-2);
        align-items: center;
    }

    .tb-catalog-picker__price {
        min-width: 0;
    }

    .tb-catalog-picker__price-summary {
        display: flex;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
    }

    .tb-catalog-picker__amount {
        font-size: 14px;
    }

    .tb-catalog-picker__billing {
        font-size: 12px;
        color: var(--tb-color-text-muted);
    }

    .tb-catalog-picker__price .tb-field {
        width: 100%;
    }

    .tb-catalog-picker__price .tb-field__label {
        display: none;
    }

    .tb-catalog-picker__price .tb-input {
        width: 100%;
        min-height: 38px;
        padding: 7px 10px;
        font-size: 13px;
    }

    .tb-catalog-picker__quantity {
        width: auto;
        justify-self: start;
    }

    .tb-catalog-picker__quantity .tb-input {
        width: 58px;
        min-height: 38px;
    }

    .tb-catalog-picker__offer > .tb-button {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        min-height: 38px;
        padding-inline: 12px;
        white-space: nowrap;
    }

    .tb-catalog-picker__individual-trigger {
        font-size: 12px;
    }

    .tb-catalog-picker__individual[open] {
        padding-top: 4px;
    }

    .tb-catalog-picker__custom-price {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: var(--tb-space-2);
    }

    .tb-catalog-picker__custom-price .tb-field {
        width: 100%;
    }

    .tb-catalog-picker__custom-price .tb-button {
        min-height: 40px;
        white-space: nowrap;
    }
}


/* Catalog Picker: Mobile Button nicht strecken */
@media (max-width: 600px) {
    .tb-catalog-picker__offer > .tb-button {
        justify-self: end;
        width: auto;
    }
}


/* Catalog Picker: Tablet zwischen Desktop und Mobile */
@media (min-width: 601px) and (max-width: 1000px) {
    .tb-catalog-picker__main {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--tb-space-4);
    }

    .tb-catalog-picker__offer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: var(--tb-space-2);
    }

    .tb-catalog-picker__price-summary {
        justify-content: flex-end;
    }

    .tb-catalog-picker__price {
        min-width: 135px;
    }

    .tb-catalog-picker__price .tb-field {
        min-width: 0;
    }

    .tb-catalog-picker__price .tb-input {
        width: 215px;
        min-width: 0;
    }

    .tb-catalog-picker__quantity .tb-input {
        width: 56px;
    }

    .tb-catalog-picker__offer .tb-button {
        min-height: 38px;
        padding-inline: 12px;
        white-space: nowrap;
    }

    .tb-catalog-picker__individual {
        justify-self: end;
    }
}


/* Angebotsprüfung vor dem verbindlichen Ausstellen */

.tb-quote-review-lines {
    display: grid;
    gap: 0;
}

.tb-quote-review-line {
    display: grid;
    grid-template-columns:
        48px
        minmax(0, 1fr)
        minmax(260px, auto);
    gap: var(--tb-space-4);
    align-items: center;

    padding:
        var(--tb-space-4)
        0;

    border-top:
        1px solid
        var(--tb-color-border);
}

.tb-quote-review-line:first-child {
    border-top: 0;
    padding-top: 0;
}

.tb-quote-review-line:last-child {
    padding-bottom: 0;
}

.tb-quote-review-line__position {
    color: var(--tb-color-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.tb-quote-review-line__service {
    min-width: 0;
    font-size: 14px;
}

.tb-quote-review-line__variant {
    margin-top: var(--tb-space-1);
    color: var(--tb-color-text-muted);
    font-size: 13px;
}

.tb-quote-review-line__price {
    min-width: 0;
    color: var(--tb-color-text-muted);
    font-size: 14px;
    text-align: right;
}

@media (max-width: 900px) {
    .tb-quote-review-line {
        grid-template-columns:
            40px
            minmax(0, 1fr);
    }

    .tb-quote-review-line__price {
        grid-column: 2;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .tb-quote-review-line {
        grid-template-columns:
            32px
            minmax(0, 1fr);
        gap: var(--tb-space-3);

        padding:
            var(--tb-space-4)
            0;
    }

    .tb-quote-review-line__price {
        font-size: 13px;
    }
}

/* ---------------------------------------------------------
   Rich-Text-Editor
---------------------------------------------------------- */

.tb-rich-text-editor {
    gap: var(--tb-space-2);
}

.tb-rich-text-editor__box {
    overflow: hidden;
    border: 1px solid var(--tb-color-border-strong);
    border-radius: var(--tb-radius-sm);
    background: var(--tb-color-surface);
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.tb-rich-text-editor__box:hover {
    border-color: #94a3b8;
}

.tb-rich-text-editor__box:focus-within {
    border-color: var(--tb-color-focus);
    box-shadow: var(--tb-focus-ring);
}

.tb-rich-text-editor__content {
    min-height: 88px;
    padding: var(--tb-space-4);
    overflow-wrap: break-word;
    background: var(--tb-color-surface);
    color: var(--tb-color-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}

.tb-rich-text-editor__content:empty::before {
    content: "Text eingeben …";
    color: var(--tb-color-text-subtle);
    pointer-events: none;
}

.tb-rich-text-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    padding: 5px 8px;
    border-top: 1px solid var(--tb-color-border);
    background: var(--tb-color-surface-subtle);
}

.tb-rich-text-editor__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 28px;
    padding: 4px 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--tb-color-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.tb-rich-text-editor__tool:hover {
    background: var(--tb-color-surface);
    color: var(--tb-color-text);
    box-shadow: 0 0 0 1px var(--tb-color-border);
}

.tb-rich-text-editor__tool:focus-visible {
    outline: 2px solid var(--tb-color-focus);
    outline-offset: 1px;
}

.tb-rich-text-editor__tool--bold {
    font-weight: 800;
}

.tb-rich-text-editor__separator {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--tb-color-border);
}

.tb-rich-text-editor__content p:first-child,
.tb-rich-text-editor__content h3:first-child,
.tb-rich-text-editor__content h4:first-child,
.tb-rich-text-editor__content h5:first-child,
.tb-rich-text-editor__content ul:first-child,
.tb-rich-text-editor__content ol:first-child {
    margin-top: 0;
}

.tb-rich-text-editor__content p:last-child,
.tb-rich-text-editor__content h3:last-child,
.tb-rich-text-editor__content h4:last-child,
.tb-rich-text-editor__content h5:last-child,
.tb-rich-text-editor__content ul:last-child,
.tb-rich-text-editor__content ol:last-child {
    margin-bottom: 0;
}

.tb-rich-text-editor .tb-field__hint {
    margin-top: 2px;
}

/* ---------------------------------------------------------
   Rich-Text-Ausgabe
---------------------------------------------------------- */

.tb-rich-text {
    line-height: 1.6;
}

.tb-rich-text > :first-child {
    margin-top: 0;
}

.tb-rich-text > :last-child {
    margin-bottom: 0;
}

.tb-rich-text p {
    margin: 0 0 0.75em;
}

.tb-rich-text h3,
.tb-rich-text h4,
.tb-rich-text h5 {
    margin: 1.15em 0 0.45em;
    line-height: 1.3;
}

.tb-rich-text h3 {
    font-size: 1.08em;
}

.tb-rich-text h4 {
    font-size: 1em;
}

.tb-rich-text h5 {
    font-size: 0.94em;
}

.tb-rich-text ul,
.tb-rich-text ol {
    margin: 0.5em 0 0.85em;
    padding-left: 1.5em;
}

.tb-rich-text li + li {
    margin-top: 0.25em;
}

/* =========================================================
   TOABAI.CONTROL APP SHELL
   Neue globale Anwendungsstruktur
   ========================================================= */

:root {
    --tb-sidebar-width: 248px;
    --tb-topbar-height: 64px;
}

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

.tb-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--tb-color-border);
    background: var(--tb-color-surface);
}

.tb-sidebar__brand {
    min-height: var(--tb-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid var(--tb-color-border);
}

.tb-sidebar__brand .tb-product-mark {
    font-size: 18px;
    font-weight: 700;
}

.tb-sidebar__body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 20px 14px;
}

.tb-sidebar__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--tb-color-border);
}

.tb-sidebar__footer-label {
    color: var(--tb-color-text-subtle);
    font-size: 11px;
    font-weight: 600;
}

.tb-sidebar .tb-main-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.tb-sidebar .tb-main-nav__link {
    min-height: 42px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    padding: 9px 12px;
    color: var(--tb-color-text-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition:
        background-color 120ms ease,
        color 120ms ease;
}

.tb-sidebar .tb-main-nav__link:hover {
    background: var(--tb-color-surface-subtle);
    color: var(--tb-color-text);
}

.tb-sidebar .tb-main-nav__link.is-active {
    background: #eff6ff;
    color: var(--tb-color-primary);
}

.tb-control-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tb-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--tb-topbar-height);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 28px;
    border-bottom: 1px solid var(--tb-color-border);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
}

.tb-topbar__search {
    width: min(420px, 38vw);
    position: relative;
    display: flex;
    align-items: center;
}

.tb-topbar__search-icon {
    position: absolute;
    left: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tb-color-text-subtle);
    pointer-events: none;
}

.tb-topbar__search-input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--tb-color-border);
    border-radius: 12px;
    background: var(--tb-color-surface-subtle);
    padding: 7px 14px 7px 40px;
    color: var(--tb-color-text);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition:
        border-color 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease;
}

.tb-topbar__search-input::placeholder {
    color: var(--tb-color-text-subtle);
}

.tb-topbar__search-input:hover {
    background: var(--tb-color-surface);
}

.tb-topbar__search-input:focus {
    border-color: var(--tb-color-primary);
    background: var(--tb-color-surface);
    box-shadow: var(--tb-focus-ring);
}

.tb-topbar__spacer {
    flex: 1;
}

.tb-topbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-mobile-nav__trigger {
    display: none;
}

.tb-topbar__mobile-brand {
    display: none;
}

.tb-control-main .tb-main {
    flex: 1;
    padding: 36px 0 64px;
}

.tb-control-main .tb-shell {
    width: min(
        calc(100% - 56px),
        var(--tb-content-wide)
    );
}

.tb-control-main .tb-page-header {
    align-items: flex-start;
    margin-bottom: 28px;
}

.tb-control-main .tb-page-title {
    font-size: clamp(28px, 3vw, 38px);
}

.tb-control-main .tb-page-eyebrow {
    color: var(--tb-color-text-subtle);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (min-width: 901px) {
    .tb-topbar .tb-mobile-nav {
        display: none;
    }
}

@media (max-width: 900px) {

    .tb-control-shell {
        display: block;
    }

    .tb-sidebar {
        display: none;
    }

    .tb-topbar {
        padding: 0 20px;
    }

    .tb-topbar__search {
        display: none;
    }

    .tb-mobile-nav__trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tb-topbar__mobile-brand {
        display: flex;
        align-items: center;
    }

    .tb-topbar__mobile-brand .tb-product-mark {
        font-size: 16px;
    }

    .tb-control-main .tb-shell {
        width: min(
            calc(100% - 40px),
            var(--tb-content-wide)
        );
    }

    .tb-mobile-nav {
        position: relative;
    }

    .tb-mobile-nav__panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 50;
        width: min(300px, calc(100vw - 32px));
        padding: 10px;
        border: 1px solid var(--tb-color-border);
        border-radius: 18px;
        background: var(--tb-color-surface);
        box-shadow: var(--tb-shadow-card);
    }

    .tb-mobile-nav__links {
        display: grid;
        gap: 4px;
    }

    .tb-mobile-nav__links .tb-main-nav__link {
        display: flex;
        min-height: 42px;
        align-items: center;
        border-radius: 10px;
        padding: 9px 12px;
        color: var(--tb-color-text-muted);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .tb-mobile-nav__links .tb-main-nav__link.is-active {
        background: #eff6ff;
        color: var(--tb-color-primary);
    }
}

@media (max-width: 640px) {

    .tb-topbar {
        min-height: 58px;
        padding: 0 16px;
    }

    .tb-topbar__actions {
        gap: 6px;
    }

    .tb-profile-menu__trigger {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tb-control-main .tb-main {
        padding: 28px 0 48px;
    }

    .tb-control-main .tb-shell {
        width: calc(100% - 32px);
    }
}


/* =========================================================
   APP SHELL V0.2
   Strukturierte Sidebar-Navigation
   ========================================================= */

.tb-nav-group {
    display: grid;
    gap: 4px;
}

.tb-nav-group + .tb-nav-group {
    margin-top: 24px;
}

.tb-nav-group__label {
    padding: 0 12px 6px;
    color: var(--tb-color-text-subtle);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tb-sidebar .tb-main-nav__link {
    position: relative;
    justify-content: flex-start;
    gap: 11px;
}

.tb-sidebar .tb-main-nav__link .tb-icon {
    flex: 0 0 auto;
    color: var(--tb-color-text-subtle);
    transition: color 120ms ease;
}

.tb-sidebar .tb-main-nav__link:hover .tb-icon {
    color: var(--tb-color-text);
}

.tb-sidebar .tb-main-nav__link.is-active .tb-icon {
    color: var(--tb-color-primary);
}

.tb-sidebar .tb-main-nav__link.is-active::before {
    content: '';
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tb-color-primary);
}

@media (max-width: 900px) {
    .tb-mobile-nav__links .tb-nav-group + .tb-nav-group {
        margin-top: 16px;
    }

    .tb-mobile-nav__links .tb-nav-group__label {
        padding: 6px 12px 4px;
    }

    .tb-mobile-nav__links .tb-main-nav__link {
        gap: 10px;
    }

    .tb-mobile-nav__links .tb-main-nav__link .tb-icon {
        flex: 0 0 auto;
    }
}

/* =========================================================
   APP SHELL V0.2.1
   Alte horizontale Active-Markierung innerhalb der Sidebar
   deaktivieren. Die neue Shell verwendet den linken Indikator.
   ========================================================= */

.tb-sidebar .tb-main-nav__link.is-active::after {
    display: none;
    content: none;
}

/* =========================================================
   APP SHELL V1.1
   Collapsible Desktop Sidebar + Mobile Drawer
   ========================================================= */

:root {
    --tb-sidebar-collapsed-width: 76px;
}

.tb-product-mark__compact {
    display: none;
}

.tb-sidebar__footer {
    margin-top: auto;
    padding: 12px 14px 18px;
}

.tb-sidebar-toggle {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 8px 12px;
    color: var(--tb-color-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tb-sidebar-toggle:hover {
    background: var(--tb-color-surface-subtle);
    color: var(--tb-color-text);
}

.tb-sidebar-toggle:focus-visible,
.tb-mobile-nav__trigger:focus-visible,
.tb-mobile-drawer__close:focus-visible {
    outline: none;
    box-shadow: var(--tb-focus-ring);
}

.tb-sidebar-toggle__icon {
    width: 18px;
    flex: 0 0 18px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.tb-control-shell,
.tb-sidebar,
.tb-sidebar__brand,
.tb-sidebar__body,
.tb-sidebar__footer {
    transition:
        width 160ms ease,
        padding 160ms ease,
        grid-template-columns 160ms ease;
}

.tb-sidebar-is-collapsed .tb-control-shell {
    grid-template-columns:
        var(--tb-sidebar-collapsed-width)
        minmax(0, 1fr);
}

.tb-sidebar-is-collapsed .tb-sidebar__brand {
    justify-content: center;
    padding-inline: 10px;
}

.tb-sidebar-is-collapsed .tb-product-mark__full {
    display: none;
}

.tb-sidebar-is-collapsed
.tb-sidebar
.tb-product-mark__compact {
    display: inline;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.tb-sidebar-is-collapsed .tb-sidebar__body {
    padding-inline: 10px;
}

.tb-sidebar-is-collapsed .tb-nav-group__label,
.tb-sidebar-is-collapsed
.tb-main-nav__link span:not(.tb-icon),
.tb-sidebar-is-collapsed
.tb-sidebar-toggle__label {
    display: none;
}

.tb-sidebar-is-collapsed
.tb-sidebar
.tb-main-nav__link {
    justify-content: center;
    padding-inline: 0;
}

.tb-sidebar-is-collapsed
.tb-sidebar
.tb-main-nav__link.is-active::before {
    left: -10px;
}

.tb-sidebar-is-collapsed .tb-nav-group + .tb-nav-group {
    margin-top: 18px;
}

.tb-sidebar-is-collapsed .tb-sidebar__footer {
    padding-inline: 10px;
}

.tb-sidebar-is-collapsed .tb-sidebar-toggle {
    justify-content: center;
    padding-inline: 0;
}

.tb-sidebar-is-collapsed
.tb-sidebar-toggle__icon {
    transform: rotate(180deg);
}


/* Mobile Drawer */

.tb-mobile-drawer {
    display: none;
}

@media (max-width: 900px) {

    .tb-mobile-nav__trigger {
        min-height: 38px;
        border: 1px solid var(--tb-color-border);
        border-radius: var(--tb-radius-md);
        background: var(--tb-color-surface);
        padding: 7px 12px;
        color: var(--tb-color-text);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .tb-mobile-drawer {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: block;
        visibility: hidden;
        pointer-events: none;
    }

    .tb-mobile-drawer.is-open {
        visibility: visible;
        pointer-events: auto;
    }

    .tb-mobile-drawer__backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        border: 0;
        background: rgba(15, 23, 42, 0.34);
        opacity: 0;
        transition: opacity 180ms ease;
    }

    .tb-mobile-drawer.is-open
    .tb-mobile-drawer__backdrop {
        opacity: 1;
    }

    .tb-mobile-drawer__panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(340px, calc(100vw - 36px));
        display: flex;
        flex-direction: column;
        background: var(--tb-color-surface);
        box-shadow: var(--tb-shadow-card);
        transform: translateX(100%);
        transition: transform 180ms ease;
    }

    .tb-mobile-drawer.is-open
    .tb-mobile-drawer__panel {
        transform: translateX(0);
    }

    .tb-mobile-drawer__header {
        min-height: var(--tb-topbar-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0 18px;
        border-bottom: 1px solid var(--tb-color-border);
    }

    .tb-mobile-drawer__header
    .tb-product-mark {
        font-size: 18px;
    }

    .tb-mobile-drawer__close {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--tb-color-text-muted);
        font: inherit;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    .tb-mobile-drawer__close:hover {
        background: var(--tb-color-surface-subtle);
        color: var(--tb-color-text);
    }

    .tb-mobile-drawer__body {
        min-height: 0;
        flex: 1;
        overflow-y: auto;
        padding: 18px 12px 28px;
    }

    .tb-mobile-drawer__body
    .tb-mobile-nav__links {
        display: grid;
        gap: 4px;
    }

    body.tb-mobile-nav-is-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tb-control-shell,
    .tb-sidebar,
    .tb-sidebar__brand,
    .tb-sidebar__body,
    .tb-sidebar__footer,
    .tb-mobile-drawer__backdrop,
    .tb-mobile-drawer__panel {
        transition: none;
    }
}

/* =========================================================
   TOABAI.CONTROL · DASHBOARD 2.0
   Arbeitsorientierte Startseite
   ========================================================= */

.tb-dashboard--work {
    gap: var(--tb-space-10);
}

.tb-dashboard-attention {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: var(--tb-space-4);
}

.tb-dashboard-work-card {
    min-width: 0;
    display: block;
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-card-radius);
    background: var(--tb-color-surface);
    padding: 20px;
    color: var(--tb-color-text);
    text-decoration: none;
    box-shadow: var(--tb-shadow-card);
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
}

.tb-app .tb-dashboard-work-card {
    color: var(--tb-color-text);
    text-decoration: none;
}

.tb-dashboard-work-card:hover {
    border-color: rgba(37, 99, 235, 0.30);
    box-shadow: var(--tb-shadow-card-hover);
    transform: translateY(-1px);
}

.tb-dashboard-work-card:focus-visible {
    outline: none;
    box-shadow:
        var(--tb-focus-ring),
        var(--tb-shadow-card);
}

.tb-dashboard-work-card.has-alert {
    border-color: rgba(185, 28, 28, 0.22);
}

.tb-dashboard-work-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tb-space-4);
}

.tb-dashboard-work-card__title {
    font-size: 15px;
    font-weight: 800;
}

.tb-dashboard-work-card__primary {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.tb-dashboard-work-card__primary-label {
    display: block;
    margin-top: 4px;
    color: var(--tb-color-text-muted);
    font-size: 12px;
    text-align: right;
}

.tb-dashboard-work-card__rows {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tb-space-5);
    margin-top: var(--tb-space-5);
    padding-top: var(--tb-space-4);
    border-top: 1px solid var(--tb-color-border);
    color: var(--tb-color-text-muted);
    font-size: 13px;
}

.tb-dashboard-work-card__rows strong {
    color: var(--tb-color-text);
}

.tb-dashboard-overview-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: var(--tb-space-4);
}

.tb-dashboard-overview-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-card-radius);
    background: var(--tb-color-surface);
    padding: 20px;
    color: var(--tb-color-text);
    text-decoration: none;
    box-shadow: var(--tb-shadow-card);
}

.tb-app .tb-dashboard-overview-card {
    color: var(--tb-color-text);
    text-decoration: none;
}

.tb-dashboard-overview-card:hover {
    border-color: rgba(37, 99, 235, 0.30);
    box-shadow: var(--tb-shadow-card-hover);
}

.tb-dashboard-overview-card:focus-visible {
    outline: none;
    box-shadow:
        var(--tb-focus-ring),
        var(--tb-shadow-card);
}

.tb-dashboard-overview-card__label {
    color: var(--tb-color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tb-dashboard-overview-card__value {
    margin-top: var(--tb-space-4);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.tb-dashboard-overview-card__meta {
    margin-top: var(--tb-space-3);
    color: var(--tb-color-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.tb-dashboard-overview-card__amount {
    margin-top: var(--tb-space-4);
    padding-top: var(--tb-space-4);
    border-top: 1px solid var(--tb-color-border);
    font-size: 13px;
    font-weight: 700;
}

.tb-dashboard-columns {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: var(--tb-space-6);
}

.tb-dashboard-list {
    display: grid;
}

.tb-dashboard-list__row {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tb-space-4);
    padding: 10px 0;
    border-bottom: 1px solid var(--tb-color-border);
    color: var(--tb-color-text);
    font-size: 13px;
    text-decoration: none;
}

.tb-dashboard-list__row:last-child {
    border-bottom: 0;
}

a.tb-dashboard-list__row:hover {
    color: var(--tb-color-primary);
}

.tb-dashboard-list__row strong {
    font-size: 15px;
    font-weight: 800;
}

.tb-dashboard-website-summary {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.7fr)
        minmax(0, 1.3fr);
    align-items: center;
    gap: var(--tb-space-6);
}

.tb-dashboard-website-summary__total {
    display: flex;
    flex-direction: column;
}

.tb-dashboard-website-summary__total strong {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.tb-dashboard-website-summary__total span {
    margin-top: var(--tb-space-2);
    color: var(--tb-color-text-muted);
    font-size: 12px;
}

@media (max-width: 900px) {
    .tb-dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .tb-dashboard-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .tb-dashboard-attention {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .tb-dashboard-website-summary {
        grid-template-columns: 1fr;
    }

    .tb-dashboard-work-card__primary-label {
        text-align: left;
    }
}

/* Quote creation from template */

.tb-quote-create-flow {
    display: grid;
    gap: var(--tb-space-6);
}

.tb-quote-create-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-quote-create-step {
    display: flex;
    align-items: center;
    gap: var(--tb-space-2);
    color: var(--tb-color-text-muted);
    font-size: 14px;
    font-weight: 600;
}

.tb-quote-create-step:not(:last-child)::after {
    content: "";
    width: 48px;
    height: 1px;
    margin: 0 var(--tb-space-3);
    background: var(--tb-color-border);
}

.tb-quote-create-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid var(--tb-color-border);
    border-radius: 999px;
    background: var(--tb-color-surface);
    font-size: 12px;
}

.tb-quote-create-step--active {
    color: var(--tb-color-text);
}

.tb-quote-create-step--active
.tb-quote-create-step__number {
    border-color: var(--tb-color-primary);
    background: var(--tb-color-primary);
    color: #fff;
}

.tb-quote-create-step--complete
.tb-quote-create-step__number {
    border-color: var(--tb-color-border);
    background: var(--tb-color-surface-subtle);
    color: var(--tb-color-text);
}

.tb-quote-create-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 360px);
    gap: var(--tb-space-6);
    align-items: start;
}

.tb-quote-create-main,
.tb-quote-create-sidebar {
    min-width: 0;
}

.tb-quote-create-form {
    display: grid;
    gap: var(--tb-space-6);
}

.tb-quote-create-form__hint {
    display: flex;
    align-items: flex-start;
    gap: var(--tb-space-2);
    color: var(--tb-color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.tb-quote-create-form__hint svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

.tb-quote-create-form__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tb-space-3);
    padding-top: var(--tb-space-2);
}

.tb-quote-template-summary {
    display: flex;
    align-items: flex-start;
    gap: var(--tb-space-3);
}

.tb-quote-template-summary__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: var(--tb-color-surface-subtle);
}

.tb-quote-template-summary__content {
    min-width: 0;
}

.tb-quote-template-summary__content strong {
    display: block;
}

.tb-quote-template-summary__content p {
    margin:
        var(--tb-space-1)
        0
        0;
    color: var(--tb-color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.tb-quote-template-facts {
    display: grid;
    gap: 0;
    margin:
        var(--tb-space-5)
        0
        0;
}

.tb-quote-template-facts > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tb-space-4);
    padding:
        var(--tb-space-3)
        0;
    border-top: 1px solid var(--tb-color-border);
}

.tb-quote-template-facts dt {
    color: var(--tb-color-text-muted);
    font-size: 13px;
}

.tb-quote-template-facts dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.tb-quote-template-snapshot-note {
    margin:
        var(--tb-space-4)
        0
        0;
    color: var(--tb-color-text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.tb-quote-create-empty {
    display: flex;
    gap: var(--tb-space-3);
    align-items: flex-start;
}

.tb-quote-create-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: var(--tb-color-surface-subtle);
}

.tb-quote-create-empty p {
    margin:
        var(--tb-space-1)
        0
        0;
    color: var(--tb-color-text-muted);
}

.tb-quote-create-error {
    margin-bottom: var(--tb-space-5);
}

@media (max-width: 820px) {
    .tb-quote-create-layout {
        grid-template-columns: 1fr;
    }

    .tb-quote-create-sidebar {
        order: -1;
    }
}

@media (max-width: 640px) {
    .tb-quote-create-steps {
        align-items: flex-start;
    }

    .tb-quote-create-step {
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--tb-space-1);
        font-size: 12px;
    }

    .tb-quote-create-step:not(:last-child)::after {
        display: none;
    }

    .tb-quote-create-form__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .tb-quote-create-form__actions .tb-button {
        width: 100%;
    }
}

/* =========================================================
   QUOTE TEMPLATE DETAIL
   Detailansicht einer Angebotsvorlage
========================================================= */

.tb-template-detail {
    display: grid;
    gap: var(--tb-space-6);
}

.tb-template-detail__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tb-space-4);
    margin-top: -12px;
}

.tb-template-detail__empty {
    padding: 0 24px 24px;
    color: var(--tb-color-text-muted);
    font-size: 13px;
}

.tb-template-detail__line-description {
    max-width: 640px;
    margin-top: var(--tb-space-1);
    color: var(--tb-color-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.tb-template-detail__line-meta {
    margin-top: var(--tb-space-1);
    color: var(--tb-color-text-subtle);
    font-size: 11px;
}

.tb-template-detail__muted {
    color: var(--tb-color-text-muted);
    font-size: 12px;
}

.tb-template-terms {
    display: grid;
    gap: var(--tb-space-5);
}

.tb-template-term + .tb-template-term {
    padding-top: var(--tb-space-5);
    border-top: 1px solid var(--tb-color-border);
}

.tb-template-term__title {
    margin: 0;
    color: var(--tb-color-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

.tb-template-term__content {
    max-width: 900px;
    margin-top: var(--tb-space-2);
    color: var(--tb-color-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.tb-template-detail__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tb-space-6);
    padding-top: var(--tb-space-2);
}

.tb-template-detail__snapshot-note {
    max-width: 720px;
    display: flex;
    align-items: flex-start;
    gap: var(--tb-space-2);
    color: var(--tb-color-text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.tb-template-detail__snapshot-note .tb-icon {
    margin-top: 1px;
    color: var(--tb-color-text-subtle);
}

@media (max-width: 720px) {
    .tb-template-detail__toolbar {
        margin-top: 0;
    }

    .tb-template-detail__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .tb-template-detail__footer .tb-button {
        width: 100%;
    }

    .tb-template-detail__empty {
        padding:
            0
            20px
            20px;
    }
}

/*
 * Angebotsvorlagen
 */

.tb-template-detail {
    display: grid;
    gap: 1.5rem;
}

.tb-template-detail > form {
    display: grid;
    gap: 1rem;
}

.tb-template-section {
    margin-top: 0;
}

/*
 * Formulare
 */

.tb-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
}

.tb-form-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .5rem;
}

.tb-form-field--full {
    grid-column: 1 / -1;
}

.tb-form-label {
    display: block;
    margin: 0;
    color: #172033;
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.35;
}

.tb-form-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 2.75rem;
    padding: .68rem .8rem;
    border: 1px solid #cfd7e3;
    border-radius: .65rem;
    outline: none;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: .9rem;
    line-height: 1.45;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

.tb-form-input:hover {
    border-color: #aeb9c9;
}

.tb-form-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
}

textarea.tb-form-input {
    min-height: 7rem;
    resize: vertical;
}

select.tb-form-input {
    cursor: pointer;
}

.tb-form-help {
    margin: 0;
    color: #68758a;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.5;
}

/*
 * Vorlagenprofil
 */

.tb-template-detail > form > div:first-child textarea {
    min-height: 8rem;
}

.tb-template-detail > form > div:first-child {
    min-width: 0;
}

/*
 * Positionen
 */

.tb-template-detail__empty,
.tb-template-empty {
    padding: 1.5rem;
    border: 1px dashed #cfd7e3;
    border-radius: .75rem;
    background: #f8fafc;
    text-align: center;
}

.tb-template-detail__empty strong,
.tb-template-empty strong {
    color: #172033;
    font-size: .9rem;
}

.tb-template-detail__empty p,
.tb-template-empty p {
    margin: .35rem 0 0;
    color: #68758a;
    font-size: .85rem;
    line-height: 1.5;
}

/*
 * Inhaltsblöcke
 */

.tb-template-block-list {
    display: grid;
    gap: .65rem;
}

.tb-template-block {
    overflow: hidden;
    border: 1px solid #dfe5ed;
    border-radius: .75rem;
    background: #fff;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.tb-template-block:hover {
    border-color: #c7d0dd;
}

.tb-template-block[open] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgb(15 23 42 / 4%);
}

.tb-template-block__summary {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    padding: .9rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

[data-sortable-block] > .tb-template-block__summary {
    grid-template-columns:
        1.25rem 2rem minmax(0, 1fr) auto;
}

.tb-template-block__summary::-webkit-details-marker {
    display: none;
}

.tb-template-block__summary:hover {
    background: #f8fafc;
}

.tb-template-block__position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    background: #eef2f7;
    color: #536176;
    font-size: .72rem;
    font-weight: 700;
}

.tb-template-block__main {
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.tb-template-block__meta {
    color: #748197;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.3;
    text-transform: uppercase;
}

.tb-template-block__title {
    overflow: hidden;
    color: #172033;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-template-block__preview {
    overflow: hidden;
    color: #68758a;
    font-size: .8rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-template-block__edit {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 .7rem;
    border: 1px solid #dfe5ed;
    border-radius: .55rem;
    background: #fff;
    color: #46546a;
    font-size: .75rem;
    font-weight: 650;
}

.tb-template-block[open]
.tb-template-block__summary {
    border-bottom: 1px solid #e3e8ef;
    background: #f8fafc;
}

.tb-template-block__body {
    padding: 1.25rem;
    background: #fff;
}

.tb-template-block__save {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.tb-template-block__secondary-actions {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #e7ebf0;
}

.tb-template-block__move {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.tb-template-content-input {
    width: 100%;
    min-height: 11rem;
}

/*
 * Tabellen innerhalb der Vorlagenverwaltung
 */

.tb-template-section table {
    width: 100%;
}

.tb-template-section th {
    color: #66748a;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.tb-template-section td {
    vertical-align: middle;
}

.tb-template-section td strong {
    color: #172033;
    font-weight: 650;
}

/*
 * Formular-Aktionsleiste
 */

.tb-template-detail > form > div:last-child {
    margin-top: 0 !important;
}

/*
 * Responsive
 */

@media (max-width: 900px) {
    .tb-form-grid {
        grid-template-columns: 1fr;
    }

    .tb-form-field--full {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    .tb-template-detail {
        gap: 1rem;
    }

    .tb-template-block__summary {
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: .75rem;
    }

    .tb-template-block__edit {
        display: none;
    }

    .tb-template-block__preview {
        white-space: normal;
    }

    .tb-template-block__body {
        padding: 1rem;
    }

    .tb-template-block__secondary-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .tb-template-block__move {
        flex-wrap: wrap;
    }

    .tb-form-grid {
        gap: 1rem;
    }
}

/* =========================================================
   Angebotsvorlage bearbeiten. Aktionslogik
========================================================= */

.tb-template-section-action {
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid var(--tb-color-border, #e2e8f0);
}

/*
 * Neuen Inhaltsblock standardmäßig kompakt darstellen.
 */

.tb-template-add-block {
    overflow: hidden;
    border: 1px solid var(--tb-color-border, #dfe5ee);
    border-radius: 1rem;
    background: #fff;
    box-shadow:
        0 1px 2px rgb(15 23 42 / 3%),
        0 8px 24px rgb(15 23 42 / 4%);
}

.tb-template-add-block__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
}

.tb-template-add-block__summary::-webkit-details-marker {
    display: none;
}

.tb-template-add-block__summary:hover {
    background: #f8fafc;
}

.tb-template-add-block__copy {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.tb-template-add-block__copy strong {
    color: #172033;
    font-size: .95rem;
    font-weight: 700;
}

.tb-template-add-block__copy span {
    color: #68758a;
    font-size: .82rem;
    line-height: 1.45;
}

.tb-template-add-block__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #d8e0ea;
    border-radius: .6rem;
    color: #475569;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    transition:
        transform .15s ease,
        background-color .15s ease;
}

.tb-template-add-block[open]
    .tb-template-add-block__summary {
    border-bottom: 1px solid var(--tb-color-border, #e2e8f0);
    background: #f8fafc;
}

.tb-template-add-block[open]
    .tb-template-add-block__icon {
    transform: rotate(45deg);
}

.tb-template-add-block__body {
    padding: 1.5rem;
}

.tb-template-add-block__body
    .tb-template-section-action {
    padding: 1rem 0 0;
    margin-top: 1rem;
}

@media (max-width: 720px) {
    .tb-template-section-action {
        align-items: stretch;
        flex-direction: column;
    }

    .tb-template-add-block__summary {
        padding: 1rem;
    }

    .tb-template-add-block__body {
        padding: 1rem;
    }
}

/* =========================================================
   Catalog Picker: individueller Preis für Angebotsvorlagen
========================================================= */

.tb-catalog-picker__custom-template-price {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(150px, .8fr)
        minmax(120px, .65fr)
        minmax(120px, .65fr)
        minmax(130px, .7fr)
        auto;
    gap: var(--tb-space-3);
    align-items: end;
    width: 100%;
    margin-top: var(--tb-space-3);
    padding-top: var(--tb-space-3);
    border-top: 1px solid var(--tb-color-border);
}

.tb-catalog-picker__custom-template-note {
    align-self: center;
    color: var(--tb-color-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.tb-catalog-picker__custom-template-price > .tb-field {
    min-width: 0;
}

.tb-catalog-picker__custom-template-price .tb-input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
}

.tb-catalog-picker__custom-template-price .tb-button {
    min-height: 38px;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .tb-catalog-picker__custom-template-price {
        grid-template-columns:
            minmax(180px, 1fr)
            repeat(2, minmax(130px, .7fr));
    }

    .tb-catalog-picker__custom-template-note {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .tb-catalog-picker__custom-template-price {
        grid-template-columns: 1fr;
    }

    .tb-catalog-picker__custom-template-note {
        grid-column: auto;
    }

    .tb-catalog-picker__custom-template-price .tb-button {
        justify-self: start;
    }
}

/* Sortierbare Vorlagen-Inhaltsblöcke */
.tb-template-block__drag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-height: 2rem;
    color: #8b97a8;
    cursor: grab;
    font-size: 1.15rem;
    line-height: 1;
    user-select: none;
}

.tb-template-block__drag:hover,
.tb-template-block__drag:focus-visible {
    color: #46546a;
}

.tb-template-block__drag:active {
    cursor: grabbing;
}

.tb-template-block.is-dragging {
    opacity: .4;
}

.tb-template-block.is-drag-over {
    border-color: #2563eb;
}

.tb-template-block.is-drag-over::before {
    display: block;
    height: 3px;
    margin: -2px 0 0;
    border-radius: 999px;
    background: #2563eb;
    content: "";
}


/* Placeholder picker */
.tb-placeholder-picker {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin-top: .45rem;
}

.tb-placeholder-picker--toolbar {
    display: inline-flex;
    margin-top: 0;
}

.tb-placeholder-picker__details {
    position: relative;
}

.tb-placeholder-picker__trigger {
    cursor: pointer;
    list-style: none;
    font-size: .8125rem;
    font-weight: 600;
}

.tb-placeholder-picker__trigger::-webkit-details-marker {
    display: none;
}

.tb-placeholder-picker:not(.tb-placeholder-picker--toolbar)
.tb-placeholder-picker__trigger {
    color: var(--tb-color-primary, #315f54);
}

.tb-placeholder-picker__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + .4rem);
    left: 0;
    min-width: 12rem;
    padding: .5rem;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: .65rem;
    background: #fff;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, .12);
}

.tb-placeholder-picker__group + .tb-placeholder-picker__group {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.tb-placeholder-picker__label {
    display: block;
    padding: .25rem .5rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tb-placeholder-picker__option {
    display: block;
    width: 100%;
    padding: .45rem .5rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tb-placeholder-picker__option:hover,
.tb-placeholder-picker__option:focus-visible {
    background: rgba(15, 23, 42, .06);
}

.tb-placeholder-picker--toolbar
.tb-placeholder-picker__trigger {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}



.tb-placeholder-picker--toolbar
.tb-placeholder-picker__details {
    display: inline-flex;
    align-items: center;
}

.tb-placeholder-picker--toolbar
.tb-placeholder-picker__trigger {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .25rem .5rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.tb-placeholder-picker--toolbar
.tb-placeholder-picker__trigger:hover {
    background: rgba(15, 23, 42, .05);
    border-radius: .35rem;
}

.tb-placeholder-picker--toolbar
.tb-placeholder-picker__menu {
    top: calc(100% + .35rem);
    bottom: auto;
}



/* Rich-Text placeholder menu may extend beyond the editor box. */
.tb-rich-text-editor:has(
    .tb-placeholder-picker--toolbar
) .tb-rich-text-editor__box {
    overflow: visible;
}

.tb-rich-text-editor:has(
    .tb-placeholder-picker--toolbar
) .tb-rich-text-editor__content {
    border-radius:
        var(--tb-radius-sm)
        var(--tb-radius-sm)
        0
        0;
}

.tb-rich-text-editor:has(
    .tb-placeholder-picker--toolbar
) .tb-rich-text-editor__toolbar {
    border-radius:
        0
        0
        var(--tb-radius-sm)
        var(--tb-radius-sm);
}

/*
 * Kontextbezogene Aktionsmenüs.
 *
 * Sichtbar bleibt nur der wahrscheinlichste nächste Schritt. Seltenere,
 * administrative und destruktive Aktionen können in diesem Menü gebündelt
 * werden. Native <details>-Semantik hält die Grundfunktion ohne JavaScript
 * verfügbar.
 */
.tb-action-menu {
    position: relative;
    display: inline-flex;
}

.tb-action-menu__trigger {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-md);
    background: var(--tb-color-surface);
    color: var(--tb-color-text);
    cursor: pointer;
    list-style: none;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.tb-action-menu__trigger::-webkit-details-marker {
    display: none;
}

.tb-action-menu__trigger:hover {
    background: var(--tb-color-surface-subtle);
}

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

.tb-action-menu[open] > .tb-action-menu__trigger {
    background: var(--tb-color-surface-subtle);
}

.tb-action-menu__panel {
    position: absolute;
    top: calc(100% + var(--tb-space-2));
    z-index: 40;
    width: max-content;
    min-width: 210px;
    max-width: min(320px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-md);
    background: var(--tb-color-surface);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    padding: var(--tb-space-2);
}

.tb-action-menu--right .tb-action-menu__panel {
    right: 0;
}

.tb-action-menu--left .tb-action-menu__panel {
    left: 0;
}

.tb-action-menu__panel form {
    margin: 0;
}

.tb-action-menu__item {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    border: 0;
    border-radius: calc(var(--tb-radius-md) - 2px);
    background: transparent;
    color: var(--tb-color-text);
    padding: 9px 11px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.tb-action-menu__item:hover,
.tb-action-menu__item:focus-visible {
    background: var(--tb-color-surface-subtle);
}

.tb-action-menu__item:focus-visible {
    outline: 2px solid var(--tb-color-focus);
    outline-offset: -2px;
}

.tb-action-menu__item--danger {
    color: var(--tb-color-danger-text);
}

.tb-action-menu__separator {
    height: 1px;
    margin: var(--tb-space-2) var(--tb-space-1);
    background: var(--tb-color-border);
}

.tb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 720px) {
    .tb-action-menu__trigger {
        width: 42px;
        height: 42px;
    }

    .tb-action-menu__panel {
        min-width: 230px;
    }
}


.quote-edit-management {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tb-space-6);
    margin-top: var(--tb-space-4);
    padding: var(--tb-space-6) 0;
    border-top: 1px solid var(--tb-color-border);
}

.quote-edit-management__copy {
    display: grid;
    gap: var(--tb-space-1);
    min-width: 0;
}

.quote-edit-management__copy strong {
    font-size: 0.9rem;
    font-weight: 650;
}

.quote-edit-management__copy span {
    color: var(--tb-color-text-muted);
    font-size: 0.85rem;
}

@media (max-width: 720px) {
    .quote-edit-management {
        align-items: stretch;
        flex-direction: column;
        gap: var(--tb-space-4);
    }

    .quote-edit-management .tb-button {
        align-self: flex-start;
    }
}

.quote-content-create {
    margin-top: var(--tb-space-5);
}

.quote-edit-section-stack {
    display: contents;
}

.quote-content-create__editor {
    display: grid;
    gap: var(--tb-space-5);
}

.quote-content-create__actions {
    display: flex;
    justify-content: flex-end;
}



/*
 * Persistente Aktionsleiste am unteren Rand des Arbeitsbereichs.
 * Die Leiste selbst nutzt die volle Breite rechts der Sidebar.
 * Die enthaltenen Aktionen bleiben an der Seitenbreite ausgerichtet.
 */
.tb-bottom-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: var(--tb-sidebar-width);
    z-index: 40;
    padding: 13px 0;
    background: #ffffff;
    border-top: 1px solid var(--tb-color-border);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06);
}

.tb-sidebar-is-collapsed .tb-bottom-bar {
    left: var(--tb-sidebar-collapsed-width);
}

.tb-main:has(.tb-bottom-bar) {
    padding-bottom: 92px;
}

.tb-bottom-bar__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tb-space-4);
    min-height: 44px;
}

.tb-bottom-bar__start {
    display: flex;
    align-items: center;
    gap: var(--tb-space-3);
}

.tb-bottom-bar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tb-space-3);
    margin-left: auto;
}

@media (max-width: 900px) {
    .tb-bottom-bar,
    .tb-sidebar-is-collapsed .tb-bottom-bar {
        left: 0;
    }
}

@media (max-width: 640px) {
    .tb-bottom-bar {
        padding: 10px 0;
    }

    .tb-bottom-bar__actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--tb-space-2);
    }

    .tb-bottom-bar__actions > * {
        width: 100%;
        justify-content: center;
    }
}

/* Quote service picker */
.tb-service-picker {
    overflow: hidden;
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-xl);
    background: #fff;
    box-shadow: var(--tb-shadow-sm);
}

.tb-service-picker__toolbar {
    display: grid;
    grid-template-columns:
        minmax(240px, 1fr)
        minmax(240px, 1fr)
        minmax(260px, .9fr);
    gap: var(--tb-space-3);
    padding: var(--tb-space-5);
    border-bottom: 1px solid var(--tb-color-border);
}

.tb-service-picker__mode {
    display: flex;
    gap: var(--tb-space-3);
    align-items: center;
    min-width: 0;
    padding: var(--tb-space-4);
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-lg);
    background: #fff;
    color: var(--tb-color-text);
    text-decoration: none;
    text-align: left;
}

.tb-service-picker__mode.is-active {
    border-color: var(--tb-color-primary);
    background: color-mix(
        in srgb,
        var(--tb-color-primary) 6%,
        white
    );
    color: var(--tb-color-primary);
}

.tb-service-picker__mode-icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f4f7fb;
    font-size: 1.25rem;
    font-weight: 700;
}

.tb-service-picker__mode strong,
.tb-service-picker__mode small {
    display: block;
}

.tb-service-picker__mode strong {
    font-size: .9rem;
}

.tb-service-picker__mode small {
    margin-top: 2px;
    color: var(--tb-color-text-muted);
    font-size: .78rem;
    font-weight: 400;
}

.tb-service-picker__search {
    display: flex;
    align-items: center;
    gap: var(--tb-space-3);
    align-self: center;
    min-height: 48px;
    padding: 0 var(--tb-space-4);
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-lg);
    background: #fff;
    color: var(--tb-color-text-muted);
}

.tb-service-picker__search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tb-color-text);
    font: inherit;
}

.tb-service-picker__workspace {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 360px;
}

.tb-service-picker__categories {
    padding: var(--tb-space-4);
    border-right: 1px solid var(--tb-color-border);
    background: #fbfcfe;
}

.tb-service-picker__category {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--tb-space-3);
    padding: 12px 14px;
    border: 0;
    border-radius: var(--tb-radius-md);
    background: transparent;
    color: var(--tb-color-text);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.tb-service-picker__category + .tb-service-picker__category {
    margin-top: 4px;
}

.tb-service-picker__category:hover {
    background: #f1f5f9;
}

.tb-service-picker__category.is-active {
    position: relative;
    background: #eef5ff;
    color: var(--tb-color-primary);
}

.tb-service-picker__category.is-active::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--tb-color-primary);
    content: "";
}

.tb-service-picker__category-end {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-space-3);
}

.tb-service-picker__count {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e8edf4;
    color: #526174;
    font-size: .72rem;
}

.tb-service-picker__category.is-active
.tb-service-picker__count {
    background: #dbeafe;
    color: var(--tb-color-primary);
}

.tb-service-picker__results {
    min-width: 0;
    padding: var(--tb-space-4);
}

.tb-service-picker__group {
    display: grid;
    gap: var(--tb-space-3);
}

.tb-service-picker__item {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.35fr)
        minmax(440px, 1.65fr);
    gap: var(--tb-space-5);
    padding: var(--tb-space-4);
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-radius-lg);
    background: #fff;
}

.tb-service-picker__service {
    min-width: 0;
}

.tb-service-picker__service h2 {
    margin: 0;
    font-size: .96rem;
    line-height: 1.3;
}

.tb-service-picker__service p {
    margin: 5px 0 0;
    color: var(--tb-color-text-muted);
    font-size: .78rem;
    line-height: 1.4;
}

.tb-service-picker__details {
    margin-top: 10px;
    color: var(--tb-color-primary);
    font-size: .78rem;
}

.tb-service-picker__details summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.tb-service-picker__details summary::-webkit-details-marker {
    display: none;
}

.tb-service-picker__details div {
    margin-top: 8px;
    color: var(--tb-color-text-muted);
    line-height: 1.45;
}

.tb-service-picker__form {
    display: grid;
    grid-template-columns:
        minmax(170px, .8fr)
        minmax(210px, 1fr);
    gap: var(--tb-space-4);
    align-items: end;
    min-width: 0;
}

.tb-service-picker__commercial,
.tb-service-picker__reference {
    min-width: 0;
}

.tb-service-picker__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.tb-service-picker__price strong {
    font-size: .95rem;
}

.tb-service-picker__price span,
.tb-service-picker__price-meta {
    color: var(--tb-color-text-muted);
    font-size: .75rem;
}

.tb-service-picker__price-meta {
    margin-top: 4px;
}

.tb-service-picker__price--empty {
    color: var(--tb-color-text-muted);
    font-size: .8rem;
    font-weight: 600;
}

.tb-service-picker__field-label {
    display: block;
    margin-bottom: 5px;
    color: var(--tb-color-text);
    font-size: .76rem;
    font-weight: 600;
}

.tb-service-picker__quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.tb-service-picker__quantity .tb-input {
    width: 62px;
}

.tb-service-picker__quantity span {
    color: var(--tb-color-text-muted);
    font-size: .75rem;
}

.tb-service-picker__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 8px;
}

.tb-service-picker__secondary-action {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--tb-color-primary);
    border-radius: var(--tb-radius-md);
    background: #fff;
    color: var(--tb-color-primary);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.tb-service-picker__custom-price {
    grid-column: 1 / -1;
    padding-top: var(--tb-space-3);
    border-top: 1px solid var(--tb-color-border);
}

.tb-service-picker__custom-price[hidden],
.tb-service-picker__group[hidden],
.tb-service-picker__item[hidden],
.tb-service-picker__empty[hidden] {
    display: none !important;
}

.tb-service-picker__empty {
    padding: var(--tb-space-8);
    color: var(--tb-color-text-muted);
    text-align: center;
}

@media (max-width: 1100px) {
    .tb-service-picker__toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .tb-service-picker__search {
        grid-column: 1 / -1;
    }

    .tb-service-picker__workspace {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .tb-service-picker__item {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .tb-service-picker__toolbar,
    .tb-service-picker__workspace {
        grid-template-columns: 1fr;
    }

    .tb-service-picker__categories {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--tb-color-border);
    }

    .tb-service-picker__category {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .tb-service-picker__category.is-active::before {
        display: none;
    }

    .tb-service-picker__form {
        grid-template-columns: 1fr;
    }
}

/* Quote service picker polish */
.tb-service-picker__category {
    min-height: 52px;
    padding: 0 14px;
}

.tb-service-picker__item {
    padding: 20px 18px;
    border-radius: 22px;
}

.tb-service-picker__commercial {
    min-width: 180px;
    align-self: center;
    text-align: left;
}

.tb-service-picker__reference {
    min-width: 280px;
    padding-left: 20px;
    border-left: 1px solid var(--tb-color-border);
}

.tb-service-picker__reference .tb-input {
    width: 100%;
}

.tb-service-picker__actions {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    margin-top: 10px;
}

.tb-service-picker__actions .tb-button {
    min-height: 44px;
    white-space: nowrap;
}

.tb-service-picker__actions .tb-button:first-child,
.tb-service-picker__actions .tb-button:last-child {
    min-width: 132px;
}

@media (max-width: 1250px) {
    .tb-service-picker__commercial,
    .tb-service-picker__reference {
        min-width: 0;
    }

    .tb-service-picker__reference {
        padding-left: 0;
        border-left: 0;
    }
}

/* Quote service picker final proportions */
.tb-service-picker__workspace {
    grid-template-columns: 250px minmax(0, 1fr);
}

.tb-service-picker__item {
    grid-template-columns:
        minmax(260px, 1.35fr)
        minmax(500px, 1.65fr);
    gap: 16px;
    padding: 18px 16px;
}

.tb-service-picker__form {
    grid-template-columns:
        minmax(145px, .65fr)
        minmax(300px, 1.35fr);
    gap: 18px;
}

.tb-service-picker__commercial {
    min-width: 0;
}

.tb-service-picker__reference {
    min-width: 0;
    padding-left: 18px;
}

.tb-service-picker__actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.tb-service-picker__secondary-action {
    flex: 0 0 auto;
    min-width: 118px;
    min-height: 42px;
    padding: 0 14px;
    white-space: nowrap;
}

.tb-service-picker__actions .tb-button {
    flex: 0 0 auto;
    min-width: 118px !important;
    min-height: 42px;
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
}

.tb-service-picker__service p {
    max-width: 430px;
}

@media (max-width: 1250px) {
    .tb-service-picker__workspace {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .tb-service-picker__item {
        grid-template-columns: 1fr;
    }

    .tb-service-picker__form {
        grid-template-columns:
            minmax(150px, .7fr)
            minmax(280px, 1.3fr);
    }
}

@media (max-width: 850px) {
    .tb-service-picker__workspace,
    .tb-service-picker__form {
        grid-template-columns: 1fr;
    }

    .tb-service-picker__reference {
        padding-left: 0;
        border-left: 0;
    }
}

/* Invoice service picker: isolated from the existing quote/contract picker. */
.tb-invoice-picker {
    container: invoice-picker / inline-size;
    overflow: hidden;
    border: 1px solid var(--tb-color-border);
    border-radius: var(--tb-card-radius);
    background: var(--tb-color-surface);
    box-shadow: var(--tb-shadow-xs);
}
.tb-invoice-picker [hidden] { display: none !important; }
.tb-invoice-picker__toolbar {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--tb-color-border);
}
.tb-invoice-picker__search { flex: 1 1 260px; max-width: 520px; }
.tb-invoice-picker__search > span {
    display: block;
    margin-bottom: 6px;
    color: var(--tb-color-text-muted);
    font-size: 14px;
    font-weight: 600;
}
.tb-invoice-picker__toolbar > .tb-button { margin-left: auto; }
.tb-invoice-picker__workspace { display: grid; grid-template-columns: minmax(0, 1fr); }
.tb-invoice-picker.is-enhanced .tb-invoice-picker__workspace { grid-template-columns: 208px minmax(0, 1fr); }
.tb-invoice-picker__categories {
    padding: 16px 12px;
    border-right: 1px solid var(--tb-color-border);
    background: var(--tb-color-surface-subtle);
}
.tb-invoice-picker__category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin: 0 0 4px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--tb-color-text-muted);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.tb-invoice-picker__category:hover { background: var(--tb-color-surface); }
.tb-invoice-picker__category.is-active {
    border-color: var(--tb-color-border);
    background: var(--tb-color-surface);
    color: var(--tb-color-primary);
    font-weight: 600;
}
.tb-invoice-picker__count {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 8px;
    background: var(--tb-color-canvas);
    color: var(--tb-color-text-muted);
    font-size: 12px;
}
.tb-invoice-picker__results { min-width: 0; padding: 20px 24px; }
.tb-invoice-picker__result-count,
.tb-invoice-picker__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.tb-invoice-picker__group-title {
    margin: 0 0 12px;
    color: var(--tb-color-text-muted);
    font-size: 14px;
    font-weight: 600;
}
.tb-invoice-picker__group-title [data-picker-group-count] { font-weight: 400; color: var(--tb-color-text-subtle); }
.tb-invoice-picker__item { padding: 20px 0; border-top: 1px solid var(--tb-color-border); }
.tb-invoice-picker__item-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    gap: 24px;
    align-items: start;
    margin-bottom: 20px;
}
.tb-invoice-picker__service { min-width: 0; overflow-wrap: anywhere; }
.tb-invoice-picker__service h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.4; }
.tb-invoice-picker__details { margin-top: 8px; font-size: 13px; }
.tb-invoice-picker__details summary { color: var(--tb-color-primary); cursor: pointer; }
.tb-invoice-picker__details p { color: var(--tb-color-text-muted); white-space: pre-line; }
.tb-invoice-picker__price-area { min-width: 0; text-align: right; }
.tb-invoice-picker__price { margin-top: 0; font-size: 21px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.tb-invoice-picker__price-meta { margin-top: 4px; color: var(--tb-color-text-muted); font-size: 13px; line-height: 1.5; }
.tb-invoice-picker__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}
.tb-invoice-picker__reference, .tb-invoice-picker__quantity, .tb-invoice-picker .tb-field { min-width: 0; }
.tb-invoice-picker__quantity { max-width: 180px; }
.tb-invoice-picker__period { min-width: 0; margin: 0; padding: 0; border: 0; }
.tb-invoice-picker__period-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tb-invoice-picker .tb-input, .tb-invoice-picker .tb-select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.4;
}
.tb-invoice-picker input[type="date"] { appearance: none; -webkit-appearance: none; }
.tb-invoice-picker input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.tb-invoice-picker .tb-field__label { font-size: 14px; }
.tb-invoice-picker .tb-field__hint { display: block; margin: 6px 0 0; font-size: 13px; }
.tb-invoice-picker__custom-fields {
    min-width: 0;
    margin: 20px 0 0;
    padding: 16px;
    border: 1px solid var(--tb-color-border);
    border-radius: 14px;
    background: var(--tb-color-surface-subtle);
}
.tb-invoice-picker__custom-fields legend { padding: 0 6px; font-size: 14px; font-weight: 600; }
.tb-invoice-picker__custom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tb-invoice-picker__actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 12px; margin-top: 16px; }
.tb-invoice-picker .tb-invoice-picker__price-toggle { border-color: transparent; background: transparent; box-shadow: none; color: var(--tb-color-text-muted); }
.tb-invoice-picker .tb-invoice-picker__price-toggle:hover { background: var(--tb-color-surface-subtle); color: var(--tb-color-primary); }
.tb-invoice-picker .tb-button { min-height: 44px; border-radius: 12px; }
.tb-invoice-picker__category:focus-visible, .tb-invoice-picker__details summary:focus-visible {
    outline: 3px solid var(--tb-color-focus);
    outline-offset: 2px;
}
.tb-invoice-picker__empty { margin: 0; padding: 32px 24px; color: var(--tb-color-text-muted); }
.tb-invoice-picker-alert {
    margin-bottom: 24px;
    padding: 16px 20px;
    border: 1px solid var(--tb-color-danger-text);
    border-radius: 14px;
    background: var(--tb-color-danger-bg);
    color: var(--tb-color-danger-text);
}
.tb-invoice-picker-alert ul { margin: 8px 0 0; padding-left: 20px; }
@container invoice-picker (max-width: 850px) {
    .tb-invoice-picker.is-enhanced .tb-invoice-picker__workspace { grid-template-columns: minmax(0, 1fr); }
    .tb-invoice-picker__categories {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 12px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--tb-color-border);
    }
    .tb-invoice-picker__category { flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap; }
    .tb-invoice-picker__custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container invoice-picker (max-width: 560px) {
    .tb-invoice-picker__toolbar, .tb-invoice-picker__results { padding: 16px; }
    .tb-invoice-picker__search { max-width: none; }
    .tb-invoice-picker__toolbar > .tb-button { margin-left: 0; }
    .tb-invoice-picker__item { padding: 20px 0; }
    .tb-invoice-picker__item-header { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
    .tb-invoice-picker__price-area { text-align: left; }
    .tb-invoice-picker__fields, .tb-invoice-picker__custom-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .tb-invoice-picker__period-fields { grid-template-columns: minmax(0, 1fr); }
    .tb-invoice-picker__actions { flex-direction: column; }
    .tb-invoice-picker__actions > .tb-button { width: 100%; justify-content: center; }
}

/* Free invoice position: keep the existing form usable on narrow screens. */
.tb-invoice-manual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--tb-space-6);
}
#invoice-manual-line-form .tb-input,
#invoice-manual-line-form .tb-select {
    min-height: 44px;
    font-size: 16px;
}