/*
Projekt: Flight Radar
Zweck: Gestaltet eine eigenstaendige kompakte Touch-Oberflaeche fuer moderne Android- und iOS-Geraete.
Zeitbeispiel: Am 16. August 2026 um 13:04 Uhr bedient ein Oppo Find X9 Ultra das Radar im Hoch- und Querformat ohne horizontales Scrollen.
Versionshistorie: 0.2.0 vom 16. August 2026: Mobile Typfarben-Legende und geografische Kartenbedienung ergaenzt; 0.1.0: Erste mobile Radaransicht mit Safe-Area-Unterstuetzung.
Konfigurationsbereich: Mobile endet verbindlich bei 720 Pixeln.
*/

body { padding-top: env(safe-area-inset-top); }
.login-view { padding: 18px; min-height: calc(100vh - env(safe-area-inset-top)); }
.login-card { padding: 27px 22px; }
.login-card h1 { font-size: 2.7rem; }
.brand-mark-large { margin-bottom: 22px; }

.app-shell { display: block; padding-bottom: env(safe-area-inset-bottom); }
.mobile-header { position: sticky; top: 0; z-index: 30; min-height: 58px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); background: rgba(7, 10, 13, .94); backdrop-filter: blur(10px); padding: 7px max(10px, env(safe-area-inset-right)) 7px max(10px, env(safe-area-inset-left)); }
.mobile-header strong { text-align: center; }
.mobile-header .status-dot { justify-self: center; }
.sidebar { position: fixed; z-index: 50; top: env(safe-area-inset-top); bottom: 0; left: 0; width: min(286px, 86vw); display: grid; grid-template-rows: auto 1fr auto; transform: translateX(-102%); transition: transform 220ms ease; box-shadow: 20px 0 60px rgba(0,0,0,.5); }
.sidebar.is-open { transform: translateX(0); }
.main-content { padding: 18px max(13px, env(safe-area-inset-right)) 28px max(13px, env(safe-area-inset-left)); }
.page-header { display: block; margin-bottom: 18px; }
.page-header h1 { font-size: 2.15rem; }
.header-actions { justify-content: space-between; margin-top: 15px; }
.radar-layout { display: grid; grid-template-columns: 1fr; min-height: 0; }
.radar-stage { min-height: min(64vh, 560px); border-radius: 12px; }
.radar-hud-top { top: 10px; left: 10px; right: 10px; overflow-x: auto; scrollbar-width: none; }
.radar-hud span { white-space: nowrap; padding: 6px 8px; }
.radar-controls { top: auto; right: 10px; bottom: 10px; max-width: calc(100% - 20px); }
.control-button { min-height: 38px; padding: 6px 9px; }
.radar-legend { left: 10px; right: 10px; bottom: 58px; max-width: none; flex-wrap: nowrap; overflow-x: auto; pointer-events: auto; scrollbar-width: none; }
.contact-panel { min-height: 440px; padding: 16px; }
.card-heading h2 { font-size: 1.45rem; }
.flight-route-line { padding: 18px 0; }
.detail-grid { grid-template-columns: 1fr 1fr; }
.contact-list { max-height: 280px; }

.filter-bar { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.search-field { grid-column: 1 / -1; }
.filter-bar .button { grid-column: 1 / -1; }
.history-card { grid-template-columns: 1fr auto; gap: 10px; }
.history-card > :not(.history-callsign):not(.history-open) { display: none; }
.history-callsign small { margin-top: 3px; }
.settings-grid { grid-template-columns: 1fr; }
.settings-card, .settings-card-wide { grid-column: auto; padding: 17px; }
.settings-card-title-actions { display: grid; }
.settings-card-title-actions .button { width: 100%; }
.form-grid { grid-template-columns: 1fr; }
.form-wide { grid-column: auto; }
.user-row { grid-template-columns: 1fr auto; }
.user-row > :nth-child(2), .user-row > :nth-child(3), .user-row > :nth-child(4) { display: none; }
.dialog-detail-grid { grid-template-columns: 1fr; }
.dialog-actions { flex-wrap: wrap; }
.dialog-actions .button { flex: 1; }

@media (orientation: landscape) and (max-height: 520px) {
    .radar-stage { min-height: calc(100vh - 100px); }
    .contact-panel { min-height: 340px; }
}