:root {
    --bar-bg: rgba(255, 255, 255, 0.94);
    --text: #1d2327;
    --muted: #5b6770;
    --picked: #2e8540;
    --mixed: #c9a227;
    --left: #c4362c;
    --unknown: #7a8288;
    --cluster-text: #fff;
    --run-recent: #57c84d;
    --run-month: #f2b705;
    --run-old: #8e959b;
    --basket: #46505a;
    --container: #13807a;
    --centre: #0b5d3b;
    --disposal: #7a5428;
    --full: #d93025;
    --broken: #111;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bar-bg: rgba(28, 32, 36, 0.94);
        --text: #e8eaed;
        --muted: #a5adb4;
    }
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--text);
    background: #dfe3e6;
}

#map { position: absolute; inset: 0; }

.bar {
    position: absolute;
    z-index: 1000;
    top: 8px;
    left: 56px;
    right: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bar-bg);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.bar h1 { margin: 0; font-size: 17px; }
.bar label { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.bar select { font: inherit; padding: 4px 6px; }
.info { flex: 1 1 100%; font-size: 13px; color: var(--muted); min-height: 1.2em; }

.legend {
    position: absolute;
    z-index: 1000;
    left: 8px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--bar-bg);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: -1px;
}
.dot.picked { background: var(--picked); }
.dot.left { background: var(--left); }
.dot.unknown { background: var(--unknown); }

.toggle { color: var(--text) !important; }
.line {
    display: inline-block;
    width: 16px;
    height: 4px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: 2px;
}
.line.run-recent { background: var(--run-recent); }
.line.run-month { background: var(--run-month); }
.line.run-old { background: var(--run-old); }
span > .line:not(:first-child) { margin-left: 6px; }
.square {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px 0 0;
    border-radius: 2px;
    vertical-align: -1px;
    /* heller Rand, damit dunkle Farben auch auf der dunklen Legende sichtbar bleiben */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}
span > .square:not(:first-child) { margin-left: 8px; }
.square.basket, .facility.basket { background: var(--basket); }
.square.container, .facility.container { background: var(--container); }
.square.centre, .facility.centre { background: var(--centre); }
.square.disposal, .facility.disposal { background: var(--disposal); }
.facility {
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
/* Meldungen: roter bzw. schwarz-gestrichelter Rand statt weißem */
.facility.is-full, .square.is-full { border-color: var(--full); box-shadow: 0 0 0 2px var(--full); }
.facility.is-broken, .square.is-broken { border: 2px dashed #fff; box-shadow: 0 0 0 2px var(--broken); }
[hidden] { display: none !important; }
.summary { color: var(--muted); }
.summary:empty { display: none; }

.cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: var(--cluster-text);
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}
.cluster.size-s { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.cluster.size-m { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.cluster.size-l { width: 46px; height: 46px; margin: -23px 0 0 -23px; font-size: 13px; }
.cluster.size-xl { width: 58px; height: 58px; margin: -29px 0 0 -29px; font-size: 14px; }
.cluster.picked { background: var(--picked); }
.cluster.mixed { background: var(--mixed); }
.cluster.left { background: var(--left); }
.cluster.unknown { background: var(--unknown); }

.report h2 { margin: 0 0 4px; font-size: 15px; }
.report p { margin: 2px 0; }
.report ul { margin: 6px 0 0; padding-left: 18px; }
.report .muted { color: #5b6770; font-size: 12px; }
.bin { margin: 6px 0; padding: 6px 0; border-top: 1px solid #dde1e4; border-bottom: 1px solid #dde1e4; }
.bin-status.full { color: var(--full); font-weight: 600; }
.bin-status.broken { font-weight: 600; }
.bin-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.bin-actions button {
    min-height: 36px;
    padding: 4px 12px;
    border: 1px solid #9aa4ab;
    border-radius: 18px;
    background: #fff;
    color: #1d2327;
    font: inherit;
    cursor: pointer;
}
.bin-actions button:hover:not(:disabled) { background: #eef1f3; }
.bin-actions button:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 520px) {
    .bar { left: 52px; padding: 6px 8px; gap: 4px 10px; }
    .bar h1 { flex: 1 1 100%; font-size: 15px; }
}

/* Admin-Seite */
body.admin { background: #f4f6f7; overflow: auto; }
.admin-page { max-width: 760px; margin: 0 auto; padding: 16px; }
.admin-page h1 { font-size: 20px; }
.admin-login { display: grid; gap: 10px; max-width: 320px; }
.admin-login label { display: grid; gap: 4px; }
.admin-login input { font: inherit; padding: 8px; border: 1px solid #9aa4ab; border-radius: 6px; }
.admin-page button { font: inherit; padding: 6px 12px; border: 1px solid #9aa4ab; border-radius: 6px; background: #fff; color: #1d2327; cursor: pointer; }
.admin-page button.link { border: 0; padding: 0; background: none; color: #0b57d0; text-decoration: underline; }
.admin-message { color: var(--muted); min-height: 1.4em; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
.admin-table th, .admin-table td { padding: 6px 8px; border-bottom: 1px solid #dde1e4; text-align: left; font-size: 14px; }
@media (prefers-color-scheme: dark) {
    body.admin { background: #1c2024; }
    .admin-table { background: #262b30; }
    .admin-table th, .admin-table td { border-color: #3a4147; }
    .admin-page a, .admin-page button.link { color: #8ab4f8; }
}

/* Melden */
button.primary, .bar button {
    font: inherit;
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid #0b6b3a;
    background: #0e8a4a;
    color: #fff;
    cursor: pointer;
}
.bar button:disabled { opacity: 0.6; cursor: default; }
.crosshair {
    position: absolute;
    z-index: 900;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    pointer-events: none;
    background:
        linear-gradient(#d93025, #d93025) center / 2px 100% no-repeat,
        linear-gradient(#d93025, #d93025) center / 100% 2px no-repeat;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
.place-bar {
    position: absolute;
    z-index: 1100;
    left: 8px;
    right: 8px;
    bottom: 24px;
    max-width: 520px;
    margin: 0 auto;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bar-bg);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.place-bar p { margin: 0 0 6px; }
.place-actions, .dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.place-actions button, .dialog-actions button {
    font: inherit;
    min-height: 38px;
    padding: 4px 14px;
    border-radius: 19px;
    border: 1px solid #9aa4ab;
    background: #fff;
    color: #1d2327;
    cursor: pointer;
}
.place-actions button.primary, .dialog-actions button.primary { border-color: #0b6b3a; background: #0e8a4a; color: #fff; }
.muted { color: var(--muted); font-size: 13px; }
.report-dialog {
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 16px;
    border: 0;
    border-radius: 12px;
    color: var(--text);
    background: #fff;
}
.report-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.report-dialog h2 { margin: 0 0 10px; font-size: 18px; }
.field { display: grid; gap: 4px; margin: 0 0 10px; padding: 0; border: 0; }
.field input[type=email], .field textarea { font: inherit; padding: 6px 8px; border: 1px solid #9aa4ab; border-radius: 6px; }
.field legend { padding: 0; margin-bottom: 4px; }
fieldset.field label { margin-right: 14px; }
.consent { display: block; font-size: 13px; margin: 6px 0; }
.preview { display: block; max-width: 100%; max-height: 200px; margin: 0 0 10px; border-radius: 6px; }
.report-message { min-height: 1.4em; }
/* feste Höhe: das Foto lädt erst nach dem Verschieben der Karte, ein wachsendes Popup rutschte unter die Kopfleiste */
.report-photo { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: 6px; margin: 4px 0; }
.photo-report {
    border-radius: 50%;
    background: #e8710a;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.photo-report.cleaned, .dot.photo.cleaned { background: #8a9399; }
.dot.photo { background: #e8710a; }
@media (prefers-color-scheme: dark) {
    .report-dialog { background: #262b30; }
    .field input[type=email], .field textarea { background: #1c2024; color: var(--text); border-color: #4a525a; }
}
.tabs { display: flex; gap: 6px; margin: 0 0 8px; }
.tabs button.active { background: #0e8a4a; color: #fff; border-color: #0b6b3a; }
.photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 24px; }
.photo-card { padding: 8px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.photo-card img { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #000; border-radius: 4px; }
.photo-card p { margin: 4px 0; font-size: 14px; overflow-wrap: anywhere; }
.card-actions { display: flex; gap: 6px; margin-top: 6px; }
@media (prefers-color-scheme: dark) {
    .photo-card { background: #262b30; }
}
.admin-table input { font: inherit; width: 9em; padding: 4px 6px; border: 1px solid #9aa4ab; border-radius: 6px; }
.legal { max-width: 720px; line-height: 1.55; }
.legal h2 { font-size: 17px; margin: 22px 0 6px; }
.legal a, .legend a { color: #0b57d0; }
.legal-links { font-size: 12px; }
@media (prefers-color-scheme: dark) {
    .legal a, .legend a { color: #8ab4f8; }
}