:root {
    --bg: #f4f5f7;
    --panel-bg: #ffffff;
    --border: #d6d9de;
    --text: #1f2430;
    --text-muted: #5c6470;
    --accent: #2c6fbb;
    --accent-text: #ffffff;

    /* Statusfarben (Karte + Liste) */
    --status-new:     #d62728;
    --status-open:    #d62728;
    --status-changed: #e08e2c;
    --status-expired: #6a1a72;
    --status-missing: #2a2d33;
    --status-done:    #5cb85c;
    --status-ignored: #9ca3af;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text); background: var(--bg); font-size: 14px;
}
body { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px; background: #1f2430; color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.topbar h1 { font-size: 16px; margin: 0; font-weight: 600; }
.topbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar__meta { color: #c8cdd6; font-size: 12px; margin-left: 8px; }

.btn {
    appearance: none; border: 1px solid transparent; background: var(--accent);
    color: var(--accent-text); padding: 6px 12px; border-radius: 4px;
    cursor: pointer; font-size: 13px; line-height: 1.4;
}
.btn:hover { filter: brightness(1.05); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; filter: none; }
.btn--ghost   { background: transparent; color: var(--text); border-color: var(--border); }
.topbar .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--success { background: #2e7d32; }
.btn--warn    { background: #b08900; }
.btn--danger  { background: #8a2522; }
.btn--neutral { background: #4a5568; }
.btn--small   { padding: 3px 8px; font-size: 12px; }
.btn--link    { background: transparent; color: var(--accent); padding: 0; border: none; text-decoration: underline; }
.josm-btn     { background: #2e7d32; }
.josm-fallback{ align-self: center; font-size: 12px; }

.layout {
    flex: 1;
    display: grid;
    grid-template-columns: 360px 1fr 400px;
    grid-template-rows: 1fr;
    min-height: 0;
}

.sidebar {
    background: var(--panel-bg); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; min-height: 0;
}
.sidebar__filters {
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 6px;
}
.filter { display: flex; flex-direction: column; font-size: 12px; color: var(--text-muted); }
.filter select { padding: 4px 6px; font-size: 13px; }
.filter--check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }

.sidebar__legend {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px;
    border-bottom: 1px solid var(--border); font-size: 11px;
}
.legend { padding: 2px 8px; border-radius: 10px; color: #fff; }
.legend--new     { background: var(--status-new); }
.legend--changed { background: var(--status-changed); }
.legend--expired { background: var(--status-expired); }
.legend--missing { background: var(--status-missing); }
.legend--done    { background: var(--status-done); }
.legend--ignored { background: var(--status-ignored); color: #1f2430; }

.sidebar__list { flex: 1; overflow: auto; }
.sidebar__placeholder { padding: 16px; color: var(--text-muted); }
.sidebar__count { padding: 6px 12px; color: var(--text-muted); font-size: 12px; background: #f7f8fa; border-bottom: 1px solid var(--border); }

.incident-card {
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    cursor: pointer; display: flex; flex-direction: column; gap: 4px;
    border-left: 4px solid transparent;
}
.incident-card:hover { background: #f0f3f8; }
.incident-card.is-active { background: #e3edfa; border-left-color: var(--accent); padding-left: 8px; }
.incident-card__title { font-weight: 600; }
.incident-card__desc  { color: var(--text-muted); font-size: 12px; }
.incident-card__meta {
    color: var(--text-muted); font-size: 12px;
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}

.badge {
    display: inline-block; padding: 1px 7px; border-radius: 10px;
    font-size: 11px; font-weight: 600; color: #fff;
}
.badge--new     { background: var(--status-new); }
.badge--changed { background: var(--status-changed); }
.badge--open    { background: var(--status-open); }
.badge--done    { background: var(--status-done); }
.badge--ignored { background: var(--status-ignored); color: #1f2430; }
.badge--archived{ background: #6b7280; }
.badge--expired { background: var(--status-expired); }
.badge--missing { background: var(--status-missing); }
.badge--warn    { background: #b08900; }
.badge--info    { background: #2c6fbb; }
.badge--ok      { background: #2e7d32; }
.badge--neutral { background: #4a5568; }

/* Quellen-Badges. Bewusst dezent gewählt, damit Statusfarbe weiter dominiert. */
.badge--src     { background: #475569; color: #fff; }
.badge--src-bw_roadworks_geojson    { background: #1f5fa6; }
.badge--src-evis_at8_planned_geojson{ background: #6f4f1c; }

.map-area { position: relative; min-height: 0; }
#map { width: 100%; height: 100%; }

.details {
    background: var(--panel-bg); border-left: 1px solid var(--border);
    padding: 14px 16px; overflow: auto;
}
.details__placeholder { color: var(--text-muted); }
.details h2 { margin: 0 0 6px 0; font-size: 16px; }
.details dl { display: grid; grid-template-columns: 110px 1fr; column-gap: 8px; row-gap: 4px; margin: 12px 0; }
.details dt { color: var(--text-muted); }
.details dd { margin: 0; word-break: break-word; }
.details textarea {
    width: 100%; min-height: 70px; border: 1px solid var(--border);
    border-radius: 4px; padding: 6px; font-family: inherit; font-size: 13px;
    resize: vertical;
}
.details textarea.osm-ways { min-height: 90px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.details .form-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.details .form-row label { color: var(--text-muted); min-width: 90px; }
.details .warnings {
    list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px;
}
.details .warnings li {
    background: #fff8e1; border: 1px solid #f0d27f; color: #5b4400;
    padding: 6px 8px; border-radius: 4px; font-size: 12px;
}
.details .diff {
    list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px;
}
.details .diff li {
    background: #fff4e1; border: 1px solid #f0c98e; color: #5b3b00;
    padding: 6px 8px; border-radius: 4px; font-size: 12px;
}
.details .diff strong { display: block; margin-bottom: 2px; }
.details .hint {
    margin: 8px 0; padding: 8px 10px; border-radius: 4px; font-size: 12px;
    line-height: 1.4;
}
.details .hint--warn {
    background: #fff8e1; border: 1px solid #f0d27f; color: #5b4400;
}
.details .hint code { background: rgba(0,0,0,0.05); padding: 0 4px; border-radius: 3px; }
.details .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.details a.josm-link, .details a.osm-link, .details .josm-disabled {
    display: inline-block; padding: 6px 10px; border-radius: 4px; text-decoration: none;
    color: #fff;
}
.details a.josm-link { background: #2e7d32; }
.details a.osm-link  { background: #4a5568; }
.details .josm-disabled { background: #c8cdd6; color: #1f2430; cursor: not-allowed; }
.details .conditional {
    margin: 8px 0; padding: 8px;
    background: #f1f5f9; border: 1px solid #d4dce5; border-radius: 4px;
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.details .conditional code {
    flex: 1 1 100%;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px; word-break: break-all;
    background: #fff; padding: 4px 6px; border-radius: 3px; border: 1px solid #e1e5ec;
}
.details .conditional__buttons { display: flex; gap: 6px; }
.details .conditional.is-invalid {
    background: #fde7e7; border-color: #f3a5a5; color: #6c1a1a;
    display: block;
}
.details .conditional.is-invalid p { margin: 4px 0 0; }

/* Toast --------------------------------------------------------------- */
.toast {
    position: fixed; bottom: 16px; right: 16px;
    padding: 10px 14px; background: #1f2430; color: #fff;
    border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.18s, transform 0.18s;
    z-index: 9999; pointer-events: none; max-width: 70vw;
    font-size: 13px; line-height: 1.4;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--info  { background: #2c6fbb; }
.toast--ok    { background: #2e7d32; }
.toast--warn  { background: #b08900; }
.toast--error { background: #8a2522; }

.dialog {
    border: 1px solid var(--border); border-radius: 6px;
    padding: 16px 20px; max-width: 800px; width: 80%;
}
.dialog--wide { max-width: 1100px; width: 92%; }
.dialog h2 { margin-top: 0; }
.dialog h3 { margin-top: 18px; margin-bottom: 6px; font-size: 14px; }
.dialog table { border-collapse: collapse; width: 100%; font-size: 13px; }
.dialog th, .dialog td { padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.dialog th { background: #eef0f4; }
.dialog menu { display: flex; justify-content: flex-end; padding: 0; margin: 12px 0 0; }

.kv {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: max-content 1fr; column-gap: 12px; row-gap: 3px;
    font-size: 13px;
}
.kv li { display: contents; }
.kv li > span:first-child { color: var(--text-muted); }
.kv li > span:last-child  { font-weight: 600; }

.error {
    background: #fde7e7; border: 1px solid #f3a5a5; color: #6c1a1a;
    padding: 8px 10px; border-radius: 4px; margin: 6px 0; font-size: 13px;
}

@media (max-width: 1100px) {
    .layout { grid-template-columns: 280px 1fr; }
    .details { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--border); }
}