:root {
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-muted: #eef1f1;
    --text: #152326;
    --text-muted: #5c6a6c;

    --primary: #1f6f73;
    --primary-dark: #0f3d3e;

    --border: #dce3e4;

    --sidebar-width: 250px;
    --radius: 14px;
}

* {
    box-sizing: border-box;
}

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

body {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--bg);
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--primary-dark);
}

.skip-link {
    position: fixed;
    z-index: 10000;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    color: #ffffff;
    background: var(--primary-dark);
    font-size: 14px;
    font-weight: 750;
    transform: translateY(calc(-100% - 24px));
    transition: transform 0.16s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

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

.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;

    background: var(--primary-dark);
    color: white;

    display: flex;
    flex-direction: column;

    position: fixed;
    inset: 0 auto 0 0;
}

.brand {
    padding: 28px 24px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-name {
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -0.7px;
}

.brand-name span {
    opacity: 0.7;
}

.brand-subtitle {
    margin-top: 7px;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.58);
}

.navigation {
    padding: 20px 14px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 11px 14px;
    margin-bottom: 4px;

    border-radius: 9px;

    color: rgba(255, 255, 255, 0.74);
    font-size: 14px;
    font-weight: 550;
}

.nav-item span {
    width: 20px;
    text-align: center;
    opacity: 0.8;
}

.nav-item.active {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.nav-item.disabled {
    opacity: 0.48;
    cursor: default;
}

.sidebar-bottom {
    margin-top: auto;
    padding: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.user-mini {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: var(--primary);

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



.user-mini strong {
    font-size: 13px;
}

.user-mini small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    text-transform: uppercase;
}

.logout-form {
    flex-shrink: 0;
    margin: 0;
}

.logout-link {
    display: block;
    margin-top: 16px;
    padding: 0;

    border: 0;

    background: transparent;

    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);

    cursor: pointer;
}

.main-content {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);

    padding: 34px 48px 60px;
}

.main-content > * {
    width: min(1400px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 38px;
    padding: 0 6px;
}

.eyebrow {
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0;
    margin-top: 5px;

    font-size: 30px;
    letter-spacing: -0.8px;
}

h2 {
    margin-top: 5px;
    margin-bottom: 0;

    font-size: 21px;
    letter-spacing: -0.3px;
}

.server-status {
    display: flex;
    align-items: center;
    gap: 8px;

    background: var(--surface);
    border: 1px solid var(--border);

    padding: 8px 12px;
    border-radius: 999px;

    color: var(--text-muted);
    font-size: 12px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #47a66b;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 34px;
}

.summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    padding: 20px 22px;

    box-shadow: 0 3px 12px rgba(15, 61, 62, 0.04);
}

.accent-card {
    background: var(--primary-dark);
    color: white;
    border-color: var(--primary-dark);
}

.summary-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.accent-card .summary-label {
    color: rgba(255, 255, 255, 0.6);
}

.summary-value {
    margin-top: 8px;

    font-size: 31px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: -1px;
}

.dashboard-section {
    margin-top: 42px;
    margin-bottom: 42px;
}

.section-header {
    margin-bottom: 15px;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.status-card {
    background: var(--surface);
    border: 1px solid var(--border);

    border-radius: 12px;
    padding: 16px 18px;

    min-height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.status-card-name {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.status-card-count {
    margin-top: 10px;
    font-size: 24px;
    font-weight: 750;
}

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.repair-table {
    width: 100%;
    border-collapse: collapse;
}

.repair-table th {
    padding: 13px 16px;

    background: var(--surface-muted);

    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.repair-table td {
    padding: 15px 16px;

    border-top: 1px solid var(--border);

    font-size: 13px;
}

.repair-table tr:hover td {
    background: #fafcfc;
}

.status-pill {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    background: var(--surface-muted);
    color: var(--primary-dark);

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

.express-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 8px;
    padding: 5px 9px;
    border-radius: 6px;
    background: #a71d2a;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.2;
    white-space: nowrap;
}

.repair-title-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.repair-title-meta .express-badge {
    margin-left: 0;
}

.express-badge-prominent {
    padding: 7px 12px;
    font-size: 14px;
}

.empty-icon {
    margin-bottom: 12px;
    color: var(--primary);
    font-size: 36px;
}

@media (max-width: 1100px) {
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .sidebar {
        position: static;
        width: 100%;
        min-height: auto;
    }

    .app-shell {
        display: block;
    }

    .main-content {
        width: 100%;
        margin-left: 0;
        padding: 25px 18px 40px;
    }

    .navigation {
        display: flex;
        overflow-x: auto;
        gap: 4px;
    }

    .nav-item {
        white-space: nowrap;
    }

    .sidebar-bottom {
        display: none;
    }

    .topbar {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column;
    }

    .summary-grid,
    .status-grid {
        grid-template-columns: 1fr 1fr;
    }

    .table-wrap {
        overflow-x: auto;
    }

    .repair-table {
        min-width: 650px;
    }
}

@media (max-width: 500px) {
    .summary-grid,
    .status-grid {
        grid-template-columns: 1fr;
    }
}

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

.search-form {
    display: flex;
    gap: 8px;
    flex: 1;
}

.search-form input {
    width: min(500px, 100%);
}

button,
input,
select,
textarea {
    font: inherit;
}

input,
select,
textarea {
    width: 100%;
    padding: 10px 12px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: white;
    color: var(--text);

    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(31, 111, 115, 0.10);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 15px;

    border-radius: 9px;
    border: 1px solid transparent;

    font-size: 13px;
    font-weight: 650;

    cursor: pointer;
    white-space: nowrap;
}

.button.primary {
    background: var(--primary);
    color: white;
}

.button.primary:hover {
    background: var(--primary-dark);
}

.button.secondary {
    background: white;
    color: var(--primary-dark);
    border-color: var(--border);
}

.button.secondary:hover {
    background: var(--surface-muted);
}

.table-link {
    color: var(--primary);
}

.table-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.table-sub {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
}

.form-card {
    max-width: 950px;

    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);

    padding: 32px;
}

.form-section {
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.form-section:last-of-type {
    margin-bottom: 0;
    border-bottom: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

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

.form-field label {
    font-size: 12px;
    font-weight: 650;
    color: var(--text-muted);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.form-error {
    margin-bottom: 20px;
    padding: 12px 14px;

    border-radius: 9px;

    background: #fff1f1;
    color: #9a2c2c;

    font-size: 13px;
}

.input-with-suffix {
    display: flex;
    align-items: center;
}

.input-with-suffix input {
    border-radius: 9px 0 0 9px;
}

.input-with-suffix span {
    padding: 10px 13px;

    border: 1px solid var(--border);
    border-left: 0;

    border-radius: 0 9px 9px 0;

    background: var(--surface-muted);
    color: var(--text-muted);
}

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 30px;
    padding: 0 6px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 34px;
}

.detail-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.detail-list {
    margin: 18px 0 0;
}

.detail-list dt {
    margin-top: 13px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-list dt:first-child {
    margin-top: 0;
}

.detail-list dd {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

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

@media (max-width: 650px) {
    .page-actions,
    .detail-header {
        align-items: stretch;
        flex-direction: column;
    }

    .search-form {
        width: 100%;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field.form-wide {
        grid-column: auto;
    }
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--text);
    font-size: 13px;
    font-weight: 550;

    cursor: pointer;
}

.checkbox-label input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--primary);
}

.field-help {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.partner-field {
    justify-content: flex-end;
    padding-bottom: 2px;
}

.shipping-fields-hidden {
    display: none;
}

.business-section {
    display: none;
}

body.customer-business .business-section {
    display: block;
}

body:not(.customer-business) .business-only {
    display: none;
}

.prose-block {
    margin-top: 14px;
    padding: 15px;

    background: var(--surface-muted);
    border-radius: 9px;

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

    white-space: pre-wrap;
}

.detail-card h3 {
    margin-top: 25px;
    margin-bottom: 0;

    font-size: 14px;
}

.timeline {
    display: flex;
    flex-direction: column;
}

.timeline-item {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 20px;

    padding: 18px 0;

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

.timeline-item:last-child {
    border-bottom: 0;
}

.timeline-date {
    color: var(--text-muted);
    font-size: 12px;
}

.timeline-type {
    margin-bottom: 5px;

    color: var(--primary);
    font-size: 11px;
    font-weight: 700;

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

.timeline-text {
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 600px) {

    .timeline-item {
        grid-template-columns: 1fr;
        gap: 5px;
    }

}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.detail-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 650px) {

    .detail-header-actions {
        width: 100%;
        flex-direction: column;
    }

    .detail-header-actions .button {
        width: 100%;
    }

}

.status-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
}

.status-form select {
    width: min(400px, 100%);
}

.delivery-form {
    margin-top: 14px;
}

.delivery-checklist {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: white;
}

.delivery-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.delivery-item:last-child {
    border-bottom: 0;
}

.delivery-item-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.delivery-label {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 190px;

    font-size: 13px;
    font-weight: 550;

    cursor: pointer;
}

.delivery-label input {
    width: 17px;
    height: 17px;
    margin: 0;

    accent-color: var(--primary);
}

.delivery-note-input {
    flex: 1;

    padding: 8px 10px;

    border: 1px solid var(--border);
    border-radius: 7px;

    font-size: 12px;
}

.delivery-note-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(31, 111, 115, 0.10);
}

.delivery-actions {
    margin-top: 14px;

    display: flex;
    justify-content: flex-end;
}
@media (max-width: 650px) {

    .delivery-item-main {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .delivery-label {
        min-width: 0;
    }

    .delivery-note-input {
        width: 100%;
    }

}

.entry-form-card {
    margin-top: 0;
    margin-bottom: 24px;

    padding: 22px;

    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.entry-form-card h3 {
    margin-top: 5px;
    margin-bottom: 0;

    font-size: 17px;
}

.entry-form {
    margin-top: 20px;
}

.entry-form .form-actions {
    margin-top: 26px;
}

.timeline-type {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border-radius: 999px;

    background: var(--surface-muted);
    color: var(--primary);

    font-size: 10px;
    font-weight: 750;

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

.part-form {
    margin-top: 0;
}

.part-form .form-actions {
    margin-top: 22px;
}

.parts-list {
    margin-top: 14px;

    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.part-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;

    padding: 15px 18px;

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

.part-row:last-child {
    border-bottom: 0;
}

.part-name {
    font-size: 14px;
    font-weight: 700;
}

.part-meta {
    margin-top: 4px;

    color: var(--text-muted);
    font-size: 11px;
}

.part-quantity {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 650;
}

.part-link {
    padding: 7px 10px;
    font-size: 11px;
}

@media (max-width: 650px) {

    .part-row {
        grid-template-columns: 1fr auto;
    }

    .part-link {
        grid-column: 1 / -1;
        width: 100%;
    }

}
.timeline-user {
    color: var(--primary);
    font-weight: 650;
}
.attachment-form {
    margin-top: 0;
}

.attachment-form .form-actions {
    margin-top: 22px;
}

.attachment-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin-top: 16px;
}

.attachment-card {
    overflow: hidden;

    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

.attachment-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 24px rgba(15, 61, 62, 0.10);
}

.attachment-card img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 3;

    object-fit: cover;

    background: var(--surface-muted);
}

.attachment-info {
    padding: 11px 12px;
}

.attachment-category {
    color: var(--primary);

    font-size: 10px;
    font-weight: 750;

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

.attachment-name {
    margin-top: 4px;

    overflow: hidden;

    color: var(--text);
    font-size: 12px;
    font-weight: 650;

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

.attachment-date {
    margin-top: 4px;

    color: var(--text-muted);
    font-size: 10px;
}

@media (max-width: 1100px) {

    .attachment-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 700px) {

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

}

@media (max-width: 450px) {

    .attachment-gallery {
        grid-template-columns: 1fr;
    }

}
.quality-form {
    margin-top: 0;
}

.quality-list {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.quality-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.quality-item:last-child {
    border-bottom: 0;
}

.quality-main {
    display: grid;
    grid-template-columns: 1fr 160px;
    align-items: center;
    gap: 15px;
}

.quality-name {
    font-size: 13px;
    font-weight: 600;
}

.quality-result {
    width: 100%;
}

.quality-note {
    margin-top: 9px;
    font-size: 12px;
}

.quality-meta {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 10px;
}

.quality-summary {
    display: flex;
    justify-content: flex-end;

    margin-top: 13px;

    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
}

.quality-form .form-actions {
    margin-top: 22px;
}

@media (max-width: 650px) {

    .quality-main {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}
.quality-result {
    font-weight: 650;
}

.quality-status-ok {
    border-color: var(--primary);
    color: var(--primary-dark);
    background: rgba(31, 111, 115, 0.08);
}

.quality-status-failed {
    border-color: #b64b4b;
    color: #8b2f2f;
    background: #fff1f1;
}

.quality-status-not_checked {
    border-color: var(--border);
    color: var(--text-muted);
    background: var(--surface-muted);
}

.quality-status-not_applicable {
    border-color: #c9d3d5;
    color: #52666a;
    background: #f2f5f5;
}

.quality-meta {
    color: var(--text-muted);
    font-size: 10px;
}
.qc-overview {
    margin: 0 0 18px;
}

.qc-badge {
    display: inline-flex;
    align-items: center;

    padding: 7px 11px;

    border-radius: 999px;

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

    letter-spacing: 0.02em;
}

.qc-passed {
    background: rgba(31, 111, 115, 0.10);
    color: var(--primary-dark);
}

.qc-pending {
    background: var(--surface-muted);
    color: var(--text-muted);
}

.qc-failed {
    background: #fff1f1;
    color: #8b2f2f;
}
.repair-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;

    position: sticky;
    top: 12px;
    z-index: 30;

    margin: 30px 0 26px;
    padding: 4px;

    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow:
        0 8px 24px rgba(15, 61, 62, 0.08);
}

.repair-tab {
    min-width: 0;
    min-height: 44px;

    padding: 9px 16px;

    border: 1px solid transparent;
    border-radius: 9px;

    background: transparent;

    color: var(--text-muted);

    font: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.repair-tab:not(.active):hover {
    background: #f5fafa;
    border-color: #d8e6e7;

    color: var(--primary-dark);

    transform: translateY(-1px);
}

.repair-tab.active {
    background: var(--primary-dark);
    border-color: var(--primary-dark);

    color: #ffffff;

    box-shadow:
        0 4px 12px rgba(15, 61, 62, 0.16);
}

.repair-tab:focus-visible {
    outline: 3px solid rgba(31, 111, 115, 0.22);
    outline-offset: 2px;
}

.repair-tab-panel {
    display: none;
}

.repair-tab-panel.active {
    display: block;
}

.tab-placeholder {
    padding: 32px;

    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.tab-placeholder h2 {
    margin-top: 6px;
}

.tab-placeholder p {
    margin-top: 12px;

    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 650px) {

    .repair-tabs {
        display: flex;

        margin-left: 0;
        margin-right: 0;

        overflow-x: auto;

        scrollbar-width: thin;
    }

    .repair-tab {
        flex: 0 0 auto;

        min-width: 145px;
    }

}

.commercial-summary {
    max-width: 700px;
}

.commercial-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 11px 0;

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

    font-size: 13px;
}

.commercial-row strong {
    font-weight: 650;
}

.commercial-negative {
    color: var(--primary);
}

.commercial-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 18px;

    font-size: 17px;
    font-weight: 750;
}

.commercial-total strong {
    color: var(--primary);
    font-size: 20px;
}

.commercial-secondary {
    margin-top: 18px;
}

.commercial-status {
    display: inline-flex;

    margin-top: 12px;
    padding: 7px 10px;

    background: var(--surface-muted);
    border-radius: 999px;

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

.commercial-status::before {
    content: "";

    width: 7px;
    height: 7px;

    margin-right: 7px;

    border-radius: 999px;

    background: currentColor;
}

.commercial-status-open {
    background: #fff8e6;
    color: #8a6415;
}

.commercial-status-paid {
    background: rgba(31, 111, 115, 0.10);
    color: var(--primary-dark);
}

.commercial-status-overdue {
    background: #fff1f1;
    color: #8b2f2f;
}

.commercial-status-cancelled {
    background: #f0f2f2;
    color: #687273;
}

.commercial-status-unknown {
    background: var(--surface-muted);
    color: var(--text-muted);
}
.quote-section {
    margin-top: 28px;
}

.quote-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    margin-bottom: 14px;
}

.quote-header h3 {
    margin-top: 5px;
}

.quote-list {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;

    background: white;
}

.quote-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 16px;

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

.quote-row:last-child {
    border-bottom: 0;
}

.quote-meta {
    margin-top: 4px;

    color: var(--text-muted);
    font-size: 10px;
}

.quote-amount {
    color: var(--primary);

    font-size: 15px;
    font-weight: 750;
}

.quote-empty {
    padding: 16px;

    background: var(--surface-muted);
    border-radius: 10px;

    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 650px) {

    .quote-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .quote-header form,
    .quote-header .button {
        width: 100%;
    }

    .quote-row {
        align-items: flex-start;
    }

}
.commercial-form {
    margin-top: 18px;
}

.commercial-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.commercial-readonly {
    min-height: 40px;

    display: flex;
    align-items: center;

    padding: 9px 11px;

    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 7px;

    color: var(--primary);
    font-size: 14px;
    font-weight: 650;
}

#tab-commercial .commercial-readonly-block {
    display: block;
    line-height: 1.55;
}

.commercial-current-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 28px;
    padding-top: 20px;

    border-top: 1px solid var(--border);

    font-size: 16px;
    font-weight: 700;
}

.commercial-form .form-actions {
    margin-top: 22px;
}

.commercial-current-total strong {
    color: var(--primary);
    font-size: 21px;
}

.commercial-payment-card,
.commercial-parts-card {
    margin-top: 18px;
}

@media (max-width: 700px) {

    .commercial-edit-grid {
        grid-template-columns: 1fr;
    }

}
.quote-main {
    min-width: 0;
}

.quote-status {
    min-width: 150px;
}

.quote-status form {
    margin: 0;
}

.quote-status-select {
    width: 100%;

    padding: 7px 9px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: white;

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

.quote-status-select:focus {
    border-color: var(--primary);
}

@media (max-width: 650px) {

    .quote-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .quote-status {
        width: 100%;
    }

}

/* Commercial workflow redesign */

#tab-commercial > .section-header {
    margin-bottom: 22px;
}

#tab-commercial .commercial-offer-card,
#tab-commercial .commercial-invoice-card {
    padding: 28px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(15, 61, 62, 0.055);
}

#tab-commercial .commercial-offer-card {
    border-top: 3px solid var(--primary);
}

#tab-commercial .commercial-invoice-card {
    margin-top: 34px;

    border-top: 3px solid var(--primary-dark);
}

#tab-commercial .commercial-offer-card > .eyebrow,
#tab-commercial .commercial-invoice-card > .eyebrow,
#tab-commercial .commercial-completion-card > .eyebrow {
    color: var(--primary);
    font-weight: 750;
}

#tab-commercial .commercial-quote-card {
    margin-top: 20px;
    padding: 22px 24px;

    background: #f8fbfb;
    border: 1px solid #dce8e8;
    border-radius: 12px;
}

#tab-commercial .commercial-quote-card .quote-header {
    margin-bottom: 16px;
}

#tab-commercial .commercial-payment-card {
    display: grid;

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

    grid-template-areas:
        "eyebrow status"
        "title status";

    align-items: center;
    column-gap: 24px;

    margin-top: 26px;
    padding: 18px 20px;

    background: #f8fbfb;
    border: 1px solid #dce8e8;
    border-left: 4px solid var(--primary);
    border-radius: 10px;
}

#tab-commercial .commercial-payment-card > .eyebrow {
    grid-area: eyebrow;

    margin: 0;
}

#tab-commercial .commercial-payment-card > h3 {
    grid-area: title;

    margin: 4px 0 0;
}

#tab-commercial .commercial-payment-card > .commercial-status {
    grid-area: status;

    margin: 0;
}

#tab-commercial .commercial-completion-card {
    margin-top: 28px;
    padding: 22px;

    background: #f8fbfb;
    border: 1px solid #dce8e8;
    border-radius: 12px;
}

#tab-commercial .commercial-completion-card > h3 {
    margin-top: 5px;
    margin-bottom: 18px;
}


@media (max-width: 700px) {

    #tab-commercial .commercial-offer-card,
    #tab-commercial .commercial-invoice-card {
        padding: 20px;
    }

    #tab-commercial .commercial-quote-card {
        padding: 18px;
    }

    #tab-commercial .commercial-payment-card {
        display: block;
    }

    #tab-commercial .commercial-payment-card
    > .commercial-status {
        margin-top: 12px;
    }

}


/* Commercial form refinements */


/* ------------------------------------------------
   Allgemeine Abstände innerhalb kaufmännischer
   Formulare
   ------------------------------------------------ */

#tab-commercial .commercial-form .form-field
+ .form-field {
    margin-top: 24px;
}

#tab-commercial [data-invoice-repaired]
.form-field + .form-field {
    margin-top: 26px;
}

#tab-commercial .field-help {
    display: block;

    margin-top: 9px;

    line-height: 1.55;
}


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

#tab-commercial .invoice-draft-summary {
    margin: 18px 0 24px;
    padding: 16px 18px;

    background: #f5fafa;
    border: 1px solid #dce8e8;
    border-left: 4px solid var(--primary);
    border-radius: 10px;

    color: var(--text);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

#tab-commercial .invoice-draft-summary br {
    display: none;
}

#tab-commercial .invoice-draft-summary small {
    display: block;

    margin-top: 5px;

    color: var(--text-muted);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

#tab-commercial .invoice-draft-summary-empty {
    border-left-color: var(--border);

    background: var(--surface-muted);

    color: var(--text-muted);

    font-weight: 600;
}


/* ------------------------------------------------
   Ergebnis-Auswahl
   ------------------------------------------------ */

#tab-commercial .invoice-result-field {
    display: grid;

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

    gap: 10px;
}

#tab-commercial .invoice-result-field
> label:first-child {
    grid-column: 1 / -1;

    margin-bottom: 2px;

    font-weight: 700;
}

#tab-commercial .invoice-result-field
> label:not(:first-child) {
    position: relative;

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

    min-height: 48px;

    margin: 0;
    padding: 12px 16px;

    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 9px;

    color: var(--text-muted);

    font-size: 13px;
    font-weight: 700;
    text-align: center;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

#tab-commercial .invoice-result-field
> label:not(:first-child):hover {
    background: #f5fafa;
    border-color: #b9d2d3;

    color: var(--primary-dark);
}

#tab-commercial .invoice-result-field
input[type="radio"] {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}

#tab-commercial .invoice-result-field
> label:not(:first-child):has(
    input[type="radio"]:checked
) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);

    color: #ffffff;

    box-shadow:
        0 4px 10px rgba(15, 61, 62, 0.14);
}


/* ------------------------------------------------
   Lexware Bereit-Status
   ------------------------------------------------ */

#tab-commercial .lexware-ready-card {
    display: grid;

    grid-template-columns:
        36px minmax(0, 1fr);

    grid-template-rows:
        auto auto;

    column-gap: 13px;

    align-items: center;

    min-height: 0;

    padding: 17px 18px;

    background: #f5fafa;
    border: 1px solid #d6e6e6;
    border-left: 4px solid var(--primary);
    border-radius: 10px;

    color: var(--text);
}

#tab-commercial .lexware-ready-card::before {
    content: "✓";

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

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

    width: 32px;
    height: 32px;

    background: rgba(31, 111, 115, 0.11);
    border-radius: 999px;

    color: var(--primary-dark);

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

#tab-commercial .lexware-ready-card strong {
    grid-column: 2;

    display: block;

    font-size: 14px;
    font-weight: 750;
}

#tab-commercial .lexware-ready-card br {
    display: none;
}

#tab-commercial .lexware-ready-card small {
    grid-column: 2;

    display: block;

    margin-top: 4px;

    color: var(--text-muted);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
}


@media (max-width: 650px) {

    #tab-commercial .invoice-result-field {
        grid-template-columns: 1fr;
    }

    #tab-commercial .invoice-result-field
    > label:first-child {
        grid-column: 1;
    }

}


/* Commercial spacing corrections */


/* Ergebnis-Auswahl -> Bezeichnung */
#tab-commercial .invoice-result-field {
    margin-bottom: 30px;
}


/* Felder innerhalb Reparatur / Diagnose etwas luftiger */
#tab-commercial [data-invoice-repaired]
.form-field + .form-field,
#tab-commercial [data-invoice-not-repaired]
.form-field + .form-field {
    margin-top: 30px;
}


/* Zusätzliche Positionen -> Eingabeformular */
#tab-commercial [data-invoice-other-items]
> .commercial-form {
    margin-top: 26px;
}


/* Beschreibung -> Menge / Einzelpreis */
#tab-commercial [data-invoice-other-items]
.commercial-form > .form-field
+ .commercial-edit-grid {
    margin-top: 30px;
}


/*
   Wichtig:
   Die allgemeine Regel
   .form-field + .form-field
   darf innerhalb des 2-Spalten-Grids
   NICHT das zweite Feld nach unten schieben.
*/
#tab-commercial .commercial-edit-grid {
    align-items: start;
}

#tab-commercial .commercial-edit-grid
> .form-field {
    margin-top: 0;
}

#tab-commercial .commercial-edit-grid
> .form-field + .form-field {
    margin-top: 0;
}


/* Labels in Menge / Einzelpreis exakt ausrichten */
#tab-commercial .commercial-edit-grid
> .form-field > label {
    display: block;

    margin-bottom: 7px;
}


/* Zusätzliche Positionen etwas klarer absetzen */
#tab-commercial [data-invoice-other-items]
> .eyebrow {
    margin-top: 28px;
    margin-bottom: 10px;
}


/* Mobile */
@media (max-width: 700px) {

    #tab-commercial .commercial-edit-grid
    > .form-field + .form-field {
        margin-top: 24px;
    }

}

.history-details {
    margin-top: 34px;

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

.history-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 4px;

    cursor: pointer;

    list-style: none;

    color: var(--text-muted);

    font-size: 12px;
    font-weight: 650;
}

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

.history-details summary::after {
    content: "⌄";

    color: var(--primary);

    font-size: 15px;
    transition: transform 0.15s ease;
}

.history-details[open] summary::after {
    transform: rotate(180deg);
}

.history-toggle {
    margin-left: auto;
    margin-right: 12px;

    color: var(--primary);

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

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

.history-details-content {
    padding-bottom: 10px;
}
.shipping-section {
    margin-bottom: 24px;
}

.shipping-section-header {
    margin-bottom: 12px;
}

.shipping-section-header h3 {
    margin-top: 5px;
}

.shipment-card {
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--surface-muted);

    margin-bottom: 18px;
}

.shipment-card:last-child {
    margin-bottom: 0;
}

.shipment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    margin-bottom: 18px;
}

.shipment-title {
    font-size: 14px;
    font-weight: 750;
}

.shipment-meta {
    margin-top: 4px;

    color: var(--text-muted);
    font-size: 10px;
}

.shipment-status {
    display: inline-flex;
    align-items: center;

    padding: 6px 9px;

    border-radius: 999px;

    background: rgba(31, 111, 115, 0.10);
    color: var(--primary);

    font-size: 10px;
    font-weight: 750;
}

.shipment-empty {
    padding: 4px;
}

.shipment-empty p {
    margin: 8px 0 16px;

    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.shipment-empty small {
    display: block;

    margin-top: 8px;

    color: var(--text-muted);
    font-size: 10px;
}

.shipment-address {
    margin-bottom: 18px;

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

.shipment-address strong {
    display: block;
    margin-bottom: 6px;

    color: var(--primary);

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

@media (max-width: 650px) {

    .shipment-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .shipment-status {
        align-self: flex-start;
    }

}
.shipment-card .button {
    margin-top: 18px;
}
.shipment-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
    margin-top: 18px;
}

.shipment-actions form {
    margin: 0;
}

.button.danger {
    border: 1px solid #b42318;

    background: #fff5f4;
    color: #b42318;
}

.button.danger:hover {
    background: #fee4e2;
}
.shipment-cancelled-info {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-bottom: 14px;
    padding: 12px 14px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--surface-muted);
}

.shipment-cancelled-info strong {
    color: var(--text);
    font-size: 12px;
}

.shipment-cancelled-info span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.5;
}
.shipment-history-item {
    margin-bottom: 10px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--surface-muted);
}

.shipment-history-item summary {
    cursor: pointer;
    list-style: none;

    padding: 13px 16px;
}

.shipment-history-item summary::-webkit-details-marker {
    display: none;
}

.shipment-history-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.shipment-history-summary > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shipment-history-summary strong {
    font-size: 12px;
}

.shipment-history-summary span {
    color: var(--text-muted);
    font-size: 10px;
}

.shipment-history-status {
    padding: 5px 8px;

    border-radius: 999px;

    background: var(--surface);
    color: var(--text-muted) !important;

    font-weight: 700;
}

.shipment-history-content {
    padding: 0 16px 16px;

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

.shipment-history-note {
    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid var(--border);

    color: var(--text-muted);
    font-size: 10px;
}

@media (max-width: 650px) {

    .shipment-history-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .shipment-history-summary > div {
        flex-wrap: wrap;
    }

}
/* DOKUMENTATION – AKTUELLER STAND */

.documentation-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;

    margin-bottom: 24px;
}

.documentation-summary-card {
    min-width: 0;

    padding: 20px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow: 0 3px 12px rgba(15, 61, 62, 0.04);
}

.documentation-summary-label {
    margin-bottom: 10px;

    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.4;

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

.documentation-summary-text {
    color: var(--text);
    font-size: 13px;
    line-height: 1.7;

    white-space: pre-wrap;
}


@media (max-width: 800px) {

    .documentation-summary-grid {
        grid-template-columns: 1fr;
    }

}

.attachment-file-preview {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

.attachment-pdf-icon {
    position: relative;
    width: 72px;
    height: 88px;

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

    background: #ffffff;
    border: 2px solid #0f3d3e;
    border-radius: 7px;

    color: #0f3d3e;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.attachment-pdf-icon::before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;

    width: 20px;
    height: 20px;

    background: #f5f5f5;
    border-left: 2px solid #0f3d3e;
    border-bottom: 2px solid #0f3d3e;

    border-bottom-left-radius: 4px;
}
.shipping-filter {
    display: grid;
    grid-template-columns:
        minmax(240px, 2fr)
        minmax(180px, 1fr)
        minmax(160px, 1fr)
        auto;
    column-gap: 24px;
    row-gap: 16px;
    align-items: end;
    margin-bottom: 24px;
}

.shipping-filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-left: 8px;
}

@media (max-width: 1100px) {
    .shipping-filter {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   Entsperrcode und bestätigte Geräterückgabe
   ============================================================ */

.unlock-code-status {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.unlock-code-inline-form {
    margin: 0;
}

.unlock-code-inline-form .button {
    margin: 0;
    padding: 7px 10px;
    font-size: 11px;
}

.unlock-code-edit-form {
    display: grid;
    gap: 8px;
    max-width: 380px;
    margin: 14px 0 8px;
}

.unlock-code-edit-form label {
    font-size: 12px;
    font-weight: 700;
}

.unlock-code-edit-form input {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font: inherit;
}

.unlock-code-edit-form .button {
    justify-self: start;
}

.status-return-confirmation {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: start;

    flex: 1 0 100%;

    max-width: 620px;
    padding: 10px 12px;

    background: rgba(31, 111, 115, 0.06);
    border: 1px solid rgba(31, 111, 115, 0.18);
    border-radius: 9px;

    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
}

.status-return-confirmation input[type="checkbox"] {
    appearance: auto;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--primary);
}

.manual-completion-form {
    display: grid;
    gap: 10px;
}

.manual-completion-form .button {
    margin: 0;
}

.unlock-code-reveal-card {
    width: min(720px, 100%);
    margin: 30px auto;
    padding: 30px;

    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary-dark);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-card);
}

.unlock-code-reveal-card h2 {
    margin: 7px 0 0;
    color: var(--primary-dark);
}

.unlock-code-reveal-note {
    margin: 14px 0 0;
    color: var(--text-muted);
    line-height: 1.65;
}

.unlock-code-reveal-value {
    display: grid;
    gap: 8px;
    margin-top: 24px;
    padding: 18px;

    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.unlock-code-reveal-value span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.unlock-code-reveal-value code {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo,
        Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 20px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.unlock-code-reveal-card .form-actions {
    margin-top: 22px;
}

@media (max-width: 700px) {

    .unlock-code-reveal-card {
        margin: 18px auto;
        padding: 22px 18px;
    }

    .unlock-code-reveal-card .form-actions,
    .unlock-code-reveal-card .button {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .shipping-filter {
        grid-template-columns: 1fr;
    }

    .shipping-filter-actions {
        flex-wrap: wrap;
        padding-left: 0;
    }
}
.communication-search {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        auto;

    gap: 24px;
    align-items: end;

    margin-bottom: 40px;
}

.communication-search-actions {
    display: flex;

    gap: 10px;

    margin-top: 8px;
    padding-left: 8px;
}

.communication-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 20px;

    margin-top: 20px;
}

.communication-grid details {
    margin-top: 16px;
}

.communication-grid summary {
    cursor: pointer;
    font-weight: 600;
}

@media (max-width: 700px) {
    .communication-search {
        grid-template-columns: 1fr;
    }

    .communication-search-actions {
        padding-left: 0;
        flex-wrap: wrap;
    }
}
.communication-search .form-field {
    margin-bottom: 0;
}

.dashboard-section + .dashboard-section {
    margin-top: 48px;
}

.communication-grid .detail-card {
    padding: 24px;
}

.communication-grid .detail-card h3 {
    margin-top: 8px;
    margin-bottom: 18px;
}

.initial-response-card {
    padding: 28px;
}

.initial-response-card .form-field {
    margin-bottom: 24px;
}


.initial-response-blocks {
    margin-top: 8px;
    margin-bottom: 30px;
}

.initial-response-blocks-header {
    margin-bottom: 14px;
}

.initial-response-blocks-header strong {
    display: block;
    margin-bottom: 4px;
}


.initial-response-block-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}


.initial-response-block {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 0 14px !important;

    width: 100%;
    box-sizing: border-box;

    padding: 16px 18px;

    border: 1px solid #dfe7e7;
    border-radius: 10px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.initial-response-block:hover {
    border-color: #1F6F73;
    background: #f8fbfb;
}

.initial-response-block:has(
    .initial-response-block-checkbox:checked
) {
    border-color: #1F6F73;
    background: #f2f8f8;
}


#initial-response-form
input.initial-response-block-checkbox {
    display: block !important;

    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;

    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;

    margin: 2px 0 0 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    accent-color: #1F6F73;
}


.initial-response-block-content {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

.initial-response-block-content strong {
    display: block;

    margin: 0 0 6px;

    color: #222222;
}


.initial-response-block-preview {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0;

    color: #687273;

    font-size: 13px;
    line-height: 1.55;

    white-space: pre-line;
}


.initial-response-preview-area {
    margin-top: 10px;
    margin-bottom: 28px;

    border: 1px solid #d8e6e7;
    border-radius: 12px;

    overflow: hidden;
}

.initial-response-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    padding: 12px 16px;

    background: #f2f8f8;

    border-bottom: 1px solid #d8e6e7;
}

.initial-response-preview-header span {
    color: #1F6F73;

    font-size: 12px;
    font-weight: 600;
}


.initial-response-preview {
    min-height: 180px;

    padding: 20px;

    background: #ffffff;

    color: #333333;

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

    white-space: pre-wrap;
}


.initial-response-actions {
    margin-top: 0;
}


@media (max-width: 700px) {

    .initial-response-card {
        padding: 20px;
    }

    .initial-response-preview-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

}
/* ---------------------------------------------------------
   Kommunikationsverwaltung: Textbausteine
   Funktionale Basis
   --------------------------------------------------------- */

.text-block-create-card {
    margin-bottom: 28px;
    padding: 18px 20px;

    border: 1px solid #dfe7e7;
    border-radius: 10px;

    background: #ffffff;
}

.text-block-create-card > summary {
    cursor: pointer;

    font-weight: 700;
    color: #0F3D3E;
}


.text-block-active-field input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;

    height: 18px !important;
    min-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    accent-color: #1F6F73;
}


.text-block-editor {
    margin-top: 16px;
    padding-top: 14px;

    border-top: 1px solid #e8eeee;
}

.text-block-editor > summary {
    cursor: pointer;

    font-weight: 600;
    color: #1F6F73;
}


#text-block-save-order:disabled {
    opacity: 0.5;
    cursor: default;
}


/* =========================================================
   Kunden-Seiten / Page-Template-Editor
   ========================================================= */

#page-templates .page-template-key {
    margin-top: -0.35rem;
    margin-bottom: 0.75rem;
    color: #667777;
    font-size: 0.8rem;
    font-family: monospace;
}

#page-templates .page-template-edit-form {
    gap: 1rem;
}

#page-templates .page-editor-general {
    padding: 1rem;
    margin-bottom: 0.25rem;
    border: 1px solid #dce5e5;
    border-radius: 10px;
    background: #f8fafa;
}


/* Hauptgruppen:
   Bestätigungsseite / Erfolg / Bereits bestätigt / Fehler */

#page-templates .page-editor-group {
    margin: 0;
    border: 1px solid #d3dfdf;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

#page-templates .page-editor-group + .page-editor-group {
    margin-top: 0.75rem;
}


/* Wichtig:
   Die Selektoren sind bewusst sehr spezifisch,
   damit bestehende summary-Regeln des Editors
   nicht in die verschachtelten Bereiche hineinfunken.
*/

#page-templates
.page-editor-group
> .page-editor-group-summary {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
    list-style: none;
    background: #f4f8f8;
    user-select: none;
}

#page-templates
.page-editor-group
> .page-editor-group-summary::-webkit-details-marker {
    display: none;
}

#page-templates
.page-editor-group
> .page-editor-group-summary::marker {
    content: "";
}

#page-templates
.page-editor-group
> .page-editor-group-summary:hover {
    background: #edf4f4;
}

#page-templates
.page-editor-group[open]
> .page-editor-group-summary {
    border-bottom: 1px solid #d3dfdf;
    background: #edf4f4;
}


/* Nummer 1–4 */

#page-templates .page-editor-group-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #0F3D3E;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
}


/* Hauptüberschrift innerhalb der Gruppe */

#page-templates
.page-editor-group-summary
strong {
    display: block;
    color: #183536;
    font-size: 1.05rem;
    line-height: 1.3;
}

#page-templates
.page-editor-group-summary
small {
    display: block;
    margin-top: 0.2rem;
    color: #687979;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.4;
}


/* Inhalt einer aufgeklappten Hauptgruppe */

#page-templates .page-editor-group-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
}


/* Privat / Geschäft bzw. die beiden Fehlerarten */

#page-templates .page-editor-audience {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #dce5e5;
    border-radius: 10px;
    background: #fbfcfc;
}

#page-templates .page-editor-audience-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #e2e8e8;
}

#page-templates .page-editor-audience-header h4 {
    margin: 0;
    color: #173d3e;
    font-size: 1rem;
}


/* Du / Sie / Fehler */

#page-templates .page-editor-tone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: #e4eeee;
    color: #315657;
    font-size: 0.75rem;
    font-weight: 700;
}


/* Etwas mehr Luft zwischen Feldern innerhalb der Karten */

#page-templates
.page-editor-audience
.form-field
+ .form-field {
    margin-top: 0.85rem;
}


/* Footer mit Aktiv-Schalter und Speichern */

#page-templates .page-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
    padding: 1rem;
    border: 1px solid #dce5e5;
    border-radius: 10px;
    background: #f8fafa;
}

#page-templates
.page-editor-footer
.text-block-form-actions {
    margin: 0;
}


/* Mobile / schmale Fenster */

@media (max-width: 850px) {

    #page-templates .page-editor-group-content {
        grid-template-columns: 1fr;
    }

    #page-templates .page-editor-footer {
        align-items: stretch;
        flex-direction: column;
    }

    #page-templates
    .page-editor-footer
    .text-block-form-actions {
        width: 100%;
    }

    #page-templates
    .page-editor-footer
    .text-block-form-actions
    .button {
        width: 100%;
    }
}


/* ==================================================
   Communications full redesign
   ================================================== */


/* --------------------------------------------------
   Navigation
   -------------------------------------------------- */

.communications-section-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;

    margin: 0 0 32px;
    padding: 4px;

    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow:
        0 6px 20px rgba(15, 61, 62, 0.055);
}

.communications-section-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;
    padding: 8px 14px;

    border-radius: 8px;

    color: var(--primary-dark);

    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.communications-section-nav a:hover {
    background: #f5fafa;
}

.communications-section-nav a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 23px;
    height: 23px;
    padding: 0 6px;

    background: #edf5f5;
    border-radius: 999px;

    font-size: 11px;
}


/* --------------------------------------------------
   1 · Vorlagen
   -------------------------------------------------- */

#email-templates {
    display: grid;

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

    gap: 18px;

    align-items: stretch;
}

#email-templates > .section-header {
    grid-column: 1 / -1;
    margin-bottom: 4px;
}

/* Alte Zwischenüberschrift "E-Mail-Vorlagen" entfällt */
#email-templates > .communication-subsection-title {
    display: none;
}

/*
   Die beiden bisherigen Bereiche
   E-Mail-Vorlagen + Kunden-Seiten
   werden visuell zu einem Grid.
*/
#email-templates > .communication-grid,
#email-templates > .communication-subsection,
#email-templates
> .communication-subsection
> .communication-grid {
    display: contents;
}

/* Alte separate Kundenseiten-Überschrift ausblenden */
#email-templates
> .communication-subsection
> .section-header {
    display: none;
}


/* --------------------------------------------------
   Vorlagenkarten
   -------------------------------------------------- */

#email-templates .communication-template-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    padding: 24px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 14px;

    box-shadow:
        0 8px 24px rgba(15, 61, 62, 0.055);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

#email-templates
.communication-template-card:hover {
    border-color: #c9dddd;

    box-shadow:
        0 10px 28px rgba(15, 61, 62, 0.08);
}

#email-templates
.communication-template-card
> .eyebrow {
    padding-right: 76px;

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

#email-templates
.communication-template-card
> h3 {
    min-height: 48px;

    margin: 6px 0 18px;
    padding-right: 74px;

    color: var(--primary-dark);

    font-size: 17px;
    line-height: 1.4;
}


/* --------------------------------------------------
   Aktiv / Inaktiv
   -------------------------------------------------- */

.communication-template-status {
    position: absolute;

    top: 21px;
    right: 20px;

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

    gap: 6px;

    margin-bottom: 22px;
    padding: 6px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 750;

    opacity: 0.75;
}

.communication-template-status::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 999px;

    background: currentColor;
}

.communication-template-status.active {
    background: rgba(31, 111, 115, 0.10);
    color: var(--primary-dark);
}

.communication-template-status.inactive {
    background: #f0f2f2;
    color: #687273;
}


/* --------------------------------------------------
   Du / Sie Vorschau
   -------------------------------------------------- */

#email-templates
.communication-template-card
> details:not(.template-editor-toggle),

#text-blocks
.text-block-card
> details:not(.template-editor-toggle) {
    margin-top: 9px;

    border: 1px solid #dce8e8;
    border-radius: 9px;

    background: #fbfdfd;

    overflow: hidden;
}

#email-templates
.communication-template-card
> details:not(.template-editor-toggle)
> summary,

#text-blocks
.text-block-card
> details:not(.template-editor-toggle)
> summary {
    padding: 11px 13px;

    cursor: pointer;

    color: var(--primary-dark);

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

    list-style: none;
}

#email-templates
.communication-template-card
> details:not(.template-editor-toggle)
> summary::-webkit-details-marker,

#text-blocks
.text-block-card
> details:not(.template-editor-toggle)
> summary::-webkit-details-marker {
    display: none;
}

#email-templates
.communication-template-card
> details:not(.template-editor-toggle)
> summary::after,

#text-blocks
.text-block-card
> details:not(.template-editor-toggle)
> summary::after {
    content: "+";
    float: right;
    color: var(--primary);
}

#email-templates
.communication-template-card
> details[open]:not(.template-editor-toggle)
> summary::after,

#text-blocks
.text-block-card
> details[open]:not(.template-editor-toggle)
> summary::after {
    content: "−";
}


/* --------------------------------------------------
   Vorschautext
   -------------------------------------------------- */

.communication-preview {
    margin-top: 12px;
    padding: 13px;

    background: #f5f5f5;

    border-top: 1px solid #e5eeee;
    border-radius: 8px;
}

.communication-preview strong {
    display: block;

    margin-bottom: 8px;

    color: var(--primary-dark);

    font-size: 12px;
}

.communication-preview pre {
    max-height: 220px;

    margin: 0;

    overflow: auto;

    color: var(--text-muted);

    font: inherit;
    font-size: 11px;
    line-height: 1.55;

    white-space: pre-wrap;
    word-break: break-word;
}


/* --------------------------------------------------
   Bearbeiten
   -------------------------------------------------- */

details.template-editor-toggle {
    margin-top: auto;
    padding-top: 18px;
}

details.template-editor-toggle > summary {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 10px 15px;

    border: 1px solid #d8e6e7;
    border-radius: 9px;

    background: #f5fafa;

    color: var(--primary-dark);

    cursor: pointer;

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

    list-style: none;
}

details.template-editor-toggle
> summary::-webkit-details-marker {
    display: none;
}

details.template-editor-toggle
> summary:hover {
    border-color: var(--primary);
    background: #edf5f5;
}

details.template-editor-toggle[open]
> summary {
    margin-bottom: 22px;

    background: var(--primary-dark);
    border-color: var(--primary-dark);

    color: #ffffff;
}


/*
   Geöffnete Vorlage über volle Breite.
   Besonders für Kundenseiten wichtig.
*/
#email-templates
.communication-template-card:has(
    > details.template-editor-toggle[open]
) {
    grid-column: 1 / -1;
}


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

.text-block-edit-form {
    display: grid;
    gap: 22px;
}

.text-block-edit-form .form-field {
    margin: 0;
}

.text-block-edit-form
.form-field > span {
    display: block;

    margin-bottom: 7px;

    font-weight: 650;
}

.text-block-edit-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.text-block-active-field {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 12px;
    font-weight: 650;
}

.text-block-form-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 4px;
}


/* --------------------------------------------------
   2 · Textbausteine
   -------------------------------------------------- */

#text-blocks {
    margin-top: 46px;
}

#text-blocks > .section-header {
    margin-bottom: 20px;
}


/* Neuer Baustein */
#text-blocks
> .text-block-create-card {
    margin: 0 0 18px;

    border: 1px solid #d8e6e7;
    border-radius: 12px;

    background: #ffffff;
}

#text-blocks
> .text-block-create-card
> summary {
    padding: 14px 18px;

    color: var(--primary-dark);

    cursor: pointer;
    font-weight: 700;

    list-style: none;
}

#text-blocks
> .text-block-create-card
> summary::-webkit-details-marker {
    display: none;
}

#text-blocks
> .text-block-create-card[open] {
    padding-bottom: 20px;
}

#text-blocks
> .text-block-create-card
> form {
    padding: 6px 20px 0;
}


/* Sortierleiste */
.text-block-reorder-form {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;
    padding: 12px 15px;

    background: #f8fbfb;

    border: 1px solid #dce8e8;
    border-radius: 10px;
}

.text-block-sort-hint {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--text-muted);

    font-size: 11px;
}

.text-block-sort-hint span {
    color: var(--primary);
    font-size: 18px;
}


/* Drei gleich breite Karten */
.text-block-sortable-list {
    display: grid;

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

    gap: 18px;

    align-items: stretch;
}


/* Einzelkarte */
.text-block-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    padding: 22px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 14px;

    box-shadow:
        0 8px 24px rgba(15, 61, 62, 0.05);

    transition:
        opacity 0.15s ease,
        box-shadow 0.15s ease;
}

.text-block-card:hover {
    box-shadow:
        0 10px 28px rgba(15, 61, 62, 0.08);
}

.text-block-card.dragging {
    opacity: 0.45;
}

.text-block-card-inactive {
    border-top-color: #a9b3b4;
}

.text-block-card-header {
    display: grid;

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

    gap: 11px;

    align-items: start;

    margin-bottom: 12px;
}

.text-block-drag-handle {
    width: 30px;
    height: 30px;

    padding: 0;

    border: 1px solid #d8e6e7;
    border-radius: 7px;

    background: #f5fafa;

    color: var(--primary-dark);

    cursor: grab;
}

.text-block-drag-handle:active {
    cursor: grabbing;
}

.text-block-card-title {
    min-width: 0;
}

.text-block-card-title h3 {
    margin: 4px 0 0;

    color: var(--primary-dark);

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


/* Textbaustein-Status */
.text-block-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 750;
}

.text-block-status::before {
    content: "";

    width: 6px;
    height: 6px;

    background: currentColor;
    border-radius: 999px;
}

.text-block-status.active {
    background: rgba(31, 111, 115, 0.10);
    color: var(--primary-dark);
}

.text-block-status.inactive {
    background: #f0f2f2;
    color: #687273;
}


/* Editor unten */
.text-block-card
> details.template-editor-toggle {
    margin-top: auto;
}


/* Geöffneter Editor volle Breite */
.text-block-card:has(
    > details.template-editor-toggle[open]
) {
    grid-column: 1 / -1;
}


/* --------------------------------------------------
   3 · Verlauf
   -------------------------------------------------- */

.communication-history-accordion {
    margin-top: 46px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary-dark);
    border-radius: 14px;

    box-shadow:
        0 8px 24px rgba(15, 61, 62, 0.05);

    overflow: hidden;
}

.communication-history-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 22px;

    cursor: pointer;
    list-style: none;
}

.communication-history-summary::-webkit-details-marker {
    display: none;
}

.communication-history-summary strong {
    display: block;

    margin-top: 4px;

    color: var(--primary-dark);

    font-size: 17px;
}

.communication-history-summary span {
    display: block;

    margin-top: 4px;

    color: var(--text-muted);

    font-size: 12px;
}

.communication-history-toggle {
    flex: 0 0 auto;

    color: var(--primary) !important;

    font-weight: 700;
}

.communication-history-accordion[open]
.communication-history-toggle {
    font-size: 0;
}

.communication-history-accordion[open]
.communication-history-toggle::after {
    content: "Verlauf ausblenden";

    font-size: 12px;
}

.communication-history-content {
    padding: 0 22px 22px;

    border-top: 1px solid #edf2f2;
}

.communication-history-content
> .dashboard-section {
    margin-top: 22px;
    margin-bottom: 0;
}


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

@media (max-width: 1180px) {

    #email-templates,
    .text-block-sortable-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {

    .communications-section-nav {
        display: flex;
        overflow-x: auto;
    }

    .communications-section-nav a {
        flex: 0 0 auto;
        min-width: 135px;
    }

    #email-templates,
    .text-block-sortable-list {
        grid-template-columns: 1fr;
    }

    .text-block-reorder-form {
        align-items: stretch;
        flex-direction: column;
    }

    .communication-history-summary {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* ==================================================
   Shared UI foundation
   ================================================== */

:root {
    --ui-surface-soft: #f8fbfb;
    --ui-border-soft: #dce8e8;

    --ui-shadow-card:
        0 8px 24px rgba(15, 61, 62, 0.055);

    --ui-shadow-hover:
        0 10px 28px rgba(15, 61, 62, 0.08);

    --ui-radius-card: 14px;
    --ui-radius-subcard: 10px;
}


/* ==================================================
   Repair tab full redesign
   ================================================== */


/* --------------------------------------------------
   Kopf
   -------------------------------------------------- */

#tab-repair > .repair-tab-header {
    margin-bottom: 22px;
}

#tab-repair
.repair-tab-header
.section-description {
    max-width: 680px;

    margin-top: 8px;
}


/* --------------------------------------------------
   Hauptbereiche
   -------------------------------------------------- */

#tab-repair .repair-primary-card {
    margin-top: 0;
    margin-bottom: 28px;

    padding: 28px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

#tab-repair .repair-primary-card
> .eyebrow,
#tab-repair .repair-primary-card
.section-header .eyebrow {
    color: var(--primary);

    font-weight: 750;
}

#tab-repair .repair-primary-card h2 {
    color: var(--primary-dark);
}


/* --------------------------------------------------
   1 · Workflow
   -------------------------------------------------- */

#tab-repair .repair-workflow-card {
    padding: 24px 28px;

    border-top-color: var(--primary-dark);
}

#tab-repair .repair-workflow-card h2 {
    margin-top: 6px;
}

#tab-repair .repair-workflow-card
.status-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 18px;
}

#tab-repair .repair-workflow-card
.status-form select {
    flex: 0 0 auto;

    width: 280px;
    max-width: 100%;
    height: auto;

    padding: 9px 12px;
}

#tab-repair .repair-workflow-card
.status-form .button {
    flex: 0 0 auto;

    width: auto;
    min-height: 0;

    padding: 9px 14px;

    font-size: 12px;
    white-space: nowrap;
}


/* --------------------------------------------------
   2 · Auftrag & Gerät
   -------------------------------------------------- */

#tab-repair .repair-intake-card h2 {
    margin-top: 6px;
}

#tab-repair .repair-intake-card
.prose-block {
    margin-top: 18px;
    padding: 18px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-subcard);

    line-height: 1.65;
}

#tab-repair .repair-intake-card
> h3 {
    margin-top: 30px;
    margin-bottom: 12px;

    color: var(--primary-dark);

    font-size: 14px;
}

#tab-repair .delivery-form {
    margin-top: 0;
}

#tab-repair .delivery-checklist {
    border-color: var(--ui-border-soft);

    border-radius: var(--ui-radius-subcard);

    background: var(--ui-surface-soft);
}

#tab-repair .delivery-item {
    padding: 13px 15px;
}

#tab-repair .delivery-actions {
    margin-top: 18px;
}


/* --------------------------------------------------
   3 · Diagnose & Reparatur
   -------------------------------------------------- */

#tab-repair .repair-diagnosis-section {
    margin-top: 34px;
}

#tab-repair .repair-diagnosis-section
> .section-header {
    margin-bottom: 20px;
}


/* Drei Statuskarten */
#tab-repair .documentation-summary-grid {
    display: grid;

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

    gap: 14px;
}

#tab-repair .documentation-summary-card {
    min-width: 0;
    min-height: 150px;

    padding: 18px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 11px;
}

#tab-repair .documentation-summary-label {
    margin-bottom: 7px;

    color: var(--primary);

    font-size: 10px;
    font-weight: 750;

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

#tab-repair .documentation-summary-text {
    color: var(--text);

    font-size: 13px;
    line-height: 1.6;

    white-space: pre-line;
}


/* --------------------------------------------------
   Unterbereiche innerhalb Diagnose / Reparatur
   -------------------------------------------------- */

#tab-repair .repair-subsection {
    margin-top: 18px;
    margin-bottom: 0;

    padding: 24px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow:
        0 4px 16px rgba(15, 61, 62, 0.035);
}

#tab-repair .repair-subsection
> .section-header {
    margin-bottom: 18px;
}

#tab-repair .repair-subsection
.section-header h2 {
    color: var(--primary-dark);

    font-size: 18px;
}

#tab-repair .repair-subsection
.section-header .eyebrow {
    color: var(--primary);
}


/* --------------------------------------------------
   Arbeitsprotokoll
   -------------------------------------------------- */

#tab-repair .entry-form-card {
    margin: 0;
    padding: 20px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-subcard);
}

#tab-repair .entry-form {
    margin-top: 0;
}


/* --------------------------------------------------
   Formulare im Reparaturbereich
   -------------------------------------------------- */

#tab-repair .form-grid {
    display: grid;

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

    gap: 22px;
}

#tab-repair .form-grid
> .form-field {
    margin-top: 0;
}

#tab-repair .form-grid
> .form-field + .form-field {
    margin-top: 0;
}

#tab-repair .form-grid
> .form-field.form-wide {
    grid-column: 1 / -1;
}

#tab-repair .form-field label,
#tab-repair .form-field > span {
    display: block;

    margin-bottom: 7px;

    font-weight: 650;
}

#tab-repair textarea {
    line-height: 1.55;
}

#tab-repair .form-actions {
    margin-top: 22px;
}


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

#tab-repair .repair-images-section
> .detail-card {
    padding: 20px;

    background: var(--ui-surface-soft);

    border-color: var(--ui-border-soft);

    box-shadow: none;
}

#tab-repair .repair-images-section
.attachment-gallery {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;

    margin-top: 20px;
}

#tab-repair .attachment-card {
    border-color: var(--ui-border-soft);
}


/* --------------------------------------------------
   Ersatzteile
   -------------------------------------------------- */

#tab-repair .repair-parts-section
> .detail-card {
    padding: 20px;

    background: var(--ui-surface-soft);

    border-color: var(--ui-border-soft);

    box-shadow: none;
}

#tab-repair .repair-parts-section
.part-form {
    margin: 0;
}

#tab-repair .parts-list {
    margin-top: 20px;

    border-color: var(--ui-border-soft);
}

#tab-repair .part-row {
    padding: 16px 18px;
}

#tab-repair .part-name {
    color: var(--primary-dark);
}


/* --------------------------------------------------
   4 · Qualitätskontrolle
   -------------------------------------------------- */

#tab-repair .repair-quality-section {
    margin-top: 36px;
    margin-bottom: 0;
}

#tab-repair .repair-quality-section
> .section-header {
    margin-bottom: 18px;
}


/* Gesamtstatus */
#tab-repair .qc-overview {
    margin-bottom: 18px;
}

#tab-repair .qc-badge {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border-radius: 999px;

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

#tab-repair .qc-badge::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: currentColor;
}

#tab-repair .qc-passed {
    background: rgba(31, 111, 115, 0.10);
    color: var(--primary-dark);
}

#tab-repair .qc-pending {
    background: #fff8e6;
    color: #8a6415;
}

#tab-repair .qc-failed {
    background: #fff1f1;
    color: #8b2f2f;
}


/* QC-Innenkarte */
#tab-repair .repair-quality-section
> .detail-card {
    padding: 0;

    border: 1px solid var(--ui-border-soft);
    border-radius: 11px;

    box-shadow: none;

    overflow: hidden;
}

#tab-repair .quality-list {
    background: #ffffff;
}

#tab-repair .quality-item {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(220px, 0.85fr);

    gap: 14px 20px;

    align-items: center;

    padding: 16px 18px;

    border-bottom: 1px solid var(--ui-border-soft);
}

#tab-repair .quality-item:last-child {
    border-bottom: 0;
}

#tab-repair .quality-main {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        160px;

    gap: 16px;

    align-items: center;
}

#tab-repair .quality-name {
    color: var(--primary-dark);

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

#tab-repair .quality-result,
#tab-repair .quality-note {
    width: 100%;

    height: 40px;
    min-height: 40px;

    align-self: center;

    margin-top: 0;
    margin-bottom: 0;

    padding: 9px 11px;

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

#tab-repair .quality-result {
    font-weight: 550;
}

#tab-repair .quality-note {
    display: block;

    font-weight: 400;
}

#tab-repair .quality-meta {
    grid-column: 1 / -1;

    margin-top: -4px;

    color: var(--text-muted);

    font-size: 10px;
}


/* Status des Selects subtil einfärben */
#tab-repair
.quality-status-ok {
    background: #f3f9f7;

    border-color: #bad8ce;

    color: var(--primary-dark);
}

#tab-repair
.quality-status-failed {
    background: #fff5f5;

    border-color: #e5c4c4;

    color: #8b2f2f;
}

#tab-repair
.quality-status-not_checked {
    background: #fffaf0;

    border-color: #e6d7b5;

    color: #7b641f;
}

#tab-repair
.quality-status-not_applicable {
    background: #f2f5f5;

    border-color: #c9d3d5;

    color: #52666a;
}


/* QC-Zusammenfassung */
#tab-repair .quality-summary {
    padding: 13px 18px;

    background: var(--ui-surface-soft);

    border-top: 1px solid var(--ui-border-soft);

    color: var(--text-muted);

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

#tab-repair .quality-form
> .form-actions {
    margin: 0;
    padding: 18px;

    border-top: 1px solid var(--ui-border-soft);
}


/* --------------------------------------------------
   Verlauf unter Reparatur
   -------------------------------------------------- */

#tab-repair > .history-details {
    margin-top: 32px;
}


/* --------------------------------------------------
   Hover / Fokus
   -------------------------------------------------- */

#tab-repair input:focus,
#tab-repair select:focus,
#tab-repair textarea:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(31, 111, 115, 0.10);
}


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

@media (max-width: 1050px) {

    #tab-repair
    .documentation-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #tab-repair
    .repair-images-section
    .attachment-gallery {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    #tab-repair
    .quality-item {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    #tab-repair .repair-primary-card,
    #tab-repair .repair-subsection {
        padding: 20px;
    }

    #tab-repair
    .repair-workflow-card
    .status-form {
        flex-direction: column;
        align-items: stretch;
    }

    #tab-repair
    .repair-workflow-card
    .status-form select,
    #tab-repair
    .repair-workflow-card
    .status-form .button {
        width: 100%;
    }

    #tab-repair
    .documentation-summary-grid,
    #tab-repair .form-grid {
        grid-template-columns: 1fr;
    }

    #tab-repair
    .form-grid
    > .form-field.form-wide {
        grid-column: auto;
    }

    #tab-repair
    .repair-images-section
    .attachment-gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #tab-repair .quality-main {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {

    #tab-repair
    .repair-images-section
    .attachment-gallery {
        grid-template-columns: 1fr;
    }

}



/* ==================================================
   Repair communication tab redesign
   ================================================== */


/* --------------------------------------------------
   Kopf
   -------------------------------------------------- */

#tab-communication
> .communication-tab-header {
    margin-bottom: 24px;
}

#tab-communication
.communication-tab-header
.section-description {
    max-width: 680px;

    margin-top: 8px;
}


/* --------------------------------------------------
   1 · Nachricht
   -------------------------------------------------- */

#tab-communication
.communication-message-section {
    margin-top: 0;
    margin-bottom: 30px;
}

#tab-communication
.communication-message-section
> .section-header {
    margin-bottom: 15px;
}

#tab-communication
.communication-message-section
> .section-header h2 {
    color: var(--primary-dark);
}


/* Hauptkarte */
#tab-communication
.initial-response-card {
    padding: 26px 28px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: var(--ui-radius-card);

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


/* --------------------------------------------------
   Composer-Felder
   -------------------------------------------------- */

#tab-communication
.initial-response-card
.form-field {
    margin: 0 0 22px;
}

#tab-communication
.initial-response-card
.form-field + .form-field {
    margin-top: 0;
}

#tab-communication
.initial-response-card
.form-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
}

#tab-communication
.initial-response-card
.field-help {
    display: block;

    margin-top: 8px;

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

#tab-communication
.initial-response-card
input,
#tab-communication
.initial-response-card
select,
#tab-communication
.initial-response-card
textarea {
    font-size: 14px;
}

#tab-communication
#initial-response-subject {
    max-width: 820px;
}

#tab-communication
#initial-response-text {
    min-height: 165px;

    line-height: 1.6;

    resize: vertical;
}


/* --------------------------------------------------
   Textbausteine
   -------------------------------------------------- */

#tab-communication
.initial-response-blocks {
    margin: 4px 0 26px;
}

#tab-communication
.initial-response-blocks-header {
    margin-bottom: 12px;

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

#tab-communication
.initial-response-blocks-header strong {
    display: block;

    margin-bottom: 6px;

    color: var(--primary-dark);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

#tab-communication
.initial-response-blocks-header small,
#tab-communication
.initial-response-blocks-header span,
#tab-communication
.initial-response-blocks-header p {
    display: block;

    margin: 0;

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

#tab-communication
.initial-response-block-list {
    display: grid;

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

    gap: 10px;
}

#tab-communication
.initial-response-block {
    min-height: 0;

    padding: 13px 15px;

    background: var(--ui-surface-soft);

    border-color: var(--ui-border-soft);
    border-radius: 9px;
}

#tab-communication
.initial-response-block:hover {
    background: #f3f8f8;
}

#tab-communication
.initial-response-block:has(
    .initial-response-block-checkbox:checked
) {
    background: #eef6f6;

    border-color: var(--primary);

    box-shadow:
        0 0 0 1px rgba(31, 111, 115, 0.05);
}

#tab-communication
.initial-response-block-content strong {
    margin-bottom: 5px;

    color: var(--primary-dark);

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

#tab-communication
.initial-response-block-preview {
    color: var(--text-muted);

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


/* --------------------------------------------------
   Vorschau
   -------------------------------------------------- */

#tab-communication
.initial-response-preview-area {
    margin: 8px 0 24px;

    border-color: var(--ui-border-soft);
    border-radius: 10px;

    background: #ffffff;

    box-shadow: none;
}

#tab-communication
.initial-response-preview-header {
    padding: 10px 14px;

    background: var(--ui-surface-soft);

    border-bottom-color: var(--ui-border-soft);
}

#tab-communication
.initial-response-preview-header span {
    font-size: 11px;
}

#tab-communication
.initial-response-preview-header strong {
    color: var(--primary-dark);

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

#tab-communication
.initial-response-preview {
    min-height: 150px;

    padding: 17px 18px;

    color: var(--text);

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


/* --------------------------------------------------
   Senden
   -------------------------------------------------- */

#tab-communication
.initial-response-actions {
    display: flex;

    justify-content: flex-end;

    margin-top: 0;
}

#tab-communication
.initial-response-actions
.button {
    width: auto;

    padding: 10px 16px;
}


/* --------------------------------------------------
   Bedingte Einsendefreigabe
   -------------------------------------------------- */

#tab-communication
.communication-approval-section {
    margin: 28px 0;

    padding: 24px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid #d1a536;
    border-radius: var(--ui-radius-card);

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

#tab-communication
.communication-approval-section
.section-header {
    margin-bottom: 16px;
}

#tab-communication
.communication-approval-section
> .detail-card {
    padding: 20px;

    background: #fffdf8;

    border-color: #eadfbe;

    box-shadow: none;
}

#tab-communication
.communication-approval-section
.shipment-card {
    margin: 0;

    background: #fffdf8;

    border-color: #eadfbe;
}

#tab-communication
.communication-approval-section
.shipment-status {
    background: #fff5d9;

    color: #806018;
}

#tab-communication
.communication-approval-section p {
    color: var(--text-muted);

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

#tab-communication
.communication-approval-section
.form-actions {
    margin-top: 18px;
}


/* --------------------------------------------------
   Fokus
   -------------------------------------------------- */

#tab-communication input:focus,
#tab-communication select:focus,
#tab-communication textarea:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(31, 111, 115, 0.10);
}


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

@media (max-width: 900px) {

    #tab-communication
    .initial-response-block-list {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    #tab-communication
    .initial-response-card,
    #tab-communication
    .communication-approval-section {
        padding: 20px;
    }

    #tab-communication
    .initial-response-actions {
        align-items: stretch;
        flex-direction: column;
    }

    #tab-communication
    .initial-response-actions
    .button {
        width: 100%;
    }

}



/* Commercial address warning */

#tab-commercial
.commercial-readonly.commercial-address-warning {
    flex-direction: column;
    align-items: flex-start;

    gap: 6px;

    padding: 15px 17px;

    background: #fff8e6;

    border: 1px solid #ead7a2;
    border-left: 4px solid #d89a24;

    color: #6f5418;
}

#tab-commercial
.commercial-address-warning strong {
    display: block;

    margin-bottom: 0;

    color: #7a5711;

    font-size: 14px;
    font-weight: 750;
}

#tab-commercial
.commercial-address-warning small {
    display: block;

    margin: 0;

    color: #725f32;

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


/* ==================================================
   Repair shipping tab redesign
   ================================================== */


/* --------------------------------------------------
   Kopf
   -------------------------------------------------- */

#tab-shipping
> .shipping-tab-header {
    margin-bottom: 24px;
}

#tab-shipping
.shipping-tab-header
.section-description {
    max-width: 680px;

    margin-top: 8px;
}


/* --------------------------------------------------
   Hauptbereiche
   -------------------------------------------------- */

#tab-shipping
.shipping-primary-section {
    margin: 0 0 28px;
    padding: 28px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

#tab-shipping
.shipping-outbound-section {
    border-top-color: var(--primary-dark);
}


/* --------------------------------------------------
   Abschnittskopf
   -------------------------------------------------- */

#tab-shipping
.shipping-section-header {
    margin-bottom: 18px;
}

#tab-shipping
.shipping-section-header
> div {
    width: 100%;
}

#tab-shipping
.shipping-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-top: 5px;
}

#tab-shipping
.shipping-heading-row h3 {
    margin: 0;

    color: var(--primary-dark);

    font-size: 18px;
}

#tab-shipping
.shipping-direction {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    padding: 6px 10px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 999px;

    color: var(--text-muted);

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


/* --------------------------------------------------
   Innenkarte
   -------------------------------------------------- */

#tab-shipping
.shipping-primary-section
> .detail-card {
    padding: 20px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 11px;

    box-shadow: none;
}


/* --------------------------------------------------
   Aktuelle Sendung
   -------------------------------------------------- */

#tab-shipping
.shipment-card {
    margin: 0 0 16px;
    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--ui-border-soft);
    border-left: 4px solid var(--primary);

    border-radius: 10px;
}

#tab-shipping
.shipment-card:last-child {
    margin-bottom: 0;
}

#tab-shipping
.shipment-header {
    margin-bottom: 18px;
}

#tab-shipping
.shipment-title {
    color: var(--primary-dark);

    font-size: 15px;
    font-weight: 750;
}

#tab-shipping
.shipment-meta {
    margin-top: 5px;

    font-size: 11px;
}


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

#tab-shipping
.shipment-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 6px 10px;

    font-size: 11px;
}

#tab-shipping
.shipment-status::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 999px;

    background: currentColor;
}


/* vorbereitet */
#tab-shipping
.shipment-status-created {
    background: #fff8e6;
    color: #806018;
}


/* Label erstellt */
#tab-shipping
.shipment-status-label_created {
    background: rgba(31, 111, 115, 0.10);
    color: var(--primary-dark);
}


/* storniert */
#tab-shipping
.shipment-status-cancelled {
    background: #fff1f1;
    color: #8b2f2f;
}


/* --------------------------------------------------
   Detaildaten
   -------------------------------------------------- */

#tab-shipping
.shipment-card
.detail-list {
    margin-top: 4px;
}

#tab-shipping
.shipment-card
.detail-list dt {
    font-size: 11px;
}

#tab-shipping
.shipment-card
.detail-list dd {
    font-size: 13px;
}


/* --------------------------------------------------
   Gewicht
   -------------------------------------------------- */

#tab-shipping
.shipment-weight-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin: 0;
}

#tab-shipping
.shipment-weight-form
.input-with-suffix {
    width: 160px;
    min-width: 160px;
    max-width: 100%;
}

#tab-shipping
.shipment-weight-form input {
    height: 40px;

    font-size: 13px;
}

#tab-shipping
.shipment-weight-form .button {
    width: auto;

    margin: 0;

    padding: 9px 13px;

    font-size: 12px;
}


/* --------------------------------------------------
   Aktionen
   -------------------------------------------------- */

#tab-shipping
.shipment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 20px;
}

#tab-shipping
.shipment-actions form {
    margin: 0;
}

#tab-shipping
.shipment-actions .button {
    width: auto;

    margin-top: 0;

    padding: 9px 13px;

    font-size: 12px;
}


/* --------------------------------------------------
   Keine Sendung / neue Rücksendung
   -------------------------------------------------- */

#tab-shipping
.shipment-empty {
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;
}

#tab-shipping
.shipment-empty > strong {
    display: block;

    color: var(--primary-dark);

    font-size: 14px;
}

#tab-shipping
.shipment-empty p {
    margin: 7px 0 16px;

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

#tab-shipping
.shipment-empty small {
    font-size: 11px;
}


/* --------------------------------------------------
   Empfänger
   -------------------------------------------------- */

#tab-shipping
.shipment-address {
    margin-bottom: 18px;
    padding: 15px 17px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-left: 4px solid var(--primary);

    border-radius: 9px;

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

#tab-shipping
.shipment-address strong {
    margin-bottom: 7px;

    color: var(--primary-dark);

    font-size: 12px;
}


/* --------------------------------------------------
   Frühere / stornierte Sendungen
   -------------------------------------------------- */

#tab-shipping
.shipment-history-item {
    margin: 10px 0 0;

    background: #ffffff;

    border-color: var(--ui-border-soft);
}

#tab-shipping
.shipment-history-item summary {
    padding: 13px 15px;
}

#tab-shipping
.shipment-history-summary strong {
    color: var(--primary-dark);

    font-size: 12px;
}

#tab-shipping
.shipment-history-summary span {
    font-size: 11px;
}

#tab-shipping
.shipment-history-content {
    padding: 15px;

    background: #fbfdfd;
}


/* --------------------------------------------------
   Storno-Hinweis
   -------------------------------------------------- */

#tab-shipping
.shipment-cancelled-info {
    gap: 5px;

    margin: 16px 0;
    padding: 14px 16px;

    background: #fff5f5;

    border: 1px solid #e6caca;
    border-left: 4px solid #b85b5b;
}

#tab-shipping
.shipment-cancelled-info strong {
    color: #7d3030;

    font-size: 13px;
}

#tab-shipping
.shipment-cancelled-info span {
    color: #765555;

    font-size: 11px;
}


/* --------------------------------------------------
   Fokus
   -------------------------------------------------- */

#tab-shipping input:focus,
#tab-shipping select:focus,
#tab-shipping textarea:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(31, 111, 115, 0.10);
}


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

@media (max-width: 700px) {

    #tab-shipping
    .shipping-primary-section {
        padding: 20px;
    }

    #tab-shipping
    .shipping-heading-row {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

    #tab-shipping
    .shipment-weight-form {
        align-items: stretch;
        flex-direction: column;
    }

    #tab-shipping
    .shipment-weight-form
    .input-with-suffix,
    #tab-shipping
    .shipment-weight-form
    .button {
        width: 100%;
    }

    #tab-shipping
    .shipment-actions {
        align-items: stretch;
        flex-direction: column;
    }

    #tab-shipping
    .shipment-actions form,
    #tab-shipping
    .shipment-actions .button {
        width: 100%;
    }

}



/* ==================================================
   Unified repair tab history sections
   ================================================== */

#tab-repair .repair-tab-history,
#tab-communication .communication-tab-history,
#tab-commercial .commercial-tab-history,
#tab-shipping .shipping-tab-history {
    margin-top: 36px;
}

#tab-repair .repair-tab-history
> .section-header,
#tab-communication .communication-tab-history
> .section-header,
#tab-commercial .commercial-tab-history
> .section-header,
#tab-shipping .shipping-tab-history
> .section-header {
    margin-bottom: 12px;
}

#tab-repair .repair-tab-history
> .section-header h2,
#tab-communication .communication-tab-history
> .section-header h2,
#tab-commercial .commercial-tab-history
> .section-header h2,
#tab-shipping .shipping-tab-history
> .section-header h2 {
    color: var(--primary-dark);
}


/* Eigentliche aufklappbare Verlaufskarte */

#tab-repair .repair-tab-history
> .history-details,
#tab-communication .communication-tab-history
> .history-details,
#tab-commercial .commercial-tab-history
> .history-details,
#tab-shipping .shipping-tab-history
> .history-details {
    margin-top: 0;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary-dark);
    border-radius: var(--ui-radius-card);

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

    overflow: hidden;
}


/* Kopf der aufklappbaren Karte */

#tab-repair .repair-tab-history
.history-details > summary,
#tab-communication .communication-tab-history
.history-details > summary,
#tab-commercial .commercial-tab-history
.history-details > summary,
#tab-shipping .shipping-tab-history
.history-details > summary {
    padding: 15px 18px;
}


/* Inhalt */

#tab-repair .repair-tab-history
.history-details-content,
#tab-communication .communication-tab-history
.history-details-content,
#tab-commercial .commercial-tab-history
.history-details-content,
#tab-shipping .shipping-tab-history
.history-details-content {
    padding: 0 18px 18px;
}



/* ==================================================
   Repair overview redesign
   ================================================== */

.repair-overview {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 0.82fr)
        minmax(0, 1fr);

    gap: 18px;

    align-items: start;

    margin-bottom: 30px;
}


/* --------------------------------------------------
   Karten
   -------------------------------------------------- */

.repair-overview-card {
    min-width: 0;

    padding: 24px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.repair-overview-status {
    border-top-color: var(--primary-dark);
}


/* --------------------------------------------------
   Kartenkopf
   -------------------------------------------------- */

.repair-overview-card-header {
    margin-bottom: 15px;
    padding-bottom: 14px;

    border-bottom: 1px solid var(--ui-border-soft);
}

.repair-overview-card-header .eyebrow {
    margin-bottom: 5px;
}

.repair-overview-card-header h2 {
    margin: 0;

    color: var(--primary-dark);

    font-size: 18px;
    line-height: 1.3;
}


/* --------------------------------------------------
   Key / Value Daten
   -------------------------------------------------- */

.repair-overview .detail-list {
    display: grid;

    grid-template-columns:
        minmax(125px, 0.9fr)
        minmax(0, 1.2fr);

    column-gap: 14px;

    margin: 0;
}

.repair-overview .detail-list dt,
.repair-overview .detail-list dd {
    min-width: 0;

    margin: 0;
    padding: 10px 0;

    border-bottom: 1px solid var(--ui-border-soft);
}

.repair-overview .detail-list dt {
    color: var(--text-muted);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.repair-overview .detail-list dd {
    color: var(--text);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;

    overflow-wrap: anywhere;
}

.repair-overview .detail-list
dt:last-of-type,
.repair-overview .detail-list
dd:last-of-type {
    border-bottom: 0;
}


/* --------------------------------------------------
   Kundennummer
   -------------------------------------------------- */

.repair-overview-customer
.table-link {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    background: rgba(31, 111, 115, 0.08);

    border-radius: 6px;

    color: var(--primary-dark);

    text-decoration: none;
}

.repair-overview-customer
.table-link:hover {
    background: rgba(31, 111, 115, 0.14);
}


/* --------------------------------------------------
   Adressen
   -------------------------------------------------- */

.repair-overview
.overview-address-label {
    grid-column: 1 / -1;

    padding-top: 14px;
    padding-bottom: 6px;

    border-bottom: 0;

    color: var(--primary-dark);

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

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

.repair-overview
.overview-address-value {
    grid-column: 1 / -1;

    margin-bottom: 7px;
    padding: 12px 14px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-left: 3px solid var(--primary);
    border-radius: 8px;

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


/* historische Adresse fehlt */

.repair-overview
.overview-address-missing {
    background: #fff8e6;

    border-color: #ead7a2;
    border-left-color: #d89a24;

    color: #725f32;
}


/* fehlende historische Lieferadresse */

.repair-overview
.overview-historical-address-missing {
    padding: 8px 10px;

    background: #fff8e6;

    border-left: 3px solid #d89a24;
    border-radius: 6px;

    color: #725f32;
}


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

.repair-overview-status
.status-pill {
    font-size: 11px;

    padding: 6px 10px;
}

.repair-overview-status
.overview-diagnosis-value strong {
    color: var(--primary-dark);

    font-weight: 700;
}

.repair-overview-status
.overview-diagnosis-value small {
    display: inline-block;

    margin-top: 3px;

    color: var(--text-muted);

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


/* Diagnose-Freigabe-Button kompakt halten */

.repair-overview-status
.overview-diagnosis-value .button {
    width: auto;

    margin-top: 10px;

    padding: 8px 11px;

    font-size: 11px;
}


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

@media (max-width: 1180px) {

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

    .repair-overview-customer {
        grid-column: 1 / -1;
    }

}


@media (max-width: 760px) {

    .repair-overview {
        grid-template-columns: 1fr;
    }

    .repair-overview-customer {
        grid-column: auto;
    }

}


@media (max-width: 480px) {

    .repair-overview-card {
        padding: 20px;
    }

    .repair-overview .detail-list {
        grid-template-columns: 1fr;
    }

    .repair-overview .detail-list dt {
        padding-bottom: 3px;

        border-bottom: 0;
    }

    .repair-overview .detail-list dd {
        padding-top: 0;
        padding-bottom: 11px;
    }

    .repair-overview
    .overview-address-label,
    .repair-overview
    .overview-address-value {
        grid-column: auto;
    }

}


/* Repair overview equal card heights */

.repair-overview {
    align-items: stretch;
}

.repair-overview-card {
    height: 100%;
}



/* ==================================================
   Customers redesign
   ================================================== */


/* --------------------------------------------------
   Kundenübersicht Toolbar
   -------------------------------------------------- */

.customers-toolbar-card {
    margin-bottom: 24px;
    padding: 24px 26px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.customers-toolbar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 22px;
}

.customers-toolbar-top .section-description {
    max-width: 620px;
    margin-top: 6px;
}

.customers-search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.customers-search-form {
    display: flex;
    align-items: center;

    flex: 1;

    gap: 9px;
}

.customers-search-form input {
    width: min(520px, 100%);
    height: 42px;

    font-size: 13px;
}

.customers-search-form .button {
    width: auto;

    padding: 9px 14px;

    white-space: nowrap;
}

.customers-result-count {
    flex: 0 0 auto;

    padding: 7px 11px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 999px;

    color: var(--text-muted);

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


/* --------------------------------------------------
   Kundenkarten
   -------------------------------------------------- */

.customer-card-grid {
    display: grid;

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

    gap: 18px;
}

.customer-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 22px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.customer-card:hover {
    transform: translateY(-2px);

    border-color: var(--ui-border-soft);

    box-shadow: var(--ui-shadow-hover);
}

.customer-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 18px;
}

.customer-card-badges {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


/* --------------------------------------------------
   Kundentyp / Partner
   -------------------------------------------------- */

.customer-type-badge,
.customer-partner-badge,
.customer-number-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 750;
    line-height: 1;
}

.customer-type-private {
    background: rgba(31, 111, 115, 0.10);
    color: var(--primary-dark);
}

.customer-type-business {
    background: #eef2f7;
    color: #43546a;
}

.customer-partner-badge {
    background: #fff8e6;
    color: #806018;
}

.customer-number-badge {
    background: rgba(31, 111, 115, 0.10);
    color: var(--primary-dark);
}


/* --------------------------------------------------
   Kundennummer
   -------------------------------------------------- */

.customer-number-link {
    flex: 0 0 auto;

    color: var(--primary);

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

    text-decoration: none;
}

.customer-number-link:hover {
    text-decoration: underline;
}


/* --------------------------------------------------
   Karteninhalt
   -------------------------------------------------- */

.customer-card-main {
    min-height: 62px;

    margin-bottom: 18px;
}

.customer-card-main h2 {
    margin: 0;

    color: var(--primary-dark);

    font-size: 17px;
    line-height: 1.35;
}

.customer-card-person {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: 12px;
}

.customer-card-contact {
    display: grid;

    gap: 10px;

    margin-bottom: 20px;
}

.customer-contact-item {
    min-width: 0;

    padding: 10px 12px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 8px;
}

.customer-contact-item span {
    display: block;

    margin-bottom: 3px;

    color: var(--text-muted);

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

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

.customer-contact-item strong {
    display: block;

    color: var(--text);

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

    overflow-wrap: anywhere;
}

.customer-card-footer {
    margin-top: auto;
    padding-top: 4px;
}

.customer-card-footer .button {
    width: 100%;

    margin: 0;

    padding: 9px 12px;

    font-size: 12px;
}


/* --------------------------------------------------
   Leerzustand
   -------------------------------------------------- */

.customers-empty-state {
    padding: 30px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: var(--ui-radius-card);

    text-align: center;
}

.customers-empty-state h2 {
    margin: 6px 0 8px;

    color: var(--primary-dark);

    font-size: 17px;
}

.customers-empty-state p {
    margin: 0;

    color: var(--text-muted);

    font-size: 13px;
}


/* ==================================================
   Customer detail
   ================================================== */


/* --------------------------------------------------
   Hero
   -------------------------------------------------- */

.customer-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    margin-bottom: 24px;
    padding: 26px 28px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.customer-detail-hero-badges {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 10px;
}

.customer-detail-hero h2 {
    margin: 0;

    color: var(--primary-dark);

    font-size: 22px;
    line-height: 1.3;
}

.customer-detail-hero-subtitle {
    margin-top: 6px;

    color: var(--text-muted);

    font-size: 13px;
}

.customer-detail-hero-actions {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 9px;
}

.customer-detail-hero-actions .button {
    width: auto;
}


/* --------------------------------------------------
   Detailgrid
   -------------------------------------------------- */

.customer-detail-grid {
    display: grid;

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

    gap: 18px;

    align-items: stretch;
}

.customer-detail-card {
    grid-column: span 2;

    min-width: 0;
    height: 100%;

    padding: 22px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.customer-address-card {
    grid-column: span 3;
}


/* --------------------------------------------------
   Detailkarten Kopf
   -------------------------------------------------- */

.customer-detail-card-header {
    margin-bottom: 14px;
    padding-bottom: 13px;

    border-bottom: 1px solid var(--ui-border-soft);
}

.customer-detail-card-header .eyebrow {
    margin-bottom: 5px;
}

.customer-detail-card-header h2 {
    margin: 0;

    color: var(--primary-dark);

    font-size: 16px;
}


/* --------------------------------------------------
   Detailwerte
   -------------------------------------------------- */

.customer-detail-list {
    display: grid;

    grid-template-columns:
        minmax(110px, 0.8fr)
        minmax(0, 1.2fr);

    column-gap: 14px;

    margin: 0;
}

.customer-detail-list dt,
.customer-detail-list dd {
    margin: 0;

    padding: 9px 0;

    border-bottom: 1px solid var(--ui-border-soft);
}

.customer-detail-list dt {
    color: var(--text-muted);

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

.customer-detail-list dd {
    min-width: 0;

    color: var(--text);

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

    overflow-wrap: anywhere;
}

.customer-detail-list dt:last-of-type,
.customer-detail-list dd:last-of-type {
    border-bottom: 0;
}


/* --------------------------------------------------
   Adressen
   -------------------------------------------------- */

.customer-address-box {
    padding: 16px 18px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-left: 4px solid var(--primary);

    border-radius: 9px;

    color: var(--text);

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

.customer-address-box strong,
.customer-address-box span {
    display: block;
}

.customer-address-box strong {
    margin-bottom: 5px;

    font-size: 13px;
}

.customer-address-box span {
    color: var(--text-muted);

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

.customer-address-missing {
    background: #fff8e6;

    border-color: #ead7a2;
    border-left-color: #d89a24;

    color: #725f32;
}

.customer-address-missing strong {
    color: #7a5711;
}

.customer-address-neutral {
    border-left-color: #aebbbb;
}


/* ==================================================
   Customer repairs
   ================================================== */

.customer-repairs-section {
    margin-top: 34px;
}

.customer-repairs-section
> .section-header {
    margin-bottom: 14px;
}

.customer-repair-list {
    display: grid;

    gap: 10px;
}

.customer-repair-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding: 17px 19px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);

    border-radius: 10px;

    box-shadow:
        0 3px 12px rgba(15, 61, 62, 0.035);
}

.customer-repair-main {
    min-width: 0;
    flex: 1;
}

.customer-repair-header {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 6px;
}

.customer-repair-number {
    color: var(--primary-dark);

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

    text-decoration: none;
}

.customer-repair-number:hover {
    text-decoration: underline;
}

.customer-repair-device {
    font-size: 13px;
}

.customer-repair-device strong {
    font-weight: 600;
}

.customer-repair-meta {
    margin-top: 4px;

    color: var(--text-muted);

    font-size: 11px;
}

.customer-repair-card > .button {
    flex: 0 0 auto;

    width: auto;

    margin: 0;

    padding: 9px 13px;

    font-size: 12px;
}


/* ==================================================
   Responsive customers
   ================================================== */

@media (max-width: 1180px) {

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

    .customer-detail-card {
        grid-column: span 3;
    }

    .customer-address-card {
        grid-column: span 3;
    }

}


@media (max-width: 760px) {

    .customers-toolbar-top,
    .customers-search-row,
    .customer-detail-hero,
    .customer-repair-card {
        align-items: stretch;
        flex-direction: column;
    }

    .customers-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .customers-search-form input,
    .customers-search-form .button,
    .customers-toolbar-top > .button {
        width: 100%;
    }

    .customers-result-count {
        align-self: flex-start;
    }

    .customer-card-grid {
        grid-template-columns: 1fr;
    }

    .customer-detail-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-detail-hero-actions .button {
        width: 100%;
    }

    .customer-detail-grid {
        grid-template-columns: 1fr;
    }

    .customer-detail-card,
    .customer-address-card {
        grid-column: auto;
    }

    .customer-repair-card > .button {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .customers-toolbar-card,
    .customer-detail-hero,
    .customer-detail-card {
        padding: 20px;
    }

    .customer-detail-list {
        grid-template-columns: 1fr;
    }

    .customer-detail-list dt {
        padding-bottom: 3px;

        border-bottom: 0;
    }

    .customer-detail-list dd {
        padding-top: 0;
        padding-bottom: 10px;
    }

}



/* ==================================================
   Repairs overview redesign
   ================================================== */

.repairs-toolbar-card {
    margin-bottom: 24px;
    padding: 24px 26px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.repairs-toolbar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 22px;
}

.repairs-toolbar-top .section-description {
    max-width: 620px;
    margin-top: 6px;
}

.repairs-search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.repairs-search-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    flex: 1;

    gap: 9px;
}

.repairs-search-form input {
    width: min(560px, 100%);
    height: 42px;

    font-size: 13px;
}

.repairs-search-form .button {
    width: auto;

    padding: 9px 14px;

    white-space: nowrap;
}

.repairs-result-count {
    flex: 0 0 auto;

    padding: 7px 11px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 999px;

    color: var(--text-muted);

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


/* --------------------------------------------------
   Grid
   -------------------------------------------------- */

.repair-card-grid {
    display: grid;

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

    gap: 18px;

    align-items: stretch;
}


/* --------------------------------------------------
   Karte
   -------------------------------------------------- */

.repair-list-card {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 22px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.repair-list-card:hover {
    transform: translateY(-2px);

    box-shadow: var(--ui-shadow-hover);
}


/* --------------------------------------------------
   Kopf
   -------------------------------------------------- */

.repair-list-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 20px;
}

.repair-list-number {
    color: var(--primary-dark);

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

    text-decoration: none;
}

.repair-list-number:hover {
    text-decoration: underline;
}

.repair-list-card-header .status-pill {
    flex: 0 0 auto;

    font-size: 10px;
}


/* --------------------------------------------------
   Gerät
   -------------------------------------------------- */

.repair-list-device {
    min-height: 82px;

    margin-bottom: 17px;
}

.repair-list-label {
    margin-bottom: 5px;

    color: var(--text-muted);

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

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

.repair-list-device h2 {
    margin: 0;

    color: var(--primary-dark);

    font-size: 17px;
    line-height: 1.35;
}

.repair-list-serial {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: 11px;
}


/* --------------------------------------------------
   Kunde
   -------------------------------------------------- */

.repair-list-customer {
    margin-bottom: 18px;
    padding: 12px 14px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 9px;
}

.repair-list-customer-link {
    color: var(--text);

    font-size: 13px;
    font-weight: 650;

    text-decoration: none;
}

.repair-list-customer-link:hover {
    color: var(--primary);

    text-decoration: underline;
}

.repair-list-company {
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 11px;
}


/* --------------------------------------------------
   Meta
   -------------------------------------------------- */

.repair-list-meta {
    margin-bottom: 18px;
}

.repair-list-meta > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 9px 0;

    border-top: 1px solid var(--ui-border-soft);
    border-bottom: 1px solid var(--ui-border-soft);
}

.repair-list-meta span {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 650;
}

.repair-list-meta strong {
    color: var(--text);

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

    white-space: nowrap;
}


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

.repair-list-footer {
    margin-top: auto;
}

.repair-list-footer .button {
    width: 100%;

    margin: 0;

    padding: 9px 12px;

    font-size: 12px;
}


/* --------------------------------------------------
   Leerzustand
   -------------------------------------------------- */

.repairs-empty-state {
    padding: 30px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: var(--ui-radius-card);

    text-align: center;
}

.repairs-empty-state h2 {
    margin: 6px 0 8px;

    color: var(--primary-dark);

    font-size: 17px;
}

.repairs-empty-state p {
    margin: 0;

    color: var(--text-muted);

    font-size: 13px;
}


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

@media (max-width: 1180px) {

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

}

@media (max-width: 760px) {

    .repairs-toolbar-top,
    .repairs-search-row {
        align-items: stretch;
        flex-direction: column;
    }

    .repairs-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .repairs-search-form input,
    .repairs-search-form .button,
    .repairs-toolbar-top > .button {
        width: 100%;
    }

    .repairs-result-count {
        align-self: flex-start;
    }

    .repair-card-grid {
        grid-template-columns: 1fr;
    }

}



/* ==================================================
   Customer forms redesign
   ================================================== */


/* --------------------------------------------------
   Äußere Hülle entfernen
   -------------------------------------------------- */

.customer-form-card {
    max-width: 1100px;

    margin: 0 auto;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;
}


/* --------------------------------------------------
   Einzelne Bereiche als Karten
   -------------------------------------------------- */

.customer-admin-form
.form-section {
    margin: 0 0 20px;
    padding: 24px 26px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.customer-admin-form
.form-section:last-of-type {
    margin-bottom: 20px;
}

.customer-admin-form
.form-section > .eyebrow {
    margin-bottom: 5px;
}

.customer-admin-form
.form-section > h2 {
    margin: 0 0 20px;

    color: var(--primary-dark);

    font-size: 18px;
    line-height: 1.35;
}


/* --------------------------------------------------
   Formulargrid
   -------------------------------------------------- */

.customer-admin-form
.form-grid {
    display: grid;

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

    gap: 18px 20px;

    align-items: start;
}

.customer-admin-form
.form-field {
    min-width: 0;

    margin: 0;
}

.customer-admin-form
.form-field + .form-field {
    margin-top: 0;
}

.customer-admin-form
.form-field.form-wide {
    grid-column: 1 / -1;
}


/* --------------------------------------------------
   Labels
   -------------------------------------------------- */

.customer-admin-form
.form-field > label:not(.checkbox-label) {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
}


/* --------------------------------------------------
   Eingabefelder
   -------------------------------------------------- */

.customer-admin-form
input:not([type="checkbox"]),
.customer-admin-form
select {
    width: 100%;
    height: 42px;

    padding: 9px 11px;

    font-size: 13px;
}

.customer-admin-form
textarea {
    width: 100%;
    min-height: 120px;

    padding: 11px 12px;

    font-size: 13px;
    line-height: 1.55;

    resize: vertical;
}


/* --------------------------------------------------
   Hilfetexte
   -------------------------------------------------- */

.customer-admin-form
.field-help {
    display: block;

    margin-top: 7px;

    color: var(--text-muted);

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


/* --------------------------------------------------
   Checkboxen
   -------------------------------------------------- */

.customer-admin-form
.checkbox-label {
    display: flex;
    align-items: center;

    gap: 9px;

    width: fit-content;

    padding: 10px 13px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 8px;

    color: var(--text);

    font-size: 13px;
    font-weight: 550;

    cursor: pointer;
}

.customer-admin-form
.checkbox-label:hover {
    background: #f3f8f8;
}

.customer-admin-form
.checkbox-label input {
    flex: 0 0 auto;

    margin: 0;
}


/* Partner-Feld vertikal sauber ausrichten */

.customer-admin-form
.partner-field {
    display: flex;
    align-items: flex-end;

    min-height: 69px;
}


/* --------------------------------------------------
   Business-Bereiche
   -------------------------------------------------- */

.customer-admin-form
.business-section {
    border-top-color: var(--primary-dark);
}


/* --------------------------------------------------
   Rechnungs-/Lieferadresse leicht unterscheiden
   -------------------------------------------------- */

.customer-admin-form
.form-section:has(#billing_street) {
    border-top-color: var(--primary);
}

.customer-admin-form
.form-section:has(#shipping_street),
.customer-admin-form
.form-section:has(#shipping_same_as_billing) {
    border-top-color: var(--primary-dark);
}


/* --------------------------------------------------
   Fokus
   -------------------------------------------------- */

.customer-admin-form
input:focus,
.customer-admin-form
select:focus,
.customer-admin-form
textarea:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(31, 111, 115, 0.10);
}


/* --------------------------------------------------
   Formfehler
   -------------------------------------------------- */

.customer-form-card
.form-error {
    margin-bottom: 20px;
    padding: 14px 16px;

    background: #fff5f5;

    border: 1px solid #e6caca;
    border-left: 4px solid #b85b5b;
    border-radius: 9px;

    color: #7d3030;

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


/* --------------------------------------------------
   Aktionen
   -------------------------------------------------- */

.customer-admin-form
> .form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin: 24px 0 0;
    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary-dark);
    border-radius: var(--ui-radius-card);

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

.customer-admin-form
> .form-actions .button {
    width: auto;

    margin: 0;

    padding: 10px 16px;
}


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

@media (max-width: 700px) {

    .customer-admin-form
    .form-section {
        padding: 20px;
    }

    .customer-admin-form
    .form-grid {
        grid-template-columns: 1fr;
    }

    .customer-admin-form
    .form-field.form-wide {
        grid-column: auto;
    }

    .customer-admin-form
    .partner-field {
        min-height: 0;

        align-items: stretch;
    }

    .customer-admin-form
    > .form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .customer-admin-form
    > .form-actions .button {
        width: 100%;
    }

}



/* ==================================================
   Repair forms redesign
   ================================================== */


/* --------------------------------------------------
   Äußere Hülle
   -------------------------------------------------- */

.repair-form-card {
    max-width: 1100px;

    margin: 0 auto;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;
}


/* --------------------------------------------------
   Formularbereiche als Karten
   -------------------------------------------------- */

.repair-admin-form
.form-section {
    margin: 0 0 20px;
    padding: 24px 26px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.repair-admin-form
.form-section:last-of-type {
    margin-bottom: 20px;
}

.repair-admin-form
.form-section > .eyebrow {
    margin-bottom: 5px;
}

.repair-admin-form
.form-section > h2 {
    margin: 0 0 20px;

    color: var(--primary-dark);

    font-size: 18px;
    line-height: 1.35;
}


/* --------------------------------------------------
   Grid
   -------------------------------------------------- */

.repair-admin-form
.form-grid {
    display: grid;

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

    gap: 18px 20px;

    align-items: start;
}

.repair-admin-form
.form-field {
    min-width: 0;

    margin: 0;
}

.repair-admin-form
.form-field + .form-field {
    margin-top: 0;
}

.repair-admin-form
.form-field.form-wide {
    grid-column: 1 / -1;
}


/* --------------------------------------------------
   Labels
   -------------------------------------------------- */

.repair-admin-form
.form-field > label:not(.checkbox-label) {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
}


/* --------------------------------------------------
   Inputs
   -------------------------------------------------- */

.repair-admin-form
input:not([type="checkbox"]),
.repair-admin-form
select {
    width: 100%;
    height: 42px;

    padding: 9px 11px;

    font-size: 13px;
}

.repair-admin-form
textarea {
    width: 100%;
    min-height: 110px;

    padding: 11px 12px;

    font-size: 13px;
    line-height: 1.6;

    resize: vertical;
}


/* Fehlerbeschreibung etwas größer */

.repair-admin-form
#customer_fault_description {
    min-height: 150px;
}


/* Lieferumfang */

.repair-admin-form
#delivery_contents {
    min-height: 125px;
}


/* --------------------------------------------------
   Hilfetexte
   -------------------------------------------------- */

.repair-admin-form
.field-help,
.repair-admin-form
.form-hint {
    display: block;

    margin-top: 7px;

    color: var(--text-muted);

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


/* --------------------------------------------------
   Checkbox
   -------------------------------------------------- */

.repair-admin-form
.checkbox-label {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 10px 13px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 8px;

    color: var(--text);

    font-size: 13px;
    font-weight: 550;

    cursor: pointer;
}

.repair-admin-form
.checkbox-label:hover {
    background: #f3f8f8;
}

.repair-admin-form
.checkbox-label input {
    flex: 0 0 auto;

    margin: 0;
}


/* JS setzt display:flex */

.repair-admin-form
#previous-repair-details {
    flex-direction: column;
}


/* --------------------------------------------------
   Freibetrag
   -------------------------------------------------- */

.repair-admin-form
#allowance {
    min-width: 0;
}

.repair-admin-form
.input-with-suffix {
    width: 190px;
    max-width: 100%;
}


/* --------------------------------------------------
   Zugangsdaten
   -------------------------------------------------- */

.repair-admin-form
.form-section:has(#unlock_code) {
    border-top-color: var(--primary-dark);
}

.repair-admin-form
#unlock_code {
    max-width: 480px;
}


/* --------------------------------------------------
   Fokus
   -------------------------------------------------- */

.repair-admin-form
input:focus,
.repair-admin-form
select:focus,
.repair-admin-form
textarea:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(31, 111, 115, 0.10);
}


/* --------------------------------------------------
   Fehler
   -------------------------------------------------- */

.repair-form-card
.form-error {
    margin-bottom: 20px;
    padding: 14px 16px;

    background: #fff5f5;

    border: 1px solid #e6caca;
    border-left: 4px solid #b85b5b;
    border-radius: 9px;

    color: #7d3030;

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


/* --------------------------------------------------
   Bearbeiten: Auftragsreferenz
   -------------------------------------------------- */

.repair-edit-reference {
    margin: 0 0 20px;
    padding: 22px 24px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary-dark);

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

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

.repair-edit-reference .eyebrow {
    margin-bottom: 5px;
}

.repair-edit-reference h2 {
    margin: 0;

    color: var(--primary-dark);

    font-size: 20px;
}

.repair-edit-reference p {
    margin: 8px 0 0;

    font-size: 13px;
}


/* --------------------------------------------------
   Aktionen
   -------------------------------------------------- */

.repair-admin-form
> .form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin: 24px 0 0;
    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary-dark);
    border-radius: var(--ui-radius-card);

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

.repair-admin-form
> .form-actions .button {
    width: auto;

    margin: 0;

    padding: 10px 16px;
}


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

@media (max-width: 700px) {

    .repair-admin-form
    .form-section {
        padding: 20px;
    }

    .repair-admin-form
    .form-grid {
        grid-template-columns: 1fr;
    }

    .repair-admin-form
    .form-field.form-wide {
        grid-column: auto;
    }

    .repair-admin-form
    .input-with-suffix {
        width: 100%;
    }

    .repair-admin-form
    #unlock_code {
        max-width: none;
    }

    .repair-admin-form
    > .form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .repair-admin-form
    > .form-actions .button {
        width: 100%;
    }

}



/* ==================================================
   Modern overview tables
   Customers + Repairs
   ================================================== */

.overview-table-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.overview-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.overview-table {
    width: 100%;

    border-collapse: collapse;
    border-spacing: 0;

    font-size: 13px;
}


/* --------------------------------------------------
   Kopf
   -------------------------------------------------- */

.overview-table thead {
    background: var(--ui-surface-soft);
}

.overview-table th {
    padding: 13px 16px;

    border-bottom: 1px solid var(--ui-border-soft);

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 750;

    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    white-space: nowrap;
}


/* --------------------------------------------------
   Zeilen
   -------------------------------------------------- */

.overview-table td {
    padding: 14px 16px;

    border-bottom: 1px solid var(--ui-border-soft);

    color: var(--text);

    line-height: 1.45;

    vertical-align: middle;
}

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

.overview-table tbody tr {
    transition:
        background 0.12s ease;
}

.overview-table tbody tr:hover {
    background: #f8fbfb;
}


/* --------------------------------------------------
   Links
   -------------------------------------------------- */

.overview-primary-link {
    color: var(--primary-dark);

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    white-space: nowrap;
}

.overview-primary-link:hover {
    color: var(--primary);

    text-decoration: underline;
}

.overview-customer-link {
    color: var(--text);

    font-weight: 650;

    text-decoration: none;
}

.overview-customer-link:hover {
    color: var(--primary);

    text-decoration: underline;
}


/* --------------------------------------------------
   Sekundärinformationen
   -------------------------------------------------- */

.overview-table-sub {
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 11px;
    line-height: 1.4;
}

.overview-table-date {
    color: var(--text-muted);

    font-size: 11px;

    white-space: nowrap;
}


/* --------------------------------------------------
   Badges in Tabellen kompakt
   -------------------------------------------------- */

.overview-table
.customer-type-badge,
.overview-table
.customer-partner-badge {
    margin-right: 4px;

    padding: 5px 8px;

    font-size: 10px;
}

.overview-table
.status-pill {
    padding: 6px 10px;

    font-size: 10px;

    white-space: nowrap;
}


/* --------------------------------------------------
   Keine Ergebnisse
   -------------------------------------------------- */

.overview-table-empty {
    padding: 24px;

    color: var(--text-muted);

    font-size: 13px;

    text-align: center;
}


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

@media (max-width: 760px) {

    .overview-table {
        min-width: 760px;
    }

    .overview-table th,
    .overview-table td {
        padding:
            12px 13px;
    }

}



/* ==================================================
   Shipping overview redesign
   ================================================== */

.shipping-overview-toolbar {
    margin-bottom: 24px;
    padding: 24px 26px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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


/* --------------------------------------------------
   Kopf
   -------------------------------------------------- */

.shipping-overview-toolbar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 22px;
}

.shipping-overview-toolbar-top h2 {
    margin: 4px 0 0;

    color: var(--primary-dark);

    font-size: 19px;
}

.shipping-overview-toolbar-top
.section-description {
    margin-top: 6px;
}


.shipping-result-count {
    flex: 0 0 auto;

    padding: 7px 11px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 999px;

    color: var(--text-muted);

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


/* --------------------------------------------------
   Filter
   -------------------------------------------------- */

.shipping-overview-filter {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.7fr)
        minmax(180px, 0.8fr)
        minmax(160px, 0.7fr)
        auto;

    gap: 14px;

    align-items: end;
}

.shipping-overview-filter > div {
    min-width: 0;
}

.shipping-overview-filter label {
    display: block;

    margin-bottom: 6px;

    color: var(--text);

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

.shipping-overview-filter input,
.shipping-overview-filter select {
    width: 100%;
    height: 42px;

    padding: 9px 11px;

    font-size: 13px;
}

.shipping-overview-filter-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}

.shipping-overview-filter-actions
.button {
    width: auto;

    margin: 0;

    padding: 9px 13px;

    white-space: nowrap;
}


/* --------------------------------------------------
   Tabelle
   -------------------------------------------------- */

.shipping-overview-table {
    min-width: 1180px;
}

.shipping-overview-table td {
    white-space: nowrap;
}


/* Kunde darf umbrechen */

.shipping-overview-table
td:nth-child(2) {
    min-width: 170px;

    white-space: normal;
}


/* Status darf ebenfalls umbrechen */

.shipping-overview-table
td:nth-child(7) {
    min-width: 150px;

    white-space: normal;
}


/* --------------------------------------------------
   Versandrichtung
   -------------------------------------------------- */

.shipping-direction-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 8px;

    border-radius: 999px;

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

    white-space: nowrap;
}

.shipping-direction-inbound {
    background: rgba(31, 111, 115, 0.10);

    color: var(--primary-dark);
}

.shipping-direction-outbound {
    background: #eef2f7;

    color: #43546a;
}


/* --------------------------------------------------
   Tracking
   -------------------------------------------------- */

.shipping-tracking-link {
    color: var(--primary);

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

    text-decoration: none;
}

.shipping-tracking-link:hover {
    text-decoration: underline;
}


/* --------------------------------------------------
   DHL Live-Status
   -------------------------------------------------- */

.shipping-live-status {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.shipping-live-status strong {
    color: var(--primary-dark);

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

.shipping-live-status small {
    color: var(--text-muted);

    font-size: 10px;
    line-height: 1.4;
}


/* --------------------------------------------------
   Detailspalten
   -------------------------------------------------- */

.shipping-reference-cell,
.shipping-weight-cell {
    color: var(--text-muted);

    font-size: 11px;
}

.shipping-action-cell {
    text-align: right;
}

.shipping-action-cell .button {
    width: auto;

    margin: 0;

    padding: 7px 11px;

    font-size: 11px;
}


/* --------------------------------------------------
   Hover etwas deutlicher
   -------------------------------------------------- */

.shipping-overview-table
tbody tr:hover {
    background: #f5f9f9;
}


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

@media (max-width: 1050px) {

    .shipping-overview-filter {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .shipping-filter-search {
        grid-column: 1 / -1;
    }

}


@media (max-width: 700px) {

    .shipping-overview-toolbar {
        padding: 20px;
    }

    .shipping-overview-toolbar-top {
        flex-direction: column;

        gap: 14px;
    }

    .shipping-overview-filter {
        grid-template-columns: 1fr;
    }

    .shipping-filter-search {
        grid-column: auto;
    }

    .shipping-overview-filter-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .shipping-overview-filter-actions
    .button {
        width: 100%;
    }

}



/* ==================================================
   DHL tracking full redesign
   ================================================== */


/* --------------------------------------------------
   Seite
   -------------------------------------------------- */

.tracking-section {
    max-width: 1100px;
    margin: 0 auto;
}


/* --------------------------------------------------
   Kopfkarte
   -------------------------------------------------- */

.tracking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    margin-bottom: 22px;
    padding: 24px 26px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.tracking-header h2 {
    margin: 5px 0 12px;

    color: var(--primary-dark);

    font-size: 20px;
    line-height: 1.3;
}

.tracking-header .button {
    flex: 0 0 auto;
    width: auto;

    margin: 0;
}


/* --------------------------------------------------
   Trackingnummer
   -------------------------------------------------- */

.tracking-number {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    padding: 7px 10px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 8px;

    font-family: inherit;
}

.tracking-number span {
    color: var(--text-muted);

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

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

.tracking-number strong {
    color: var(--primary-dark);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 12px;
    font-weight: 700;
}


/* --------------------------------------------------
   Zusammenfassung
   -------------------------------------------------- */

.tracking-summary-grid {
    display: grid;

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

    gap: 18px;

    align-items: stretch;

    margin-bottom: 22px;
}

.tracking-summary-card {
    min-width: 0;
    min-height: 118px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 21px 22px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.tracking-summary-status {
    background:
        linear-gradient(
            135deg,
            rgba(31, 111, 115, 0.055),
            #ffffff 65%
        );

    border-color: var(--ui-border-soft);
    border-top-color: var(--primary-dark);
}

.tracking-summary-label {
    margin-bottom: 8px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 750;

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

.tracking-summary-value {
    color: var(--text);

    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.tracking-status-value {
    color: var(--primary-dark);

    font-size: 15px;
    font-weight: 750;
}


/* --------------------------------------------------
   Verlaufskarte
   -------------------------------------------------- */

.tracking-card {
    padding: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary-dark);

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

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

.tracking-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin: 0;
    padding: 20px 24px;

    background: var(--ui-surface-soft);

    border-bottom: 1px solid var(--ui-border-soft);
}

.tracking-card-header .eyebrow {
    margin-bottom: 4px;
}

.tracking-card-header h3 {
    margin: 0;

    color: var(--primary-dark);

    font-size: 17px;
}

.tracking-event-count {
    flex: 0 0 auto;

    padding: 6px 9px;

    background: #ffffff;

    border: 1px solid var(--ui-border-soft);
    border-radius: 999px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 700;
}


/* --------------------------------------------------
   Timeline
   -------------------------------------------------- */

.tracking-timeline {
    position: relative;

    margin: 0;
    padding:
        18px
        24px
        22px
        52px;
}

.tracking-timeline::before {
    content: "";

    position: absolute;

    top: 30px;
    bottom: 30px;
    left: 31px;

    width: 2px;

    background: var(--ui-border-soft);
}

.tracking-timeline-item {
    position: relative;

    margin: 0 0 10px;
    padding: 14px 16px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 9px;
}

.tracking-timeline-item:last-child {
    margin-bottom: 0;
}


/* aktuelles / oberstes Ereignis */

.tracking-timeline-item:first-child {
    padding: 15px 16px;

    background:
        rgba(31, 111, 115, 0.055);

    border-color:
        rgba(31, 111, 115, 0.22);
}


/* Marker */

.tracking-timeline-marker {
    position: absolute;

    top: 20px;
    left: -28px;

    width: 11px;
    height: 11px;

    background: #ffffff;

    border: 3px solid var(--primary);
    border-radius: 50%;

    box-sizing: border-box;
}

.tracking-timeline-item:first-child
.tracking-timeline-marker {
    top: 20px;
    left: -30px;

    width: 15px;
    height: 15px;

    background: var(--primary);

    border: 3px solid #ffffff;

    box-shadow:
        0 0 0 2px var(--primary);
}


/* --------------------------------------------------
   Ereignisdaten
   -------------------------------------------------- */

.tracking-timeline-content {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.tracking-timeline-date {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

.tracking-timeline-status {
    color: var(--text);

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

.tracking-timeline-item:first-child
.tracking-timeline-status {
    color: var(--primary-dark);
}

.tracking-timeline-location {
    color: var(--text-muted);

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


/* --------------------------------------------------
   Keine Daten
   -------------------------------------------------- */

.tracking-empty {
    margin: 22px 24px;
    padding: 22px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 9px;

    text-align: center;
}

.tracking-empty-title {
    margin-bottom: 6px;

    color: var(--primary-dark);

    font-size: 14px;
    font-weight: 750;
}

.tracking-empty-text {
    color: var(--text-muted);

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


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

@media (max-width: 700px) {

    .tracking-header {
        align-items: stretch;
        flex-direction: column;

        gap: 18px;

        padding: 20px;
    }

    .tracking-header .button {
        width: 100%;
    }

    .tracking-summary-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .tracking-summary-card {
        min-height: 0;
    }

    .tracking-card-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 9px;

        padding: 18px 20px;
    }

    .tracking-timeline {
        padding:
            16px
            18px
            18px
            44px;
    }

    .tracking-timeline::before {
        left: 25px;
    }

    .tracking-timeline-marker {
        left: -25px;
    }

    .tracking-timeline-item:first-child
    .tracking-timeline-marker {
        left: -27px;
    }

}



/* ==================================================
   Dashboard full redesign
   ================================================== */


/* --------------------------------------------------
   Hero
   -------------------------------------------------- */

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    margin-bottom: 22px;
    padding: 24px 26px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.dashboard-hero h2 {
    margin: 4px 0 0;

    color: var(--primary-dark);

    font-size: 20px;
    line-height: 1.3;
}

.dashboard-hero .section-description {
    margin-top: 7px;
}

.dashboard-hero-actions {
    display: flex;
    align-items: center;

    gap: 9px;

    flex: 0 0 auto;
}

.dashboard-hero-actions .button {
    width: auto;

    margin: 0;
}


/* --------------------------------------------------
   KPI
   -------------------------------------------------- */

.dashboard-kpi-grid {
    display: grid;

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

    gap: 16px;

    align-items: stretch;

    margin-bottom: 32px;
}

.dashboard-kpi-card {
    min-width: 0;
    min-height: 130px;

    display: flex;
    flex-direction: column;

    padding: 20px 21px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.dashboard-kpi-open {
    border-top-color: var(--primary-dark);
}

.dashboard-kpi-express {
    border-top-color: #a71d2a;
    background: #fff8f8;
}

.dashboard-kpi-express .dashboard-kpi-value {
    color: #a71d2a;
}

.dashboard-kpi-ready {
    background:
        linear-gradient(
            135deg,
            rgba(31, 111, 115, 0.055),
            #ffffff 68%
        );

    border-top-color: var(--primary-dark);
}

.dashboard-kpi-label {
    margin-bottom: 7px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 750;

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

.dashboard-kpi-value {
    margin-bottom: 5px;

    color: var(--primary-dark);

    font-size: 30px;
    font-weight: 750;
    line-height: 1.1;
}

.dashboard-kpi-meta {
    margin-top: auto;

    color: var(--text-muted);

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


/* --------------------------------------------------
   Bereiche
   -------------------------------------------------- */

.dashboard-workflow-section,
.dashboard-recent-section {
    margin-top: 30px;
}

.dashboard-workflow-section
> .section-header,
.dashboard-recent-section
> .section-header {
    margin-bottom: 14px;
}


/* --------------------------------------------------
   Workflow
   -------------------------------------------------- */

.dashboard-workflow-grid {
    display: grid;

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

    gap: 12px;
}

.dashboard-workflow-card {
    min-width: 0;

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

    gap: 14px;

    min-height: 68px;

    padding: 14px 16px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-left: 4px solid #cad8d8;

    border-radius: 9px;

    box-shadow:
        0 3px 12px rgba(15, 61, 62, 0.035);
}

.dashboard-workflow-active {
    border-left-color: var(--primary);
}

.dashboard-workflow-name {
    min-width: 0;

    color: var(--text);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.dashboard-workflow-count {
    flex: 0 0 auto;

    min-width: 34px;
    height: 34px;

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

    padding: 0 8px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 999px;

    color: var(--primary-dark);

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

.dashboard-workflow-active
.dashboard-workflow-count {
    background: rgba(31, 111, 115, 0.10);

    border-color: rgba(31, 111, 115, 0.18);
}


/* --------------------------------------------------
   Letzte Aufträge
   -------------------------------------------------- */

.dashboard-recent-section
.section-header .button {
    width: auto;
}

.dashboard-recent-table {
    min-width: 760px;
}

.dashboard-recent-table
td:nth-child(2) {
    min-width: 220px;
}

.dashboard-recent-action {
    width: 1%;

    text-align: right;

    white-space: nowrap;
}

.dashboard-recent-action
.button {
    width: auto;

    margin: 0;

    padding: 7px 11px;

    font-size: 11px;
}


/* --------------------------------------------------
   Empty
   -------------------------------------------------- */

.dashboard-empty {
    padding: 28px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: var(--ui-radius-card);

    text-align: center;
}

.dashboard-empty h3 {
    margin: 6px 0 8px;

    color: var(--primary-dark);

    font-size: 16px;
}

.dashboard-empty p {
    margin: 0;

    color: var(--text-muted);

    font-size: 12px;
}


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

@media (max-width: 1100px) {

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

}


@media (max-width: 700px) {

    .dashboard-hero {
        align-items: stretch;
        flex-direction: column;

        padding: 20px;
    }

    .dashboard-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

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

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

        gap: 10px;
    }

    .dashboard-kpi-card {
        min-height: 115px;

        padding: 17px;
    }

    .dashboard-kpi-value {
        font-size: 26px;
    }

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

}


@media (max-width: 430px) {

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

}



/* ==================================================
   DHL validation final redesign
   ================================================== */

.dhl-validation-section {
    max-width: 760px;
    margin: 0 auto;
}

.dhl-validation-card {
    padding: 30px 32px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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


/* Erfolg */

.dhl-validation-success {
    border-top-color: var(--primary);
}


/* Fehler */

.dhl-validation-failed {
    border-top-color: #b85b5b;
}


/* Icon */

.dhl-validation-icon {
    width: 44px;
    height: 44px;

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

    margin-bottom: 18px;

    border-radius: 50%;

    font-size: 20px;
    font-weight: 750;
}

.dhl-validation-icon.success {
    background: rgba(31, 111, 115, 0.10);

    border: 1px solid rgba(31, 111, 115, 0.20);

    color: var(--primary-dark);
}

.dhl-validation-icon.error {
    background: #fff3f3;

    border: 1px solid #e8caca;

    color: #9a4141;
}


/* Überschrift */

.dhl-validation-card h2 {
    margin: 5px 0 9px;

    color: var(--primary-dark);

    font-size: 20px;
    line-height: 1.35;
}

.dhl-validation-message {
    max-width: 600px;

    margin: 0;

    color: var(--text-muted);

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


/* Fehlermeldung */

.dhl-validation-error {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-top: 20px;
    padding: 14px 16px;

    background: #fff6f6;

    border: 1px solid #e8cccc;
    border-left: 4px solid #b85b5b;

    border-radius: 9px;
}

.dhl-validation-error strong {
    color: #813939;

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

.dhl-validation-error span {
    color: #785353;

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


/* technische Details */

.dhl-validation-details {
    margin-top: 18px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 9px;

    overflow: hidden;
}

.dhl-validation-details summary {
    padding: 12px 14px;

    color: var(--primary-dark);

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

    cursor: pointer;
}

.dhl-validation-details pre {
    max-height: 300px;
    overflow: auto;

    margin: 0;
    padding: 14px;

    background: #ffffff;

    border-top: 1px solid var(--ui-border-soft);

    font-size: 11px;
    line-height: 1.5;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* Aktionen */

.dhl-validation-actions {
    display: flex;

    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid var(--ui-border-soft);
}

.dhl-validation-actions .button {
    width: auto;

    margin: 0;
}


@media (max-width: 700px) {

    .dhl-validation-card {
        padding: 22px 20px;
    }

    .dhl-validation-actions .button {
        width: 100%;
    }

}



/* ==================================================
   Application shell final polish
   ================================================== */


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

.sidebar {
    border-right:
        1px solid rgba(255, 255, 255, 0.07);

    box-shadow:
        4px 0 20px rgba(0, 0, 0, 0.045);
}


/* Branding */

.brand {
    padding-bottom: 22px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}

.brand-name {
    letter-spacing: -0.02em;
}

.brand-subtitle {
    margin-top: 5px;

    opacity: 1;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
    line-height: 1.4;
}


/* --------------------------------------------------
   Navigation
   -------------------------------------------------- */

.navigation {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.nav-item {
    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 10px 12px;

    border-radius: 9px;

    transition:
        background 0.14s ease,
        color 0.14s ease,
        transform 0.14s ease;
}

.nav-item:not(.disabled):hover {
    transform: translateX(2px);
}

.nav-item span {
    width: 21px;

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

    flex: 0 0 21px;

    font-size: 14px;
}


/* Aktiver Menüpunkt */

.nav-item.active {
    font-weight: 650;
}


/* Deaktiviert */

.nav-item.disabled {
    opacity: 0.42;

    cursor: default;
}


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

.sidebar-bottom {
    padding-top: 18px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.user-mini {
    min-width: 0;
}

.user-mini strong,
.user-mini small {
    display: block;
}

.user-mini small {
    margin-top: 2px;

    opacity: 1;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
}

.logout-link {
    font-size: 11px;
}


/* --------------------------------------------------
   Topbar
   -------------------------------------------------- */

.topbar {
    align-items: center;

    margin-bottom: 26px;
    padding-bottom: 18px;

    border-bottom: 1px solid var(--ui-border-soft);
}

.topbar h1 {
    margin-top: 4px;

    color: var(--primary-dark);

    letter-spacing: -0.02em;
}

.topbar-actions {
    display: flex;
    align-items: center;
}


/* Systemstatus */

.server-status {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    background: #ffffff;

    border: 1px solid var(--ui-border-soft);
    border-radius: 999px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 650;
}

.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    flex: 0 0 7px;
}


/* --------------------------------------------------
   Mobile Topbar
   -------------------------------------------------- */

@media (max-width: 700px) {

    .topbar {
        align-items: flex-start;

        gap: 12px;
    }

    .server-status {
        padding: 6px 9px;
    }

}



/* ==================================================
   Global empty states
   ================================================== */

.empty-state,
.empty-inline {
    color: var(--text-muted);
}

.empty-state {
    padding: 28px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: var(--ui-radius-card);

    text-align: center;
}

.empty-state h3 {
    margin: 6px 0 7px;

    color: var(--primary-dark);

    font-size: 15px;
}

.empty-state p {
    max-width: 520px;

    margin:
        0
        auto;

    color: var(--text-muted);

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

.empty-inline {
    padding: 18px;

    font-size: 12px;

    text-align: center;
}



/* ==================================================
   Global form errors
   ================================================== */

.form-error {
    margin-bottom: 20px;
    padding: 14px 16px;

    background: #fff5f5;

    border: 1px solid #e6caca;
    border-left: 4px solid #b85b5b;

    border-radius: 9px;

    color: #7d3030;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
}



/* ==================================================
   Global application error page
   ================================================== */

.app-error-section {
    max-width: 760px;
    margin: 0 auto;
}

.app-error-card {
    padding: 30px 32px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid #b85b5b;

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

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

.app-error-icon {
    width: 44px;
    height: 44px;

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

    margin-bottom: 18px;

    background: #fff3f3;

    border: 1px solid #e8caca;
    border-radius: 50%;

    color: #9a4141;

    font-size: 20px;
    font-weight: 750;
}

.app-error-card h2 {
    margin: 5px 0 9px;

    color: var(--primary-dark);

    font-size: 20px;
    line-height: 1.35;
}

.app-error-message {
    max-width: 620px;

    margin: 0;

    color: var(--text-muted);

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

.app-error-details {
    margin-top: 20px;

    background: var(--ui-surface-soft);

    border: 1px solid var(--ui-border-soft);
    border-radius: 9px;

    overflow: hidden;
}

.app-error-details summary {
    padding: 12px 14px;

    color: var(--primary-dark);

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

    cursor: pointer;
}

.app-error-details pre {
    max-height: 320px;
    overflow: auto;

    margin: 0;
    padding: 14px;

    background: #ffffff;

    border-top: 1px solid var(--ui-border-soft);

    font-size: 11px;
    line-height: 1.5;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.app-error-actions {
    display: flex;

    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid var(--ui-border-soft);
}

.app-error-actions .button {
    width: auto;
    margin: 0;
}


@media (max-width: 700px) {

    .app-error-card {
        padding: 22px 20px;
    }

    .app-error-actions .button {
        width: 100%;
    }

}



/* ==================================================
   Public customer confirmation error
   ================================================== */

.public-error-page {
    min-height: 100vh;

    margin: 0;

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

    padding: 24px;

    background: #f5f5f5;
}

.public-error-shell {
    width: 100%;
    max-width: 680px;
}

.public-error-card {
    padding: 34px 36px;

    background: #ffffff;

    border: 1px solid var(--ui-border-soft);
    border-top: 3px solid #b85b5b;
    border-radius: var(--ui-radius-card);

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

.public-error-icon {
    width: 46px;
    height: 46px;

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

    margin-bottom: 20px;

    background: #fff3f3;

    border: 1px solid #e8caca;
    border-radius: 50%;

    color: #9a4141;

    font-size: 21px;
    font-weight: 750;
}

.public-error-card h1 {
    margin: 6px 0 12px;

    color: var(--primary-dark);

    font-size: 24px;
    line-height: 1.3;
}

.public-error-card p {
    margin: 8px 0 0;

    color: var(--text-muted);

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


@media (max-width: 600px) {

    .public-error-page {
        padding: 16px;
    }

    .public-error-card {
        padding: 26px 22px;
    }

    .public-error-card h1 {
        font-size: 21px;
    }

}



/* ==================================================
   Global responsive final pass
   ================================================== */


/* Verhindert unnötiges Überlaufen durch Grid/Flex-Kinder */

.main-content,
.main-content > *,
.topbar,
.topbar > *,
section,
article {
    min-width: 0;
}


/* Medien dürfen nie den Inhaltsbereich sprengen */

.main-content img,
.main-content video,
.main-content iframe {
    max-width: 100%;
}


/* Lange technische Inhalte */

.main-content pre,
.main-content code,
.main-content a {
    overflow-wrap: anywhere;
}


/* Tabellen bleiben bewusst horizontal scrollbar */

.table-wrap,
.overview-table-wrap {
    max-width: 100%;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* --------------------------------------------------
   Kleiner Desktop / Tablet
   -------------------------------------------------- */

@media (max-width: 1100px) {

    .main-content {
        padding:
            30px
            30px
            50px;
    }

}


/* --------------------------------------------------
   Mobile Navigation / App Shell
   -------------------------------------------------- */

@media (max-width: 800px) {

    .sidebar {
        position: static;

        width: 100%;
        min-height: auto;

        border-right: 0;

        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.06);
    }


    .brand {
        padding:
            20px
            18px
            16px;
    }

    .brand-name {
        font-size: 22px;
    }

    .brand-subtitle {
        margin-top: 4px;

        font-size: 9px;
    }


    .navigation {
        display: flex;

        gap: 5px;

        padding:
            11px
            14px
            12px;

        overflow-x: auto;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
    }

    .nav-item {
        min-height: 39px;

        flex:
            0
            0
            auto;

        margin-bottom: 0;

        padding:
            9px
            11px;

        white-space: nowrap;
    }


    /*
     * Die alte Regel blendet sidebar-bottom komplett aus.
     * Dadurch wäre auf Mobile auch Abmelden verschwunden.
     */

    .sidebar-bottom {
        display: flex;

        align-items: center;
        justify-content: flex-end;

        margin-top: 0;

        padding:
            10px
            18px
            13px;

        border-top:
            1px solid rgba(255, 255, 255, 0.08);
    }

    .sidebar-bottom .user-mini {
        display: none;
    }

    .sidebar-bottom .logout-link {
        margin-top: 0;

        font-size: 11px;
    }


    .main-content {
        width: 100%;

        margin-left: 0;

        padding:
            24px
            18px
            40px;
    }


    .topbar {
        margin-bottom: 24px;

        padding:
            0
            0
            16px;
    }

}


/* --------------------------------------------------
   Smartphone
   -------------------------------------------------- */

@media (max-width: 700px) {

    .main-content {
        padding:
            20px
            14px
            36px;
    }

    .topbar h1 {
        font-size: 25px;
        line-height: 1.2;
    }

    .topbar .eyebrow {
        font-size: 10px;
    }


    /*
     * Lange URLs, Trackingnummern usw.
     * dürfen Karten nicht verbreitern.
     */

    .detail-card,
    .form-section,
    .repair-primary-card,
    .repair-subsection,
    .tracking-card,
    .app-error-card,
    .dhl-validation-card {
        min-width: 0;
    }

}


/* --------------------------------------------------
   Sehr schmale Geräte
   -------------------------------------------------- */

@media (max-width: 430px) {

    .main-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .brand {
        padding-left: 14px;
        padding-right: 14px;
    }

    .navigation {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sidebar-bottom {
        padding-left: 14px;
        padding-right: 14px;
    }

}



/* ==================================================
   Responsive application navigation
   ================================================== */


/* --------------------------------------------------
   Desktop
   -------------------------------------------------- */

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


.mobile-nav-panel {
    min-height: 0;

    flex: 1;

    display: flex;
    flex-direction: column;
}


.sidebar {
    height: 100vh;
    height: 100dvh;

    overflow: hidden;
}


.sidebar .navigation {
    min-height: 0;

    overflow-y: auto;
}


.nav-item.disabled {
    pointer-events: none;
}


/* --------------------------------------------------
   Mobile / Tablet / low-height landscape
   --------------------------------------------------

   Zwei Kriterien:

   1. Breite <= 960 px
   2. geringe Höhe <= 600 px bei Breite <= 1200 px

   Punkt 2 fängt Smartphones im Querformat ab.
   -------------------------------------------------- */

@media
(max-width: 960px),
(max-height: 600px) and (max-width: 1200px) {

    .app-shell {
        display: block;
    }


    /* ----------------------------------------------
       Kompakte obere Navigation
       ---------------------------------------------- */

    .sidebar {
        position: sticky;
        inset: auto;

        top: 0;

        z-index: 1000;

        width: 100%;
        height: auto;
        min-height: 0;

        overflow: visible;

        border-right: 0;

        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.07);
    }


    .brand {
        min-height: 66px;

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

        gap: 16px;

        padding:
            14px
            18px;

        border-bottom: 0;
    }


    .brand-content {
        min-width: 0;
    }


    .brand-name {
        font-size: 21px;
    }


    .brand-subtitle {
        margin-top: 3px;

        font-size: 9px;
    }


    /* ----------------------------------------------
       Menübutton
       ---------------------------------------------- */

    .mobile-nav-toggle {
        flex:
            0
            0
            auto;

        min-height: 40px;

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

        gap: 7px;

        padding:
            8px
            12px;

        border:
            1px solid rgba(
                255,
                255,
                255,
                0.18
            );

        border-radius: 8px;

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

        color: #ffffff;

        font: inherit;

        cursor: pointer;
    }


    .mobile-nav-toggle:hover {
        background:
            rgba(
                255,
                255,
                255,
                0.13
            );
    }


    .mobile-nav-toggle-icon {
        width: 16px;

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

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


    .mobile-nav-toggle-label {
        font-size: 12px;
        font-weight: 650;
    }


    /* ----------------------------------------------
       Einklappbares Panel
       ---------------------------------------------- */

    .mobile-nav-panel {
        display: none;

        max-height:
            calc(100vh - 66px);

        max-height:
            calc(100dvh - 66px);

        overflow-y: auto;

        overscroll-behavior: contain;

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.09
            );

        background:
            var(--primary-dark);
    }


    .sidebar.menu-open
    .mobile-nav-panel {
        display: flex;
    }


    /* ----------------------------------------------
       Navigation im geöffneten Menü
       ---------------------------------------------- */

    .sidebar .navigation {
        flex:
            0
            0
            auto;

        display: flex;
        flex-direction: column;

        gap: 4px;

        padding:
            10px
            12px;

        overflow: visible;
    }


    .sidebar .nav-item {
        width: 100%;

        flex:
            0
            0
            auto;

        margin: 0;

        padding:
            11px
            13px;

        white-space: normal;
    }


    /* ----------------------------------------------
       Benutzer + Abmelden
       ---------------------------------------------- */

    .sidebar
    .sidebar-bottom {
        flex:
            0
            0
            auto;

        margin-top: 0;

        display: flex;

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

        gap: 20px;

        padding:
            13px
            18px
            16px;

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.09
            );
    }


    /*
     * Überschreibt unsere ältere Mobile-Regel,
     * die user-mini versteckt hat.
     */

    .sidebar
    .sidebar-bottom
    .user-mini {
        display: flex;
    }


    .sidebar
    .logout-link {
        flex-shrink: 0;

        margin-top: 0;

        color:
            rgba(
                255,
                255,
                255,
                0.72
            );

        font-size: 12px;
        font-weight: 600;
    }


    .sidebar
    .logout-link:hover {
        color: #ffffff;
    }


    /* ----------------------------------------------
       Hauptinhalt
       ---------------------------------------------- */

    .main-content {
        width: 100%;

        margin-left: 0;

        padding:
            24px
            18px
            40px;
    }

}


/* --------------------------------------------------
   Smartphone
   -------------------------------------------------- */

@media (max-width: 600px) {

    .brand {
        min-height: 62px;

        padding:
            12px
            14px;
    }


    .brand-name {
        font-size: 20px;
    }


    .brand-subtitle {
        font-size: 8px;
    }


    .mobile-nav-panel {
        max-height:
            calc(100vh - 62px);

        max-height:
            calc(100dvh - 62px);
    }


    .main-content {
        padding:
            20px
            14px
            36px;
    }

}


/* --------------------------------------------------
   Sehr schmales Smartphone
   -------------------------------------------------- */

@media (max-width: 380px) {

    .brand-subtitle {
        display: none;
    }


    .brand {
        min-height: 58px;
    }


    .mobile-nav-panel {
        max-height:
            calc(100vh - 58px);

        max-height:
            calc(100dvh - 58px);
    }

}



/* ==================================================
   Login
   ================================================== */

.login-page {
    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;
    padding: 32px;

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

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(31, 111, 115, 0.20),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #082d2e 0%,
            var(--primary-dark) 55%,
            #124f52 100%
        );

    color: var(--text);
}


.login-shell {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(380px, 1.1fr);

    width: min(920px, 100%);
    min-height: 560px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 20px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.24);
}


/* --------------------------------------------------
   Branding
   -------------------------------------------------- */

.login-brand-panel {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 48px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--primary-dark),
            #124f52
        );

    color: #ffffff;
}


.login-brand-panel::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -170px;
    top: -150px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}


.login-brand-panel::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -120px;
    bottom: -110px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 50%;
}


.login-brand-content,
.login-brand-footer {
    position: relative;
    z-index: 1;
}


.login-brand-eyebrow {
    margin-bottom: 18px;

    color:
        rgba(255, 255, 255, 0.66);

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

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


.login-brand-name {
    color: #ffffff;

    font-size: clamp(
        34px,
        4vw,
        46px
    );

    font-weight: 800;
    line-height: 1.05;

    letter-spacing: -0.035em;
}


.login-brand-name span {
    color: #73b7ba;
}


.login-brand-description {
    max-width: 340px;

    margin:
        24px
        0
        0;

    color:
        rgba(255, 255, 255, 0.70);

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


.login-brand-footer {
    display: flex;
    align-items: center;

    gap: 9px;

    color:
        rgba(255, 255, 255, 0.60);

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


.login-status-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    background: #81c5a5;

    border-radius: 50%;

    box-shadow:
        0 0 0 4px
        rgba(129, 197, 165, 0.10);
}


/* --------------------------------------------------
   Formular
   -------------------------------------------------- */

.login-form-panel {
    display: flex;
    align-items: center;

    padding: 56px 62px;

    background: #ffffff;
}


.login-form-wrap {
    width: 100%;
    max-width: 380px;

    margin:
        0
        auto;
}


.login-form-header {
    margin-bottom: 32px;
}


.login-form-eyebrow {
    margin-bottom: 8px;

    color: var(--primary);

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

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


.login-form-header h1 {
    margin: 0;

    color: var(--primary-dark);

    font-size: 29px;
    line-height: 1.2;

    letter-spacing: -0.02em;
}


.login-form-header p {
    margin:
        9px
        0
        0;

    color: var(--text-muted);

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


.login-form {
    display: grid;

    gap: 20px;
}


.login-field {
    display: grid;

    gap: 7px;
}


.login-field label {
    color: var(--text);

    font-size: 12px;
    font-weight: 700;
}


.login-field input {
    width: 100%;
    height: 44px;

    padding:
        10px
        13px;

    background: #ffffff;

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

    border-radius: 9px;

    color: var(--text);

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}


.login-field input::placeholder {
    color: #9aa7a8;
}


.login-field input:hover {
    border-color: #b8cccc;
}


.login-field input:focus {
    background: #ffffff;

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(31, 111, 115, 0.10);
}


.login-submit {
    width: 100%;
    min-height: 44px;

    margin-top: 4px;

    padding:
        10px
        16px;

    background: var(--primary);

    border: 1px solid var(--primary);
    border-radius: 9px;

    color: #ffffff;

    cursor: pointer;

    font: inherit;
    font-size: 13px;
    font-weight: 750;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.login-submit:hover {
    background: var(--primary-dark);

    border-color: var(--primary-dark);

    box-shadow:
        0 8px 20px
        rgba(15, 61, 62, 0.14);

    transform: translateY(-1px);
}


.login-submit:active {
    transform: translateY(0);
}


/* --------------------------------------------------
   Fehler
   -------------------------------------------------- */

.login-error {
    display: grid;

    gap: 4px;

    margin-bottom: 24px;
    padding: 13px 15px;

    background: #fff5f5;

    border: 1px solid #e6caca;
    border-left: 4px solid #b85b5b;

    border-radius: 8px;

    color: #713434;

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


.login-error strong {
    color: #763333;

    font-size: 12px;
}


.login-security-note {
    margin-top: 24px;

    color: var(--text-muted);

    font-size: 10px;

    text-align: center;
}


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

@media (max-width: 760px) {

    .login-page {
        align-items: flex-start;

        padding: 20px;
    }


    .login-shell {
        grid-template-columns: 1fr;

        min-height: 0;
    }


    .login-brand-panel {
        min-height: 200px;

        padding: 32px;
    }


    .login-brand-description {
        margin-top: 16px;
    }


    .login-brand-footer {
        margin-top: 32px;
    }


    .login-form-panel {
        padding: 38px 32px 40px;
    }

}


@media (max-width: 430px) {

    .login-page {
        padding: 12px;
    }


    .login-shell {
        border-radius: 15px;
    }


    .login-brand-panel {
        min-height: 170px;

        padding: 26px 24px;
    }


    .login-brand-name {
        font-size: 34px;
    }


    .login-brand-description {
        font-size: 12px;
    }


    .login-form-panel {
        padding: 32px 24px 34px;
    }


    .login-form-header h1 {
        font-size: 25px;
    }

}


/* ==================================================
   Commercial KVA redesign
   ================================================== */

#tab-commercial .commercial-quote-card {
    margin-top: 28px;
    padding: 26px;
}

#tab-commercial .commercial-quote-card > h3 {
    margin-top: 5px;
    margin-bottom: 0;
}

#tab-commercial .quote-summary {
    margin-top: 18px;
}

#tab-commercial .commercial-quote-list {
    display: grid;
    gap: 14px;
}

#tab-commercial .commercial-quote-entry {
    padding: 18px;

    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
}

#tab-commercial .commercial-quote-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

#tab-commercial .commercial-quote-entry-main {
    min-width: 0;
}

#tab-commercial .commercial-quote-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    font-size: 14px;
}

#tab-commercial .commercial-quote-meta {
    margin-top: 5px;

    color: var(--text-muted);

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

#tab-commercial .commercial-quote-amount {
    flex-shrink: 0;

    text-align: right;
}

#tab-commercial .commercial-quote-amount strong {
    display: block;

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

#tab-commercial .commercial-quote-amount small {
    display: block;

    margin-top: 3px;

    color: var(--text-muted);
    font-size: 10px;
}

#tab-commercial .commercial-quote-content {
    margin-top: 15px;
    padding-top: 14px;

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

#tab-commercial .commercial-quote-content strong {
    font-size: 13px;
}

#tab-commercial .commercial-quote-content p {
    margin: 6px 0 0;

    color: var(--text-muted);

    font-size: 12px;
    line-height: 1.6;
    white-space: pre-line;
}

#tab-commercial .quote-status-pill {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 750;
}

#tab-commercial .quote-status-finalized,
#tab-commercial .quote-status-sent {
    background: #eef7f7;
    border-color: #cfe1e1;

    color: var(--primary-dark);
}

#tab-commercial .quote-status-accepted {
    background: #edf8f2;
    border-color: #cce7d8;

    color: #276544;
}

#tab-commercial .quote-status-declined {
    background: #fff2f0;
    border-color: #efd2ce;

    color: #9b3b32;
}

#tab-commercial .quote-status-creating {
    background: #fff8e8;
    border-color: #ecdba9;

    color: #80601d;
}

#tab-commercial .commercial-quote-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px;
    padding-top: 15px;

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

#tab-commercial .commercial-quote-actions form,
#tab-commercial .commercial-quote-create form {
    margin: 0;
}

#tab-commercial .commercial-quote-actions .button {
    margin: 0;

    padding: 8px 11px;

    font-size: 11px;
}

#tab-commercial .commercial-quote-create {
    justify-content: flex-start;

    margin-top: 20px;
}

#tab-commercial .commercial-quote-warning {
    margin-top: 14px;
    padding: 11px 13px;

    background: #fff8e8;
    border: 1px solid #ecdba9;
    border-radius: 8px;

    color: #6f571f;

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

@media (max-width: 700px) {

    #tab-commercial .commercial-quote-card {
        padding: 20px;
    }

    #tab-commercial .commercial-quote-entry-header {
        flex-direction: column;

        gap: 12px;
    }

    #tab-commercial .commercial-quote-amount {
        text-align: left;
    }

    #tab-commercial .commercial-quote-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #tab-commercial .commercial-quote-actions form,
    #tab-commercial .commercial-quote-actions .button,
    #tab-commercial .commercial-quote-create form,
    #tab-commercial .commercial-quote-create .button {
        width: 100%;
    }

}


/* KVA-Karte optisch an Commercial-Redesign angleichen */

#tab-commercial .commercial-quote-card {
    position: relative;
    overflow: hidden;
}

#tab-commercial .commercial-quote-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: var(--primary);
}


#tab-commercial .commercial-quote-card {
    border-top: 1px solid var(--border);
}



/* Frühere KVA-Versionen */

#tab-commercial .commercial-quote-history {
    margin-top: 18px;

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

#tab-commercial .commercial-quote-history > summary {
    padding: 14px 2px;

    cursor: pointer;

    color: var(--primary);

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

    list-style: none;
}

#tab-commercial .commercial-quote-history
> summary::-webkit-details-marker {
    display: none;
}

#tab-commercial .commercial-quote-history
> summary::after {
    content: "⌄";

    margin-left: 8px;
}

#tab-commercial .commercial-quote-history[open]
> summary::after {
    content: "⌃";
}

#tab-commercial .commercial-quote-history-list {
    display: grid;
    gap: 8px;

    padding-bottom: 4px;
}

#tab-commercial .commercial-quote-history-entry {
    display: grid;

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

    align-items: center;

    gap: 12px;

    padding: 11px 13px;

    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
}

#tab-commercial .commercial-quote-history-entry
.button {
    padding: 6px 9px;

    font-size: 10px;
}

@media (max-width: 700px) {

    #tab-commercial .commercial-quote-history-entry {
        grid-template-columns:
            minmax(0, 1fr) auto;
    }

    #tab-commercial .commercial-quote-history-entry
    .button {
        grid-column: 1 / -1;

        width: 100%;
    }

}


/* ==================================================
   Technischer Abschluss
   ================================================== */

#tab-repair .repair-completion-card {
    margin-top: 22px;
    padding: 22px;

    border-top: 4px solid var(--primary);
}

#tab-repair .repair-completion-card > h3 {
    margin-top: 5px;
    margin-bottom: 10px;
}

#tab-repair .repair-completion-form {
    margin-top: 18px;
}

#tab-repair .repair-result-options {
    display: grid;

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

    gap: 12px;
}

#tab-repair .repair-result-option {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin: 0;
    padding: 16px;

    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

#tab-repair .repair-result-option:hover {
    background: #f5fafa;
    border-color: #b9d2d3;
}

#tab-repair .repair-result-option
input[type="radio"] {
    margin-top: 3px;

    accent-color: var(--primary);
}

#tab-repair .repair-result-option strong {
    display: block;

    font-size: 13px;
}

#tab-repair .repair-result-option small {
    display: block;

    margin-top: 5px;

    color: var(--text-muted);

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

#tab-repair .repair-result-option:has(
    input[type="radio"]:checked
) {
    background: #f5fafa;
    border-color: var(--primary);

    box-shadow:
        0 0 0 2px rgba(31, 111, 115, 0.08);
}

#tab-repair .repair-completion-summary {
    margin-top: 18px;
    padding: 16px 18px;

    background: #f5fafa;
    border: 1px solid #dce8e8;
    border-left: 4px solid var(--primary);
    border-radius: 10px;
}

#tab-repair .repair-completion-summary strong,
#tab-repair .repair-completion-summary small {
    display: block;
}

#tab-repair .repair-completion-summary small {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: 12px;
}

@media (max-width: 700px) {

    #tab-repair .repair-result-options {
        grid-template-columns: 1fr;
    }

}


/* ==================================================
   Technischer Abschluss V2
   ================================================== */

#tab-repair .repair-completion-section {
    margin-top: 28px;
}

#tab-repair .repair-completion-card {
    position: relative;

    margin-top: 0;
    padding: 22px;

    overflow: hidden;

    background: #ffffff;
    border: 1px solid #dce8e8;
    border-radius: 12px;
}

#tab-repair .repair-completion-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: var(--primary);
}


/* Intro */

#tab-repair .repair-completion-intro {
    margin-bottom: 20px;
}

#tab-repair .repair-completion-intro strong {
    display: block;

    margin-bottom: 6px;

    color: var(--text);

    font-size: 14px;
}

#tab-repair .repair-completion-intro p {
    max-width: 760px;

    margin: 0;

    color: var(--text-muted);

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


/* Auswahl */

#tab-repair .repair-result-choices {
    display: grid;

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

    gap: 12px;
}

#tab-repair .repair-result-choice {
    appearance: none;

    display: flex;
    align-items: center;

    gap: 14px;

    width: 100%;
    min-height: 92px;

    padding: 16px 18px;

    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;

    color: var(--text);

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

#tab-repair .repair-result-choice:hover {
    background: #f7fafa;
    border-color: #b9d2d3;

    transform: translateY(-1px);
}

#tab-repair .repair-result-choice-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    background: #edf5f5;
    border-radius: 50%;

    color: var(--primary);

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

#tab-repair .repair-result-choice-content {
    min-width: 0;
}

#tab-repair .repair-result-choice-content strong {
    display: block;

    margin-bottom: 5px;

    font-size: 13px;
}

#tab-repair .repair-result-choice-content small {
    display: block;

    color: var(--text-muted);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}


/* Auswahl aktiv */

#tab-repair .repair-result-choice.is-selected {
    background: #f5fafa;
    border-color: var(--primary);

    box-shadow:
        0 0 0 2px rgba(31, 111, 115, 0.10);
}

#tab-repair
.repair-result-choice.is-selected
.repair-result-choice-icon {
    background: var(--primary);
    color: #ffffff;
}


/* Auswahltext */

#tab-repair .repair-completion-selection {
    margin-top: 14px;
    padding: 10px 12px;

    background: var(--surface-muted);
    border-radius: 8px;

    color: var(--text-muted);

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


/* Action */

#tab-repair
.repair-completion-form
.form-actions {
    margin-top: 18px;
}

#tab-repair
.repair-completion-form
button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}


/* Bereits abgeschlossen */

#tab-repair .repair-completion-done {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 4px 0;
}

#tab-repair .repair-completion-done-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    background: var(--primary);
    border-radius: 50%;

    color: #ffffff;

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

#tab-repair .repair-completion-done strong {
    display: block;

    font-size: 14px;
}

#tab-repair .repair-completion-done small {
    display: block;

    margin-top: 4px;

    color: var(--text-muted);

    font-size: 12px;
}


@media (max-width: 700px) {

    #tab-repair .repair-result-choices {
        grid-template-columns: 1fr;
    }

    #tab-repair .repair-result-choice {
        min-height: 82px;
    }

}


/* ==================================================
   Rechnungs-Ergebnis / Diagnoseposition
   ================================================== */

#tab-commercial .invoice-result-readonly {
    margin-bottom: 28px;
}

#tab-commercial
.invoice-result-readonly
.commercial-readonly strong {
    display: block;
}

#tab-commercial
.invoice-result-readonly
.commercial-readonly small {
    display: block;

    margin-top: 5px;

    color: var(--text-muted);

    line-height: 1.5;
}


/* Diagnoseposition sauber stapeln */

#tab-commercial
.invoice-position-readonly > strong {
    display: block;
}

#tab-commercial
.invoice-position-readonly > br {
    display: none;
}

#tab-commercial
.invoice-position-readonly > small {
    display: block;

    margin-top: 6px;

    color: var(--text-muted);

    line-height: 1.5;
}


/* ==================================================
   Rechnung: Ergebnis + Rechnungsposition vertikal
   ================================================== */

/* Das komplette Formularfeld untereinander */
#tab-commercial .invoice-result-readonly,
#tab-commercial
[data-invoice-not-repaired]
> .form-field:first-child {
    display: block !important;
}


/* Feldbezeichnung immer eigene Zeile */
#tab-commercial .invoice-result-readonly > label,
#tab-commercial
[data-invoice-not-repaired]
> .form-field:first-child
> label {
    display: block !important;

    width: 100% !important;

    margin: 0 0 8px 0 !important;
}


/* Inhalt der Readonly-Box zwingend vertikal */
#tab-commercial
.invoice-result-readonly
> .commercial-readonly,
#tab-commercial
[data-invoice-not-repaired]
> .form-field:first-child
> .commercial-readonly,
#tab-commercial
.invoice-position-readonly {
    display: flex !important;

    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 0 !important;

    width: 100% !important;
}


/* Titel eigene Zeile */
#tab-commercial
.invoice-result-readonly
.commercial-readonly
> strong,
#tab-commercial
[data-invoice-not-repaired]
> .form-field:first-child
.commercial-readonly
> strong,
#tab-commercial
.invoice-position-readonly
> strong {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
}


/* Alte <br> brauchen wir nicht mehr */
#tab-commercial
.invoice-result-readonly
.commercial-readonly
> br,
#tab-commercial
[data-invoice-not-repaired]
> .form-field:first-child
.commercial-readonly
> br,
#tab-commercial
.invoice-position-readonly
> br {
    display: none !important;
}


/* Beschreibung definitiv darunter */
#tab-commercial
.invoice-result-readonly
.commercial-readonly
> small,
#tab-commercial
[data-invoice-not-repaired]
> .form-field:first-child
.commercial-readonly
> small,
#tab-commercial
.invoice-position-readonly
> small {
    display: block !important;

    width: 100% !important;

    margin: 5px 0 0 0 !important;

    color: var(--text-muted);

    line-height: 1.5;
}


/* TEXTBLOCK-CATEGORY-FILTER */

/*
 * Textbausteine im Erstantwort-Composer nach Kategorie
 * filtern.
 *
 * Bereits ausgewählte Bausteine bleiben sichtbar, auch
 * wenn danach eine andere Kategorie gewählt wird.
 * Dadurch gibt es keine unsichtbar aktivierten Checkboxen.
 */

/* Allgemein */
#initial-response-form:has(
    #initial-response-block-category
    option[value="general"]:checked
)
.initial-response-block[
    data-block-category
]:not(
    [data-block-category="general"]
):not(
    :has(.initial-response-block-checkbox:checked)
) {
    display: none !important;
}


/* Rückfrage */
#initial-response-form:has(
    #initial-response-block-category
    option[value="question"]:checked
)
.initial-response-block[
    data-block-category
]:not(
    [data-block-category="question"]
):not(
    :has(.initial-response-block-checkbox:checked)
) {
    display: none !important;
}


/* Absage */
#initial-response-form:has(
    #initial-response-block-category
    option[value="decline"]:checked
)
.initial-response-block[
    data-block-category
]:not(
    [data-block-category="decline"]
):not(
    :has(.initial-response-block-checkbox:checked)
) {
    display: none !important;
}


/*
 * "Alle" benötigt absichtlich keine Regel.
 * Dann werden sämtliche Bausteine angezeigt.
 */


/* Leermeldung grundsätzlich ausblenden */
#initial-response-block-filter-empty {
    display: none !important;
}


/* Keine Bausteine unter Allgemein */
#initial-response-form:has(
    #initial-response-block-category
    option[value="general"]:checked
)
.initial-response-blocks:not(
    :has(
        .initial-response-block[
            data-block-category="general"
        ],
        .initial-response-block-checkbox:checked
    )
)
#initial-response-block-filter-empty {
    display: block !important;
}


/* Keine Bausteine unter Rückfrage */
#initial-response-form:has(
    #initial-response-block-category
    option[value="question"]:checked
)
.initial-response-blocks:not(
    :has(
        .initial-response-block[
            data-block-category="question"
        ],
        .initial-response-block-checkbox:checked
    )
)
#initial-response-block-filter-empty {
    display: block !important;
}


/* Keine Bausteine unter Absage */
#initial-response-form:has(
    #initial-response-block-category
    option[value="decline"]:checked
)
.initial-response-blocks:not(
    :has(
        .initial-response-block[
            data-block-category="decline"
        ],
        .initial-response-block-checkbox:checked
    )
)
#initial-response-block-filter-empty {
    display: block !important;
}


/* REPAIR-TABS-RESPONSIVE-V2 */

/*
 * Sticky und horizontalen Scrollbereich bewusst trennen.
 * Der Wrapper bleibt sticky.
 * Die innere Tab-Leiste darf auf kleinen Displays scrollen.
 */

.repair-tabs-sticky {
    position: sticky;
    top: 12px;
    z-index: 30;

    margin: 30px auto 26px;
}


/*
 * Die bisherige Sticky-Funktion der eigentlichen Leiste
 * wird vom Wrapper übernommen.
 *
 * Auf großen Displays begrenzen wir die Breite und
 * zentrieren die Navigation.
 */
.repair-tabs-sticky > .repair-tabs {
    position: static;
    top: auto;
    z-index: auto;

    width: 100%;
    max-width: none;

    margin: 0;
}


/* ----------------------------------------------------------
 * Smartphone
 * ---------------------------------------------------------- */

@media (max-width: 650px) {

    .repair-tabs-sticky {
        top: 8px;

        margin-top: 20px;
        margin-bottom: 22px;
    }


    .repair-tabs-sticky > .repair-tabs {
        width: 100%;
        max-width: none;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;

        overscroll-behavior-x: contain;
    }


    .repair-tabs-sticky .repair-tab {
        flex: 0 0 auto;

        min-width: 145px;
    }

}


/* REPAIR-TABS-MOBILE-STICKY-OFFSET */

/*
 * Sobald die Hauptnavigation oben sticky wird,
 * muss die Auftragsnavigation darunter sitzen.
 *
 * Hauptnavigation:
 *   66 px Höhe
 *
 * Abstand:
 *   8 px
 */

@media
(max-width: 960px),
(max-height: 600px) and (max-width: 1200px) {

    .repair-tabs-sticky {
        top: 74px;

        /*
         * Unterhalb der Hauptnavigation,
         * aber weiterhin oberhalb des Seiteninhalts.
         */
        z-index: 900;
    }

}


/* DASHBOARD-WORKFLOW-LINKS */

.dashboard-workflow-link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.dashboard-workflow-link > * {
    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.dashboard-workflow-link:hover > * {
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(15, 61, 62, 0.10);
}

.dashboard-workflow-link:focus-visible > * {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}


/* Auftragsübersicht */

.repairs-status-filter {
    min-width: 230px;
}

@media (max-width: 650px) {

    .repairs-status-filter {
        width: 100%;
        min-width: 0;
    }

}

/* DASHBOARD-KPI-LINKS */

.dashboard-kpi-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.dashboard-kpi-link:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(15, 61, 62, 0.10);
}

.dashboard-kpi-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* Retention legal hold */

.retention-hold-card {
    margin-bottom: 28px;
    border-left: 4px solid var(--border);
}

.retention-hold-card-active {
    border-left-color: #a84d4d;
}

.retention-hold-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.retention-hold-header h2 {
    margin-top: 5px;
    margin-bottom: 0;
}

.retention-hold-status {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-muted);

    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.retention-hold-status::before {
    content: "";

    width: 7px;
    height: 7px;

    margin-right: 7px;

    border-radius: 50%;
    background: currentColor;
}

.retention-hold-status-active {
    background: #fff1f1;
    color: #8b2f2f;
}

.retention-hold-description {
    max-width: 760px;
    margin: 18px 0 0;

    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.retention-hold-current {
    margin-top: 18px;
    padding: 16px 18px;

    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
}

.retention-hold-current .detail-list {
    margin-top: 0;
}

.retention-hold-form {
    margin-top: 20px;
}

.retention-hold-form-grid {
    margin-top: 0;
}

.retention-hold-form .form-actions {
    margin-top: 18px;
}

.retention-hold-notice {
    margin-top: 16px;
    padding: 10px 12px;

    border: 1px solid #b8d7d8;
    border-radius: 8px;
    background: #f2f9f9;
    color: var(--primary-dark);

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

.retention-hold-history {
    margin-top: 24px;
    padding-top: 18px;

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

.retention-hold-history > summary {
    cursor: pointer;

    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.retention-hold-history-list {
    display: grid;
    gap: 10px;

    margin-top: 14px;
}

.retention-hold-history-item {
    padding: 13px 15px;

    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-muted);
}

.retention-hold-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    font-size: 12px;
}

.retention-hold-history-head span,
.retention-hold-history-meta {
    color: var(--text-muted);
}

.retention-hold-history-reason {
    margin-top: 7px;

    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.retention-hold-history-meta {
    margin-top: 7px;

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

.retention-hold-history-release {
    margin-top: 9px;
    padding-top: 9px;

    border-top: 1px solid var(--border);

    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 650px) {
    .retention-hold-header,
    .retention-hold-history-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .retention-hold-status {
        white-space: normal;
    }
}



/* Retention legal hold collapsed panel */

.retention-hold-panel {
    margin: 36px 0 0;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: white;

    overflow: hidden;
}

.retention-hold-panel > summary {
    list-style: none;
}

.retention-hold-panel > summary::-webkit-details-marker {
    display: none;
}

.retention-hold-panel-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 16px 20px;

    background: var(--surface-muted);

    cursor: pointer;
    user-select: none;
}

.retention-hold-panel-summary:hover {
    background: #f5fafa;
}

.retention-hold-panel[open]
.retention-hold-panel-summary {
    border-bottom: 1px solid var(--border);
}

.retention-hold-panel-summary-text {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.retention-hold-panel-summary-title {
    color: var(--text);

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

.retention-hold-panel-summary-subtitle {
    color: var(--text-muted);

    font-size: 11px;
}

.retention-hold-panel-summary-state {
    display: flex;
    align-items: center;
    gap: 12px;

    flex: 0 0 auto;
}

.retention-hold-panel-chevron {
    display: inline-block;

    color: var(--text-muted);

    font-size: 15px;
    line-height: 1;

    transition: transform 0.15s ease;
}

.retention-hold-panel[open]
.retention-hold-panel-chevron {
    transform: rotate(180deg);
}


/*
 * Die eigentliche Karte liegt jetzt innerhalb des
 * einklappbaren Containers. Rahmen und Titel werden
 * daher vom äußeren Element übernommen.
 */

.retention-hold-panel
> .retention-hold-card {
    margin: 0;

    border: 0;
    border-radius: 0;
}

.retention-hold-panel
> .retention-hold-card.retention-hold-card-active {
    border-left: 4px solid #a84d4d;
}

.retention-hold-panel
.retention-hold-header {
    display: none;
}


@media (max-width: 650px) {

    .retention-hold-panel-summary {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

    .retention-hold-panel-summary-state {
        width: 100%;

        justify-content: space-between;
    }

}


/* ==========================================================
   Auftragsverlauf: Datum + Kommunikationszeilen
   ========================================================== */

.history-details .timeline-item {
    grid-template-columns:
        230px minmax(0, 1fr);
}

.history-details .timeline-date {
    width: 230px;
    min-width: 230px;
    flex: 0 0 230px;

    white-space: nowrap;
}

.history-details .timeline-content {
    min-width: 0;
}


/* E-Mail-Eintrag */

.history-details .timeline-email-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;
    gap: 18px;
}

.history-details .timeline-email-main {
    min-width: 0;
}

.history-details .timeline-email-meta,
.history-details .timeline-email-error {
    margin-top: 5px;
}

.history-details .timeline-email-button {
    justify-self: end;
    align-self: center;

    margin: 0;
    white-space: nowrap;
}


/* Schmale Ansicht wieder untereinander */

@media (max-width: 700px) {

    .history-details .timeline-item {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .history-details .timeline-date {
        width: auto;
        min-width: 0;
        flex-basis: auto;

        white-space: normal;
    }

    .history-details .timeline-email-row {
        grid-template-columns: 1fr;
    }

    .history-details .timeline-email-button {
        justify-self: end;
        margin-top: 8px;
    }

}


/* ============================================================
   Dashboard statistics
   ============================================================ */

.dashboard-statistics-section {
    margin-top: 30px;
}

.dashboard-statistics-section
> .section-header {
    margin-bottom: 14px;
}

.dashboard-statistics-grid {
    display: grid;

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

    gap: 16px;

    align-items: stretch;
}

.dashboard-stat-card {
    min-width: 0;
    min-height: 130px;

    display: flex;
    flex-direction: column;

    padding: 20px 21px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);

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

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

.dashboard-stat-label {
    margin-bottom: 7px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 750;

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

.dashboard-stat-value {
    margin-bottom: 5px;

    color: var(--primary-dark);

    font-size: 30px;
    font-weight: 750;
    line-height: 1.1;
}

.dashboard-stat-meta {
    margin-top: auto;

    color: var(--text-muted);

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

.dashboard-stat-split {
    display: grid;

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

    gap: 0;

    margin: 2px 0 8px;
}

.dashboard-stat-split > div {
    min-width: 0;

    padding-right: 14px;
}

.dashboard-stat-split > div + div {
    padding-left: 14px;
    padding-right: 0;

    border-left: 1px solid var(--ui-border-soft);
}

.dashboard-stat-split strong {
    display: block;

    color: var(--primary-dark);

    font-size: 24px;
    font-weight: 750;
    line-height: 1.1;
}

.dashboard-stat-split span {
    display: block;

    margin-top: 4px;

    color: var(--text-muted);

    font-size: 11px;
    line-height: 1.4;
}


@media (max-width: 1100px) {

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

}


@media (max-width: 700px) {

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

        gap: 10px;
    }

    .dashboard-stat-card {
        min-height: 115px;

        padding: 17px;
    }

    .dashboard-stat-value {
        font-size: 26px;
    }

    .dashboard-stat-split strong {
        font-size: 22px;
    }

}


@media (max-width: 430px) {

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

}


/* ============================================================
   Dashboard finance
   ============================================================ */

.dashboard-finance-section {
    margin-top: 30px;
}

.dashboard-finance-section
> .section-header {
    margin-bottom: 14px;
}

.dashboard-finance-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 4px 10px;

    margin-top: auto;

    color: var(--text-muted);

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

.dashboard-finance-meta span {
    white-space: nowrap;
}


/* ============================================================
   AUSWERTUNGEN – 12 MONATE
   ============================================================ */

.dashboard-report-section {
    margin-top: 30px;
    margin-bottom: 30px;
}

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

.dashboard-report-chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-card);

    padding: 20px 21px;

    min-width: 0;
}

.dashboard-report-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 22px;
}

.dashboard-report-chart-header h3 {
    margin: 4px 0 0;

    color: var(--primary-dark);

    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.dashboard-report-chart-card .dashboard-stat-label {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-report-chart {
    display: grid;
    gap: 11px;
}

.dashboard-report-row {
    display: grid;
    grid-template-columns:
        46px
        minmax(80px, 1fr)
        minmax(46px, auto);

    align-items: center;
    gap: 11px;
}

.dashboard-report-month {
    color: var(--text-muted);

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

    white-space: nowrap;
}

.dashboard-report-bar-track {
    position: relative;

    width: 100%;
    height: 8px;

    overflow: hidden;

    background: var(--surface-muted);
    border-radius: 999px;
}

.dashboard-report-bar {
    height: 100%;

    border-radius: inherit;

    background: var(--primary);
}

.dashboard-report-value {
    color: var(--primary-dark);

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

    text-align: right;
    white-space: nowrap;
}

.dashboard-report-amount-bars {
    display: grid;
    gap: 4px;
}

.dashboard-report-bar-gross {
    background: var(--primary);
}

.dashboard-report-bar-net {
    background: var(--primary-dark);
}

.dashboard-report-money {
    display: grid;
    gap: 2px;
}

.dashboard-report-legend {
    display: flex;
    align-items: center;
    gap: 12px;

    padding-top: 2px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
}

.dashboard-report-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dashboard-report-legend i {
    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.dashboard-report-legend-gross {
    background: var(--primary);
}

.dashboard-report-legend-net {
    background: var(--primary-dark);
}


@media (max-width: 1100px) {

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

}


@media (max-width: 700px) {

    .dashboard-report-chart-header {
        gap: 12px;
    }

    .dashboard-report-row {
        grid-template-columns:
            42px
            minmax(60px, 1fr)
            auto;

        gap: 8px;
    }

}


@media (max-width: 430px) {

    .dashboard-report-chart-card {
        padding: 18px 16px;
    }

    .dashboard-report-chart-header {
        display: block;
    }

    .dashboard-report-legend {
        margin-top: 10px;
    }

    .dashboard-report-row {
        grid-template-columns:
            38px
            minmax(50px, 1fr)
            auto;

        gap: 7px;
    }

    .dashboard-report-month,
    .dashboard-report-value {
        font-size: 10px;
    }

}


/* ============================================================
   WIEDERVORLAGE
   ============================================================ */

.follow-up-card {
    margin-top: 26px;
    margin-bottom: 26px;
}

.follow-up-form-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 260px)
        minmax(0, 1fr);

    gap: 16px;
    align-items: start;

    min-width: 0;
}

.follow-up-form-grid > * {
    min-width: 0;
}

.follow-up-form-grid input,
.follow-up-form-grid textarea {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.follow-up-form-grid textarea {
    resize: vertical;
}


@media (max-width: 700px) {

    .follow-up-form-grid {
        grid-template-columns: 1fr;
    }

    .follow-up-card {
        margin-top: 20px;
        margin-bottom: 20px;
    }

}


/* ============================================================
   Accessibility and mobile interaction targets
   ============================================================ */

.logout-link {
    min-height: 44px;

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

    padding-top: 8px;
    padding-bottom: 8px;
}


@media
(max-width: 960px),
(max-height: 600px) and (max-width: 1200px) {

    .mobile-nav-toggle,
    .sidebar .nav-item,
    .sidebar .logout-link,
    .button {
        min-height: 44px;
    }

}


/* DHL-Auswahl als reguläre Zeile der Sendungsdetails */
#tab-shipping .shipment-insurance-form {
    width: min(100%, 360px);
}
#tab-shipping .shipment-insurance-form select {
    height: 40px;
    font-size: 13px;
}
#tab-shipping .shipment-insurance-note {
    display: block;
    max-width: 560px;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}