/**
 * Werkstatt Aufträge - Frontend Styles (Angepasst für Fahrzeugzentrum Wesemann)
 *
 * Styling für den [auftragsstatus_lookup] Shortcode.
 * Modernisiertes Design mit Sektionen und Tag-Stil für Leistungen.
 * Version: 1.5.2 (Leistungen Redesign - Final)
 */

:root {
    --wa-primary-color: #0D2D5C;
    --wa-primary-darker: #071d49;
    --wa-primary-darkest: #051430;
    --wa-text-dark: #2d3748;
    --wa-text-light: #4a5568;
    --wa-text-placeholder: #a0aec0;
    --wa-border-color: #e2e8f0;
    --wa-bg-light: #f7fafc;
    --wa-bg-white: #ffffff;
    --wa-focus-ring-color: rgba(13, 45, 92, 0.25);
    --wa-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --wa-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --wa-border-radius: 8px;
    --wa-spacing-xs: 4px;
    --wa-spacing-sm: 8px;
    --wa-spacing-md: 16px;
    --wa-spacing-lg: 24px;
    --wa-spacing-xl: 32px;
    --wa-spacing-xxl: 48px;

    --wa-status-angelegt-bg: #e2e8f0; --wa-status-angelegt-text: #4a5568; --wa-status-angelegt-border: #cbd5e0;
    --wa-status-termin_vereinbart-bg: #bee3f8; --wa-status-termin_vereinbart-text: #2c5282; --wa-status-termin_vereinbart-border: #90cdf4;
    --wa-status-fahrzeug_hier-bg: #fefcbf; --wa-status-fahrzeug_hier-text: #975a16; --wa-status-fahrzeug_hier-border: #f6e05e;
    --wa-status-in_bearbeitung-bg: #c3dafe; --wa-status-in_bearbeitung-text: #2c5282; --wa-status-in_bearbeitung-border: #a3bffa;
    --wa-status-warte_auf_teile-bg: #feebc8; --wa-status-warte_auf_teile-text: #9c4221; --wa-status-warte_auf_teile-border: #fbd38d;
    --wa-status-fertiggestellt-bg: #c6f6d5; --wa-status-fertiggestellt-text: #276749; --wa-status-fertiggestellt-border: #9ae6b4;
    --wa-status-abgeholt-bg: #d1d5db; --wa-status-abgeholt-text: #1f2937; --wa-status-abgeholt-border: #9ca3af;
    --wa-status-sonstiges-bg: #e9d8fd; --wa-status-sonstiges-text: #553c9a; --wa-status-sonstiges-border: #d6bcfa;

    --wa-alert-warning-text: #975a16; --wa-alert-warning-bg: #fefcbf; --wa-alert-warning-border: #f6e05e;
    --wa-alert-danger-text: #9b2c2c; --wa-alert-danger-bg: #fed7d7; --wa-alert-danger-border: #fbb6ce;
}

.wa-auftrag-lookup-form-container,
.wa-auftrag-lookup-result-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--wa-text-dark);
    margin-bottom: var(--wa-spacing-xxl);
    box-sizing: border-box;
}

.wa-auftrag-lookup-form-container *,
.wa-auftrag-lookup-result-container *,
.wa-auftrag-lookup-form-container *::before,
.wa-auftrag-lookup-result-container *::before,
.wa-auftrag-lookup-form-container *::after,
.wa-auftrag-lookup-result-container *::after {
    box-sizing: inherit;
}

.wa-auftrag-lookup-form-container {
    background-color: var(--wa-bg-white);
    padding: var(--wa-spacing-xl) var(--wa-spacing-xxl);
    border-radius: var(--wa-border-radius);
    border: 1px solid var(--wa-border-color);
    box-shadow: var(--wa-card-shadow);
    margin-bottom: var(--wa-spacing-xl);
}

.wa-auftrag-lookup-form-container h3 {
    margin-top: 0;
    margin-bottom: var(--wa-spacing-lg);
    font-size: 1.6em;
    font-weight: 600;
    color: var(--wa-primary-color);
    line-height: 1.3;
}

.wa-auftrag-lookup-form-container p {
    margin-bottom: var(--wa-spacing-xl);
    color: var(--wa-text-light);
    font-size: 1rem;
    max-width: 600px;
}

.wa-lookup-form .form-group {
    margin-bottom: var(--wa-spacing-lg);
}

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

.wa-lookup-form input[type="text"].form-control {
    display: block;
    width: 100%;
    max-width: 400px;
    padding: var(--wa-spacing-md);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--wa-text-dark);
    background-color: var(--wa-bg-white);
    background-clip: padding-box;
    border: 1px solid var(--wa-border-color);
    border-radius: var(--wa-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin-bottom: var(--wa-spacing-md);
}

.wa-lookup-form input[type="text"].form-control::placeholder {
    color: var(--wa-text-placeholder);
    opacity: 1;
}

.wa-lookup-form input[type="text"].form-control:focus {
    color: var(--wa-text-dark);
    background-color: var(--wa-bg-white);
    border-color: var(--wa-primary-color);
    outline: 0;
    box-shadow: 0 0 0 3px var(--wa-focus-ring-color);
}

.wa-lookup-form .btn.btn-primary {
    color: var(--wa-bg-white);
    background-color: var(--wa-primary-color);
    border: 1px solid var(--wa-primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: var(--wa-spacing-sm) var(--wa-spacing-lg);
    font-size: 1rem;
    border-radius: var(--wa-border-radius);
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .1s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.wa-lookup-form .btn.btn-primary:hover {
    background-color: var(--wa-primary-darker);
    border-color: var(--wa-primary-darker);
    color: var(--wa-bg-white);
    box-shadow: var(--wa-card-shadow);
}

.wa-lookup-form .btn.btn-primary:focus {
    background-color: var(--wa-primary-darker);
    border-color: var(--wa-primary-darker);
    box-shadow: 0 0 0 3px var(--wa-focus-ring-color);
    outline: none;
}

.wa-lookup-form .btn.btn-primary:active {
    background-color: var(--wa-primary-darkest);
    border-color: var(--wa-primary-darkest);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    transform: translateY(1px);
}

.wa-auftrag-lookup-result-container {
    margin-top: var(--wa-spacing-xl);
}

.wa-auftrag-details.card {
    background-color: var(--wa-bg-white);
    border: 1px solid var(--wa-border-color);
    border-radius: var(--wa-border-radius);
    margin-bottom: var(--wa-spacing-xl);
    box-shadow: var(--wa-card-shadow);
    overflow: hidden;
}

.wa-auftrag-details .card-header {
    background-color: var(--wa-bg-light);
    padding: var(--wa-spacing-md) var(--wa-spacing-lg);
    border-bottom: 1px solid var(--wa-border-color);
    margin: 0;
    font-size: 1.15em;
    font-weight: 600;
    color: var(--wa-primary-color);
}
.wa-auftrag-details .card-header .wa-auftragsnummer {
    font-weight: 700;
}
.wa-auftrag-details .card-header .wa-kennzeichen {
    font-weight: 500;
    color: var(--wa-text-light);
}

.wa-auftrag-details .card-body {
    padding: var(--wa-spacing-lg) var(--wa-spacing-lg);
}

.wa-section {
    margin-bottom: var(--wa-spacing-xl);
    padding-bottom: var(--wa-spacing-lg);
    border-bottom: 1px solid var(--wa-border-color);
}
.wa-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.wa-section-title {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--wa-text-dark);
    margin-top: 0;
    margin-bottom: var(--wa-spacing-md);
    padding-bottom: var(--wa-spacing-xs);
}

.wa-section-status .wa-status-display {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-spacing-sm);
}
.wa-section-status .wa-status-sonstiges-text {
    font-size: 0.9em;
    color: var(--wa-text-light);
    font-style: italic;
}

.wa-section-termine dl.wa-details-list,
.wa-section-fahrzeug dl.wa-details-list {
    margin-bottom: 0;
    gap: var(--wa-spacing-sm) var(--wa-spacing-md);
    display: grid; /* Sicherstellen, dass es Grid ist */
    grid-template-columns: auto 1fr;
    align-items: baseline;
}
.wa-section-termine dt, .wa-section-fahrzeug dt {
    font-size: 0.9rem;
    color: var(--wa-text-light);
    font-weight: 500;
    text-align: left; /* Standard für dt */
    padding-right: var(--wa-spacing-md); /* Alte dt Regel */
    grid-column: 1; /* Alte dt Regel */
    white-space: nowrap;
}
.wa-section-termine dd, .wa-section-fahrzeug dd {
    font-size: 0.95rem;
    color: var(--wa-text-dark);
    margin-left: 0; /* Standard für dd im Grid */
    grid-column: 2; /* Alte dd Regel */
    font-weight: 400; /* Alte dd Regel */
}

.wa-section-leistungen .wa-leistungen-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-spacing-sm);
    padding: 0;
    margin: 0;
    list-style: none;
}

.wa-leistung-item {
    display: inline-block;
    background-color: var(--wa-bg-light);
    color: var(--wa-text-light);
    padding: var(--wa-spacing-xs) var(--wa-spacing-md);
    border-radius: 16px; /* Stärker abgerundet als var(--wa-border-radius) */
    border: 1px solid var(--wa-border-color);
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 500;
    box-shadow: 0 1px 1px rgba(0,0,0,0.03);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: default;
}

.wa-leistung-item:hover { /* Hover-Effekt jetzt aktiv */
    background-color: var(--wa-primary-color);
    color: var(--wa-bg-white);
    border-color: var(--wa-primary-darker);
}

.wa-auftrag-bilder-container .wa-section-title {
    margin-bottom: var(--wa-spacing-md);
    border-bottom: none;
}
.wa-auftrag-bilder.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--wa-spacing-md);
}
.wa-auftrag-bilder .wa-bild-link {
    display: block;
    border: 1px solid var(--wa-border-color);
    border-radius: var(--wa-border-radius);
    overflow: hidden;
    position: relative;
    background-color: var(--wa-bg-light);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.wa-auftrag-bilder .wa-bild-link:hover {
    box-shadow: var(--wa-card-shadow-hover);
    transform: translateY(-3px);
    border-color: var(--wa-primary-color);
}
.wa-auftrag-bilder .wa-bild-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.wa-auftrag-bilder .wa-bild-link:hover img {
    transform: scale(1.05);
}

.wa-status-label { /* Gilt für Status-Labels innerhalb .wa-status-display */
    display: inline-flex;
    align-items: center;
    padding: var(--wa-spacing-xs) var(--wa-spacing-md);
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.8rem;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
}
.wa-status-icon {
    font-size: 14px;
    line-height: 1;
    margin-right: var(--wa-spacing-sm);
    height: 14px;
    width: 14px;
    vertical-align: text-bottom;
}

/* Status Farben mit Variablen */
.status-angelegt { background-color: var(--wa-status-angelegt-bg); color: var(--wa-status-angelegt-text); border-color: var(--wa-status-angelegt-border); }
.status-termin_vereinbart { background-color: var(--wa-status-termin_vereinbart-bg); color: var(--wa-status-termin_vereinbart-text); border-color: var(--wa-status-termin_vereinbart-border); }
.status-fahrzeug_hier { background-color: var(--wa-status-fahrzeug_hier-bg); color: var(--wa-status-fahrzeug_hier-text); border-color: var(--wa-status-fahrzeug_hier-border); }
.status-in_bearbeitung { background-color: var(--wa-status-in_bearbeitung-bg); color: var(--wa-status-in_bearbeitung-text); border-color: var(--wa-status-in_bearbeitung-border); }
.status-warte_auf_teile { background-color: var(--wa-status-warte_auf_teile-bg); color: var(--wa-status-warte_auf_teile-text); border-color: var(--wa-status-warte_auf_teile-border); }
.status-fertiggestellt { background-color: var(--wa-status-fertiggestellt-bg); color: var(--wa-status-fertiggestellt-text); border-color: var(--wa-status-fertiggestellt-border); }
.status-abgeholt { background-color: var(--wa-status-abgeholt-bg); color: var(--wa-status-abgeholt-text); border-color: var(--wa-status-abgeholt-border); }
.status-sonstiges { background-color: var(--wa-status-sonstiges-bg); color: var(--wa-status-sonstiges-text); border-color: var(--wa-status-sonstiges-border); }

.wa-result-message {
    margin-top: var(--wa-spacing-xl);
}
.wa-info.alert,
.wa-error.alert {
    padding: var(--wa-spacing-md) var(--wa-spacing-lg);
    margin-bottom: var(--wa-spacing-lg);
    border: 1px solid transparent;
    border-radius: var(--wa-border-radius);
    font-size: 0.95rem;
    display: block;
}
.alert.alert-warning { color: var(--wa-alert-warning-text); background-color: var(--wa-alert-warning-bg); border-color: var(--wa-alert-warning-border); }
.alert.alert-danger { color: var(--wa-alert-danger-text); background-color: var(--wa-alert-danger-bg); border-color: var(--wa-alert-danger-border); }

@media (max-width: 767px) {
    .wa-auftrag-lookup-form-container { padding: var(--wa-spacing-lg) var(--wa-spacing-xl); }
    .wa-auftrag-lookup-form-container h3 { font-size: 1.4em; }
    .wa-lookup-form input[type="text"].form-control { max-width: 100%; }
    .wa-lookup-form .btn.btn-primary { width: 100%; padding: var(--wa-spacing-md); }

    .wa-auftrag-details .card-header { font-size: 1.1em; padding: var(--wa-spacing-sm) var(--wa-spacing-lg); }
    .wa-auftrag-details .card-body { padding: var(--wa-spacing-lg); }

    .wa-section { margin-bottom: var(--wa-spacing-lg); padding-bottom: var(--wa-spacing-lg); }
    .wa-section-title { font-size: 1em; margin-bottom: var(--wa-spacing-sm); }

    dl.wa-details-list { gap: var(--wa-spacing-xs) var(--wa-spacing-sm); }
    .wa-section-termine dt, .wa-section-fahrzeug dt { font-size: 0.8rem; padding-right: var(--wa-spacing-sm); }
    .wa-section-termine dd, .wa-section-fahrzeug dd { font-size: 0.85rem; }
    .wa-status-label { font-size: 0.75rem; padding: 3px var(--wa-spacing-sm); }

    .wa-auftrag-bilder.gallery { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--wa-spacing-sm); }
}

@media (max-width: 480px) {
    .wa-auftrag-lookup-form-container { padding: var(--wa-spacing-lg) var(--wa-spacing-md); }
    .wa-auftrag-lookup-form-container h3 { font-size: 1.3em; }
    .wa-auftrag-details .card-header { font-size: 1.05em; }
    .wa-auftrag-details .card-body { padding: var(--wa-spacing-md); }

    .wa-section { margin-bottom: var(--wa-spacing-md); padding-bottom: var(--wa-spacing-md); }

    /* Für sehr kleine Screens die Details-Liste eventuell untereinander */
    .wa-section-termine dl.wa-details-list,
    .wa-section-fahrzeug dl.wa-details-list {
        grid-template-columns: 1fr; /* Labels und Werte untereinander */
    }
    .wa-section-termine dt, .wa-section-fahrzeug dt {
        white-space: normal; /* Umbruch erlauben */
        padding-right: 0;
        margin-bottom: var(--wa-spacing-xs);
    }
    .wa-section-termine dd, .wa-section-fahrzeug dd {
        margin-left: 0;
        margin-bottom: var(--wa-spacing-sm);
    }

    .wa-auftrag-bilder.gallery { grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); }
}