/*
  StarshipOS — Navigationsstation (/bridge/navigation), nur die breiten Ansichten.

  Grundlayout (Karte links, Bedienung 300 px rechts) steht in styles.css (.nav-layout) und
  bleibt bis 1599 px unverändert. Ab 1600 px soll die Station ohne Scrollen auskommen
  (Referenz: 2560×1070 CSS-px, 4K mit 150 %): Karte, Wegpunkte und Bedienung stehen
  nebeneinander statt untereinander, die Bedienung ab 1800 px in zwei Unterspalten.
  Vorbild: Reaktorkontrolle (reactor-console.css).
*/

/* Gruppen der Bedienspalte: schmal keine eigene Box, die Panels bleiben eine Spalte.
   Bewusst kein „-controls" im Namen: responsive-v2.css gibt solchen Klassen flex-wrap. */
.nav-panelgroup { display: contents; }

@media (min-width: 1600px) {
    /* Breiter als die Standardhülle (1400 px), sonst stünde alles untereinander. */
    .station-main:has(.nav-layout) { max-width: min(2800px, 100%); }

    /* Bedienung in zwei Unterspalten: Lage + FTL | Autopilot. */
    .nav-layout { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .nav-layout--controls {
        display: grid;
        grid-template-columns: 300px 300px;
        grid-template-rows: auto 1fr;
        gap: var(--space-md);
        align-items: start;
    }
    .nav-panelgroup { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
    .nav-panelgroup > * { margin: 0; }
    .nav-panelgroup--status { grid-column: 1; grid-row: 1 / span 2; }
    .nav-layout--controls > #nav-autopilot-container { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

    /* Wegpunkttabellen dichter: Zeilen sonst 48 px hoch (Mindesthöhe der Knöpfe),
       Koordinaten in einer Zeile. */
    #waypoint-list-container .waypoint-table { font-size: 0.8rem; }
    #waypoint-list-container .waypoint-table th,
    #waypoint-list-container .waypoint-table td { padding: 2px 6px; }
    #waypoint-list-container .waypoint-col-coords { white-space: nowrap; }
    #waypoint-list-container .waypoint-btn { min-height: 30px; padding-top: 2px; padding-bottom: 2px; }
}

/*
  Ab 1800 px ein Raster über alle Panels (die Spalten-Hüllen werden durchlässig):

      Karte | Wegpunkte | Lage + FTL | Autopilot

  Die Karte ist 4:3 (ohne Füllmodus schneidet der Server 4:3 zu); ihre Breite folgt aus der
  Fensterhöhe, damit sie samt Kopf und Zielauswahl ins Fenster passt, höchstens knapp die
  Hälfte des Platzes neben der Bedienung. Der Link „eigener Bildschirm" liegt über der Karte.
  Bereichsname nicht „auto" (reserviert).
*/
@media (min-width: 1800px) {
    .nav-layout {
        --nav-map-svg-h: max(300px, calc(100dvh - 450px));
        --nav-map-share: 0.45;
        grid-template-columns:
            minmax(0, min(calc(var(--nav-map-svg-h) * 4 / 3 + 42px), calc((100% - 648px) * var(--nav-map-share))))
            minmax(0, 1fr) 300px 300px;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "map wp status pilot"
            "map wp status pilot";
    }
    .nav-layout--map,
    .nav-layout--controls { display: contents; }
    .nav-layout--map > .nav-map-display-link {
        grid-area: map; align-self: start; justify-self: end; position: relative; z-index: 1;
    }
    .nav-layout--map > #nav-map-container { grid-area: map; margin: 28px 0 0; }
    .nav-layout--map > #waypoint-list-container { grid-area: wp; margin: 0; }
    .nav-panelgroup--status { grid-area: status; }
    .nav-layout--controls > #nav-autopilot-container { grid-area: pilot; }

    /* Wegpunktspalte bis 2400 px schmal: Koordinaten dürfen umbrechen, die Entfernung nicht. */
    #waypoint-list-container .waypoint-table { font-size: 0.75rem; }
    #waypoint-list-container .waypoint-col-coords { white-space: normal; }
    #waypoint-list-container .waypoint-table td:nth-last-child(2) { white-space: nowrap; }
}

/* Füllen bis unten (wie die Reaktorkontrolle): Raster wächst auf die Fensterhöhe, das jeweils
   letzte Panel einer Spalte zieht sich mit. Unten bleibt der Innenabstand von .station-main. */
@media (min-width: 1800px) {
    .station-main:has(.nav-layout) { display: flex; flex-direction: column; }
    .nav-layout { flex: 1 0 auto; align-items: stretch; }
    .nav-layout--map > #waypoint-list-container { align-self: start; }
    .nav-panelgroup--status > :last-child { flex: 1 0 auto; }
    /* Kopf und Inhalt sind eigene Kästen im Panel: der Inhalt wächst mit. */
    .nav-layout--controls > #nav-autopilot-container > :last-child { flex: 1 0 auto; }
}

/* Ab 2400 px (2560er-Monitor): Karte darf die Hälfte nehmen, Koordinaten in einer Zeile. */
@media (min-width: 2400px) {
    .nav-layout { --nav-map-share: 0.5; }
    #waypoint-list-container .waypoint-table { font-size: 0.8rem; }
    #waypoint-list-container .waypoint-col-coords { white-space: nowrap; }
}