/* Desktop-Anpassungen (Kapitel 11.1 nennt explizit eine separate
   css/desktop.css) -- das Layout bleibt mobil-first (Kapitel 11.2), auf
   breiten Bildschirmen wird der Inhalt nur zentriert und die
   Touch-Ziel-Breite der Bottom-Nav begrenzt, statt über die volle
   Fensterbreite gestreckt zu werden. */

/* Nutzerfeedback: "Bei Querformat oder Desktop Ansicht, soll anstelle des
   Menüpunkt 'Mehr' alle Menüpunkte angezeigt werden, dann wären wir schon
   ziemlich nah an einer nutzbaren Desktop Seite und es lässt sich auch auf
   Tablets gut bedienen." -- eigene, breiteste Bedingung (nicht an die
   700px-Schwelle unten gekoppelt): "Querformat" schließt auch schmale
   Handys im Querformat mit ein (z. B. ältere/kleine Android-Geräte landen
   unter 700px Breite), die trotzdem schon von der vollen Navigation
   profitieren sollen. `.nav-item-extended`/`.nav-item-more` werden in
   main.css als mobiler Hochformat-Default (ausgeblendet bzw. sichtbar)
   deklariert -- hier wird das für Querformat/Desktop umgekehrt. Siehe
   components/bottom-nav.js: DOM-Struktur bleibt identisch, nur CSS
   entscheidet, welche Punkte sichtbar sind.*/
@media (min-width: 700px), (orientation: landscape) {
  .nav-item-extended { display: flex; }
  .nav-item-more { display: none; }
}

/* Unterhalb der 960px-Seitenleiste (siehe zweiter Breakpoint weiter unten)
   bleibt die Navigation eine (jetzt viel vollere) Bottom-Leiste -- ohne
   Anpassung würde `flex: 1` (siehe main.css) 10+ Punkte über die volle
   Breite auseinanderziehen. Stattdessen eine kompakte, mittig ausgerichtete
   Werkzeugleiste, die bei Bedarf in eine zweite Zeile umbricht. Bewusst
   NICHT an dieselbe `(orientation: landscape)`-Bedingung wie oben gekoppelt
   (`@media`-Bedingungen lassen sich nicht direkt kombinieren, ohne die
   955px-Sidebar-Variante versehentlich mit einzuschließen) -- stattdessen
   ein expliziter `max-width`, der knapp unter dem Sidebar-Breakpoint endet.
   Für sehr schmale Querformat-Handys (< 700px) gilt dieselbe
   Wrap-Behandlung, damit die Punkte dort nicht abgeschnitten werden. */
@media ((min-width: 700px) and (max-width: 959px)), ((orientation: landscape) and (max-width: 959px)) {
  .bottom-nav { flex-wrap: wrap; justify-content: center; }
  .nav-item { flex: 0 0 auto; min-width: 76px; }
}

@media (min-width: 700px) {
  .app-shell {
    max-width: 560px;
    margin: 0 auto;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);
  }

  .auth-page {
    max-width: 440px;
  }

  .resource-bar {
    padding: 16px 20px;
  }

  .screen {
    padding: 18px 22px 28px;
  }

  .bottom-nav {
    padding-bottom: 4px;
  }

  .nav-item {
    font-size: 0.68rem;
  }

  body {
    background: radial-gradient(ellipse at top, #141c30 0%, #05070c 100%);
  }
}

@media (min-width: 1000px) {
  .app-shell {
    max-width: 640px;
  }
}

/* Spätere Überarbeitung (Nutzer-Vorgabe: "UX-Verbesserungen" -> fein
   abgestimmtes Desktop-Layout): ab hier reicht "die Handy-Ansicht nur
   zentriert und breiter gerahmt" (siehe obige Breakpoints) nicht mehr --
   auf einem echten Desktop-Bildschirm wirkt eine schmale, mittig
   schwebende Telefonspalte mit sehr viel ungenutztem Raum links/rechts
   fehl am Platz. Ab hier wird die Bottom-Navigation zu einer festen
   Seitenleiste links (klassisches Desktop-App-Layout), der Inhalt bekommt
   entsprechend mehr Breite -- alles rein über CSS-Grid auf denselben drei
   Kindern von `.app-shell` (`#resource-bar-slot`, `.screen`,
   `.bottom-nav`), OHNE Änderungen an app-shell.js/bottom-nav.js: die
   Navigation bleibt exakt dieselben `<a>`-Elemente, nur ihre Anordnung und
   das Layout drumherum ändern sich. */
@media (min-width: 960px) {
  .app-shell {
    display: grid;
    grid-template-columns: 232px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "nav resbar"
      "nav screen";
    max-width: 1040px;
    height: 100vh;
    border: 1px solid var(--border);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);
  }

  #resource-bar-slot { grid-area: resbar; }
  .screen { grid-area: screen; padding: 24px 32px 40px; }
  .screen .page-wrap { max-width: 720px; margin: 0; }

  .resource-bar {
    justify-content: flex-start;
    gap: 28px;
    padding: 16px 28px;
  }

  .bottom-nav {
    grid-area: nav;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    height: 100%;
    padding: 20px 10px;
    border-top: none;
    border-right: 1px solid var(--border);
    background: #0c1224;
    /* Jetzt bis zu ~13 Punkte (Nutzerfeedback: "alle Menüpunkte anzeigen")
       statt der bisherigen 5 -- bei sehr niedrigen Fensterhöhen lieber
       scrollen als abzuschneiden. */
    overflow-y: auto;
  }

  .nav-item {
    flex: 0 0 auto; /* nicht mehr `flex:1` (siehe main.css) -- sonst würden
      sich 13 statt 5 Punkte gleichmäßig über die GESAMTE Seitenleistenhöhe
      verteilen, mit unschön großen Lücken dazwischen. */
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
    min-height: auto;
  }
  .nav-item.active { background: var(--panel-2); }

  /* Reine Eingabeformulare (Login/Registrierung, Nachricht verfassen,
     Allianz gründen/einladen) müssen auf der jetzt breiteren Inhaltsspalte
     nicht die volle Breite ausnutzen -- sonst wirken einzelne Textfelder
     unnatürlich lang. Listen/Info-Karten (Gebäude, Flotten, Mitglieder, ...)
     bleiben bewusst unangetastet, die profitieren durchaus vom Mehr-Platz. */
  #create-alliance-form, #compose-form, #invite-player-form {
    max-width: 480px;
  }
}