/* ITN Marina App 3.0 – Programm-Ansicht am Rechner (16.10.2026, Wunsch Jens für bootsnavi.de: „ganzer Bildschirm mit übersichtlicher
   Navigation, eher wie ein Windows-Programm“). Nur geladen bei config 'oberflaeche' => 'programm' (<html class="k1-programm">).
   Aufbau ab 1024 px: Titelleiste (Marke · Suche · Glocke · Sprache · Hell/Dunkel · Konto) – links die Seitenleiste mit allen
   Bereichen (einklappbar auf Symbole) – rechts der Arbeitsbereich über die ganze Breite – unten eine Statusleiste.
   Hafenzeile, Bereichsreiter, Aktionskacheln, untere Leiste und Fußzeile entfallen dort (alles steht in der Seitenleiste).
   Unter 1024 px bleibt die normale App (Handy/Tablet). Markup: inc/shell.php (k1_shell_side, k1_shell_pg_tools, k1_shell_pg_status). */

html.k1-programm { --pg-side: 236px; --pg-side-mini: 60px; --pg-title: 52px; --pg-status: 28px;
  --pg-bg: #eef2f6; --pg-panel: #ffffff; --pg-line: #dbe3ea; --pg-ink: #13283b; --pg-muted: #5d6f80;
  --pg-active: #e2eef6; --pg-active-ink: #0b4f8a; --pg-hover: #f1f5f9; }
html.k1-programm[data-theme="dark"] { --pg-bg: #0b141e; --pg-panel: #101b27; --pg-line: #22313f; --pg-ink: #e6eef6; --pg-muted: #9fb2c4;
  --pg-active: rgba(58,166,207,.18); --pg-active-ink: #8fd3f0; --pg-hover: rgba(255,255,255,.05); }

/* Teile der Programm-Ansicht sind unter 1024 px unsichtbar – dort bleibt alles wie bisher */
.pg-side, .pg-status, .pg-search, .pg-tools, .pg-toggle { display: none; }
.pg-body { display: contents; }

@media (min-width: 1024px) {
  /* ── Gerüst: ganze Fensterhöhe, nur der Arbeitsbereich rollt ── */
  html.k1-programm, html.k1-programm body { height: 100%; }
  html.k1-programm body { padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; background: var(--pg-bg); }
  html.k1-programm .ctxbar, html.k1-programm .actionbar, html.k1-programm .tabbar, html.k1-programm .foot,
  html.k1-programm .appbar .cattabs, html.k1-programm .appbar-menu, html.k1-programm .appbar-back { display: none !important; }

  /* ── Titelleiste ── */
  html.k1-programm .appbar { position: relative; flex: none; height: var(--pg-title); box-shadow: 0 1px 0 rgba(0,0,0,.18); z-index: 950; }
  html.k1-programm .appbar-in { max-width: none !important; height: 100%; min-height: 0 !important; padding: 0 12px 0 6px !important;
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap !important; justify-content: flex-start !important; }
  html.k1-programm .pg-toggle { display: inline-flex; position: static !important; min-width: 40px; min-height: 40px; }
  html.k1-programm .appbar .brand { margin: 0 !important; padding: 0; max-width: none; font-size: 17px; width: calc(var(--pg-side) - 58px); }
  html.k1-programm .pg-search { display: flex; align-items: center; gap: 8px; flex: 0 1 520px; height: 34px; margin-left: 8px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 0 10px; color: #fff; }
  html.k1-programm .pg-search:focus-within { background: #fff; color: #13283b; border-color: #fff; }
  html.k1-programm .pg-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; outline: 0; height: 100%; }
  html.k1-programm .pg-search input::placeholder { color: rgba(255,255,255,.75); }
  html.k1-programm .pg-search:focus-within input::placeholder { color: #7a8a99; }
  html.k1-programm .appbar .bell { position: static !important; margin-left: auto; }
  html.k1-programm .pg-tools { display: flex; align-items: center; gap: 6px; }
  html.k1-programm .appbar-in:not(:has(.bell)) .pg-tools { margin-left: auto; }
  html.k1-programm .pg-tools .lang-dd > summary { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; padding: 5px 8px; }
  html.k1-programm .pg-tools .lang-dd > summary:hover { background: rgba(255,255,255,.2); }
  html.k1-programm .pg-tools .icon-btn { min-width: 38px; min-height: 38px; }
  html.k1-programm .pg-user { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 600;
    padding: 7px 12px; border-radius: 8px; background: rgba(255,255,255,.12); max-width: 220px; white-space: nowrap; }
  html.k1-programm .pg-user span { overflow: hidden; text-overflow: ellipsis; }
  html.k1-programm .pg-user:hover { background: rgba(255,255,255,.22); color: #fff; }
  html.k1-programm .pg-login { background: #fff; color: #0b4f8a; }
  html.k1-programm .pg-login:hover { background: #e9f3fa; color: #0b4f8a; }

  /* ── Mitte: Seitenleiste + Arbeitsbereich ── */
  html.k1-programm .pg-body { display: flex; flex: 1 1 auto; min-height: 0; position: relative; }
  html.k1-programm .pg-side { display: flex; flex-direction: column; flex: none; width: var(--pg-side); background: var(--pg-panel);
    border-right: 1px solid var(--pg-line); overflow-y: auto; overflow-x: hidden; transition: width .15s ease; scrollbar-width: thin; }
  html.k1-programm .pg-nav { display: flex; flex-direction: column; padding: 8px 8px 16px; }
  html.k1-programm .pg-grp { margin: 14px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--pg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.k1-programm .pg-item { display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 0 10px; border-radius: 8px;
    color: var(--pg-ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; position: relative; }
  html.k1-programm .pg-item .ic { width: 19px; height: 19px; color: var(--pg-muted); }
  html.k1-programm .pg-item:hover { background: var(--pg-hover); color: var(--pg-ink); }
  html.k1-programm .pg-item.is-active { background: var(--pg-active); color: var(--pg-active-ink); font-weight: 650; }
  html.k1-programm .pg-item.is-active::before { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: #0b6e91; }
  html.k1-programm .pg-item.is-active .ic { color: var(--pg-active-ink); }
  html.k1-programm .pg-item.is-danger, html.k1-programm .pg-item.is-danger .ic { color: #b3261e; }
  html.k1-programm .pg-lbl { overflow: hidden; text-overflow: ellipsis; flex: 1; }
  html.k1-programm .pg-item .badge { min-width: 20px; height: 20px; font-size: .7rem; }

  /* eingeklappt: nur Symbole (Name als Tooltip über title) */
  html.k1-programm.pg-mini .pg-side { width: var(--pg-side-mini); }
  html.k1-programm.pg-mini .pg-lbl, html.k1-programm.pg-mini .pg-item .badge { display: none; }
  html.k1-programm.pg-mini .pg-grp { height: 1px; margin: 10px 8px; padding: 0; background: var(--pg-line); color: transparent; }
  html.k1-programm.pg-mini .pg-item { justify-content: center; padding: 0; }
  html.k1-programm.pg-mini .appbar .brand { width: auto; }

  /* Arbeitsbereich: volle Breite, eigener Bildlauf */
  html.k1-programm main.wrap { flex: 1 1 auto; min-width: 0; max-width: none !important; margin: 0 !important; overflow-y: auto;
    padding: 20px 28px 32px !important; scrollbar-gutter: stable; }
  html.k1-programm main.wrap > * { max-width: 1280px; }
  html.k1-programm #k1-offline { position: absolute; left: calc(var(--pg-side) + 16px); right: 16px; top: 10px; z-index: 20; margin: 0; }

  /* Karten-Seiten (Häfen, Route): Karte füllt die Höhe des Fensters */
  html.k1-programm .map-shell { height: calc(100vh - var(--pg-title) - var(--pg-status) - 190px); min-height: 420px; max-height: none; }

  /* ── Statusleiste ── */
  html.k1-programm .pg-status { display: flex; align-items: center; gap: 16px; flex: none; height: var(--pg-status); padding: 0 14px;
    background: var(--pg-panel); border-top: 1px solid var(--pg-line); color: var(--pg-muted); font-size: 12px; white-space: nowrap; overflow: hidden; }
  html.k1-programm .pg-status a { color: var(--pg-muted); text-decoration: none; }
  html.k1-programm .pg-status a:hover { color: var(--pg-ink); text-decoration: underline; }
  html.k1-programm .pg-gap { flex: 1; }
  html.k1-programm .pg-net { display: inline-flex; align-items: center; gap: 6px; }
  html.k1-programm .pg-net i { width: 8px; height: 8px; border-radius: 50%; background: #2bb36b; box-shadow: 0 0 0 2px rgba(43,179,107,.2); }
  html.k1-programm .pg-net.is-off i { background: #d98b1d; box-shadow: 0 0 0 2px rgba(217,139,29,.2); }
  html.k1-programm .pg-src { overflow: hidden; text-overflow: ellipsis; }
}

/* ── Hafenführer-Karte als geteilte Ansicht (16.10.2026): links Suche, Filter und die Häfen im Kartenausschnitt (rollt),
      rechts die Karte über die ganze Höhe (bleibt stehen). Nur Programm-Ansicht ab 1024 px, Markup unverändert (pages/map.php). ── */
@media (min-width: 1024px) {
  html.k1-programm main.wrap:has(> .map-page) { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    column-gap: 22px; align-content: start; padding-right: 20px !important; }
  html.k1-programm main.wrap:has(> .map-page) > * { grid-column: 1; max-width: none; min-width: 0; }
  html.k1-programm main.wrap:has(> .map-page) > .map-page { display: contents; }
  html.k1-programm main.wrap:has(> .map-page) .map-page > * { grid-column: 1; min-width: 0; }
  html.k1-programm main.wrap:has(> .map-page) .map-page > .map-shell { grid-column: 2; grid-row: 1 / span 40; align-self: start;
    position: sticky; top: 0; height: calc(100vh - var(--pg-title) - var(--pg-status) - 40px); max-height: none; min-height: 420px; }
  html.k1-programm main.wrap:has(> .map-page) .map-shell #k1-map { height: 100%; }
  html.k1-programm main.wrap:has(> .map-page) .map-list { display: block; margin-top: 4px; }
  html.k1-programm main.wrap:has(> .map-page) .page-head { flex-wrap: wrap; gap: 8px; }
  html.k1-programm main.wrap:has(> .map-page) .route-cta { flex-wrap: wrap; }
  html.k1-programm main.wrap:has(> .map-page) .route-cta .btn { margin-left: 0; }
}

/* ── Route planen als geteilte Ansicht (16.10.2026, wie der Hafenführer): links Kopf, Eingaben, Ergebnis, gespeicherte Törns
      (rollt), rechts die Karte mit dem Punkte-Kasten über die ganze Höhe (bleibt stehen). Markup unverändert (pages/route.php). ── */
@media (min-width: 1024px) {
  html.k1-programm main.wrap:has(> .nv-page) { display: grid; grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
    column-gap: 22px; align-content: start; padding-right: 20px !important; }
  html.k1-programm main.wrap:has(> .nv-page) > * { grid-column: 1; max-width: none; min-width: 0; }
  html.k1-programm main.wrap:has(> .nv-page) > .nv-page { display: contents; }
  html.k1-programm main.wrap:has(> .nv-page) .nv-panel { grid-column: 1; }
  html.k1-programm main.wrap:has(> .nv-page) .nv-mapwrap { grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: 0;
    height: calc(100vh - var(--pg-title) - var(--pg-status) - 40px); min-height: 460px; }
  html.k1-programm body.nv-navigating main.wrap:has(> .nv-page) .nv-mapwrap { height: calc(100vh - var(--pg-title) - var(--pg-status) - 40px); }
  html.k1-programm main.wrap:has(> .nv-page) .nv-head .nv-lead { display: block; }
}