/* EXT:baustellen – barrierefreie Ergänzungen zu Bootstrap 5
 * Ziele: Schrift schwarz (#111) auf hellen Flächen, Kontrast >= 7:1 (WCAG AAA) für Text,
 * keine Schriftgrößen unter 1rem, sichtbarer Fokus, eindeutige Hover-Zustände.
 * Alle Farben als Custom Properties – im Sitepackage überschreibbar.
 */
.tx-baustellen {
    --bst-text: #111111;             /* Fließ- und Header-Text */
    --bst-meta: #2b2b2b;             /* Zusatzangaben (Abschnitt, Bauzeit, Zähler) – Kontrast auf #fff 13:1 */
    --bst-bg-body: #ffffff;         /* nur für Baustellen-Body und leere Liste */
    --bst-bg-ort: #dfe5ec;           /* Ebene 1 – Kontrast zu #111: 14.9:1 */
    --bst-bg-ort-hover: #cdd6e0;
    --bst-bg-status: #eef1f4;        /* Ebene 2 */
    --bst-bg-status-hover: #dfe5ec;
    --bst-bg-strasse: #f7f8fa;       /* Ebene 3 */
    --bst-bg-strasse-hover: #e8ecf0;
    --bst-border: #8a949e;           /* Rahmen, Kontrast 3.1:1 (UI-Komponenten >= 3:1) */
    --bst-focus: #0b4f9c;
    --bst-link: #0b4f9c;             /* Kontrast auf #fff 8.6:1 */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bst-text);
}

/* ---------- Accordion-Grundlagen ---------- */
.tx-baustellen .accordion-item {
    border-color: var(--bst-border);
    color: var(--bst-text);
}

.tx-baustellen .accordion-header {
    margin: 0;
}

.tx-baustellen .accordion-button {
    color: var(--bst-text);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.875rem 1.25rem;
    box-shadow: none;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

/* Bootstrap färbt den offenen Button hellblau mit blauem Text – hier neutral & schwarz */
.tx-baustellen .accordion-button:not(.collapsed) {
    color: var(--bst-text);
    box-shadow: inset 0 -1px 0 var(--bst-border);
}

.tx-baustellen .accordion-button::after {
    /* Pfeil-Icon in Schwarz statt Bootstrap-Blau */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111111'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.tx-baustellen .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111111'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Sichtbarer Tastaturfokus (nicht nur Farbwechsel) */
.tx-baustellen .accordion-button:focus-visible {
    outline: 3px solid var(--bst-focus);
    outline-offset: -3px;
    box-shadow: none;
}

/* Bodies der Ebenen Ort und Status: Hintergrund kommt vom Theme (kein Override),
   nur Schrift, Größe und Abstand werden gesetzt. Weiß gilt nur für den Baustellen-Body (s. u.). */
.tx-baustellen .accordion-body {
    color: var(--bst-text);
    font-size: 1rem;
    padding: 1rem 1.25rem;
}

/* ---------- Ebene 1: Ort ---------- */
.tx-baustellen .accordion-ortschaft > .accordion-item > .accordion-header .accordion-button {
    background-color: var(--bst-bg-ort);
    font-size: 1.25rem;
}

.tx-baustellen .accordion-ortschaft > .accordion-item > .accordion-header .accordion-button:hover {
    background-color: var(--bst-bg-ort-hover);
    text-decoration: underline;
}

/* ---------- Ebene 2: Status ---------- */
.tx-baustellen .accordion-status,
.tx-baustellen .accordion-strasse {
    margin-top: 0.5rem;
}

.tx-baustellen .accordion-status > .accordion-item > .accordion-header .accordion-button {
    background-color: var(--bst-bg-status);
    font-size: 1.125rem;
}

.tx-baustellen .accordion-status > .accordion-item > .accordion-header .accordion-button:hover {
    background-color: var(--bst-bg-status-hover);
    text-decoration: underline;
}

/* ---------- Ebene 3: Straße ---------- */
.tx-baustellen .accordion-strasse > .accordion-item > .accordion-header .accordion-button {
    background-color: var(--bst-bg-strasse);
    font-size: 1.0625rem;
}

.tx-baustellen .accordion-strasse > .accordion-item > .accordion-header .accordion-button:hover {
    background-color: var(--bst-bg-strasse-hover);
    text-decoration: underline;
}

/* Body der Baustelle (Detailfelder) immer weiß – hohe Spezifität, damit Theme-Regeln
   (Bootstrap Package / Sitepackage) für .accordion-body nicht durchschlagen */
.tx-baustellen .accordion-strasse > .accordion-item,
.tx-baustellen .accordion-strasse > .accordion-item > .accordion-collapse,
.tx-baustellen .accordion-strasse > .accordion-item > .accordion-collapse > .accordion-body,
.tx-baustellen .tx-baustellen-strasse .accordion-body,
.tx-baustellen .tx-baustellen-strasse .accordion-body .tx-baustellen-fields {
    --bs-accordion-bg: #ffffff;
    --bs-accordion-active-bg: #ffffff;
    background: #ffffff !important;
    color: var(--bst-text) !important;
}

/* Zusatzangaben im Header (Abschnitt, Bauzeit) – gleiche Größe wie Text, nur leichter im Gewicht */
.tx-baustellen .tx-baustellen-meta {
    color: var(--bst-meta);
    font-size: 1rem;
    font-weight: 400;
}

/* Rechter Block im Straßen-Header: "Durchführung: <Instanz>" und Bauzeit rechtsbündig,
   untereinander in einer festen Spalte – ergibt über alle Zeilen ein einheitliches Bild */
/* Der Header-Button muss ein Flex-Container sein (Theme-Overrides können das aufheben) */
.tx-baustellen .tx-baustellen-strasse .accordion-button {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    text-align: left;
}

.tx-baustellen .tx-baustellen-strasse-title,
.tx-baustellen .tx-baustellen-strasse-abschnitt {
    flex: 0 1 auto;
}

.tx-baustellen .tx-baustellen-strasse-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    margin-left: auto !important;
    text-align: right !important;
    line-height: 1.3;
}

.tx-baustellen .tx-baustellen-strasse-instance,
.tx-baustellen .tx-baustellen-strasse-bauzeit {
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 575.98px) {
    .tx-baustellen .tx-baustellen-strasse-right {
        flex-basis: 100%;
        align-items: flex-start;
        text-align: left;
        margin-left: 0 !important;
        margin-top: 0.25rem;
    }

    .tx-baustellen .tx-baustellen-strasse-instance,
    .tx-baustellen .tx-baustellen-strasse-bauzeit {
        white-space: normal;
        text-align: left;
    }
}

/* ---------- Detailfelder ---------- */
.tx-baustellen .tx-baustellen-fields {
    row-gap: 0.5rem;
}

.tx-baustellen .tx-baustellen-fields dt {
    font-weight: 700;
}

.tx-baustellen .tx-baustellen-fields dd > :last-child {
    margin-bottom: 0;
}

.tx-baustellen a {
    color: var(--bst-link);
    text-decoration: underline;
}

.tx-baustellen a:hover,
.tx-baustellen a:focus-visible {
    color: var(--bst-text);
}

.tx-baustellen a:focus-visible {
    outline: 3px solid var(--bst-focus);
    outline-offset: 2px;
}

/* ---------- Badges (Status, Zähler) – Bootstrap-Farben (text-bg-*), nur Schriftgröße angehoben ---------- */
.tx-baustellen .badge {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 0.25em 0.6em;
    vertical-align: baseline;
}

/* Leere Liste */
.tx-baustellen .tx-baustellen-empty {
    color: var(--bst-text);
    background-color: var(--bst-bg-status);
    border-color: var(--bst-border);
    font-size: 1rem;
}

/* ---------- Frontend-Datenpflege (Plugin baustellen_manage) ---------- */
.tx-baustellen-manage {
    font-size: 1rem;
    color: #111111;
}

.tx-baustellen-manage .nav-tabs .nav-link {
    color: #111111;
    font-size: 1rem;
}

.tx-baustellen-manage .nav-tabs .nav-link.active {
    font-weight: 600;
}

.tx-baustellen-manage .tx-baustellen-manage-table td,
.tx-baustellen-manage .tx-baustellen-manage-table th {
    font-size: 1rem;
    vertical-align: middle;
}

.tx-baustellen-manage tr.tx-baustellen-manage-hidden td {
    color: #4a4a4a;
    font-style: italic;
}

.tx-baustellen-manage fieldset legend {
    border-bottom: 1px solid #8a949e;
    padding-bottom: 0.25rem;
    margin-bottom: 1rem;
}

.tx-baustellen-manage .form-label {
    font-weight: 600;
}

.tx-baustellen-manage .form-text {
    color: #2b2b2b;
    font-size: 1rem;
}

/* Upload-Zone */
.tx-baustellen-manage-dropzone {
    border: 2px dashed #8a949e;
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-align: center;
    background-color: #f7f8fa;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tx-baustellen-manage-dropzone.is-dragover {
    border-color: #0b4f9c;
    background-color: #dfe5ec;
}

.tx-baustellen-manage-dropzone:focus-visible {
    outline: 3px solid #0b4f9c;
    outline-offset: 2px;
}

.tx-baustellen-manage-dropzone input[type="file"] {
    max-width: 32rem;
    margin-inline: auto;
}

.tx-baustellen-manage .progress {
    height: 1.5rem;
    font-size: 1rem;
}

/* Buttons in der Datenpflege: Primär-Buttons (Neu, Speichern) immer weiße Schrift – auch als Link (a.btn) */
.tx-baustellen-manage .btn-primary,
.tx-baustellen-manage a.btn-primary,
.tx-baustellen-manage .btn-primary:hover,
.tx-baustellen-manage .btn-primary:focus,
.tx-baustellen-manage .btn-primary:active {
    color: #ffffff !important;
    text-decoration: none;
}

/* Icon-Buttons (Bearbeiten / Löschen): ohne Rahmen, transparent; Hover nur leichte helle Fläche,
   Icon-Farbe bleibt (kein schwarzer/ausgefüllter Hintergrund) */
.tx-baustellen-manage .tx-baustellen-manage-iconbtn,
.tx-baustellen-manage a.tx-baustellen-manage-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    line-height: 1;
    border: 0 !important;
    border-radius: 0.375rem;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none;
}

.tx-baustellen-manage .tx-baustellen-manage-iconbtn svg {
    display: block;
}

.tx-baustellen-manage .tx-baustellen-manage-iconbtn-edit,
.tx-baustellen-manage a.tx-baustellen-manage-iconbtn-edit,
.tx-baustellen-manage .tx-baustellen-manage-iconbtn-edit:hover,
.tx-baustellen-manage .tx-baustellen-manage-iconbtn-edit:focus,
.tx-baustellen-manage .tx-baustellen-manage-iconbtn-edit:active {
    color: #0b4f9c !important;
}

.tx-baustellen-manage .tx-baustellen-manage-iconbtn-copy,
.tx-baustellen-manage .tx-baustellen-manage-iconbtn-copy:hover,
.tx-baustellen-manage .tx-baustellen-manage-iconbtn-copy:focus,
.tx-baustellen-manage .tx-baustellen-manage-iconbtn-copy:active {
    color: #1f6f3f !important;
}

.tx-baustellen-manage .tx-baustellen-manage-iconbtn-delete,
.tx-baustellen-manage .tx-baustellen-manage-iconbtn-delete:hover,
.tx-baustellen-manage .tx-baustellen-manage-iconbtn-delete:focus,
.tx-baustellen-manage .tx-baustellen-manage-iconbtn-delete:active {
    color: #a52834 !important;
}

.tx-baustellen-manage .tx-baustellen-manage-iconbtn:hover,
.tx-baustellen-manage .tx-baustellen-manage-iconbtn:focus-visible {
    background: #dfe5ec !important;
}

.tx-baustellen-manage .tx-baustellen-manage-iconbtn:focus-visible {
    outline: 3px solid #0b4f9c;
    outline-offset: 2px;
}