:root {
    --app-sidebar-width: 260px;
}

html,
body {
    min-height: 100%;
}

body {
    background: var(--bs-tertiary-bg);
}

body.login-page {
    margin: 0;
    color-scheme: light;
    background: #dfe6ee;
}

.login-page-backdrop {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem;
    isolation: isolate;
    background-color: #dfe6ee;
    background-image:
        linear-gradient(135deg, rgba(12, 18, 28, .62), rgba(20, 54, 97, .35)),
        var(--login-bg-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-page-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, .18), transparent 32%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, .14), transparent 28%);
    pointer-events: none;
}

.login-wrap {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
}

.login-panel {
    color: #172033;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1rem 3rem rgba(6, 12, 23, .22);
    backdrop-filter: blur(10px);
}

.login-panel h1,
.login-panel .form-label,
.login-panel .form-check-label {
    color: #172033;
}

.login-subtitle {
    color: #5c6877;
}

.login-panel .form-control {
    color: #172033;
    border-color: rgba(20, 28, 45, .12);
    background: rgba(255, 255, 255, .96);
}

.login-panel .form-control:focus {
    border-color: rgba(13, 110, 253, .45);
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .14);
    background: #fff;
}

.login-panel .form-check-input {
    border-color: rgba(20, 28, 45, .24);
}

.login-panel .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.login-brand-icon {
    display: block;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    object-fit: cover;
}

.login-background-credit {
    position: absolute;
    right: 1.25rem;
    bottom: 1rem;
    z-index: 1;
    max-width: min(100% - 2rem, 32rem);
    padding: .5rem .75rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    font-size: .875rem;
    text-align: right;
    background: rgba(8, 12, 19, .28);
    backdrop-filter: blur(8px);
}

.login-background-credit a {
    color: #fff;
    font-weight: 600;
}

.login-background-credit a:hover,
.login-background-credit a:focus {
    color: #fff;
    text-decoration: underline;
}

.app-shell {
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--app-sidebar-width);
    padding: 1.25rem;
    color: #fff;
    background: #172033;
    z-index: 1030;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 2rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
}

.brand-mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .5rem;
    color: #172033;
    background: #fff;
}

.app-sidebar .nav-link {
    color: rgba(255, 255, 255, .78);
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.app-sidebar .nav-link.active {
    color: #fff;
    background: var(--bs-primary);
}

.app-sidebar .nav-link.disabled {
    color: rgba(255, 255, 255, .35);
}

.app-sidebar .sidebar-section-label,
#mobileNavigation .sidebar-section-label {
    color: rgba(255, 255, 255, .72);
    font-weight: 700;
    letter-spacing: .08em;
}

.sidebar-footer {
    color: rgba(255, 255, 255, .55);
}

.app-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-header {
    min-height: 72px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.company-switcher {
    width: min(18rem, 32vw);
}

.app-main {
    flex: 1;
    padding: 1.5rem;
}

.dashboard-card {
    border: 0;
    box-shadow: 0 .125rem .75rem rgba(20, 28, 45, .06);
}

.empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
}

.company-logo-thumb,
.company-logo-placeholder {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(20, 28, 45, .1);
    border-radius: .375rem;
    background: #f8f9fa;
}

.company-logo-thumb {
    object-fit: contain;
    padding: .25rem;
}

.company-logo-placeholder {
    display: inline-grid;
    place-items: center;
    color: #6c757d;
    font-weight: 700;
}

.company-logo-preview {
    display: inline-flex;
    max-width: 18rem;
    min-height: 5rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid rgba(20, 28, 45, .1);
    border-radius: .375rem;
    background: #fff;
}

.company-logo-preview img {
    max-width: 100%;
    max-height: 7rem;
    object-fit: contain;
}

.settings-layout {
    display: grid;
    gap: 2rem;
}

.settings-tabs {
    display: flex;
    gap: .5rem;
}

.settings-tab {
    padding: .5rem .75rem;
    border-left: 3px solid transparent;
    color: var(--bs-secondary-color);
}

.settings-tab.active {
    border-left-color: var(--bs-primary);
    color: var(--bs-body-color);
    font-weight: 600;
}

.settings-tab.disabled {
    opacity: .55;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem 1.5rem;
}

.settings-tile {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 5rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.settings-tile:not(.disabled):hover .settings-title,
.settings-tile:not(.disabled):focus .settings-title {
    color: var(--bs-primary);
}

.settings-tile.disabled {
    opacity: .55;
}

.settings-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    color: #516070;
    background: #eef1f5;
    font-weight: 700;
}

.settings-title,
.settings-description {
    display: block;
}

.settings-title {
    font-weight: 600;
}

.settings-description {
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

.sort-link {
    color: inherit;
    text-decoration: none;
}

.sort-link:hover,
.sort-link:focus {
    color: var(--bs-primary);
}

.list-toolbar .form-control {
    max-width: 32rem;
}

.pdf-preview-shell {
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 13rem);
    overflow: auto;
    padding: 2rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: #eef1f5;
    box-shadow: 0 .125rem .75rem rgba(20, 28, 45, .06);
}

.pdf-preview-page {
    width: min(100%, 58rem);
    aspect-ratio: 210 / 297;
    background: #fff;
    box-shadow: 0 .5rem 1.75rem rgba(20, 28, 45, .16);
}

.pdf-preview-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 52rem;
    border: 0;
    background: #fff;
}

.service-period-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-tertiary-bg);
}

.service-period-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.service-period-option {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: .375rem .75rem;
    border-radius: .25rem;
    color: var(--bs-secondary-color);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.service-period-option:hover,
.service-period-input:focus-visible + .service-period-option {
    color: var(--bs-body-color);
    background: rgba(255, 255, 255, .65);
}

.service-period-input:checked + .service-period-option {
    color: #fff;
    background: var(--bs-primary);
    box-shadow: 0 .125rem .45rem rgba(13, 110, 253, .28);
}

.service-period-field {
    min-height: 5.25rem;
}

.choice-panel .form-check {
    padding: .625rem .75rem  .625rem 2.25rem;
    border: 1px solid rgba(20, 28, 45, .1);
    border-radius: .375rem;
    background: #fff;
}

.choice-panel .form-check + .form-check {
    margin-top: .5rem;
}

.contact-autocomplete-results,
.product-autocomplete-results {
    display: none;
    position: absolute;
    inset: auto 0 auto 0;
    z-index: 1050;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid rgba(20, 28, 45, .18);
    border-radius: .375rem;
    background: #fff;
}

.contact-autocomplete-results.show,
.product-autocomplete-results.show {
    display: block;
}

.contact-autocomplete-result,
.product-autocomplete-result {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem .9rem;
    border: 0;
    border-bottom: 1px solid rgba(20, 28, 45, .08);
    background: #fff;
    text-align: left;
}

.contact-autocomplete-result:hover,
.contact-autocomplete-result:focus,
.product-autocomplete-result:hover,
.product-autocomplete-result:focus {
    background: #f5f7fa;
}

.product-autocomplete-create {
    color: var(--bs-primary);
}

.invoice-position-row {
    display: grid;
    gap: 1rem;
}

.invoice-position-actions {
    display: flex;
    align-items: end;
}

.invoice-position-actions .btn {
    width: 100%;
}

.invoice-position .form-label {
    min-height: 1.25rem;
    margin-bottom: .25rem;
    color: var(--bs-secondary-color);
    font-size: .875rem;
    font-weight: 600;
}


@media (max-width: 575.98px) {
    .login-page-backdrop {
        padding: 1rem;
    }

    .login-panel {
        padding: 1.5rem;
        border-radius: .875rem;
    }

    .login-background-credit {
        left: 1rem;
        right: 1rem;
        bottom: .85rem;
        max-width: none;
        border-radius: .75rem;
        text-align: center;
        font-size: .8125rem;
    }
}

@media (min-width: 992px) {
    .settings-layout {
        grid-template-columns: 12rem minmax(0, 1fr);
        align-items: start;
    }

    .settings-tabs {
        flex-direction: column;
        padding-top: 4.5rem;
    }
}

@media (min-width: 992px) {
    .invoice-position-row {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr) minmax(0, .65fr) minmax(0, .65fr) minmax(0, .95fr) minmax(0, .7fr) minmax(0, .7fr) minmax(0, .8fr) 3rem;
        align-items: start;
    }

    .invoice-position-total {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        min-height: 58px;
    }

    .invoice-position-total-value {
        font-weight: 600;
    }

    .invoice-price-mode {
        display: inline-flex;
        align-items: center;
        gap: .75rem;
        background: rgba(255, 255, 255, .95);
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: .75rem;
        padding: .5rem .75rem;
        white-space: nowrap;
    }

    .invoice-price-mode .form-check {
        display: inline-flex;
        align-items: center;
        margin: 0;
    }

    .invoice-price-mode .form-check-input {
        margin-top: 0;
    }

    .invoice-price-mode .form-check-label {
        font-size: .9rem;
        margin-left: .25rem;
        margin-bottom: 0;
    }

    .invoice-summary {
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: .75rem;
        padding: 1rem 1.25rem;
        background: #fbfbfd;
    }

    .invoice-summary-row,
    .invoice-summary-tax {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        font-size: .95rem;
    }

    .invoice-summary-row {
        margin-bottom: .5rem;
    }

    .invoice-summary-tax {
        margin-top: .25rem;
    }

    .invoice-summary-row span,
    .invoice-summary-tax span {
        white-space: nowrap;
    }

    .invoice-summary-taxes {
        border-top: 1px solid rgba(0, 0, 0, .08);
        padding-top: .75rem;
        margin-top: .75rem;
    }

    @media (max-width: 991.98px) {
        .invoice-price-mode {
            width: 100%;
            justify-content: flex-end;
        }

        .invoice-price-mode .form-check:not(:last-child) {
            margin-right: 1rem;
        }
    }

    .invoice-position-actions .btn {
        min-height: 38px;
        padding-inline: 0;
    }

    .app-content {
        margin-left: var(--app-sidebar-width);
    }

    .app-main {
        padding: 2rem;
    }
}


.sidebar-brand-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: .5rem;
    object-fit: cover;
}

@media (min-width: 992px) {
    .rechnung-table-responsive {
        overflow: visible;
    }
}
.invoice-form .dashboard-card {
    border: 1px solid rgba(20, 28, 45, .06);
    border-radius: .9rem;
    overflow: hidden;
}

.invoice-form .card-header {
    border-bottom: 1px solid rgba(20, 28, 45, .08);
}

.invoice-form .card-header h2 {
    font-weight: 700;
}

.invoice-form .card-body {
    padding: 1.35rem;
}

.invoice-form .form-label {
    color: #425466;
    font-weight: 600;
}

.invoice-form .form-text {
    color: #6b7280;
}

.invoice-form .form-control,
.invoice-form .form-select,
.invoice-form .input-group-text {
    border-color: rgba(20, 28, 45, .12);
}

.invoice-form .form-control,
.invoice-form .form-select {
    min-height: 2.75rem;
}

.invoice-form textarea.form-control {
    min-height: 7.25rem;
}

.invoice-form .service-period-toggle {
    background: #f5f7fb;
}

.invoice-form .invoice-price-mode {
    box-shadow: none;
    background: #f5f7fb;
}

.invoice-section-note,
.optional-section-summary {
    max-width: 48rem;
}

.form-check-card {
    padding: .9rem 1rem;
    border: 1px solid rgba(20, 28, 45, .08);
    border-radius: .85rem;
    background: #f8fafc;
}

.form-check-card .form-check {
    margin-bottom: 0;
}

.form-check-card .form-text {
    margin-bottom: 0;
}

.optional-section-toggle {
    min-width: 16rem;
}

.optional-section.is-open .optional-section-toggle {
    background: #f5f7fb;
}

.invoice-summary {
    border-color: rgba(20, 28, 45, .08);
    background: #f8fafc;
}

.invoice-form-actions {
    padding-top: 1rem;
    border-top: 1px solid rgba(20, 28, 45, .08);
}

@media (max-width: 575.98px) {
    .optional-section-toggle {
        width: 100%;
        min-width: 0;
    }

    .invoice-form .card-body {
        padding: 1rem;
    }
}

.shipping-header-checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.25rem;
    white-space: nowrap;
}

.shipping-header-checkbox .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.shipping-header-checkbox .form-check-label {
    margin: 0;
    color: var(--bs-body-color);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.shipping-header-checkbox .invalid-feedback {
    display: none;
}

@media (max-width: 767.98px) {
    .shipping-header-checkbox {
        white-space: normal;
    }
}

.shopware-filter-card .form-label {
    color: #425466;
    font-weight: 600;
}

.shopware-filter-card .form-control,
.shopware-filter-card .form-select {
    min-height: 2.75rem;
}

.shopware-filter-card {
    border: 1px solid rgba(20, 28, 45, .06);
    border-radius: .9rem;
}

.footer-snippet-select {
    width: min(100%, 15rem);
}

.footer-snippet-select .form-select {
    min-height: 2.25rem;
}

@media (max-width: 575.98px) {
    .footer-snippet-select {
        width: 100%;
    }
}

.shopware-custom-fields-cell {
    min-width: 15rem;
    max-width: 24rem;
}

.shopware-custom-fields-cell .fw-medium {
    overflow-wrap: anywhere;
}

.shopware-custom-field-json {
    max-width: 42rem;
    padding: .75rem;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
    font-size: .8125rem;
    white-space: pre-wrap;
}


.shopware-customer-comment-cell {
    width: 18rem;
    max-width: 18rem;
}

.shopware-customer-comment-preview {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.shopware-customer-comment-detail {
    max-width: 60rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.dashboard-stat {
    transition: transform .15s ease, box-shadow .15s ease;
}

.dashboard-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 .35rem 1rem rgba(20, 28, 45, .1);
}

.dashboard-stat-icon {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    font-size: 1rem;
    font-weight: 700;
}


.dashboard-bar-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(2rem, 1fr));
    gap: .6rem;
    min-height: 18rem;
    align-items: end;
}

.dashboard-bar-column {
    display: grid;
    grid-template-rows: 2rem 12rem 1.5rem;
    gap: .35rem;
    min-width: 0;
    text-align: center;
}

.dashboard-bar-value {
    align-self: end;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-bar-track {
    display: flex;
    align-items: end;
    justify-content: center;
    border-bottom: 1px solid var(--bs-border-color);
    background: linear-gradient(to top, rgba(var(--bs-primary-rgb), .04), transparent);
}

.dashboard-bar {
    width: min(2rem, 72%);
    min-height: .2rem;
    border-radius: .35rem .35rem 0 0;
    background: var(--bs-primary);
    transition: opacity .15s ease;
}

.dashboard-bar-column:hover .dashboard-bar {
    opacity: .75;
}

.dashboard-bar-negative {
    background: var(--bs-danger);
}

.dashboard-bar-label {
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.dashboard-purpose {
    max-width: 36rem;
}

@media (max-width: 767.98px) {
    .dashboard-bar-chart {
        grid-template-columns: repeat(6, 1fr);
        min-height: 34rem;
    }
}

/* Benutzerdefinierte Kontora-Themes */
:root,
[data-app-theme="light"] {
    --app-sidebar-bg: #172033;
    --app-sidebar-text: #ffffff;
    --app-page-bg: #f4f6f9;
    --app-surface: #ffffff;
    --app-soft: #eef1f5;
    --app-shadow: rgba(20, 28, 45, .08);
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
}

[data-app-theme="flow"] {
    --app-sidebar-bg: #050509;
    --app-sidebar-text: #ffffff;
    --app-page-bg: #07070c;
    --app-surface: #11111b;
    --app-soft: #1c1830;
    --app-shadow: rgba(0, 0, 0, .42);
    --bs-primary: #b33cff;
    --bs-primary-rgb: 179, 60, 255;
    --bs-link-color: #d05cff;
    --bs-link-hover-color: #ff58bd;
}

[data-app-theme="dark"] {
    --app-sidebar-bg: #090d14;
    --app-sidebar-text: #f5f7fa;
    --app-page-bg: #111720;
    --app-surface: #19212c;
    --app-soft: #222c39;
    --app-shadow: rgba(0, 0, 0, .28);
    --bs-primary: #71a7ff;
    --bs-primary-rgb: 113, 167, 255;
    --bs-link-color: #8bb7ff;
    --bs-link-hover-color: #b5d2ff;
}

[data-app-theme="beauty"] {
    --app-sidebar-bg: #442d3c;
    --app-sidebar-text: #fff8fb;
    --app-page-bg: #fff8f8;
    --app-surface: #ffffff;
    --app-soft: #f8e9ed;
    --app-shadow: rgba(100, 54, 76, .1);
    --bs-primary: #b85c7d;
    --bs-primary-rgb: 184, 92, 125;
    --bs-link-color: #a34b6b;
    --bs-link-hover-color: #7f3852;
}

[data-app-theme="nature"] {
    --app-sidebar-bg: #20382d;
    --app-sidebar-text: #f5fbf7;
    --app-page-bg: #f3f6f1;
    --app-surface: #ffffff;
    --app-soft: #e4ece2;
    --app-shadow: rgba(35, 73, 52, .1);
    --bs-primary: #47775a;
    --bs-primary-rgb: 71, 119, 90;
    --bs-link-color: #3f6e51;
    --bs-link-hover-color: #2c513a;
}

[data-app-theme="bio"] {
    --app-sidebar-bg: #263a1c;
    --app-sidebar-text: #fbfff7;
    --app-page-bg: #f7faef;
    --app-surface: #ffffff;
    --app-soft: #edf4d8;
    --app-shadow: rgba(76, 105, 37, .1);
    --bs-primary: #79a832;
    --bs-primary-rgb: 121, 168, 50;
    --bs-link-color: #648f25;
    --bs-link-hover-color: #496b19;
}

[data-app-theme="industry"] {
    --app-sidebar-bg: #202a33;
    --app-sidebar-text: #f5f8fa;
    --app-page-bg: #eef2f4;
    --app-surface: #ffffff;
    --app-soft: #dfe6ea;
    --app-shadow: rgba(26, 44, 58, .11);
    --bs-primary: #39758f;
    --bs-primary-rgb: 57, 117, 143;
    --bs-link-color: #326a82;
    --bs-link-hover-color: #234e61;
}

body { background: var(--app-page-bg); }
.app-sidebar { color: var(--app-sidebar-text); background: var(--app-sidebar-bg); }
.app-header, .modal-content, .card, .dropdown-menu { --bs-bg-opacity: 1; background-color: var(--app-surface) !important; }
.dashboard-card, .card, .modal-content, .dropdown-menu { box-shadow: 0 .125rem .75rem var(--app-shadow); }
.settings-icon, .dashboard-stat-icon { background: var(--app-soft); }

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}
.theme-card {
    position: relative;
    display: grid;
    gap: .65rem;
    padding: .75rem;
    border: 2px solid var(--bs-border-color);
    border-radius: .75rem;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.theme-card:hover { transform: translateY(-2px); box-shadow: 0 .45rem 1.2rem var(--app-shadow); }
.theme-radio { position: absolute; opacity: 0; pointer-events: none; }
.theme-card:has(.theme-radio:checked) { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12); }
.theme-selected-mark {
    position: absolute; top: .55rem; right: .55rem; display: none; width: 1.5rem; height: 1.5rem;
    place-items: center; border-radius: 50%; color: #fff; background: var(--bs-primary); font-size: .8rem; font-weight: 800;
}
.theme-card:has(.theme-radio:checked) .theme-selected-mark { display: grid; }
.theme-card-preview { display: grid; grid-template-columns: 28% 1fr; height: 5.25rem; overflow: hidden; border-radius: .5rem; background: var(--preview-page); }
.theme-preview-sidebar { background: var(--preview-sidebar); }
.theme-preview-content { display: flex; flex-direction: column; gap: .45rem; padding: .7rem; }
.theme-preview-content span { display: block; height: .55rem; border-radius: 1rem; background: var(--preview-accent); }
.theme-preview-content span:nth-child(2) { width: 72%; background: var(--preview-soft); }
.theme-preview-content span:nth-child(3) { width: 88%; background: var(--preview-soft); }
.theme-card-copy { display: grid; gap: .15rem; }
.theme-card-copy small { color: var(--bs-secondary-color); line-height: 1.25; }
.theme-preview-light { --preview-sidebar:#172033; --preview-page:#f4f6f9; --preview-accent:#0d6efd; --preview-soft:#d8dee8; }
.theme-preview-flow { --preview-sidebar:#050509; --preview-page:#0d0b14; --preview-accent:#c13cff; --preview-soft:#2a1c3d; }
.theme-preview-dark { --preview-sidebar:#090d14; --preview-page:#19212c; --preview-accent:#71a7ff; --preview-soft:#344253; }
.theme-preview-beauty { --preview-sidebar:#442d3c; --preview-page:#fff8f8; --preview-accent:#b85c7d; --preview-soft:#f0ceda; }
.theme-preview-nature { --preview-sidebar:#20382d; --preview-page:#f3f6f1; --preview-accent:#47775a; --preview-soft:#cddccb; }
.theme-preview-bio { --preview-sidebar:#263a1c; --preview-page:#f7faef; --preview-accent:#79a832; --preview-soft:#dce9b6; }
.theme-preview-industry { --preview-sidebar:#202a33; --preview-page:#eef2f4; --preview-accent:#39758f; --preview-soft:#cbd8de; }

/* Outline-Primary folgt der Akzentfarbe des jeweils aktiven Benutzer-Themes. */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 82%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 78%, #000);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--bs-btn-disabled-color);
    background-color: transparent;
    border-color: var(--bs-btn-disabled-border-color);
    opacity: .55;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 84%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 76%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 72%, #000);
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
[data-app-theme="dark"] .app-header,
[data-app-theme="dark"] .card,
[data-app-theme="dark"] .modal-content,
[data-app-theme="dark"] .dropdown-menu {
    border-color: #2d3948 !important;
}


/* Flow: dunkler SaaS-Look mit violett-pinken Lichtverläufen */
[data-app-theme="flow"] body {
    color: #f7f4ff;
    background:
        radial-gradient(circle at 82% 8%, rgba(122, 45, 255, .20), transparent 30rem),
        radial-gradient(circle at 14% 90%, rgba(255, 45, 158, .13), transparent 34rem),
        linear-gradient(145deg, #050509 0%, #090711 48%, #07070c 100%);
    background-attachment: fixed;
}
/* Kein eigener Stacking-Context auf .app-content: Andernfalls liegen
   seitenbezogene Bootstrap-Modals unter dem an <body> angehängten Backdrop. */
[data-app-theme="flow"] .app-content {
    position: static;
}
[data-app-theme="flow"] .app-sidebar {
    background:
        linear-gradient(180deg, rgba(18, 12, 28, .98), rgba(4, 4, 8, .99)),
        #050509;
    border-right: 1px solid rgba(197, 91, 255, .16);
    box-shadow: 14px 0 50px rgba(0, 0, 0, .22);
}
[data-app-theme="flow"] .app-header {
    background: rgba(12, 12, 20, .78) !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
[data-app-theme="flow"] .app-sidebar .nav-link.active,
[data-app-theme="flow"] .btn-primary {
    background: linear-gradient(135deg, #8238f5 0%, #ec3da8 100%);
    border-color: transparent;
    box-shadow: 0 .45rem 1.3rem rgba(181, 54, 226, .25);
}
[data-app-theme="flow"] .app-sidebar .nav-link:hover,
[data-app-theme="flow"] .app-sidebar .nav-link:focus {
    background: linear-gradient(90deg, rgba(137, 59, 246, .18), rgba(236, 61, 168, .08));
}
[data-app-theme="flow"] .card,
[data-app-theme="flow"] .modal-content,
[data-app-theme="flow"] .dropdown-menu {
    color: #f5f1fb;
    background:
        linear-gradient(145deg, rgba(24, 22, 35, .96), rgba(13, 13, 22, .96)) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .025);
}
[data-app-theme="flow"] .dashboard-card {
    position: relative;
    overflow: hidden;
}
[data-app-theme="flow"] .dashboard-card::after {
    content: "";
    position: absolute;
    width: 10rem;
    height: 10rem;
    top: -7rem;
    right: -5rem;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(190, 55, 255, .18), transparent 68%);
}
[data-app-theme="flow"] .bg-white,
[data-app-theme="flow"] .bg-light,
[data-app-theme="flow"] .table,
[data-app-theme="flow"] .table > :not(caption) > * > * {
    --bs-table-bg: transparent;
    --bs-table-color: #f4f0fa;
    color: #f4f0fa !important;
    background-color: transparent !important;
}
[data-app-theme="flow"] .card-header,
[data-app-theme="flow"] .card-footer,
[data-app-theme="flow"] .list-group-item {
    color: #f5f1fb;
    background: rgba(255, 255, 255, .025) !important;
    border-color: rgba(255, 255, 255, .08) !important;
}
[data-app-theme="flow"] .text-body,
[data-app-theme="flow"] h1,
[data-app-theme="flow"] h2,
[data-app-theme="flow"] h3,
[data-app-theme="flow"] h4,
[data-app-theme="flow"] h5,
[data-app-theme="flow"] h6 {
    color: #fbf9ff !important;
}
[data-app-theme="flow"] .text-muted,
[data-app-theme="flow"] .text-body-secondary,
[data-app-theme="flow"] .form-text,
[data-app-theme="flow"] .dashboard-bar-label {
    color: #aaa4b7 !important;
}
[data-app-theme="flow"] .form-control,
[data-app-theme="flow"] .form-select,
[data-app-theme="flow"] .input-group-text {
    color: #f5f1fb;
    background-color: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .12);
}
[data-app-theme="flow"] .form-control:focus,
[data-app-theme="flow"] .form-select:focus {
    border-color: #c044ff;
    box-shadow: 0 0 0 .25rem rgba(192, 68, 255, .14);
}
[data-app-theme="flow"] .dashboard-bar {
    background: linear-gradient(180deg, #d04aff 0%, #8a43ff 58%, #ef3ca5 100%);
    box-shadow: 0 0 1rem rgba(184, 64, 255, .22);
}
[data-app-theme="flow"] .badge.text-bg-primary {
    background: linear-gradient(135deg, #8238f5, #ec3da8) !important;
}

/* Dark: durchgängig dunkle Flächen und lesbare Überschriften */
[data-app-theme="dark"] .bg-white,
[data-app-theme="dark"] .bg-light,
[data-app-theme="dark"] .card-header.bg-white,
[data-app-theme="dark"] .card-footer.bg-white {
    color: #edf3fb !important;
    background-color: #19212c !important;
}
[data-app-theme="dark"] .card-header,
[data-app-theme="dark"] .card-footer,
[data-app-theme="dark"] .list-group-item {
    color: #edf3fb;
    background-color: #19212c !important;
    border-color: #2d3948 !important;
}
[data-app-theme="dark"] h1,
[data-app-theme="dark"] h2,
[data-app-theme="dark"] h3,
[data-app-theme="dark"] h4,
[data-app-theme="dark"] h5,
[data-app-theme="dark"] h6,
[data-app-theme="dark"] .card-title,
[data-app-theme="dark"] .card-header .text-body,
[data-app-theme="dark"] .card-header .text-dark {
    color: #f4f7fb !important;
}
[data-app-theme="dark"] .card-header .text-muted,
[data-app-theme="dark"] .card-header .text-body-secondary,
[data-app-theme="dark"] .card-header small {
    color: #aeb9c7 !important;
}
[data-app-theme="dark"] .table,
[data-app-theme="dark"] .table > :not(caption) > * > * {
    --bs-table-bg: transparent;
    --bs-table-color: #e7edf5;
    color: #e7edf5;
    border-color: #334152;
}

/* Robuste Theme-Auswahl ohne alleinige Abhängigkeit von :has(). */
.theme-card.is-selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12);
}
.theme-card.is-selected .theme-selected-mark {
    display: grid;
}
.theme-card:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), .3);
    outline-offset: 2px;
}

/* Während des Theme-Wechsels keine trägen Übergänge oder Blur-Neuberechnungen. */
html.theme-is-switching *,
html.theme-is-switching *::before,
html.theme-is-switching *::after {
    transition: none !important;
    animation: none !important;
}
html.theme-is-switching[data-app-theme="flow"] .app-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Lesbarkeit der Formular- und Autocomplete-Komponenten in dunklen Themes. */
[data-app-theme="flow"] .invoice-form .form-label,
[data-app-theme="dark"] .invoice-form .form-label,
[data-app-theme="flow"] .shopware-filter-card .form-label,
[data-app-theme="dark"] .shopware-filter-card .form-label,
[data-app-theme="flow"] .invoice-position .form-label,
[data-app-theme="dark"] .invoice-position .form-label {
    color: #c7c2d2;
}

[data-app-theme="dark"] .invoice-form .form-label,
[data-app-theme="dark"] .shopware-filter-card .form-label,
[data-app-theme="dark"] .invoice-position .form-label {
    color: #b9c5d4;
}

[data-app-theme="flow"] .invoice-form .form-text,
[data-app-theme="flow"] .invoice-section-note,
[data-app-theme="flow"] .optional-section-summary,
[data-app-theme="dark"] .invoice-form .form-text,
[data-app-theme="dark"] .invoice-section-note,
[data-app-theme="dark"] .optional-section-summary {
    color: var(--bs-secondary-color) !important;
}

[data-app-theme="flow"] .contact-autocomplete-results,
[data-app-theme="flow"] .product-autocomplete-results {
    color: #f5f1fb;
    background: #181622;
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .42);
}

[data-app-theme="dark"] .contact-autocomplete-results,
[data-app-theme="dark"] .product-autocomplete-results {
    color: #edf3fb;
    background: #202a36;
    border-color: #3a4859;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .32);
}

[data-app-theme="flow"] .contact-autocomplete-result,
[data-app-theme="flow"] .product-autocomplete-result,
[data-app-theme="dark"] .contact-autocomplete-result,
[data-app-theme="dark"] .product-autocomplete-result {
    color: inherit;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .09);
}

[data-app-theme="flow"] .contact-autocomplete-result:hover,
[data-app-theme="flow"] .contact-autocomplete-result:focus,
[data-app-theme="flow"] .product-autocomplete-result:hover,
[data-app-theme="flow"] .product-autocomplete-result:focus {
    color: #fff;
    background: rgba(192, 68, 255, .16);
}

[data-app-theme="dark"] .contact-autocomplete-result:hover,
[data-app-theme="dark"] .contact-autocomplete-result:focus,
[data-app-theme="dark"] .product-autocomplete-result:hover,
[data-app-theme="dark"] .product-autocomplete-result:focus {
    color: #fff;
    background: #2b3949;
}

[data-app-theme="flow"] .contact-autocomplete-result small,
[data-app-theme="flow"] .product-autocomplete-result small {
    color: #b7b0c4;
}

[data-app-theme="dark"] .contact-autocomplete-result small,
[data-app-theme="dark"] .product-autocomplete-result small {
    color: #aeb9c7;
}

/* Bootstrap deaktiviert den inaktiven Zeitraum-Button stark; in dunklen Themes
   bleibt er bewusst als klar lesbare, aber inaktive Auswahl sichtbar. */
[data-app-theme="flow"] .service-period-toggle .btn,
[data-app-theme="dark"] .service-period-toggle .btn {
    opacity: 1;
}

[data-app-theme="flow"] .service-period-toggle .btn-light,
[data-app-theme="flow"] .service-period-toggle .btn-outline-secondary,
[data-app-theme="flow"] .service-period-toggle .btn:not(.active):not(:checked),
[data-app-theme="flow"] .service-period-toggle .btn-check:not(:checked) + .btn {
    color: #c8c1d3;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .15);
}

[data-app-theme="dark"] .service-period-toggle .btn-light,
[data-app-theme="dark"] .service-period-toggle .btn-outline-secondary,
[data-app-theme="dark"] .service-period-toggle .btn:not(.active):not(:checked),
[data-app-theme="dark"] .service-period-toggle .btn-check:not(:checked) + .btn {
    color: #c2ccd8;
    background: #25303d;
    border-color: #3a4859;
}

[data-app-theme="flow"] .service-period-toggle .btn-check:checked + .btn,
[data-app-theme="dark"] .service-period-toggle .btn-check:checked + .btn {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Native Select-Listen erhalten auf macOS/Firefox sonst teils helle Optionen mit
   heller Schrift. color-scheme und explizite Optionsfarben verhindern das. */
[data-app-theme="flow"] .form-select,
[data-app-theme="flow"] select,
[data-app-theme="dark"] .form-select,
[data-app-theme="dark"] select {
    color-scheme: dark;
}

[data-app-theme="flow"] .form-select option,
[data-app-theme="flow"] select option {
    color: #f5f1fb;
    background: #181622;
}

[data-app-theme="dark"] .form-select option,
[data-app-theme="dark"] select option {
    color: #edf3fb;
    background: #202a36;
}

[data-app-theme="flow"] .form-control::placeholder,
[data-app-theme="dark"] .form-control::placeholder {
    color: var(--bs-secondary-color);
    opacity: .9;
}

/* Radio- und Checkbox-Beschriftungen in dunklen Themes klar lesbar halten. */
[data-app-theme="flow"] .form-check-label,
[data-app-theme="flow"] .form-check-label.required,
[data-app-theme="dark"] .form-check-label,
[data-app-theme="dark"] .form-check-label.required {
    color: #f1edf7;
    opacity: 1;
}

[data-app-theme="dark"] .form-check-label,
[data-app-theme="dark"] .form-check-label.required {
    color: #e7edf5;
}

[data-app-theme="flow"] .form-check-input,
[data-app-theme="dark"] .form-check-input {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .42);
}

[data-app-theme="flow"] .form-check-input:checked,
[data-app-theme="dark"] .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-app-theme="flow"] .form-check-input:focus,
[data-app-theme="dark"] .form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .28);
}

[data-app-theme="flow"] .form-check-input:disabled ~ .form-check-label,
[data-app-theme="flow"] .form-check-input[disabled] ~ .form-check-label,
[data-app-theme="dark"] .form-check-input:disabled ~ .form-check-label,
[data-app-theme="dark"] .form-check-input[disabled] ~ .form-check-label {
    color: var(--bs-secondary-color);
    opacity: .8;
}

/* Einklappbare Hauptnavigation mit Bootstrap-Icons */
:root {
    --app-sidebar-collapsed-width: 72px;
}

.app-sidebar,
.app-content {
    transition: width .2s ease, margin-left .2s ease;
}

.sidebar-topbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 40px;
    margin-bottom: 1.1rem;
}

.sidebar-topbar .sidebar-brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.sidebar-collapse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    cursor: pointer;
    transition: color .15s ease, background .15s ease, transform .2s ease;
}

.sidebar-collapse-button:hover,
.sidebar-collapse-button:focus-visible {
    color: #fff;
    background: rgba(255,255,255,.16);
    outline: none;
}

.sidebar-toggle-icon,
.nav-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: currentColor;
}

.sidebar-collapse-button .sidebar-toggle-icon {
    transition: transform .2s ease;
}

.sidebar-navigation {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: .15rem;
    scrollbar-width: thin;
}

/* Die Sidebar bleibt viewport-hoch; nur die eigentliche Linkliste scrollt. */
.app-sidebar {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    contain: paint;
}

.app-sidebar .sidebar-topbar,
.app-sidebar .sidebar-footer {
    flex: 0 0 auto;
}

.app-sidebar .sidebar-footer {
    margin-top: .7rem !important;
    padding-top: .35rem;
}

#mobileNavigation .offcanvas-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.sidebar-group + .sidebar-group {
    margin-top: .75rem;
}

.app-sidebar .sidebar-group {
    display: block;
    flex: none;
}

.sidebar-section-label {
    padding: 0 .7rem .28rem;
    font-size: .69rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .72;
}

.app-sidebar .nav-link,
#mobileNavigation .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    max-width: 100%;
    min-height: 2.42rem;
    margin: .08rem 0;
    padding: .52rem .7rem;
    border-radius: .48rem;
    box-sizing: border-box;
    line-height: 1.2;
    white-space: nowrap;
}

.app-sidebar .nav-link .sidebar-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar .nav-link .nav-icon {
    opacity: .88;
}

.app-sidebar .nav-link:hover .nav-icon,
.app-sidebar .nav-link.active .nav-icon {
    opacity: 1;
}

.app-sidebar .nav-link .sidebar-badge {
    flex: 0 0 auto;
    min-width: 1.45rem;
    margin-left: -.3rem;
    margin-right: 0;
    text-align: center;
}

#mobileNavigation .nav-icon {
    margin-right: .05rem;
}

@media (min-width: 992px) {
    /* Das mobile Offcanvas darf auf Desktop überhaupt nicht gezeichnet werden.
       display:none allein aus Bootstrap wird hier bewusst defensiv ergänzt,
       weil Firefox sonst je nach Offcanvas-Zustand Fragmente anzeigen kann. */
    #mobileNavigation {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        pointer-events: none !important;
    }

    body.sidebar-collapsed .app-sidebar {
        width: var(--app-sidebar-collapsed-width);
        padding-inline: .65rem;
    }

    body.sidebar-collapsed .app-content {
        margin-left: var(--app-sidebar-collapsed-width);
    }

    body.sidebar-collapsed .sidebar-label,
    body.sidebar-collapsed .sidebar-section-label {
        display: none;
    }

    body.sidebar-collapsed .sidebar-topbar {
        justify-content: center;
    }

    body.sidebar-collapsed .sidebar-brand {
        flex: 0 0 auto;
        justify-content: center;
    }

    body.sidebar-collapsed .sidebar-collapse-button {
        position: absolute;
        top: 52px;
        left: 50%;
        transform: translateX(-50%);
    }

    body.sidebar-collapsed .sidebar-collapse-button .sidebar-toggle-icon {
        transform: rotate(180deg);
    }

    body.sidebar-collapsed .sidebar-navigation {
        margin-top: 2.65rem;
        padding-right: 0;
    }

    body.sidebar-collapsed .sidebar-group + .sidebar-group {
        margin-top: .4rem;
    }

    body.sidebar-collapsed .app-sidebar .nav-link {
        justify-content: center;
        min-height: 2.7rem;
        padding: .62rem;
    }

    body.sidebar-collapsed .app-sidebar .nav-link .sidebar-badge {
        position: absolute;
        top: .16rem;
        right: .1rem;
        min-width: 1.18rem;
        margin: 0;
        padding: .12rem .28rem;
        font-size: .59rem;
    }

    body.sidebar-collapsed .sidebar-footer {
        min-height: 1rem;
    }
}

/* Defensive Sidebar icon sizing */
.app-sidebar svg.nav-icon,
#mobileNavigation svg.nav-icon,
.sidebar-collapse-button svg.sidebar-toggle-icon {
    display:block !important;
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    max-width:17px !important;
    min-height:17px !important;
    max-height:17px !important;
    flex:0 0 17px !important;
}


/* Dashboard ohne Zahlen */
:root,
[data-app-theme="light"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="flow"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/3075993/pexels-photo-3075993.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="dark"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/8728382/pexels-photo-8728382.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="beauty"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/931177/pexels-photo-931177.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="nature"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="bio"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/4503260/pexels-photo-4503260.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="industry"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/236705/pexels-photo-236705.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

.dashboard-focus-hero {
    position: relative;
    min-height: 38rem;
    border-radius: 1rem;
    color: #fff;
    background: #0f1720;
}

.dashboard-focus-backdrop,
.dashboard-focus-overlay {
    position: absolute;
    inset: 0;
}

.dashboard-focus-backdrop {
    background-image: var(--dashboard-focus-image);
    background-position: center;
    background-size: cover;
    transform: scale(1.02);
}

.dashboard-focus-overlay {
    background:
        linear-gradient(90deg, rgba(11, 18, 32, .88) 0%, rgba(11, 18, 32, .7) 42%, rgba(11, 18, 32, .52) 100%),
        linear-gradient(180deg, rgba(11, 18, 32, .14) 0%, rgba(11, 18, 32, .56) 100%);
}

.dashboard-focus-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 38rem;
    padding: 2rem;
    gap: 2rem;
}

.dashboard-focus-meta {
    max-width: 42rem;
    padding-top: .5rem;
}

.dashboard-focus-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
    align-items: start;
    gap: 2rem;
}

.dashboard-bookkeeping-status {
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: .9rem;
    color: #fff;
    background: rgba(11, 18, 32, .62);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .16);
    backdrop-filter: blur(10px);
}

.dashboard-bookkeeping-status-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    align-self: flex-start;
    min-width: min(100%, 25rem);
    padding: 1rem 1.1rem;
}

.dashboard-bookkeeping-label {
    margin-bottom: .2rem;
    font-weight: 700;
}

.dashboard-bookkeeping-status .form-control {
    border-color: rgba(255, 255, 255, .38);
    background-color: rgba(255, 255, 255, .94);
}

.buchhaltungsstand-bemerkung {
    min-width: 16rem;
    max-width: 34rem;
    white-space: pre-line;
}

@media (max-width: 991.98px) {
    .dashboard-focus-top {
        grid-template-columns: 1fr;
    }

    .dashboard-bookkeeping-status {
        max-width: 36rem;
    }
}

.dashboard-focus-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.dashboard-focus-kicker::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    border-radius: 999px;
    background: var(--bs-primary);
}

.dashboard-focus-title {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1.04;
}

.dashboard-focus-text {
    max-width: 38rem;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}

.dashboard-quick-link {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 100%;
    padding: 1rem 1.1rem;
    border-radius: .9rem;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.dashboard-quick-link:hover,
.dashboard-quick-link:focus {
    transform: translateY(-2px);
}

.dashboard-quick-link-primary {
    color: #fff;
    background: rgba(var(--bs-primary-rgb), .9);
    border: 1px solid rgba(255, 255, 255, .08);
}

.dashboard-quick-link-primary:hover,
.dashboard-quick-link-primary:focus {
    color: #fff;
    background: rgba(var(--bs-primary-rgb), 1);
}

.dashboard-quick-link-light {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
}

.dashboard-quick-link-light:hover,
.dashboard-quick-link-light:focus {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

.dashboard-quick-link-label {
    font-weight: 700;
}

.dashboard-quick-link-note {
    font-size: .92rem;
    color: rgba(255, 255, 255, .76);
}

@media (max-width: 767.98px) {
    .dashboard-focus-hero,
    .dashboard-focus-content {
        min-height: auto;
    }

    .dashboard-focus-content {
        padding: 1.5rem;
    }

    .dashboard-focus-actions .btn {
        width: 100%;
    }
}

/* Volle Fokusfläche für die Dashboard-Ansicht ohne Kennzahlen */
.dashboard-view-toggle {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    padding: 0;
    border-radius: 50%;
}

.dashboard-view-toggle svg {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.dashboard-without-numbers .app-main {
    display: flex;
    padding: 0;
}

.dashboard-without-numbers .app-main > .dashboard-focus-hero {
    flex: 1 1 auto;
}

.dashboard-without-numbers .app-content > footer {
    display: none;
}

.dashboard-without-numbers .dashboard-focus-hero {
    width: 100%;
    min-height: calc(100vh - 72px);
    margin: 0;
    border-radius: 0;
}

.dashboard-without-numbers .dashboard-focus-content {
    min-height: calc(100vh - 72px);
    padding: clamp(2rem, 4vw, 4.5rem);
}

.dashboard-focus-toggle {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 3;
}

.dashboard-focus-toggle .dashboard-view-toggle {
    color: #18212b;
    background: rgba(255, 255, 255, .9);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
}

.dashboard-focus-toggle .dashboard-view-toggle:hover,
.dashboard-focus-toggle .dashboard-view-toggle:focus-visible {
    color: #10161d;
    background: #fff;
}

@media (max-width: 767.98px) {
    .dashboard-without-numbers .dashboard-focus-hero,
    .dashboard-without-numbers .dashboard-focus-content {
        min-height: calc(100vh - 72px);
    }

    .dashboard-focus-toggle {
        top: 1rem;
        right: 1rem;
    }
}

.dashboard-focus-random {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 3;
}

.dashboard-focus-random .dashboard-view-toggle {
    color: #18212b;
    background: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
}

.dashboard-focus-random .dashboard-view-toggle:hover,
.dashboard-focus-random .dashboard-view-toggle:focus-visible {
    color: #10161d;
    background: #fff;
    transform: rotate(8deg);
}

.dashboard-focus-random .dashboard-view-toggle:active svg {
    transform: rotate(180deg);
}

.dashboard-focus-random svg {
    transition: transform .25s ease;
}

@media (max-width: 767.98px) {
    .dashboard-focus-random {
        left: 1rem;
        bottom: 1rem;
    }
}


/* Rechnungsformular: kontrastreiche Eingaben und Summen in dunklen Themes. */
[data-app-theme="dark"] .invoice-form .form-control,
[data-app-theme="dark"] .invoice-form .form-select,
[data-app-theme="dark"] .invoice-form .input-group-text,
[data-app-theme="dark"] .invoice-position {
    color: #edf3fb;
    background-color: #202a36;
    border-color: #3a4859;
}

[data-app-theme="dark"] .invoice-form .form-control:disabled,
[data-app-theme="dark"] .invoice-form .form-control[readonly],
[data-app-theme="dark"] .invoice-form .form-select:disabled {
    color: #d9e1eb;
    background-color: #273240;
    opacity: 1;
}

[data-app-theme="dark"] .invoice-form .form-control:focus,
[data-app-theme="dark"] .invoice-form .form-select:focus {
    color: #fff;
    background-color: #202a36;
    border-color: #6ea8fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .2);
}

[data-app-theme="dark"] .invoice-summary,
[data-app-theme="dark"] .invoice-form .service-period-toggle,
[data-app-theme="dark"] .invoice-form .invoice-price-mode,
[data-app-theme="dark"] .form-check-card {
    color: #edf3fb;
    background-color: #202a36;
    border-color: #3a4859;
}

[data-app-theme="dark"] .invoice-summary-row,
[data-app-theme="dark"] .invoice-summary-tax,
[data-app-theme="dark"] .invoice-position-total-value {
    color: #edf3fb;
}

[data-app-theme="dark"] .service-period-option {
    color: #c7d1de;
    background-color: #273240;
    border-color: #3a4859;
}

[data-app-theme="dark"] .service-period-input:checked + .service-period-option {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/***** Firmenlinks auf dem Dashboard *****/
.dashboard-company-link-wrap {
    position: relative;
    isolation: isolate;
}
.dashboard-company-link-card {
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 .35rem 1.1rem rgba(16, 24, 40, .06);
    padding-right: 3.75rem;
}
.dashboard-company-link-card:hover,
.dashboard-company-link-card:focus {
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), .45);
    background: var(--bs-tertiary-bg);
}
.dashboard-company-link-card .dashboard-quick-link-note { color: var(--bs-secondary-color); }
.dashboard-link-info {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    box-shadow: 0 .2rem .65rem rgba(0, 0, 0, .16);
    font: 700 1rem/1 Georgia, serif;
    cursor: pointer;
}
.dashboard-link-info:hover,
.dashboard-link-info:focus-visible {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    outline: none;
}
.dashboard-focus-links .dashboard-quick-link { padding-right: 3.75rem; }
.dashboard-focus-links .dashboard-link-info {
    color: #fff;
    background: rgba(15, 23, 42, .82);
    border-color: rgba(255, 255, 255, .5);
}
.dashboard-focus-links .dashboard-link-info:hover,
.dashboard-focus-links .dashboard-link-info:focus-visible {
    background: var(--bs-primary);
    border-color: #fff;
}
.dashboard-long-description { white-space: normal; line-height: 1.65; }


/* Dashboard-Firmenlinks per Drag & Drop sortieren */
.dashboard-company-link-item {
    transition: opacity .16s ease, transform .16s ease;
}
.dashboard-company-link-item.is-dragging {
    opacity: .45;
}
.dashboard-company-link-item.is-drag-over {
    transform: translateY(3px);
}
.dashboard-link-drag-handle {
    position: absolute;
    top: .65rem;
    right: 3rem;
    z-index: 4;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    background: rgba(10,18,29,.45);
    color: #fff;
    font-weight: 700;
    letter-spacing: -3px;
    cursor: grab;
    backdrop-filter: blur(8px);
}
.dashboard-link-drag-handle:active { cursor: grabbing; }
.dashboard-link-drag-handle:hover,
.dashboard-link-drag-handle:focus-visible {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.65);
}
.dashboard-company-links.is-saving::after {
    content: 'Reihenfolge wird gespeichert …';
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    padding: .6rem .9rem;
    border-radius: .6rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.2);
}

.dashboard-link-folder { display: block; cursor: default; }
.dashboard-folder-links { display: flex; flex-direction: column; gap: .45rem; }
.dashboard-folder-link-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 1.8rem; align-items: center; gap: .35rem; padding: .35rem .45rem; border-radius: .55rem; background: color-mix(in srgb, var(--bs-body-bg) 18%, transparent); }
.dashboard-folder-link-row a { min-width: 0; color: inherit; text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-folder-link-row a:hover { text-decoration: underline; }
.dashboard-folder-link-drag { position: static !important; width: 1.5rem !important; height: 1.5rem !important; font-size: .72rem !important; }
.dashboard-folder-info { width: 1.65rem; height: 1.65rem; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font-weight: 700; line-height: 1; }
.dashboard-folder-link-row.is-dragging { opacity: .45; }
.dashboard-folder-link-row.is-drag-over { outline: 2px dashed currentColor; outline-offset: 2px; }

/* Dashboard-Ordner: standardmäßig kompakt, Inhalte erst auf Wunsch anzeigen. */
.dashboard-link-folder {
    position: relative;
    min-height: 0;
    padding-right: 3.25rem;
}
.dashboard-folder-toggle {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: .85;
}
.dashboard-folder-toggle:hover,
.dashboard-folder-toggle:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.dashboard-folder-toggle-icon {
    display: block;
    font-size: 1.25rem;
    line-height: 1;
    transform: rotate(180deg);
    transition: transform .2s ease;
}
.dashboard-folder-toggle.collapsed .dashboard-folder-toggle-icon {
    transform: rotate(0deg);
}
.dashboard-folder-content {
    padding-right: 0;
}
.dashboard-folder-link-row {
    grid-template-columns: minmax(0, 1fr) 1.8rem;
}

/* Userbasierte Dashboard-Todos */
.dashboard-todos {
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.dashboard-todos.card { padding: 1.1rem; }
.dashboard-todos-overlay {
    width: min(100%, 960px);
    padding: 1rem;
    border: 0;
    border-radius: 1rem;
    background: rgba(13, 20, 32, .42);
    color: #fff;
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    box-shadow: 0 14px 36px rgba(0,0,0,.14);
}
.dashboard-todo-header,
.dashboard-todo-days,
.dashboard-todo-add,
.dashboard-todo-row {
    display: flex;
    align-items: center;
}
.dashboard-todo-header { justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.dashboard-todo-kicker { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.dashboard-todo-date { font-size: 1.05rem; font-weight: 700; }
.dashboard-todo-days { gap: .3rem; }
.dashboard-todo-days a {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    background: var(--bs-body-bg);
}
.dashboard-todo-days .dashboard-todo-today { width: auto; padding: 0 .75rem; font-size: .8rem; }
.dashboard-todos-overlay .dashboard-todo-days a { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.26); color: #fff; }
.dashboard-todo-add { gap: .5rem; margin-bottom: .75rem; }
.dashboard-todo-add .form-control { min-width: 0; }
.dashboard-todo-add .btn { flex: 0 0 2.4rem; width: 2.4rem; font-size: 1.3rem; line-height: 1; }
.dashboard-todos-overlay .dashboard-todo-add .form-control {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.3);
}
.dashboard-todos-overlay .dashboard-todo-add .form-control::placeholder { color: rgba(255,255,255,.66); }
.dashboard-todo-scroll { max-height: 220px; overflow-y: auto; padding-right: .3rem; scrollbar-width: thin; }
.dashboard-todo-row {
    gap: .7rem;
    padding: .68rem .2rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: opacity .15s ease, transform .15s ease;
}
.dashboard-todo-row:last-child { border-bottom: 0; }
.dashboard-todo-row.is-complete { opacity: .58; }
.dashboard-todo-row.is-complete .dashboard-todo-text { text-decoration: line-through; }
.dashboard-todo-check { position: relative; flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem; cursor: pointer; }
.dashboard-todo-check input { position: absolute; opacity: 0; pointer-events: none; }
.dashboard-todo-check span[aria-hidden] {
    position: absolute;
    inset: 0;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    opacity: .62;
}
.dashboard-todo-check input:checked + span[aria-hidden] { background: currentColor; opacity: 1; }
.dashboard-todo-check input:checked + span[aria-hidden]::after {
    content: '';
    position: absolute;
    left: .38rem;
    top: .18rem;
    width: .35rem;
    height: .65rem;
    border: solid var(--bs-body-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.dashboard-todos-overlay .dashboard-todo-check input:checked + span[aria-hidden]::after { border-color: #233043; }
.dashboard-todo-content { min-width: 0; flex: 1; }
.dashboard-todo-text { overflow-wrap: anywhere; }
.dashboard-todo-overdue { margin-top: .12rem; font-size: .72rem; color: var(--bs-warning-text-emphasis); }
.dashboard-todos-overlay .dashboard-todo-overdue { color: #ffd889; }
.dashboard-todo-empty { padding: 1rem .25rem; text-align: center; opacity: .7; }
.dashboard-todo-error { margin-top: .6rem; font-size: .82rem; color: var(--bs-danger); }
.dashboard-todos-overlay .dashboard-todo-error { color: #ffb4b4; }
@media (max-width: 575.98px) {
    .dashboard-todo-header { align-items: flex-start; }
    .dashboard-todo-days .dashboard-todo-today { display: none; }
}

/* Flash-Meldungen liegen in der bildfüllenden Dashboardansicht über dem Inhalt,
   statt als eigenes Flex-Element links neben dem Hero Platz einzunehmen. */
.dashboard-without-numbers .app-flash-messages {
    position: fixed;
    z-index: 1080;
    top: calc(72px + 1rem);
    left: calc(var(--sidebar-width, 240px) + 1rem);
    right: 1rem;
    width: auto;
    max-width: 42rem;
    pointer-events: none;
}

.dashboard-without-numbers .app-flash-messages .alert {
    margin-bottom: .75rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .2);
    pointer-events: auto;
}

@media (min-width: 992px) {
    body.sidebar-collapsed.dashboard-without-numbers .app-flash-messages {
        left: calc(72px + 1rem);
    }
}

@media (max-width: 991.98px) {
    .dashboard-without-numbers .app-flash-messages {
        top: calc(72px + .75rem);
        left: .75rem;
        right: .75rem;
        max-width: none;
    }
}

/* Privatarchiv */
.privat-folder-list .list-group-item {
    min-width: 0;
}
.privat-file-name {
    max-width: 28rem;
}
.privat-ocr-snippet {
    max-width: 42rem;
    line-height: 1.35;
}
.privat-document-table td:first-child {
    min-width: 15rem;
    max-width: 34rem;
}
@media (max-width: 767.98px) {
    .privat-document-table {
        min-width: 760px;
    }
}

/* Privatarchiv – aufgeräumter Arbeitsbereich */
.privat-page {
    --privat-muted-border: rgba(33, 52, 43, .11);
    --privat-soft-bg: rgba(45, 94, 70, .045);
}

.privat-page-head {
    padding-bottom: .25rem;
}

.privat-head-actions .btn {
    white-space: nowrap;
}

.privat-status-row {
    min-height: 1.75rem;
}

.privat-drive-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.privat-status-dot {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--bs-success);
    box-shadow: 0 0 0 .18rem rgba(25, 135, 84, .1);
}

.privat-drive-status-warning {
    color: var(--bs-warning-text-emphasis);
}

.privat-privacy-note {
    position: relative;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.privat-privacy-note > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.privat-privacy-note > summary::-webkit-details-marker,
.privat-disclosure > summary::-webkit-details-marker,
.privat-upload-panel > summary::-webkit-details-marker {
    display: none;
}

.privat-privacy-note > summary::before {
    content: "ⓘ";
    margin-right: .3rem;
}

.privat-privacy-note-body {
    position: absolute;
    z-index: 20;
    top: calc(100% + .45rem);
    left: 0;
    width: min(34rem, calc(100vw - 3rem));
    padding: .75rem .9rem;
    border: 1px solid var(--privat-muted-border);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .09);
    line-height: 1.45;
}

.privat-workspace .dashboard-card {
    border-color: var(--privat-muted-border);
}

.privat-folder-card {
    overflow: visible;
}

.privat-folder-list {
    max-height: 31rem;
    overflow-y: auto;
}

.privat-folder-list .list-group-item {
    padding-top: .58rem;
    padding-bottom: .58rem;
    border-color: rgba(0, 0, 0, .055);
    font-size: .9rem;
}

.privat-folder-glyph {
    color: var(--bs-secondary-color);
    font-size: .75rem;
    transition: transform .15s ease;
}

.privat-folder-list .list-group-item.active .privat-folder-glyph {
    color: currentColor;
}

.privat-disclosure > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.privat-disclosure[open] > summary {
    background: var(--privat-soft-bg);
}

.privat-upload-panel {
    overflow: hidden;
}

.privat-upload-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--bs-body-bg);
}

.privat-upload-summary:hover {
    background: var(--privat-soft-bg);
}

.privat-upload-summary .privat-disclosure-state::after {
    content: "Öffnen";
}

.privat-upload-panel[open] .privat-disclosure-state::after {
    content: "Schließen";
}

.privat-search-header {
    border-bottom: 1px solid var(--privat-muted-border);
}

.privat-search-form {
    display: grid;
    gap: .65rem;
}

.privat-search-main {
    display: flex;
    gap: .5rem;
}

.privat-search-main .form-control {
    min-width: 0;
    border-color: rgba(33, 52, 43, .18);
}

.privat-search-main .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .1);
}

.privat-search-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem 1rem;
    min-height: 1.8rem;
    color: var(--bs-secondary-color);
}

.privat-year-filter {
    width: 5.5rem;
}

.privat-search-feedback {
    padding: .55rem .7rem;
    border-radius: .5rem;
    background: var(--privat-soft-bg);
}

.privat-drive-search-note {
    color: var(--bs-secondary-color);
}

.privat-document-table thead th {
    padding-top: .7rem;
    padding-bottom: .7rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
    background: rgba(0, 0, 0, .018);
    border-bottom-width: 1px;
}

.privat-document-table tbody td {
    padding-top: .8rem;
    padding-bottom: .8rem;
    border-color: rgba(0, 0, 0, .055);
    vertical-align: middle;
}

.privat-document-table tbody tr:hover td {
    background: var(--privat-soft-bg);
}

.privat-document-title-row {
    line-height: 1.25;
}

.privat-document-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .55rem;
}

.privat-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: .05rem .38rem;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 999px;
    background: rgba(0, 0, 0, .025);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.4;
}

.privat-meta-pill-success {
    color: var(--bs-success-text-emphasis);
    border-color: rgba(25, 135, 84, .16);
    background: rgba(25, 135, 84, .07);
}

.privat-meta-pill-danger {
    color: var(--bs-danger-text-emphasis);
    border-color: rgba(220, 53, 69, .16);
    background: rgba(220, 53, 69, .07);
}

.privat-mail-meta {
    display: inline-block;
    max-width: 20rem;
}

.privat-folder-cell {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.privat-tax-meta {
    max-width: 14rem;
    line-height: 1.3;
}

.privat-drive-button,
.privat-more-button {
    width: 2rem;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.privat-more-button {
    letter-spacing: -.06em;
}

@media (max-width: 767.98px) {
    .privat-page-head {
        margin-bottom: .75rem !important;
    }

    .privat-head-actions {
        width: 100%;
        justify-content: flex-start !important;
    }

    .privat-search-main {
        align-items: stretch;
    }

    .privat-search-main .form-control {
        font-size: 1rem;
    }

    .privat-search-main .btn {
        padding-left: .85rem !important;
        padding-right: .85rem !important;
    }

    .privat-document-table {
        min-width: 690px;
    }
}

/* Privatarchiv – mobile Kamera-Schnellablage */
.privat-mobile-capture {
    border: 1px solid var(--privat-muted-border);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .45rem 1.4rem rgba(0, 0, 0, .06);
    overflow: hidden;
}

.privat-mobile-capture-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem .85rem;
    background: var(--privat-soft-bg);
    border-bottom: 1px solid var(--privat-muted-border);
}

.privat-camera-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    border-radius: 50%;
    background: var(--bs-primary);
    font-size: 1.35rem;
    box-shadow: 0 .35rem .9rem rgba(var(--bs-primary-rgb), .22);
}

.privat-camera-badge .privat-icon {
    fill: currentColor;
}

.privat-camera-form {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.privat-camera-button {
    min-height: 4.6rem;
    border-radius: .85rem;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
}

.privat-camera-button-icon {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 1.55rem;
    fill: currentColor;
}

.privat-camera-preview {
    overflow: hidden;
    border: 1px solid var(--privat-muted-border);
    border-radius: .85rem;
    background: rgba(0, 0, 0, .025);
}

.privat-camera-preview img {
    display: block;
    width: 100%;
    max-height: 52vh;
    object-fit: contain;
    background: #111;
}

.privat-camera-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
}

.privat-camera-upload {
    min-height: 3.65rem;
    border-radius: .85rem;
    font-weight: 700;
}

.privat-camera-tax-check {
    padding: .7rem .8rem .7rem 2.35rem;
    border: 1px solid var(--privat-muted-border);
    border-radius: .75rem;
    background: var(--privat-soft-bg);
}

.privat-camera-tax-check .form-check-input {
    margin-top: .22rem;
}

.privat-mobile-browse {
    padding: 0 1rem 1rem;
    color: var(--bs-secondary-color);
}

.privat-mobile-browse > summary {
    cursor: pointer;
    font-size: .86rem;
    font-weight: 600;
    text-align: center;
    list-style-position: inside;
}

@media (max-width: 767.98px) {
    .privat-page-head > div:first-child p,
    .privat-status-row,
    .privat-head-actions,
    .privat-folder-card,
    .privat-upload-panel {
        display: none !important;
    }

    .privat-page-head {
        display: block !important;
        padding-bottom: 0;
    }

    .privat-page-head > div:first-child .text-uppercase {
        display: none;
    }

    .privat-page-head h1 {
        font-size: 1.15rem;
        margin-bottom: .15rem !important;
    }

    .privat-workspace > .col-12.col-xl-3 {
        display: none;
    }

    .privat-workspace > .col-12.col-xl-9 {
        width: 100%;
    }

    .privat-documents-card {
        margin-top: .35rem;
        display: none;
    }

    .privat-page.privat-mobile-show-archive .privat-documents-card {
        display: block;
    }

    .privat-search-header {
        padding: .8rem !important;
    }
}

/* Privatarchiv – Dropdown-Aktionsmenüs dürfen auf Desktop aus der Tabelle herausragen.
   Bootstrap .table-responsive setzt overflow-x:auto; dadurch wird ein Dropdown bei
   kurzen Tabellen an der Unterkante des Containers abgeschnitten. Auf Mobilgeräten
   bleibt das horizontale Scrollen unverändert erhalten. */
@media (min-width: 768px) {
    .privat-page .privat-documents-card,
    .privat-page .privat-documents-card > .table-responsive {
        overflow: visible;
    }

    /* Das Flow-Theme nutzt das Abschneiden für eine Deko-Fläche. Da die Karte für
       das Aktionsmenü sichtbar überlaufen muss, unterdrücken wir dort nur diese Deko. */
    [data-app-theme="flow"] .privat-page .privat-documents-card::after {
        display: none;
    }
}

/* Privatarchiv – Ordner-Hierarchie */
.privat-folder-list .privat-folder-root {
    font-weight: 600;
}

/* Die in Kontora angelegten Ordner liegen innerhalb von „Privat“.
   Die erste Ordnerebene beginnt deshalb sichtbar eingerückt; weitere
   Unterordner erhalten ihren zusätzlichen Einzug weiterhin aus Twig. */
.privat-folder-list .privat-folder-root + .list-group-item {
    border-top-color: var(--bs-border-color-translucent);
}

/* Privatarchiv – Ordner-Icons und Drag & Drop */
.privat-folder-icon {
    flex: 0 0 1.05rem;
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
    color: var(--bs-secondary-color);
}

.privat-folder-list .list-group-item.active .privat-folder-icon {
    color: currentColor;
}

.privat-drag-hint {
    white-space: nowrap;
}

.privat-folder-list .list-group-item.is-drop-ready:not(.active) {
    background: var(--bs-tertiary-bg);
}

.privat-folder-list .list-group-item.is-drop-target {
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 0 2px var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.privat-folder-list .list-group-item.is-drop-target .privat-folder-icon {
    color: currentColor;
}

.privat-folder-list .list-group-item.is-moving {
    opacity: .7;
}

.privat-document-draggable {
    cursor: grab;
    transition: opacity .12s ease;
}

.privat-document-draggable:active {
    cursor: grabbing;
}

.privat-document-draggable.is-dragging {
    opacity: .42;
}

.privat-document-draggable.is-moving {
    opacity: .28;
    pointer-events: none;
}

.privat-document-drag-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin-left: -.3rem;
    margin-right: .05rem;
    fill: currentColor;
    color: var(--bs-secondary-color);
    cursor: grab;
}

@media (max-width: 767.98px) {
    .privat-document-draggable,
    .privat-document-draggable:active {
        cursor: default;
    }
}

/* Privatarchiv – mehrseitige mobile Kamera-Ablage */
.privat-camera-pages-wrap {
    border: 1px solid var(--privat-muted-border);
    border-radius: .85rem;
    background: rgba(0, 0, 0, .018);
    padding: .75rem;
}

.privat-camera-pages-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .2rem .75rem;
    margin-bottom: .65rem;
}

.privat-camera-pages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.privat-camera-page {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--privat-muted-border);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .15rem .45rem rgba(0, 0, 0, .045);
}

.privat-camera-page > img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #111;
}

.privat-camera-page-footer {
    padding: .5rem;
}

.privat-camera-page-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .35rem;
    margin-bottom: .45rem;
    font-size: .78rem;
}

.privat-camera-page-info span {
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.privat-camera-page-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.privat-camera-page-move {
    width: 2rem;
    min-height: 2rem;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.privat-camera-page-move svg {
    fill: currentColor;
}

.privat-camera-page-remove {
    margin-left: auto;
    min-height: 2rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
    font-size: .72rem;
}

@media (max-width: 390px) {
    .privat-camera-pages {
        grid-template-columns: 1fr;
    }

    .privat-camera-page > img {
        max-height: 45vh;
        object-fit: contain;
    }
}

/* Private Steuer-Checkliste: kompakte Arbeitsansicht */
.checklist-overview-card .progress.checklist-progress {
    height: .4rem;
}

.checklist-copy-year {
    position: relative;
}

.checklist-copy-year > summary,
.checklist-edit-menu > summary,
.checklist-add-card > summary {
    list-style: none;
    cursor: pointer;
}

.checklist-copy-year > summary::-webkit-details-marker,
.checklist-edit-menu > summary::-webkit-details-marker,
.checklist-add-card > summary::-webkit-details-marker {
    display: none;
}

.checklist-popover-card {
    position: absolute;
    right: 0;
    z-index: 1060;
    width: min(92vw, 390px);
}

.checklist-card .card-header {
    min-height: 2.6rem;
}

.checklist-item {
    padding: .7rem .8rem;
}

.checklist-item__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem .8rem;
    align-items: start;
}

.checklist-item__summary,
.checklist-item__documents-column {
    min-width: 0;
}

.checklist-item__summary-body {
    min-width: 0;
}

.checklist-item__title-wrap {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    min-width: 0;
}

.checklist-item__title-wrap .min-w-0 {
    min-width: 0;
}

.checklist-status {
    min-width: 4.7rem;
    text-align: center;
    margin-top: .05rem;
}

.checklist-info-text {
    max-width: 70ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: .15rem;
}

.checklist-item__summary-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
}

.checklist-icon-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.checklist-edit-menu {
    position: relative;
}

.checklist-edit-card {
    z-index: 1060;
    width: min(92vw, 430px);
}

.checklist-linked-section {
    margin-top: 0;
    padding-left: 0;
}

.checklist-linked-empty {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

.checklist-linked-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.checklist-file-icon {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
}

.checklist-linked-document {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem .5rem;
    align-items: center;
    min-width: 0;
    padding: .38rem .45rem .38rem .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-secondary-bg));
}

.checklist-linked-document__main,
.checklist-search-result__main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    flex: 1 1 auto;
}

.checklist-linked-document__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.checklist-linked-document__title {
    min-width: 0;
}

.checklist-linked-document__meta {
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checklist-linked-document__actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
}

.checklist-search-panel {
    margin-top: .55rem;
    padding: .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
}

.checklist-search-results .list-group-item {
    padding: .4rem .5rem;
}

.checklist-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.checklist-add-card {
    overflow: visible;
}

.checklist-add-card > summary {
    border-bottom: 0;
}

.checklist-add-card[open] > summary {
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

@media (min-width: 992px) {
    .checklist-item__layout {
        grid-template-columns: minmax(18rem, 1fr) minmax(24rem, 1.45fr);
    }

    .checklist-item__documents-column {
        align-self: center;
    }

    .checklist-search-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .shipping-header-checkbox {
        white-space: normal;
    }
}

.shopware-filter-card .form-label {
    color: #425466;
    font-weight: 600;
}

.shopware-filter-card .form-control,
.shopware-filter-card .form-select {
    min-height: 2.75rem;
}

.shopware-filter-card {
    border: 1px solid rgba(20, 28, 45, .06);
    border-radius: .9rem;
}

.footer-snippet-select {
    width: min(100%, 15rem);
}

.footer-snippet-select .form-select {
    min-height: 2.25rem;
}

@media (max-width: 575.98px) {
    .footer-snippet-select {
        width: 100%;
    }
}

.shopware-custom-fields-cell {
    min-width: 15rem;
    max-width: 24rem;
}

.shopware-custom-fields-cell .fw-medium {
    overflow-wrap: anywhere;
}

.shopware-custom-field-json {
    max-width: 42rem;
    padding: .75rem;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
    font-size: .8125rem;
    white-space: pre-wrap;
}


.shopware-customer-comment-cell {
    width: 18rem;
    max-width: 18rem;
}

.shopware-customer-comment-preview {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.shopware-customer-comment-detail {
    max-width: 60rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.dashboard-stat {
    transition: transform .15s ease, box-shadow .15s ease;
}

.dashboard-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 .35rem 1rem rgba(20, 28, 45, .1);
}

.dashboard-stat-icon {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    font-size: 1rem;
    font-weight: 700;
}


.dashboard-bar-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(2rem, 1fr));
    gap: .6rem;
    min-height: 18rem;
    align-items: end;
}

.dashboard-bar-column {
    display: grid;
    grid-template-rows: 2rem 12rem 1.5rem;
    gap: .35rem;
    min-width: 0;
    text-align: center;
}

.dashboard-bar-value {
    align-self: end;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-bar-track {
    display: flex;
    align-items: end;
    justify-content: center;
    border-bottom: 1px solid var(--bs-border-color);
    background: linear-gradient(to top, rgba(var(--bs-primary-rgb), .04), transparent);
}

.dashboard-bar {
    width: min(2rem, 72%);
    min-height: .2rem;
    border-radius: .35rem .35rem 0 0;
    background: var(--bs-primary);
    transition: opacity .15s ease;
}

.dashboard-bar-column:hover .dashboard-bar {
    opacity: .75;
}

.dashboard-bar-negative {
    background: var(--bs-danger);
}

.dashboard-bar-label {
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.dashboard-purpose {
    max-width: 36rem;
}

@media (max-width: 767.98px) {
    .dashboard-bar-chart {
        grid-template-columns: repeat(6, 1fr);
        min-height: 34rem;
    }
}

/* Benutzerdefinierte Kontora-Themes */
:root,
[data-app-theme="light"] {
    --app-sidebar-bg: #172033;
    --app-sidebar-text: #ffffff;
    --app-page-bg: #f4f6f9;
    --app-surface: #ffffff;
    --app-soft: #eef1f5;
    --app-shadow: rgba(20, 28, 45, .08);
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
}

[data-app-theme="flow"] {
    --app-sidebar-bg: #050509;
    --app-sidebar-text: #ffffff;
    --app-page-bg: #07070c;
    --app-surface: #11111b;
    --app-soft: #1c1830;
    --app-shadow: rgba(0, 0, 0, .42);
    --bs-primary: #b33cff;
    --bs-primary-rgb: 179, 60, 255;
    --bs-link-color: #d05cff;
    --bs-link-hover-color: #ff58bd;
}

[data-app-theme="dark"] {
    --app-sidebar-bg: #090d14;
    --app-sidebar-text: #f5f7fa;
    --app-page-bg: #111720;
    --app-surface: #19212c;
    --app-soft: #222c39;
    --app-shadow: rgba(0, 0, 0, .28);
    --bs-primary: #71a7ff;
    --bs-primary-rgb: 113, 167, 255;
    --bs-link-color: #8bb7ff;
    --bs-link-hover-color: #b5d2ff;
}

[data-app-theme="beauty"] {
    --app-sidebar-bg: #442d3c;
    --app-sidebar-text: #fff8fb;
    --app-page-bg: #fff8f8;
    --app-surface: #ffffff;
    --app-soft: #f8e9ed;
    --app-shadow: rgba(100, 54, 76, .1);
    --bs-primary: #b85c7d;
    --bs-primary-rgb: 184, 92, 125;
    --bs-link-color: #a34b6b;
    --bs-link-hover-color: #7f3852;
}

[data-app-theme="nature"] {
    --app-sidebar-bg: #20382d;
    --app-sidebar-text: #f5fbf7;
    --app-page-bg: #f3f6f1;
    --app-surface: #ffffff;
    --app-soft: #e4ece2;
    --app-shadow: rgba(35, 73, 52, .1);
    --bs-primary: #47775a;
    --bs-primary-rgb: 71, 119, 90;
    --bs-link-color: #3f6e51;
    --bs-link-hover-color: #2c513a;
}

[data-app-theme="bio"] {
    --app-sidebar-bg: #263a1c;
    --app-sidebar-text: #fbfff7;
    --app-page-bg: #f7faef;
    --app-surface: #ffffff;
    --app-soft: #edf4d8;
    --app-shadow: rgba(76, 105, 37, .1);
    --bs-primary: #79a832;
    --bs-primary-rgb: 121, 168, 50;
    --bs-link-color: #648f25;
    --bs-link-hover-color: #496b19;
}

[data-app-theme="industry"] {
    --app-sidebar-bg: #202a33;
    --app-sidebar-text: #f5f8fa;
    --app-page-bg: #eef2f4;
    --app-surface: #ffffff;
    --app-soft: #dfe6ea;
    --app-shadow: rgba(26, 44, 58, .11);
    --bs-primary: #39758f;
    --bs-primary-rgb: 57, 117, 143;
    --bs-link-color: #326a82;
    --bs-link-hover-color: #234e61;
}

body { background: var(--app-page-bg); }
.app-sidebar { color: var(--app-sidebar-text); background: var(--app-sidebar-bg); }
.app-header, .modal-content, .card, .dropdown-menu { --bs-bg-opacity: 1; background-color: var(--app-surface) !important; }
.dashboard-card, .card, .modal-content, .dropdown-menu { box-shadow: 0 .125rem .75rem var(--app-shadow); }
.settings-icon, .dashboard-stat-icon { background: var(--app-soft); }

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}
.theme-card {
    position: relative;
    display: grid;
    gap: .65rem;
    padding: .75rem;
    border: 2px solid var(--bs-border-color);
    border-radius: .75rem;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.theme-card:hover { transform: translateY(-2px); box-shadow: 0 .45rem 1.2rem var(--app-shadow); }
.theme-radio { position: absolute; opacity: 0; pointer-events: none; }
.theme-card:has(.theme-radio:checked) { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12); }
.theme-selected-mark {
    position: absolute; top: .55rem; right: .55rem; display: none; width: 1.5rem; height: 1.5rem;
    place-items: center; border-radius: 50%; color: #fff; background: var(--bs-primary); font-size: .8rem; font-weight: 800;
}
.theme-card:has(.theme-radio:checked) .theme-selected-mark { display: grid; }
.theme-card-preview { display: grid; grid-template-columns: 28% 1fr; height: 5.25rem; overflow: hidden; border-radius: .5rem; background: var(--preview-page); }
.theme-preview-sidebar { background: var(--preview-sidebar); }
.theme-preview-content { display: flex; flex-direction: column; gap: .45rem; padding: .7rem; }
.theme-preview-content span { display: block; height: .55rem; border-radius: 1rem; background: var(--preview-accent); }
.theme-preview-content span:nth-child(2) { width: 72%; background: var(--preview-soft); }
.theme-preview-content span:nth-child(3) { width: 88%; background: var(--preview-soft); }
.theme-card-copy { display: grid; gap: .15rem; }
.theme-card-copy small { color: var(--bs-secondary-color); line-height: 1.25; }
.theme-preview-light { --preview-sidebar:#172033; --preview-page:#f4f6f9; --preview-accent:#0d6efd; --preview-soft:#d8dee8; }
.theme-preview-flow { --preview-sidebar:#050509; --preview-page:#0d0b14; --preview-accent:#c13cff; --preview-soft:#2a1c3d; }
.theme-preview-dark { --preview-sidebar:#090d14; --preview-page:#19212c; --preview-accent:#71a7ff; --preview-soft:#344253; }
.theme-preview-beauty { --preview-sidebar:#442d3c; --preview-page:#fff8f8; --preview-accent:#b85c7d; --preview-soft:#f0ceda; }
.theme-preview-nature { --preview-sidebar:#20382d; --preview-page:#f3f6f1; --preview-accent:#47775a; --preview-soft:#cddccb; }
.theme-preview-bio { --preview-sidebar:#263a1c; --preview-page:#f7faef; --preview-accent:#79a832; --preview-soft:#dce9b6; }
.theme-preview-industry { --preview-sidebar:#202a33; --preview-page:#eef2f4; --preview-accent:#39758f; --preview-soft:#cbd8de; }

/* Outline-Primary folgt der Akzentfarbe des jeweils aktiven Benutzer-Themes. */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 82%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 78%, #000);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--bs-btn-disabled-color);
    background-color: transparent;
    border-color: var(--bs-btn-disabled-border-color);
    opacity: .55;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 84%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 76%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 72%, #000);
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
[data-app-theme="dark"] .app-header,
[data-app-theme="dark"] .card,
[data-app-theme="dark"] .modal-content,
[data-app-theme="dark"] .dropdown-menu {
    border-color: #2d3948 !important;
}


/* Flow: dunkler SaaS-Look mit violett-pinken Lichtverläufen */
[data-app-theme="flow"] body {
    color: #f7f4ff;
    background:
        radial-gradient(circle at 82% 8%, rgba(122, 45, 255, .20), transparent 30rem),
        radial-gradient(circle at 14% 90%, rgba(255, 45, 158, .13), transparent 34rem),
        linear-gradient(145deg, #050509 0%, #090711 48%, #07070c 100%);
    background-attachment: fixed;
}
/* Kein eigener Stacking-Context auf .app-content: Andernfalls liegen
   seitenbezogene Bootstrap-Modals unter dem an <body> angehängten Backdrop. */
[data-app-theme="flow"] .app-content {
    position: static;
}
[data-app-theme="flow"] .app-sidebar {
    background:
        linear-gradient(180deg, rgba(18, 12, 28, .98), rgba(4, 4, 8, .99)),
        #050509;
    border-right: 1px solid rgba(197, 91, 255, .16);
    box-shadow: 14px 0 50px rgba(0, 0, 0, .22);
}
[data-app-theme="flow"] .app-header {
    background: rgba(12, 12, 20, .78) !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
[data-app-theme="flow"] .app-sidebar .nav-link.active,
[data-app-theme="flow"] .btn-primary {
    background: linear-gradient(135deg, #8238f5 0%, #ec3da8 100%);
    border-color: transparent;
    box-shadow: 0 .45rem 1.3rem rgba(181, 54, 226, .25);
}
[data-app-theme="flow"] .app-sidebar .nav-link:hover,
[data-app-theme="flow"] .app-sidebar .nav-link:focus {
    background: linear-gradient(90deg, rgba(137, 59, 246, .18), rgba(236, 61, 168, .08));
}
[data-app-theme="flow"] .card,
[data-app-theme="flow"] .modal-content,
[data-app-theme="flow"] .dropdown-menu {
    color: #f5f1fb;
    background:
        linear-gradient(145deg, rgba(24, 22, 35, .96), rgba(13, 13, 22, .96)) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .025);
}
[data-app-theme="flow"] .dashboard-card {
    position: relative;
    overflow: hidden;
}
[data-app-theme="flow"] .dashboard-card::after {
    content: "";
    position: absolute;
    width: 10rem;
    height: 10rem;
    top: -7rem;
    right: -5rem;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(190, 55, 255, .18), transparent 68%);
}
[data-app-theme="flow"] .bg-white,
[data-app-theme="flow"] .bg-light,
[data-app-theme="flow"] .table,
[data-app-theme="flow"] .table > :not(caption) > * > * {
    --bs-table-bg: transparent;
    --bs-table-color: #f4f0fa;
    color: #f4f0fa !important;
    background-color: transparent !important;
}
[data-app-theme="flow"] .card-header,
[data-app-theme="flow"] .card-footer,
[data-app-theme="flow"] .list-group-item {
    color: #f5f1fb;
    background: rgba(255, 255, 255, .025) !important;
    border-color: rgba(255, 255, 255, .08) !important;
}
[data-app-theme="flow"] .text-body,
[data-app-theme="flow"] h1,
[data-app-theme="flow"] h2,
[data-app-theme="flow"] h3,
[data-app-theme="flow"] h4,
[data-app-theme="flow"] h5,
[data-app-theme="flow"] h6 {
    color: #fbf9ff !important;
}
[data-app-theme="flow"] .text-muted,
[data-app-theme="flow"] .text-body-secondary,
[data-app-theme="flow"] .form-text,
[data-app-theme="flow"] .dashboard-bar-label {
    color: #aaa4b7 !important;
}
[data-app-theme="flow"] .form-control,
[data-app-theme="flow"] .form-select,
[data-app-theme="flow"] .input-group-text {
    color: #f5f1fb;
    background-color: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .12);
}
[data-app-theme="flow"] .form-control:focus,
[data-app-theme="flow"] .form-select:focus {
    border-color: #c044ff;
    box-shadow: 0 0 0 .25rem rgba(192, 68, 255, .14);
}
[data-app-theme="flow"] .dashboard-bar {
    background: linear-gradient(180deg, #d04aff 0%, #8a43ff 58%, #ef3ca5 100%);
    box-shadow: 0 0 1rem rgba(184, 64, 255, .22);
}
[data-app-theme="flow"] .badge.text-bg-primary {
    background: linear-gradient(135deg, #8238f5, #ec3da8) !important;
}

/* Dark: durchgängig dunkle Flächen und lesbare Überschriften */
[data-app-theme="dark"] .bg-white,
[data-app-theme="dark"] .bg-light,
[data-app-theme="dark"] .card-header.bg-white,
[data-app-theme="dark"] .card-footer.bg-white {
    color: #edf3fb !important;
    background-color: #19212c !important;
}
[data-app-theme="dark"] .card-header,
[data-app-theme="dark"] .card-footer,
[data-app-theme="dark"] .list-group-item {
    color: #edf3fb;
    background-color: #19212c !important;
    border-color: #2d3948 !important;
}
[data-app-theme="dark"] h1,
[data-app-theme="dark"] h2,
[data-app-theme="dark"] h3,
[data-app-theme="dark"] h4,
[data-app-theme="dark"] h5,
[data-app-theme="dark"] h6,
[data-app-theme="dark"] .card-title,
[data-app-theme="dark"] .card-header .text-body,
[data-app-theme="dark"] .card-header .text-dark {
    color: #f4f7fb !important;
}
[data-app-theme="dark"] .card-header .text-muted,
[data-app-theme="dark"] .card-header .text-body-secondary,
[data-app-theme="dark"] .card-header small {
    color: #aeb9c7 !important;
}
[data-app-theme="dark"] .table,
[data-app-theme="dark"] .table > :not(caption) > * > * {
    --bs-table-bg: transparent;
    --bs-table-color: #e7edf5;
    color: #e7edf5;
    border-color: #334152;
}

/* Robuste Theme-Auswahl ohne alleinige Abhängigkeit von :has(). */
.theme-card.is-selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12);
}
.theme-card.is-selected .theme-selected-mark {
    display: grid;
}
.theme-card:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), .3);
    outline-offset: 2px;
}

/* Während des Theme-Wechsels keine trägen Übergänge oder Blur-Neuberechnungen. */
html.theme-is-switching *,
html.theme-is-switching *::before,
html.theme-is-switching *::after {
    transition: none !important;
    animation: none !important;
}
html.theme-is-switching[data-app-theme="flow"] .app-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Lesbarkeit der Formular- und Autocomplete-Komponenten in dunklen Themes. */
[data-app-theme="flow"] .invoice-form .form-label,
[data-app-theme="dark"] .invoice-form .form-label,
[data-app-theme="flow"] .shopware-filter-card .form-label,
[data-app-theme="dark"] .shopware-filter-card .form-label,
[data-app-theme="flow"] .invoice-position .form-label,
[data-app-theme="dark"] .invoice-position .form-label {
    color: #c7c2d2;
}

[data-app-theme="dark"] .invoice-form .form-label,
[data-app-theme="dark"] .shopware-filter-card .form-label,
[data-app-theme="dark"] .invoice-position .form-label {
    color: #b9c5d4;
}

[data-app-theme="flow"] .invoice-form .form-text,
[data-app-theme="flow"] .invoice-section-note,
[data-app-theme="flow"] .optional-section-summary,
[data-app-theme="dark"] .invoice-form .form-text,
[data-app-theme="dark"] .invoice-section-note,
[data-app-theme="dark"] .optional-section-summary {
    color: var(--bs-secondary-color) !important;
}

[data-app-theme="flow"] .contact-autocomplete-results,
[data-app-theme="flow"] .product-autocomplete-results {
    color: #f5f1fb;
    background: #181622;
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .42);
}

[data-app-theme="dark"] .contact-autocomplete-results,
[data-app-theme="dark"] .product-autocomplete-results {
    color: #edf3fb;
    background: #202a36;
    border-color: #3a4859;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .32);
}

[data-app-theme="flow"] .contact-autocomplete-result,
[data-app-theme="flow"] .product-autocomplete-result,
[data-app-theme="dark"] .contact-autocomplete-result,
[data-app-theme="dark"] .product-autocomplete-result {
    color: inherit;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .09);
}

[data-app-theme="flow"] .contact-autocomplete-result:hover,
[data-app-theme="flow"] .contact-autocomplete-result:focus,
[data-app-theme="flow"] .product-autocomplete-result:hover,
[data-app-theme="flow"] .product-autocomplete-result:focus {
    color: #fff;
    background: rgba(192, 68, 255, .16);
}

[data-app-theme="dark"] .contact-autocomplete-result:hover,
[data-app-theme="dark"] .contact-autocomplete-result:focus,
[data-app-theme="dark"] .product-autocomplete-result:hover,
[data-app-theme="dark"] .product-autocomplete-result:focus {
    color: #fff;
    background: #2b3949;
}

[data-app-theme="flow"] .contact-autocomplete-result small,
[data-app-theme="flow"] .product-autocomplete-result small {
    color: #b7b0c4;
}

[data-app-theme="dark"] .contact-autocomplete-result small,
[data-app-theme="dark"] .product-autocomplete-result small {
    color: #aeb9c7;
}

/* Bootstrap deaktiviert den inaktiven Zeitraum-Button stark; in dunklen Themes
   bleibt er bewusst als klar lesbare, aber inaktive Auswahl sichtbar. */
[data-app-theme="flow"] .service-period-toggle .btn,
[data-app-theme="dark"] .service-period-toggle .btn {
    opacity: 1;
}

[data-app-theme="flow"] .service-period-toggle .btn-light,
[data-app-theme="flow"] .service-period-toggle .btn-outline-secondary,
[data-app-theme="flow"] .service-period-toggle .btn:not(.active):not(:checked),
[data-app-theme="flow"] .service-period-toggle .btn-check:not(:checked) + .btn {
    color: #c8c1d3;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .15);
}

[data-app-theme="dark"] .service-period-toggle .btn-light,
[data-app-theme="dark"] .service-period-toggle .btn-outline-secondary,
[data-app-theme="dark"] .service-period-toggle .btn:not(.active):not(:checked),
[data-app-theme="dark"] .service-period-toggle .btn-check:not(:checked) + .btn {
    color: #c2ccd8;
    background: #25303d;
    border-color: #3a4859;
}

[data-app-theme="flow"] .service-period-toggle .btn-check:checked + .btn,
[data-app-theme="dark"] .service-period-toggle .btn-check:checked + .btn {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Native Select-Listen erhalten auf macOS/Firefox sonst teils helle Optionen mit
   heller Schrift. color-scheme und explizite Optionsfarben verhindern das. */
[data-app-theme="flow"] .form-select,
[data-app-theme="flow"] select,
[data-app-theme="dark"] .form-select,
[data-app-theme="dark"] select {
    color-scheme: dark;
}

[data-app-theme="flow"] .form-select option,
[data-app-theme="flow"] select option {
    color: #f5f1fb;
    background: #181622;
}

[data-app-theme="dark"] .form-select option,
[data-app-theme="dark"] select option {
    color: #edf3fb;
    background: #202a36;
}

[data-app-theme="flow"] .form-control::placeholder,
[data-app-theme="dark"] .form-control::placeholder {
    color: var(--bs-secondary-color);
    opacity: .9;
}

/* Radio- und Checkbox-Beschriftungen in dunklen Themes klar lesbar halten. */
[data-app-theme="flow"] .form-check-label,
[data-app-theme="flow"] .form-check-label.required,
[data-app-theme="dark"] .form-check-label,
[data-app-theme="dark"] .form-check-label.required {
    color: #f1edf7;
    opacity: 1;
}

[data-app-theme="dark"] .form-check-label,
[data-app-theme="dark"] .form-check-label.required {
    color: #e7edf5;
}

[data-app-theme="flow"] .form-check-input,
[data-app-theme="dark"] .form-check-input {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .42);
}

[data-app-theme="flow"] .form-check-input:checked,
[data-app-theme="dark"] .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-app-theme="flow"] .form-check-input:focus,
[data-app-theme="dark"] .form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .28);
}

[data-app-theme="flow"] .form-check-input:disabled ~ .form-check-label,
[data-app-theme="flow"] .form-check-input[disabled] ~ .form-check-label,
[data-app-theme="dark"] .form-check-input:disabled ~ .form-check-label,
[data-app-theme="dark"] .form-check-input[disabled] ~ .form-check-label {
    color: var(--bs-secondary-color);
    opacity: .8;
}

/* Einklappbare Hauptnavigation mit Bootstrap-Icons */
:root {
    --app-sidebar-collapsed-width: 72px;
}

.app-sidebar,
.app-content {
    transition: width .2s ease, margin-left .2s ease;
}

.sidebar-topbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 40px;
    margin-bottom: 1.1rem;
}

.sidebar-topbar .sidebar-brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.sidebar-collapse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    cursor: pointer;
    transition: color .15s ease, background .15s ease, transform .2s ease;
}

.sidebar-collapse-button:hover,
.sidebar-collapse-button:focus-visible {
    color: #fff;
    background: rgba(255,255,255,.16);
    outline: none;
}

.sidebar-toggle-icon,
.nav-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: currentColor;
}

.sidebar-collapse-button .sidebar-toggle-icon {
    transition: transform .2s ease;
}

.sidebar-navigation {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: .15rem;
    scrollbar-width: thin;
}

/* Die Sidebar bleibt viewport-hoch; nur die eigentliche Linkliste scrollt. */
.app-sidebar {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    contain: paint;
}

.app-sidebar .sidebar-topbar,
.app-sidebar .sidebar-footer {
    flex: 0 0 auto;
}

.app-sidebar .sidebar-footer {
    margin-top: .7rem !important;
    padding-top: .35rem;
}

#mobileNavigation .offcanvas-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.sidebar-group + .sidebar-group {
    margin-top: .75rem;
}

.app-sidebar .sidebar-group {
    display: block;
    flex: none;
}

.sidebar-section-label {
    padding: 0 .7rem .28rem;
    font-size: .69rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .72;
}

.app-sidebar .nav-link,
#mobileNavigation .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    max-width: 100%;
    min-height: 2.42rem;
    margin: .08rem 0;
    padding: .52rem .7rem;
    border-radius: .48rem;
    box-sizing: border-box;
    line-height: 1.2;
    white-space: nowrap;
}

.app-sidebar .nav-link .sidebar-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar .nav-link .nav-icon {
    opacity: .88;
}

.app-sidebar .nav-link:hover .nav-icon,
.app-sidebar .nav-link.active .nav-icon {
    opacity: 1;
}

.app-sidebar .nav-link .sidebar-badge {
    flex: 0 0 auto;
    min-width: 1.45rem;
    margin-left: -.3rem;
    margin-right: 0;
    text-align: center;
}

#mobileNavigation .nav-icon {
    margin-right: .05rem;
}

@media (min-width: 992px) {
    /* Das mobile Offcanvas darf auf Desktop überhaupt nicht gezeichnet werden.
       display:none allein aus Bootstrap wird hier bewusst defensiv ergänzt,
       weil Firefox sonst je nach Offcanvas-Zustand Fragmente anzeigen kann. */
    #mobileNavigation {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        pointer-events: none !important;
    }

    body.sidebar-collapsed .app-sidebar {
        width: var(--app-sidebar-collapsed-width);
        padding-inline: .65rem;
    }

    body.sidebar-collapsed .app-content {
        margin-left: var(--app-sidebar-collapsed-width);
    }

    body.sidebar-collapsed .sidebar-label,
    body.sidebar-collapsed .sidebar-section-label {
        display: none;
    }

    body.sidebar-collapsed .sidebar-topbar {
        justify-content: center;
    }

    body.sidebar-collapsed .sidebar-brand {
        flex: 0 0 auto;
        justify-content: center;
    }

    body.sidebar-collapsed .sidebar-collapse-button {
        position: absolute;
        top: 52px;
        left: 50%;
        transform: translateX(-50%);
    }

    body.sidebar-collapsed .sidebar-collapse-button .sidebar-toggle-icon {
        transform: rotate(180deg);
    }

    body.sidebar-collapsed .sidebar-navigation {
        margin-top: 2.65rem;
        padding-right: 0;
    }

    body.sidebar-collapsed .sidebar-group + .sidebar-group {
        margin-top: .4rem;
    }

    body.sidebar-collapsed .app-sidebar .nav-link {
        justify-content: center;
        min-height: 2.7rem;
        padding: .62rem;
    }

    body.sidebar-collapsed .app-sidebar .nav-link .sidebar-badge {
        position: absolute;
        top: .16rem;
        right: .1rem;
        min-width: 1.18rem;
        margin: 0;
        padding: .12rem .28rem;
        font-size: .59rem;
    }

    body.sidebar-collapsed .sidebar-footer {
        min-height: 1rem;
    }
}

/* Defensive Sidebar icon sizing */
.app-sidebar svg.nav-icon,
#mobileNavigation svg.nav-icon,
.sidebar-collapse-button svg.sidebar-toggle-icon {
    display:block !important;
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    max-width:17px !important;
    min-height:17px !important;
    max-height:17px !important;
    flex:0 0 17px !important;
}


/* Dashboard ohne Zahlen */
:root,
[data-app-theme="light"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="flow"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/3075993/pexels-photo-3075993.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="dark"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/8728382/pexels-photo-8728382.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="beauty"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/931177/pexels-photo-931177.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="nature"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="bio"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/4503260/pexels-photo-4503260.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

[data-app-theme="industry"] {
    --dashboard-focus-image: url('https://images.pexels.com/photos/236705/pexels-photo-236705.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

.dashboard-focus-hero {
    position: relative;
    min-height: 38rem;
    border-radius: 1rem;
    color: #fff;
    background: #0f1720;
}

.dashboard-focus-backdrop,
.dashboard-focus-overlay {
    position: absolute;
    inset: 0;
}

.dashboard-focus-backdrop {
    background-image: var(--dashboard-focus-image);
    background-position: center;
    background-size: cover;
    transform: scale(1.02);
}

.dashboard-focus-overlay {
    background:
        linear-gradient(90deg, rgba(11, 18, 32, .88) 0%, rgba(11, 18, 32, .7) 42%, rgba(11, 18, 32, .52) 100%),
        linear-gradient(180deg, rgba(11, 18, 32, .14) 0%, rgba(11, 18, 32, .56) 100%);
}

.dashboard-focus-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 38rem;
    padding: 2rem;
    gap: 2rem;
}

.dashboard-focus-meta {
    max-width: 42rem;
    padding-top: .5rem;
}

.dashboard-focus-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.dashboard-focus-kicker::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    border-radius: 999px;
    background: var(--bs-primary);
}

.dashboard-focus-title {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1.04;
}

.dashboard-focus-text {
    max-width: 38rem;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}

.dashboard-quick-link {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 100%;
    padding: 1rem 1.1rem;
    border-radius: .9rem;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.dashboard-quick-link:hover,
.dashboard-quick-link:focus {
    transform: translateY(-2px);
}

.dashboard-quick-link-primary {
    color: #fff;
    background: rgba(var(--bs-primary-rgb), .9);
    border: 1px solid rgba(255, 255, 255, .08);
}

.dashboard-quick-link-primary:hover,
.dashboard-quick-link-primary:focus {
    color: #fff;
    background: rgba(var(--bs-primary-rgb), 1);
}

.dashboard-quick-link-light {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
}

.dashboard-quick-link-light:hover,
.dashboard-quick-link-light:focus {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

.dashboard-quick-link-label {
    font-weight: 700;
}

.dashboard-quick-link-note {
    font-size: .92rem;
    color: rgba(255, 255, 255, .76);
}

@media (max-width: 767.98px) {
    .dashboard-focus-hero,
    .dashboard-focus-content {
        min-height: auto;
    }

    .dashboard-focus-content {
        padding: 1.5rem;
    }

    .dashboard-focus-actions .btn {
        width: 100%;
    }
}

/* Volle Fokusfläche für die Dashboard-Ansicht ohne Kennzahlen */
.dashboard-view-toggle {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    padding: 0;
    border-radius: 50%;
}

.dashboard-view-toggle svg {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.dashboard-without-numbers .app-main {
    display: flex;
    padding: 0;
}

.dashboard-without-numbers .app-main > .dashboard-focus-hero {
    flex: 1 1 auto;
}

.dashboard-without-numbers .app-content > footer {
    display: none;
}

.dashboard-without-numbers .dashboard-focus-hero {
    width: 100%;
    min-height: calc(100vh - 72px);
    margin: 0;
    border-radius: 0;
}

.dashboard-without-numbers .dashboard-focus-content {
    min-height: calc(100vh - 72px);
    padding: clamp(2rem, 4vw, 4.5rem);
}

.dashboard-focus-toggle {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 3;
}

.dashboard-focus-toggle .dashboard-view-toggle {
    color: #18212b;
    background: rgba(255, 255, 255, .9);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
}

.dashboard-focus-toggle .dashboard-view-toggle:hover,
.dashboard-focus-toggle .dashboard-view-toggle:focus-visible {
    color: #10161d;
    background: #fff;
}

@media (max-width: 767.98px) {
    .dashboard-without-numbers .dashboard-focus-hero,
    .dashboard-without-numbers .dashboard-focus-content {
        min-height: calc(100vh - 72px);
    }

    .dashboard-focus-toggle {
        top: 1rem;
        right: 1rem;
    }
}

.dashboard-focus-random {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 3;
}

.dashboard-focus-random .dashboard-view-toggle {
    color: #18212b;
    background: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
}

.dashboard-focus-random .dashboard-view-toggle:hover,
.dashboard-focus-random .dashboard-view-toggle:focus-visible {
    color: #10161d;
    background: #fff;
    transform: rotate(8deg);
}

.dashboard-focus-random .dashboard-view-toggle:active svg {
    transform: rotate(180deg);
}

.dashboard-focus-random svg {
    transition: transform .25s ease;
}

@media (max-width: 767.98px) {
    .dashboard-focus-random {
        left: 1rem;
        bottom: 1rem;
    }
}


/* Rechnungsformular: kontrastreiche Eingaben und Summen in dunklen Themes. */
[data-app-theme="dark"] .invoice-form .form-control,
[data-app-theme="dark"] .invoice-form .form-select,
[data-app-theme="dark"] .invoice-form .input-group-text,
[data-app-theme="dark"] .invoice-position {
    color: #edf3fb;
    background-color: #202a36;
    border-color: #3a4859;
}

[data-app-theme="dark"] .invoice-form .form-control:disabled,
[data-app-theme="dark"] .invoice-form .form-control[readonly],
[data-app-theme="dark"] .invoice-form .form-select:disabled {
    color: #d9e1eb;
    background-color: #273240;
    opacity: 1;
}

[data-app-theme="dark"] .invoice-form .form-control:focus,
[data-app-theme="dark"] .invoice-form .form-select:focus {
    color: #fff;
    background-color: #202a36;
    border-color: #6ea8fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .2);
}

[data-app-theme="dark"] .invoice-summary,
[data-app-theme="dark"] .invoice-form .service-period-toggle,
[data-app-theme="dark"] .invoice-form .invoice-price-mode,
[data-app-theme="dark"] .form-check-card {
    color: #edf3fb;
    background-color: #202a36;
    border-color: #3a4859;
}

[data-app-theme="dark"] .invoice-summary-row,
[data-app-theme="dark"] .invoice-summary-tax,
[data-app-theme="dark"] .invoice-position-total-value {
    color: #edf3fb;
}

[data-app-theme="dark"] .service-period-option {
    color: #c7d1de;
    background-color: #273240;
    border-color: #3a4859;
}

[data-app-theme="dark"] .service-period-input:checked + .service-period-option {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/***** Firmenlinks auf dem Dashboard *****/
.dashboard-company-link-wrap {
    position: relative;
    isolation: isolate;
}
.dashboard-company-link-card {
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 .35rem 1.1rem rgba(16, 24, 40, .06);
    padding-right: 3.75rem;
}
.dashboard-company-link-card:hover,
.dashboard-company-link-card:focus {
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), .45);
    background: var(--bs-tertiary-bg);
}
.dashboard-company-link-card .dashboard-quick-link-note { color: var(--bs-secondary-color); }
.dashboard-link-info {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    box-shadow: 0 .2rem .65rem rgba(0, 0, 0, .16);
    font: 700 1rem/1 Georgia, serif;
    cursor: pointer;
}
.dashboard-link-info:hover,
.dashboard-link-info:focus-visible {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    outline: none;
}
.dashboard-focus-links .dashboard-quick-link { padding-right: 3.75rem; }
.dashboard-focus-links .dashboard-link-info {
    color: #fff;
    background: rgba(15, 23, 42, .82);
    border-color: rgba(255, 255, 255, .5);
}
.dashboard-focus-links .dashboard-link-info:hover,
.dashboard-focus-links .dashboard-link-info:focus-visible {
    background: var(--bs-primary);
    border-color: #fff;
}
.dashboard-long-description { white-space: normal; line-height: 1.65; }


/* Dashboard-Firmenlinks per Drag & Drop sortieren */
.dashboard-company-link-item {
    transition: opacity .16s ease, transform .16s ease;
}
.dashboard-company-link-item.is-dragging {
    opacity: .45;
}
.dashboard-company-link-item.is-drag-over {
    transform: translateY(3px);
}
.dashboard-link-drag-handle {
    position: absolute;
    top: .65rem;
    right: 3rem;
    z-index: 4;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    background: rgba(10,18,29,.45);
    color: #fff;
    font-weight: 700;
    letter-spacing: -3px;
    cursor: grab;
    backdrop-filter: blur(8px);
}
.dashboard-link-drag-handle:active { cursor: grabbing; }
.dashboard-link-drag-handle:hover,
.dashboard-link-drag-handle:focus-visible {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.65);
}
.dashboard-company-links.is-saving::after {
    content: 'Reihenfolge wird gespeichert …';
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    padding: .6rem .9rem;
    border-radius: .6rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.2);
}

.dashboard-link-folder { display: block; cursor: default; }
.dashboard-folder-links { display: flex; flex-direction: column; gap: .45rem; }
.dashboard-folder-link-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 1.8rem; align-items: center; gap: .35rem; padding: .35rem .45rem; border-radius: .55rem; background: color-mix(in srgb, var(--bs-body-bg) 18%, transparent); }
.dashboard-folder-link-row a { min-width: 0; color: inherit; text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-folder-link-row a:hover { text-decoration: underline; }
.dashboard-folder-link-drag { position: static !important; width: 1.5rem !important; height: 1.5rem !important; font-size: .72rem !important; }
.dashboard-folder-info { width: 1.65rem; height: 1.65rem; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font-weight: 700; line-height: 1; }
.dashboard-folder-link-row.is-dragging { opacity: .45; }
.dashboard-folder-link-row.is-drag-over { outline: 2px dashed currentColor; outline-offset: 2px; }

/* Dashboard-Ordner: standardmäßig kompakt, Inhalte erst auf Wunsch anzeigen. */
.dashboard-link-folder {
    position: relative;
    min-height: 0;
    padding-right: 3.25rem;
}
.dashboard-folder-toggle {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: .85;
}
.dashboard-folder-toggle:hover,
.dashboard-folder-toggle:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.dashboard-folder-toggle-icon {
    display: block;
    font-size: 1.25rem;
    line-height: 1;
    transform: rotate(180deg);
    transition: transform .2s ease;
}
.dashboard-folder-toggle.collapsed .dashboard-folder-toggle-icon {
    transform: rotate(0deg);
}
.dashboard-folder-content {
    padding-right: 0;
}
.dashboard-folder-link-row {
    grid-template-columns: minmax(0, 1fr) 1.8rem;
}

/* Userbasierte Dashboard-Todos */
.dashboard-todos {
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.dashboard-todos.card { padding: 1.1rem; }
.dashboard-todos-overlay {
    width: min(100%, 960px);
    padding: 1rem;
    border: 0;
    border-radius: 1rem;
    background: rgba(13, 20, 32, .42);
    color: #fff;
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    box-shadow: 0 14px 36px rgba(0,0,0,.14);
}
.dashboard-todo-header,
.dashboard-todo-days,
.dashboard-todo-add,
.dashboard-todo-row {
    display: flex;
    align-items: center;
}
.dashboard-todo-header { justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.dashboard-todo-kicker { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.dashboard-todo-date { font-size: 1.05rem; font-weight: 700; }
.dashboard-todo-days { gap: .3rem; }
.dashboard-todo-days a {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    background: var(--bs-body-bg);
}
.dashboard-todo-days .dashboard-todo-today { width: auto; padding: 0 .75rem; font-size: .8rem; }
.dashboard-todos-overlay .dashboard-todo-days a { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.26); color: #fff; }
.dashboard-todo-add { gap: .5rem; margin-bottom: .75rem; }
.dashboard-todo-add .form-control { min-width: 0; }
.dashboard-todo-add .btn { flex: 0 0 2.4rem; width: 2.4rem; font-size: 1.3rem; line-height: 1; }
.dashboard-todos-overlay .dashboard-todo-add .form-control {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.3);
}
.dashboard-todos-overlay .dashboard-todo-add .form-control::placeholder { color: rgba(255,255,255,.66); }
.dashboard-todo-scroll { max-height: 220px; overflow-y: auto; padding-right: .3rem; scrollbar-width: thin; }
.dashboard-todo-row {
    gap: .7rem;
    padding: .68rem .2rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: opacity .15s ease, transform .15s ease;
}
.dashboard-todo-row:last-child { border-bottom: 0; }
.dashboard-todo-row.is-complete { opacity: .58; }
.dashboard-todo-row.is-complete .dashboard-todo-text { text-decoration: line-through; }
.dashboard-todo-check { position: relative; flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem; cursor: pointer; }
.dashboard-todo-check input { position: absolute; opacity: 0; pointer-events: none; }
.dashboard-todo-check span[aria-hidden] {
    position: absolute;
    inset: 0;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    opacity: .62;
}
.dashboard-todo-check input:checked + span[aria-hidden] { background: currentColor; opacity: 1; }
.dashboard-todo-check input:checked + span[aria-hidden]::after {
    content: '';
    position: absolute;
    left: .38rem;
    top: .18rem;
    width: .35rem;
    height: .65rem;
    border: solid var(--bs-body-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.dashboard-todos-overlay .dashboard-todo-check input:checked + span[aria-hidden]::after { border-color: #233043; }
.dashboard-todo-content { min-width: 0; flex: 1; }
.dashboard-todo-text { overflow-wrap: anywhere; }
.dashboard-todo-overdue { margin-top: .12rem; font-size: .72rem; color: var(--bs-warning-text-emphasis); }
.dashboard-todos-overlay .dashboard-todo-overdue { color: #ffd889; }
.dashboard-todo-empty { padding: 1rem .25rem; text-align: center; opacity: .7; }
.dashboard-todo-error { margin-top: .6rem; font-size: .82rem; color: var(--bs-danger); }
.dashboard-todos-overlay .dashboard-todo-error { color: #ffb4b4; }
@media (max-width: 575.98px) {
    .dashboard-todo-header { align-items: flex-start; }
    .dashboard-todo-days .dashboard-todo-today { display: none; }
}

/* Flash-Meldungen liegen in der bildfüllenden Dashboardansicht über dem Inhalt,
   statt als eigenes Flex-Element links neben dem Hero Platz einzunehmen. */
.dashboard-without-numbers .app-flash-messages {
    position: fixed;
    z-index: 1080;
    top: calc(72px + 1rem);
    left: calc(var(--sidebar-width, 240px) + 1rem);
    right: 1rem;
    width: auto;
    max-width: 42rem;
    pointer-events: none;
}

.dashboard-without-numbers .app-flash-messages .alert {
    margin-bottom: .75rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .2);
    pointer-events: auto;
}

@media (min-width: 992px) {
    body.sidebar-collapsed.dashboard-without-numbers .app-flash-messages {
        left: calc(72px + 1rem);
    }
}

@media (max-width: 991.98px) {
    .dashboard-without-numbers .app-flash-messages {
        top: calc(72px + .75rem);
        left: .75rem;
        right: .75rem;
        max-width: none;
    }
}

/* Privatarchiv */
.privat-folder-list .list-group-item {
    min-width: 0;
}
.privat-file-name {
    max-width: 28rem;
}
.privat-ocr-snippet {
    max-width: 42rem;
    line-height: 1.35;
}
.privat-document-table td:first-child {
    min-width: 15rem;
    max-width: 34rem;
}
@media (max-width: 767.98px) {
    .privat-document-table {
        min-width: 760px;
    }
}

/* Privatarchiv – aufgeräumter Arbeitsbereich */
.privat-page {
    --privat-muted-border: rgba(33, 52, 43, .11);
    --privat-soft-bg: rgba(45, 94, 70, .045);
}

.privat-page-head {
    padding-bottom: .25rem;
}

.privat-head-actions .btn {
    white-space: nowrap;
}

.privat-status-row {
    min-height: 1.75rem;
}

.privat-drive-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.privat-status-dot {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--bs-success);
    box-shadow: 0 0 0 .18rem rgba(25, 135, 84, .1);
}

.privat-drive-status-warning {
    color: var(--bs-warning-text-emphasis);
}

.privat-privacy-note {
    position: relative;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.privat-privacy-note > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.privat-privacy-note > summary::-webkit-details-marker,
.privat-disclosure > summary::-webkit-details-marker,
.privat-upload-panel > summary::-webkit-details-marker {
    display: none;
}

.privat-privacy-note > summary::before {
    content: "ⓘ";
    margin-right: .3rem;
}

.privat-privacy-note-body {
    position: absolute;
    z-index: 20;
    top: calc(100% + .45rem);
    left: 0;
    width: min(34rem, calc(100vw - 3rem));
    padding: .75rem .9rem;
    border: 1px solid var(--privat-muted-border);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .09);
    line-height: 1.45;
}

.privat-workspace .dashboard-card {
    border-color: var(--privat-muted-border);
}

.privat-folder-card {
    overflow: visible;
}

.privat-folder-list {
    max-height: 31rem;
    overflow-y: auto;
}

.privat-folder-list .list-group-item {
    padding-top: .58rem;
    padding-bottom: .58rem;
    border-color: rgba(0, 0, 0, .055);
    font-size: .9rem;
}

.privat-folder-glyph {
    color: var(--bs-secondary-color);
    font-size: .75rem;
    transition: transform .15s ease;
}

.privat-folder-list .list-group-item.active .privat-folder-glyph {
    color: currentColor;
}

.privat-disclosure > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.privat-disclosure[open] > summary {
    background: var(--privat-soft-bg);
}

.privat-upload-panel {
    overflow: hidden;
}

.privat-upload-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--bs-body-bg);
}

.privat-upload-summary:hover {
    background: var(--privat-soft-bg);
}

.privat-upload-summary .privat-disclosure-state::after {
    content: "Öffnen";
}

.privat-upload-panel[open] .privat-disclosure-state::after {
    content: "Schließen";
}

.privat-search-header {
    border-bottom: 1px solid var(--privat-muted-border);
}

.privat-search-form {
    display: grid;
    gap: .65rem;
}

.privat-search-main {
    display: flex;
    gap: .5rem;
}

.privat-search-main .form-control {
    min-width: 0;
    border-color: rgba(33, 52, 43, .18);
}

.privat-search-main .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .1);
}

.privat-search-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem 1rem;
    min-height: 1.8rem;
    color: var(--bs-secondary-color);
}

.privat-year-filter {
    width: 5.5rem;
}

.privat-search-feedback {
    padding: .55rem .7rem;
    border-radius: .5rem;
    background: var(--privat-soft-bg);
}

.privat-drive-search-note {
    color: var(--bs-secondary-color);
}

.privat-document-table thead th {
    padding-top: .7rem;
    padding-bottom: .7rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
    background: rgba(0, 0, 0, .018);
    border-bottom-width: 1px;
}

.privat-document-table tbody td {
    padding-top: .8rem;
    padding-bottom: .8rem;
    border-color: rgba(0, 0, 0, .055);
    vertical-align: middle;
}

.privat-document-table tbody tr:hover td {
    background: var(--privat-soft-bg);
}

.privat-document-title-row {
    line-height: 1.25;
}

.privat-document-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .55rem;
}

.privat-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: .05rem .38rem;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 999px;
    background: rgba(0, 0, 0, .025);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.4;
}

.privat-meta-pill-success {
    color: var(--bs-success-text-emphasis);
    border-color: rgba(25, 135, 84, .16);
    background: rgba(25, 135, 84, .07);
}

.privat-meta-pill-danger {
    color: var(--bs-danger-text-emphasis);
    border-color: rgba(220, 53, 69, .16);
    background: rgba(220, 53, 69, .07);
}

.privat-mail-meta {
    display: inline-block;
    max-width: 20rem;
}

.privat-folder-cell {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.privat-tax-meta {
    max-width: 14rem;
    line-height: 1.3;
}

.privat-drive-button,
.privat-more-button {
    width: 2rem;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.privat-more-button {
    letter-spacing: -.06em;
}

@media (max-width: 767.98px) {
    .privat-page-head {
        margin-bottom: .75rem !important;
    }

    .privat-head-actions {
        width: 100%;
        justify-content: flex-start !important;
    }

    .privat-search-main {
        align-items: stretch;
    }

    .privat-search-main .form-control {
        font-size: 1rem;
    }

    .privat-search-main .btn {
        padding-left: .85rem !important;
        padding-right: .85rem !important;
    }

    .privat-document-table {
        min-width: 690px;
    }
}

/* Privatarchiv – mobile Kamera-Schnellablage */
.privat-mobile-capture {
    border: 1px solid var(--privat-muted-border);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .45rem 1.4rem rgba(0, 0, 0, .06);
    overflow: hidden;
}

.privat-mobile-capture-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem .85rem;
    background: var(--privat-soft-bg);
    border-bottom: 1px solid var(--privat-muted-border);
}

.privat-camera-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    border-radius: 50%;
    background: var(--bs-primary);
    font-size: 1.35rem;
    box-shadow: 0 .35rem .9rem rgba(var(--bs-primary-rgb), .22);
}

.privat-camera-badge .privat-icon {
    fill: currentColor;
}

.privat-camera-form {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.privat-camera-button {
    min-height: 4.6rem;
    border-radius: .85rem;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
}

.privat-camera-button-icon {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 1.55rem;
    fill: currentColor;
}

.privat-camera-preview {
    overflow: hidden;
    border: 1px solid var(--privat-muted-border);
    border-radius: .85rem;
    background: rgba(0, 0, 0, .025);
}

.privat-camera-preview img {
    display: block;
    width: 100%;
    max-height: 52vh;
    object-fit: contain;
    background: #111;
}

.privat-camera-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
}

.privat-camera-upload {
    min-height: 3.65rem;
    border-radius: .85rem;
    font-weight: 700;
}

.privat-camera-tax-check {
    padding: .7rem .8rem .7rem 2.35rem;
    border: 1px solid var(--privat-muted-border);
    border-radius: .75rem;
    background: var(--privat-soft-bg);
}

.privat-camera-tax-check .form-check-input {
    margin-top: .22rem;
}

.privat-mobile-browse {
    padding: 0 1rem 1rem;
    color: var(--bs-secondary-color);
}

.privat-mobile-browse > summary {
    cursor: pointer;
    font-size: .86rem;
    font-weight: 600;
    text-align: center;
    list-style-position: inside;
}

@media (max-width: 767.98px) {
    .privat-page-head > div:first-child p,
    .privat-status-row,
    .privat-head-actions,
    .privat-folder-card,
    .privat-upload-panel {
        display: none !important;
    }

    .privat-page-head {
        display: block !important;
        padding-bottom: 0;
    }

    .privat-page-head > div:first-child .text-uppercase {
        display: none;
    }

    .privat-page-head h1 {
        font-size: 1.15rem;
        margin-bottom: .15rem !important;
    }

    .privat-workspace > .col-12.col-xl-3 {
        display: none;
    }

    .privat-workspace > .col-12.col-xl-9 {
        width: 100%;
    }

    .privat-documents-card {
        margin-top: .35rem;
        display: none;
    }

    .privat-page.privat-mobile-show-archive .privat-documents-card {
        display: block;
    }

    .privat-search-header {
        padding: .8rem !important;
    }
}

/* Privatarchiv – Dropdown-Aktionsmenüs dürfen auf Desktop aus der Tabelle herausragen.
   Bootstrap .table-responsive setzt overflow-x:auto; dadurch wird ein Dropdown bei
   kurzen Tabellen an der Unterkante des Containers abgeschnitten. Auf Mobilgeräten
   bleibt das horizontale Scrollen unverändert erhalten. */
@media (min-width: 768px) {
    .privat-page .privat-documents-card,
    .privat-page .privat-documents-card > .table-responsive {
        overflow: visible;
    }

    /* Das Flow-Theme nutzt das Abschneiden für eine Deko-Fläche. Da die Karte für
       das Aktionsmenü sichtbar überlaufen muss, unterdrücken wir dort nur diese Deko. */
    [data-app-theme="flow"] .privat-page .privat-documents-card::after {
        display: none;
    }
}

/* Privatarchiv – Ordner-Hierarchie */
.privat-folder-list .privat-folder-root {
    font-weight: 600;
}

/* Die in Kontora angelegten Ordner liegen innerhalb von „Privat“.
   Die erste Ordnerebene beginnt deshalb sichtbar eingerückt; weitere
   Unterordner erhalten ihren zusätzlichen Einzug weiterhin aus Twig. */
.privat-folder-list .privat-folder-root + .list-group-item {
    border-top-color: var(--bs-border-color-translucent);
}

/* Privatarchiv – Ordner-Icons und Drag & Drop */
.privat-folder-icon {
    flex: 0 0 1.05rem;
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
    color: var(--bs-secondary-color);
}

.privat-folder-list .list-group-item.active .privat-folder-icon {
    color: currentColor;
}

.privat-drag-hint {
    white-space: nowrap;
}

.privat-folder-list .list-group-item.is-drop-ready:not(.active) {
    background: var(--bs-tertiary-bg);
}

.privat-folder-list .list-group-item.is-drop-target {
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 0 2px var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.privat-folder-list .list-group-item.is-drop-target .privat-folder-icon {
    color: currentColor;
}

.privat-folder-list .list-group-item.is-moving {
    opacity: .7;
}

.privat-document-draggable {
    cursor: grab;
    transition: opacity .12s ease;
}

.privat-document-draggable:active {
    cursor: grabbing;
}

.privat-document-draggable.is-dragging {
    opacity: .42;
}

.privat-document-draggable.is-moving {
    opacity: .28;
    pointer-events: none;
}

.privat-document-drag-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin-left: -.3rem;
    margin-right: .05rem;
    fill: currentColor;
    color: var(--bs-secondary-color);
    cursor: grab;
}

@media (max-width: 767.98px) {
    .privat-document-draggable,
    .privat-document-draggable:active {
        cursor: default;
    }
}

/* Privatarchiv – mehrseitige mobile Kamera-Ablage */
.privat-camera-pages-wrap {
    border: 1px solid var(--privat-muted-border);
    border-radius: .85rem;
    background: rgba(0, 0, 0, .018);
    padding: .75rem;
}

.privat-camera-pages-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .2rem .75rem;
    margin-bottom: .65rem;
}

.privat-camera-pages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.privat-camera-page {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--privat-muted-border);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .15rem .45rem rgba(0, 0, 0, .045);
}

.privat-camera-page > img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #111;
}

.privat-camera-page-footer {
    padding: .5rem;
}

.privat-camera-page-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .35rem;
    margin-bottom: .45rem;
    font-size: .78rem;
}

.privat-camera-page-info span {
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.privat-camera-page-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.privat-camera-page-move {
    width: 2rem;
    min-height: 2rem;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.privat-camera-page-move svg {
    fill: currentColor;
}

.privat-camera-page-remove {
    margin-left: auto;
    min-height: 2rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
    font-size: .72rem;
}

@media (max-width: 390px) {
    .privat-camera-pages {
        grid-template-columns: 1fr;
    }

    .privat-camera-page > img {
        max-height: 45vh;
        object-fit: contain;
    }
}

/* Private Steuer-Checkliste: kompakte Arbeitsansicht */
.checklist-overview-card .progress.checklist-progress {
    height: .4rem;
}

.checklist-copy-year {
    position: relative;
}

.checklist-copy-year > summary,
.checklist-edit-menu > summary,
.checklist-add-card > summary {
    list-style: none;
    cursor: pointer;
}

.checklist-copy-year > summary::-webkit-details-marker,
.checklist-edit-menu > summary::-webkit-details-marker,
.checklist-add-card > summary::-webkit-details-marker {
    display: none;
}

.checklist-popover-card {
    position: absolute;
    right: 0;
    z-index: 1060;
    width: min(92vw, 390px);
}

.checklist-card .card-header {
    min-height: 2.6rem;
}

.checklist-item {
    padding: .7rem .8rem;
}

.checklist-item__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem .8rem;
    align-items: start;
}

.checklist-item__summary,
.checklist-item__documents-column {
    min-width: 0;
}

.checklist-item__summary-body {
    min-width: 0;
}

.checklist-item__title-wrap {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    min-width: 0;
}

.checklist-item__title-wrap .min-w-0 {
    min-width: 0;
}

.checklist-status {
    min-width: 4.7rem;
    text-align: center;
    margin-top: .05rem;
}

.checklist-info-text {
    max-width: 70ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: .15rem;
}

.checklist-item__summary-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
}

.checklist-icon-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.checklist-edit-menu {
    position: relative;
}

.checklist-edit-card {
    z-index: 1060;
    width: min(92vw, 430px);
}

.checklist-linked-section {
    margin-top: 0;
    padding-left: 0;
}

.checklist-linked-empty {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

.checklist-linked-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.checklist-file-icon {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
}

.checklist-linked-document {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem .5rem;
    align-items: center;
    min-width: 0;
    padding: .38rem .45rem .38rem .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-secondary-bg));
}

.checklist-linked-document__main,
.checklist-search-result__main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    flex: 1 1 auto;
}

.checklist-linked-document__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.checklist-linked-document__title {
    min-width: 0;
}

.checklist-linked-document__meta {
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checklist-linked-document__actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
}

.checklist-search-panel {
    margin-top: .55rem;
    padding: .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
}

.checklist-search-results .list-group-item {
    padding: .4rem .5rem;
}

.checklist-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.checklist-add-card {
    overflow: visible;
}

.checklist-add-card > summary {
    border-bottom: 0;
}

.checklist-add-card[open] > summary {
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

@media (min-width: 992px) {
    .checklist-item__layout {
        grid-template-columns: minmax(18rem, 1fr) minmax(24rem, 1.45fr);
    }

    .checklist-item__documents-column {
        align-self: center;
    }

    .checklist-search-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .checklist-search-result,
    .checklist-linked-document {
        align-items: flex-start;
    }

    .checklist-linked-document {
        grid-template-columns: minmax(0, 1fr);
    }

    .checklist-search-result {
        flex-direction: column;
    }

    .checklist-linked-document__actions,
    .checklist-search-result > .d-flex {
        flex-wrap: wrap;
    }

    .checklist-popover-card {
        left: 0;
        right: auto;
    }
}

/* Privatarchiv – ausgewählten Ordner umbenennen/löschen */
.privat-folder-manage {
    position: relative;
}

.privat-folder-manage > summary {
    list-style: none;
    cursor: pointer;
}

.privat-folder-manage > summary::-webkit-details-marker {
    display: none;
}

.privat-folder-manage-toggle {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.privat-folder-manage-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1070;
    width: min(22rem, calc(100vw - 2rem));
}

@media (max-width: 575.98px) {
    .privat-folder-manage-panel {
        right: -0.25rem;
        width: min(20rem, calc(100vw - 2rem));
    }
}

/* Choice-Panels an dunkle Themes anpassen.
   Die Basisklasse verwendet bewusst #fff für helle Themes; Flow/Dark brauchen
   deshalb eine explizite themenabhängige Oberfläche. */
[data-app-theme="flow"] .choice-panel .form-check {
    color: #f5f1fb;
    background-color: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .12);
}

[data-app-theme="flow"] .choice-panel .form-check:hover {
    background-color: rgba(255, 255, 255, .07);
    border-color: rgba(208, 92, 255, .35);
}

[data-app-theme="dark"] .choice-panel .form-check {
    color: #edf3fb;
    background-color: #202a36;
    border-color: #3a4859;
}

[data-app-theme="dark"] .choice-panel .form-check:hover {
    background-color: #273240;
    border-color: #50647a;
}

[data-app-theme="flow"] .choice-panel .form-check:has(.form-check-input:checked) {
    background-color: rgba(var(--bs-primary-rgb), .10);
    border-color: rgba(var(--bs-primary-rgb), .48);
}

[data-app-theme="dark"] .choice-panel .form-check:has(.form-check-input:checked) {
    background-color: color-mix(in srgb, var(--bs-primary) 10%, #202a36);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, #3a4859);
}

/* Eingangsrechnungen – mobile Kamera-Schnellerfassung */
.eingangsrechnung-mobile-capture {
    --privat-muted-border: var(--bs-border-color);
    --privat-soft-bg: var(--bs-tertiary-bg);
}

.eingangsrechnung-mobile-capture > .d-flex:last-child {
    padding: 0 1rem 1rem;
}

/* Rechnungsnummernprüfung */
.invoice-sequence-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    max-width: 100%;
    color: var(--bs-secondary-color);
    font-size: .82rem;
    text-decoration: none;
}

.invoice-sequence-status:hover {
    color: var(--bs-body-color);
}

.invoice-sequence-status__dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--bs-success);
    box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--bs-success) 15%, transparent);
    flex: 0 0 auto;
}

.invoice-sequence-status__link {
    color: var(--bs-link-color);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.invoice-sequence-alert {
    width: fit-content;
    max-width: 100%;
}

.invoice-sequence-alert:hover {
    color: var(--bs-danger-text-emphasis);
}

.invoice-sequence-gap-badge {
    font-size: .82rem;
    font-weight: 600;
    padding: .45rem .65rem;
}

.invoice-sequence-details-summary {
    list-style: none;
    cursor: pointer;
}

.invoice-sequence-details-summary::-webkit-details-marker {
    display: none;
}

@media (max-width: 575.98px) {
    .invoice-sequence-status,
    .invoice-sequence-alert {
        width: 100%;
    }
}

/* Rechnungsübersicht – Nummernprüfung platzsparend neben Firma */
.invoice-company-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    min-width: 0;
}

.invoice-company-meta__separator {
    width: 1px;
    height: .95rem;
    background: var(--bs-border-color);
    flex: 0 0 auto;
}

.invoice-sequence-inline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.invoice-sequence-inline:hover {
    color: var(--bs-body-color);
}

.invoice-sequence-inline--danger {
    color: var(--bs-danger-text-emphasis);
    font-weight: 500;
}

.invoice-sequence-inline--danger:hover {
    color: var(--bs-danger);
}

@media (max-width: 575.98px) {
    .invoice-company-meta__separator {
        display: none;
    }

    .invoice-sequence-inline {
        flex-basis: 100%;
    }
}

.invoice-sequence-found-list {
    max-height: 34rem;
    overflow: auto;
}

.invoice-sequence-found-list thead {
    z-index: 2;
}

/* Rechnungsnummernprüfung – kompakter Status in der Rechnungsübersicht */
.invoice-company-meta .invoice-sequence-inline {
    font-size: .82rem;
    line-height: 1.2;
}

.invoice-company-meta .invoice-sequence-inline:hover {
    opacity: .82;
}

.invoice-sequence-found-list {
    max-height: none;
    overflow: visible;
}

/* Warenwirtschaft: mobile Inventur */
.inventory-product-cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    min-width: 12rem;
}

.inventory-start-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.inventory-modal-dialog {
    --bs-modal-width: 580px;
}

.inventory-count-body {
    padding-bottom: 1.25rem;
}

.inventory-count-input {
    min-height: 4rem;
    font-size: 2rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.inventory-add-button {
    min-width: 8.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.inventory-count-tally {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: .8rem;
    background: var(--bs-tertiary-bg);
}

.inventory-count-empty {
    padding: 1rem .5rem;
    text-align: center;
    font-size: .9rem;
}

.inventory-count-list {
    display: grid;
    gap: .4rem;
}

.inventory-count-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    min-height: 2.8rem;
    padding: .35rem .4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

.inventory-count-row__number {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: .78rem;
    font-weight: 700;
}

.inventory-count-row__value {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.inventory-count-row__remove {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inventory-count-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
}

.inventory-count-total strong {
    font-size: 2rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

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

.inventory-summary-card {
    padding: .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-tertiary-bg);
    min-width: 0;
}

.inventory-summary-card span {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .78rem;
    margin-bottom: .25rem;
}

.inventory-summary-card strong {
    display: block;
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.inventory-summary-parts {
    padding: .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .inventory-start-btn {
        min-height: 2.25rem;
    }

    .inventory-count-body {
        padding: 1rem;
    }

    .inventory-count-input-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 4.25rem;
        width: 100%;
        min-width: 0;
    }

    /* Bootstrap setzt Form-Controls in .input-group auf width: 1%. Das kann
       Safari/iOS innerhalb eines CSS-Grids tatsächlich auf nahezu 1% Breite
       schrumpfen lassen. Im Inventur-Grid muss das Feld deshalb explizit die
       komplette erste Grid-Spalte belegen. */
    .inventory-count-input-group > .form-control {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .inventory-count-input-group > .form-control,
    .inventory-count-input-group > .btn {
        border-radius: var(--bs-border-radius-lg);
    }

    .inventory-count-input-group > .form-control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .inventory-count-input-group > .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .inventory-add-button {
        width: 4.25rem;
        min-width: 4.25rem;
    }

    .inventory-add-button span {
        display: none;
    }

    .inventory-count-input {
        min-height: 4.4rem;
        font-size: 2.25rem;
    }

    .inventory-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .inventory-summary-card--difference {
        grid-column: 1 / -1;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }

    .inventory-summary-card--difference span {
        margin-bottom: 0;
    }

    .inventory-modal-footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .inventory-modal-footer .btn {
        min-height: 2.75rem;
    }
}

/* Warenwirtschaft: kompakte Aktionsicons vor dem Produktnamen */
.inventory-table-actions {
    width: 5.25rem;
    min-width: 5.25rem;
    padding-right: .35rem !important;
}

.inventory-row-actions {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.inventory-icon-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .inventory-table-actions {
        width: 5rem;
        min-width: 5rem;
    }

    .inventory-icon-btn {
        width: 2.1rem;
        height: 2.1rem;
    }
}

/* Kompakter Firmen- und Benutzerwechsel im Header */
.app-header__start {
    flex: 1 1 auto;
    overflow: hidden;
}

.app-header__company-title {
    min-width: 0;
    max-width: min(42rem, 54vw);
}

.app-header-icon-btn {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
}

.app-company-menu {
    width: min(22rem, calc(100vw - 1.5rem));
    max-height: min(70vh, 34rem);
    overflow-y: auto;
}

.company-switch-menu-form .dropdown-item {
    min-height: 2.5rem;
}

.company-switch-menu-form .dropdown-item.active {
    background: var(--bs-primary);
    color: #fff;
}

.app-user-menu {
    width: min(20rem, calc(100vw - 1.5rem));
}

.app-header-company-badge {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .app-header {
        min-height: 60px;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
        flex-wrap: nowrap;
    }

    /* Der linke Headerbereich darf nur den Platz verwenden, der nach den
       festen Aktionsicons übrig bleibt. So können die Icons auf iOS nicht
       mehr in eine zweite Zeile gedrückt werden. */
    .app-header__start {
        width: 0;
        min-width: 0;
        flex: 1 1 0;
    }

    .app-header__company-title {
        max-width: min(8rem, 38vw);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .9rem;
    }

    .app-header__actions {
        gap: .4rem !important;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .app-header-icon-btn {
        width: 2.25rem;
        height: 2.25rem;
    }

    .app-company-menu,
    .app-user-menu {
        max-width: calc(100vw - 1rem);
    }
}

/* Kontakt: mehrere gespeicherte Adressen */
.contact-address-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 34rem;
    overflow-y: auto;
}

.contact-address-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .65rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

.contact-address-row__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
}

.contact-address-row__actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.contact-address-picker-results {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.contact-address-picker-result {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: left;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.contact-address-picker-result:hover,
.contact-address-picker-result:focus-visible {
    border-color: var(--bs-primary);
    background: var(--bs-tertiary-bg);
    outline: none;
}

.contact-address-picker-result__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
}

@media (max-width: 575.98px) {
    .contact-address-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .contact-address-row__actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .contact-address-list {
        max-height: none;
    }
}


/* Rechnungsübersicht: robustes Drei-Punkte-Aktionsmenü.
   Das Menü wird per Stimulus geöffnet und nutzt nur das Bootstrap-CSS. */
.invoice-action-dropdown .dropdown-menu {
    top: calc(100% + .25rem);
    right: 0;
    left: auto;
    z-index: 1080;
}

/* Rechnungsdetail: klare Aktionshierarchie statt einer langen Button-Reihe. */
.invoice-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.invoice-detail-heading__title {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.invoice-detail-back {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.invoice-detail-back:hover,
.invoice-detail-back:focus-visible {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
}

.invoice-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.invoice-detail-actions form {
    margin: 0;
}

.invoice-detail-actions__primary {
    box-shadow: 0 .35rem .9rem color-mix(in srgb, var(--bs-primary) 18%, transparent);
}

.invoice-detail-more-menu {
    min-width: 15.5rem;
    padding: .45rem;
    border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .12);
}

.invoice-detail-more-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .7rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
}

.invoice-detail-more-menu .dropdown-item i {
    width: 1.1rem;
    flex: 0 0 auto;
    text-align: center;
}

@media (max-width: 767.98px) {
    .invoice-detail-heading {
        flex-direction: column;
        gap: 1rem;
    }

    .invoice-detail-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .invoice-detail-actions__primary {
        white-space: normal;
        text-align: left;
    }
}

@media (min-width: 768px) {
    .rechnung-list-card,
    .rechnung-list-card > .rechnung-table-responsive {
        overflow: visible !important;
    }
}

/* Rechnungsversand: Vorschau des konkret versendeten Mailtexts. */
.invoice-email-preview__body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 12rem;
    overflow-y: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color);
    line-height: 1.55;
}

@media (max-width: 575.98px) {
    .invoice-email-preview__body {
        max-height: 16rem;
    }
}

/* Rechnungsversand: Vorlage vor dem Versand individuell bearbeiten. */
.invoice-email-edit-body {
    min-height: 12rem;
    resize: vertical;
    line-height: 1.45;
}

@media (max-width: 575.98px) {
    .invoice-email-edit-body {
        min-height: 10rem;
    }
}


/* Rechnungsversand: Form innerhalb des scrollbaren Bootstrap-Modals ebenfalls
   als Flex-Container begrenzen, damit der Footer immer erreichbar bleibt. */
#invoiceEmailModal .invoice-email-modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 3.5rem);
    max-height: calc(100dvh - 3.5rem);
    overflow: hidden;
}

#invoiceEmailModal .invoice-email-modal-form > .modal-header,
#invoiceEmailModal .invoice-email-modal-form > .modal-footer {
    flex: 0 0 auto;
}

#invoiceEmailModal .invoice-email-modal-form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 575.98px) {
    #invoiceEmailModal .invoice-email-modal-form {
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
    }
}