/* gps.css — Seite „GPS-Ortung" (Order-Portal). Farben/Token aus styles.css (DESIGN.md).
   Karten-CSP erlaubt hier inline-Styles von MapLibre; im Markup bleiben sie verboten. */

.gps-body { background: var(--bg); }
.gps-page { padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 14px;
    height: calc(100vh - 83px); min-height: 560px; box-sizing: border-box; }

.gps-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gps-kopf h1 { margin: 0; font-size: 22px; font-weight: 600; color: var(--navy); }
.gps-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
    background: rgba(162,198,41,0.12); border: 1px solid rgba(162,198,41,0.45);
    color: #4d6410; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; }
.gps-quelle { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.gps-quelle.is-veraltet { color: #b06d00; font-weight: 600; }

/* Punkte: Farbe UND Form (gefuellt/hohl), lesbar auch bei Rot-Gruen-Schwaeche. */
.gps-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; }
.gps-punkt--live { background: #4d7c0f; }
.gps-punkt--alt { background: #9aa1ad; }
.gps-punkt--still { background: transparent; box-shadow: inset 0 0 0 2px #9aa1ad; }

.gps-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gps-kachel { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: left;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
    font: inherit; color: var(--navy); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.gps-kachel:hover { border-color: #c9d0db; box-shadow: var(--shadow-md); }
.gps-kachel[aria-pressed="true"] { border-color: var(--green); box-shadow: 0 0 0 3px rgba(162,198,41,0.18); }
.gps-kachel b { display: block; font-size: 24px; line-height: 1.05; font-weight: 700; }
.gps-kachel-text { display: block; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }

.gps-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 380px 1fr; gap: 14px; }
.gps-liste-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.gps-suche { margin: 12px 12px 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: inherit; font-size: 13px; color: var(--navy); }
.gps-suche:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(162,198,41,0.18); }
.gps-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; border-top: 1px solid var(--border); }

.gps-zeile { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 3px 10px;
    align-items: center; padding: 10px 14px; border-bottom: 1px solid #f0f1f3; cursor: pointer; }
.gps-zeile:hover { background: #f8f9fb; }
.gps-zeile.is-gewaehlt { background: rgba(162,198,41,0.10); box-shadow: inset 3px 0 0 var(--green); }
.gps-zeile:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.gps-schild { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 12px; white-space: nowrap;
    border: 1.5px solid var(--navy); border-radius: 4px; padding: 1px 6px; background: #fff; display: inline-flex; align-items: center; }
.gps-ort { font-weight: 600; font-size: 13px; color: var(--navy); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gps-ort .flag { width: 18px; height: 12px; vertical-align: -1px; margin-right: 5px; border-radius: 2px; }
.gps-ort--leer { color: var(--text-muted); font-weight: 500; }
.gps-alter { grid-column: 2 / 4; font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

.gps-karte-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); min-height: 0; background: #dfe9f2; }
.gps-karte { position: absolute; inset: 0; z-index: 0; }
.gps-karte .leaflet-tile-pane { filter: grayscale(1) brightness(1.08) contrast(.9); }
.gps-karte-leer { padding: 24px; font-size: 13px; color: var(--text-secondary); }
.gps-karte-hinweis { position: absolute; left: 12px; bottom: 48px; z-index: 1; font-size: 11px; color: var(--text-secondary);
  background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px; pointer-events: none; }
.gps-legende { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 14px; align-items: center;
    background: rgba(255,255,255,0.94); border-radius: var(--radius-sm); padding: 7px 12px; font-size: 12px;
    color: var(--text-secondary); box-shadow: var(--shadow-sm); }
.gps-legende > span { display: inline-flex; align-items: center; gap: 6px; }

/* Marker (DOM, Task 6) */
.gps-marker { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #fff; cursor: pointer;
    box-shadow: 0 1px 4px rgba(4,12,44,0.35); box-sizing: border-box; transition: transform .15s; }
.gps-marker--live { background: #4d7c0f; }
.gps-marker--alt { background: #9aa1ad; }
.gps-marker--still { background: #fff; border: 2.5px solid #9aa1ad; }
.gps-marker.is-gewaehlt { transform: scale(1.45); box-shadow: 0 0 0 6px rgba(162,198,41,0.32), 0 2px 8px rgba(4,12,44,0.4); }

/* Info-Karte (Task 6) */
.gps-info { position: absolute; top: 12px; left: 12px; width: 290px; background: #fff; border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(4,12,44,0.2); padding: 14px 16px; z-index: 2; }
.gps-info[hidden] { display: none; }
.gps-info-titel { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.gps-info-kz { font-size: 17px; font-weight: 700; margin: 2px 0 10px; color: var(--navy); }
.gps-info-zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 6px 0; border-top: 1px solid #f0f1f3; }
.gps-info-zeile > span:first-child { color: var(--text-secondary); flex: none; }
.gps-info-zeile > b { text-align: right; font-weight: 600; }
.gps-info-ok { color: #4d6410; font-weight: 700; }
.gps-info-warn { color: #b06d00; font-weight: 700; }
.gps-info-schliessen { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--text-muted); }
.gps-info-link { display: inline-block; margin-top: 10px; font-size: 12.5px; color: #1a3fa8; font-weight: 600; }

@media (max-width: 1100px) {
    .gps-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gps-split { grid-template-columns: 1fr; grid-template-rows: 320px 420px; }
    .gps-page { height: auto; }
}

.gps-punkt--auftrag { background: var(--navy); border-radius: 2px; }
.gps-streifen { margin: 0; padding: 8px 12px; border-radius: 6px; background: #fdecec; color: #9b1c1c; font-size: 13px; font-weight: 600; }
.gps-streifen[hidden] { display: none; }
.gps-zeile-auftrag { grid-column: 1 / 4; font-size: 12px; color: var(--navy); display: flex; gap: 6px; align-items: center; }
.gps-zeile-auftrag .status-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gps-umkreis-kopf { margin: 0 12px 8px; padding: 8px 10px; border-radius: 6px; background: #f3f6ec; font-size: 12.5px; color: var(--navy); }
.gps-umkreis-kopf[hidden] { display: none; }
.gps-werk { width: 16px; height: 16px; background: var(--navy); border: 2.5px solid #fff; border-radius: 3px; transform: rotate(45deg); box-shadow: 0 1px 4px rgba(4,12,44,.35); cursor: default; }
.gps-werk-zeichen { display: inline-block; width: 9px; height: 9px; background: var(--navy); transform: rotate(45deg); }
.gps-km { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Huellen: MapLibre setzt `transform` inline; die Optik sitzt am Kind. */
.gps-marker-huelle { width: 14px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.gps-werk-huelle { width: 16px; height: 16px; display: block; }
.gps-werk-huelle .gps-werk { width: 100%; height: 100%; box-sizing: border-box; }
.gps-marker { display: block; }