/* Handy-Anpassungen für die TM-Karte.
   Eigene Datei, damit ein squaremap-Update sie nicht mitreißt
   (web-directory.auto-update steht deshalb auf false). */

/* Randbereiche moderner Handys (Notch / Home-Indikator) freihalten */
.leaflet-control-container .leaflet-top {
    padding-top: env(safe-area-inset-top, 0px);
}
.leaflet-control-container .leaflet-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.leaflet-control-container .leaflet-left { padding-left: env(safe-area-inset-left, 0px); }
.leaflet-control-container .leaflet-right { padding-right: env(safe-area-inset-right, 0px); }

/* Auf Touch-Geräten sind die Standard-Schaltflächen mit 26 px zu klein zum Treffen.
   Apple und Google empfehlen mindestens 44 px. */
@media (hover: none) and (pointer: coarse) {
    .leaflet-touch .leaflet-bar a,
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 22px !important;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 48px !important;
        height: 48px !important;
        background-size: 26px 26px !important;
    }

    /* Ebenen-Auswahl: größere Zeilen und Ankreuzfelder */
    .leaflet-control-layers-list label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 4px;
        font-size: 15px;
    }
    .leaflet-control-layers-selector {
        width: 20px;
        height: 20px;
        margin: 0;
    }
    .leaflet-control-layers-expanded {
        max-height: 70vh;
        overflow-y: auto;
        padding: 10px 14px;
    }

    /* Koordinatenleiste: auf schmalen Displays lesbar und nicht im Weg */
    .coordinates {
        font-size: 13px !important;
        padding: 6px 10px !important;
        opacity: .92;
    }

    /* Popups mit genug Rand, damit das Schließen-X gut zu treffen ist */
    .leaflet-popup-close-button {
        width: 34px !important;
        height: 34px !important;
        font-size: 22px !important;
        line-height: 30px !important;
    }
    .leaflet-popup-content { margin: 14px 18px; font-size: 15px; }

    /* Attribution klein halten - sie frisst sonst Platz auf dem Handy */
    .leaflet-control-attribution { font-size: 10px; opacity: .7; }
}

/* Sehr schmale Displays: Steuerelemente enger zusammenrücken */
@media (max-width: 480px) {
    .leaflet-control { margin: 8px !important; }
    .leaflet-control-layers-expanded { max-width: 78vw; }
}

/* Ruckelfreies Ziehen der Karte auf Touch-Geräten */
#map { touch-action: pan-x pan-y; }

/* ================================================================
   Aussehen der Karte im Stil der Bau-Seiten (bau/bau.css):
   dunkle, eckige Bedienelemente, Zahlen in Monocraft, Koordinaten
   wie im F3-Bildschirm. Nur Farben und Formen, squaremap bleibt unberührt.
   ================================================================ */
@font-face { font-family: "Monocraft"; src: url("schrift/Monocraft.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Monocraft"; src: url("schrift/Monocraft-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
    --tm-grund: rgba(17, 18, 20, .9);
    --tm-linie: #41434a;
    --tm-text: #efefef;
    --tm-grau: #a9a9a9;
    --tm-mono: "Monocraft", ui-monospace, Menlo, monospace;
}
.leaflet-container { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #0a0b0c; }
.leaflet-container ::selection { background: #33b5ff; color: #04121c; }

/* Zoom, Ebenen, Link: eine Familie dunkler Quadrate */
.leaflet-bar, .leaflet-control-layers, .leaflet-touch .leaflet-bar, .leaflet-touch .leaflet-control-layers {
    border: 1px solid var(--tm-linie) !important; border-radius: 2px !important;
    background: var(--tm-grund) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .35) !important; color: var(--tm-text);
}
.leaflet-bar a, .leaflet-bar a:hover {
    background: transparent !important; color: var(--tm-text) !important; border-bottom-color: var(--tm-linie) !important;
    border-radius: 0 !important; font: 700 18px/30px var(--tm-mono) !important;
}
.leaflet-bar a:hover { background: rgba(255, 255, 255, .08) !important; }
.leaflet-bar a.leaflet-disabled { color: #5a5c63 !important; background: transparent !important; }
.leaflet-control-layers-toggle, div.leaflet-control-layers.link img { filter: invert(1) brightness(1.4); }
.leaflet-control-layers-expanded { padding: 10px 14px !important; font-size: 14px; }
.leaflet-control-layers-separator { border-top-color: var(--tm-linie) !important; }
.leaflet-control-layers-selector { accent-color: #7efc20; }
.leaflet-control-layers label { cursor: pointer; }

/* Koordinaten wie die Zeilen im F3-Bildschirm */
div.leaflet-control-layers.coordinates {
    background: rgba(60, 60, 60, .72) !important; border: 0 !important; box-shadow: none !important;
    font: 12px/14px var(--tm-mono) !important; color: #e0e0e0; text-shadow: 1px 1px 0 #2a2a2a;
    padding: 4px 6px 2px !important; height: auto !important;
}

/* Popups und Banner-Schilder */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: rgba(17, 18, 20, .95); color: var(--tm-text); border-radius: 2px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.leaflet-popup-content-wrapper { border: 1px solid var(--tm-linie); }
.leaflet-popup-content a { color: var(--tm-text); }
.leaflet-container a.leaflet-popup-close-button { color: var(--tm-grau); }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--tm-text); }
.leaflet-tooltip {
    background: rgba(17, 18, 20, .9); color: var(--tm-text); border: 1px solid var(--tm-linie); border-radius: 2px;
    box-shadow: none; font: 12px var(--tm-mono);
}
.leaflet-tooltip:before { display: none; }
.leaflet-control-attribution { background: rgba(17, 18, 20, .7) !important; color: var(--tm-grau) !important; }
.leaflet-control-attribution a { color: var(--tm-text) !important; }

/* Eigene Knöpfe rechts unten (Bauprojekte, Banner) */
#tm-knoepfe {
    position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 8px;
    right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
.tm-knopf {
    width: 48px; height: 48px; padding: 0; cursor: pointer; display: grid; place-items: center;
    background: var(--tm-grund); color: var(--tm-text); border: 1px solid var(--tm-linie); border-radius: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: background-color .15s, border-color .15s;
}
#tm-knopf-bau { order: -2; }
#tm-knopf-builds { order: -1; }
.tm-knopf:hover { background: #26272b; border-color: #6c6e74; }
.tm-knopf:active { transform: translateY(1px); }
.tm-knopf:focus-visible { outline: 2px solid var(--tm-text); outline-offset: 2px; }
.tm-knopf::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.tm-knopf[data-icon=banner] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h9v1h-9zM0 1h9v1h-9zM1 2h7v1h-7zM1 3h7v1h-7zM1 4h7v1h-7zM1 5h7v1h-7zM1 6h3v1h-3zM5 6h3v1h-3zM1 7h2v1h-2zM6 7h2v1h-2zM1 8h1v1h-1zM7 8h1v1h-1z'/%3E%3C/svg%3E"); }
.tm-knopf[data-icon=bau] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h9v1h-9zM0 1h1v1h-1zM8 1h1v1h-1zM0 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM0 4h9v1h-9zM0 5h9v1h-9zM0 6h9v1h-9zM0 7h9v1h-9zM0 8h9v1h-9z'/%3E%3C/svg%3E"); }
.tm-knopf[data-icon=haus] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1h-1zM3 1h3v1h-3zM2 2h5v1h-5zM1 3h7v1h-7zM0 4h9v1h-9zM1 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM3 6h2v1h-2zM7 6h1v1h-1zM1 7h1v1h-1zM3 7h2v1h-2zM7 7h1v1h-1zM1 8h7v1h-7z'/%3E%3C/svg%3E"); }

/* Listen-Fenster (Banner, Bauprojekte) */
.tm-hg {
    position: fixed; inset: 0; z-index: 10001; background: rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center; padding: 18px;
    animation: tm-ein .2s ease-out;
}
.tm-dialog {
    width: 100%; max-width: 400px; max-height: 76vh; display: flex; flex-direction: column;
    background: #17181b; color: var(--tm-text); border: 1px solid var(--tm-linie); border-radius: 2px;
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
    animation: tm-hoch .28s cubic-bezier(.16, 1, .3, 1);
}
.tm-dialog-kopf { padding: 16px 18px 12px; border-bottom: 1px solid #2c2e33; }
.tm-dialog-kopf h2 { margin: 0; font: 700 16px var(--tm-mono); }
.tm-dialog-kopf p { margin: 4px 0 0; color: var(--tm-grau); font-size: 13px; }
.tm-dialog-inhalt { overflow: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--tm-linie) transparent; }
.tm-leer { padding: 16px 18px; color: var(--tm-grau); line-height: 1.6; }
.tm-leer.fehler { color: #ff8a8a; }
.tm-zeile {
    display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid #23252a;
    color: var(--tm-text); text-decoration: none;
}
a.tm-zeile:hover { background: #202125; }
.tm-zeile .tm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tm-zeile .tm-koord { font: 12px var(--tm-mono); color: var(--tm-grau); white-space: nowrap; }
.tm-zeile .tm-prozent { font: 700 13px var(--tm-mono); color: #7efc20; }
.tm-farbe { width: 12px; height: 12px; flex: none; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .25), inset -2px -2px 0 rgba(0, 0, 0, .3), 0 0 0 1px #000; }
.tm-projekt { display: block; }
.tm-projekt .tm-oben { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.tm-xp { position: relative; height: 6px; margin-top: 8px; background: #0a0b0c; box-shadow: 0 0 0 1px #2c2e33; overflow: hidden; }
.tm-xp i { display: block; height: 100%; background: linear-gradient(#a8ff5c, #7efc20 45%, #5bc414); }
.tm-xp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(100% - 2px), rgba(0, 0, 0, .75) 0) 0 0 / 10% 100%; }
.tm-dialog-fuss { display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid #2c2e33; }
.tm-dialog-fuss > * {
    flex: 1; min-height: 44px; display: grid; place-items: center; cursor: pointer; text-decoration: none;
    font: 700 13px var(--tm-mono); border-radius: 2px; border: 1px solid var(--tm-linie);
    background: #222327; color: var(--tm-text);
}
.tm-dialog-fuss > *:hover { background: #2c2d32; }
.tm-dialog-fuss > .tm-haupt { background: var(--tm-text); color: #111214; border-color: var(--tm-text); }
.tm-dialog-fuss > .tm-haupt:hover { background: #fff; }
.tm-dialog-fuss > :disabled { opacity: .55; cursor: default; }

/* Kurze Meldung unten */
#tm-hinweis {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 10000; padding: 11px 16px; border-radius: 2px; font: 13px var(--tm-mono); color: var(--tm-text);
    background: rgba(17, 18, 20, .94); border: 1px solid var(--tm-linie); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    pointer-events: none; transition: opacity .25s; max-width: 86vw; text-align: center;
}
#tm-hinweis.fehler { border-color: #ff3333; color: #ffb3b3; }

@keyframes tm-ein { from { opacity: 0; } }
@keyframes tm-hoch { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .tm-hg, .tm-dialog { animation: none; } }

/* Auf dem Handy als Blatt von unten, da wo der Daumen ist */
@media (max-width: 560px) {
    .tm-hg { align-items: flex-end; padding: 0; }
    .tm-dialog { max-width: none; max-height: 80vh; border-width: 1px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}